Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With each new release, Adobe continues to integrate more and more Spry features into Dreamweaver. For CS4, another notable addition is the inclusion of Spry HTML Data Sets to accompany the existing XML Data Set capabilities. The overall Spry Data Set functionality has been improved as well. With a wizard-like interface that gives you options for how your data set information is presented on the page, you can choose from Preset Data Layouts or simply use the Bindings panel to populate Spry widgets or manually created Spry regions later.
In this video, we will examine the new Spry HTML Data Set capabilities by first taking a look at the source file of our data set and how this information will be presented on another page. So here I have the gear.htm file opened from the Chapter 12 folder. If I scroll down I can see that there is a table on the page that shows some properties of two of my cameras: Sony camera and the Fuji FinePix. Well, I notice that this table has a lot of information: Maximum Resolution, Low Resolution, Sensor Type, Zoom Wide, on and on and on. Well, I might want to present this data in other ways throughout my entire site.
Now, by using a Spry HTML Data Set I can use this data as the source, populate the entire rest of my site, even building interactive displays of this data, knowing that all I have to do to update it is update this one table. So it's a huge time saver, great for maintenance and updating, and it also allows me to repurpose data without having to worry about using any server-side software. So there is a lot of positives here. Now, of course before I can start doing this, I have to understand a little bit about the structure of the table that I'm using to store this data. Now, what I'm going to do is I'm going to turn my Style Rendering off so I can see exactly how this table has been constructed.
If I right click the Document toolbar, I can open up my Style Rendering toolbar. Now, typically, this will dock with the Document toolbar as well. On the Mac, you are limited to having it docked with the Document toolbar. But with the PC, I can float it around. So to save a little bit of screen real estate, I'm just going to float it up here. So I'm going to turn off the displaying of CSS Styles by clicking this Toggle icon, and now I see my table unformatted. Now, in the unformatted view, I notice that there are a couple of things that are visible now that weren't before. For example, this Camera Header and this Image Label, neither of those were visible when my CSS is turned on.
Well, we don't want to present that visually, but for our data structure to be used throughout the site, having those labels is going to be extremely helpful. So one of the things that we see here is that if we are going to use the table as an HTML data source, it's important that it be structured properly for the creation of the data source, and that's going to include labeling all of those items that I want to display. Now, I don't want to display this entire table throughout my site. I don't need all this information. I'm going to build an interactive summary of these cameras on another page and I don't need all of that data. Now, there are a couple of ways to filter this data out.
One would be to go ahead and identify specific regions of data by applying Class Styles to it or some type of unique selector structure, but in this case, I can filter the data out as I apply the Spry HTML Data Set to the page, and you will see that in our next exercise. Now, before we move on to actually creating the Spry Data Set, I want to show you how this data is going to be used. So I have opened up the galleries page from the Finished folder. If I turn my Style Rendering back on again, I have this in little Gear Check sidebar, a summary of these two cameras.
If I turn Live View on, scroll down, I can see that I have a summary of the Sony camera and the Fuji camera, and that's a nice little interactive summary. This data is being pulled from the table that we were looking at, so that gives me a nice static source of the data, that if that updates this interactive display will also update and that reduces the amount of maintenance on the page, also makes it easier for people who aren't comfortable with server-side code to update that data. Well, now that we understand the structure of the table that we are going to be creating our data set from, our next exercise will focus on actually creating the data set and exploring the Data Set Creation Wizard.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.