1. Chapter A - Getting Started with Dreamweaver MX 2004

2. Chapter A - Getting Started with Dreamweaver MX 2004
OVERVIEW
Chapter Lessons
Create head content and set page properties
Create, import, and format text
Add links to Web pages
Use the History panel and edit code
Modify and test Web pages
Macromedia Dreamweaver 8 Revealed

3. Understanding Page Layout
Chapter A - Getting Started with Dreamweaver MX 2004
INTRODUCTION
Understanding Page Layout
Use white space effectively
Limit multimedia elements
Keep it simple
Use an intuitive navigation structure
Apply a consistent theme
Macromedia Dreamweaver 8 Revealed

4. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Create Head Content
A Web page is composed of two sections:
Head
Includes the page title and meta tags which are not visible to the Web browser
Body
Contains text, graphics, and links
Macromedia Dreamweaver 8 Revealed

5. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Create Head Content
Title
Browser title bar
Keywords
Search
Description
Search results
Macromedia Dreamweaver 8 Revealed

6. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Web Page Properties
Background color
Font color
Link colors (unvisited, visited)
Default:
Unvisited  blue
Visited  purple
Macromedia Dreamweaver 8 Revealed

7. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Web-Safe Colors
Two palettes
Color Cubes
Continuous Tone
216 colors
FIGURE 1 Color picker showing color palettes
Macromedia Dreamweaver 8 Revealed

8. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 2 Viewing the head content
Head content section
Title text box on Document toolbar
Title icon
Meta icon
Macromedia Dreamweaver 8 Revealed

9. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 7 Head content displayed in Code view
Opening HTML tag
Head tag
Keyword tags
Description
Description tags
Macromedia Dreamweaver 8 Revealed

10. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Background color box
Strikethrough button
White
Hexadecimal number for white
FIGURE 8 Page Properties dialog box
Macromedia Dreamweaver 8 Revealed

11. Create, Import and Format Text
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Create, Import and Format Text
To add text to a Dreamweaver page
Type in Dreamweaver
Copy/paste [Ctrl][C] and [Ctrl][V] (Windows) [C] and [V] (Macintosh)
Import Word document
Macromedia Dreamweaver 8 Revealed

12. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Web Fonts
Browsers use visitor’s fonts
Font combinations
Serif and sans-serif k K k K
Graphic text for unusual fonts
Macromedia Dreamweaver 8 Revealed

13. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
FIGURE Formatting the address on The Striped Umbrella home page
Selected address text
Italic button
Font list arrow
Size list arrow
Macromedia Dreamweaver 8 Revealed

14. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Changing Font Sizes
Default base font: 3
Select font in Property inspector
Choose between 1 and 7
Change font size relative to the default base size
Macromedia Dreamweaver 8 Revealed

15. Formatting Paragraphs
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Formatting Paragraphs
Format
As text
As different sizes of headings
Headings
Heading 1 is the largest
Heading 6 is the smallest
<h1>This is a big heading</h1>
Macromedia Dreamweaver 8 Revealed

16. Using HTML Tags or Using CSS
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Using HTML Tags or Using CSS
Cascading Style Sheets (CSS)
Standard practice to handle formatting and placement of objects
More on this later…
Disable this preference temporarily
Macromedia Dreamweaver 8 Revealed

17. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Web Filenames
Do not use
Spaces
Special characters
Punctuation
Uppercase letters
Macromedia Dreamweaver 8 Revealed

18. Importing Microsoft Office Documents
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Importing Microsoft Office Documents
File  Import  Word Document
Select file to be imported into Dreamweaver
Commands  Clean Up Word HTML
Macromedia Dreamweaver 8 Revealed

19. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Settings
Clean up HTML from list arrow
FIGURE Clean Up Word HTML dialog box
Macromedia Dreamweaver 8 Revealed

20. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Add Links to Web Pages
Links
FIGURE Coca-Cola Web site
Macromedia Dreamweaver 8 Revealed

21. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Link Properties
Link names should be informative
Point of contact – mailto: link
Two types
Hypertext
Graphic
Formatting properties should be consistent
Address or path: relative or absolute
Macromedia Dreamweaver 8 Revealed

22. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Broken Links
Typos
Pages move
Sites move
Sites expire
Macromedia Dreamweaver 8 Revealed

23. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Navigation Bars
Contain links to the main pages
Usually located at top of side of page
Backbone of the site’s navigation structure
Macromedia Dreamweaver 8 Revealed

24. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
FIGURE Viewing the navigation bar
Navigation bar
Macromedia Dreamweaver 8 Revealed

25. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
FIGURE Selecting the Home link
Selected text
Browse for file icon
Link text box
Macromedia Dreamweaver 8 Revealed

26. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Link (mailto:)
Text for link on the page
Link information
FIGURE Link dialog box
Macromedia Dreamweaver 8 Revealed

27. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Collapse to show only
local or remote site button
link
Four pages linked
to home page
FIGURE The Striped Umbrella site map
Macromedia Dreamweaver 8 Revealed

28. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Use the History panel
History panel properties:
Each task is called a step
50 steps
Preferences adds more
Be careful…
Increasing steps uses memory
Macromedia Dreamweaver 8 Revealed

29. History Panel Functions
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
History Panel Functions
Undo
Redo
Replay
FIGURE The History panel
Click in the gray bar
next to a step to undo
to that step
Slider
Macromedia Dreamweaver 8 Revealed

30. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE Viewing the View Options menu in the Code Inspector
View options list arrow
Code for horizontal rule
View options menu
Macromedia Dreamweaver 8 Revealed

31. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE Viewing the Reference panel
Information on HR tag
Macromedia Dreamweaver 8 Revealed

32. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE Insert Date dialog box
Date formats
Update automatically
on save check box
Macromedia Dreamweaver 8 Revealed

33. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE Viewing the date object in Code view
Code for date object
Macromedia Dreamweaver 8 Revealed

34. Modify and Test Web Pages
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Modify and Test Web Pages
Proofread
Choose window size
Verify links
Macromedia Dreamweaver 8 Revealed

35. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
FIGURE Window screen sizes
Macromedia Dreamweaver 8 Revealed

36. Default Window Screen Sizes
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Default Window Screen Sizes
Macromedia Dreamweaver 8 Revealed

37. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Testing Pages
Monitors
Size and resolution
Platforms
UNIX, Mac, PC
Browsers
Explorer, Netscape, Firefox
Macromedia Dreamweaver 8 Revealed

38. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
“Under Construction”
Don’t do it!
Only causes frustration to the end user
Macromedia Dreamweaver 8 Revealed

39. Chapter A - Getting Started with Dreamweaver MX 2004
SUMMARY
Chapter 2 Tasks
Create head content and set page properties
Create, import, and format text
Add links to Web pages
Use the History panel and edit code
Modify and test Web pages
Macromedia Dreamweaver 8 Revealed