Accessibility

Dreamweaver Article

 

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


Adrian Senior

Adrian Senior

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

Table of Contents

  1. Introduction
  2. Using a Correct Doc Type
  3. Writing the Body Selector
  4. Writing the Wrapper Selector
  5. Creating the Banner Graphic
  6. Creating the Banner Selector
  7. Creating the Navigation Selector
  8. Defining the Link Style
  9. Setting Up the Content Div
  10. Clearing Elements
  11. Writing the Footer Selector
Created:
23 November 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 the third part of this article series on CSS design concepts. If you missed Parts 1 or 2, 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

In this series, we review how you can use Dreamweaver 8 to move towards using CSS as a positioning technique when developing web pages. Now that you have completed Parts 1 and 2, you are ready to move on and create your first CSS-positioned layout. You will design a fixed-width page that allows the contents to flow. You will use an unordered list to create a horizontal navigation system. You will also design a banner image in Fireworks and use it on the page.

You may find it advantageous to read an earlier tutorial I wrote for the Developer Center on relative, absolute, and static positioning, called Introduction to CSS Positioning in Dreamweaver MX 2004. It should give you a decent grounding in what you can achieve with each of the positioning values.

After you complete Part 3 you will have created your first CSS layout. Its structure resembles Figure 1.

The completed structure

Figure 1. The completed structure

Requirements

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

Dreamweaver 8



Fireworks 8

Sample files:

Prerequisite knowledge:

Page 1 of 11
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.