Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Macromedia Dreamweaver 8 Revealed WORKING WITH LINKS 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 Chapter 4 2 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 Macromedia Dreamweaver 8 Revealed Chapter 4 3 Create Links Create external links – Absolute paths Create internal links – Relative paths Macromedia Dreamweaver 8 Revealed Chapter 4 4 Macromedia Dreamweaver 8 Revealed Chapter 4 5 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 Chapter 4 6 FIGURE 1 An example of an absolute path Macromedia Dreamweaver 8 Revealed Chapter 4 7 FIGURE 3 Creating an external link to the Blue Angels Web site Selected text Macromedia Dreamweaver 8 Revealed URL for link Chapter 4 8 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 Chapter 4 9 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 Chapter 4 10 FIGURE 2 Macromedia Dreamweaver 8 Revealed An example of a relative path Chapter 4 11 FIGURE 5 Text to be used for link Creating an internal link on the activities page Browse for File icon Relative path Macromedia Dreamweaver 8 Revealed Chapter 4 12 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 Chapter 4 13 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 Chapter 4 14 FIGURE 8 Named Anchor dialog box Name of new anchor Macromedia Dreamweaver 8 Revealed Chapter 4 15 FIGURE 10 Dragging the Point to File icon to a named anchor Point to File icon dragged to named anchor Named anchor preceded by # Macromedia Dreamweaver 8 Revealed Point to File icon Chapter 4 16 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 Chapter 4 17 Flash Text Text + link path + rollover Macromedia Dreamweaver 8 Revealed Chapter 4 18 Inserting Flash Text FIGURE 12 Macromedia Dreamweaver 8 Revealed Media menu on the Insert bar Chapter 4 19 Inserting Flash Text Macromedia Dreamweaver 8 Revealed Chapter 4 20 FIGURE 13 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 Chapter 4 21 FIGURE 14 Flash category on the Assets panel Flash button Click play button to preview Flash text Flash text file Macromedia Dreamweaver 8 Revealed Chapter 4 22 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 Chapter 4 23 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 Chapter 4 24 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 Chapter 4 25 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 Chapter 4 26 FIGURE 16 Ohio Historical Society Web site Navigation bar with rollovers Macromedia Dreamweaver 8 Revealed Chapter 4 27 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 Chapter 4 28 Add button FIGURE 17 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 Chapter 4 29 FIGURE 22 Changing settings for the activities element Show “Down image” initially is selected Macromedia Dreamweaver 8 Revealed Chapter 4 30 FIGURE 23 about us page with the modified navigation bar Macromedia Dreamweaver 8 Revealed Chapter 4 31 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 Chapter 4 32 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 Chapter 4 33 FIGURE 24 Link Checker panel displaying external links External links displayed Macromedia Dreamweaver 8 Revealed Chapter 4 Show list arrow 34 FIGURE 25 Link Checker panel displaying no orphaned files Show list arrow No orphaned files shown Macromedia Dreamweaver 8 Revealed Chapter 4 35 FIGURE 26 Assets panel displaying links External links for The Striped Umbrella Web site URLs button Macromedia Dreamweaver 8 Revealed Chapter 4 36 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 Chapter 4 37