Adobe Dreamweaver CS4 - Illustrated Creating Links and Navigation Bars

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

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

Understanding Links and Paths Absolute pathsAbsolute paths Relative pathsRelative paths Root-relative pathsRoot-relative paths Document-relative pathsDocument-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 linksOpen 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.htmlClose 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 placeholderSelect 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.jpgRepeat 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)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 AngelsScroll to the bottom of the page, then select the text Blue Angels Click the Link text box in the HTML Property inspector, type then press [Tab]Click the Link text box in the HTML Property inspector, type 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 browserClick 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: steps 6 and 7 to create the link for the USS Alabama text in the last paragraph: Save your workSave your work Preview the page in the browser to test the USS Alabama linkPreview the page in the browser to test the USS Alabama link Close the browserClose 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 paragraphUsing 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 boxClick 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 sentenceSelect 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 boxClick the Browse for File icon in the Property inspector, then double-click cruises.html in the Select File dialog box Save your workSave your work Close the activities pageClose the activities page Adobe Dreamweaver CS4 - Illustrated

Creating an Internal Link 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 bannerOpen 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 necessaryClick 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 necessaryClick 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 OKClick 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 OKClick 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 packagesInsert named anchors in front of the Body Treatments, Massages, and Spa Packages headings, using the following names: body_treatments, massages, and packages Save your workSave your work Adobe Dreamweaver CS4 - Illustrated

Inserting a Named Anchor 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 headingUsing 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 anchorsCreate 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 PageClick 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 pageRepeat 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 iconClick 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 browserSave 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

Creating Internal Links to Named Anchors Adobe Dreamweaver CS4 - Illustrated

Clues to Use Using the Code NavigatorUsing 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 ruleThe 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 rulePointing to the rule name will display the properties and values of the rule Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Bar with 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 necessaryMake 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 BarSelect 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 Bar with 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 horizontallyType 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-11Using 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 Bar with Images Type Link to home page as the alternate text, as shown in Figure F-11Type 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 checkedType 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-12Click 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 workClick OK, then save your work Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Bar with Images Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation Bar with 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 stateIf you design a navigation bar that uses images, you must find or create buttons to use for each state Some use imagesSome use images Most use text converted to an imageMost use text converted to an image Determine width, heightDetermine width, height Type text and choose background colorType text and choose background color Save as.gifs,.jpegs, or.pngsSave 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 BarClick 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-13Click 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 boxesUsing 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-14With 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 fileClick 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 necessaryPreview 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 browserClick 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

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 CopyPlace 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 panelDouble-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 PasteSelect 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 BarClick 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 boxClick 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 OKClick 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 tags that might remain around the navigation barsPaste 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 tags that might remain around the navigation bars Delete the first horizontal rule on the index pageDelete 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 browserUse 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 necessaryDisplay 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 boxClick 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 panelDrag 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 inspectorSelect 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 _selfClick the Target list arrow on the Property inspector, then click _self Type Link to home page in the Alt text box on the Property inspectorType 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 mapSave your work, then preview the page in your browser and test the link on the image map Close your browserClose your browser Adobe Dreamweaver CS4 - Illustrated

Creating an Image Map Adobe Dreamweaver CS4 - Illustrated

Clues to Use Troubleshooting Image MapsTroubleshooting Image Maps Remove white space by editing HTML codeRemove white space by editing HTML code Place the insertion point before the image with the image map in Design ViewPlace 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 beginsSwitch 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)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 SitewideClick 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 LinksClick the Show list arrow in the Link Checker panel, then click External Links Click the Show list arrow, then click Orphaned FilesClick 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 siteClose 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) DreamweaverClose any open files and Exit (Win) or Quit (Mac) Dreamweaver Adobe Dreamweaver CS4 - Illustrated

Managing Web Site Links Adobe Dreamweaver CS4 - Illustrated

Managing Web Site Links Adobe Dreamweaver CS4 - Illustrated

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

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