1. Chapter 19 – Macromedia Dreamweaver MX 2004
Outline
Introduction
Macromedia Dreamweaver MX 2004
Text Styles
Images and Links 19.5 Symbols and Lines
Tables
Forms
Scripting in Dreamweaver
Site Management
19.10 Web Resources

2. In this tutorial, you will learn:
Objectives
In this tutorial, you will learn:
To be able to use Dreamweaver MX 2004 effectively.
To develop Web pages in a visual environment.
To insert images and links into Web pages.
To use Dreamweaver to create advanced XHTML elements such as tables and forms.
To be able to insert scripts into Dreamweaver pages.
To be able to use Dreamweaver’s site-management capabilities.

3. Designing successful sites is a huge job
19.1 Introduction
Designing successful sites is a huge job
Constantly require updates and maintenance
Must be visually appealing
New tools designed to help build and maintain sites
Not complete replacements for understanding XHTML code
Dreamweaver MX 2004 is one popular tool

4. 19.2 Macromedia Dreamweaver 2004 MX
Workspace Setup
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

5. 19.2 Macromedia Dreamweaver 2004 MX
Insert menu
Hyperlink
Table
Image
Media
Templates
Tag chooser
Fig Dreamweaver editing environment.
Insert bar
Panels
Document toolbar
Document window
Files panel
Tag selector
Text alignment
Text style
Font
Text size
Text color
Property Inspector

6. 19.2 Macromedia Dreamweaver 2004 MX
Creating new document
File > New
Categories
Basic page
Dynamic page
Template page
Other
CSS Style Sheets
Framesets
Page Designs (CSS)
Page Designs
Page Designs (Accessible)

7. 19.2 Macromedia Dreamweaver 2004 MX
Creating new document, cont.
Make document XHTML compliant checkbox
Create button

8. 19.2 Macromedia Dreamweaver 2004 MX
Adding text
Type in Document window
Automatically enclosed in <p> tag
Changing page title
Right-click in Document window
Select Page Properties
Title/Encoding
File > Preview in browser

9. 19.2 Macromedia Dreamweaver 2004 MX
Fig Page Properties dialog.
Page font
Category list
Text Size
Text color
Background color
Background image

10. 19.2 Macromedia Dreamweaver 2004 MX
Fig Example of Fig 4.1 in Dreamweaver.

11. 19.2 Macromedia Dreamweaver 2004 MX
Code View
Document toolbar
Code is colored
Customizable by Edit > Preferences > Code Coloring

12. 19.2 Macromedia Dreamweaver 2004 MX
Fig Document toolbar.
File name
Code and Design view
File management
View in browser
View options
Code view
Design view
Page Title
Refresh design view

13. 19.2 Macromedia Dreamweaver 2004 MX
Fig Code view.

14. 19.2 Macromedia Dreamweaver 2004 MX
Saving your work
File > Save
Create new folder
File name field
HTML Documents file type

15. 19.2 Macromedia Dreamweaver 2004 MX
Fig Save As dialog.

16. Possible to apply styles to text in design view
19.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

17. Styles sample (1 of 1)

18. 19.3 Text Styles
Fig Applying header tags and centering using Dreamweaver.

19. Lists can be created in design mode
19.3 Text Styles
Other styles
Text > Style
<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

20. 19.3 Text Styles
Fig List creation in Dreamweaver.

21. Definition list (1 of 1)

22. 19.3 Text Styles
Fig Definition list inserted using the Text menu.

23. 19.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

24. 19.4 Images and Links
Fig Image source selection in Dreamweaver.

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

26. Image name (for scripting)
19.4 Images and Links
Fig Image properties in the Property inspector.
Width
Height
Image source
Image name (for scripting)
Hyperlink
Align

27. 19.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

28. 19.5 Symbols and Lines
Fig Insert Other Characters dialog.

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

30. 19.5 Symbols and Lines Insert menu Horizontal rule
Fig Using the Insert menu to alter the Insert bar’s appearance.
Insert menu
Horizontal rule

31. 19.5 Symbols and Lines Width Height Percent or pixels Alignment
Fig Horizontal rule properties.
Width
Height
Percent or pixels
Alignment

32. 19.5 Symbols and Lines
Fig Special characters and hr elements in Dreamweaver.

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

34. 19.6 Tables Rows Columns Table width Border thickness Cell padding
Fig Insert Table dialog.
Rows
Columns
Table width
Border thickness
Cell padding
Cell spacing
Header options
Accessibility options

35. 19.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

36. 19.6 Tables
Fig Table with two rows and two columns.
Tag selector

37. 19.6 Tables Merge cells Split cells Alignment Background color
Fig Table Property inspector.
Merge cells
Split cells
Alignment
Background color
Border color
Fig Split Cell dialog.

38. 19.6 Tables
Fig Table Property inspector.

39. 19.6 Tables
Fig Almost completed table.

40. 19.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

41. 19.7 Forms Text field Textarea Radio button List/Menu Image field
Fig Forms Insert bar.
Text field
Textarea
Radio button
List/Menu
Image field
Button
Field set
Form
Hidden field
Checkbox
Radio group
Jump menu
File field
Label

42. 19.7 Forms Text field type Width Name and id Maximum characters
Fig Text field Property inspector.
Text field type
Width
Name and id
Maximum characters
Initial value

43. 19.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

44. 19.7 Forms List Values Name and id Item Label Item Value
Fig List Values dialog box.
List Values
Name and id
Item Label
Item Value

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

46. 19.7 Forms
Fig Completed form.

47. 19.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

48. 19.8 Scripting in Dreamweaver
Fig Behaviors panel and add behaviors menu.
Behaviors tab
Add behavior
Remove behavior
Event
Action

49. 19.8 Scripting in Dreamweaver
Other supported languages
ASP
ColdFusion
PHP
JSP
Also found in Window menu

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