Adobe Dreamweaver CC 2014 v.13 - Manual (Page 236)

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).
3. (Optional) Set different container types for data in the detail region. To do so, select the name of a detail column, and select the container
you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.
4. 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 master/detail regions appear, populated with your selected data references. The data references are
highlighted and enclosed in curly brackets ({}).
Stacked Containers layout
Select this option if you want to display your data using a repeating container structure on the page. For example, if you have four columns of data
in the data set, each container can include all four columns, and the container structure will repeat itself for each row in the data set.
Once you’ve selected this option, click the Set Up button to open the Insert Stacked Containers dialog box and follow these steps:
1. In the Columns panel, adjust the content of your stacked containers by doing the following:
Select a column name and click the minus (-) sign to delete the column from the stacked containers. Click the plus (+) sign and select a
column name to add new columns to the containers. By default Dreamweaver populates the stacked containers with data from every
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 Columns panel sets the
order of the data’s appearance in the stacked containers on the page.
2. (Optional) Set different container types for data in the stacked container. To do so, select the name of a data set column, and select the
container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.
3. 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 container, populated with your selected data references. The data references are highlighted and
enclosed in curly brackets ({}).
Stacked Containers with Spotlight Area layout
Select this option if you want to display your data using a repeating container structure on the page with a spotlight area in each container.
Typically, the spotlight area contains a picture. The Spotlight Area layout is similar to the Stacked Containers layout, the difference being that in
the Spotlight Area layout, the data display is divided into two separate columns (within the same container).
Once you’ve selected this option, click the Set Up button to open the Insert Spoltlight Area Layout dialog box and follow these steps:
1. In the Spotlight Columns panel, adjust the content of your spotlight area by doing the following:
Select a column name and click the minus (-) sign to delete the column from the spotlight area. Click the plus (+) sign and select a
column name to add new columns to the spotlight area. By default Dreamweaver populates the spotlight area 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 Spotlight Columns
panel sets the order of the data’s appearance in the spotlight area on the page.
2. (Optional) Set different container types for data in the spotlight area. To do so, select the name of a data set column, and select the
container you want to use for it from the Container Type pop-up menu. You can choose from DIV, P, SPAN, or H1-H6 tags.
3. Repeat the above steps for the Stacked Columns panel. By default Dreamweaver populates the stacked columns with all of the data that is
not in the spotlight area (that is, all columns except for the first column in the data set).
4. 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 spotlight area with stacked containers alongside of it, populated with your selected data references.
The data references are highlighted and enclosed in curly brackets ({}).
229