Section 5.8. Tutorial: Adding Rollover Images

5.8. Tutorial: Adding Rollover Images

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.


Note: Before you begin, you'll need the tutorial files from www.sawmac.com/dw8/. Click the Tutorials link. Then click the Chapter 5: Rollover Tutorials link to download the files to your computer.

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:

  1. In Dreamweaver, choose Site Manage Sites .

    The Manage Sites window opens.

  2. 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.)

  3. In the Site Name box, type Rollovers .

    Dreamweaver will use this name while you're working on this tutorial.

  4. 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.

  5. 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.)

  6. 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.

  7. 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).

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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.

  13. 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.

  14. 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.

    Figure 5-21. The Insert Rollover Image window lets you define the name, graphics, and link for a rollover. Make sure the "Preload rollover image" checkbox is turned on.
  15. 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.

  16. 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)


Note: If you're curious why all of these pages are named index.html , see the box on Section 13.1.1.

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 .

Figure 5-22. Adding interactivity to your site using Dreamweaver's rollover objects is a breeze . No messy JavaScript programming to learn!



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net