Welcome to the second part of this tutorial series on creating your first website. This tutorial explains how to create a CSS-based page layout in Adobe Dreamweaver CS4. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and other kinds of content.

If you've heard anything about web page layouts lately, it probably had something to do with CSS layouts, and how they have become the standard for page layouts on the web. CSS layouts offer superior flexibility and control over your layout, allowing you to create elements on the page and fine-tune their positions with pixel precision. However, CSS layouts can be difficult to understand and create, and it helps to have some background knowledge before building your first layout with CSS. You can start by reading CSS page layout basics, which is an overview of how CSS layouts work. But this reading is not required. If you're up for the challenge, you can just dive right into this tutorial to begin creating your first CSS-based layout.

Note: Because CSS layouts can be somewhat difficult to learn as a beginner, you might want to try experimenting with table-based layouts if you've never built a web page before. Although not as fashionable these days for layouts, tables (the standard for page layout before CSS came on the scene) are still a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. More importantly, they are super easy to create with Dreamweaver. If you're interested in exploring table-based layouts, check out the CS3 version of Creating your first website – Part 2: Creating the page layout.

Note also that Dreamweaver CS3 and later comes with many wonderful pre-designed CSS layouts that you can use as the starting point for your web pages. But I didn't want to start you off with any of these layouts because I think it's important for people to experience what it's like to build a page layout completely from scratch. For more information on the CSS layouts that come with Dreamweaver, refer to Create a page with a CSS layout in Dreamweaver Help, and Stephanie Sullivan's article Understanding the new Dreamweaver CS3 CSS layouts.

Requirements

To complete this tutorial, you need to install the following software:

Dreamweaver CS4

• Try
• Buy

Sample files:

• check_magazine.zip (ZIP, 480K)

Prerequisite knowledge

• Creating your first website – Part 1: Setting up your site and project files

Creating your first website with Dreameaver CS4

For your reference, here are all the parts in this series:

Part 1: Setting up your site and project files
Part 2: Creating the page layout
Part 3: Adding content to pages
Part 4: Adding the main image text
Part 5: Adding the Spry menu
Part 6: Publishing your site

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

Page 1 of 8

Next Page

About the author