Step 11
Next, reopen just playlist-data.html in Dreamweaver and edit the file – delete a row or two and add some new content. You can add empty table rows by selecting the table and amending the Rows value in the Properties panel.


Step 12
Save your page and refresh the browser window you opened in step 10. You’ll see the content automatically update itself, presenting the changes you’ve just made to playlist-data.html. If you don’t see the changes, your web page is probably cached – hold Alt/Opt and refresh your browser.


Step 13
Note that the Spry Data Display area largely comprises standard code. If you don’t mess with the ‘spry’ attributes you can edit around it easily enough. For example, examine sortableplaylist. html in the Completed folder. It’s the same as the one you’ve created, but it also includes a table caption and a footer. It’s a good idea to avoid placing unrelated content within the Spry Data Display’s containing div tags; when inserting new layout div tags and page content that’s not part of the Spry Data Display, be sure to do so before or after the Spry area, not within it.


Step 14
There isn’t a simple means of updating settings for an HTML Data Set using Dreamweaver’s graphical user interface. However, if you’re happy copying and pasting some code, you can easily update the settings. Create a new web page, follow this tutorial’s method to create the sortable content (but use different settings, such as defining a ‘Sort Column’ option for the Song column in step 7), and then in Split view, copy and paste the necessary JavaScript from within the relevant script element (see the image). In the case of your example page, placing ‘, {sortOnLoad: “Song”, sortOrderOnLoad: “ascending”}’ directly after “playlistTable” will auto-sort the Song column. See the file in the Completed folder for a better idea of how this works.


Who: Craig Grannell is a writer and designer. He has contributed to tech and gaming titles, both on- and offline, has written several books on web design, and designed more websites than you can shake a stick at. In his spare time, he writes music, and publishes it via projectnoise.co.uk, as well as getting hopelessly addicted to the latest iPhone games (which he writes about on iphonetiny.com).
Contact: craiggrannell.com
Software: Dreamweaver CS4
Time to complete: 1 hour
On the CD or download: Files for this tutorial can be found on the cover CD or downloaded here