Accessibility
Jon Varese

Jon Michael Varese

www.jmvarese.com

Table of Contents

  1. Introduction
  2. Examine the design comp
  3. Create and save a new page
  4. Insert tables
  5. Set table properties
  6. Insert an image placeholder
  7. Add color to the page
Created:
26 September 2005
Modified:
17 December 2007
User Level:
Beginner
Products:
Dreamweaver

Creating your first website – Part 2: Creating the page layout

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

If you've heard anything about web page layouts lately, it probably was something about CSS layouts, and how they have become the standard for page layouts on the web. Although this is true—and although CSS layouts offer a great deal of flexibility and control over your layout—CSS layouts can be very difficult to learn as a beginner. For this reason I'm going to show you how to do a layout with HTML tables first, so that you can get your web page up and running. Although not as fashionable these days for layouts, tables are still a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. More importantly, with Dreamweaver CS3 they are super easy to create. In this tutorial you'll create a number of tables in a new Dreamweaver document. The rows and cells of the tables effectively act as container boxes for the content you add later.

Note: Dreamweaver now comes with many wonderful pre-designed CSS layouts that you can use as the starting point for your web pages. I didn't want to start you off with these layouts, because I think it's important for people to experience what it's like to build a page layout completely from scratch. After you've completed this tutorial series, however, you will probably want to investigate CSS layouts. You can start by reading CSS page layout basics, which is an overview of how CSS layouts work. Then move on to Stephanie Sullivan's article, Understanding the new Dreamweaver CS3 CSS layouts.

Requirements

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

Dreamweaver CS3

Prerequisite knowledge:

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

Page 1 of 7
Next Page

About the author

Jon Michael Varese is a senior technical writer at Adobe, and lead writer for Dreamweaver. He has written web and print documentation for Dreamweaver, Fireworks, FreeHand, Flash, and ColdFusion. In addition to writing web tutorials, he is currently at work on his Ph.D. in 19th-century British Literature.