Operation Manual

174
Layout and design
Last updated 11/30/2015
You can also visualize the HTML DOM structure of a fluid grid document using DOM panel.
Insert fluid grid elements
The Insert panel (Window > Insert) lists the elements that you can use in a fluid grid layout. While inserting the
elements, you can choose to insert them as fluid elements.
1 In the Insert panel, click the element that you want to insert.
2 In the dialog box that appears, click Before, After, or Nest to position the element with respect to the reference
element highlighted in the document.
3 Select a class, or enter a value for the ID. The Class menu displays classes from the CSS file that you specified when
creating the page.
4 Select the Insert As Fluid Element check box.
5 When you select an inserted element, the options to hide, duplicate, or delete the Div are displayed. For Divs layered
on top of each other, the option to swap Divs is displayed.
Elements on a page can be traversed cyclically using the up and down arrow keys. Select the element boundary and
then press the arrow key.
Option Description
Swap Div Swaps the currently selected element with the element above or
below.
Hide Hides the element. To unhide an element, do one of the following:
To unhide ID selectors, change the display property in the CSS file
to block. (display:block) To unhide class selectors, remove the
applied class (hide_<MediaType>) in the source code.
Move up a row Moves the element up by a row
Duplicate Duplicates the currently selected element. CSS linked to element
is also duplicated.
Delete For ID selectors, deletes both the HTML as well as CSS. To delete
HTML only, press Delete. For class selectors, only HTML is deleted.
Align For class selectors, the Align option acts as a zero margin button.
For ID selectors, the align button aligns the element to the grid.