Dreamweaver Getting Started: Creating a table-based page layout

dreamweaver| Create | page

This article describes how to create a table-based page layout in Macromedia Dreamweaver 8. The page layout determines how your page will appear in the browser, such as displaying menus, images, and how Macromedia Flash content will be placed. A table is a powerful tool for displaying tabular data on an HTML page and for laying out text and graphics. You can use tables to quickly and easily create layouts. In this tutorial, you will create a number of tables in a new Dreamweaver document. The rows and cells of these tables are actually used as container boxes for the content that you will add later.

　　Check Design Grass Sample

Typically, creating a Web site does not begin by opening Dreamweaver and immediately laying out the page. The initial work of creating a Web site starts with a paper or graphics editing application, such as Macromedia Fireworks. Graphic designers often draw sketches (also known as "grass-like") of the Web site's integrated graphics to show customers and ensure that the site's initial ideas are satisfactory to the customer.

The design of the grass sample is made up of any number of page elements that the customer requires for its Web site. For example, a customer might ask: "The top of the page has a logo, a navigation feature that links to other pages, a section for online storage, and a place to insert a video clip." "Based on these discussions, designers began planning the site layout and producing sample page sketches that meet customer requirements."

This tutorial provides you with a complete and compliant design grass sample designed for Cafe Townsend, a fictional restaurant that needs to make a Web site. As a web designer, you need to transform the grass sample so that it eventually forms a Web page that you can use (usually requires help from other graphic designers and Flash developers).

　　

As you can see, the graphic designer has provided you with a Web page design grass sample, which includes some content areas and graphics schemes. In the following sections, you will use Dreamweaver to showcase this design.

You can also open the original grass-like file to view the design grass sample on your computer screen. You can find a design grass-like homepage-mockup.jpg in the Fireworks_assets folder in the Cafe_townsend folder (in Tutorial: Setting Up Sites and project files where the folder has been copied to your hard disk). When you create a page, you can also print the grass sample for viewing at any time.

　　Create and save a new page

Once you have established the site and checked the design grass sample, you are ready to start creating the Web page. First you will create a new page and save it to your Web site's local root folder Cafe_townsend. The page will eventually become the homepage of the fictional restaurant Cafe Townsend.

If you have not created a local root folder Cafe_townsend, you must complete the creation before continuing.

In Dreamweaver, select File > New.

On the General tab of the New Document dialog box, select Basic page from the Categories list, select HTML from the basic pages list, and then click Create.

Select "File" > "Save As".

In the Save As dialog box, browse to the Cafe_townsend folder defined as the local root folder for the site and open the folder.

In the tutorial: setting up the site and project files, you created this folder in a folder named Local_sites.

Enter index.html in the File name text box, and then click Save.

The file name appears in the title bar at the top of the application window.

In the document title text box at the top of the new document, type Cafe Townsend.

　　

This is the title of the page (different from the filename). Site visitors see the title in the title bar of the browser window when they view the page in a Web browser.

Select File > Save to save the page.

　　Insert Table

Next, you will add a table for placing text, graphics, and Macromedia Flash Resources.

Click once on the page to place the insertion point in the upper-left corner of the page.

　　

Select "Insert" > "table".

In the Insert Table dialog box, do the following:

In the number of lines text box, enter 3.

In the number of columns text box, enter 1.

In the table Width text box, enter 700.

In the table width pop-up menu, select pixels.

In the Border weight text box, enter 0.

In the Cell padding text box, enter 0.

In the Cell spacing text box, enter 0.

　　

Click OK.

A table of three rows and columns appears in the document. The table is 700 pixels wide, with borders, cell margins, and cell spacing equal to 0.

　　

More information about a table table is a powerful tool for displaying tabular data on an HTML page and for laying out text and graphics. A table consists of one or more rows, and each row is made up of another cell or cells. When you create a multiline table that contains more than one cell, the cells form columns. Technically, a cell is an area in a horizontal row, and a column is stacked vertically by these cell regions.

When a table or table has an insertion point selected, Dreamweaver displays the width of the table and the column widths of each table in the table selector (indicated by a green line).

　　

Next to the width is the arrow for the Table header menu and the column header menu. Use the menu to quickly access some commonly used commands related to tables. You can also enable or disable display of widths and menus by selecting View > Visual Assistant > Table width.

A table can have a border, and a table cell can have margins, spacing, or both margins and spacing. The cell padding refers to the number of pixels between the cell contents and the cell boundary. Cell spacing refers to the number of pixels between adjacent table cells.

If you do not specify a value for cell padding and cell spacing, most browsers display the table by setting the cell margin to 1, and by setting the cell spacing to second. To make sure that the table displayed by the browser does not have margins and spacing, set the cell padding and cell spacing to 0.

Click on the right side of the table to cancel the selection on it.

Select Insert > table to insert another table.

In the Insert Table dialog box, perform the following action on the second table:

In the number of lines text box, enter 1.

In the number of columns text box, enter 3.

In the table Width text box, enter 700.

In the table width pop-up menu, select pixels.

In the Border weight text box, enter 0.

In the Cell padding text box, enter 0.

In the Cell spacing text box, enter 0.

Click OK.

The second table, which has one row and three columns, appears below the first table.

　　

Click on the right side of the table to cancel the selection.

Insert the third table by selecting Insert > table, and then entering the following values in the Insert Table dialog box:

In the number of lines text box, enter 1.

In the number of columns text box, enter 1.

In the table Width text box, enter 700.

In the table width pop-up menu, select pixels.

In the Border weight text box, enter 0.

In the Cell padding text box, enter 0.

In the Cell spacing text box, enter 0.

Click OK.

The third table, which has one row of columns, appears below the second table.

　　

Click on the right side of the table to cancel the selection. Your page should now look like the following:

　　

Note You may see a table selector (indicated by a green line) when you insert a table. You can usually hide the table selector by clicking outside the table. You can also disable the table selector by selecting View > Visual Assistant > Table width.

　　Set Table Properties

You will now use the Extended table mode to set specific table properties, which is a feature that allows you to temporarily add cell margins and spacing for a table and increase the table border to simplify editing. Specifically, it allows you to place the insertion point precisely without accidentally selecting the wrong table or other table contents.

Note When you have finished setting up table properties in extended table mode, you should always return to standard mode. Extended table mode is not part of the WYSIWYG environment, so some operations, such as resizing, do not get the expected results

Select View > Table mode > Extend table mode.

　　

Note If the "Start using Extended Table Mode" dialog box appears, click OK.

Click once in the first row of the first table.

　　

In the Property Inspector (Window > Properties), enter 90 in the Cell Height text box, and then press ENTER (Windows) or the return key (Macintosh).

　　

Note If the cell height text box does not appear, click the expand arrow in the lower-right corner of the property inspector.

Click once in the second row of the first table.

　　

In the property inspector, enter 166 in the Cell Height text box, and then press ENTER (Windows) or return (Macintosh).

Click once in the third row of the first table.

In the property inspector, enter 24 in the cell Height text box, and then press ENTER (Windows) or return (Macintosh).

The three rows in the first table should now have different heights.

　　

Next, you will set the properties for the second table (which contains three columns).

Click once in the first column of the second table.

　　

In the property inspector, enter 140 in the cell width text box, and then press ENTER (Windows) or return (Macintosh).

Click once in the second column of the second table.

In the property inspector, enter 230 in the cell width text box, and then press ENTER (Windows) or return (Macintosh).

　　

Sets the width of the third column to 330 pixels.

If you have open the table selector (View > Visual Assistant > Table width), you will see the three pixel values that you just entered on each table column.

You do not need to enter any height values for the cells in this table, because the height of these cells will depend on what you add later.

Finally, click once in the last table (the table contains one row and a column).

In the property inspector, enter 24 in the cell Height text box, and then press ENTER (Windows) or return (Macintosh).

Your layout should now look like the following:

　　

Click the exit Extended table mode link at the top of the document window to return to standard mode.

Save the page.

　　Insert Image Placeholder

An image placeholder is a graphic that is used before the final graphic is ready to be added to a Web page. Image placeholders are useful when you are laying out Web pages, because by using image placeholders, you can determine where the image is on the page before you actually create the image.

In the document window, click once in the first row of the first table.

Select Insert > Image object > Image placeholder.

In the Image Placeholder dialog box, do the following:

In the Name text box, type banner_graphic.

In the Width text box, enter 700.

In the Height text box, enter 90.

Click the Color box and select a color from the color selector. In this tutorial, we chose the red-Brown (#993300).

Leave the Alternate text text box blank. About... Description of alternate text The replacement text is a textual description of the image on the Web page. It belongs to the HTML code and does not appear on the page. For most images, it is important to provide alternate text so that the text information provided by the images is accessible to users who use screen readers or display only text. For banner graphics that display only the Web site logo, you do not need to provide alternate text. When you leave the alternate text text box in the Image Placeholder dialog box blank, Dreamweaver adds a alt= "attribute" to the IMG tag. Later, if you want to add alternate text to an image, you can select the image and enter the replacement text in the property inspector. For example, if you later want to change the logo to include a phone number or address, you can provide this information in alternate text.

Click OK.

The image placeholder appears in the first table. Image placeholders show the label and size properties of the image that is eventually placed here.

　　

Note When viewed in a browser, the label text and size text of the image placeholder are not displayed.

Save the page. About... About image placeholder image placeholders are temporary shapes that are used before the final graphic is added to a Web page, and it is not a graphic image that is displayed in the browser. Before you publish your site, you should replace all the added image placeholders with graphics files that apply to the Web, such as GIF or JPEG.

If you have Macromedia Fireworks, you can create a new graphic based on the Dreamweaver image placeholder. When you select an image placeholder and click the Create button in the property inspector, Fireworks opens and renders a new canvas. The size of the new image is set to the same size as the placeholder image. Next, you can create and edit images at will, and replace the placeholder images in Dreamweaver.

　　Add color to a page

You will now add more colors to the page by setting some table cells and the color of the page background.

Click once in the first cell of the table that contains the three columns.

Click the label (cell label) in the label selector to select the cell.

　　

In the Property Inspector (Window > properties), click once in the background color text box.

The background color text box is next to the background color (Bg) color box.

Note If the background color text box does not appear, click the expand arrow in the lower-right corner of the property inspector.

In the Background color text box, enter the hexadecimal value #993300, and then press ENTER (Windows) or the return key (Macintosh).

The color of the table cell changes to reddish brown.

Click once in the second cell of the table that contains the three columns.

Click the label (cell label) in the label selector to select the cell.

In the property inspector, click once in the background color text box, enter a hexadecimal value #F7EEDF, and then press ENTER (Windows) or Return key (Macintosh).

The color of the table cell changes to light brown.

Repeat the 第5-7 step to change the color of the third table cell to light brown.

After you have set the color of these three cells, click outside the table once, and deselect the table.

Next, you will change the background color of the entire page by modifying the page properties. The Page Properties dialog box lets you set some page properties, including the size and color of the page font, the color of the visited links, and the page margins.

Select Modify > Page properties.

In the appearance category of the Page Properties dialog box, click the Background color color box, and then select Black (#000000) from the color selector.

　　

About... Select a color in HTML, either as a hexadecimal value (such as #FF0000) or as a color name (such as red). Web page security color refers to the same color displayed in Netscape Navigator and Microsoft Internet Explorer in both Windows and Macintosh systems when using 256-color mode. There are 216 common colors, and any hexadecimal value that combines 00, 33, 66, 99, CC, or FF pairs (RGB values are 0, 51, 102, 153, 204, and 255) represents a page-safe color.

In Dreamweaver, you can select a color by entering a hexadecimal value in the corresponding text box or by selecting a color from the color selector. The color selector uses a 216-color Web-safe palette, and selecting a color from this palette displays the hexadecimal value of the color. To use a color selector, simply click the color box and use the eyedropper to select the color.

You can also use color selectors to match colors. For example, if an image on a page contains a blue shadow, and you want the background color of the table cell to match, you can select the table cell, click the Color box to open the color picker, move the eyedropper to the blue shadow of the image, and click the mouse button. The color selector populates the area of your choice with the matching color closest to the color that is clicked by the eyedropper. If you choose a color in this way, the color selected for you by the color picker may not be a page-safe color.

Click OK.

The background of the page changes to black.

Save your work.

Your page layout is now complete. The layout contains tables for placing various resources, such as images, text, and Flash video (FLV) files. In the next tutorial, tutorial: Adding content to a page, you'll learn how to add resources to a page using the various inserts that Dreamweaver provides.