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