Adobe Dreamweaver CS3 Revealed -

Adobe Dreamweaver CS3 Revealed

CHAPTER FOUR: WORKING WITH 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

Selected text URL for link

Fig. 3: Creating an External Link

Four internal linksfrom the activities

page navigation bar

Two external links onthe activities page

Fig. 4: Site Map Displaying External Links on 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

Text to be used for link

Relative link to fishing.html

Browse for File icon

Fig. 5: Creating an Internal Link

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

Named Anchor button

Named Anchor

Text used for link to named anchor

Link to named anchor Point to File icon

Fig. 7: Named Anchor Button on the Insert Bar

Name of new anchor

Fig. 8: Named Anchor Dialog Box

Point to File icon dragged to named anchor

Named anchor preceded by #

Selected text to link to named anchor

Fig. 10: Dragging the Point to File Icon to a Named Anchor

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

+ link path+ rollover

Text

Inserting Flash Text

Fig. 12: Media Menu on Insert Bar

Color text box

Font list arrowSize text box

Rollover color text box

Target list arrow

Text textbox Link text box

Save as text box

Fig. 13: Insert Flash Text Dialog Box

Flash button

Flash text file

Click play button to preview Flash

text

Fig. 14: Flash Category on Assets Panel

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

Navigation bar with rollovers

Fig. 17: Ohio Historical Society Web Site

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

Element name text box

Image file specified for

Up image state

Insert list arrowRemove check

mark

Click to select an image for each element

state

Fig. 18: Insert Navigation Bar

Table 3

Show “Down image” initially

is selected

Fig. 24: Changing Settings for the Activities Element

Asterisk is placed next to element name

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

Clicking an individual state will link to information about parks in that state

Pointer is over Arkansas, which results in a window with a photo and introductory text about Arkansas to display

Image map name

Fig. 28: Properties of the Hotspot

Alternate text for hotspot

Target for hotspotLink to index page

Manage Web Site Links

Check Links Sitewide feature

Internal links

External links

Named anchors

Graphic files

Orphaned files

View results in Link Checker panel

Show list arrow

External links displayed

Fig. 30: Link Checker Panel Displaying External Links

Show list arrow

No orphaned files shown

Fig. 31: Link Checker Panel Displaying No Orphaned Files

URLs button

External linksfor The Striped

Umbrella Web site

Fig. 32: Assets Panel Displaying Links