Home > Products > Dreamweaver > Support > Working with Studio MX
Dreamweaver Icon Macromedia Dreamweaver Support Center - Working with Studio MX
About page design and layout in Dreamweaver

In Wildlife Project 4: Creating site mock-ups, you used Macromedia FreeHand 10 to create a preliminary sketch of an index page for The Wildlife Project. You drew areas for the banner graphic, navigation bar, Macromedia Flash movie, and other assets that will appear on the page. As you step through this tutorial, you may want to consult the "floorplan" that you previously created. You may even want to print out the index page mock-up so that you can use it as a reference point as you create the page layout in Dreamweaver.

Dreamweaver gives you several different ways to create and control your web page layout. One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use, however, since they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the traditional pitfalls of using tables. For example, you can easily draw layout cells on your page, then move the cells where you want them. Your layout can have a fixed width, or it can automatically stretch to the full width of the browser window. When you switch back to Standard view, your page will contain table cells and columns that correspond to the layout cells you placed on the page.

The following picture illustrates a completed version of a layout for The Wildlife Project index page in Layout view:

The layout cells and tables will eventually hold a banner graphic, a navigation bar, a Macromedia Flash movie, and other assets.

When you draw a layout cell that isn't inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table. You can lay out your page using several layout cells within one layout table—which is the most common approach to web-page layout—or you can use multiple layout tables for more complex layouts. Using multiple layout tables isolates sections of your layout, so that they aren't affected by changes in other sections. In this tutorial, you will use multiple layout tables to design the index page for The Wildlife Project.

For more information about designing and laying out pages in Dreamweaver, including information about standard tables, layout tables and cells, and frames, see Dreamweaver Help (Help > Using Dreamweaver > Designing the Page Layout).

To Table of Contents Forward to next document