Traditional
HTML table can sometimes be difficult to format exactly as you want. Layout
view, enabling you to draw, move and edit table cells easily. Complex design
can be created in layout View and these can then be placed in Design view,
where content can be added.
The Getting Started in Layout view dialog box appears and describes the Layout view options.
Now that
you’ve learned how to work with the Insert Table command, let’s look at another
way to work with tables-by drawing the table layout.
Next you’ll
work in Layout view, which allows you to drew layout cells or layout table into
which you can add content such as images, text, or other media.
In layout
view you can draw layout cells and layout tables to define the design areas of
a document. You can start by inserting a table cell or a layout cell. When you
insert a layout cell first Dreaweaver automatically creates a table to surround
it.
Draw a layout cell
1.
In the Insert bar, click the Layout tab, then click the
Layout view button to switch from Standard view.
The Getting Started in Layout view dialog box appears and describes the Layout view options.
2.
Review the options, then click OK to close the dialog
box.
3.
In the Insert bar there are two layout options
available-Draw Layout Cell and Draw Layout Table; these options aren’t available
in Standard view.
4.
If the Property inspector isn’t already open, choose
window > Properties to open it.
5.
In the Insert bar, click the Draw Layout Cell button.
6.
Move the pointer to the Document window; the mouse
pointer changes to a drawing tool (looks like a small cross). Click in the
upper left corner of the document, then drag to draw a layout cell.
When you release the mouse, a
layout cell appears in a layout table.
The layout table expands to fill the document window, and
sets the page’s layout area.
The white rectangle is the layout cell you drew. You can
place additional layout cells in the empty area of the layout table.
7.
Draw another cell to create a text area above the
navigation buttons.
Resize a layout cell
To
design a page precisely, you can set the size of cells you add in a document.
You can also re-position cells in the page.
- Click the border of the layout cell to select it.
- To re size a layout cell:
In the property inspector for the
layout cell, type a number for the desired cell width or height. For example,
type 200 in the height box to set the cell’s height to 200 pixels, then click
in the document to see the cell width change.
Note: If you enter a pixel width or height that exceeds the
dimension of the layout table, or that causes the cell to overlap another cell
in a layout table, Dreamweaver alerts you and adjust the cell width to a valid
width.
Contents and Borders:
If a table
is created in layout View and it has no content or Table borders then nothing
will be visible when it is viewed in a Browser. If a border is added then the
cells in Layout view will be visible in a browser.
Tables that
have been created in Layout View can be formatted in Design view, in the same
way as a table created in Design view.
Auto stretching the columns to fit the page:
Column with
auto stretch will expand to fit all of the available space in the browser
window.
1.
Select a table cell with the help of Ctrl key or, click
on the middle top portion (column heading) of the table cell.
2.
Put the tick mark on Auto stretch radio button in the
property bar or, direct click on Make column Auto Stretch option
Then choose Spacer image file.
·
Create a spacer image file.
·
Use an existing spacer image file.
·
Don’t use spacer image to auto stretch tables.
3.
Choose first option and click on Ok.
Dreamweaver creates an invisible
one-pixel GIF image, adds it to the top cell
of each column, and stretches it to the column width. Save the
spacer.gif image inside the website folder.
The Column is now stretched so
that the table fills the whole screen.
