1. Every page of your site must be a PHP file, or some kind of server side language file.
  2. You must use Dreamweaver templates to make the design-time stylesheet automatically apply itself to the pages of your site.

This solution is not going to work for everyone because of the two prereqs above; sorry about that. But if you do meet those requirements, then your life just got a LOT easier.

It’s simple:

  1. Open your template.
  2. Switch to code view.
  3. Go to the <head> tag
  4. insert this code:
    <?php if (false) : //design time style sheet hack ?>
    <link href="../css/
    yui-2.4.1-dwcs3-design-time.css" rel="stylesheet" type="text/css">
    <!-- add as many DT stylesheets as you want in this area! -->
    <?php endif; ?>
  5. Save the template (and apply it to all the pages of your site).


The linked stylesheet file is one I use to correct the rendering of a YUI Grids-based layout because natively, Dreamweaver renders it with the main .yui-b block taking only half of the space of the #bd element.

And a note to Adobe:

BUILD THIS FUCKING FEATURE INTO THE GODDAMNED SOFTWARE. (This is the first time I’ve ever sworn on the record on the Web. Sorry for offending non-Adobe employees.)

One Response

  1. I believe this function IS built-in, at least as of DW CS3. See DW

    Text–>CSS Styles–>Design Time…

    The built-in function is simple, does only one file at a time, but there’s a very inexpensive CMX extension that can do the job site-wide.

    This solution uses auxiliary _notes files, which seems fragile to me, and requires a bit of maintenance. I am not certain if it can help with embedded style-sheets.

    I prefer your solution because it is self-contained within the template — which is one of the fundamental reasons for using a template, yes?

    I’m new to all this, and self-taught, but my software engineering experience suggests that there should be a standardized mechanism to make particular markup visible at specified “times”, e.g. design-time.

    Your scheme would seem to depend on DW’s processing of .html files into some kind of internal model as you load each such file to edit. I’ve yet to understand what is done — details might not be available publicly– and I’d guess Adobe might change that processing at any time.

    Thinking out loud,one might write an extension that uncovers link tags –or anything else– that are put inside plain HTML comments, based on user-defined start- and end-strings. That would give a bit more control to users, I think. If I knew JavaScript….



Leave a Reply

Your email address will not be published. Required fields are marked *