Creating a Table-based Page Layout

The Tables
Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. You can use tables to create your layout quickly and easily. The rows and cells of the tables effectively act as container boxes for the content youll add later.

In this example we have a 3 rows and 5 columns table. We have selected a 3 rows and 1 column subtable.

Moreabout Tables
Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. Dreamweaver displays the table width and the width for each table column in the Table selector (indicated by green lines) when the table is selected or when the insertion point is in the table.

Nexttothewidthsarearrowsforthetableheadermenuandthecolumn headermenus.Youcanusethemenusforquickaccesstocommontable relatedcommands.Youcanalsoenableordisablethedisplayofthe widthsandmenusbyselectingView>VisualAids>TableWidths.

Tables can have borders, and the cells of a table can have padding, spacing, or both. Cell padding refers to the number of pixels between the cells content and the cells boundaries. Cell spacing refers to the number of pixels between adjacent table cells. If you dont explicitly assign values for cell padding and cell spacing, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. If you want to ensure that browsers display the table with no padding or spacing, set cell padding and cell spacing to 0.

Examinethe design comp

Typically, you dont begin building a website by opening Dreamweaver and laying out pages right away. The first steps to creating a website begin on a piece of paper, or in a graphicsediting application like Macromedia Fireworks.
Graphic designers usually sketch out a piece of comprehensive artwork (also known as a comp) for the website in order to show it to the client and make sure that the initial ideas for the site meet with their clients approval.

Our project:cafTownsendcomp
A comp consists of any number of page elements that the client has requested for their website. For example, the client might say, I want to have a logo at the top of the page, a flash banner interactivity, a navigation that links to these other pages, and a place where I can insert video clips. Based on that discussion, the designer begins planning the layout of the site, and makes sketches of sample pages that fulfill the clients requirements.

Table design for the comp

Design comp for the index.htmlpage

Tables for the comp

700px 90px

166px

1Column 3Rows

24px 24 px 140px 24px 700px 230px 330px 3Columns 1Row 1Column 1Row

Insert tables

You may see the Table selector (indicated by green lines) after you insert a table. You can always make the Table selector disappear by clicking outside the table. You can also disable the Table selector by selecting View > Visual Aids > Table Widths.

Settable properties
Now youll set precise table properties, using Expanded Tables mode, a feature that temporarily adds cell padding and spacing to tables and increases the borders of the tables to simplify editing. Specifically, it lets you position the insertion point precisely without accidentally selecting the wrong table or other table content.

166

9
90

166

24

Second table

Insert an image placeholder

An image placeholder is a graphic that you use until final artwork is ready to be added to a web page. An image placeholder is useful when you lay out web pages because it allows you to position an image on a page before you actually create the image.

Beforeyoupublishyoursite,replaceanyimageplaceholdersyouve addedwithwebfriendlygraphicfilessuchasGIFsorJPEGs. Thenewimagedimensionsaresettothesamesizeastheplaceholder image.Youcanthencreateandedittheimageasyoulike,andreplace theplaceholderimageinDreamweaver.

#993300

About Alternate Text

Alternative text is a textual description of an image on a web page. It is part of the HTML code and does not appear on the page. Its important to provide alternative text for most of your images so that people who use screen readers or textonly browsers can receive the information provided by the image. In the case of a banner graphic, which merely displays a logo for a website, it is not essential to provide alternative text. When you leave the Alternate Text text box blank in the Image Placeholder dialog box, Dreamweaver adds an alt="" attribute to the img tag.

Later, if you want to add alternative text to an image, you can select the. For example, if you later change the logo to include a phone number or address, you would want to provide that information as alternative text.

Addcolortothepage
Now youll add more color to the page by setting colors for some of the table cells and for the background of the page.

Change the Background Color

Your page layout is now complete. The layout contains a number of tables that can hold assets such as images, text, and Flash Video (FLV) files.

Picking Colors
In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). A websafe color is one that appears the same in Mozilla Firefox and Microsoft Internet Explorer on both Windows and Macintosh systems when using 256color mode. There are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a websafe color. You can select colors in Dreamweaver by entering hexadecimal values in the appropriate text boxes, or by selecting a color from the color picker. The color picker uses the 216color websafe palette; selecting a color from this palette displays the colors hexadecimal value. To use the color picker, click on the color box and use the eyedropper to select a color

You can also use the color picker to match colors. For example, if an image on your page contains a certain shade of blue and you want the background color of a table cell to match it, you can select the table cell, click on the color box to open the color picker, move the eyedropper over the blue in the image, and click the mouse button. The color picker fills the selected area with the closest match possible to the color you clicked with the eyedropper. If you select colors by this method, however, the color that the color picker chooses for you may not be a websafe color.