• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 6. Translating a Fireworks Layou... > Styling Page Content with CSS Select...

Styling Page Content with CSS Selectors

The main part of the page once again demonstrates the power of CSS and gives you a good opportunity to see how simple styles can replace complex tables with multiple spacer images. In this section, you’ll apply the basic properties required to match the conceptual design developed in Fireworks. As before, the styling of this table will be accomplished by modifying the individual cells.

Click inside the leftmost cell of the last table you inserted, and apply an id by choosing the Attributes tab of the Tag inspector. Name this cell mainLeft.

Add a new style, setting the Selector to #mainLeft. Follow the list in the table to set all the necessary properties into place. When you apply the padding values, be sure the Same for All check box is not selected, and then click OK.

BlockVertical AlignTop
BoxWidth130 pixels
BoxPadding—Top55 pixels
BoxPadding—Right10 pixels
BoxPadding—Left10 pixels

Type in the following, pressing the Enter/Return key after each line and adding a pound sign in the Link field to create temporary links:

Travel Options

Car Rentals

Boat Rentals

Fishing Charters

Sunset Cruises


This adds the text for the secondary navigation.

Select the center table cell, and apply the id of mainCenter. Create a new style with the Selector set to #mainCenter, and set the Padding to 10 pixels in the Box category, with the Same for All check box selected. In the Block category set Vertical Align to Top.

Apply an id to the right cell of mainRight. Add a new style with the Selector set to #mainRight. In the Box category, set the width to 150 pixels and the Padding value to 10 pixels with the Same for All check box selected. Go to the Block category, and set the Vertical Align value to Top and Text Align to Center.


As content is added into the Design view, you should see the design begin to take shape. If you notice small discrepancies in rendering in Dreamweaver, however, be sure to save the CSS file and check your design in a browser. While CSS rendering in Dreamweaver MX 2004 is better than previous versions, it’s still not perfect.

In your Assets panel, locate the file called hammock.jpg and drag it into the center table cell of the page, called mainCenter. In the Property inspector, set the Align value for the image to Left. Press the right arrow key to move your cursor to the right of the image.

Open the placeholder_text.txt file, and paste its contents to the right of the picture or the hammock. As the text comes onto the page, it will be styled with the font type and size applied when the <body> tag was redefined.

Add three new tables into the right column of the main table (mainRight). Set each with two rows and one column; set width to 100% and padding, spacing, and border width to 0. Insert a <p> tag between each table by pressing the Enter/Return key.

Start at the top, and add these three lines of text to each table in turn:

Current Weather

Featured Sponsor

Special Events

Each table needs its own text header, which you’re adding here.

Save your files and preview your work in a browser.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint