Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating an HTML dataset

From: Dreamweaver CS4 New Features

Video: Creating an HTML dataset

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.

Creating an HTML dataset

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.

Show transcript

This video is part of

Image for Dreamweaver CS4 New Features
Dreamweaver CS4 New Features

16 video lessons · 18615 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.