Download Insert Rollovers with Flash Text

Macromedia Dreamweaver 8
Revealed
WORKING WITH
LINKS
Chapter Lessons
Create 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
Macromedia Dreamweaver 8 Revealed
Chapter 4
2
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
3
Create Links
Create external links
– Absolute paths
Create internal links
– Relative paths
Macromedia Dreamweaver 8 Revealed
Chapter 4
4
Macromedia Dreamweaver 8 Revealed
Chapter 4
5
Creating External Links
Steps
– 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
Macromedia Dreamweaver 8 Revealed
Chapter 4
6
FIGURE 1
An example of an absolute path
Macromedia Dreamweaver 8 Revealed
Chapter 4
7
FIGURE 3
Creating an external link to the Blue Angels Web site
Selected text
Macromedia Dreamweaver 8 Revealed
URL for link
Chapter 4
8
FIGURE 4
Site map displaying external links on the activities page
Four internal links
from the activities
page navigation bar
Two external links on
the activities page
Macromedia Dreamweaver 8 Revealed
Chapter 4
9
Creating Internal Links
Steps
– 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
Macromedia Dreamweaver 8 Revealed
Chapter 4
10
FIGURE 2
Macromedia Dreamweaver 8 Revealed
An example of a relative path
Chapter 4
11
FIGURE 5
Text to be
used for link
Creating an internal link on the activities page
Browse for
File icon
Relative path
Macromedia Dreamweaver 8 Revealed
Chapter 4
12
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
13
FIGURE 7
Named Anchor button on the Insert bar
Named Anchor
button
Text used for
link to named
anchor
Named
Anchor
Point to File
icon
Link to named
anchor
Macromedia Dreamweaver 8 Revealed
Chapter 4
14
FIGURE 8
Named Anchor dialog box
Name of new
anchor
Macromedia Dreamweaver 8 Revealed
Chapter 4
15
FIGURE 10
Dragging the Point to File icon to a named anchor
Point to File
icon dragged
to named
anchor
Named anchor
preceded by #
Macromedia Dreamweaver 8 Revealed
Point to File
icon
Chapter 4
16
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
17
Flash Text
Text
+ link path
+ rollover
Macromedia Dreamweaver 8 Revealed
Chapter 4
18
Inserting Flash Text
FIGURE 12
Macromedia Dreamweaver 8 Revealed
Media menu on the Insert bar
Chapter 4
19
Inserting Flash Text
Macromedia Dreamweaver 8 Revealed
Chapter 4
20
FIGURE 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
Macromedia Dreamweaver 8 Revealed
Chapter 4
21
FIGURE 14
Flash category on the Assets panel
Flash button
Click play
button to
preview Flash
text
Flash text file
Macromedia Dreamweaver 8 Revealed
Chapter 4
22
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
23
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
24
Mouse States
Up: 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
Macromedia Dreamweaver 8 Revealed
Chapter 4
25
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
26
FIGURE 16
Ohio Historical Society Web site
Navigation bar
with rollovers
Macromedia Dreamweaver 8 Revealed
Chapter 4
27
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
28
Add button
FIGURE 17
Insert Navigation Bar dialog box
Element name
text box
Graphic file
selected for Up
image state
Click to select
an image for
each element
state
Insert list arrow
Remove check
mark
Macromedia Dreamweaver 8 Revealed
Chapter 4
29
FIGURE 22
Changing settings for the activities element
Show “Down
image” initially
is selected
Macromedia Dreamweaver 8 Revealed
Chapter 4
30
FIGURE 23
about us page with the modified navigation bar
Macromedia Dreamweaver 8 Revealed
Chapter 4
31
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
Macromedia Dreamweaver 8 Revealed
Chapter 4
32
Manage Web Site Links
Check Links Sitewide feature
– Internal links
– External links
– Named anchors
– Graphic files
– Orphaned files
View results in Link Checker panel
Macromedia Dreamweaver 8 Revealed
Chapter 4
33
FIGURE 24
Link Checker panel displaying external links
External links
displayed
Macromedia Dreamweaver 8 Revealed
Chapter 4
Show list
arrow
34
FIGURE 25
Link Checker panel displaying no orphaned files
Show list
arrow
No orphaned
files shown
Macromedia Dreamweaver 8 Revealed
Chapter 4
35
FIGURE 26
Assets panel displaying links
External links
for The Striped
Umbrella Web site
URLs button
Macromedia Dreamweaver 8 Revealed
Chapter 4
36
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
Manage Web site links
Macromedia Dreamweaver 8 Revealed
Chapter 4
37