Creating the design

Many web designers are moving away from the use of the standard centered, fixed-width CSS layout that generates a strong vertical feel as its content spills down the page when the visitor scrolls. These designers are instead following a popular technique that our Community MX colleague Zoe Gillenwater calls the "horizontal band" layout.

To tone down the vertical feel of traditional CSS layouts, the horizontal band layout uses background colors or images applied to stacked div elements that stretch across the entire width of the browser window. The following sites provide good examples of this technique:

• Safe Routes to School
• Gordon Mac
• CSS Beauty
• Erskine Design

Basic horizontal band layouts use horizontal bands just for the header and footer, sometimes including a navigation bar. The content area may or may not have a background color behind it. The footers are often very deep, prompting designers to call them fat footers or big foot. It is such a layout that we will create in this series of tutorials.

Additionally, when we recreate the layout in Dreamweaver, we will jazz it up with two Spry widgets: Accordion Panels and Tabbed Panels.

Figure 1 shows a preview of the finished comp for the fictitious blog, Blimey, that this tutorial helps you create.

Figure 1. Preview of the Blimey comp

Create the canvas

To get started, launch Fireworks and create a new canvas (see Figure 2):

1. Choose File > New.
2. Set the width to 1000 pixels, height to 800 pixels, and resolution to 72 pixels/inch.
3. Select White as the canvas color.

Figure 2. New Document dialog box settings

Create the horizontal bands

The first step is to create the horizontal bands that will make up the design's four modules. These modules will be coded with CSS in a later part of this tutorial.

To create the first band, draw a rectangle at the top of the canvas and fine-tune it with the following settings in the Property inspector (see Figure 3):

1. Set the width to 1000 and height to 54.
2. Position rectangle at X: 0 and Y: 0.
3. For Fill, select the Linear Gradient.
4. Click the Color Picker to edit the colors.
5. Set the left color to #636363 and the right color to #060606.

Figure 3. Gradient rectangle settings for the header background

Be sure to give each object you create a meaningful name so that you can easily recognize it as the list of objects and layers grows. Name this rectangle header background.

Next, add the second band that will form the background for the Blimey logo (see Figure 4):

1. Select the Rectangle tool.
2. Draw any size rectangle on the canvas.
3. In the Property inspector, set the width to 1000 and height to 104.
4. Position the rectangle at X: 0 and Y: 55.
5. Select Linear Gradient with the left color #D5D5D5 and the right color #FFFFFF.
6. Name this rectangle masthead background.

Figure 4. The settings for the masthead background

Note: To create a comp that is properly aligned in the XHTML document, use the Property inspector to set coordinates precisely, rather than placing and sizing elements by clicking and dragging.

Create the content outline

The content portion of the layout will not have a color band behind it, but will instead have a border to set it off from the other portions of the page.

1. Select the Rectangle tool.
2. Draw any size rectangle under the masthead area.

3. In the Property inspector, set the following attributes (see Figure 5):

   • Width: 260
   • Height: 360
   • X: 110
   • Y: 164
   • Fill: solid color white
   • Stroke: #B5B5B5, 1-Pixel Soft

   

   Figure 5. The settings for the left rectangle

4. Clone the rectangle and make the following changes in the Property inspector (see Figure 6):

   • Width: 520
   • X: 369

   

   Figure 6. The settings for the right rectangle

5. Select both rectangles.
6. Select Modify > Group.
7. Name the group content border in the Layers panel.

Figure 7 shows the completed content border.

Figure 7. The completed content border

Add the big footer background

The final band will serve as the background for the footer. Horizontal band layouts often have deep footers that provide more than just a copyright notice or address. These footers can have complex layouts of their own, with columns and auxiliary content that maximizes the page real estate.

1. Select the Rectangle tool.
2. Draw any size rectangle on the canvas.
3. In the Property inspector, set the width to 1000 and height to 260 (see Figure 8).
4. Position the rectangle at X: 0 and Y: 540.
5. Select the fill color to solid #191919.

6. Name this object big foot background.

   

   Figure 8. The big footer background settings

The bands are now complete. Your PNG should look like Figure 9.

Figure 9. The completed horizontal bands

Organize components into layers

Before you go any further, organize these components onto new layers to separate them from each other and make it easier to keep track of where to make modifications:

1. Click the New/Duplicate Layer button (located at the bottom of the Layers panel) three times until you have Layers 1, 2, 3, and 4 (see Figure 10).
2. Rename Layer 1 header.
3. Rename Layer 2 masthead.
4. Rename Layer 3 content.
5. Rename Layer 4 footer.

Drag the appropriate objects into each layer (see Figure 10).

Figure 10. Organizing with layers

Lock each layer by clicking the box to the right of the eye icon. This makes it impossible for you to accidentally delete or change anything in each horizontal band background as you add other objects to its layer.

Page 2 of 8

Previous Page

Next Page