Text, images, and other media can be added to layout cells just as you would
add content to a regular HTML table in Standard view. However, the only place
content can be inserted is in a layout cell, so the necessary cells must be
drawn first. Just click in the cell where you want to insert content and type or
insert the element. A few tips about layout cells and content:
When Dreamweaver creates layout cells, it automatically assigns them a
vertical alignment of top. Any content you enter will float to the top of the
cell.
Just like a normal HTML table cell, a layout cell will expand as needed
to hold its content. As a cell expands, surrounding cells also might be
affected, and the column the cell is in will expand.
As you created your layout cells, Dreamweaver might have subdivided the
layout table to create other cells, to maintain the grid structure of the table.
Those cells appear in the Document window as grayed-out areas marked by
outlines. You can't enter content into one of those "placeholder"
cells—to add content, you must use the Layout Cell tool to draw a cell in
that space.
Because you're in Layout view, you can't create a table using
the standard Table object. If you want to insert a regular table (for displaying
tabular data) into your layout table, you'll have to go to Standard view to
do it.
Exercise 10.1 Creating a Page Layout Using Layout
View
In this exercise, you use Layout view to build a simple page design based on
a fixed-width layout table. Along the way, you'll get a chance to see some
of the strengths and limitations of Layout view, and how you can work with it
to get the results you want. You'll also experiment with grids as a visual
aid in page setup. Figure 10.12 shows the
finished layout you'll be creating.
If you haven't yet, copy the folder chapter_10 from the companion
CD into a folder named idmx on your hard drive and define a Dreamweaver
site named chapter_10 with the folder chapter_10 as its root
directory.
You'll be creating the layout page from scratch, so start by choosing
File > New to create a new blank HTML page. Save it in the chapter_10
folder as bumpers.html.
To help you draw accurately, you'll use the grid. Go to View >
Grid > Show Grid, to turn the grid on. The default grid setting is too
large for the requirements of your layout, so adjust it. Go to View >
Grid > Grid Settings, and in the dialog box that appears, enter a grid
size of 20 pixels. Finally, so the grid can be of maximum help as you draw,
go to View > Grid > Snap to Grid.
Your desired layout is 640 pixels wide. To help you gauge widths as you're
drawing tables and cells, go to View > Rulers > Show. Make sure the
rulers are set to measure pixels, by checking that View > Rulers >
Pixels is the selected option.
Finally, if you want ruler measurements and grid measurements to match each
other, you must set the origin point of the rulers to the upper-left corner
of the grid. Position the cursor over the zero-point corner of the rulers,
and drag down and right until the zero-point crosshair lines up with the top
left edge of the grid (see Figure 10.13).
Figure 10.13
Resetting the rulers' zero-point to match the grid.
Now switch to Layout view by going to the Insert bar and bringing the
Layers tab to the front. Click the Layout View button (refer back to Figure
10.5) to switch to Layout view.
Now you're ready to draw. In the Insert bar, select the Draw Layout
Table button, and draw a table that starts in the page's upper-left
corner and is 640 pixels wide and a few hundred pixels tall. (You'll
be removing the height values later, so they're not crucial for now.)
The grid snap feature should help you get your measurements accurate.
If you draw your table and it isn't 640 pixels wide, you can adjust
its width by dragging its edge or by selecting it and using the Layout Table
Property inspector to manually enter a width of 640. Figure
10.14 shows how your document should look, with grid, rulers, and layout
table in place.
Figure 10.14
The bumpers.html file, with grid and rulers showing, and the main layout
table in position.
Using the Draw Layout Cell tool, create four cells: one for the banner
across the top, and three for the main columns. Make your left-hand and
right-hand columns 100 pixels wide each. Leave a 20-pixel gutter between
those columns and the center column. Again, the grid snap should help you
draw accurately. If necessary, select the cells after drawing and use the
Property inspector to correct their widths. Figure
10.15 shows how your layout table should look at this point.
Figure 10.15
The bumpers.html file with layout cells in place.
