Tip: The Dreamweaver 8 toggle displaying CSS Styles

I recently updated a page for the first time since moving to Dreamweaver 8 and noticed some changes in the way Dreamweaver 8 deals with absolutely positioned layers in Design View. It threw me off for a while and I asked for help. Al Sparber, from Project Seven came to my rescue with the advice to toggle off style rendering in Dreamweaver’s Design View. I’m now wildly happy over the toolbar that allows you to toggle style rendering! Here’s the whole story.

The page I updated uses a Project Seven scroller. This is an artist’s portfolio page on a site (hgwinn.com) that I’ve updated happily with several versions of Dreamweaver for a few years. Previous versions of Dreamweaver used an icon for each absolutely positioned layer that allowed me to select an individual layer for editing.

DW 2004 MX shows yellow layer icons

The absolutely positioned layers are shown as selectable with a yellow icon in Dreamweaver MX 2004.

Design View with layer selected

In Dreamweaver MX 2004, when I selected the first layer icon on the left, I could edit that layer and none of the other layers appeared in Design View.

This is a complex page and I normally worked on it in Code View, except that I liked changing the image size measurements in Design View. There is a small spiral arrow that can be used to insert the correct measurements for a new image on the Property inspector. But to be able to use it to change the dimensions for a newly inserted image, one must be able to select the image in Design View. Using the icons I just described, selecting the image was a simple matter.

Now move on to Dreamweaver 8. I open the portfolio page in DW 8 for the first time and things look very different. There are no icons, every layer is visible and it’s impossible to select parts from layers individually.

Portfolio in design view in dw 8

Notice the tag selector at the lower left. In Dreamweaver 8, a div is selected. I cannot drill down into the text or image elements of the div in order to edit anything.

Now, I’m not in a panic, because I normally work on this stuff in Code View, but remember my penchant for changing to new image dimensions with the Property Inspector. I have a very hard time remembering numbers, and going from an image size display readout in Fireworks, to typing width and height attributes in an image tag in Code View is a multi-step process for me. I have to go back and forth several times to get the numbers right. I really want to be able to insert a new image and just press the wonderful little icon on the Property inspector that will set the image size to the right dimensions for me.

So I call out to my cronies in the web world, and Al Sparber notices my question. (He’s always on the alert for folks having trouble with Project Seven products. They have great support for their products in the Project Seven forums, by the way, but that isn’t where I was asking my question.) Al tells me about a new option in Dreamweaver 8 that I hadn’t discovered yet. There’s a toolbar for style rendering. It’s at View > Toolbars > Style Rendering.

Style Rendering toolbar

This toolbar is such a fine addition to Dreamweaver 8! It allows you to render the page in Design View for screen media, print media, handheld media, projection media, tty media, tv media, or—the icon on the far right—toggle displaying CSS styles.

When I use the icon to toggle off CSS style rendering I get a linearized view of the page that is super easy to edit.

DW 8 with CSS rendering off

Each layer is now individually viewable, I can select text or image (note the tag selector at the lower right) for quick editing, and I am happy, happy, happy.

Now I’m using this toolbar extensively to work with other pages in other sites where Dreamweaver’s Design View was getting in my way. And don’t forget the value of being able to render your pages for print styles or handheld styles using this toolbar. I consider this advancement in WYSIWYG tools to be one of Dreamweaver 8′s best new features.

4 thoughts on “Tip: The Dreamweaver 8 toggle displaying CSS Styles

  1. Virginia, FANTASTIC! The right-hand button is called “Toggle displaying of CSS styles” and I’m not sure why this was turned off (or why Dreamweaver sometimes ignores it and shows the pages correctly), but turning it back on is the solution to my problem of no styles showing. Thanks!

  2. Than god you posted that, I was going nuts, restalling dreamweaver ando so on… And all I had to do was pressing that button..

  3. OMG — How did that get turned off???!!! I’ve spent four days going insane trying to figure out what happened to all my websites! Thank you, thank you, thank you — it took several web searches before I got the right combo of keywords to find this page — Thank God!

  4. Hi,

    Thanks very much for this tip..I had one layer with a style of “display:none” , so I couldn’t see it anywhere, then I read something like using a temporary Style sheet just for design time to make that object “display:inline” , so that was a little more steps, but with this, I can just turn it on and off and that’s awesome =), thanks so much for this!! :D

    ED

Leave a Reply