Macromedia Dreamweaver 8

1
Macromedia Dreamweaver 8

• Unit F
• Creating Links and Navigation Bars

2
U n i t O b j e c t i v e s

• Understand links and paths
• Create an external link
• Create an internal link
• Insert a named anchor
• Create internal links to named anchors

3
U n i t O b j e c t i v e s

• 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

4
Understanding Links and Paths

• Absolute paths
• Relative paths
• Root-relative paths
• Document-relative paths

5
Understanding Links and Paths
6
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
• Select the leftmost broken image, click the
  Browse for File icon next to the Src text box on
  the Property inspector, select the
  heron_waiting.jpg in the Data Files assets folder
  to save the graphic in your assets folder, then
  click to the right of the placeholder
• Repeat the previous step for the second image,
  two_dolphins.jpg
• 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

7
Creating an External Link

• Click the Link text box on the Property
  inspector, type http//www.blueangels.navy.mil,
  then press Tab
• Click File on the menu bar, 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
• Repeat the fifth and sixth steps to create the
  link for the USS Alabama text on the activities
  Web page http//www.ussalabama.com
• Save your work, click the Expand to show local
  and remote sites button on the Files panel
  toolbar, click the Site Map list arrow on the
  toolbar, then click Map and Files
• Click the plus sign to the left of the activities
  page icon

8
Creating an External Link
9
Creating an External Link
10
Creating an Internal Link

• Click the Collapse to show only local or remote
  site button in the Site window (Win) or Files
  panel (Mac)
• Using Figure F-5 on page 137 as a reference,
  select fishing excursions in the third paragraph
• Click the Browse for File icon next to the Link
  text box on the Property inspector, make sure the
  Relative To text box is set to Document, then
  double-click fishing.html in The Striped Umbrella
  Web site in the Select File dialog box
• Select dolphin cruises in the same sentence

11
Creating an Internal Link

• Click the Browse for File icon on the Property
  inspector, then double-click cruises.html in the
  Select File dialog box
• Save your work, click the Expand to show local
  and remote sites button on the Files panel, click
  the Site Map list arrow, then click Map and
  Files, if necessary
• Click the Collapse to show only local or remote
  sites button to collapse the Files panel
• Close the activities page

12
Creating an Internal Link
13
Creating an Internal Link
14
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 menu bar, point to Visual Aids,
  then click Invisible Elements to select it, if
  necessary
• Click the Insert bar list arrow, then click
  Common, if necessary
• Click the Named Anchor button on the Insert bar,
  type top in the Named Anchor text box of the
  Named Anchor dialog box, then click OK

15
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

16
Inserting a Named Anchor
17
Inserting a Named Anchor
18
Creating Internal Links to Named Anchors

• Using Figure F-9 on page 141 as a guide, select
  skin care treatments in the first paragraph, then
  click and drag the Point to File icon on the
  Property inspector on top of the anchor named
  skin_care in front of the Skin Care Treatments
  heading, as shown in Figure F-9
• Create internal links for the headings Body
  Treatments, Massages, and Spa Packages by first
  selecting each phrase in the first paragraph,
  then clicking and dragging on top of the
  body_treatments, massages, and packages named
  anchors
• Click at the end of the last item in the Spa
  Packages section, click the Media list arrow in
  the Common group on the Insert bar, if necessary,
  then click the Flash Text

19
Creating Internal Links to Named Anchors

• Type Top of page in the Text text box, match the
  settings in the Insert Flash Text dialog box on
  your screen with those shown in Figure F-10 on
  page 141, click OK, type Link to top of page in
  the Flash Accessibility Attributes dialog box,
  then click OK
• Click the Assets tab in the Files panel group
  (Win), click the Flash button on the Assets panel
  (Win) or Files panel (Mac), click the Refresh
  Site List button on the Assets panel to display
  top.swf, then drag top.swf to the end of each of
  the other spa services groups, entering Link to
  top of page in the Object Tag Accessiblity
  Attributes text box
• Click the Top of page button at the end of each
  section, expand the Property inspector if
  necessary, click the Align list arrow on the
  Property inspector, then click Top
• Save your work, preview the page in your browser
  and test each button, then close your browser

20
Creating Internal Links to Named Anchors
21
Creating Internal Links to Named Anchors
22
Creating a Navigation Bar with Images

• Make sure the spa page is open in Design View,
  click View on the menu bar, point to Visual Aids,
  click Invisible Elements to uncheck Invisible
  Elements, then change to the Common group on the
  Insert bar 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
• 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 on the page

23
Creating a Navigation Bar with Images

• Using Figure F-12 on the following slide 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-12
• Enter Link to home page as the alternate text, as
  shown in Figure F-12
• Type index.html in the When clicked, Go to URL
  text box, as shown in Figure F-12, make sure the
  Use tables option is not checked, click OK, then
  save your work
• Click the Files panel tab to display the two
  image files added to the assets folder

24
Creating a Navigation Bar with Images
25
Creating a Navigation Bar with Images
26
Modifying a Navigation Bar

• Click Modify on the menu bar, then click
  Navigation Bar
• Click the Plus button at the top of the Modify
  Navigation Bar dialog box, select the default
  element name, then type about_us in the Element
  name text box, as shown in the About Us section
  of Figure F-14 on page 145
• Using the four sections in Figure F-14 as a
  guide, finish the about_us element and create
  three more elements called cafe, 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-15 on page 145

27
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
• Click each button in the navigation bar, then
  click the Back button to return to the spa page
• Close the browser

28
Modifying a Navigation Bar
29
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 menu bar, 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 menu
  bar, then click Paste
• Click Modify on the menu bar, then click
  Navigation Bar
• Click about_us in the Nav bar elements box, then
  click the Show Down image initially check box

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

• Click spa in the Nav bar elements box, click the
  Show Down image initially check box to remove
  the check mark, then click OK
• Paste the navigation bar on the activities and
  index pages, replacing the existing navigation
  bars, then modify the Up image and Down image
  states for the navigation bar elements, as
  necessary
• Delete the first horizontal rule on the index
  page
• 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

31
Copying a Navigation Bar to Other Pages in a Web
Site
32
Copying a Navigation Bar to Other Pages in a Web
Site
33
Creating an Image Map

• Display the activities page if necessary, click
  The Striped Umbrella banner to select it, then
  click the expander arrow on 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, then release the mouse
  button
• Drag the Point to File icon on the Property
  inspector to index.html in the Files panel
• Type home in the Map text box on the Property
  inspector to give the image map a unique name

34
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

35
Creating an Image Map
36
Managing Web Site Links

• Click Site on the menu bar, 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 panel 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

37
Managing Web Site Links
38
Managing Web Site Links
39
U n i t S u m m a r y

• Understand links and paths
• Create an external link
• Create an internal link
• Insert a named anchor
• Create internal links to named anchors

40
U n i t S u m m a r y

• 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