Page Design, Tables and Layout
This week we will briefly cover the basics of page design and layout and spend more time demonstrating how to use the Dreamweaver table tools to orient information and graphics on your site/page.
Watch the Quicktime movies firsttable.mov and layoutview.mov — The movies are located on the CD that accompanies your textbook, and is in the Movies folder OR go to the online video library at Lynda.com and view section #9, Tables
Demonstration: Basic Table [MX2004] Note: Same in DW8
There are five ways to make a table in Dreamweaver without using cascading style sheets (CSS):
There are two views: layout view which allows you to see the cells (boxes) that hold your content, and standard view which allows you to see rows and columns of the table
Creating a table from scratchTo insert a table:
In the Design view of the Document window, place the insertion point where you want the table to appear.
Note: If your document contains no content, then the only place you can place the insertion point is at the beginning of the document.
Do one of the following:
Cell Pad: adds room inside the table
Cell Space: adds to the border width
Navigating the table
To move from one cell to another using the keyboard,
do any of the following:
Press Shift+Tab to move to the previous cell.
When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.
The order of precedence for table formatting is:
For example, if you set the background color for a single cell to blue, and then set the background color of the entire table to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.
Using Layout View
By default, when you draw a table or cell in Layout view, Dreamweaver creates the table with fixed width columns. You can change a fixed-width table or cell to relative width by using the Autostretch feature. Autostretch allows you to create a relative width table, and applies flexible layout for the column you set as an expandable column, so that a table automatically spans to fill a browser window.
Information about column widths appears in the column header area at the top of each column of a table. Table width information appears in the table’s column header. A fixed-width column has a specific numeric width, such as 200 pixels, while the column header for an autostretch column contains a wavy line. You can only make one column in a table autostretch.
You can easily change which column Autostretch applies to. You’ll set one of the columns of your table to automatically stretch so that the table fills a browser when viewed.
Part I should be completed
and emailed to me by Monday, March 12.