Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 1: Initial design

If you use Fireworks to comp your web designs, you probably have worked often with the program's export option that generates both images and HTML code for use in an HTML editor like Dreamweaver. Fireworks creates the table-based layout and slices and arranges the images according to the settings you configure in the Export dialog box.

Although this has been a reasonable way to work, sometimes the table structure that Fireworks exports is complex, making editing very difficult for those in charge of updating page content. Moreover, with the advent of web standards, many designers follow a different method—one that uses CSS and best practices to create attractive and efficient pages with enhanced accessibility. This three-part tutorial guides you through the complete process of using Fireworks and Dreamweaver to produce web standards pages.

In Part 1, you will work in Fireworks to create the design, organize the layers, make the slices, and export them to a defined site. In Part 2 and Part 3, you will work in Dreamweaver to build a CSS-based layout that entirely eschews the use of tables. To get started, download the sample ZIP file for this tutorial.

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.

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.

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.

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.

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

4. Clone the rectangle and make the following changes in the Property inspector (see Figure 6):
   • Width: 520
   • X: 369

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.

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.

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

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

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.

Now that you have the big pictures, you can add details to each band. You'll begin with the Blimey header, which is made up of a horizontal navigation bar and a search field.

Create the header navigation bar

The navigation bar is the object on the left side of the header.

1. In the Layers panel, unlock and select the header layer.
2. Click the New/Duplicate Layer icon.
3. A new layer appears above the header layer.
4. Rename it navigation elements.

   Note: Be sure to lock the header layer again so that you don't accidentally modify it.

5. Make sure the new layer is selected and draw another rectangle on the canvas.
6. Name this object home btn (see Figure 11).
7. Set the width to 92 and the height to 21.
8. Position it at X: 110 and Y: 17.
9. Select Solid for the fill and choose #FFFFFF as the color.

10. Select Edit > Clone.
11. Set the clone's X coordinate to 210.
12. Name the new object archive btn.
13. Select Edit > Clone again.
14. Set the clone's X coordinate to 310.
15. Name the new object author btn.
16. Select Edit > Clone again.
17. Set the clone's X coordinate to 410.

    Tip: Rather than cloning and repositioning objects, you can create a Fireworks Symbol to add into the Library. You can then insert the symbol wherever you need it. To learn more about Symbols and Rich Symbols, refer to the Fireworks Help files.

18. Name the new object contact btn.
19. Select the Type tool.
20. In the Property inspector, set the following attributes (see Figure 12):
    • Font: Arial
    • Size: 10
    • Color #333333
    • Alignment: centered

21. Using these type settings, create text in all caps for each button (see Figure 13):
    • HOME at X: 139 and Y: 21
    • ARCHIVES at X: 228
    • AUTHOR at X: 332
    • CONTACT at X: 426

The navigation elements layer is now complete. Close it by clicking the arrow to the left of its name, and then lock the entire layer.

Create the header search field

You'll need another layer above the header layer to hold the header search objects:

1. Unlock and select the header layer.
2. Click the New/Duplicate Layer icon. A new layer appears above the header layer.
3. Rename the new layer search field elements.

   Note: Be sure to lock the header layer again so that you don't accidentally modify it.

4. Make sure the new layer is selected and draw another rectangle on the canvas.
5. Name this object search box (see Figure 14).
6. Set the width to 159 and the height to 18.
7. Position it at X: 707 and Y: 17.
8. Select Solid for the fill and choose #FFFFFF as the color.

Add the Go text

To add the Go text, follow these steps:

1. Select the Type tool.
2. In the Property inspector, set the following attributes:
   • Font: Arial
   • Size: 11
   • Color: #FFFFFF
   • Alignment: left
   • Type the word Go.
3. Set the following attributes in the Property inspector:
   • X: 871
   • Y: 18

Import the search icon

At his own horizontal band site, Gordon Mackay offers several free Fireworks PNGs, including form buttons. This tutorial uses another of Gordon's icons, a search magnifying glass, that is included with this tutorial's sample files. Import this icon to your canvas.

1. Select File > Import.
2. Navigate to the support_files folder.
3. Locate search_icon.png.
4. Click Open.
5. Move the loaded graphics cursor to the left of the search field and click.
6. Position the icon at X: 679 and Y: 16.
7. Name the object search icon in the Layers panel.
8. Close and lock this layer.

Now that the header is done, you can import the masthead logo.

Import the masthead logo

To import the masthead logo follow these steps:

1. Unlock the masthead layer.
2. Select File > Import.
3. Navigate to the support_files folder.
4. Locate blimey_logo.png.
5. Click Open.
6. Move the loaded graphics cursor within the gradient masthead band and click.
7. Position the logo at X: 110 and Y: 55.
8. Name the object Logo in the Layers panel.
9. Close and lock this layer.

The next step is to create the "big foot."

Create the footer columns

To create the footer columns, follow these steps:

1. Unlock and select the footer layer.
2. Select the Rectangle tool.
3. Draw a rectangle within the footer background.
4. Set its attributes in the Property inspector (see Figure 18):
   • Width: 260
   • Height: 200
   • X: 110
   • Y: 570
   • Fill: solid #191919
   • Stroke: #B5B5B5

5. Clone the rectangle, changing its X coordinate to 369.
6. Clone the rectangle again, changing the X coordinate to 628.
7. Select the three rectangles.
8. Select Modify > Group.
9. Name the object footer columns.

Figure 19 shows how your composite should look at this point.

Create the content region

In Dreamweaver, you will add two new Spry widgets—the Accordion and Tabbed Panels—in the content region of the layout.

Note: A Spry widget is a page element that combines HTML, CSS, and JavaScript data to enable user interaction. The Spry framework for Ajax supports a set of reusable widgets written in standard HTML, CSS, and JavaScript code. For more information on Spry, go to Adobe Labs.

As described on the Working with the Spry Accordion widget page: "An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal the content stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicks different tabs. In an accordion, only one content panel is open and visible at a given time."

To create the accordion widget:

1. Unlock and select the content layer in the Layers panel.
2. Click the New/Duplicate layer button.
3. Name the new layer accordion.
4. Draw a rectangle in the left area of the content border.
5. Set the attributes in the Property inspector as follows (see Figure 20):
   • Width: 258
   • Height: 22
   • X: 111
   • Y: 165
   • Fill: Linear with a left color of #B5B5B5 and a right color of white.
   • Stroke: none

6. Draw another rectangle below the first.
7. Set these attributes in the Property inspector (see Figure 21):
   • Width: 258
   • Height: 3
   • X: 111
   • Y: 188
   • Fill: Solid #7F7F7F

8. Select both rectangles.
9. Select Modify > Group.
10. Name the group menu 1.
11. Clone this menu group.
12. Change its Y coordinate to 265.
13. Name it menu 2 in the Layers panel.
14. Clone menu 2.
15. Change its Y coordinate to 365.
16. Name it menu 3 in the Layers panel.
17. Select the Type tool.
18. Set these attributes in the Propertyinspector (see Figure 22):
    • Font: Arial
    • Size: 10
    • Color: #333333
    • Alignment: center

19. Click inside the first accordion menu andtype Accordion Menu 1.
20. Set X to 125 and Y to 169.
21. Clone the text and set Y to 269.
22. Rename the text Accordion Menu 2.
23. Clone the text and set Y to 369.
24. Rename the text to Accordion Menu 3.

Add the accordion content

The content region of the Accordion widget provides a secondary navigation mechanism for the site. In Dreamweaver you can make the links more accessible by putting them into unordered lists. Use the following steps to simulate this look:

1. Select the Polygon tool (behind the rectangle tool).
2. In the Property inspector, set the number of sides to 3.
3. Hold down the Shift key and drag a triangle on the canvas.
4. While dragging, rotate the triangle so that it points to the right.
5. Set the arrow attributes in the Property inspector as follows (see Figure 24):
   • Width: 7
   • Height: 14
   • X: 111
   • Y: 202
   • Color: #B5B5B5

6. Clone the arrow 8 times, changing the Y coordinate of each as follows:
   • Y: 222
   • Y: 242
   • Y: 302
   • Y: 322
   • Y: 342
   • Y: 402
   • Y: 422
   • Y: 442
7. Select the Type tool.
8. Set the following attributes in the Property inspector:
   • Font: Arial
   • Size: 10
   • Color: #333333
   • Alignment: center
9. Type Sublink Text below the first menu title.
10. Set X to 122 and Y to 202.

11. Clone the text 8 times, changing the Y coordinate of each as follows:
    • Y: 222
    • Y: 242
    • Y: 302
    • Y: 322
    • Y: 342
    • Y: 402
    • Y: 422
    • Y: 442
12. Close and lock the accordion layer.

Note: If you want to organize further, you can group and name the components for each of the three accordion sections.

The completed accordion widget should look like in Figure 26.

As described on the Tabbed Panels Overview page on Adobe Labs: "A Tabbed Panels widget is a set of panels that can store content in a compact space. Site viewers hide or reveal the content stored in the Tabbed Panels by clicking the tab of the panel they want to access. The panels of the widget open accordingly as the visitor clicks different tabs. In a Tabbed Panels widget, only one content panel is open at a given time."

Create the Tabbed Panels heading

To create the Tabbed Panels heading, follow these steps:

1. Unlock and select the content layer in the Layers panel.
2. Click the New/Duplicate Layer icon at the bottom of the panel.
3. Name the new layer tabbed panel heading.
4. Select the Type tool.
5. Set the following attributes in the Property inspector (see Figure 27):
   • Font: Arial
   • Size: 11
   • Color: #333333
   • Alignment: Left

6. In all caps, type HEADING TEXT.
7. Set X to 406 and Y to 188.
8. To add the heading icon, select File > Import.
9. Navigate to the support_files folder for this tutorial and select heading_icon.jpg.
10. Click Open.
11. Position the icon at X: 380 and Y: 186.
12. Name the image heading icon in the Layers panel.
13. Close and lock the layer.

Create the Tabbed Panels widget

Start by creating the tabs:

1. Select the content layer.
2. Click the New/Duplicate Layer icon at the bottom of the Layers panel.
3. Name the new layer tabbed panel.
4. Select the Rectangle tool.
5. Draw a rectangle under the tabbed heading.
6. Set its attributes in the Property inspector as follows (see Figure 28):
   • Width: 82
   • Height: 22
   • X: 369
   • Y: 218
   • Fill: Linear with the left color #C2C2C2 and the right color white
   • Stroke: #7F7F7F (leave at the default 1 pixel)

7. Select the Type tool.
8. Set the attributes in the Property inspector as follows (see Figure 29):
   • Font: Arial
   • Size: 11
   • Color: #333333
   • Alignment: left

9. Type Tab 1.
10. Set X to 395 and Y to 222.
11. Select the Tab 1 text and its tab.
12. Select Modify > Group.
13. Name the grouped object Tab 1 in the Layers panel.
14. Clone the Tab 1 group twice.
15. Set the X coordinate of the second tab to 459.
16. Name the tab Tab 2 in the layers panel.
17. Select the subselection tool.
18. Change the tab rectangle's fill to solid #DDDDDD.
19. Set the X coordinate of the third tab to 549.
20. Name the tab Tab 3 in the layers panel
21. Select the subselection tool.
22. Change the tab rectangle's fill to solid #DDDDDD.
23. Select the Type tool.
24. Change the text in the second tab to Tab 2.
25. Change the text in the third tab to a Tab 3.

Add a border under the tabs

Next, add a border under the tabs to set them off from their content regions:

1. Select the Line tool.
2. Hold down the Shift key and draw a line under the tabs.
3. Set its attributes in the Property inspector as follows (see Figure 30):
   • Width: 488
   • Height: 1
   • X: 371
   • Y: 240
   • Color: #7F7F7F
   • Name: tabbed bottom border

The Tabbed Panels widget is now complete (see Figure 31).

Add the image to the first tab

Follow these steps to add an image to the first tab:

1. Select File > Import.
2. Navigate to the support_files folder.
3. Locate blimey_girl.jpg.
4. Click Open.
5. Move the loaded graphics cursor to the canvas somewhere on the left side of the tab content area and click.
6. In the Property inspector, set X to 378 and Y to 265.
7. Name the object blimey girl in the Layers panel.

Add the text to the first tab

Use the new Fireworks Lorem Ipsum command to add placeholder text to the first tab's content region.

1. Select Commands > Text > Lorem Ipsum.
2. Move the text that appears to the Tabbed Panel content region.
3. Select the text.
4. Select Commands > Text > Set Width.
5. Type 355 in the dialog box that appears.
6. With the text still selected, set attributes in the Property inspector as follows (see Figure 32):
   • X: 523
   • Y: 273
   • Font: Arial
   • Size: 11
   • Line height: 118%
   • Color: #333333
   • Alignment: Left
   • Crispness: Strong Anti-Alias

7. Clone the text.
8. Change the clone's Y coordinate to 385.

The content region, with its two Spry widgets, is now done (see Figure 33).

Note: If you want to tweak the content area for each of the tabbed panels, you can duplicate the page twice with the new Fireworks CS3 Pages panel. You can then work on Tab 2 in one duplicate and Tab 3 in the other duplicate. Bring the appropriate tab to front focus by changing the gradient in the tab to solid #DDDDDD. You can add a new image, or any other content you might like to feature. For more information on the powerful new Pages panel, refer to the Fireworks documentation.

There is only one task left, and that is to add filler text to the footer columns. By placing this text in a separate layer, you can easily toggle its visibility off when you need to. For example, when you export your images, you do not want the filler text to appear in the footer background image.

Set up a Hide Me layer

To set up the Hide Me layer, follow these steps:

1. Create a new layer and name it Hide Me.
2. Drag the layer to the top of the stacking order and position it just below the Web layer.
3. Select Commands > Text > Lorem Ipsum.
4. Move the text that appears to the first column in the footer.
5. Select the text.
6. Select Commands > Text > Set Width.
7. Type 232 in the dialog box that appears.
8. With the text still selected, set attributes in the Property inspector as follows (see Figure 34):
   • X: 124
   • Y: 583
   • Font: Arial
   • Size: 11
   • Line height: 118%
   • Color: #FFFFFF
   • Alignment: Left
   • Crispness: Crisp Anti-Alias

   You can also split the text into two paragraphs by clicking your cursor at the halfway point and pressing the Enter key.

9. Name the text column 1 in the Layers panel.
10. Clone the text.
11. Change the X coordinates to 384 to position the text in the second column.
12. Name this text column 2 in the Layers panel.
13. Clone the text again.
14. Change the X coordinates to 644 to position the text in the third column.
15. Name this text column 3 in the Layers panel.

Your footer should look like the image in Figure 35.

With the addition of the Hide Me layer, the Layers panel should have ten layers as well as an empty web layer (see Figure 36). That will change in the next steps as you draw the slices for the images that will provide the foundation of your CSS layout.

The composite drawing is now complete. The final task in Fireworks is to slice the document into the pieces that will form the images you will use in the XHTML and CSS documents.

The key to developing slices that line up properly in the XHTML document is to use the Property inspector. Using exact coordinates ensures that the corresponding Dreamweaver div elements align properly.

Most of the slices serve as background images for the main divisions of the page. That is why most of the names use the division name, an underscore, and the letters bg for background.

Note: Where the design makes use of gradients, you can use the JPG – Better Quality image format. Where the design uses flat colors, such as in the footer columns, you can use the GIF or the PNG8 format.

Slicing strategy

Begin by analyzing the Fireworks PNG to determine how to slice it up to form the puzzle pieces you'll assemble as images for the page. Most of the images are decorative, and thus you will use them as background images in the cascading style sheet (CSS). There also will be foreground images, for example, the Blimey logo that goes in the header. Because these images are actual content, it is best to insert them in the XHTML document. This strategy satisfies the Web Standards rule of separating content and presentation.

Slicing methods

You can create the slices in two different ways. For self-contained images such as the masthead logo, right-click the image and select Insert Rectangle Slice. For areas such as the header and masthead background images, select the Slice tool from the Web section of the toolbar and draw slices manually.

Drawing slices

Use the Slice tool to draw the first batch of slices.

First, create a slice you can use for the tiling header background image. This image will repeat on the X-axis, so you only need a narrow piece to apply later in the CSS document in Dreamweaver.

1. Select the Slice tool and draw a slice for the header background.
2. Use the Property inspector to set the width to 50 pixels and the height to 54 pixels, and to position the slice at X: 540 and Y: 0.
3. Name it header_bg.
4. Set its image quality to JPEG - Better Quality.

Next, create a slice for the masthead background:

1. Use the Slice tool to draw a slice over the masthead background gradient.
2. Set the width to 50 pixels and the height to 108 pixels, and position it at X: 540 and Y: 55.
3. Name it masthead_bg.
4. Set its image quality to JPEG - Better Quality (see Figure 40).

Now create the slice for the accordion menu background that will tile on the X-axis.

1. Use the Slice tool to draw a rectangle in the accordion menu region.
2. Set the width to 44 pixels and the height to 20 pixels, and position it at X: 310 and Y: 165.
3. Name it acc_bg.
4. Set its image quality to JPEG - Better Quality.

Create the tab background slice that will tile on the X-axis:

1. Use the Slice tool to draw the slice.
2. Set the width to 10 pixels and the height to 20 pixels, and position it at X: 525 435 and Y: 219.
3. Name it tab_bg.
4. Set its image quality to JPEG - Better Quality.

Finally, create the footer background slice that will repeat on the Y-axis to provide the illusion of column borders for that area of the page. This is called faux column technique.

1. Use the Slice tool to draw the slice.
2. Set the width to 770 pixels and the height to 12 pixels, and position it at X: 115 and Y: 574.
3. Name it footer_bg.
4. Set its image quality to PNG 8 by using the drop-down menu in the Optimization panel.

Inserting slices

Use the context menu for the second batch of slices.

The Go button

1. Right-click the search icon and select Insert Rectangular Slice.
2. Name it go.
3. Set its image quality to PNG 8 by using the drop-down menu in the Optimization panel.

The arrow list bullet

1. Right-click the arrow bullet and select Insert Rectangular Slice.
2. Name it list_bg.
3. Set its image quality to PNG 8 by using the drop-down menu in the Optimization panel.

The search icon

1. Right-click the search icon and select Insert Rectangular Slice.
2. Name it search_icon.
3. Set its image quality to JPEG - Better Quality.

The Blimey logo

1. Right-click the Blimey logo and select Insert Rectangular Slice.
2. Name it logo.
3. Set its image quality to JPEG - Better Quality.

The Blimey girl

1. Right-click the Blimey cartoon girl and select Insert Rectangular Slice.
2. Name it blimey_girl.
3. Set its image quality to PNG 8 by using the drop-down menu in the Optimization panel.

The heading icon

1. Right-click the heading decoration and select Insert Rectangular Slice.
2. Name it heading_bg.
3. Set its image quality to PNG 8 by using the drop-down menu in the Optimization panel.

Your comp should look like Figure 50.

Now that you have completed drawing the slices, it is time to export them for use as images in a Dreamweaver site.

Hide the Footer Text layer

First, turn off the visibility of the Hide Me layer so that the footer column text does not show in the exported column background image.

In the Layers panel, toggle the visibility of the Hide Me layer to off.

Note: You may have to unlock the layers first.

Export the slices

Before you go through the export process, you may want to create a Blimey folder in which to store the images. In Part 2, you can use this folder for the defined site in Dreamweaver.

1. Choose File > Export and navigate to the folder where you will store the files for the Blimey site.
2. Select Images Only from the Export pop-up menu.
3. Select Export Slices from the Slices pop-up menu.
4. Deselect the Include Areas without Slices option.
5. Click the New Folder button and name the new folder Blimey.
6. Click the New Folder button again and name the new folder images.
7. Click Export (see Figure 51).

Fireworks will create and export individual images for all slices in your PNG file.

Where to go from here

That's it! You have all the images you need to assemble the design in Dreamweaver. In Part 2 of this tutorial series, you will work in Dreamweaver to prepare the markup that will serve as the foundation for the CSS document.