Dreamweaver 4 Layout View Tutorial

Getting Started

 

The layout mode is a fast and easy way to setup the underlying structure of your pages. In this tutorial we will construct a simple page from start to finish using the Layout View that will work in all browsers. If you prefer to skip to a specific topic, you can use the Quick Links feature to jump around as needed.

You can download the images I created for this lesson to help you follow along more easily, or you can download the complete tutorial including the images for offline viewing. Download images Download complete

 

Open a new document. File>New Go to Modify>Page Properties and set all four Margins to "0"

From the objects pallette select first the Layout View icon and then the Draw Layout Table icon. Place the cursor towards the top of the screen and draw a somewhat thin table from left to right. Don't worry about the dimensions right now. We will learn how to move and resize the tables later in this tutorial.

* Dreamweaver automatically aligns this first table flush to the top and left margins of the screen

The Objects Pallette

Now we will add additional tables.

For each additional table or cell you wish to draw you must click on the corresponding icon first. Click the Draw Layout Table icon. In the white space below the table you just drew, draw a fairly large table that almost fills the rest of screen. Then draw another table inside of this one towards the left, then another one inside of this one. Remember, you must first click the Draw Layout Table icon to add additional tables.

Now we have a single detached table spanning the top for the banner, a larger table below with a nested table inside of a nested table. These nested tables will be used for navigation.

 

Here is what we should have so far more or less.

* Click image for larger screenshot

 

Moving and Resizing