Download chapter four: working with links

Adobe Dreamweaver CS3
Revealed
CHAPTER FOUR: WORKING WITH LINKS
Chapter 4 Lessons
1. Create external and internal links
2. Create internal links to named anchors
3. Insert rollovers with Flash text
4. Create, modify, and copy a navigation bar
5. Create an image map
6. Manage Web site links
Understanding Internal and
External Links
 Web Pages contain two types of links


Internal or relative: links to Web pages in the
same Web site
External or absolute: links to Web pages on
other Web sites or to e-mail addresses
Understanding Internal and
External Links
 Internal and external links have two important parts
that work together:


The element that viewers see and click on a
Web page (text, image, or a button)
The path, or the name and location of the Web
page or file that will open when the element is
clicked
Create Links
 Create external links

Absolute paths
 Create internal links

Relative paths
Absolute and Relative Paths
Creating External Links

Select the text or object that you want to serve as
a link

Type the absolute path to the destination Web
page in the Link text box in the Property
inspector
Fig. 1: Example of Absolute Path
Fig. 3: Creating an External Link
Selected text
URL for link
Fig. 4: Site Map Displaying External
Links on Activities Page
Four internal links
from the activities
page navigation bar
Two external links on
the activities page
Creating Internal Links

Select the text element or graphic object that you
want to make a link

Use the Browse for File icon next to the Link text
box in the Property inspector to specify the
relative path to the destination page
Fig. 2: Example of a Relative Path
Fig. 5: Creating an Internal Link
Text to be
used for link
Relative link to
fishing.html
Browse for
File icon
Create Internal Links to Named
Anchors
 Named anchor: specific location on a Web page
that has a descriptive name

Acts as a target for internal links
 Target: location on the Web page that a browser
displays when internal link is clicked
Fig. 7: Named Anchor Button on the
Insert Bar
Text used for link
to named anchor
Named Anchor button
Named
Anchor
Link to named
anchor
Point to File icon
Fig. 8: Named Anchor Dialog Box
Name of new
anchor
Fig. 10: Dragging the Point to File Icon
to a Named Anchor
Point to File icon dragged
to named anchor
Selected text to link
to named anchor
Named anchor
preceded by #
Point to File
icon
Understanding Flash Text
 Flash text is a vector-based graphic file that
contains text
 Flash text allows you to add visual interest to an
otherwise “dull” Web page
 Flash text files are saved with the .swf file extension
Flash Text
Text
+ link path
+ rollover
Inserting Flash Text
Fig. 12: Media Menu on Insert Bar
Fig. 13: Insert Flash Text Dialog Box
Font list arrow
Size text box
Color text box
Rollover color
text box
Text text
box
Link text box
Target list arrow
Save as
text box
Fig. 14: Flash Category on Assets Panel
Flash button
Click play button
to preview Flash
text
Flash text file
Create a Navigation Bar
Using Images
 Allows you to create a more visually appealing
method for navigation that utilizes graphics rather
than text
 Can be created in many different graphics
programs including Adobe Fireworks or Adobe
Illustrator
Create a Navigation Bar
 Navigation bar elements can have four possible
states
 A state is the condition of the element relative to
the mouse pointer
 There are four possible states
Navigation Bars
 Can place only one navigation bar on a Web page
using the Insert Navigation Bar dialog box
 Multiple links
 Four rollover states

Up, over, down, and over while down
Four States
 Up Image: mouse pointer is not on top of the
element
 Over Image: mouse pointer is positioned on top of
the element
 Down Image: when you click the element
 Over While Down Image: mouse pointer is
positioned over an element that has been clicked
Fig. 17: Ohio Historical Society
Web Site
Navigation bar
with rollovers
Images serving
as links
Copy and Modify a Navigation Bar
 Create a navigation bar using images
 Add elements to a navigation bar
 Copy and paste a navigation bar

Copy and Paste from menu bar
 Customize a navigation bar

To change orientation, you must start over
Fig. 18: Insert Navigation Bar
Element name
text box
Image file
specified for
Up image state
Insert list arrow
Click to select
an image for
each element
state
Remove check
mark
Table 3
Fig. 24: Changing Settings for the
Activities Element
Asterisk is
placed next to
element name
Show “Down
image” initially
is selected
Fig. 25: About_us Page with Modified
Navigation Bar
Create an Image Map
 Another way to create navigation links for Web
pages is to create an image map
 Image map: graphic that has one or more hot spots
placed on top of it
 Hotspot: area on a graphic that, when clicked, links
to different locations on the page or to another Web
page or Web site
Fig. 26: Viewing an Image Map
Pointer is over Arkansas,
which results in a window
with a photo and introductory
text about Arkansas to
display
Clicking an individual state
will link to information about
parks in that state
Fig. 28: Properties of the Hotspot
Image map name
Link to index page
Target for hotspot
Alternate text
for hotspot
Manage Web Site Links
 Check Links Sitewide feature

Internal links

External links

Named anchors

Graphic files

Orphaned files
 View results in Link Checker panel
Fig. 30: Link Checker Panel Displaying
External Links
Show list
arrow
External links
displayed
Fig. 31: Link Checker Panel Displaying
No Orphaned Files
Show list
arrow
No orphaned
files shown
Fig. 32: Assets Panel Displaying Links
External links
for The Striped
Umbrella Web site
URLs button
Chapter 4 Tasks
 Create external and internal links
 Create internal links to named anchors
 Insert rollovers with Flash text
 Create, modify, and copy a navigation bar
 Create an image map
 Manage Web site links