Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.

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


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


Create LinksCreate external links– Absolute paths

Create internal links– Relative paths


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


FIGURE 1 An example of an absolute path


Selected text URL for link

FIGURE 3 Creating an external link to the Blue Angels Web site


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


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


FIGURE 2 An example of a relative path


FIGURE 5 Creating an internal link on the activities page

Text to be used for link Relative path Browse for

File icon


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


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


FIGURE 8 Named Anchor dialog box

Name of new anchor


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


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


Flash Text

+ link path+ rollover

Text


Inserting Flash Text

FIGURE 12 Media menu on the Insert bar


Inserting Flash Text


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


FIGURE 14 Flash category on the Assets panel

Flash button

Flash text file

Click play button to

preview Flash text


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


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


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


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


FIGURE 16 Ohio Historical Society Web site

Navigation bar with rollovers


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


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


FIGURE 22 Changing settings for the activities element

Show “Down image” initially

is selected


FIGURE 23 about us page with the modified navigation bar


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


Manage Web Site LinksCheck Links Sitewide feature– Internal links– External links– Named anchors– Graphic files– Orphaned files

View results in Link Checker panel


FIGURE 24 Link Checker panel displaying external links

Show list arrow

External links displayed


FIGURE 25 Link Checker panel displaying no orphaned files

Show list arrow

No orphaned files shown


FIGURE 26 Assets panel displaying links

URLs button

External linksfor The Striped

Umbrella Web site


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

Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.

Documents

Transcript of Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.