Creating a Table in Layout View


Dreamweaver 8 also provides Layout mode for creating tables. Layout mode works much like a page-layout program in which you can draw boxes on the page and then fill the boxes with text or graphics. You can resize the boxes and place the boxes anywhere on the page.

Some Dreamweaver features such as layers (covered in Lesson 9) do not function in Layout modeyou must use Standard mode when you need to use those features.

Note

In Layout mode, the exact numeric values of the widths and heights of the table and cells you create, as well as the placement of those cells, will be somewhat different from the examples shown here. Use the examples as guides for the general layout of your page.


1.

Open events.html from the Lesson_06_Tables/Schedule folder.

You will use the Layout mode to create a table in this document in the following steps.

2.

Click the Layout button in the Layout category on the Insert bar.

You have switched to Layout mode, in which you can easily place elements on the page. You may see the info box titled Getting Started In Layout Mode which briefly describes the main tools: the layout cell and the layout table. You can click OK to close this dialog box.

Note

There is a checkbox for Don't Show Me This Message Again. If you leave this box unchecked, the next time you restart Dreamweaver, you will see this dialog box again if you switch to Layout mode.

A bar, with the text Layout Mode [exit] centered on it, appears just below the Document window toolbar, appearing to be within the document itself. This bar is not visible in the browser because it is used only in Dreamweaver to indicate that you are working in Layout mode. As with Expanded mode, you can switch back to Standard mode by either clicking the Standard button in the Layout category on the Insert bar or by clicking the [exit] link that appears on the bar across the top of the document while in Layout mode.

Tip

You can also choose View > Table Mode > Layout Mode or use the keyboard shortcut Cmd+F6 (Macintosh) or Ctrl+F6 (Windows) to switch to Layout mode.

3.

Make sure that the Insert bar is displaying the Layout category and click the Draw Layout Cell button.

After you select the Draw Layout Cell tool, the pointer changes to a plus sign (+) when you move it into the Document window. The tag selector is replaced with a description of the tool you have selected.

A layout cell lets you draw a cell anywhere on the page. In Layout mode, you don't need to worry about the number or arrangement of rows and columns when creating your tableDreamweaver automatically creates and manages the rows and columns when you designate the location of the cells on your page.

Note

You can't use the Layout Table tool to draw a table within the cell of another table in Layout mode. You must use Standard mode to nest tables.

4.

Place the pointer in the center of the page; then click and drag to draw the cell.

A layout table is drawn automatically to contain the cell. The layout table is drawn nearly as wide as the Document window, although you can resize the table to any dimensions. The cell is outlined in blue to distinguish it from the table, which appears outlined in green. A solid blue line indicates that the insertion point is within the cell, whereas a dotted blue line indicates that the insertion point is not in the cell. All parts of the table other than the cell are shown in gray. The thin white lines indicate the rows and columns that Dreamweaver creates to construct the table when you draw layout cells. When you move the pointer over the border of the cell, it turns red to indicate which cell you are over.

By default, layout tables appear with a tab at the top, which makes it easier to identify the table. The tab causes the table to drop down slightly from the top of the page; this extra space does not exist in the browser. The table also appears with a bar at the bottom containing column widths and menus and the table width and menu. The bar, which serves the same purpose as the table header bar in Standard mode, might not be initially visible until you roll the pointer over the bottom boundary of the cell that you just created.

Note

To hide the tab and bar, choose View > Visual Aids > Table Widths. The rest of this lesson assumes that the default visual aids are active and that you can see the tab and bar on the layout table.

5.

Insert the yoga_sangha-title.jpg graphic from the Lesson_06_Tables/Images folder into the layout cell you just drew. Use Yoga Sangha for the alternative text.

Tip

From the Site portion of the Image Assets panel, you can just select and drag the graphic from the Assets panel into the cell on the page.


You have inserted an image. The cell expands to fit the graphic if it was smaller than the size of the graphic. The new size is displayed in parentheses next to the original size of the column on the table widths bar.

Note

The table widths bar might disappear when you insert the image. To view it again, roll the pointer over the bottom edge of the cell.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net