Transcript Slide 1

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
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
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
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 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 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 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
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 Bar
with 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 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 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
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
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