Operation Manual

175
Layout and design
Last updated 11/30/2015
Nesting elements
To nest fluid elements within other fluid elements, ensure that the focus is inside the parent element. Then, insert the
required child element.
Nested Duplication is also supported. Nested Duplication duplicates the HTML (of the selected element) and generates
the relevant Fluid CSS. Absolute elements contained within the selected element are positioned appropriately. Nested
elements can also be duplicated using the duplicate button.
When you delete a parent element, the CSS corresponding to the element, its children, and associated HTML are
deleted. Nested elements can also be deleted together using the Delete button (Keyboard Shortcut: Ctrl+Delete).
Presenting content with tables
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the
options described in this article in Dreamweaver CC and later. For more information, see
this article.
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.
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