Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 - Illustrated Creating Links and Navigation Bars

Unit Objectives • Understand links and paths • Create an external link • Create an internal link • Insert a named anchor • Create internal links to named anchors Adobe Dreamweaver CS4 - Illustrated

Unit Objectives • Create a navigation bar with images • Modify a navigation bar • Copy a navigation bar to other pages in a Web site • Create an image map • Manage Web site links Adobe Dreamweaver CS4 - Illustrated

Understanding Links and Paths • Absolute paths • Relative paths • Root-relative paths • Document-relative paths Adobe Dreamweaver CS4 - Illustrated

Understanding Links and Paths Adobe Dreamweaver CS4 - Illustrated

Creating an External Link • Open the The Striped Umbrella Web site, open dwf_1.html from the drive and folder where your Unit F Data Files are stored, then save it as activities.html in the striped_umbrella root folder, overwriting the existing file but not updating links • Close dwf_1.html • Select the leftmost broken image, click the Browse for File icon next to the Src text box in the Property inspector, select the heron_waiting.jpg in the Data Files assets folder to save the image in your assets folder, then click to the right of the placeholder • Repeat the step 3 for the second image, two_dolphins.jpg Adobe Dreamweaver CS4 - Illustrated

Creating an External Link • Attach the su_styles.css file, then apply the body_text style to the paragraphs of text on the page (not to the navigation bar) • Scroll to the bottom of the page, then select the text Blue Angels • Click the Link text box in the HTML Property inspector, type http://www.blueangels.navy.mil, then press [Tab] • Click File on the Application bar (Win) or Menu bar (Mac), click Save, click the Preview/Debug in browser button, click Preview in [your browser], click Blue Angels on the Web page, verify that the link works, then close your browser Adobe Dreamweaver CS4 - Illustrated

Creating an External Link • Repeat steps 6 and 7 to create the link for the USS Alabama text in the last paragraph: http://www.ussalabama.com • Save your work • Preview the page in the browser to test the USS Alabama link • Close the browser Adobe Dreamweaver CS4 - Illustrated

Creating an External Link Adobe Dreamweaver CS4 - Illustrated

Creating an Internal Link • Using Figure F-4 as a reference, select fishing excursions in the third paragraph • Click the Browse for File icon next to the Link text box in the HTML Property inspector, make sure the Relative To box is set to Document, then double-click fishing.html in The Striped Umbrella root folder in the Select File dialog box • Select dolphin cruises in the same sentence Adobe Dreamweaver CS4 - Illustrated

Creating an Internal Link • Click the Browse for File icon in the Property inspector, then double-click cruises.html in the Select File dialog box • Save your work • Close the activities page Adobe Dreamweaver CS4 - Illustrated

Creating an Internal Link Adobe Dreamweaver CS4 - Illustrated

Inserting a Named Anchor • Open the spa.html page, click The Striped Umbrella banner, then press the left arrow key on your keyboard to place the insertion point directly before the banner • Click View on the Application bar (Win) or Menu bar (Mac), point to Visual Aids, then click Invisible Elements to select it if necessary • Click the Common category on the Insert panel, if necessary • Click the Named Anchor button on the Insert panel, type top in the Anchor name text box of the Named Anchor dialog box, then click OK Adobe Dreamweaver CS4 - Illustrated

Inserting a Named Anchor • Click to place the insertion point to the left of the Skin Care Treatments heading, click the Named Anchor button, type skin_care in the Anchor name text box, then click OK • Insert named anchors in front of the Body Treatments, Massages, and Spa Packages headings, using the following names: body_treatments, massages, and packages • Save your work Adobe Dreamweaver CS4 - Illustrated

Inserting a Named Anchor Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Named Anchors • Using Figure F-8 as a guide, select skin care treatments in the first paragraph, then click and drag the Point to File icon in the HTML Property inspector on top of the anchor named skin_care in front of the Skin Care Treatments heading • Create internal links for the headings Body Treatments, Massages, and Spa Packages by first selecting each item in the first paragraph, then clicking and dragging on top of the body_treatments, massages, and packages named anchors Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Named Anchors • Click at the end of the last line on the page, press [Enter] (Win) or [return] (Mac), then type Top of Page • Repeat step 2 to link the Top of Page text to the named anchor at the top of the page Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Named Anchors • Click anywhere in the text Top of Page, wait for a few seconds until the Click indicator to bring up the Code Navigator icon appears, then click the Click indicator to bring up the Code Navigator icon • Save your work, preview the page in your browser and test each link, then close your browser Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Named Anchors Adobe Dreamweaver CS4 - Illustrated

Clues to Use • Using the Code Navigator • The Code Navigator lists the CSS rule name linked to the page element, along with the name of the style sheet that contains the rule • Pointing to the rule name will display the properties and values of the rule Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Barwith Images • Make sure the spa page is open in Design view, click View on the Application bar (Win) or Menu bar (Mac), point to Visual Aids, click Invisible Elements to uncheck Invisible Elements, then change to the Common category on the Insert panel if necessary • Select the navigation bar (About Us - Spa - Cafe), delete it, click the Images list arrow on the Insert bar, then click Navigation Bar Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Barwith Images • Type home in the Element name text box, click the Insert list arrow at the bottom of the dialog box, then click Horizontally, if necessary, to place the navigation bar horizontally • Using Figure F-11 as a reference, click each Browse button next to the Up Image, Over Image, Down Image, and Over While Down Image text boxes, click the drive and folder where your Unit F Data Files are stored, double-click the assets folder, then click the filenames shown in Figure F-11 Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Barwith Images • Type Link to home page as the alternate text, as shown in Figure F-11 • Type index.html in the When clicked, Go to URL text box, as shown in Figure F-11, make sure the Use tables option is checked • Click the Add item button then repeat Steps 3 through 6 to add another element to the navigation bar that will link to the about_us page, using the settings shown in Figure F-12 • Click OK, then save your work Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Barwith Images Adobe Dreamweaver CS4 - Illustrated

Clues to Use • If you design a navigation bar that uses images, you must find or create buttons to use for each state • Some use images • Most use text converted to an image • Determine width, height • Type text and choose background color • Save as .gifs, .jpegs, or .pngs Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation Bar • Click Modify on the Application bar (Win) or Menu bar (Mac), then click Navigation Bar • Click the Add item button at the top of the Modify Navigation Bar dialog box, select the default element name if necessary, then type café in the Element name text box, as shown in the Café section of Figure F-13 Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation Bar • Using the three sections in Figure F-13 as a guide, finish the café element and create two more elements called spa and activities by filling in the four image state text boxes, the alternate text boxes, and the When clicked, Go to URL text boxes • With the Modify Navigation Bar dialog box open, click spa in the Nav bar elements text box, then click the Show “Down image” initially check box to select it, as shown in Figure F-14 Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation Bar • Click OK to close the dialog box, click anywhere on the page to deselect the text, then save the file • Preview the page in your browser, allowing blocked content to be displayed if necessary • Click each button in the navigation bar, then click the Back button to return to the spa page, then close the browser Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation Bar Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Other Pages in a Web Site • Place the insertion point to the right of the navigation bar, click-and-drag the mouse pointer over the navigation bar to select all of it, click Edit on the Application bar (Win) or Menu bar (Mac), then click Copy • Double-click about_us.html in the Local View list of the Files panel • Select the current navigation bar by the same method used in Step 1, click Edit on the Application bar (Win) or Menu bar (Mac), then click Paste Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Other Pages in a Web Site • Click Modify on the Application bar (Win) or Menu bar (Mac), then click Navigation Bar • Click about_us in the Nav bar elements box, then click the Show “Down image” initially check box • Click spa in the Nav bar elements box, click the Show “Down image” initially check box to remove the check mark, then click OK Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Other Pages in a Web Site • Paste the navigation bar on the activities and index pages, replacing the existing navigation bars, modify the Up image and Down image states for the navigation bar elements, as necessary, then remove any instances of <h4></h4> tags that might remain around the navigation bars • Delete the first horizontal rule on the index page Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Other Pages in a Web Site • Use the File, Save All command to save your work on each page, preview the current page in your browser, test the navigation bar on the home, about us, spa, and activities pages, then close your browser Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Other Pages in a Web Site Adobe Dreamweaver CS4 - Illustrated

Creating an Image Map • Display the activities page if necessary, click The Striped Umbrella banner to select it, then double-click a blank area in the right side of the Property inspector to expand it, if necessary • Click the Rectangular Hotspot Tool button , drag to create a rectangle over the left side of The Striped Umbrella banner, release the mouse button, then click OK to close the dialog box • Drag the Point to File icon on the Property inspector to index.html in the Files panel • Select Map in the Map text box, then type home in the Map text box in the Property inspector Adobe Dreamweaver CS4 - Illustrated

Creating an Image Map • Click the Target list arrow on the Property inspector, then click _self • Type Link to home page in the Alt text box on the Property inspector • Save your work, then preview the page in your browser and test the link on the image map • Close your browser Adobe Dreamweaver CS4 - Illustrated

Creating an Image Map Adobe Dreamweaver CS4 - Illustrated

Clues to Use • Troubleshooting Image Maps • Remove white space by editing HTML code • Place the insertion point before the image with the image map in Design View • Switch to Code view and find the line of code where the image map begins • Remove any unnecessary line breaks so that all code associated with the image and the image map share a continuous line (it will probably be wrapped) Adobe Dreamweaver CS4 - Illustrated

Managing Web Site Links • Click Site on the Application bar (Win) or Menu bar (Mac), then click Check Links Sitewide • Click the Show list arrow in the Link Checker panel, then click External Links • Click the Show list arrow, then click Orphaned Files • Close the Results Tab group, click the Assets tab on the Files panel group if necessary, then click the URLs button on the Assets panel to display the list of links in the Web site • Close any open files and Exit (Win) or Quit (Mac) Dreamweaver Adobe Dreamweaver CS4 - Illustrated

Managing Web Site Links Adobe Dreamweaver CS4 - Illustrated

Unit Summary • Understand links and paths • Create an external link • Create an internal link • Insert a named anchor • Create internal links to named anchors Adobe Dreamweaver CS4 - Illustrated

Unit Summary • Create a navigation bar with images • Modify a navigation bar • Copy a navigation bar to other pages in a Web site • Create an image map • Manage Web site links Adobe Dreamweaver CS4 - Illustrated

Adobe Dreamweaver CS4 - Illustrated