edgeofmyseat.com

Dreamweaver MX and External CSS-P

Posted on 30 June 2002 by Rachel Andrew

Rachel
This is an old article maintained for historical purposes. The information may not be correct or relevant today.

This tutorial will walk through how to develop a layout in Dreamweaver MX that relies on an external stylesheet for the positioning. Whether you have developed the stylesheet yourself using another tool, or have downloaded a stylesheet from sites such as glish.com or Blue Robot in order to try your hand at CSS layouts, the below techniques should be helpful. To get started, I have prepared a simple stylesheet that I shall refer to in this tutorial. You can download it here.

Once you have downloaded and saved the stylesheet, create a new html or XHTML document in DW and attach your stylesheet using the CSS Style panel.

Save your document. Type this is the content div at the point at which the cursor is in your document. Don’t hit return or anything else! Then select the text you have just written.

At the bottom right of your Property Inspector lives the Quick Tag Editor.

The Quick Tag Editor can wrap a selection with a tag, and in order to work with the divs defined in our stylesheet we will need to wrap areas of the page in div tags. So, click on the Quick Tag Editor icon and a small dialogue will appear, we need to wrap our selection with a div tag, with the name of our content div in the stylesheet, which is conveniently named ‘content’. Type into the dialogue:

Hit return, and your text should now display as per the attributes set for the div named content. Now select your text once again (not the whole div) and in the Quick Tag Editor type:

This will wrap your first line of text in a paragraph tag – of course you could use here or anything else that you have defined. Dreamweaver gets confused if you try to wrap a tag in a div and applies the id to the , which is why we seem to be doing this backwards!

You will need to do the same for any other divs that are specified in the stylesheet. However, Dreamweaver is reluctant to let you click outside your initial div in order to add a second, to get around this, the simplest thing to do is switch into code view. Click the cursor after the closing tag, and then switch back into design view.

In my example stylesheet I have a div named navigation which provides a right hand navigation bar. Once you have clicked outside of your first div as described above type this is the navigation div into your document window. It should show up just underneath the border of your initial div.

Select this text and with the Quick Tag Editor wrap it with:

The navigation should immediately jump over to the right hand side of the screen. Wrap the text in a tag as we did with the content text.

Once you have set up all your defined divs, you should find that you can work relatively easily with your CSS layouts in Dreamweaver. As an example, in the navigation area add two dummy links – link one and link two. Using my stylesheet these should show up bright orange as that is the main defined link color.

Select the text of one link then, using the CSS view of the Property Inspector apply the ‘nav’ class to this link.
Things to watch out for

If you had ever tried to work with a CSS layout in Dreamweaver 4 you will know that it was a battle for anything other than the simplest of layouts, with Dreamweaver adding inline styles and cheerfully breaking your layouts. Dreamweaver MX is a far better tool for working in this way as long as a few things are remembered:

Don’t drag your divs around the document window once you have set up your divs, try not to move them. This will probably not cause a problem with divs positioned from the left, but right positioned divs such as our navigation panel may end up with an additional left position inserted into the stylesheet, which will spoil the liquid layout of the page. If this does happen, simply remove the additional left position attribute from the stylesheet.

Take care that you are selecting the appropriate text/page element when applying classes and wrapping elements in a div. Sometimes it is worthwhile switching into Code View to check.

I hope that this tutorial has been helpful, you may find that it is easier to set up the initial divs in Code View and then switch to Layout View to add your content. However, this tutorial serves to point out some of the places where problems could occur but also to show that, with Dreamweaver MX, we have a tool where it is possible to work with CSS layouts.