by Virginia DeBolt
www.webteacher.ws
One of the impediments to taking full advantage of CSS for users of Dreamweaver in the past has been the lack of an way to create a div with anything but the Draw Layer tool. In Dreamweaver MX 2004, Macromedia added a tool called Insert Div Tag for just that purpose.
Unfortunately, most of the books I have seen that describe the use of Dreamweaver MX 2004 are not giving enough information about how Insert Div Tag can be used. This tutorial is meant to fill the gap.
The page division (div) is the element that provides the structure needed to create layouts with CSS, thereby helping you get rid of tables-based layouts. Most pages fall logically into sections (divs) that could be identified as banner, header, navbar, mainContent, search, sidebar, footer, and so on. Use the Insert Div Tag command in Dreamweaver MX 2004 to create those page divisions and your page is ready for CSS.
The icon for the Insert Div Tag is on the Layout tab of the Insert bar. Here is just the left section of the Insert Bar as it appears in Dreamweaver on Mac OS X. It will look somewhat different in Windows.
The specific icon for Insert Div Tag is this one: 
It can be used to add an empty div at the cursor position on the page. Dreamweaver inserts some dummy text when inserting the div at the cursor location, which is helpful because it gives you something to grab when adding your own content.
With the cursor where you want the new div to be, click the Insert Div Tag icon and a popup window lets you assign a class or id value to the new div.
Since a div is a block-level element, it makes the most sense in terms of structuring your HTML page to use an id here. Remember that named id elements must be unique, in other words they can only be used once on a page. The W3C defines a div as a generic mechanism for adding structure, so it helps to think of your HTML page in structural terms when assigning named id values: header, footer, navbar, etc.
In you have some recurring element on the page, perhaps a blog entry, then it makes sense to use a named class to identify the inserted div. That way, no matter how many different blog entries appear on the page, they can all be styled with the same class rules.
Another way to use Insert Div Tag is to highlight some content you have on your page already. For example, assume you have a list of links that you intend to use as a navbar. You can type the list in the normal fashion. When you are finished with the list, highlight it and Click the Insert Div Tag icon. With something selected on the page, your options for the placement of the div element include Wrap Around Selection.
CSS can be used to style very specific individual elements on the page if the page is structured with specific named elements. Using a div element with an id or class assigned gives you that structure. Think about the navbar example above. The HTML might look like this:
<div id="navbar">
<ul>
<li><a href="page.html">Some page</li>
<li><a href="apage.html">Some a page</li>
<li><a href="bpage.html">Some b page</li>
</ul>
</div>
That little bit of HTML provides several elements that CSS selectors can style. Some examples:
#navbar {styles for the entire navbar}
#navbar ul {styles for the ul in the navbar}
#navbar a {styles for the a elements in navbar}
When using the Dreamweaver CSS Styles panel to add a new style, you can just type in a selector to match the elements you have created in the HTML with the Insert Div Tag option. To style the visited links in the navbar example, click the New CSS Style icon in the CSS Styles panel. With the Advanced radio button selected, simply type your selector in the form field and proceed to create style rules for this element.
Now that you know the uses for Insert Div Tag, many of the books teaching Dreamweaver MX 2004 that have been reviewed on Web Teacher can move you forward from this point.
Of the books recommended on Web Teacher, you might consider using Dreamweaver MX 2004 Savvy to improve your Dreamweaver knowledge. I also recommend Cascading Style Sheets: The Designer's Edge as a good book to help you grasp the concept of using CSS to plan and layout a page. There are also many helpful resources at the Macromedia Developer Center.
Permission is granted to reproduce this page for classroom use. A PDF version is available.