1. 20
Adobe Dreamweaver® CS3

2. What you see is what you get (WYSIWYG).
We must select the illusion which appeals to our temperament, and embrace it with passion, if we want to be happy.
—Cyril Connolly
The symbolic view of things is a consequence of long absorption in images. Is sign language the real language of Paradise?
—Hugo Ball
What you see is what you get (WYSIWYG).
—Anonymous
All human knowledge takes the form of interpretation.
—Walter Benjamin

3. OBJECTIVES In this chapter you will learn:
To use Dreamweaver CS3 effectively.
To develop web pages in a visual environment.
To insert images and links into web pages.
To create XHTML elements such as tables and forms.
To insert scripts into Dreamweaver pages.
To use the Spry framework to create richer, more dynamic web applications.
To use Dreamweaver’s site-management capabilities.

4. 20.1    Introduction
20.2    Adobe Dreamweaver CS3
20.3    Text Styles
20.4    Images and Links
20.5    Symbols and Lines
20.6    Tables
20.7    Forms
20.8    Scripting in Dreamweaver
20.9    Dreamweaver’s Spry Framework for Creating Dynamic Websites and Working with Ajax
20.10  Site Management

5. 20.1 Introduction
HTML editors assist in creating visually appealing websites
Insert and edit text
Create more complex XHTML elements, such as tables, forms and frames
Adobe Dreamweaver CS3 is a popular HTML editor

6. 20.2 Adobe Dreamweaver CS3 Workspace Setup Start page WYSIWYG
Design vs. code view
Start page
Offers helpful options
Create new HTML document
WYSIWYG
What you see is what you get
Displays XHTML as browser would

7. Fig. 20.1 | Dreamweaver Start Page.

8. Fig. 20.2 | Dreamweaver’s editing environment.

9. 20.2 Adobe Dreamweaver CS3 Creating a new document
File > New... or
Select HTML under the Create New heading of the Start Page
Select Blank Page tab, then HTML from the Page Type: list
Set DocType to XHMTL 1.0 Strict to make XHTML compliant code
Select the Create button

10. 20.2 Adobe Dreamweaver CS3 Adding text Changing page title
Type in Document window
Automatically enclosed in <p> tag
Changing page title
Right-click in Document window or select the Page Properties button the Property Inspector
Select Page Properties
Title/Encoding
File > Preview in browser

11. Fig. 20.3 | New Document dialog.

12. Fig. 20.4 | Page Properties dialog.

13. Fig. 20.5 | Example of Fig. 4.1 in Dreamweaver.

14. 20.2 Adobe Dreamweaver CS3 Code View Code is colored
Document toolbar
Code is colored
Customizable by Edit > Preferences > Code Coloring

15. Fig | Document toolbar.

16. Fig | Code view.

17. 20.2 Dreamweaver Adobe CS3 Saving your work Create new folder
File > Save
Create new folder
File name field
HTML Documents file type (file extension .html)

18. Fig | Save As dialog.

19. 20.3 Text Styles Possible to apply styles to text in design view
Similar to using word processor
Highlight portion of text
Select style or formatting to apply
Header tags
List tags
Alignment tags (center, left, right, justified)
Changes reflected in code view

20. Fig. 20.9 | Applying heading tags and centering using Dreamweaver.

21. 20.3 Text Styles Other styles Lists can be created in design mode
<code> for formulas and code
<sup> for superscript
Exponents
Lists can be created in design mode
<ul> for unordered lists
<dl> for definition lists
<dt> definition term
<dd> definition data

22. Fig. 20.10 | Styling text using code and sup elements.

23. Fig. 20.11 | List creation in Dreamweaver.

24. Software Engineering Observation 20.1
Dreamweaver uses text-manipulation techniques that sometimes produce inefficient code. Make sure to check the code often to know exactly the kind of XHTML Dreamweaver is producing. Thorough knowledge of a page and what XHTML elements are present is necessary for advanced scripting.

25. Look-and-Feel Observation 20.1
When you press Enter after typing text in Design view, Dreamweaver encloses that text in a new paragraph <p> element. If you want to insert only a <br /> tag into a page, hold Shift while pressing Enter.

26. Look-and-Feel Observation 20.2
You can manipulate the properties of almost any element displayed in the Dreamweaver window by right clicking an element and selecting its properties from the menu that pops up.

27. Fig. 20.12 | Definition list inserted using the Text menu.

28. 20.3 Text Styles
The CSS Styles panel designates new styling for tags selections such as an unordered list or ordered list
New CSS Rule... Dialog defines style elements

29. Fig | CSS Styles Panel.

30. Fig. 20.14 | List with styles applied using CSS.

31. 20.4 Images and Links Inserting images
Insert > Image or Image button on Insert bar
Select Image Source dialog
Browse to desired image
URL generated by Dreamweaver

32. Fig. 20.15 | Image source selection in Dreamweaver.

33. 20.4 Text and Links Adding links Other properties available to change
Highlight text or image
Enter destination URL into Link field of Property inspector
Other properties available to change
Height
Width
Alignment

34. Fig. 20.16 | Image properties in the Property Inspector.

35. 20.5 Symbols and Lines Special symbols
Possible to add characters not on keyboard
Insert > HTML > Special Characters > Other…
Insert Other Character dialog
Useful for equations or characters not part of English alphabet

36. Fig. 20.17 | Insert Other Characters dialog.

37. Software Engineering Observation 20.2
When you insert a local image into an unsaved document, Dreamweaver sets an absolute path, such as file:///C|/Dreamweaver sites/camel.gif. Saving the document sets the image source to a relative path, starting at the folder in which the document is saved (e.g., camel.gif).

38. 20.5 Symbols and Lines Representing an equation
Use special characters for any symbols
Insert > HTML > Horizontal Rule
Adds an <hr> tag
Width
Height
Align

39. Fig. 20.18 | Horizontal Rule properties.

40. Fig. 20.19 | Special characters and hr elements in Dreamweaver.

41. 20.6 Tables Creating tables Often confusing process
Possible to create graphically in Dreamweaver
Insert > Table
Specify rows, columns and appearance

42. Fig. 20.20 | Insert Table dialog.

43. 20.6 Tables Manipulating tables Drag borders to resize
Change background or border color
Delete, split, merge cells
Tag selector
<td> tag
Merge button
Alternatively, right-click, Table > Merge Cells

44. Fig. 20.21 | Table with two rows and two columns.

45. Fig. 20.22 | Table Property Inspector.

46. Fig | Split Cell dialog.

47. Fig. 20.24 | Merging cells in a table.

48. Fig. 20.25 | Almost completed table.

49. 20.7 Forms Forms in Dreamweaver Form elements
Represented by dotted line
Anything inside lines belongs to that form
Insert > Form or Forms on Insert bar
Form elements
Insert bar
Property inspector

50. Fig | Forms Insert bar.

51. Fig. 20.27 | Text field Property Inspector.

52. 20.7 Forms Form elements, cont. Textareas List/Menu
Scrollable text fields
Numlines
Wrap
List/Menu
Drop-down selection menu
List Values
Items and values
Initially selected property

53. Fig. 20.28 | List Values dialog box.

54. 20.7 Forms Creating a feedback form Text fields List/Value menu
Textarea
Radio group
Radio buttons
Buttons
action and method fields

55. Fig | Completed form.

56. 20.8 Scripting in Dreamweaver
Adding JavaScript to a Web page
Window > Behaviors
Select element
Click + button
Select action
Editing events
Change event or action in Behaviors window

57. Fig. 20.30 | Behaviors panel and menu to add behaviors.

58. 20.8 Scripting in Dreamweaver
Other supported languages
ASP.NET
JSF
PHP
Also found in Window menu

59. 20.9 Dreamweaver’s Spry Framework for Creating Dynamic Websites and Working with Ajax
Many toolkits available that provide prebuilt controls to enhance web applications
Dreamweaver’s new Spry Framework
Develop dynamic and robust web pages
Only need basic knowledge of HTML, CSS and JavaScript
Framework includes
JavaScript library with prebuilt, but customizable, widgets
Textarea
Textfield
Menu Bar
Effects
Grow
Shrink
Fade
Highlight
Ajax capabilities

60. 20.9 Dreamweaver’s Spry Framework for Creating Dynamic Websites and Working with Ajax
Use Ajax and the Spry framework to check for errors in any given field
Real-time error checking
Server receives information on a field by field basis
Corrections can be made instantly
Reduces amount of information sent back-and-forth between client and server

61. Fig | Spry Tools.

62. Fig. 20.32 | Inserting Spry Validation Text Fields.

63. Fig. 20.33 | Using a Spry Text Field to validate data before continuing to fill out a form.

64. 20.10 Site Management Dreamweaver site management tools
Window > Files
Manage Sites dialog
Create new site
Manage existing site
Site Definition Wizard
Assets panel