Home / Articles / Adobe Dreamweaver / Embedding Live Data in Dreamweaver CS4 with Spry Data Sets

Embedding Live Data in Dreamweaver CS4 with Spry Data Sets

Article Description

If you use Dreamweaver to build your websites, you could undoubtedly make a nice list of its very useful features. Prior to the CS4 version, however, maintaining websites that required frequent updates wouldn't have been on that list. David Karlins shows how to use a new feature in Dreamweaver CS4 to update your web content with live data - automatically.

Phase 1: Create the Database Table

Your data table spreadsheet will use columns as fields and will use rows to list specific items (records). For example, the table I use to display my recent books has fields called Title, Cover Artwork, Date Published, and Summary. The specific information will be different for each book in my table, but all the books will have the same fields.

The Dreamweaver web page you use to store your data in a table will not be available to people who visit your website. This page will be accessed only by you or by others who maintain and update the data in that table. Here's how you create it:

  1. In Dreamweaver CS4, choose File > New to open the New Document dialog. Choose Blank Page from the category list on the left, choose HTML / None as the page type, and click Create.
  2. Save the new blank page with an appropriate filename such as datatable01.
  3. Choose Insert > Table to open the Table dialog (see Figure 1). Fill in the dialog with the appropriate settings to create your table:
    • Leave the Rows box set to the default number. (You can easily add rows to your table as you enter new items into it.)
    • In the Columns box, enter the number of fields (columns) needed to organize your data. In Figure 1, for example, I'm creating four columns.
    • Set Table Width to 100% to create the most convenient layout to enter data.
    • Leave the Border Thickness set to 1.
    • Set Cell Padding to 6 to make the table data more readable, by providing a buffer between the different rows and columns of data.
    • In the Header section of the dialog, select Top. This setting provides automatic formatting for your column headings.
    • In case the table will be used by people with visual handicaps, enter a caption (and possibly a summary) to improve accessibility.
  4. When you're finished defining the table properties, click OK to generate the table.
    Figure 1

    Figure 1 Defining a table to hold data for a Spry Data Set.

  5. In order to use your new table as part of a Spry Data Set, you need to assign a name to the table. Oddly (and unfortunately), Dreamweaver CS4 doesn't allow you to assign the table name during the table creation process. So, before moving on, name the table. Since you've just finished creating the table, it's currently selected. In the Properties inspector, which displays (and controls) table properties, enter the name of the table in the Table box.
3. Phase 2: Populate the Database Table | Next Section Previous Section