Page Design Tips

Web Feng Shui

 

• Create page structure with layout tables
• One common method for creating a page layout is with HTML tables.
• Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure.

To switch into Layout view:

Choose View > Table View> Layout View

When you switch into Layout view, you can add layout cells to your page. These cells will help you block out your page layout. For example, you could draw a cell along the top of your page to hold a menu, a cell on the right side of the page for submenus, and a cell next to it to hold content.

To draw a layout cell:

	Make sure you are in Layout view, then click the Draw Layout Cell button in the Layout category of the Objects panel. The mouse pointer will change to a plus sign (+).
	Position the mouse pointer where you want to start the cell on the page, then drag to create the layout cell. To create a number of cells without clicking the layout cell button each time, hold down Control.

To draw a layout table:

	Make sure you are in Layout view, then click the Draw Layout Table button in the Layout category of the Objects panel. The mouse pointer will change to a plus sign (+).
	Position the mouse pointer on the page, then click and drag your mouse to create the layout table. If it is the first table you have drawn on the page, it will automatically be positioned at the top left corner of your page.

 

To draw a layout table around existing tables or cells:

Make sure you are in Layout view, then click the Draw Layout Table button in the Layout category of the Objects panel. The mouse pointer will change to a plus sign (+).

Click and drag your mouse around existing layout cells or tables. The layout table will enclose the existing cells or tables.

To draw a nested table:

	Click the Draw Layout Table button in the Layout category of the Objects panel. The mouse pointer will turn into a plus sign (+).
	Position the mouse pointer inside the gray space of an existing layout table, then click and drag your mouse to create the nested layout table.

To add text to a cell:

Click in the layout cell where you want to add text and do one of the following:

	Type text into the cell. The cell will automatically expand as you type.
	Paste text copied from another document. Use the Paste command.

To add an image to a cell:

	Click in the layout cell where you want to add the image.
	Click the Insert Image button in the Objects panel, choose Insert > Image, or drag the Insert Image button from the Objects panel to the page.
	In the Select Image dialog box, select an image file.

To resize a cell:

	Click the cell edge or hold down Control (Windows) or Command (Mac) and click anywhere in the cell.
	Selection handles will appear around the cell.
	Use the selection handles to drag the cell to your chosen size.

To move a cell:

	Click the cell edge.
	Drag the cell where you want it on the page or use the arrow keys. The arrow key moves it 1 pixel at a time, holding down Shift will move it 10 pixels at a time.

To resize a table:

	Click the table tab.
	Use the selection handles to drag the table to your chosen size.

Formatting layout cells and tables:

You can change the appearance of any layout cell or table in the Property Inspector.

Add several cells to a table. Change their size and color. For the table, experiment with cellspacing and padding. Experiment with the placement of text and images, and the wrap option