adobe dreamweaver cs3 revealed chapter four: working with links
TRANSCRIPT
![Page 1: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/1.jpg)
Adobe Dreamweaver CS3 Revealed
CHAPTER FOUR: WORKING WITH LINKS
![Page 2: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/2.jpg)
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
![Page 3: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/3.jpg)
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
![Page 4: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/4.jpg)
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
![Page 5: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/5.jpg)
Create Links
Create external links
Absolute paths
Create internal links
Relative paths
![Page 6: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/6.jpg)
Absolute and Relative Paths
![Page 7: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/7.jpg)
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
![Page 8: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/8.jpg)
Fig. 1: Example of Absolute Path
![Page 9: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/9.jpg)
Selected text URL for link
Fig. 3: Creating an External Link
![Page 10: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/10.jpg)
Four internal linksfrom the activities
page navigation bar
Two external links onthe activities page
Fig. 4: Site Map Displaying External Links on Activities Page
![Page 11: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/11.jpg)
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
![Page 12: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/12.jpg)
Fig. 2: Example of a Relative Path
![Page 13: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/13.jpg)
Text to be used for link
Relative link to fishing.html
Browse for File icon
Fig. 5: Creating an Internal Link
![Page 14: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/14.jpg)
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
![Page 15: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/15.jpg)
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
![Page 16: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/16.jpg)
Name of new anchor
Fig. 8: Named Anchor Dialog Box
![Page 17: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/17.jpg)
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
![Page 18: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/18.jpg)
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
![Page 19: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/19.jpg)
Flash Text
+ link path+ rollover
Text
![Page 20: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/20.jpg)
Inserting Flash Text
![Page 21: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/21.jpg)
Fig. 12: Media Menu on Insert Bar
![Page 22: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/22.jpg)
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
![Page 23: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/23.jpg)
Flash button
Flash text file
Click play button to preview Flash
text
Fig. 14: Flash Category on Assets Panel
![Page 24: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/24.jpg)
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
![Page 25: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/25.jpg)
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
![Page 26: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/26.jpg)
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
![Page 27: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/27.jpg)
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
![Page 28: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/28.jpg)
Navigation bar with rollovers
Fig. 17: Ohio Historical Society Web Site
Images serving as links
![Page 29: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/29.jpg)
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
![Page 30: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/30.jpg)
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
![Page 31: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/31.jpg)
Table 3
![Page 32: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/32.jpg)
Show “Down image” initially
is selected
Fig. 24: Changing Settings for the Activities Element
Asterisk is placed next to element name
![Page 33: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/33.jpg)
Fig. 25: About_us Page with Modified Navigation Bar
![Page 34: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/34.jpg)
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
![Page 35: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/35.jpg)
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
![Page 36: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/36.jpg)
Image map name
Fig. 28: Properties of the Hotspot
Alternate text for hotspot
Target for hotspotLink to index page
![Page 37: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/37.jpg)
Manage Web Site Links
Check Links Sitewide feature
Internal links
External links
Named anchors
Graphic files
Orphaned files
View results in Link Checker panel
![Page 38: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/38.jpg)
Show list arrow
External links displayed
Fig. 30: Link Checker Panel Displaying External Links
![Page 39: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/39.jpg)
Show list arrow
No orphaned files shown
Fig. 31: Link Checker Panel Displaying No Orphaned Files
![Page 40: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/40.jpg)
URLs button
External linksfor The Striped
Umbrella Web site
Fig. 32: Assets Panel Displaying Links
![Page 41: Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS](https://reader036.vdocuments.site/reader036/viewer/2022062321/56649eb35503460f94bb9fae/html5/thumbnails/41.jpg)
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