MAX 2003 Article

This article is an excerpt from Betsy Bruce's MAX conference session on Tableless Layout Using the CSS Box Method. This sneak peek is an incomplete version of the MAX conference session. To complete the entire tutorial, you will need to attend the session at the MAX conference. There is also a complete CSS tableless layout article in the Dreamweaver Developer Center by Drew McLellan. You can find that here. For sneak peeks of ColdFusion and Flash articles, see Simon Slooten's, Object-Oriented ColdFusion article and Art Phillips' article on Consuming Web Services with Macromedia Flash MX Professional 2004. Don't miss out on these sessions or any of MAX 2003! Register now for this year's MAX conference in Salt Lake City November 18-21 . If you can't make it, be sure to check out the live conference coverage during the conference on the MAX Developer Center.

Your mission, should you choose to accept it, is to boldly move forward to separate web page content from the code that governs its presentation. One way to accomplish this noble separation is to combine HTML content (or XML content in the future) with CSS (Cascading Style Sheets). This enables you to accomplish several things:

• Ease of use: CSS makes your website easy to maintain and update.
• Accessibility: CSS enables you to order HTML content logically while presenting it aesthetically with CSS, making those with regular and text-to-speech browsers happy.

You are probably familiar with CSS and its ability to format text. You may not be as familiar with how to leverage CSS to create the web page layout independent of tables. This exercise walks you through creating several divs and formatting them with CSS.

Figure 1. A web page structured using divs and CSS.

Creating Two Columns Using Divs and CSS

Until the promise of CSS3 is realized (multi-column layout!), you can use divs along with some simple CSS styles defined in Macromedia Dreamweaver to create columns. First, you'll create a CSS style and apply it to a single parent div tag as a container for the columns. An ID selector is used to format a single element on a web page; ID selector names begin with #.

Define a New CSS Style in Dreamweaver

1. Create a new page in Dreamweaver and click the New CSS Style button.

   Note: If the CSS Styles panel is not open, select Window > CSS styles.

2. In the New CSS Style dialog box:
   • Name the style #main.
   • Select Advanced (IDs, contextual selectors, and so forth) as the Selector Type.
   • Select This Document Only for the Defined in section. This stores the style in the head of the web page.
   • Click OK.
   

   Figure 2. Define a new ID selector in Dreamweaver.

3. In the New CSS Style Definition dialog box that appears:

   • Set the following in the Background category:

     • a. Background Color: #9EB6AB

   • Set the following in the Box category:

     • a. Width: 599 pixels and Height: 400 pixels
     • b. Uncheck the Same For All checkbox in the Margin section. Set the Right margin to 15 pixels and the Left margin to 15 pixels.

   • Set the following in the Border category:

     • a. Uncheck the Same For All checkbox in all of the sections.
     • b. Set the Right, Bottom, and Left Style to solid.
     • c. Set the Right, Bottom, and Left Width to 1 pixel.
     • d. Set the Right, Bottom, and Left Color to #BCCFB7.
4. Click OK to save the style definition.

Create a Div and Apply the Style

The new Div Tag object in Dreamweaver MX 2004 makes it easy to create content containers. It inserts a div tag and enables you to pick either an ID or class selector to apply to the div. It will either insert the div at the insertion point or wrap the tag around the content selected on the page.

1. Select Insert > Layout Objects > Div Tag to open the Insert Div Tag dialog box.
2. Select Main in the ID pop-up menu.
3. Select At Insertion Point in the Insert pop-up menu.
4. Click OK.
5. Select and delete the text that Dreamweaver automatically inserts in the div.

Figure 3. Use the Div Tag object to create a container.

Define CSS Styles for the Columns

You'll create two more ID selectors defining both the left and right columns. The column definitions set the width as a percentage of the parent container width. They also use the float property to define where the columns are positioned within the parent div.

1. Click the New CSS Style button.

   If the CSS Styles panel is not open, select Window > CSS styles.

2. In the New CSS Style dialog box:
   • Name the style #leftcol.
   • Select Advanced (IDs, contextual selectors, etc) as the Selector Type.
   • Select This Document Only for the Defined in section.
   • Click OK.
3. In the New CSS Style Definition dialog box that appears:
   • Set the following in the Box category:
     • a. Width: 45 %
     • b. Uncheck the Same For All checkbox in the Margin section. Set the Top margin to 5 pixels and the Left margin to 15 pixels and the Bottom margin to 5 pixels .
     • c. Float: left


Figure 4. You define a CSS style for a floating column in the Box category.

4. Click OK to save the style definition.

Create a Div for the Left Column

1. Make sure the cursor is within the div you created above. Select Insert > Layout Objects > Div Tag to open the Insert Div Tag dialog box.
2. Select leftcol in the ID pop-up menu.
3. Select At Insertion Point in the Insert pop-up menu.
4. Click OK.

Define a Style and Create a Div for the Right Column

1. Create another ID selector named #rightcol with the exact same instructions as the left column but set Float to right and set the Right margin to 15 pixels instead of the Left margin.
2. Put the cursor within the parent div. Select Insert > Layout Objects > Div Tag to open the Insert Div Tag dialog box.
3. Select rightcol in the ID pop-up menu.
4. Select At Insertion Point in the Insert pop-up menu.
5. Click OK.

Want to get the rest of this exercise? Register for this year's MAX conference in Salt Lake City November 18-21 and sign up for the Betsy's session.

---

About the author

Betsy Bruce creates training applications using Dreamweaver, Flash, and Authorware. She is the Technical Services Manager at MediaPro, Inc. in the Seattle area. Betsy is the author of Sams Teach Yourself Macromedia Dreamweaver in 24 Hours and eLearning with Dreamweaver: Creating Online Learning Applications from Macromedia Press. She has consulted with clients such as Boeing Commercial Airplane Group, IBM, and Canon USA . Betsy was born and raised in Iowa, received her B.S. degree from the University of Iowa, and an M.A. from San Diego State University (in progress).