Designing with CSS in Dreamweaver MX 2004 – ...

Creating a Standards-Compliant Page
To achieve the structure shown previously in Figure 1, lay out your page so that it can be process …

Designing with CSS in Dreamweaver MX 2004 – ...

Writing the Body Selector
In Part 1, you learned about defining the margins and padding on the body selector and you saw how CSS allows …

Designing with CSS in Dreamweaver MX 2004 – ...

Writing the Wrapper Selector
As you can deduce from the title of this section, I refer to this div as a wrapper. The function of a wra …

Designing with CSS in Dreamweaver MX 2004 – ...

Creating the Banner Graphic
First create the image for your banner:

Open Fireworks MX 2004.
Create a blank canvas 770 pixels wide by …

Designing with CSS in Dreamweaver MX 2004 – ...

Creating the Banner Selector
The next stage of the process is to create the banner div. Because the content within the wrapper flows f …

Designing with CSS in Dreamweaver MX 2004 – ...

Creating the Navigation Selector
The next element to design within the flow of the page is the container for the navigation. Make this …

Designing with CSS in Dreamweaver MX 2004 – ...

Defining the Link Style
Once again you will use the descendant selector to pattern-match this XHTML document. You confine this link sty …

Designing with CSS in Dreamweaver MX 2004 – ...

Setting Up the Content Div
The next element to design in the XHTML document is the container for the main content, appropriately named …

Designing with CSS in Dreamweaver MX 2004 – ...

Clearing Elements
The following property (and value) makes an element appear below all the content that is above it within the flow of …

Designing with CSS in Dreamweaver MX 2004 – ...

Writing the Footer Selector
Make the footer selector the same way you created the other selectors. The footer will also be an ID select …

Designing with CSS in Dreamweaver MX 2004 – ...

Note: This is the Dreamweaver MX 2004 version of this article. It has been updated for Dreamweaver 8 and you can find the updated versi …

Designing with CSS in Dreamweaver MX 2004 – ...

Preparing Your Page for Debugging
We investigated the float technique earlier in this series and now it’s time to use it to crea …

Designing with CSS in Dreamweaver MX 2004 – ...

Adding the Left Column
Open the basiclayout.css file and create room at the bottom to add a new selector. Once you do this, complete t …

Designing with CSS in Dreamweaver MX 2004 – ...

Organizing the Columns
At the moment you have the two columns roughly in position, although you still have some work to do to give the …

Designing with CSS in Dreamweaver MX 2004 – ...

Floating the Content
Your first job here is to locate the the two clearing divs in the basiclayout.html page and delete them. Do that n …

Designing with CSS in Dreamweaver MX 2004 – ...

Note: This is the Dreamweaver MX 2004 version of this article. It has been updated for Dreamweaver 8 and you can find the updated versi …

Designing with CSS in Dreamweaver MX 2004 – ...

Restyling the Unordered Navigation List
Begin by making changes to your #leftcol #nav ul selector. It should currently look similar to …

Designing with CSS in Dreamweaver MX 2004 – ...

Making Changes to the Link Styles
To change the default, or inactive, state of the links in your new navigation system, you first need …

Designing with CSS in Dreamweaver MX 2004 – ...

Moving the Navigation
At the end of Part 4, I set a little exercise for you to add an h1 title and p elements into the leftcol div. How …

Designing with CSS in Dreamweaver MX 2004 – ...

Making Structural Changes in the HTML Document
Open basiclayout.html in the Code view of Dreamweaver. Because you need to make some pre …