Operation Manual

444
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
• Select a column name and click the up or down arrows to move the column. Moving a column up moves it
further left in the displayed table; moving a column down moves it to the right.
2 To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is
Clicked. By default, all columns are sortable.
If you want to make a column unsortable, select its column name in the Columns panel, and deselect Sort Column
When Header Is Clicked.
3 If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in
your HTML page, you can apply a CSS class for one or more of the following options:
Odd Row Class Changes the appearance of the odd-numbered rows in the dynamic table according to the selected
class style.
Even Row Class Changes the appearance of the even-numbered rows in the dynamic table according to the selected
class style.
Hover Class Changes the appearance of a table row when you move the mouse over it according to the selected class
style.
Select Class Changes the appearance of a table row when you click it according to the selected class style.
Note: The order of the odd, even, hover, and select classes in your style sheet is very important. The rules should be in
the exact order indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style
sheet, the hover effect won’t appear until the user mouses over a different row. If the hover and select rules appear
above the even and odd rules in the style sheet, the even and odd effects will not work at all. You can drag rules in the
CSS panel to order them correctly, or you can manipulate the CSS code directly.
4 If the table you are creating is going to become a dynamic Spry master table, select Update Detail Region When
Row Is Clicked. For more information, see
“About dynamic Spry master tables and updating detail regions” on
page 447.
5 Click OK to close the dialog box and then click Done in the Choose Insert Options screen.
If you’re in Design view you’ll see the table appear with a row of headers and a row of data references. The data
references are highlighted and enclosed in curly brackets ({}).
Master/Detail layout
Select this option if you want to display your data using a master/detail layout. Master/detail layouts let users click an
item in the master (left) region that updates the information in the detail (right) region. Typically the master region
contains a long list of names, for example a list of available products. When the user clicks one of the product names,
the detail region displays much more detailed information about the selection.
Once you’ve selected this option, click the Set Up button to open the Insert Master/Detail Layout dialog box and follow
these steps:
1 In the Master Columns panel, adjust the content of your master region by doing the following:
• Select a column name and click the minus (-) sign to delete the column from the master region. Click the plus
(+) sign and select a column name to add new columns to the master region. By default Dreamweaver populates
the master region with data from the first column in the data set.
• Select a column name and click the up or down arrows to move the column. Moving a column up or down in
the Master Columns panel sets the order of the data’s appearance in the master region on the page.
2 Repeat the above steps for the Detail Columns panel. By default Dreamweaver populates the detail region with all
of the data that is not in the master region (that is, all columns except for the first column in the data set).