This new feature alone is worth the price of the upgrade to version 4! This is by far the coolest way to create tables ever because it lets you create tables from a visual point of view.

I'm going to begin with a Tracing Image I created. This will show you first hand the benefit of this new feature. I created the comp in Fireworks and exported it as a .png to use as a Tracing Image. To keep file sizes down for this tutorial, the tracing image has been scaled down and therefore is not to size.

Click here to preview the lesson.

Download: Tracing Image

Obviously using a Tracing Image is not required to use the Layout View. We're just using it in addition with Layout View to demonstrate how effective the two are together.

-------

Step 1: Entering Layout View

1. Begin by clicking the Layout View icon on the Objects Palette. You may get the Getting Started dialog box that tells you about the different modes. You can click the checkbox to not display this box again if you like.
2. This will give you access to the Draw Layout Table and Draw Layout Cell options which allow you to create and edit tables and cells in Layout View.
   
   

Step 2: Applying the Tracing Image (Optional)

1. Go up to Modify>Page Properties...
2. Select site.png to for the Tracing Image.

Step 3: Creating the first table cell

1. Click the Draw Layout Cell icon. This will change the cursor to a cross hair cursor.
2. Draw the rectangle over the top blue bar. Dreamweaver will automatically create the table around the cell since you can't have a cell without a table. We could have drawn out the table first but since Dreamweaver does it for us we'll let it:-)
3. Mouse over the cell you just drew until it turns red. When it turns red, click on it to select it. You can now modify it.
4. In the Properties Inspector, adjust the Height if necessary to match that of Tracing Image.

Step 4: Adding More Cells

1. Select the Draw Layout Cell again
2. Draw out another cell around the bottom blue bar
3. Mouse over the cell again and once it turns red, click it to select it.
4. Adjust the Height as needed in the Properties Inspector
5. Change the Background color of the cell by clicking on it to select it and in the Bg field of the Properties Inspector, use the color swatch or input a value.
6. Repeat for the other cell

NOTE: To draw multiple cells or tables without having to click the Draw Layout Cell/Table icon each time, hold down the Command Key (Mac) or the Control Key (PC) while drawing out the cell or table. This will let you continue drawing as many as you need without having to go back to the Objects Palette each time.

Step 5: Creating a table cell around the menu items

1. Select the Draw Layout Cell again
2. Draw out another cell around the menu
3. Notice as you draw out the cell it will snap in place to the cells above and below
4. Create another vertical cell next to the cell you just created for the menu
5. With the cell still selected, apply a Background Color to it in the Properties Inspector

Step 6: Creating a table cell for the logo and the graphic

1. Select the Draw Layout Cell again
2. Draw out another cell around the cans graphic that extends to the end of the table
3. Draw out another cell around the logo that extends to the end of the table

Step 7: Adjusting the cell's size

You can adjust the width of the tables and cells you already created. Go back and reduce the Width of the cell you created between the menu and the graphics.

1. Move your cursor over the cell. The cell will be highlighted in red to let you know you can now select it. Click it to select it.
2. Input a value in the Width option.
3. Set the Background Color to black by clicking on the Bg color swatch.

You can also adjust the width of the tables and cells by manually dragging them.

1. Move your cursor over the cell. The cell will be highlighted in red to let you know you can now select it. Click it to select it.
2. Move your cursor over the cans graphic cell and when your cursor turns into the double ended arrow, click and drag to the left to extend to the middle column.
3. Resize the cell for the logo in the same manner.

Step 8: Inserting your graphics

1. Click once in the Menu cell to insert your cursor.
2. Insert the menu image by clicking the Insert Image object in the Objects Panel.
3. Navigate to the menu.gif image and click Open.
4. Repeat steps 1-3 to insert the other 2 graphics.

Step 9: Centering the Menu.gif graphic

1. Select the menu cell by mousing over the border and when the cell turns red, click it to select it.
2. With the cell still selected, go to the Properties Inspector and set both the Horizontal and Vertical Alignment of the menu.gif to Center and Middle respectively.
3. Change the Background color for the Menu cell to : #dbdbdb
4. Repeat steps 1-2 to center the other 2 graphics.

Step 10: Creating an Autostretch Column

Another popular technique is to create columns that "grow" or stretch as the browser window stretches. Because you, as the designer, can't control how everyone will view your website, this is a good technique to help control how your content is displayed.

In this example, we have our navigation menu on the left side. Let's say we wanted the main part of the site to always be centered in its column. We would need to create a column that stretches ONLY the right side of the web page leaving the menu area a fixed size.

1. Click the drop down arrow in top of the cell for the graphics and logo column.
2. Select Make Column Autostretch. This now makes the column "grow" or stretch with the browser by making it a percentage (100%) width while the other columns remain a fixed width.
3. In the Choose Spacer Image dialog window that opens, select the default option, Create a spacer image file.
4. Click OK
5. Save the spacer image to your images file.
6. Test your page by pressing F12.

Click here to view.

Try resizing the window. As you resize the window, the content area of the page stretches with your browser window while the menu area remains fixed.

----------

You now have a page that stretches with the browser window and hopefully are comforable using Layout View in Dreamweaver 4.

It's a great feature that may at first seem awkward but I'm sure after using it a couple of times you'll begin to not only get used to it but really start seeing how this can help you create more advanced layouts in a shorter period of time.

discuss this topic to forum