Accessibility

Dreamweaver Article

 

Designing with CSS – Part 4: Creating a Two-Column Layout


Adrian Senior

Adrian Senior

www.webade.co.uk
www.communitymx.com
www.ukcsstraining.co.uk

Table of Contents

  1. Introduction
  2. Preparing Your Page for Debugging
  3. Adding the Left Column
  4. Organizing the Columns
  5. Floating the Content
Comments
Created:
6 December 2004
Modified:
12 September 2005
User Level:
Beginner

Note: This article has been updated for Dreamweaver 8. The CSS features in Dreamweaver have been vastly improved in Dreamweaver 8. You can learn about those changes in Julie Hallstrom's article, An Overview of CSS in Dreamweaver 8.

Welcome to Part 4 of this article series on CSS design concepts. If you missed Parts 1, 2, or 3, you can get to them below:

Designing with CSS – Part 1: Understanding CSS Design Concepts

Designing with CSS – Part 2: Defining Style Properties and Working with Floats

Designing with CSS – Part 3: Creating Your First Design Without Tables

This series explains how you can use Dreamweaver 8 to move towards using CSS as a positioning technique when developing web pages. In Parts 1 and 2 you investigated how to use some of the techniques common to most designs that use the CSS positioning technique. In Part 3 you implemented those skills to create your first CSS design. You have seen how to use the Dreamweaver panels to create ID, class, and tag selectors; and you know how to use code hints to write these same selectors directly into the style sheet without using any panels at all. The Dreamweaver panels are fine but there is no substitute for becoming intimately familiar with the syntax of CSS.

In Part 4 you pick up from where you left off in Part 3. It's time to modify the layout of your design by easily making dramatic structural changes to your basiclayout.html page. If you wish, download the files from the link below or simply open your existing files in Dreamweaver and pick up from where you left off (at the end of Part 3).

On with the show!

Requirements

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

Dreamweaver 8

Sample files:

Prerequisite knowledge:

Page 1 of 5
Next Page

About the author

Adrian Senior owns the UK-based web design agency Webade, which has been in business since 1998. He is also a member of Team Macromedia and a partner at Community MX. The year 2004 saw Adrian's first trip to America, where he visited Orlando and delivered two sessions at the TODCon conference.

Adrian also provides training courses for companies who need to train their designers how to build compliant, accessible web sites using CSS and xhtml.

He's been married to his wife, Janette, for 24 years and has two children, Antony and Eleanor.