Adding interactive elements to a Web page can be quite a chore. Unless you're a programmer, learning and using the JavaScript programming language is time consuming and frustrating. Fortunately, Dreamweaver does most of the work for you, with its powerful, yet easy-to-use, behaviors (described in detail in Chapter 11).
In this tutorial, you'll add rollover images (Section 5.4.1) to a page on the National Exasperator Web site.
After you've downloaded and decompressed the files, you should have a DWImages folder on your computer, containing the Web pages and graphics needed for this tutorial. If you're having difficulties, the Web site contains detailed instructions for downloading the files you'll be using with this book:
In Dreamweaver, choose Site Manage Sites .
The Manage Sites window opens.
Click the New Button and, from the pop-up menu, select Site .
The Site Definition window opens. In the first tutorial, you used Dreamweaver's Site Definition wizard (the Basic tab in this window) to get started. You'll use the Advanced tab this time, so make sure you've selected it. (There's more detail about the Advanced tab in Chapter 13.)
In the Site Name box, type Rollovers .
Dreamweaver will use this name while you're working on this tutorial.
Click the folder icon next to the Local Root Folder field, browse to and select the DWImages folder, and then click Choose. Click OK .
For a recap on how to select a folder, see Figure 1-12 on Section 1.3.2. If you see a message that Dreamweaver is about to create a cache for this site, click OK.
Click Done to close the Manage Sites window .
You've now defined the site you'll be working on in this tutorial. Defining a site is the most basic and important step in building a Web site with Dreamweaver. Make sure you understand and are comfortable with this procedure; if you aren't, read Section 13.1.1 if you're still unclear on how it works and why.
The site's Files window should appear, listing all of the files in the DWImages folder. (If it doesn't, choose Window Files.)
Click in the empty blue-gray space below the "X" in the National Exasperator logo .
If you first selected the photo or clicked anywhere inside the main area of the page, you may see some translucent boxes ( marked with numbers like "100% 900") covering this empty blue-gray area. These boxes are helpful aids for working with tables (Chapter 7), but they can make it difficult to click inside that space. If you're having trouble, first select an image (like the logo) near the top of the page. Now you should be able to clearly seeand clickin the blue area.
The insertion point should now be blinking. You've just placed the cursor inside a table cell where you can add other content such as images or text.
Choose Insert Image Objects Rollover Image .
You may prefer to select Rollover Image from the Image menu on the Common tab of the Insert bar (Figure 5-2). Either way, the Insert Rollover Image dialog box opens (Figure 5-21).
In the Image Name field, type Headlines .
For this effect to work, each button must have its own name, which the Java-Script program uses to communicate with and control the graphic. Dreamweaver gives the graphic a generic name like Image1, but creating a more descriptive name makes it easier for you to edit this effect later on.
Click the top-most Browse button .
The Original Image dialog box appears. In the next step, you'll select the image for the button that will appear on the page.
Browse to the DWImages images_global nav folder; double-click the graphics file called nav_headline.gif .
Graphics for just the navigation bar are in a special folder ( nav ) which is, in turn , inside the main images folder ( images_global ). The path to that graphic images_ global/nav/nav_headline.gif appears in the "Original image" box.
Next stop: choosing the graphic that appears when a visitor moves the cursor over the button.
Click the second Browse button; this time, double-click the file called nav_ headline_f2.gif .
Now, you'll make the button more accessible to people who've turned off their graphics, or who are using screen readers to read the page.
In the "Alternate text" box, type Headlines .
Now all you need to do is add a link to turn the graphic into a navigation button.
Click the third Browse button (next to the "When clicked, Go to URL" box) .
The On Click, Go to URL dialog box opens, awaiting your selection of a Web page that opens when you click your rollover button.
In this case, your button links to the main page of the Headlines section of the site.
Browse to the headlines folder in the DWImages folder, find and double-click the file index.html .
At this point, the dialog box should look like Figure 5-21.
Click OK .
You're back at your Web page document, where your new, rectangular button, called Headlines, proudly appears.
Congratulations! You've made your first rollover. To try it out for yourself, press F12 (Option-F12 on the Mac) to preview the page in your Web browser. When you move your cursor over the button, the text should turn red and pop out at you. When you click the button, it should open the Headlines page.
Return to Dreamweaver .
Do so however you switch programs on your computerby using the Windows taskbar or the Mac OS X Dock, for example.
Finish up the navigation bar by adding the five other rollover images. Simply click next to the Headlines button, and then repeat steps 816 above. Here are the names , graphics and pages you should use:
Name: horoscopes
Graphics: nav_horoscopes.gif and nav_horoscopes_f2.gif
Alternate Text: Horoscopes
Page to Link to: horoscopes/index.html
Name: quiz
Graphics: nav_quiz.gif and nav_quiz _f2.gif
Alternate Text: Quiz
Page to Link to: quiz/index.html
Name: store
Graphics: nav_store.gif and nav_store_f2.gif
Alternate Text: Store
Page to Link to: store/index.html
Name: archives
Graphics: nav_archives.gif and nav_archives_f2.gif
Alternate Text: Archives
Page to Link to: archives/index.html
Name: home
Graphics: nav_home.gif and nav_home_f2.gif
Alternate Text: Home
Page to Link to: index.html (the one inside the DWImages folder)
When you're finished, choose File Save, and then preview your new navigation bar (Figure 5-22) in your Web browser. Move your mouse over the buttons to see if they change; click to jump to another page.
Go to the DWImages folder to see a completed version of this page named finished.html .