Adobe® Dreamweaver®CS5 provides layout tools that let you create web pages using HTML tables or frames. The application also includes rulers, guides, and a grid that let you lay out pages and position elements precisely.
Using visual aids for layout
Set rulers
Rulers help you measure, organize, and plan your layout. They can appear on the left and top borders of the page, marked in pixels, inches, or centimeters.
• To toggle rulers on and off, select View > Rulers > Show.
• To change the origin, drag the ruler-origin icon (at the upper-left corner of the Design view of the Document window) anywhere on the page.
• To reset the origin to its default position, select View > Rulers > Reset Origin.
• To change the unit of measure, select View > Rulers, and then select Pixels, Inches, or Centimeters.
Set layout guides
Guides are lines that you drag onto the document from the rulers. They help you place and align objects more precisely.
You can also use guides to measure the size of page elements, or emulate the folds (visible areas) of web browsers.
To help you align elements, you can snap elements to guides, and snap guides to elements. (Elements must be absolutely positioned in order for the snap feature to work.) You can also lock guides to prevent them from being accidentally moved by another user.
Create a horizontal or vertical guide
1 Drag from the corresponding ruler.
2 Position the guide in the Document window and release the mouse button (reposition the guide by dragging it again).
Note: By default, guides are recorded as absolute pixel measurements from the top or left side of the document, and are shown relative to the origin of the ruler. To record the guide as a percentage, press the Shift key while you create or move the guide.
Show or hide guides
❖ Select View > Guides> Show Guides.
Snap elements to guides
• To snap elements to guides, select View > Guides> Snap to Guides.
• To snap guides to elements, select View > Guides> Guides Snap to Elements.
Note: When you resize elements, such as absolutely-positioned elements (AP elements), tables, and images, the resized elements snap to guides.
Lock or unlock all guides
❖ Select View > Guides> Lock Guides.
View and move a guide to a specific position
1 Hold the mouse pointer over the guide to view its position.
2 Double-click the guide.
3 Enter the new position in the Move Guide dialog box and click OK.
View the distance between guides
❖ Press Control (Windows) or Command (Macintosh) and hold the mouse pointer anywhere between the two guides.
Note: The unit of measure is the same as the unit of measure used for the rulers.
Emulate the fold (visible area) of a web browser
❖ Select View > Guides, and then select a preset browser size from the menu.
Remove a guide
❖ Drag the guide off the document.
Change guide settings
❖ Select View > Guides> Edit Guides, set the following options, and click OK.
Guide color Specifies the color of the guide lines. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.
Distance Color Specifies the color of the lines that appear as distance indicators when you hold the mouse pointer between guides. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.
Show Guides Makes guides visible in Design view.
Snap to Guides Makes page elements snap to guides as you move elements around the page.
Lock Guides Locks guides in place.
Guides Snap to Elements Snaps guides to elements on the page as you drag guides.
Clear All Clears all guides from the page.
Using guides with templates
When guides are added to a Dreamweaver template, all instances of the template inherit the guides. Guides in template instances, however, are treated as editable regions, so users can modify them. Modified guides in template instances are restored to their original location whenever the instance is updated with the master template.
You can also add your own guides to instances of a template. Guides added in this manner are not overwritten when the template instance is updated with the master template.
More Help topics
“Align AP elements” on page 157
“Move AP elements” on page 156
Use the layout grid
The grid displays a system of horizontal and vertical lines in the Document window. It is useful for placing objects precisely. You can make absolutely-positioned page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.
More Help topics
“Align AP elements” on page 157
“Move AP elements” on page 156
Show or hide the grid
❖ Select View > Grid > Show Grid.
Enable or disable snapping
❖ Select View > Grid > Snap to Grid.
Change grid settings
1 Select View > Grid > Grid Settings.
2 Set the options and click OK to apply the changes.
Color Specifies the color of the grid lines. Click the color swatch and select a color from the color picker, or type a hexadecimal number in the text box.
Show Grid Makes the grid visible in Design view.
Snap to Grid Makes page elements snap to the lines of the grid.
Spacing Controls how far apart the grid lines are. Enter a number and select Pixels, Inches, or Centimeters from the menu.
Display Specifies whether the grid lines appear as lines or dots.
Note: If Show Grid is not selected, the grid does not appear in the document and no changes are visible.
Use a tracing image
You can use a tracing image as a guide to re-create a page design that was created in a graphics application such as Adobe Freehand or Fireworks.
A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.
The tracing image is visible only in Dreamweaver; it is not visible when you view the page in a browser. When the tracing image is visible, the page’s real background image and color are not visible in the Document window; however, the background image and color will be visible when the page is viewed in a browser.
Place a tracing image in the Document window
1 Do one of the following:
• Select View > Tracing Image > Load.
• Select Modify > Page Properties, then click Browse (next to the Tracing Image text box).
2 In the Select Image Source dialog box, select an image file and click OK.
3 In the Page Properties dialog box, specify the transparency for the image by dragging the Image Transparency slider, then click OK.
To switch to another tracing image or change the transparency of the current tracing image at any time, select Modify > Page Properties.
Show or hide the tracing image
❖ Select View > Tracing Image > Show.
Change the position of a tracing image
❖ Select View > Tracing Image > Adjust Position.
• To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes.
• To move the image 1 pixel at a time, use the arrow keys.
• To move the image 5 pixels at a time, press Shift and an arrow key.
Reset the position of the tracing image
❖ Select View > Tracing Image > Reset Position.
The tracing image returns to the upper-left corner of the Document window (0,0).
Align the tracing image to a selected element
1 Select an element in the Document window.
2 Select View > Tracing Image > Align with Selection.
The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element.
Presenting content with tables
About tables
Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.
Dreamweaver displays the table width and the column width for each table column when the table is selected or when the insertion point is in the table. Next to the widths are arrows for the table header menu and the column header menus. Use the menus for quick access to common table-related commands. You can enable or disable the widths and menus.
If you do not see a width for the table or for a column, then that table or column does not have a specified width in the HTML code. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width specified in the HTML code. This can happen when you resize a table by dragging its lower-right corner or when you add content to a cell that’s larger than its set width.
For example, if you set a column’s width to 200 pixels and then add content that stretches the width to 250 pixels, two numbers appear for that column: 200 (the width specified in the code) and (250) in parentheses (the visual width of the column as it’s rendered on your screen).
Note: You can also lay out your pages using CSS positioning.
More Help topics
“Laying out pages with CSS” on page 138
Table formatting precedence in HTML
When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.
The order of precedence for table formatting is as follows:
1 Cells 2 Rows 3 Table
For example, if you set the background color for a single cell to blue, then set the background color of the entire table to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.
Note: When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column.
About splitting and merging table cells
You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary colspan or rowspan attributes) to create the specified arrangement.
In the following example, the cells in the middle of the first two rows have been merged into a single cell that spans two rows.
Insert a table and add content
Use the Insert panel or the Insert menu to create a new table. Then, add text and images to table cells the same way that you add text and images outside of a table.
Note: The Layout mode feature is deprecated as of Dreamweaver CS4 and later. Layout mode created page layouts using layout tables, which are no longer recommended by Adobe. For more information on Layout mode and why it was deprecated, see the Dreamweaver Team Blog.
1 In the Design view of the Document window, place the insertion point where you want the table to appear.
Note: If your document is blank, you can place the insertion point only at the beginning of the document.
• Select Insert > Table.
• In the Common category of the Insert panel, click Table.
2 Set the attributes of the Table dialog box and click OK to create the table.
Rows Determines the number of table rows.
Columns Determines the number of table columns.
Table Width Specifies the width of the table in pixels, or as a percentage of the browser window’s width.
Border Thickness Specifies the width, in pixels, of the table’s borders.
Cell Spacing Determines the number of pixels between adjacent table cells.
When you don’t explicitly assign values for border thickness or cell spacing and cell padding, most browsers display the table border thickness and cell padding set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no border, padding or spacing, set Cell Padding and Cell Spacing to 0.
Cell Padding Determines the number of pixels between a cell’s border and its contents.
None Does not enable column or row headings for the table.
Left Makes the first column of the table a column for headings, so that you can enter a heading for each row of the table.
Top Makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.
Both Enables you to enter column and row headings in the table.
It’s a good idea to use headers in case any of your website visitors use screen readers. Screen readers read table headings and help screen-reader users keep track of table information.
Caption Provides a table title which displays outside of the table.
Align Caption Specifies where the table caption appears in relation to the table.
Summary Provides a table description. Screen readers read the summary text, but the text does not appear in the user’s browser.
More Help topics
“Adding and formatting text” on page 202
“Adding and modifying images” on page 218
Import and export tabular data
You can import tabular data that has been created in another application (such as Microsoft Excel) and saved in a delimited text format (with items separated by tabs, commas, colons, or semicolons) into Dreamweaver and format it as a table.
You can also export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a delimiter. You can use commas, colons, semicolons, or spaces as delimiters. When you export a table, the entire table is exported; you cannot select portions of a table to export.
If you want only some of the data from a table—for example, the first six rows or the first six columns—then copy the cells containing that data, paste those cells outside of the table (to create a new table), and export the new table.
Import table data
1 Do one of the following:
• Select File > Import > Tabular Data.
• In the Data category of the Insert panel, click the Import Tabular Data icon .
• Select Insert > Table Objects > Import Tabular Data.
2 Specify the options for the tabular data and click OK.
Data File The name of the file to import. Click the Browse button to select a file.
Delimiter The delimiter used in the file you’re importing.
If you select Other, a text box appears to the right of the pop-up menu. Enter the delimiter used in your file.
Note: Specify the delimiter that was used when the data file was saved. If you don’t do this, the file will not be imported properly, and your data will not be correctly formatted in a table.
Table Width The width of the table.
• Select Fit to Data to make each column wide enough to fit the longest text string in the column.
• Select Set to specify a fixed table width in pixels or as a percentage of the browser window’s width.
Border Specifies the width, in pixels, of the table’s borders.
Cell Padding The number of pixels between a cell’s content and the cell boundaries.
Cell Spacing The number of pixels between adjacent table cells.
If you don’t explicitly assign values for borders, cell spacing, and cell padding, most browsers display the table with borders and cell padding set to 1, and cell spacing set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select View > Visual Aids > Table Borders.
Format Top Row Determines what formatting, if any, is applied to the top row of the table. Select from four formatting options: no formatting, bold, italic, or bold italic.
Export a table
1 Place the insertion point in any cell of the table.
2 Select File > Export > Table.
3 Specify the following options:
Delimiter Specifies which delimiter character should be used to separate items in the exported file.
Line Breaks Specifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or UNIX.
(Different operating systems have different ways of indicating the end of a line of text.) 4 Click Export.
5 Enter a name for the file and click Save.
Select table elements
You can select an entire table, row, or column at once. You can also select one or more individual cells.
When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection so that you know which cells will be selected. This is useful when you have tables without borders, cells that span multiple columns or rows, or nested tables. You can change the highlight color in preferences.
If you position the pointer over a table’s border, then hold the Control key (Windows) or Command key (Macintosh), the entire structure of the table—that is, all cells in the table—is highlighted. This is useful when you have nested tables and want to see the structure of one of the tables.
Select an entire table
❖ Do one of the following:
• Click the upper-left corner of the table, anywhere on the top or bottom edge of the table, or on a row or column’s border.
Note: The pointer changes to the table grid icon when you can select the table (unless you click a row or column border).
• Click in a table cell, then select the <table> tag in the tag selector at the lower-left corner of the Document window.
• Click in a table cell, then select Modify > Table > Select Table.
• Click in a table cell, click the table header menu, then select Select Table. Selection handles appear on the selected table’s lower and right edges.
Select individual or multiple rows or columns
1 Position the pointer to point to the left edge of a row or the top edge of a column.
2 When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns.
Select a single column
1 Click in the column.
2 Click the column header menu and choose Select Column.
Select a single cell
❖ Do one of the following:
• Click in the cell, then select the <td> tag in the tag selector at the lower-left corner of the Document window.
• Control-click (Windows) or Command-click (Macintosh) in the cell.
• Click in the cell and select Edit > Select All.
Select Edit > Select All again when a cell is selected to select the entire table.
Select a line or a rectangular block of cells
❖ Do one of the following:
• Drag from a cell to another cell.
• Click in one cell, Control-click (Windows) or Command-click (Macintosh) in the same cell to select it, then Shift- click another cell.