Designing with CSS – Part 3: Creating Your First Design Without Tables
Note: This article has been updated for Dreamweaver 8. If you are still using Dreamweaver MX 2004, please read the version of this article series for Dreamweaver MX 2004. 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.
Requirements
To complete this tutorial you will need to install the following software and files:
Dreamweaver 8
Fireworks 8
Sample files:
- css3_samples.zip (ZIP, 237K)
Prerequisite knowledge:
- Lorem Ipsum Generator extension by Captain Cursor Creations (optional)
- Internet Explorer browser
- Firefox browser
- Read Part 1 of this series
- Read Part 2 of this series
- Experience with “How to Define a Site in Dreamweaver“
Comments