Examining the Fireworks Template


Earlier in the Fireworks section of the book, you saw how Fireworks can be used to create an HTML template for your site that includes images, hyperlinks, and rollover buttons. Now would be a good time to revisit that template and see how you can use it to begin building out the site for Retro's Cycles.

Note

If you haven't worked through the Fireworks section of the book, now would be a good time to look it over. If you're comfortable with using Fireworks to create HTML templates or just want to skip to building in Dreamweaver, you can also download the support files for this chapter from http://www.retroscycles.com/supportfiles.


1.

Open Dreamweaver.

2.

Open the file named retros_cycle_template.htm that you created in the Fireworks section of the book (see Figure 30.1).

Figure 30.1. The template for the Retro's Cycles site in Dreamweaver.


3.

Click on each of the navigation links on the left side and ensure that the Property inspector (see Figure 30.2) indicates the following links for each of the rollover buttons:

  • Home Links to default.cfm

  • Contact Links to contact.cfm

  • About Us Links to aboutus.cfm

  • Services Links to services.cfm

  • For Sale Links to forsale.cfm

Figure 30.2. The Link field in the Property inspector should indicate the appropriate link for each rollover button.


4.

For each of the rollover buttons, add the appropriate Alternate text, as shown in the following list, by typing the value in the Alt field in the Property inspector. This assists users with disabilities who might visit the site.

  • Home Return to the Home Page

  • Contact Contact Us

  • About Us About Retro's Cycles

  • Services Learn About Our Services

  • For Sale Motorcycles We Offer for Sale

5.

Click on the black image located in the main content area of the document and press the Delete key. Fireworks placed this image here as a placeholder. You want the background of your content area to match the background of the site, so deleting the image is necessary (see Figure 30.3).

Figure 30.3. The page content area is now gray.


6.

Next, you need to ensure that any content placed in the main content area does not run up against the black borders, so you need to add a table to the main content area to provide a buffer. From the menu bar, choose Insert, Table.

7.

In the Table dialog box (see Figure 30.4), create a table that has two rows and one column and is 100% in width. Set the border thickness to 0, the cell padding to 5, and the cell spacing to 5, and then click OK.

Figure 30.4. Insert a table into the main content area.


8.

Place your cursor inside the top row of the new table and click the Align Center button on the Property inspector.

9.

Next, we need to ensure that the table always stays at the top of the main content area. To do this, select the table and press the left arrow key on your keyboard. This places your cursor inside the <td> tag that houses the table. In the Property inspector, select Top from the Vert drop-down options.

10.

Save the page.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

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