Macromedia Studio 8 [Electronic resources] : Training from the Source نسخه متنی

Adding the Footer and Basic Navigation

In this task, you'll continue reconstructing the original page design in Dreamweaver. You'll add the footer, which contains both a text-based navigation bar and some copyright information. You'll also set up the hyperlinks, to ensure that the template is functional.

You created a text-based navigation aid at the bottom of the original design, so that visitors to the Jade Valley Web site don't have to scroll to the top of the page to use the navigation bar to visit a different page. This part of the design was eliminated from the Fireworks version, and you eliminated it because it will download much faster as plain text than it would as graphic images of text.

Don't worry about formatting the text just yet, including its alignment (it should eventually be center-aligned). In Lesson 5, you'll use a style sheet to format all the text on the Jade Valley Web site.

[View full size image]

Again, don't worry about the formatting, because you'll use CSS to format the text in the next lesson.

You'll start at the bottom.

Dreamweaver adds a hyperlink to the words, which also become underlined and turn blue. Of course, about doesn't even exist yet (you'll create it in Lesson 6). The blue color of the hyperlink may not be attractive for this design, but you'll change that using CSS in the next lesson.

[View full size image]

If those pages actually existed, the navigation bar would be fully functional. If you tested the page now, without the existing pages, you'd get a The Page Cannot Be Displayed (or similar) error.

[View full size image]

Now that the lower navigation bar is in place, you can set up the graphic navigation bar at the top of the page.

You apply hyperlinks to graphics the same way you do to text: via the Property inspector's Link field.

[View full size image]

The navigation bars at the top and bottom of the page are now functional (the absence of actual pages to point to notwithstanding).