Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Since we have picked out our source HTML page, the only thing left to do is to create our HTML data set. In order to simplify the process of creating, placing, and styling your Spry data, Dreamweaver CS4 is equipped with the a Spry Data Wizard, that allows us to choose where we are pulling our data from, how the data should be filtered, and how the data should be displayed on the page. So here I have the galleries.htm page open from the 13 folder, and it's on this page that we are going to take the information from the table on the gear page and present it as an interactive summary.
If you scroll down in the sidebar, you can find in this Gear Check sidebar you have got a line right here that says Summary data goes here. So that's where our interactive widget is going to be. I'm going to highlight that line, and I'm just going to delete the text. I don't want to delete the whole paragraph, just the text involved. Now, I'm going to go ahead and create a new HTML data set that's going to emplace our data here. I'll go up to my Insert toolbar, and you will notice that I'm already focusing on the Spry objects, and the first option is our Spry Data Set.
Now, this was here in Dreamweaver CS3, but the difference is now instead of just XML, we have the ability to also do an HTML Data Set. So the first thing I need to choose is which Type; I could choose XML, and in which case it would display the schema, and I could browse through the schema and choose which repeating nodes I wanted to build the data structure from. But in this case we are going to use HTML. I also get to choose the Data Set Name and I like to make these relevant so I'm going to type in dsGear instead of just ds1. So that way, if I'm looking through my code later on I know which data set I'm referring to.
Now, since this is an HTML data set, we are building our data structure from existing HTML elements on the page. So, the next thing I have to choose is which elements I would like Dreamweaver to detect. I can choose Tables, Divs, Ordered or Unordered Lists, or really any Custom data structure. So any element that you can apply an ID to on the page, you can detect as part of your data set. So that's really cool. Now, we are going to stick with Tables because it's the table structure from the gear page that we are going to be using. So next up, we are going to specify a Data File. I'm going to browse out, and I'm going to go into the Exercise Files that I have copied to the Desktop.
I'll open the 13 folder, and I'm going to find that gear.htm. So I'll highlight gear and click OK. Now, the lovely thing about an HTML Data Set is I get this nice visual preview of what's on the page. Now, if I look in this upper right hand corner, I could actually choose any available Data Container. Now, since I told to detect Tables, it's going to list any table here that has an id. I can see that here is one called gearTbl. Now, I could go ahead and choose the Data Container here, but if I have got a lot of these I might see a much longer list and I might want another visual way to choose this. So if I leave that unselected and I scroll down through my page, I can see that the gear table has this nice little yellow arrow beside it, and if you notice, it's even giving us a little hint about what this is.
You can click a yellow marker to choose a Data Container. So if I click this, it's going to go ahead and select that table and it's going to populate the data down below in the Data Preview area. So I can scroll through this to make sure that I'm getting the data that I need and indeed, the entire table is coming in. Now, here I have a couple of options. I can go ahead and accept this entire table, or I could use these advanced data selectors to filter out that data. Now, if I do that I have to pass along both Row and Column Selectors. Now, Row Selectors and Column Selectors can be any selector that you have available to you in the table. So those could be Class Attributes, ID Attributes, Group Selectors, Contextual Selectors, it's really up to you how you want to restructure that data.
Now, I don't really need to modify the structure of this data, I just need to change exactly what I'm going to be bringing in. So rather than doing this advanced data selection, I'll go ahead and filter out the data as I'm placing it on the page. So I'm just making sure that the data is all there and then I'm seeing what I expect to see, and if that's true, I'm just going to hit Next. The next screen that we find ourselves on is the Set Data Options screen. Now here I can do things like rename columns, data type the information within the table, and choose how this information is going to be sorted.
One of the first things I'm going to do is I'm going to go down to my Other Options down here in the lower left hand corner and I'm going to choose Use columns as rows. That's going to flip it so that the information related to cameras as displayed and I'm looking at individual information about them. Maximum_Resolution, Low_Resolution, Effective_Pixels, that sort of thing. Now, if I wanted to, I could also go ahead and Sort these columns. So I could maybe sort the cameras in the alphabetical order, for example, but since the Sony camera is the one that I use most frequently, I want that one to appear up top, so I'm going to leave them alone.
Now, I could also Filter out any duplicate rows or Disable Data caching. Now, what that's going to do for you is when this data loads up into a page, it's immediately going to be cached. If I turn that off, I have the ability to refresh that data whenever I want to; that's based on milliseconds, so if you had some type of a socket connection and you needed to refresh it every two seconds or three seconds, you could go ahead and do that here. Okay. So now that we are using our columns as rows and we have flattened that data out, we can click Next and choose how this data is going to be presented on the page.
So we have a few options here as well. We can have Dreamweaver build a dynamic table for us. Insert a master/detail layout; it's a little interactive widget where people can click and get more detail about items. Insert stacked containers that will create a repeating data structure or stacked containers with a spotlight area. So if you have a thumbnail or a product image, that would be a really good choice. You also have the choice of not inserting any HTML on the page at all. Now, if you do that, it's just going to build a data source for you. It will be available to you in the Bindings panel, and then you can insert the Spry data on the page in whatever Spry region you may have created, or manually into an existing Spry widget. So that's also another attractive option.
Now, here I'm just going to choose the Insert master/detail layout. Now, very rarely is the default layout going to be what you need. So I'm going to click the Set Up button here, and that's going to allow me to choose exactly how this information is filtered and presented on the page. Now, the first thing I get to choose is the Master Columns. This can be one or more pieces of information that when the user clicks on it, the detail regions would update. Now, it happened to get that exactly right, camera was exactly what I wanted. So I'm just going to leave it there.
Now, for the Detail Columns however, they are not exactly what I need. So I don't need everything here. For example, I don't need Low_Resolution. So I'm going to select Low_Resolution, click the Minus symbol right above that, and it removes that. Wonderful! So I really only need Image, Maximum_ Resolution, Effective_Pixels, and Weight. So I'm going to go through and remove everything that doesn't pertain to that information. By selecting those and clicking the Minus column, I'm now left with Image, Maximum_Resolution, Effective_Pixels, and Weight. So this is another way to filter out the data from your data set and present only what you want on the page.
Now, another thing that we can do here is to choose which HTML element these items are placed in. Well, the default is a Div tag, but it doesn't have to be. So I'm going to select each one of these and place them in a Paragraph tag. That's going to allow me to style these a little bit more effectively through our existing CSS and limit the amount of additional styles that I have to write to format my Master Detail region. Now, unfortunately, I can't format the Master Columns. That would be really nice. But that's okay. It's easy enough to do that by hand. So I'm going to click OK. We will click Done and the data will be presented on the page.
Now, chances are, this isn't going to look exactly the way we want it to, but I just want to make sure that this is working. So what I'm going to do is save my file, and as soon as I do that, Dreamweaver is indicating that I have got to copy some dependent files over. Now, if you have ever used Spry before, this is going to come as no surprise to you. If you haven't used Spry before, Spry is going to reference these external Java Script files and CSS files to control the look, feel, behavior of our Master detail region. So those are necessary for our page, and we are just going to click OK to have it copy those over.
Next thing I'm going to do is go ahead and preview that in my browser. So if I scroll down, I can see there is my Master Detail region, and by clicking on the camera, I get information about that camera, displaying not only the Image, but the Resolution, Pixels, and Weight. So while it's not all that attractive, it is at least displaying exactly what I want it to display. So that's perfect. Now, I could definitely improve the formatting of this information, to make it a little bit more instructive, and to make styling it a little bit easier as well. So I'm going to go back into Dreamweaver, and before we tackle writing the styles to control this, we will go ahead and do a little extra formatting to make it easier to style. So this is kind of hard to work on in its present state, so what I'm going to do is once again right click the Document toolbar and bring up my Style Rendering toolbar.
I am going to turn my Styles off, and that's just going to make life little bit easier. You can see that these items are now a lot easier to select, a lot easier to work on. Well, one of the things that we can do that would be nice is to label these so that people know what they are looking at. So what I'm going to do is select the Maximum Resolution, and I can simply click on it once, and then hit my Left Arrow key. That's going to place my cursor directly to the left of that placeholder. Here I'm going to type in the word Resolution: and then I'm going to do a line break. We get that by either hitting Shift+Enter or Shift+Return on the Mac.
That keeps them within the same paragraph but breaks them to separate lines so that I have a heading and then the information underneath it. I will do the same thing for Effective_ Pixels. Right beside that I'm going to type in Megapixels, once again give it a line break, and then finally, I'm going to type in Weight. Give it a line break. Perfect! Now, if you had a label for each of those and the information underneath it is a little bit more instructive. The next thing I'm going to do is- I mentioned how nice it would be if our camera was in something other than a Div tag, so I'm going to click on that.
I want to go ahead and format that as a Heading 2. It's going to place the camera in an H2 and makes writing styles to control that a little easier. So we are going to go ahead and save our file, and I just want to see how that looks. So I'm going to turn on Live View. I'm going to scroll down, and I can see that these have their headings, and again, the interaction is still working just fine. So fantastic! Our data is coming in correctly, and even better, its structured exactly the way we envisioned. What's not happening however is a very attractive presentation of that data.
Some of the default Master Detail Styling is being overwritten by our main page CSS and the styles that remain are the default styles and frankly, in terms of how they interact with the rest of our site, they are not that attractive. So in our next video, we will finish our Data Set widget by modifying both the styles in the external Spry CSS file and adding a few new ones specific to our page and our look and feel.
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.