Dreamweaver Ch04

41
Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS

description

 

Transcript of Dreamweaver Ch04

Page 1: Dreamweaver Ch04

Adobe Dreamweaver CS3 Revealed

CHAPTER FOUR: WORKING WITH LINKS

Page 2: Dreamweaver Ch04

Chapter 4 Lessons

1. Create external and internal links

2. Create internal links to named anchors

3. Insert rollovers with Flash text

4. Create, modify, and copy a navigation bar

5. Create an image map

6. Manage Web site links

Page 3: Dreamweaver Ch04

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

Page 4: Dreamweaver Ch04

Understanding Internal and External Links

Internal and external links have two important parts that work together:

The element that viewers see and click on a Web page (text, image, or a button)

The path, or the name and location of the Web page or file that will open when the element is clicked

Page 5: Dreamweaver Ch04

Create Links

Create external links

Absolute paths

Create internal links

Relative paths

Page 6: Dreamweaver Ch04

Absolute and Relative Paths

Page 7: Dreamweaver Ch04

Creating External Links

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

Page 8: Dreamweaver Ch04

Fig. 1: Example of Absolute Path

Page 9: Dreamweaver Ch04

Selected text URL for link

Fig. 3: Creating an External Link

Page 10: Dreamweaver Ch04

Four internal linksfrom the activities

page navigation bar

Two external links onthe activities page

Fig. 4: Site Map Displaying External Links on Activities Page

Page 11: Dreamweaver Ch04

Creating Internal Links

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

Page 12: Dreamweaver Ch04

Fig. 2: Example of a Relative Path

Page 13: Dreamweaver Ch04

Text to be used for link

Relative link to fishing.html

Browse for File icon

Fig. 5: Creating an Internal Link

Page 14: Dreamweaver Ch04

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

Page 15: Dreamweaver Ch04

Named Anchor button

Named Anchor

Text used for link to named anchor

Link to named anchor Point to File icon

Fig. 7: Named Anchor Button on the Insert Bar

Page 16: Dreamweaver Ch04

Name of new anchor

Fig. 8: Named Anchor Dialog Box

Page 17: Dreamweaver Ch04

Point to File icon dragged to named anchor

Named anchor preceded by #

Selected text to link to named anchor

Fig. 10: Dragging the Point to File Icon to a Named Anchor

Point to File icon

Page 18: Dreamweaver Ch04

Understanding 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

Page 19: Dreamweaver Ch04

Flash Text

+ link path+ rollover

Text

Page 20: Dreamweaver Ch04

Inserting Flash Text

Page 21: Dreamweaver Ch04

Fig. 12: Media Menu on Insert Bar

Page 22: Dreamweaver Ch04

Color text box

Font list arrowSize text box

Rollover color text box

Target list arrow

Text text box Link text box

Save as text box

Fig. 13: Insert Flash Text Dialog Box

Page 23: Dreamweaver Ch04

Flash button

Flash text file

Click play button to preview Flash

text

Fig. 14: Flash Category on Assets Panel

Page 24: Dreamweaver Ch04

Create a Navigation Bar Using Images

Allows 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 Adobe Fireworks or Adobe Illustrator

Page 25: Dreamweaver Ch04

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 possible states

Page 26: Dreamweaver Ch04

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

Page 27: Dreamweaver Ch04

Four States

Up Image: mouse pointer is not on top of the element

Over Image: mouse pointer is positioned on top of the element

Down Image: when you click the element

Over While Down Image: mouse pointer is positioned over an element that has been clicked

Page 28: Dreamweaver Ch04

Navigation bar with rollovers

Fig. 17: Ohio Historical Society Web Site

Images serving as links

Page 29: Dreamweaver Ch04

Copy and Modify 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

Page 30: Dreamweaver Ch04

Element name text box

Image file specified for

Up image state

Insert list arrow

Remove check mark

Click to select an image for each element

state

Fig. 18: Insert Navigation Bar

Page 31: Dreamweaver Ch04

Table 3

Page 32: Dreamweaver Ch04

Show “Down image” initially

is selected

Fig. 24: Changing Settings for the Activities Element

Asterisk is placed next to element name

Page 33: Dreamweaver Ch04

Fig. 25: About_us Page with Modified Navigation Bar

Page 34: Dreamweaver Ch04

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

Page 35: Dreamweaver Ch04

Fig. 26: Viewing an Image Map

Clicking an individual state will link to information about parks in that state

Pointer is over Arkansas, which results in a window with a photo and introductory text about Arkansas to display

Page 36: Dreamweaver Ch04

Image map name

Fig. 28: Properties of the Hotspot

Alternate text for hotspot

Target for hotspotLink to index page

Page 37: Dreamweaver Ch04

Manage Web Site Links

Check Links Sitewide feature

Internal links

External links

Named anchors

Graphic files

Orphaned files

View results in Link Checker panel

Page 38: Dreamweaver Ch04

Show list arrow

External links displayed

Fig. 30: Link Checker Panel Displaying External Links

Page 39: Dreamweaver Ch04

Show list arrow

No orphaned files shown

Fig. 31: Link Checker Panel Displaying No Orphaned Files

Page 40: Dreamweaver Ch04

URLs button

External linksfor The Striped

Umbrella Web site

Fig. 32: Assets Panel Displaying Links

Page 41: Dreamweaver Ch04

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

Create an image map

Manage Web site links