macromedia dreamweaver 8 revealed links working with
TRANSCRIPT
Macromedia Dreamweaver 8 Revealed
LINKSWORKING WITH
2Macromedia Dreamweaver 8 Revealed Chapter 4
Create external and internal linksCreate internal links to named anchorsInsert rollovers with Flash textCreate, modify, and copy a navigation barManage Web site links
Chapter Lessons
3Macromedia Dreamweaver 8 Revealed Chapter 4
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
4Macromedia Dreamweaver 8 Revealed Chapter 4
Create LinksCreate external links– Absolute paths
Create internal links– Relative paths
5Macromedia Dreamweaver 8 Revealed Chapter 4
6Macromedia Dreamweaver 8 Revealed Chapter 4
Creating External LinksSteps– 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
7Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 1 An example of an absolute path
8Macromedia Dreamweaver 8 Revealed Chapter 4
Selected text URL for link
FIGURE 3 Creating an external link to the Blue Angels Web site
9Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 4 Site map displaying external links on the activities page
Four internal linksfrom the activities
page navigation bar
Two external links onthe activities page
10Macromedia Dreamweaver 8 Revealed Chapter 4
Creating Internal LinksSteps– 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
11Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 2 An example of a relative path
12Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 5 Creating an internal link on the activities page
Text to be used for link Relative path Browse for
File icon
13Macromedia Dreamweaver 8 Revealed Chapter 4
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
14Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 7 Named Anchor button on the Insert bar
Named Anchor button
Named Anchor
Text used for link to named
anchor
Link to named anchor
Point to File icon
15Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 8 Named Anchor dialog box
Name of new anchor
16Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 10 Dragging the Point to File icon to a named anchor
Point to File icon dragged
to named anchor
Named anchor preceded by #
Point to File icon
17Macromedia Dreamweaver 8 Revealed Chapter 4
Insert Rollovers with 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
18Macromedia Dreamweaver 8 Revealed Chapter 4
Flash Text
+ link path+ rollover
Text
19Macromedia Dreamweaver 8 Revealed Chapter 4
Inserting Flash Text
FIGURE 12 Media menu on the Insert bar
20Macromedia Dreamweaver 8 Revealed Chapter 4
Inserting Flash Text
21Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 13 Insert Flash Text dialog box
Color text box
Font list arrow
Size text box
Rollover color text box
Target list arrow
Text text boxLink text box
Save as text box
22Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 14 Flash category on the Assets panel
Flash button
Flash text file
Click play button to
preview Flash text
23Macromedia Dreamweaver 8 Revealed Chapter 4
Create a Navigation Bar
Allow 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 Macromedia Fireworks or Adobe Illustrator
24Macromedia Dreamweaver 8 Revealed Chapter 4
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 mouse states
25Macromedia Dreamweaver 8 Revealed Chapter 4
Mouse StatesUp: mouse pointer is not on top of the element
Over: mouse pointer is positioned on top of the element
Down: when you click the element
Over while down: when you click the element and continue pressing and holding the mouse button
26Macromedia Dreamweaver 8 Revealed Chapter 4
Navigation BarsCan 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
27Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 16 Ohio Historical Society Web site
Navigation bar with rollovers
28Macromedia Dreamweaver 8 Revealed Chapter 4
Modify and Copy 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
29Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 17 Insert Navigation Bar dialog box
Element name text box
Graphic file selected for Up
image state
Insert list arrow
Remove check mark
Click to select an image for each element
state
Add button
30Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 22 Changing settings for the activities element
Show “Down image” initially
is selected
31Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 23 about us page with the modified navigation bar
32Macromedia Dreamweaver 8 Revealed Chapter 4
Create an Image MapAnother way to create navigation links for Web pages is to create an image mapImage map: graphic that has one or more hot spots placed on top of itHotspot: area on a graphic that, when clicked, links to different locations on the page or to another Web page or Web site
33Macromedia Dreamweaver 8 Revealed Chapter 4
Manage Web Site LinksCheck Links Sitewide feature– Internal links– External links– Named anchors– Graphic files– Orphaned files
View results in Link Checker panel
34Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 24 Link Checker panel displaying external links
Show list arrow
External links displayed
35Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 25 Link Checker panel displaying no orphaned files
Show list arrow
No orphaned files shown
36Macromedia Dreamweaver 8 Revealed Chapter 4
FIGURE 26 Assets panel displaying links
URLs button
External linksfor The Striped
Umbrella Web site
37Macromedia Dreamweaver 8 Revealed Chapter 4
Chapter 4 TasksCreate external and internal links
Create internal links to named anchors
Insert rollovers with Flash text
Create, modify, and copy a navigation bar
Manage Web site links