1. Chapter A - Getting Started with Dreamweaver MX 2004

2. Chapter A - Getting Started with Dreamweaver MX 2004
OVERVIEW
Chapter Lessons
Create external and internal links
Create internal links to named anchors
Insert rollovers with Flash text
Create, modify, and copy a navigation bar
Manage Web site links
Macromedia Dreamweaver 8 Revealed

3. Understanding Internal and External Links
Chapter A - Getting Started with Dreamweaver MX 2004
INTRODUCTION
Understanding Internal and External Links
Web Pages contain two types of links
Internal or relative: links to Web pages in the same Web site
External or absolute: links to Web pages on other Web sites or to addresses
Macromedia Dreamweaver 8 Revealed

4. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Create Links
Create external links
Absolute paths
Create internal links
Relative paths
Macromedia Dreamweaver 8 Revealed

5. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Macromedia Dreamweaver 8 Revealed

6. Creating External Links
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Creating External Links
Steps
Select the text or object that you want to serve as a link
Type the absolute path to the destination Web page in the Link text box in the Property inspector
Macromedia Dreamweaver 8 Revealed

7. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 1 An example of an absolute path
Macromedia Dreamweaver 8 Revealed

8. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 3 Creating an external link to the Blue Angels Web site
Selected text
URL for link
Macromedia Dreamweaver 8 Revealed

9. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 4 Site map displaying external links on the activities page
Four internal links
from the activities
page navigation bar
Two external links on
the activities page
Macromedia Dreamweaver 8 Revealed

10. Creating Internal Links
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
Creating Internal Links
Steps
Select the text element or graphic object that you want to make a link
Use the Browse for File icon next to the Link text box in the Property inspector to specify the relative path to the destination page
Macromedia Dreamweaver 8 Revealed

11. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 2 An example of a relative path
Macromedia Dreamweaver 8 Revealed

12. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 1
FIGURE 5 Creating an internal link on the activities page
Text to be used for link
Relative path
Browse for File icon
Macromedia Dreamweaver 8 Revealed

13. Create Internal Links to Named Anchors
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
Create Internal Links to Named Anchors
Named anchor: specific location on a Web page that has a descriptive name
Acts as a target for internal links
Target: location on the Web page that a browser displays when internal link is clicked
Macromedia Dreamweaver 8 Revealed

14. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
FIGURE 7 Named Anchor button on the Insert bar
Named Anchor button
Text used for link to named anchor
Named Anchor
Point to File icon
Link to named anchor
Macromedia Dreamweaver 8 Revealed

15. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
FIGURE 8 Named Anchor dialog box
Name of new anchor
Macromedia Dreamweaver 8 Revealed

16. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 2
FIGURE Dragging the Point to File icon to a named anchor
Point to File icon dragged to named anchor
Named anchor preceded by #
Point to File icon
Macromedia Dreamweaver 8 Revealed

17. Insert Rollovers with Flash Text
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Insert Rollovers with Flash Text
Flash text is a vector-based graphic file that contains text
Flash text allows you to add visual interest to an otherwise “dull” Web page
Flash text files are saved with the .swf file extension
Macromedia Dreamweaver 8 Revealed

18. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Flash Text
graphic.swf
Text
+ link path
+ rollover
Macromedia Dreamweaver 8 Revealed

19. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Inserting Flash Text
FIGURE Media menu on the Insert bar
Macromedia Dreamweaver 8 Revealed

20. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
Inserting Flash Text
Macromedia Dreamweaver 8 Revealed

21. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
FIGURE Insert Flash Text dialog box
Font list arrow
Size text box
Color text box
Rollover color text box
Text text box
Link text box
Target list arrow
Save as text box
Macromedia Dreamweaver 8 Revealed

22. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 3
FIGURE Flash category on the Assets panel
Flash button
Click play button to
preview Flash text
Flash text file
Macromedia Dreamweaver 8 Revealed

23. Create a Navigation Bar
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Create a Navigation Bar
Allow you to create a more visually appealing method for navigation that utilizes graphics rather than text
Can be created in many different graphics programs including Macromedia Fireworks or Adobe Illustrator
Macromedia Dreamweaver 8 Revealed

24. Create a Navigation Bar
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Create a Navigation Bar
Navigation bar elements can have four possible states
A state is the condition of the element relative to the mouse pointer
There are four mouse states
Macromedia Dreamweaver 8 Revealed

25. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Mouse States
Up: mouse pointer is not on top of the element
Over: mouse pointer is positioned on top of the element
Down: when you click the element
Over while down: when you click the element and continue pressing and holding the mouse button
Macromedia Dreamweaver 8 Revealed

26. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Navigation Bars
Can place only one navigation bar on a Web page using the Insert Navigation Bar dialog box
Multiple links
Four rollover states
Up, over, down, and over while down
Macromedia Dreamweaver 8 Revealed

27. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE Ohio Historical Society Web site
Navigation bar with rollovers
Macromedia Dreamweaver 8 Revealed

28. Modify and Copy a Navigation Bar
Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Modify and Copy a Navigation Bar
Create a navigation bar using images
Add elements to a navigation bar
Copy and paste a navigation bar
Copy and Paste from menu bar
Customize a navigation bar
To change orientation, you must start over
Macromedia Dreamweaver 8 Revealed

29. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Add button
FIGURE Insert Navigation Bar dialog box
Element name text box
Graphic file selected for Up image state
Click to select an image for each element state
Insert list arrow
Remove check mark
Macromedia Dreamweaver 8 Revealed

30. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE Changing settings for the activities element
Show “Down image” initially is selected
Macromedia Dreamweaver 8 Revealed

31. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
FIGURE about us page with the modified navigation bar
Macromedia Dreamweaver 8 Revealed

32. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 4
Create an Image Map
Another way to create navigation links for Web pages is to create an image map
Image map: graphic that has one or more hot spots placed on top of it
Hotspot: area on a graphic that, when clicked, links to different locations on the page or to another Web page or Web site
Macromedia Dreamweaver 8 Revealed

33. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
Manage Web Site Links
Check Links Sitewide feature
Internal links
External links
Named anchors
Graphic files
Orphaned files
View results in Link Checker panel
Macromedia Dreamweaver 8 Revealed

34. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
FIGURE Link Checker panel displaying external links
Show list arrow
External links displayed
Macromedia Dreamweaver 8 Revealed

35. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
FIGURE Link Checker panel displaying no orphaned files
Show list arrow
No orphaned files shown
Macromedia Dreamweaver 8 Revealed

36. Chapter A - Getting Started with Dreamweaver MX 2004
LESSON 5
FIGURE Assets panel displaying links
External links
for The Striped
Umbrella Web site
URLs button
Macromedia Dreamweaver 8 Revealed

37. Chapter A - Getting Started with Dreamweaver MX 2004
SUMMARY
Chapter 4 Tasks
Create external and internal links
Create internal links to named anchors
Insert rollovers with Flash text
Create, modify, and copy a navigation bar
Manage Web site links
Macromedia Dreamweaver 8 Revealed