CIS 205—Web Design & Development

CIS 205—Web Design & Development

DreamweaverChapter 4

Working With Links

Chapter 4: Working With Links

• Introduction– The printed media has always been very sequential– With hyperlinks (links), the Web is non-sequential– Links allow the user to go anywhere within a Web site

(internal) or to other Web sites (external)

• Understanding Internal and External Links– An internal link connects to a page within a Web site– An external link connects to a page outside a Web site

or to an email address– A link has two parts:• The element the user sees and clicks• The path to the page or file that will open as a result

Lesson 1: Create External and Internal Links

• Creating External Links– To create an external link, select the text or object that

will serve as the link– Then type the absolute path to the destination Web

page in the Link text box in the PI– The absolute path (http://www.ibm.com/index.html)

contains• The protocol (such as http://)• The Web site URL (such as www.ibm.com)• The filename (such as index.html)

Lesson 1: Create External and Internal Links (2)

• Creating Internal Links– The home page should have links to all major pages in a

Web site– To create an internal link, select the text or object that

will serve as the link– Then use the Browse for File icon next to the Link text

box in the PI to specify the relative path to the page– A relative path consists of folder names and filenames

relative to the location of the page containing the link• images/banner_graphic.jpg

– You can also use the Point to File icon in the PI or drag a file from the Files panel to the Link text box in the PI

Lesson 1: Create External and Internal Links (3)

• Create an external link1. Open The Striped Umbrella Web site, open

dw4_1.html from your Data Files, save it as activities.html in the striped_umbrella root folder• Overwrite the existing page but don’t update links

2. Attach the su_style.css file, then apply the body_text style to the paragraphs of text (not the navigation bar) Hint: Use Style list in the PI

3. Select the first broken image, click Browse for File icon next to the Src text box, select the heron_waiting_small.jpg file in the Data Files folder

4. Repeat Step 3 for the second image (two_dolphins_small.jpg)

Lesson 1: Create External and Internal Links (4)

• Create an external link (continued)5. Select the text Blue Angels (fifth paragraph)6. Click in the Link text box in the PI, type

http://www.blueangels.navy.mil, press [Enter]7. Repeat Steps 5-6 to create a link to the USS Alabama

site, http://www.ussalabama.com 8. Save you work and preview in a browser

Lesson 1: Create External and Internal Links (5)

• View external links in the site map1. Click the Expand to show local and remote sites

button on the Files panel (upper right)2. Click the Site Map list arrow on the toolbar, click Map

and Files3. Click the + sign to the left of the activities page icon to

view the list of links on this page4. Click the – sign next to the activities page icon to

collapse the list of links5. Click the Collapse button on the toolbar to return to

Document view

Lesson 1: Create External and Internal Links (6)

• Create an internal link1. Select the text “fishing excursions” in the third

paragraph2. Click the Browse for File icon next to the Link text box

in the PI, then double-click fishing.html in the dialog box (the text fishing.html appears in the Link text box)• You can press [F4] to hide all panels, giving you a better view

of a page, then press [F4] to restore open panels

3. Select the text “dolphin cruises” in the same sentence4. Drag the file cruises.html from the Files panel to the

Link text box in the PI5. Save your work and preview in a browser

Lesson 1: Create External and Internal Links (7)

• View internal links in the site map1. Click the Expand to show local and remote sites

button on the Files panel (upper right)2. Click the Site Map list arrow on the toolbar, click Map

and Files3. Click the + sign to the left of the activities page icon to

view the list of links on this page4. Click the – sign next to the activities page icon to

collapse the list of links5. Click the Collapse button on the toolbar to return to

Document view6. Close the activities page

Lesson 2: Create Internal Links to Named Anchors

• Inserting Named Anchors– You can divide a large Web page into specific locations

(such as top or bottom) and then create internal links on the page that go to these locations

– Each such location is given a named anchor (or destination) which serves as the target of an internal link

– Place the insertion point at the desired location on a page, click the Named Anchor button in the toolbar, and enter a short descriptive name for the anchor• A named anchor shows as a yellow anchor on the page• Click View on the menu bar, point to Visual Aids, click

Invisible Elements to show or hide named anchor icons

Lesson 2: Create Internal Links to Named Anchors (2)

• Creating Internal Links to Named Anchors– Select the text or image that will be the link to a named

anchor, then • Drag the Point to File icon (next to the Link text box) to the

named anchor icon on the page, or• Type # followed by the name of the anchor in the Link text

box (such as #top)

Lesson 2: Create Internal Links to Named Anchors (3)

• Insert a named anchor1. Open The Striped Umbrella Web site, open spa.html,

click the banner image, then press [] to place the insertion point to the left of the banner

2. On the menu bar, click View, point to Visual Aids, verify that Invisible Elements is checked

3. Click the Common tab on the Insert bar4. Click the Named Anchor button on the Insert bar,

type top in the Anchor name text box, click OK• Don’t begin an anchor name with a number, use lower case,

and don’t use spaces or special characters

Lesson 2: Create Internal Links to Named Anchors (4)

• Insert a named anchor (continued)5. Click to the left of the Skin Care Treatments heading

and insert a named anchor called skin_care6. Insert named anchors to the left of the other headings

using the names body_treatments, massages, and packages

7. Save your work

Lesson 2: Create Internal Links to Named Anchors (5)

• Create an internal link to a named anchor1. Select the words “skin care treatments” in the first

paragraph, drag the Point to File icon next to the Link text box in the PI to the skin_care anchor

2. Repeat Step 1 for the remaining descriptions in the first paragraph that correspond to the other named anchors on the page

3. Save your work and preview in a browser, testing the links

4. Close the browser

Lesson 3: Insert Rollovers with Flash Text

• Understanding Flash Text– Flash is software for creating vector-based graphics

and animations, which are based on mathematical formulas

– Vector-based graphics are smoother-looking and smaller in file size than pixel-based graphics (GIF, PNG, or JPEG)

– Flash text is a vector-based graphic that contains text and have a .swf filename extension

– Dreamweaver automatically stores the JavaScript code to a folder called Scripts when Flash text is added

Lesson 3: Insert Rollovers with Flash Text (2)

• Inserting Flash Text on a Web Page– Flash text can be created within Dreamweaver by

clicking the Media list arrow on the Common tab of the Insert bar and then clicking Flash Text

– Type the text to appear and format it– Enter the path for the destination link in the Link text

box– Use the Target list to specify how the destination page

will open• _blank (new window), _parent (replacing the frameset), _self

(same frame or window), or _top (whole browser window)

– Type a name for the Flash text file and save it in the same folder as the containing Web page

Lesson 3: Insert Rollovers with Flash Text (3)

• Using Flash Player– To play Flash movies on your computer, the Flash

Player must be installed• Download Flash Player from www.adobe.com• In Internet Explorer, click Tools on the menu bar, click

Internet Options, click the Advanced tab, click Allow active content to run in files on my computer check box, click OK• For other browsers, look for a similar setting under Options

or Preferences

Lesson 3: Insert Rollovers with Flash Text (4)• Create Flash text

1. Open The Striped Umbrella Web site, open spa.html, click after the last sentence on the page, press [Enter] twice to end the ordered list

2. Click the Common tab on the Insert bar, click the Media list arrow, click Flash Text

3. Set the font to Arial, Size to 14, Color to #000066, Rollover color to #66CCFF, type Top of page in the Text text box, type spa.html#top in the Link text box, click the Target list arrow, click _top, type top.swf in the Save as text box, click OK

4. Type Link to top of page in the accessibility dialog box, click OK

Lesson 3: Insert Rollovers with Flash Text (5)• Create Flash text (continued)

5. Click Assets in the Files panel group, click the Flash button on the Assets panel (at left), click the Refresh button (at bottom)

6. Click the top.swf file in the Assets panel, click the Play button (green arrow), move the pointer over the Top of page Flash text in the Assets panel to test

7. Drag top.swf from the Assets panel to the end of the last bulleted entry in each of the spa service groups, adding the text Link to top of page in each dialog box

8. Click the Files panel tab and refresh the Files panel9. Save spa.html, click OK in the Copy Dependent Files

dialog box, preview the page in a browser

Lesson 3: Insert Rollovers with Flash Text (6)• Align Flash text

1. Click the Top of page button at the end of the Skin Care Treatments section, click the Align list arrow in the PI, click Top

2. Repeat Step 1 for the Top of page buttons in the other spa services sections

3. Click View on the menu bar, point to Visual Aids, click Invisible Elements to hide invisible elements

4. Save your work and preview spa.html in a browser

Lesson 4: Create, Modify, and Copy a Navigation Bar

• Create a Navigation Bar Using Images– A navigation bar can use images instead of just text– The images can be created with graphics software– All images should be exactly the same size– To insert a navigation bar, click Insert, Image Objects,

Navigation Bar– Each link is an element in four possible states:• Up image (mouse pointer is not on top of the element)• Over image (mouse pointer is positioned over the element)• Down image (state when you click the element)• Over while down image (pointer is over a clicked element)

– Using different images for the states creates a rollover

Lesson 4: Create, Modify, and Copy a Navigation Bar (2)

• Copying and Modifying a Navigation Bar– You can copy and paste a navigation bar to other pages– The navigation bar should be in the same location on

each page– You can use the Modify Navigation Bar dialog box to

customize the navigation bar for each page

Lesson 4: Create, Modify, and Copy a Navigation Bar (3)

• Create a navigation bar using images1. Open The Striped Umbrella Web site, open spa.html,

select the entire navigation bar and delete it2. Click the Common tab on the Insert bar, click the

Images list arrow, click Navigation Bar3. Type home in the Element name text box, click the

Insert list arrow in the dialog box, click Horizontally, remove the check mark in the Use tables check box

4. Click Browse next to the Up image text box, navigate to the assets folder in your Data Files, double-click home_up.gif

Lesson 4: Create, Modify, and Copy a Navigation Bar (4)

• Create a navigation bar using images (continued)5. Repeat Step 4 for the other image text boxes,

choosing home_down.gif in each case, clicking Yes to overwrite existing file when prompted

6. Type Navigation button linking to home page in the Alternate text text box

7. Click Browse next to the When clicked, Go to URL text box, double-click index.html in the striped_umbrella root folder

8. Click OK, refresh the Files panel, deselect the button9. Place the insertion point in front of the button, press

[Backspace], press [Shift][Enter], save your work

Lesson 4: Create, Modify, and Copy a Navigation Bar (5)

• Add elements to a navigation bar1. Click Modify on the menu bar, click Navigation Bar2. Click the Add button (+) in the dialog box, type

about_us in the Element name text box3. Use about_us_up.gif for the Up image and

about_us_down.gif for all other images for this button

4. Type Navigation bar linking to about_us page in the Alternate text text box and link the button to about_us.html

5. Similarly add café, spa, and activities buttons6. Click OK, save your work, and preview in a browser

Lesson 4: Create, Modify, and Copy a Navigation Bar (6)

• Copy and paste a navigation bar1. Select the entire navigation bar in spa.html2. Click Edit on the menu bar, click Copy (or press [Ctrl]

[C])3. Double-click activities.html in the Files panel4. Select the original navigation bar in activities.html,

click Edit on the menu bar, click Paste (or press [Ctrl][V])

5. Click in front of the navigation bar, press [Backspace], press [Shift][Enter]

Lesson 4: Create, Modify, and Copy a Navigation Bar (7)

• Customize a navigation bar1. Click Modify on the menu bar, click Navigation Bar2. Click activities in the Nav bar elements text box, click

Show “Down Image” initially check box3. Click OK, then save and close activities.html4. Repeat Steps 1-3 to modify the navigation bar in

spa.html in a similar fashion5. Open index.html and about_us.html, paste the new

navigation bar over the existing navigation bars, modifying the Down image in each (as in Step 2)• Make sure only the appropriate button is “Down” in each

6. Save your work and preview in a browser

Lesson 5: Create an Image Map

• An image map is an image with one or more hotspots• A hotspot is a clickable area on an image that serves as a

link• A map of China could have hotspots for each province

linked to pages about each corresponding province• You create hotspots by selecting an image and using

hotspot tools in the PI to define different shapes• Rectangular, Oval, Polygon

• Each hotspot should have alternate text• Too many hotspots on a page adds code and makes the

page download more slowly

Lesson 5: Create an Image Map (2)

• Create an image map1. Open activities.html in the striped_umbrella root

folder2. Select the banner and click the Rectangular Hotspot

tool in the PI (blue rectangle in lower left corner)3. Drag the pointer over the entire umbrella in the

banner, click OK in the dialog box• Click the Pointer Hotspot tool in the PI to adjust the size of a

hotspot by dragging the hotspot handles

4. Click the Point to File icon to the right of the Link text box in the PI and drag to index.html in the Files panel

Lesson 5: Create an Image Map (3)

• Create an image map (continued)5. Type home in the Map text box in the PI to name the

map6. Click the Target list arrow in the PI, click _top (page

opens in same window)7. Type Link to home page in the Alt text box in the PI,

press [Enter]8. Save your work and preview in a browser9. Close the browser and close all open pages

Lesson 6: Manage Web Site Links

• Managing Web Site Links– Links to Web pages may fail because Web sites change

locations or may go down– Broken links indicate poor maintenance– External links must be checked manually on a regular

basis– The Check Links Sitewide feature checks internal links– The Link Checker panel also displays orphaned files,

files that are not linked to any pages in the site

Lesson 6: Manage Web Site Links (2)

• Manage Web site links1. Click Site on the menu bar, point to Advanced, click

Re-create Site Cache2. Click Site on the menu bar, click Check Links Sitewide3. Click the Show list arrow in the Link Checker panel,

click External Links to display all external links4. Click the Show list arrow, click Orphaned Files5. Click the Options button in the Results panel group

(upper right corner), click Close panel group6. Display the Assets panel, click the URLs button

Lesson 6: Manage Web Site Links (3)

• Update a page1. Open dw4_2.html from your Data Files, save it as

fishing.html in the striped_umbrella root folder (overwrite the existing page, don’t update links)

2. Click the broken link image placeholder, click the Browse for File icon next to the Src text box in the PI, browser to your Data Files and double-click the file heron_small.jpg

3. Deselect the image placeholder4. Save and close the page

Lesson 6: Manage Web Site Links (4)

• Update a page (continued)1. Open dw4_3.html from your Data Files, save it as

cruises.html in the striped_umbrella root folder (overwrite the existing page, don’t update links)

2. Click the broken link image placeholder, click the Browse for File icon next to the Src text box in the PI, browser to your Data Files and double-click the file boats.jpg

3. Deselect the image placeholder4. Save and close the page