adobe dreamweaver cs3 revealed chapter four: working with links
TRANSCRIPT
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
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 text box 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 arrow
Remove 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
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