Accessibility

Table of Contents

  1. Introduction
  2. Using a Correct Doc Type
  3. Writing the Body Selector
  4. Writing the Wrapper Selector
  5. Creating the Banner Graphic
  6. Creating the Banner Selector
  7. Creating the Navigation Selector
  8. Defining the Link Style
  9. Setting Up the Content Div
  10. Clearing Elements
  11. Writing the Footer Selector

Designing with CSS – Part 3: Creating Your First Design Without Tables

Creating the Banner Graphic

First create the image for your banner:

  1. Open Fireworks 8.
  2. Create a blank canvas 770 pixels wide by 100 pixels tall.
  3. Select the Rectangle tool from the Tools panel
  4. Draw a rectangle that completely covers your canvas
  5. Give it a color value of #212A51.
  6. Open the car image in Fireworks 8 and select it.
  7. Copy the car image.

  8. Paste it onto your newly created canvas and position it on the right side (see Figure 5).

    The banner image

    Figure 5. The banner image

  9. Click the car image to select it.

  10. Choose Commands > Creative > Fade Image to open the Fade Image dialog box (see Figure 6).

    The fade image options

    Figure 6. The fade image options

  11. Select the top-left option, as shown, and click OK.

Your banner should now show the fade effect applied to the car image (see Figure 7).

The banner image with the fade command applied

Figure 7. The banner image with the fade command applied

You are now ready to add some text to the banner. Let's do this in Fireworks:

  1. Select the Text tool from the Tools panel and click on the canvas—anywhere will do.
  2. Double-click the Text tool in the Tools panel to open the Text Editor.

  3. Enter the text shown in Figure 8 and click OK.

    Adding the text to your banner

    Figure 8. Adding the text to your banner

  4. To add a motion effect to the text, click the text area and select Filters > Eye Candy 4000 LE > Motion Trail. (Click OK in the warning dialog box that says this effect converts vectors to bitmaps.)

  5. In the Motion Trail dialog box, complete the settings as shown in Figure 9.

    Setting the properties for the motion trail

    Figure 9. Setting the properties for the motion trail

  6. Click OK to complete the text on the banner (see Figure 10).

    The motion effect has been added to our text

    Figure 10. The motion effect has been added to the text

  7. Select File > Export Preview.

  8. In the Export Preview dialog box set the image type to JPEG and set the compression to 68 (see Figure 11).

    Exporting the banner image

    Figure 11. Exporting the banner image

  9. Once you are happy with your settings, click the Export button to export the image to your local site.

Now you are ready to create the banner div in the CSS file and then add the code for it in the XHTML document.

Page 5 of 11
Previous Page
Next Page