Dreamweaver Article

Understanding the new Dreamweaver CS3 CSS Layouts

Today, more designers and developers than ever are adopting web standards to deliver their content. One example is the migration from table-based layouts to cascading style sheets (CSS). And while the benefits of embracing web standards such as CSS include a more flexible and robust cross-browser site design, many people don’t have the time to learn brand new ways to get their work done.

Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running quickly, they also help you learn by providing extensive inline comments in the code. Most site designs on the web can be categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers, footers, etc.).

Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start using CSS with the click of the mouse.

In this article, Stephanie Sullivan, who created the CSS Layouts in Dreamweaver CS3, will discuss what they are, how to access them, and what to watch for as you utilize them in your projects.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver CS3

• Try
• Buy

What are the CSS Layouts?

One of the new features in Dreamweaver CS3 is the CSS Layouts. These layouts were created to help you, as a new CSS user, get a quick start on the layout portion of your site. They contain no styling at all. They are heavily commented so that, as you adapt them to your own design, you’ll be aware of the changes you’ll need to make and how those might affect other parts of the layout. The CSS Layouts are also useful for those who understand, and already use CSS for positioning. Think of them as a quick start that gives you a solid base to begin. Previously, I used snippets with my own custom quick starts. Now I have a lot more choices already packaged within Dreamweaver CS3.

Dreamweaver CSS Layouts render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5, and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0, 9.0; and Safari 2.0. When writing the code for the CSS Layouts, care was given to avoid hacks for specific browsers. Though these current, and older browsers have been thoroughly tested, it does not mean the CSS Layouts will not work in earlier browsers. If you need to support an older browser like IE 5 Macintosh, there is very little that actually needs to be added. This is one of the things that will be covered in the book Greg Rewis and I are writing for New Riders called “Mastering CSS with Dreamweaver CS3.”

The CSS Layouts are accessed in one of two ways:

• Choose File > New and go to the Blank Page pane of the dialog.
• On the Dreamweaver Welcome Screen, go to the Create New column and choose the More… link at the bottom.

Figure 1.  A view of the CSS Layouts

Either method will show you all the choices, beginning with a blank HTML document and going through the one, two and three column choices, in that order. These choices are grouped by layout type.

You’ll notice several icons, reused throughout the layouts. These icons denote what kind of width is being used for the columns within the layout. There is also a text description below. The lock icon indicates that the column’s value is written in a fixed pixel size. The spring icon, along with either an em or % above it, indicates that the column’s value is written using a stretchy method – either em-based or percentage-based.

Figure 2.  The lock and spring icons indicate what value is given to the various columns

Once you’ve chosen the type of layout you’d like to start your page with by highlighting it in the dialog, you have several other choices to make. First, you need to choose your doctype (HTML or XHTML). Then, you’ll need to choose where you’d like the CSS placed. Choosing Add to Head will place the CSS selectors into the head of your document to keep it simple while you’re developing your page. Later, you can use the new CSS management features to move it to an external file. Choosing Create New File will place the CSS selectors into a new CSS file linked to your X/HTML document. Finally, choosing Link to Existing File will allow you to use the link icon to point Dreamweaver to an existing CSS document. Remember though, your selector names will have to match the names within the X/HTML document provided.

An overview of the five types of CSS Layouts

There are five basic types of layout positioning to choose from:

• Elastic layout – The values for the overall width, as well as any columns within, are written in em units. This allows the layout to scale with the browser’s designated base font size. This can be more attractive and accessible for low vision users since the column’s widths will get wider allowing a comfortable, readable line length at any size. Since the overall width will scale, your design must allow for a variable width.
• Fixed layout – The values for the overall width, as well as any columns within, are written using pixel units. The layout is centered in the user’s browser window.
• Liquid layout – The values for the overall width, as well as any columns within, are written using percentages. The percentage is calculated from the size of the user’s browser window.
• Hybrid layout – Hybrid layouts combine two of the other types of layouts – elastic and liquid. The overall width of the page is 100% but the side columns values are set to em units.
• Absolutely Positioned layouts – all the previous layouts use floats for the outer columns. The absolutely positioned layouts do exactly what their name implies – they have absolutely positioned outer columns. You must remember, when using these layouts that the side columns are taken “out of the flow” of the document and thus, may have some undesirable results (for instance, your footer won’t “see” where the side column ends and may overlap them on pages where the main content area contains less content than the side columns).

Understanding and using a CSS layout

Let’s create a CSS layout and have a look at what they contain within. Go to the New Document dialog, choose the 2 column fixed, left sidebar, header and footer layout using an XHTML 1.0 Transitional doctype and place the CSS in the head of the document. Click create.

The first thing you may notice is that all the CSS selectors start with the class, .twoColFixLtHdr. This descendant selector tells you what type of page you’re working in. The twoCol means two column, Fix is a fixed layout, Lt is for left column and Hdr means there is a header and footer. All the pages use the same order, so it should make sense as you open the different types. 

The reason this class precedes each selector is to allow you to combine layouts, and thus, write more efficient CSS. Dreamweaver places the class on the body element of each page, the layout we just created displays <body class="">. If your client needed different types of pages, some with two columns and some with three columns, you could combine the CSS for both types of pages. The selectors written for the p, h1, h2, h3, ul, ol, etc could be written as simple type selectors, or even descendant selectors with the division name and type selector (such as #mainContent h1) to keep consistency between different page types. You don’t have to rewrite everything – simply keep the selectors you need for the layout portion -- for each page type when combining pages.

If you will only be using one type of page, you can remove those classes altogether. I personally remove them since it is more difficult to read the selector names in the CSS panel when they’re present.  They’re easy to remove however. Simply highlight the .twoColFixLtHdr class in the CSS of your document (as well as the space behind it). Ctrl/F (Windows) or Cmd/F (Mac) to open the Find and Replace dialog. It will open with the class you highlighted in the Find portion of the window. Make sure the Find in: is set to Current Document, the Search: to Source Code and leave the Replace area blank. Click Replace All. Dreamweaver will quickly strip those classes right out of the document.

Figure 3.  Find and Replace will quickly strip the extraneous classes from your document

Now, click anywhere within the document and on the tag selector at the bottom of the document window, right click on body.twoColFixLtHdr. Choose Set Class > None. This will remove the class applied to the body selector.

As you look through the selectors remaining on the page, you’ll notice that, outside the body selector, there is no font color or sizing. Backgrounds are placed on divs simply to indicate where they begin and end. Other than these two things, there is no styling at all. These layouts are solid structure only, the creative portion is left up to you.

Finally, there are notes to help you understand the particular type of layout you’re using. They are written directly in the div, such as the #sidebar div, “The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content.”

The CSS is also heavily commented, both before the selectors for a division of the page, and following an individual declaration.  These CSS comments can be very helpful when you need to change some of the values, warning you of other areas of the page you might be affecting. But maybe you’re a more advanced user and don’t need the comments, or you’d like to save a copy of the file with comments and then put a copy on the web without them. You can use a regular expression within Dreamweaver’s Find and Replace dialog to instantly strip out all comments. If you don’t know how to create a regular expression on your own, David Powers has created one for you. It’s available as an extension on his web site. Or, take a look at Rob Christensen's Developer Center article " Introduction to Regular Expressions in Dreamweaver."

Clearing floats in the #mainContent div

There are several things to keep in mind while making the CSS Layouts your own. First, in all but the absolutely positioned layouts, the side columns are floated, but the center (#mainContent div) is margined to avoid the floated columns. If you’re unfamiliar with the principles of floating, here’s a quick reminder list (taken from my Developer Center article “Tableless Layouts with Dreamweaver 8”). Read it to get more info on floating and clearing:

1. A float must be given a width
2. A float must be given a directional value of left or right (there is no top or bottom)
3. If you want a float to appear alongside another element, it must precede that element in the source order of the document
4. A float never covers text and inline images
5. Avoid using a width on a block element following a float. Use a margin on the same side of the float instead.
6. Since a float is taken “out of the flow” of the document, a float inside another container must be cleared in order for the parent container to properly enclose it.

There is just one little “gotcha” to be aware of in these layouts. That is, if you are floating something within a non-floated div(#mainContent), and you want to clear that float, you will clear all divs that are floated – in this case the side columns as well. This can give you undesirable effects when the subsequent content in the #mainContent area appears below the side columns.

I coded the layouts in this manner for consistencies sake as well as to help the math-phobic among us. In a three column layout, if you’re floating all three divs, you’ll have to make sure you do your math correctly to discern the proper width for the #mainContent div.  It’s quite easy to margin the #mainContent the same width as the side columns and avoid the math. Also, in some of the hybrid layouts, calculating the actual #mainContent width can be problematic since you’re combining em and percentages within the same layout. Thus, to keep the layouts consistent, we chose to use the margining method consistently throughout the layouts.

This means, if you’re going to clear a float within the #mainContent div, you’ll need to do one of two things. Either calculate the width of your #mainContent area, and float it as well keeping the above float principles in mind. Or, place another div within the #mainContent and float it left or right. Once you place the rest of your content within that floated div, you can clear to your heart’s content without a problem.

Remember too, if you don’t desire a true columned look, you can leave the #mainContent area completely unmargined and the text in the #mainContent area will wrap below the side column wherever that content ends.

Avoiding float drop

Based on my previous discussion of floats, there’s another thing to keep in mind. That is, if you put an element within a div that is wider than the allowable content area of the div, you will experience float drop in Internet Explorer. Float drop is exhibited by the content of a div dropping below the final content of another div. So for example, if your client is using Contribute to edit their own website, you need to make them aware of the image size limitations. For the fixed width layout we’ve created, that size would be a 490px limitation. This is arrived at by taking the left margin of the #mainContent (250px) and adding in the padding of that div (20px on each side) and subtracting it from the overall width of the layout (780px). 780 – 250 – 40 = 490px  The math on the em and percentage based layouts can be a bit tricky since they’re based on the user’s font size or browser window size. These considerations will be addressed in my upcoming book with Greg Rewis, “Mastering CSS with Dreamweaver CS3.”

Figure 4. This is the view in Internet Explorer when the asset is wider than the space provided

Creating equal length columns

The final issue I’ll address is the note I left at the beginning of each column. “The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content.”

You can, in fact, place a border on the #mainContent div to separate the side column visually. But in many cases, you either know you will have a couple very short pages, or  perhaps you’re using some type of dynamic content and will be unable to verify this. Maybe rather than a dividing line, you’d like to use a background color or pattern. In this case, you need to use the faux column method. This is a handy trick I use on most sites I build. You can use any image program to create this graphic. I’ve used Fireworks, my favorite.

The #container controlling our web page’s width is 780px wide. If you were creating a three column layout, you would create your canvas and graphic the same width as your page in order to have all three columns in on graphic. For our two column layout, since the #mainContent area is white, we can actually use a slice the width of our column. Since this will be a repeating slice, you can make it about 10px high. Now, using the color you want for your column, draw a rectangle 230px wide (200px width + 30px side padding = 230px). Export it as a GIF into the images directory of your site definition.

In Dreamweaver, click into your document, and on the tag selector, choose #container. This will display the properties for #container in your CSS panel. Click the pencil icon at the bottom to edit. Go to the Background category > Background image: and navigate to the image you just created. Choose repeat-y. If you’re unfamiliar with the repeat-y portion of that value, that’s simply telling the graphic to tile on the Y axis (or top to bottom on your page). There is no need to position the graphic since the default values are left and top and that’s exactly where we want it to begin.

Preview the page in your browser for the full effect. Notice how the column now goes the full length of the page? I left the CSS layout’s default gray color in place so you could visually see where the column actually stops. You will, of course, need to remove that. While you’re at it, feel free to comment out or remove the color on the #header and #footer as well. You’ll notice that, since the column graphic is placed on the #container, the column runs all the way through those as well. Any element without a background color of its own declared will show this image. In some designs, you may choose to leave the #footer transparent and simply give it margins that match the #mainContent div, keeping the text away from the column. In others, it may be more desirable to have a background color or image on the #header and #footer.

Figure 5.  The new faux column is displayed for the full length of the page

Where to go from here

This article was written to give you a quick overview and understanding of the new CSS Layouts in Dreamweaver CS3. For more in-depth information on using and extending the different types of layouts and to learn more about CSS using Dreamweaver CS3, watch the Developer Center for an excerpted chapter from my upcoming book with Greg Rewis, “Mastering CSS with Dreamweaver CS3.” For more on the Dreamweaver CS3 CSS Layouts in the mean time, you can also watch Joseph Lowery's video tutorial on Using and customizing CSS-based layouts, and Jon Varese's article on CSS page layout basics. For more no CSS and Dreamweaver in general, be sure to check the Dreamweaver Developer Center's CSS page for recent articles and tutorials.

About the author