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

Project 6. Translating a Fireworks Layou... > Styling the Tables with CSS

Styling the Tables with CSS

The functional areas of the design concept break the page into three regions: the header, the navigation bar, and the main content area. Because the design calls for a flexible page layout and you don’t want to work with complicated positioning hacks required by lack of browser support, you’ll insert three tables and apply the styling with CSS.

If you inserted the placeholder text previously, delete it now and be sure the cursor is at the top-left corner of the page.

Click the Table button in the Common category of the Insert bar, and insert a table with one row and four columns. Set the table width to 100% and set border thickness, cell padding, and cell spacing to 0. Make sure the Header option is set to None.


While the <table> tag can be redefined using CSS so that all of the tables on the page are set to 100% width, the border and spacing CSS properties are not as faithfully rendered in all browsers (particularly older versions of Netscape). Setting standard HTML properties for the tables avoids that issue and also makes your design a bit easier to work with in Dreamweaver’s Design view.

Click inside the upper-left table cell, and choose Insert > Image. Navigate to the file called header_photo.jpg, and insert it into the table.

Click the New CSS Style button in the CSS Styles panel, and set the Type to Advanced. Be sure the Define In setting displays the pbr_style.css file.

In the Selector field type in #header, and click OK. This style will be used to apply a background to the table you just inserted.

Choose the Background category—for the Background image property browse to the header_bg.jpg image in the assets/images folder—and click OK. Set the Repeat property to repeat-x, and click OK to close the CSS Definition dialog. This will be the only styling added to this table.

With the table selected, click the list menu for the Table ID in the Property inspector and choose header. Any unused ID selectors in your CSS file will show in this list menu.


Defining the style and then setting the ID using the Property inspector can help reduce spelling errors while setting up your styles, especially since styles are case-sensitive, and Dreamweaver doesn’t honor casing in styles.

Next you’ll style a table for the site navigation. Insert a new table below the header. It should have one row, seven columns with 100% width, and 0 borders, padding, and spacing.

Create a new style with the Selector Type set as Advanced, and type #mainNav into the Selector field.

In the Type category, set the color to #FFFFFF. Choose the Background category, and set a Background Color of #990099. Switch to the Block category, and set the Text align property to Center. Click OK.

As before, the Background property is set here. As you define new styles in an external style sheet, Dreamweaver will automatically open the CSS file. Right-click/Ctrl-click the tab at the top of the Document window and choose Save before previewing your work in a browser to ensure that your changes display properly.

Select the new table you inserted, and choose mainNav for the Table ID in the Property inspector.

Insert a final table with one row and three columns below mainNav. Set border thickness, cell padding, and cell spacing to 0, and table width to 100%. Leave this table unnamed, but save your file.



Not a subscriber?

Start A Free Trial

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