Accessibility

Fireworks Article

Creating a Layout with Fireworks MX 2004 and Dreamweaver MX 2004

Page 13 of 13Previous PageNext Page

Table of Contents

  1. Introduction

Creating the Ultraweaver Design

  1. Creating the Ultraweaver Design
  2. Creating the Shape Outline
  3. Adding Content Areas
  4. Fills and Effects - Adding Shadow and Color Fill
  5. Fills and Effects - Adding the Glass Effects

Slicing and Exporting Fireworks HTML

  1. Slicing
  2. Exporting Fireworks HTML

Importing and Editing Fireworks HTML in Dreamweaver

  1. Create a new Site definition
  2. Creating a new HTML page and importing the Fireworks HTML
  3. Removing sliced images
  4. Removing Nested Tables
  5. Tiling Images

Tiling Images

To illustrate what you still need to do, go ahead and add several paragraph tags to the main content table cell.

Adding paragraph tags to show the broken tiles

Figure 62. Adding paragraph tags to show the broken tiles

As you can see from Figure 62 above, the interface falls apart when you add several paragraph tags to expand the tables vertically. You can correct this by further editing. Tile the predefined sliced images created in the Slicing and Exporting section. I created three slices named lefttile.jpg, middletile.jpg, and righttile.jpg. Use these images in a vertical tile, and this will eliminate the gaps created when you added the paragraph tags. For now, leave those paragraph tags. This will help you to see where are gaps are while you edit a bit more.

Before you start, I want to mention that you have two methods to choose from when tiling images in table cells. One is embedding the tiled images in a table cell (Example: <td background="assets/images/lefttile.jpg">) and the other is using CSS.

Embedding the image in a table cell has one drawback. It is not valid HTML. However, even though this method is not valid, it does render on all 4.0 version browsers and above. You lose nothing other than validation. To me, there is nothing wrong with this method. I still use images embedded in table cells when I need to support Netscape 4x. If you don't care about supporting Netscape 4x and you want valid HTML, then you will want to use CSS for tiled images. For this article, you will use CSS.

  1. Select the left image as shown in Figure 63 below.

    Selecting the left image

    Figure 63. Selecting the left image

  2. Go to the bottom of the document window and select the <table> tag furthest to the right as shown in Figure 64 below.

    Selecting the table tag

    Figure 64. Selecting the table tag

  3. Press the Delete key on your keyboard. This will remove the nested table and the images.

  4. Go to the Design panel and select the CSS tab. If the deign panel is not open, go to the main menu and select Window > CSS Styles.

    Creating a new CSS style in the CSS Styles panel

    Figure 65. Creating a new CSS style in the CSS Styles panel

  5. In the lower right corner of the CSS Styles tab, click on the plus (+) symbol. This will create a new style that you can define.
  6. In the name field, name the style lefttile.
  7. For the Selector type select, Class (can apply to any tag).

  8. For Define in, select This document only and select OK.

    Setting the attributes for the new CSS style

    Figure 66. Setting the attributes for the new CSS style

  9. The CSS Style definition dialog box appears. From the Category column to the left, select Background.

  10. In the Background Image field, browse to the file lefttile.jpg as shown below. The lefttile.jpg file is included in the sample files you downloaded at the beginning of this article.

    Setting the background images for the CSS style

    Figure 67. Setting the background images for the CSS style

  11. Click OK.

    12. You have just added a new Style definition to your CSS style panel you named lefttile.jpg. This style gets added to the document and can be viewed in code view between the <head> tags

  12. Place your cursor inside the empty cell on the left side of our interface.

  13. Go to the Property inspector, click the Style pop-up menu, select lefttile, select the Vert pop-up menu, and choose Top.

    Applying the lefttile style in the Property inspector

    Figure 68. Applying the lefttile style in the Property inspector

  14. With your cursor still inside the cell, go to the main menu and select Insert > Image.

  15. Browse to the image named maincontentleft.jpg and click OK. Note: Dreamweaver MX 2004 will ask you to set the Alternate Text. From the pop-up menu, select Empty and click OK.

    That completes setting up the tiling for the left side.

    The completed CSS settings for the left side tiling

    Figure 69. The completed CSS settings for the left side tiling

Next, complete the middle graphic tile by defining the CSS style.

  1. In the lower right corner of the CSS Styles tab, click the plus (+) symbol.
  2. In the name field, name the style middletile.
  3. For the Selector type, select Class (can apply to any tag).
  4. For the Define in, select This document only and click OK.
  5. The CSS Style definition dialog box appears. From the Category column to the left, select Background.
  6. In the Background Image field, browse to the file middletile.jpg and click OK.
  7. Place your cursor inside the cell where the middletile.jpg image currently sits.
  8. Go to the Property inspector and click the Style pop-up menu and select middletile.

That completes the middle divider tiling.

  1. In the lower right corner of the CSS Styles tab, click the plus (+) symbol.
  2. In the name field, name the style righttile.
  3. For the Selector type, select Class (can apply to any tag).
  4. For the Define in, select This document only and click OK.
  5. The CSS Style definition dialog box appears. From the Category column to the left, select Background.
  6. In the Background Image field, browse to the file righttile.jpg.
  7. Click OK.
  8. Place your cursor inside the empty cell on the right side of the interface.
  9. Go to the Property inspector and click the Style pop-up menu, select righttile, select the Vert pop-up menu, and choose Top.
  10. With your cursor still inside the cell, go to the main menu and select Insert > Image.
  11. Browse to the image named maincontentright.jpg and select OK.

Guess what? You are done! All that is left to do is add content.

Summary

As you can see, both Fireworks MX 2004 and Dreamweaver MX 2004 can be valuable tools in creating complex designs with ease and speed. It is my hope that what you have learned here will be helpful to you in your projects.

Page 13 of 13Previous PageNext Page