1. Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH

2. Chapter 42Macromedia Dreamweaver 8 Revealed 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 Chapter Lessons

3. Chapter 43Macromedia Dreamweaver 8 Revealed 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 e-mail addresses

4. Chapter 44Macromedia Dreamweaver 8 Revealed Create Links Create external links –Absolute paths Create internal links –Relative paths

5. Chapter 45Macromedia Dreamweaver 8 Revealed

6. Chapter 46Macromedia Dreamweaver 8 Revealed 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

7. Chapter 47Macromedia Dreamweaver 8 Revealed FIGURE 1 An example of an absolute path

8. Chapter 48Macromedia Dreamweaver 8 Revealed Selected text URL for link FIGURE 3 Creating an external link to the Blue Angels Web site

9. Chapter 49Macromedia Dreamweaver 8 Revealed 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

10. Chapter 410Macromedia Dreamweaver 8 Revealed 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

11. Chapter 411Macromedia Dreamweaver 8 Revealed FIGURE 2 An example of a relative path

12. Chapter 412Macromedia Dreamweaver 8 Revealed FIGURE 5 Creating an internal link on the activities page Text to be used for link Relative path Browse for File icon

13. Chapter 413Macromedia Dreamweaver 8 Revealed 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

14. Chapter 414Macromedia Dreamweaver 8 Revealed FIGURE 7 Named Anchor button on the Insert bar Named Anchor button Named Anchor Text used for link to named anchor Link to named anchor Point to File icon

15. Chapter 415Macromedia Dreamweaver 8 Revealed FIGURE 8 Named Anchor dialog box Name of new anchor

16. Chapter 416Macromedia Dreamweaver 8 Revealed FIGURE 10 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

17. Chapter 417Macromedia Dreamweaver 8 Revealed 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

18. Chapter 418Macromedia Dreamweaver 8 Revealed Flash Text + link path + rollover Text

19. Chapter 419Macromedia Dreamweaver 8 Revealed Inserting Flash Text FIGURE 12 Media menu on the Insert bar

20. Chapter 420Macromedia Dreamweaver 8 Revealed Inserting Flash Text

21. Chapter 421Macromedia Dreamweaver 8 Revealed FIGURE 13 Insert Flash Text dialog box Color text box Font list arrow Size text box Rollover color text box Target list arrow Text text box Link text box Save as text box

22. Chapter 422Macromedia Dreamweaver 8 Revealed FIGURE 14 Flash category on the Assets panel Flash button Flash text file Click play button to preview Flash text

23. Chapter 423Macromedia Dreamweaver 8 Revealed 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

24. Chapter 424Macromedia Dreamweaver 8 Revealed 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

25. Chapter 425Macromedia Dreamweaver 8 Revealed 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

26. Chapter 426Macromedia Dreamweaver 8 Revealed 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

27. Chapter 427Macromedia Dreamweaver 8 Revealed FIGURE 16 Ohio Historical Society Web site Navigation bar with rollovers

28. Chapter 428Macromedia Dreamweaver 8 Revealed 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

29. Chapter 429Macromedia Dreamweaver 8 Revealed FIGURE 17 Insert Navigation Bar dialog box Element name text box Graphic file selected for Up image state Insert list arrow Remove check mark Click to select an image for each element state Add button

30. Chapter 430Macromedia Dreamweaver 8 Revealed FIGURE 22 Changing settings for the activities element Show “Down image” initially is selected

31. Chapter 431Macromedia Dreamweaver 8 Revealed FIGURE 23 about us page with the modified navigation bar

32. Chapter 432Macromedia Dreamweaver 8 Revealed 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

33. Chapter 433Macromedia Dreamweaver 8 Revealed Manage Web Site Links Check Links Sitewide feature –Internal links –External links –Named anchors –Graphic files –Orphaned files View results in Link Checker panel

34. Chapter 434Macromedia Dreamweaver 8 Revealed FIGURE 24 Link Checker panel displaying external links Show list arrow External links displayed

35. Chapter 435Macromedia Dreamweaver 8 Revealed FIGURE 25 Link Checker panel displaying no orphaned files Show list arrow No orphaned files shown

36. Chapter 436Macromedia Dreamweaver 8 Revealed FIGURE 26 Assets panel displaying links URLs button External links for The Striped Umbrella Web site

37. Chapter 437Macromedia Dreamweaver 8 Revealed 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