adobe dreamweaver cs4 - illustrated

48
Adobe Dreamweaver CS4 - Adobe Dreamweaver CS4 - Illustrated Illustrated Creating Links and Creating Links and Navigation Bars Navigation Bars

Upload: kasa

Post on 13-Jan-2016

46 views

Category:

Documents


0 download

DESCRIPTION

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. Unit Objectives. Create a navigation bar with images - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Adobe Dreamweaver CS4 - Illustrated

Adobe Dreamweaver CS4 - IllustratedAdobe Dreamweaver CS4 - Illustrated

Creating Links and Navigation Creating Links and Navigation BarsBars

Page 2: Adobe Dreamweaver CS4 - Illustrated

Unit ObjectivesUnit 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 Create internal links to named anchorsanchors

Adobe Dreamweaver CS4 - Illustrated

Page 3: Adobe Dreamweaver CS4 - Illustrated

Unit ObjectivesUnit 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 Copy a navigation bar to other pages

in a Web sitein a Web site• Create an image mapCreate an image map• Manage Web site linksManage Web site links

Adobe Dreamweaver CS4 - Illustrated

Page 4: Adobe Dreamweaver CS4 - Illustrated

Understanding Links and PathsUnderstanding Links and Paths

• Absolute pathsAbsolute paths

• Relative pathsRelative paths• Root-relative pathsRoot-relative paths• Document-relative pathsDocument-relative paths

Adobe Dreamweaver CS4 - Illustrated

Page 5: Adobe Dreamweaver CS4 - Illustrated

Understanding Links and PathsUnderstanding Links and Paths

Adobe Dreamweaver CS4 - Illustrated

Page 6: Adobe Dreamweaver CS4 - Illustrated

Creating an External LinkCreating an External Link

• Open the Open the The Striped Umbrella Web siteThe Striped Umbrella Web site, open , open dwf_1.htmldwf_1.html from the drive and folder where your from the drive and folder where your Unit F Data Files are stored, then save it as Unit F Data Files are stored, then save it as activities.htmlactivities.html in the striped_umbrella root folder, in the striped_umbrella root folder, overwriting the existing file but not updating linksoverwriting the existing file but not updating links

• Close Close dwf_1.htmldwf_1.html• Select the leftmost broken image, click the Select the leftmost broken image, click the

Browse for File iconBrowse for File icon next to the Src text box in next to the Src text box in the Property inspector, select the the Property inspector, select the heron_waiting.jpgheron_waiting.jpg in the Data Files assets folder in the Data Files assets folder to save the image in your assets folder, then click to save the image in your assets folder, then click to the right of the placeholderto the right of the placeholder

• Repeat the step 3 for the second image, Repeat the step 3 for the second image, two_dolphins.jpgtwo_dolphins.jpg

Adobe Dreamweaver CS4 - Illustrated

Page 7: Adobe Dreamweaver CS4 - Illustrated

Creating an External LinkCreating an External Link

• Attach the Attach the su_styles.csssu_styles.css file, then apply the file, then apply the body_textbody_text style to the paragraphs of text on the style to the paragraphs of text on the page (not to the navigation bar)page (not to the navigation bar)

• Scroll to the bottom of the page, then select the Scroll to the bottom of the page, then select the text text Blue AngelsBlue Angels

• Click the Click the Link text boxLink text box in the HTML Property in the HTML Property inspector, type inspector, type http://www.blueangels.navy.milhttp://www.blueangels.navy.mil, , then press [Tab] then press [Tab]

• Click Click FileFile on the Application bar (Win) or Menu on the Application bar (Win) or Menu bar (Mac), click bar (Mac), click SaveSave, click the , click the Preview/Debug Preview/Debug in browser buttonin browser button, click , click Preview in [your Preview in [your browser]browser], click , click Blue Angels Blue Angels on the Web page, on the Web page, verify that the link works, then close your browserverify that the link works, then close your browser

Adobe Dreamweaver CS4 - Illustrated

Page 8: Adobe Dreamweaver CS4 - Illustrated

Creating an External LinkCreating an External Link

• Repeat steps 6 and 7 to create the link for the Repeat steps 6 and 7 to create the link for the USS AlabamaUSS Alabama text in the last paragraph: text in the last paragraph: http://www.ussalabama.comhttp://www.ussalabama.com

• Save your workSave your work• Preview the page in the browser to test the USS Preview the page in the browser to test the USS

Alabama linkAlabama link• Close the browserClose the browser

Adobe Dreamweaver CS4 - Illustrated

Page 9: Adobe Dreamweaver CS4 - Illustrated

Creating an External LinkCreating an External Link

Adobe Dreamweaver CS4 - Illustrated

Page 10: Adobe Dreamweaver CS4 - Illustrated

Creating an Internal LinkCreating an Internal Link• Using Figure F-4 as a reference, select Using Figure F-4 as a reference, select

fishing excursionsfishing excursions in the third paragraph in the third paragraph• Click the Click the Browse for File iconBrowse for File icon next to the next to the

Link text box in the HTML Property Link text box in the HTML Property inspector, make sure the Relative To box inspector, make sure the Relative To box is set to Document, then double-click is set to Document, then double-click fishing.htmlfishing.html in The Striped Umbrella root in The Striped Umbrella root folder in the Select File dialog boxfolder in the Select File dialog box

• Select Select dolphin cruisesdolphin cruises in the same in the same sentencesentence

Adobe Dreamweaver CS4 - Illustrated

Page 11: Adobe Dreamweaver CS4 - Illustrated

Creating an Internal LinkCreating an Internal Link

• Click the Click the Browse for File iconBrowse for File icon in the in the Property inspector, then double-click Property inspector, then double-click cruises.htmlcruises.html in the Select File dialog box in the Select File dialog box

• Save your workSave your work• Close the activities pageClose the activities page

Adobe Dreamweaver CS4 - Illustrated

Page 12: Adobe Dreamweaver CS4 - Illustrated

Creating an Internal LinkCreating an Internal Link

Adobe Dreamweaver CS4 - Illustrated

Page 13: Adobe Dreamweaver CS4 - Illustrated

Creating an Internal LinkCreating an Internal Link

Adobe Dreamweaver CS4 - Illustrated

Page 14: Adobe Dreamweaver CS4 - Illustrated

Inserting a Named AnchorInserting a Named Anchor

• Open the Open the spa.htmlspa.html page, click page, click The Striped The Striped Umbrella bannerUmbrella banner, then press the , then press the left arrow keyleft arrow key on your keyboard to place the insertion point on your keyboard to place the insertion point directly before the bannerdirectly before the banner

• Click Click ViewView on the Application bar (Win) or Menu on the Application bar (Win) or Menu bar (Mac), point to bar (Mac), point to Visual AidsVisual Aids, then click , then click Invisible Elements Invisible Elements to select it if necessaryto select it if necessary

• Click the Click the Common category Common category on the Insert panel, on the Insert panel, if necessaryif necessary

• Click the Click the Named Anchor buttonNamed Anchor button on the Insert on the Insert panel, type panel, type toptop in the Anchor name text box of in the Anchor name text box of the Named Anchor dialog box, then click the Named Anchor dialog box, then click OKOK

Adobe Dreamweaver CS4 - Illustrated

Page 15: Adobe Dreamweaver CS4 - Illustrated

Inserting a Named AnchorInserting a Named Anchor

• Click to place the insertion point to the left Click to place the insertion point to the left of the Skin Care Treatments heading, click of the Skin Care Treatments heading, click the the Named Anchor buttonNamed Anchor button, type , type skin_careskin_care in the Anchor name text box, in the Anchor name text box, then click then click OKOK

• Insert named anchors in front of the Insert named anchors in front of the Body Body TreatmentsTreatments, , MassagesMassages, and , and Spa Spa Packages Packages headings, using the following headings, using the following names: names: body_treatmentsbody_treatments, , massagesmassages, , and and packagespackages

• Save your workSave your work

Adobe Dreamweaver CS4 - Illustrated

Page 16: Adobe Dreamweaver CS4 - Illustrated

Inserting a Named AnchorInserting a Named Anchor

Adobe Dreamweaver CS4 - Illustrated

Page 17: Adobe Dreamweaver CS4 - Illustrated

Inserting a Named AnchorInserting a Named Anchor

Adobe Dreamweaver CS4 - Illustrated

Page 18: Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Creating Internal Links to Named AnchorsNamed Anchors• Using Figure F-8 as a guide, select Using Figure F-8 as a guide, select skin skin

care treatmentscare treatments in the first paragraph, in the first paragraph, then click and drag the then click and drag the Point to File iconPoint to File icon in the HTML Property inspector on top of in the HTML Property inspector on top of the anchor named the anchor named skin_careskin_care in front of in front of the Skin Care Treatments headingthe Skin Care Treatments heading

• Create internal links for the headings Create internal links for the headings Body TreatmentsBody Treatments, , MassagesMassages, and , and Spa Spa PackagesPackages by first selecting each item in by first selecting each item in the first paragraph, then clicking and the first paragraph, then clicking and dragging on top of the dragging on top of the body_treatmentsbody_treatments, , massagesmassages, and , and packagespackages named named anchorsanchors

Adobe Dreamweaver CS4 - Illustrated

Page 19: Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Creating Internal Links to Named AnchorsNamed Anchors• Click at the end of the last line on the Click at the end of the last line on the

page, press [Enter] (Win) or [return] (Mac), page, press [Enter] (Win) or [return] (Mac), then type then type Top of PageTop of Page

• Repeat step 2 to link the Top of Page text Repeat step 2 to link the Top of Page text to the named anchor at the top of the pageto the named anchor at the top of the page

Adobe Dreamweaver CS4 - Illustrated

Page 20: Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Creating Internal Links to Named AnchorsNamed Anchors• Click anywhere in the text Top of Page, wait for a Click anywhere in the text Top of Page, wait for a

few seconds until the few seconds until the Click indicator to bring up Click indicator to bring up the Code Navigator icon the Code Navigator icon appears, then click the appears, then click the Click indicator to bring up the Code Navigator Click indicator to bring up the Code Navigator iconicon

• Save your work, preview the page in your browser Save your work, preview the page in your browser and test each link, then close your browserand test each link, then close your browser

Adobe Dreamweaver CS4 - Illustrated

Page 21: Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Creating Internal Links to Named AnchorsNamed Anchors

Adobe Dreamweaver CS4 - Illustrated

Page 22: Adobe Dreamweaver CS4 - Illustrated

Creating Internal Links to Creating Internal Links to Named AnchorsNamed Anchors

Adobe Dreamweaver CS4 - Illustrated

Page 23: Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues to Use

• Using the Code NavigatorUsing the Code Navigator• The The Code NavigatorCode Navigator lists the CSS rule lists the CSS rule

name linked to the page element, along name linked to the page element, along with the name of the style sheet that with the name of the style sheet that contains the rulecontains the rule

• Pointing to the rule name will display Pointing to the rule name will display the properties and values of the rulethe properties and values of the rule

Adobe Dreamweaver CS4 - Illustrated

Page 24: Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation BarCreating a Navigation Barwith Imageswith Images• Make sure the spa page is open in Design view, Make sure the spa page is open in Design view,

click click ViewView on the Application bar (Win) or Menu on the Application bar (Win) or Menu bar (Mac), point to bar (Mac), point to Visual AidsVisual Aids, click , click Invisible Invisible ElementsElements to uncheck Invisible Elements, then to uncheck Invisible Elements, then change to the change to the Common category Common category on the Insert on the Insert panel if necessarypanel if necessary

• Select the navigation bar (About Us - Spa - Cafe), Select the navigation bar (About Us - Spa - Cafe), delete it, click the delete it, click the Images list arrowImages list arrow on the Insert on the Insert bar, then click bar, then click Navigation BarNavigation Bar

Adobe Dreamweaver CS4 - Illustrated

Page 25: Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation BarCreating a Navigation Barwith Imageswith Images• Type Type homehome in the Element name text box, in the Element name text box,

click the click the Insert list arrowInsert list arrow at the bottom of at the bottom of the dialog box, then click the dialog box, then click HorizontallyHorizontally, if , if necessary, to place the navigation bar necessary, to place the navigation bar horizontallyhorizontally

• Using Figure F-11 as a reference, click Using Figure F-11 as a reference, click each each Browse buttonBrowse button next to the Up next to the Up Image, Over Image, Down Image, and Image, Over Image, Down Image, and Over While Down Image text boxes, click Over While Down Image text boxes, click the drive and folder where your Unit F the drive and folder where your Unit F Data Files are stored, double-click the Data Files are stored, double-click the assetsassets folder, then click the filenames folder, then click the filenames shown in Figure F-11shown in Figure F-11

Adobe Dreamweaver CS4 - Illustrated

Page 26: Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation BarCreating a Navigation Barwith Imageswith Images• Type Type Link to home pageLink to home page as the alternate as the alternate

text, as shown in Figure F-11text, as shown in Figure F-11• Type Type index.htmlindex.html in the When clicked, Go in the When clicked, Go

to URL text box, as shown in Figure F-11, to URL text box, as shown in Figure F-11, make sure the Use tables option is make sure the Use tables option is checkedchecked

• Click the Click the Add item buttonAdd item button then repeat then repeat Steps 3 through 6 to add another element Steps 3 through 6 to add another element to the navigation bar that will link to the to the navigation bar that will link to the about_us page, using the settings shown about_us page, using the settings shown in Figure F-12in Figure F-12

• Click Click OKOK, then save your work, then save your work

Adobe Dreamweaver CS4 - Illustrated

Page 27: Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation BarCreating a Navigation Barwith Imageswith Images

Adobe Dreamweaver CS4 - Illustrated

Page 28: Adobe Dreamweaver CS4 - Illustrated

Creating a Navigation BarCreating a Navigation Barwith Imageswith Images

Adobe Dreamweaver CS4 - Illustrated

Page 29: Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues to Use

• If you design a navigation bar that If you design a navigation bar that uses images, you must find or create uses images, you must find or create buttons to use for each statebuttons 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

Page 30: Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation BarModifying a Navigation Bar

• Click Click Modify Modify on the Application bar on the Application bar (Win) or Menu bar (Mac), then click (Win) or Menu bar (Mac), then click Navigation BarNavigation Bar

• Click the Click the Add item buttonAdd item button at the top at the top of the Modify Navigation Bar dialog of the Modify Navigation Bar dialog box, select the default element name box, select the default element name if necessary, then type if necessary, then type café café in the in the Element name text box, as shown in Element name text box, as shown in the Café section of Figure F-13the Café section of Figure F-13

Adobe Dreamweaver CS4 - Illustrated

Page 31: Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation BarModifying a Navigation Bar

• Using the three sections in Figure F-13 as Using the three sections in Figure F-13 as a guide, finish the café element and create a guide, finish the café element and create two more elements called two more elements called spaspa and and activitiesactivities by filling in the four image state by filling in the four image state text boxes, the alternate text boxes, and text boxes, the alternate text boxes, and the When clicked, Go to URL text boxesthe When clicked, Go to URL text boxes

• With the Modify Navigation Bar dialog box With the Modify Navigation Bar dialog box open, click open, click spaspa in the Nav bar elements in the Nav bar elements text box, then click the text box, then click the Show “Down Show “Down image” initially check boximage” initially check box to select it, as to select it, as shown in Figure F-14shown in Figure F-14

Adobe Dreamweaver CS4 - Illustrated

Page 32: Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation BarModifying a Navigation Bar

• Click Click OKOK to close the dialog box, click to close the dialog box, click anywhere on the page to deselect the text, anywhere on the page to deselect the text, then save the filethen save the file

• Preview the page in your browser, Preview the page in your browser, allowing blocked content to be displayed if allowing blocked content to be displayed if necessarynecessary

• Click each button in the navigation bar, Click each button in the navigation bar, then click the then click the Back button Back button to return to the to return to the spa page, then close the browserspa page, then close the browser

Adobe Dreamweaver CS4 - Illustrated

Page 33: Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation BarModifying a Navigation Bar

Adobe Dreamweaver CS4 - Illustrated

Page 34: Adobe Dreamweaver CS4 - Illustrated

Modifying a Navigation BarModifying a Navigation Bar

Adobe Dreamweaver CS4 - Illustrated

Page 35: Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Copying a Navigation Bar to Other Pages in a Web SiteOther Pages in a Web Site• Place the insertion point to the right of Place the insertion point to the right of

the navigation bar, click-and-drag the the navigation bar, click-and-drag the mouse pointer over the navigation bar mouse pointer over the navigation bar to select all of it, click to select all of it, click EditEdit on the on the Application bar (Win) or Menu bar Application bar (Win) or Menu bar (Mac), then click (Mac), then click CopyCopy

• Double-click Double-click about_us.htmlabout_us.html in the in the Local View list of the Files panelLocal View list of the Files panel

• Select the current navigation bar by the Select the current navigation bar by the same method used in Step 1, click same method used in Step 1, click EditEdit on the Application bar (Win) or Menu on the Application bar (Win) or Menu bar (Mac), then click bar (Mac), then click PastePaste

Adobe Dreamweaver CS4 - Illustrated

Page 36: Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Copying a Navigation Bar to Other Pages in a Web SiteOther Pages in a Web Site• Click Click ModifyModify on the Application bar on the Application bar

(Win) or Menu bar (Mac), then click (Win) or Menu bar (Mac), then click Navigation BarNavigation Bar

• Click Click about_usabout_us in the Nav bar in the Nav bar elements box, then click the elements box, then click the Show Show “Down image” initially check box“Down image” initially check box

• Click Click spaspa in the Nav bar elements in the Nav bar elements box, click the box, click the Show “Down image” Show “Down image” initially check boxinitially check box to remove the to remove the check mark, then click check mark, then click OKOK

Adobe Dreamweaver CS4 - Illustrated

Page 37: Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Copying a Navigation Bar to Other Pages in a Web SiteOther Pages in a Web Site• Paste the navigation bar on the activities Paste the navigation bar on the activities

and index pages, replacing the existing and index pages, replacing the existing navigation bars, modify the Up image and navigation bars, modify the Up image and Down image states for the navigation bar Down image states for the navigation bar elements, as necessary, then remove any elements, as necessary, then remove any instances of <h4></h4> tags that might instances of <h4></h4> tags that might remain around the navigation barsremain around the navigation bars

• Delete the first horizontal rule on the index Delete the first horizontal rule on the index pagepage

Adobe Dreamweaver CS4 - Illustrated

Page 38: Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Copying a Navigation Bar to Other Pages in a Web SiteOther Pages in a Web Site• Use the File, Save All command to Use the File, Save All command to

save your work on each page, save your work on each page, preview the current page in your preview the current page in your browser, test the navigation bar on browser, test the navigation bar on the home, about us, spa, and the home, about us, spa, and activities pages, then close your activities pages, then close your browserbrowser

Adobe Dreamweaver CS4 - Illustrated

Page 39: Adobe Dreamweaver CS4 - Illustrated

Copying a Navigation Bar to Copying a Navigation Bar to Other Pages in a Web SiteOther Pages in a Web Site

Adobe Dreamweaver CS4 - Illustrated

Page 40: Adobe Dreamweaver CS4 - Illustrated

Creating an Image MapCreating an Image Map

• Display the activities page if necessary, click Display the activities page if necessary, click The The Striped Umbrella banner Striped Umbrella banner to select it, then to select it, then double-click a blank area in the right side of the double-click a blank area in the right side of the Property inspector to expand it, if necessaryProperty inspector to expand it, if necessary

• Click the Click the Rectangular Hotspot Tool buttonRectangular Hotspot Tool button , , drag to create a rectangle over the left side of The drag to create a rectangle over the left side of The Striped Umbrella banner, release the mouse Striped Umbrella banner, release the mouse button, then click button, then click OKOK to close the dialog box to close the dialog box

• Drag the Drag the Point to File iconPoint to File icon on the Property on the Property inspector to inspector to index.htmlindex.html in the Files panel in the Files panel

• Select Select MapMap in the Map text box, then type in the Map text box, then type homehome in the Map text box in the Property inspectorin the Map text box in the Property inspector

Adobe Dreamweaver CS4 - Illustrated

Page 41: Adobe Dreamweaver CS4 - Illustrated

Creating an Image MapCreating an Image Map

• Click the Click the Target list arrowTarget list arrow on the on the Property inspector, then click _selfProperty inspector, then click _self

• Type Type Link to home pageLink to home page in the Alt in the Alt text box on the Property inspectortext box on the Property inspector

• Save your work, then preview the Save your work, then preview the page in your browser and test the link page in your browser and test the link on the image mapon the image map

• Close your browserClose your browser

Adobe Dreamweaver CS4 - Illustrated

Page 42: Adobe Dreamweaver CS4 - Illustrated

Creating an Image MapCreating an Image Map

Adobe Dreamweaver CS4 - Illustrated

Page 43: Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues to Use

• Troubleshooting Image MapsTroubleshooting Image Maps• Remove white space by editing HTML Remove white space by editing HTML

codecode• Place the insertion point before the image Place the insertion point before the image

with the image map in Design Viewwith the image map in Design View• Switch to Code view and find the line of Switch to Code view and find the line of

code where the image map beginscode where the image map begins• Remove any unnecessary line breaks so Remove any unnecessary line breaks so

that all code associated with the image that all code associated with the image and the image map share a continuous and the image map share a continuous line (it will probably be wrapped)line (it will probably be wrapped)

Adobe Dreamweaver CS4 - Illustrated

Page 44: Adobe Dreamweaver CS4 - Illustrated

Managing Web Site LinksManaging Web Site Links

• Click Click SiteSite on the Application bar (Win) or on the Application bar (Win) or Menu bar (Mac), then click Menu bar (Mac), then click Check Links Check Links SitewideSitewide

• Click the Click the Show list arrowShow list arrow in the Link Checker in the Link Checker panel, then click panel, then click External LinksExternal Links

• Click the Click the Show list arrow, Show list arrow, then click then click Orphaned FilesOrphaned Files

• Close the Results Tab group, click the Close the Results Tab group, click the Assets Assets tabtab on the Files panel group if necessary, on the Files panel group if necessary, then click the then click the URLs buttonURLs button on the Assets on the Assets panel to display the list of links in the Web sitepanel to display the list of links in the Web site

• Close any open files and Close any open files and ExitExit (Win) or (Win) or QuitQuit (Mac) (Mac) DreamweaverDreamweaver

Adobe Dreamweaver CS4 - Illustrated

Page 45: Adobe Dreamweaver CS4 - Illustrated

Managing Web Site LinksManaging Web Site Links

Adobe Dreamweaver CS4 - Illustrated

Page 46: Adobe Dreamweaver CS4 - Illustrated

Managing Web Site LinksManaging Web Site Links

Adobe Dreamweaver CS4 - Illustrated

Page 47: Adobe Dreamweaver CS4 - Illustrated

Unit SummaryUnit 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 Create internal links to named anchorsanchors

Adobe Dreamweaver CS4 - Illustrated

Page 48: Adobe Dreamweaver CS4 - Illustrated

Unit SummaryUnit 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 Copy a navigation bar to other pages

in a Web sitein a Web site• Create an image mapCreate an image map• Manage Web site linksManage Web site links

Adobe Dreamweaver CS4 - Illustrated