Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the author of

Phase 3: Generate a Spry Data Display

The Spry Data Display is the element in a web page that displays data from the table you created in phase 1 of this project. This Spry Data Display can be the only thing on a page, or it can be part of a page.

To create the Spry Data Display, follow these steps:

  1. Create a new web page in Dreamweaver by choosing File New, and selecting an attractive HTML layout from the Layout column in the New Document dialog. With a layout selected, click Create to generate a new web page (see Figure 4).
    Figure 4

    Figure 4 Preparing to insert a Spry Data Display in a web page.

  2. Customize the text on your generated page. Then save the page. (You need to save the page before you insert the Spry Data Set.
  3. Click in your new page at an insertion point where you want to place the data set.
  4. Choose Insert > Spry > Spry Data Set. The Spry Data Set wizard launches (see Figure 5).
  5. In the Select Data Type pop-up menu, choose HTML.
  6. Click the Browse button in the Specify Data File area. Then navigate to and select the file you created containing the Spry Data Source table. Your data table appears in the preview area.
  7. From the Data Containers pop-up menu, choose the name of the specific table containing your data.
    Figure 5

    Figure 5 Selecting a data table for a Spry Data Set.

  8. With the data source defined, click the Next button in the Spry Data Set wizard. Normally, there's no reason to change the default options in step 2 of the wizard, so just click Next.
  9. The final step in the Spry Data Set wizard allows you to choose from four different layouts to display your data. Each layout option includes a thumbnail illustration and a description. Choose one of the layout options. (The fifth option, Do Not Insert HTML, voids the whole point of the wizard, so ignore that option.)
  10. With a layout selected, click the Set Up button associated with your choice. Each layout includes customized setup options, but they all boil down to the ability to add, delete, or change the order of display of columns. Use the add (+), delete (-), up, and/or down arrows as needed to adjust the displays. In Figure 6, I'm using the title of my videos as a "master" item in the Master/Detail Layout, and the other fields as details that viewers can select.
    Figure 6

    Figure 6 Setting up display details for a Spry Data Set.

  11. Adjust the layout options as desired. Then click Done in the Spry Data Set wizard to generate the Spry Data Set layout.
  12. Choose View > Live View to preview the Spry Data Display in Live view (see Figure 7).
Figure 7

Figure 7 Previewing a Spry Data Display in Live view.

That's all there is to it! From this point, you can update your database data at any time; the updated data will be displayed in the Spry Data Set.

  • + Share This
  • 🔖 Save To Your Account