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

Project 6. Translating a Fireworks Layou... > Styling Individual Cell Properties w...

Styling Individual Cell Properties with the Tag Inspector

One of the great new additions to Dreamweaver MX 2004 is the updated and revised Tag inspector. With this new and improved tool, applying IDs to individual page elements can be done entirely within the Dreamweaver workspace. For a visual designer, taking the next step of using CSS selectors to modify those objects just got a whole lot easier.

Click inside the header table to display Dreamweaver’s new Table Selection tabs. Click the tab under the second cell from the left, and choose Select Column.

The first chore is setting the width of the cells in the header table. In the Tag inspector (F9), choose the Attributes tab to open that panel, and click the + next to the CSS/Accessibility category (if you’re in Category view). In the ID field type in hdSpaceLeft.

To apply CSS selectors to individual table cells, you must give the cell an id.

Click the New CSS style button in the CSS Styles panel, and choose Advanced as the Selector Type. Type #hdSpaceLeft in the Selector field, and click OK to save the new settings into the pbr_styles.css file. Choose the Box category, and set the Width to 20 pixels.

This new style controls the width of the table cell, preventing it from collapsing. In the past, controlling cell widths would have been accomplished by inserting spacer images over and over again. Using selectors is a much more efficient way to accomplish the same task.


I’ve borrowed a naming convention from Flash for applying the ids to individual objects on the page—starting with lowercase letters, and then uppercasing each new word in the filename. You can choose another method if you like, but remember that selectors cannot contain spaces or special characters, cannot start with numbers, and are case-sensitive. Choose a standard method for yourself, and stick to it.

Select the next cell to the right and give it an id of hdAdSpacer. Create a new style using #hdAdSpacer as the selector, and set the Width to 350 pixels. This cell sets space aside for an advertisement that may be added in the future.

Provide an id for the rightmost table cell of hdSpaceRight, and create a new style that sets the width of this cell to 20 pixels.

Move down to the mainNav table and select the leftmost table cell and give it an id of navSpaceLeft. Create a new style with the selector of #navSpaceLeft, and set the Width to 120 pixels in the Box category.

Here you’re starting to apply spacing properties to the cells on the far right and far left of the mainNav table. This adds some control to the placement of the text links.

Tab to the next table cell in mainNav, and begin adding the text below, tabbing into the next cell as you complete each entry:






This adds the text for the main navigation.

Select each word and type a pound sign into the Link field of the Property inspector to give the text a temporary link. You’ll be coming back to the styling of the links in a bit, so don’t worry about their appearance for now.

Select the rightmost cell, and give it an id of navSpaceRight. Add another new style, setting the Selector to #navSpaceRight, and apply a Width of 150 pixels in the Box category. This pushes things back together.

In the CSS Styles panel, select the #navSpaceLeft style that is listed and note how the applied styles are shown in the Relevant CSS Tab of the Tag inspector.

Save your page and the CSS file.



Not a subscriber?

Start A Free Trial

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