FOTD 16: Dreamweaver 8 – Unified CSS Panel

Although Dreamweaver MX 2004 made signficant improvements to the way CSS styles were handled in development, there were still some parts of the overall CSS workflow that were a bit awkward. In order to get the most mileage out of Dreamweaver with CSS layouts, you needed to devote a whopping amount of real-estate to the associated panels- CSS Styles and Relevant CSS. And unfortunately, the former panel was buried within the ‘Design’ panel set, and the latter wasn’t even listed in the Window menu! Dreamweaver 8 to the rescue- both panels have been combined into a single, unified CSS panel that serves as a centralized control panel for working with CSS layouts. Shall we explore?


The new CSS panel set actually includes two panels- CSS Styles and the rather-familiar Layers. The Layers panel/tab, as in previous versions of Dreamweaver, simply lists the absolutely-positioned DIVs (dubbed ‘Layers’ in Dreamweaver-speak) in your document and lets you order them/toggle visibility/etc. Nothing new there, so I won’t waste your time with that tab any longer. However, the new CSS Styles panel/tab is the all-new hybrid combination of the old CSS Styles panel and the Relevant CSS panel- centralizing all the features of the two in a very usable manner, with far less screen real-estate wasted as a result. Here’s two screenshots (showing the two display modes available):

panel_selected_cat_list.jpg
The new CSS Styles Panel – Current Selection mode
panel_allrules_alphabetical.jpg
The new CSS Styles Panel – All Rules mode

As you may have noticed above, the new CSS Styles panel can either display all the styles in your document (the ‘All’ toggle button), or just the styles in your current document selection (the ‘Current’ toggle button). These two display modes (for sake of reference, I’ll refer to them as ‘All Rules Mode’ and ‘Current Selection’ mode) afford you two ways to drill into your document- let’s start our examination with ‘All Rules’ mode.The new CSS Styles panel has two main areas- a Style list (top) and a Rule Inspector (bottom). The Style List shows all the defined styles in your document, or attached to it via external stylesheets. The Rule Inspector below offers a summary of the defined properties in the selected style- and you can type your edits/changes right into the panel, of course. You can also see exactly where the given rule/property was defined – both in the current document as well as within any attached stylesheets. This makes exploring, or just quickly evolving your site designs and layouts, far easier. And if you’ve been reading these features of the day for a while, you’ll know I’m a big fan of keyboard shortcuts- of which there’s a few you’ll want to know about when using the Rule inspector:

  • Tab key
    Move the current selection.
    Tab by itself moves the selection to the right and down a next line.
    Shift+Tab moves the selection to the left and up a line, reversing the action.

  • Left and Right Arrow keys
    When the currently selected item is a CSS category, the Right arrow key opens the category and the Left arrow key closes the category. The Up and Down keys move your selection up or down respectively.
  • Enter key
    The Enter key applies your changes, and exits ‘editing mode’.

At the bottom of the panel, you’ll find a row of buttons that offer some familiar functionality as well as some new options- along with the old-standby icons for attaching an external stylesheet and creating/editing/deleting CSS styles (on the right of the bottom margin), there are three new icons over on the left that control the view of the Rule inspector.

panel_view_icons.jpg
  • Category View
    The default view for the Rule inspector- arranging the CSS properties into 8 categories- Font, Background, Block, Border, Box, List, Positioning and Extensions. I find this view handy for defining new properties, primarily.

  • List View – Alphabetical
    Lists all CSS properties in alphabetical order, properties with defined attributes being placed at the top of the list for easy access. Very handy view for general ‘contextual’ browsing of your document’s properties.
  • List View – Set Properties Only
    Lists all *defined* CSS properties/rules for the selected element, with an ‘Add Property’ link at the bottom for easier creation of new rules. I like to use this mode most of all, as it cuts out all the ‘cruft’ from my lists, and only shows what I’ve defined.

And while I’m on the subject of ‘Relevant CSS’, have you noticed in DWMX 2004 that if you create a new visual style you’re stuck with a non-descriptive “style1″ style in your doc that you had to manually edit? Well now, you can select that style in the Property Inspector, and click the new ‘Edit CSS’ button right next to it to jump to the relevant view of the CSS Styles panel- and edit/change/modify it as you see fit. Great way to contextually use the CSS Styles panel from a visual workflow.I could probably babble on about all the different ways you can leverage this panel, but honestly- you’ll find new and creative ways to let the CSS panel help you work faster and smarter, no matter whether you’re a visual designer or a code-based developer. The new CSS Styles panel is one feature you’ll really want to try for yourself to get a full read on, but I’m certain you’ll find it indispensible once you have. Being able to quickly iterate designs, review cascading rules in my documents, and generally get a quick visual ‘snapshot’ of all properties related to my selection (or document, of course) has been quite a help for me, personally- and I spend most all of my time in Code view.I’ll trim today’s FOTD here though- feel free to drop any questions you may have in the comment section and I’ll respond as soon as I’m able… see you again tomorrow for FOTD 17!