Create external and internal links

1
(No Transcript)
2
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

3
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

4
Create Links

• Create external links
• Absolute paths
• Create internal links
• Relative paths

5
(No Transcript)
6
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

7
FIGURE 1 An example of an absolute path
8
FIGURE 3 Creating an external link to the Blue
Angels Web site
Selected text
URL for link
9
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
10
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

11
FIGURE 2 An example of a relative path
12
FIGURE 5 Creating an internal link on the
activities page
Text to be used for link
Relative path
Browse for File icon
13
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

14
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
15
FIGURE 8 Named Anchor dialog box
Name of new anchor
16
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
17
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

18
Flash Text
graphic.swf
Text
link path rollover
19
Inserting Flash Text
FIGURE 12 Media menu on the Insert bar
20
Inserting Flash Text
21
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
22
FIGURE 14 Flash category on the Assets panel
Flash button
Click play button to preview Flash text
Flash text file
23
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

24
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

25
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

26
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

27
FIGURE 16 Ohio Historical Society Web site
Navigation bar with rollovers
28
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

29
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
30
FIGURE 22 Changing settings for the activities
element
Show Down image initially is selected
31
FIGURE 23 about us page with the modified
navigation bar
32
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

33
Manage Web Site Links

• Check Links Sitewide feature
• Internal links
• External links
• Named anchors
• Graphic files
• Orphaned files
• View results in Link Checker panel

34
FIGURE 24 Link Checker panel displaying
external links
Show list arrow
External links displayed
35
FIGURE 25 Link Checker panel displaying no
orphaned files
Show list arrow
No orphaned files shown
36
FIGURE 26 Assets panel displaying links
External links for The Striped Umbrella Web site
URLs button
37
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