|
Tables ll
Designing Page Layout: In Layout view, you can design your page
using tables as the underlying structure.
- On the bottom of the Object Panel, you will find View choices. Standard
or Layout View. Or - View > Table View > Layout View.
- On the Object Panel, in the Layout section, just above the View
section, you'll find buttons for Draw Layout Cell and Draw Layout
Table.
- In Layout view, you can add a table by choosing Draw Layout Table.
- This will help you 'block out' your page design.
- DW4 adds a Layout Table automatically when you select Draw Layout
Cell.
- A Layout Cell cannot exist outside of a table.
- You can create your page design using several Layout Cells within
one Layout Table or you can use multiple Layout Table.
- You can also Nest Layout Tables (inserting a Layout Table into an
already existing cell).
- To draw a Layout Cell:
- Make sure you are in Layout view.
- Click the Draw Layout Cell button in the Layout Category
of the Objects panel. The mouse pointer will change to a plus
sign (+).
- Position the mouse pointer where you want to start a cell
or table on the page.
- Drag to create the Layout Cell.
- To drag out a second Layout Cell, you must re-click the
Layout Cell button, each time.
- To create a number of cells without clicking the Layout
Cell button each time, hold down Control (Windows) or Command
(Macintosh).
- New cells will appear outlined in blue on your page.
- The size of each cell is displayed in the Column Header area,
along the top of the table.
- Layout follows a grid with columns and rows.
- Cells can span several rows or several columns (by merging cells),
but they can never overlap.
- DW4 maintains this structure by automatically snapping new cells
onto existing cells, when you drag them near enough to each other
(within 8 pixels).
- The cells will also automatically snap to the side of the page
if you draw them near the edge (within 8 pixels) of your monitor.
- To temporarily disable snapping, hold down Alt (Windows) or
Option (Macintosh) while drawing the cell on the page.
- To draw a Layout Table:
- Make sure you are in Layout view.
- Click the Draw Layout Table button in the Layout Category
of the Objects panel.
- The mouse pointer will change to a plus sign (+).
- Position the mouse pointer on the page.
- Click and drag your mouse to create the Layout Table.
- If this is the first table you are drawing on the page, it
will automatically be positioned at the top left corner of your
page.
- To create a number of tables without clicking the Layout Table
button each time, hold down Control (Windows) or Command (Mac).
- A table will appear outlined in green on your page.
- The Layout Table tab also appears at the top left of each table,
which helps to identify that table.
- The size of each table is displayed in the Column Header area
along the top of the table.
- Tables cannot overlap each other.
- DW4 maintains this structure by automatically snapping new tables
that you create to existing tables or cells if you draw them near
each other (within 8 pixels).
- The tables will also automatically snap to the side of the page
if you draw them close to the edge (within 8 pixels) of your monitor.
- To turn off snapping, hold down Alt (Windows) or Option (Mac)
while drawing the table on the page.
Note: If your page already contains content, a Layout Table
can only be drawn below the bottom of the content.
- To draw a Layout Table around existing tables:
- Make sure you are in Layout View, not Standard View.
- Note how when you change table views, any existing table changes
to Layout View mode (green border with green tab)
- Click the Draw Layout Table button in the Layout Category
of the Objects panel.
- The mouse pointer will change to a plus sign (+).
- Click and drag your mouse around existing layout cells or
tables.
- Your new Layout Table will enclose the existing cells or tables.
Grid... anyone?
- DW4's Grid can be used as a guide, when you are designing page
layout.
- You can have your elements, cells and tables automatically snap
to the grid.
- Choose View > Grid > Show Grid.
- You can edit a Grids attributes: View > Grid > Edit Grid.
- Adding Content to your new Table:
- Add text, images and other media to your table in Layout View.
- Click in the cell where you want to insert your content.
- Then, insert your elements with the Properties Inspector.
- Moving and Resizing Layout Cells and Tables:
- Every Layout Cell and Layout Table can be moved or resized,
which makes it easy to adjust your page design.
- To resize a cell:
- Click anywhere in the cell.
- Selection handles will appear around the selected cell(s).
- Use the selection handles to drag the cell(s), as desired.
- To move a cell:
- Select the cell, click cell edge.
- Drag the cell where you want it.
- You can use the arrow keys to move the cell.
- The arrow key moves it one (1) pixel at a time or holding
down Shift to move it ten (10) pixels at a time.
- To resize a table:
- Click the Table Tab, green tab, top left of table.
- Selection handles will appear around theLlayout Table.
- Use the selection handles to drag the table, as desired.
- Formatting a Layout Cell or Table:
- You can set content alignment, width and height, and background
colors for any cell or table.
- Select the cell or table and edit the Property Inspector.
- Setting Layout Width:
- There are two types of widths you can use in Layout view: Fixed
and Autostretch.
Fixed Width is a specific numeric width, such as 300
pixels and is displayed as a number in the column header.
To set fixed width, do one of the following:
- Select a cell from the column you wish to fix the width.
- Fill in the appropriate number in the width section of
the Properties Inspector.
If the cell is set to AutoStretch and you want to change
to Fixed:
- Click on the Column Header
- Choose Make Column Fixed Width from the Column Header
menu.
- Make Column Fixed Width automatically sets to the width
of the content in that column.
- Select the cell, then in the Property Inspector, click
Fixed and type a numeric value.
- If you enter a numeric value that is less than the
width of your content, DW4 will automatically set the
width to the width of your content.
Autostretch sets the width to resize automatically depending
on the window size and is displayed as a wavy line in the column
header.
- Go to the top of the column that you want to set to Autostretch
and select the Column Header menu
- Select Make Column Autostretch.
- Remember, only one column can be autostretch.
- Or, select the column cell, then click Autostretch in
the Property Inspector.
When you set a column to Autostretch, DW4 will insert
Spacer Images in the fixed width columns to control the
layout.
- Using Spacer Images:
- Spacer Image: a transparent image that is not visible
in the browser window and is used to control spacing in a tables.
- In order for DW4 to make a column an Autostretch column, it
needs to create and place Spacer Images in the other columns.
- The Spacer Image can maintain the width of cells and table.
- You can insert and remove Spacer Images in each column.
- DW4 adds them automatically when you creating an autostretch
column.
- Columns that contain Spacer Images have a double bar in the
Column Header.
- When you insert a Spacer Image in a column or set a column to
Autostretch, a dialog box appears that asks how you want to set
up your Spacer Image file.
- To set up a Spacer Image:
- Set a column to autostretch or choose Add Spacer Image from
the Column Header menu.
- The Choose Spacer Image dialog box will appear.
- Choose from the following options:
- Make Spacer Image.
- Use Existing Spacer Image (only if you have a spacer
image already created).
- Don't Use Spacer Images (option not often selected).
- Either way, you get save or find the Spacer Image(s) needed
to a directory of your choice.
Note: All the Spacer Images needed will be save here
for your entire site, from now on.
Understand: DW4 places Spacer Images into the other
columns and assigns an auto stretch tag to the column you
have selected.
- To insert a Spacer Image into a column:
- Select Add Spacer Image from the column Header menu.
- The Spacer Image will be inserted into the column.
- You will not see the image, but the column may shift slightly,
if the spacer is larger then the current cell size.
- Once the Spacer Image is placed, a double bar will appear
at the Column Header.
- To remove a Spacer Image from a column:
- Select Remove Spacer Image from the Column Header menu.
- The spacer will be removed.
- The column may shift.
- To remove all Spacer Images from your page:
- Select Remove all Spacer Images from the Column Header menu.
- Or click the Remove all Spacers button in the Layout Table
Property Inspector.
Setting Layout View preferences: Use the Layout View category
in the Preferences to set or change Spacer Image files and locations,
as well as the colors that Layout View uses to draw the tables and cells,
and so on.
- To open Layout View Preferences:
- Choose Edit > Preferences.
- Select Layout View from the Category list.
- Autoinsert Spacers specifies whether or not DW4 should
automatically insert spacer images when you make a column autostretch.
- Spacer Image sets the spacer image file for your sites.
Choose a site from the drop-down menu and then create a new image
spacer or browse to an existing image spacer in that site.
- Cell Outline sets the color used to draw the cell outline.
- Cell Highlight sets the color that highlights the cell
when you move the mouse over or choose a cell.
- Table Outline sets the color used to draw the table outline.
- Table Background sets the background color of the Document
window.
|
