Macromedia Dreamweaver 8 Revealed, Deluxe Education EditionDreamweaver 4-1
Chapter 4
Working with Links
Table of Contents
ChapterObjectives
File Listing
Projects to Assign
Lecture Note: Chapter Overview
Teaching Tip: Importance of Links
Lecture Note: Create External and Internal Links
Key Term: Relative Path
Quick Quiz: Links
Lecture Note: Create Internal Links to Named Anchors
Teaching Tip: “Back to Top” Named Anchors
Classroom Activity: Using Name Anchors
Lecture Note: Insert Rollovers with Flash Text
Key Term: Vector-Based Graphics
Discussion Topic: Flash Text and Browser Plug-Ins
Lecture Note: Create, Modify, and Copy a Navigation Bar
Discussion Topic: Using Navigation Bars
Lecture Note: Manage Web Site Links
Classroom Activity: Special Navigational Structures
Chapter Objectives
- 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.
File Listing
Location / Provided Filename / Saved FilenameLesson 1 / dw4_1.html
heron_waiting_small.jpg
two_dolphins_small.jpg / activities.html
assets/heron_waiting_small.jpg
assets/two_dolphins_small.jpg
Lesson 3 / top.swf
Lesson 4 / home_up.gif
home_down.gif
about_us_up.gif
about_us_down.gif
cafe_up.gif
cafe_down.gif
spa_up.gif
spa_down.gif
activities_up.gif
activities_down.gif / assets/home_up.gif
assets/home_down.gif
assets/about_us_up.gif
assets/about_us_down.gif
assets/cafe_up.gif
assets/cafe_down.gif
assets/spa_up.gif
assets/spa_down.gif
assets/activities_up.gif
assets/activities_down.gif
Lesson 5 / dw4_2.html
heron_small.jpg
boats.jpg
dw4_3.html / fishing.html
assets/heron_small.jpg
assets/boats.jpg
cruises.html
Skills Review / dw4_4.html
b_home_up.jpg
b_home_down.jpg
b_plants_up.jpg
b_plants_down.jpg
b_tips_up.jpg
b_tips_down.jpg
b_classes_up.jpg
b_classes_down.jpg
b_newsletter_up.jpg
b_newsletter_down.jpg
dw4_5.html
fuschia.jpg
dw4_6.html
iris.jpg
dw4_7.html
water_hyacinth.jpg / newsletter.html
top.swf
assets/b_home_up.jpg
assets/b_home_down.jpg
assets/b_plants_up.jpg
assets/b_plants_down.jpg
assets/b_tips_up.jpg
assets/b_tips_down.jpg
assets/b_classes_up.jpg
assets/b_classes_down.jpg
assets/b_newsletter_up.jpg
assets/b_newsletter_down.jpg
annuals.html
fuschia.jpg
perennials.html
assets/iris.jpg
water_plants.html
assets/water_hyacinth.jpg
Project Builder 1 / dw4_8.html
destinations.html
dw4_9.html
water_lily.jpg
sloth.jpg
dw4_10.html
parrot.jpg
giraffe.jpg / services.html
kenya.html
amazon.html
assets/water_lily.jpg
assets/sloth.jpg
destinations.html
assets/parrot.jpg
assets/giraffe.jpg
Project Builder 2 / dw4_11.html
grif_stockley.jpg
dw4_12.html
books.jpg
dw4_13.html
salted_with_fire.jpg / events.html
assets/grif_stockley.jpg
seasonal.html
assets/books.jpg
signings.html
assets/salted_with_fire.jpg
Projects to Assign
Skills Review covers all of the objectives covered in the chapter in a step-by-step progression. Assign this exercise for extra reinforcement.
Project Builder 1 has students work on the TripSmart Web site by adding a page with external links and a page with content and named anchors for easy navigation.
Project Builder 2 has students continue their work on the emma’s book bag Web site. Students create a new page and add content to it.
Design Project asks students to analyze the Web site.
Portfolio Project asks students to continue with their portfolio project. Students design and complete a page with a navigation bar. After creating the navigation bar, students copy it to each completed page in the Web site. They also add several external links and several internal links to other pages as well as to named anchors. Students will also link Flash text to a named anchor. After completing this work, they check for broken links and orphaned files.
LECTURE’S NOTES
Lecture Note: Chapter Overview
In Chapter 4, students expand their understanding of Web links. Web links are the dynamic building blocks of the World Wide Web. They are the connections between pages that make the Web so captivating and easy to use. Regardless of all the visual enhancements a Web site has, it is often the links included that make a Web site useful. Navigating through a Web site would be a tedious and difficult without site-specific navigation panels that provide intuitive paths for the viewer. Connecting the pages of your Web site with a good linking system is crucial. Also, you must decide whether your site is a “one-stop shop” from which you want to discourage viewers leaving or if you are providing a place for viewers to just “drop in,” allowing them to browse through and offering them interesting links to other Web sites that appeal to you.
Links were introduced in Chapter 2. This chapter expands on the concepts and techniques using the Dreamweaver navigation bar feature.
Links to Web pages within the same site are called internal links, while links to other Web sites or e-mail addresses are known as external links. All links are made up of two important parts: the element that viewers see and can click upon and the path that tells the browser and server where to find the Web page that will open when the link is activated. While most links open a page, using named anchors can specify a topic within a page.
Importance of Links
Use this chapter to re-emphasize the high profile of a link on a page and the importance of its clarity and maintenance.Lecture Note: Create External and Internal Links
Students will create external and internal links and view them in the site map.
Creating External Links
Viewers have grown accustomed to having good supplementary external links on a site to provide resources of deeper levels of information or insights into related topics. The Web is a tremendous library. You do not have to reinvent the wheel! People have spent long hours developing information resources on just about any topic. You should link to the ones that would best help your target viewers. To create an external link in Dreamweaver, the first step is to decide upon and select the element that is to serve as the link, be it text or object. Next, in the Link text box of the Property inspector, type in the absolute path that leads to the Web page to which you are linking. Absolute paths include the full URL or Web address of the destination page as it would appear in a browser, for instance, Sometimes the absolute path will include a filename or folder directory structure, such as
To create an external link, students may consider using their browser to go to the site, then copy the address from the browser’s address field, and pasting it into the Link field in the Property inspector. External links will be viewable on the site map once they have been entered into your site.
Figure 1. An example of an absolute path
Creating Internal Links
Internal navigation is very important to how a viewer experiences your site. It should be clear and extensive. Each page will generally focus on one subtopic, so there should be a way to move between them. At the very least, the home page should let viewers go anywhere they want in your site. Students should consider having a persistent internal navigation bar that allows viewers to click around their site from any page. All pages should have some internal links. Viewers must be able to move from page to page, unless you have a specific purpose for not allowing them to (a Web maze, for example, in which viewers may come upon “dead ends”). Internal links are the highways and byways that pave your site and should be treated with the importance that they deserve. To create an internal link, you first select the text element or graphic object that you want to make a link, and then you 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. Relative paths lead from the current page to the linked page on the Web server, maneuvering through folder hierarchies if necessary. They include the file name and folder location of a file in the address and can either be document or root-relative.
Key Term /Relative Path
A relative path is a type of path used to reference Web pages and graphic files within the same Web site. Relative paths include the filename and folder location of a file.Stress that you should design the navigation structure of your Web site so that viewers are never more than three or four clicks away from the page they are seeking. Guide students as they step through the lesson. In this lesson, students will see how the site map begins to take shape. Stress the importance of checking links to make sure they work.
Figure 2. An example of a relative path
Quick Quiz /Links
What is an internal link? What is an external link? What is an absolute path? What is a relative path? What is a root-relative path? What is a document-relative path?Lecture Note: Create Internal Links to Named Anchors
This lesson describes links to specific text within a page.
Inserting Named Anchors
If your Web page has a great deal of content on it, so much in fact that viewers must do a lot of scrolling to reach the bottom and then get back up to the top of the page, anchors may be just the thing for you. By applying a hidden name to a point in the text, named anchors can point a link to jump to a spot within the same page that is being viewed. Students who have spent time on the Web have probably noticed links on the bottom of some Web pages that read “back to top.” These are examples of an anchor. Named anchors act as targets for internal links. Any link (internal, external or named anchor) can specify a target. You can also insert named anchors in strategic places on a Web page, such as at the beginning of paragraph headings.
“Back to Top” Named Anchors
To have a “back to top” anchor link on the bottom of your page, first create a named link called “top” at the very top of your page and then link to it.Creating a link to a named anchor is best done by creating the named anchor first, before trying to link to it. This will help you avoid problems later on. To create a named anchor, use the Named Anchor button on the Common category of the Insert bar. Then name your anchor appropriately in the Named Anchor dialog box. On the Dreamweaver Web page representation, you will see your named anchors as yellow anchor icons. On the Web itself, named anchors are not visible. If you want to hide the named anchor icons in Dreamweaver, click View Visual Aids Invisible Elements. You can also use this to turn named anchor visibility back on if it had been deactivated.
Figure 8. Named Anchor dialog box
Creating Internal Links to Named Anchors
Now that you have created the named anchors, you can create internal links to them. Two methods of doing so are available to you. The first method is by selecting the element that is to be the link and dragging the Point to File icon from the Property inspector to the named anchor icon. Any link (internal, external or named anchor) can be created using the Point to File icon and the Files panel or Asset panel. This is often quicker and more intuitive for students, especially compared to browsing for a file. The second method for creating internal links to named anchors is by selecting the text or graphic that will be the link and then typing the character # followed by the anchor name into the Link text box of the Property inspector. For example, if your anchor name was “top”, you would enter “#top” into the text box.
Explain that you should use lowercase letters, no spaces, and no special characters in named anchor names. You should also avoid using a number as the first character in a named anchor name.
Classroom Activity /Using Name Anchors
Ask students to analyze the HTML code of a Web page that uses name anchors. For example, ask them to point their browsers to Then ask them to analyze the “Contents” menu. Note that the links point to specific sections on the same page. What happens when you click on one of those links? Does the URL shown on the browser change? Next, ask them to view the HTML source code of the Web page. Students should be able to identify the “Contents” section as well as the code that creates the named anchors in the page.Lecture Note: Insert Rollovers with Flash Text
Understanding Flash Text
Anyone who has been tuned in to the Web the past few years has likely heard of Flash animation. Macromedia Flash is a software application that can be used to create vector-based graphics and animate them into interactive movies. Vector-based graphics look smoother and save at a smaller file size, allowing greater animation possibilities. Flash text is a vector-based graphic file containing text. Dreamweaver has integrated some Flash technology for converting text to a graphic. The advantage of using a graphic rather than text is that you have flexibility in the visual appeal of the text. The advantages of using Flash graphics for text are their small file size, their animation options, and the ability to create them within Dreamweaver. They can be used for internal or external links and can be identified by their .swf filename extension. This format is a Macromedia proprietary format that requires a browser plug-in for display.
Key Term /Vector-Based Graphics
Vector-based graphics are graphics that are based on mathematical formulas, as opposed to other types of graphic files such as JPG and BMP, which are based on pixels.Inserting Flash Text on a Web Page
Dreamweaver allows you to create Flash text without even needing to open the Flash software. To
insert Flash text on a Web page, you choose Common from the Insert bar, click the Media list arrow, then click Flash Text. This will open the Insert Flash Text dialog box, allowing you to designate the settings for the text. First type the text phrase you want to convert to Flash into the Text text box. You can then play with the specifications: the color, size, font style, emphasis, and alignment. You can also generate a rollover color for the text, i.e., the color the text will become when the mouse pointer is positioned over it. Next, enter the path for the destination link in the Link text box; external, internal, or internal to a named anchor. The Target list in the Property inspector allows you to select the most apt method of opening the destination page. Finally, type a short descriptive name for your Flash text file into the Save As text box. Be sure to save your Flash text files in the same folder as the page that is using them! Otherwise, they will not work.
Figure 23. Media menu on the Insert bar
Discussion Topic /Flash Text and Browser Plug-Ins
Using Flash text on Web sites requires that the user has a special plug-in installed on his/her browser. It is currently very popular to use the Flash Player, although not all users choose to install it. Ask students to discuss their opinion on the use of Flash text and other type of Web enhancements that require the use of proprietary plug-ins.Lecture Note: Create, Modify, and Copy a Navigation Bar
In Chapter 2, students created a simple text navigation bar.
Creating a Navigation Bar Using Images
In this lesson, students create a more sophisticated navigation bar that consists of graphics, rollovers, and navigation links. The task is simplified using the Dreamweaver navigation bar feature. A navigation bar with graphic instead of text links can help you achieve a more designed look to your Web site. Students will have to create the graphics they want to use in a graphics software program and all the graphics links for the navigation bar should be the same size. You insert a navigation bar by clicking Insert Image Objects Navigation Bar. The Insert Navigation Bar dialog box appears. This dialog box is the place to designate how each graphic should look in each of the four possible rollover states:
- Up Image (when the mouse pointer is away from the image)
- Over Image (when the mouse pointer is position on top of the image)
- Down Image (when the image is being clicked)
- Over While Down Image (when the mouse button is clicked and held down on the image)
By changing the color of the image or by changing the content of the image itself (e.g. a new image that appears to be lit up from behind), you will have created a rollover effect to your links. Dreamweaver limits you to one navigation bar per Web page, if you are using the Insert Navigation Bar dialog box. In general, it best to keep your site navigation system as simple as possible for streamlined user interaction.