Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
SpryWidgets are advanced user interface controls that allow you to present your content in compelling ways. The widgets are constructed of clean HTML and styled through fully customizable CSS. The widgets available in Dreamweaver through the Insert Panel are the Spry Menu Bar, Spry Tabbed Panels, the Spry Accordion Widgets, Spry Collapsible Panel and the Spry Tooltip. For a Graphic Design Overview Page we're going to use the Tabbed Panels Widget. Of Course, before we place this item on the page, I want to start controlling how my Site Manages the Spry Assets that I am going to placing on the page.
Now I'm going to click on the Advance Settings and when I do that down towards the bottom is a setting for Spry. When I click on that I can browse for the folder that I wanted to place any these of assets in. Now if you don't do this yourself, it's going to create a folder for you within the Roof folder called Spry Assets. Now if you have no problem with that then just go ahead and allow the Default to occur. But if you have another folder that's already set up for these External Scripts, then it's a good idea to just go ahead and put all your Spry Assets in this. So I'm going to browse, out to the 11_03 folder and I'm going to find this scripts directory, I'm going to double-click that to open that up, and then I will select it.
So that's going to point Dreamweaver to where these files need to be copied over. I am going to go ahead and Save that and now I am to ready place my Spry Widget on the page. So I am going to scroll down a little bit, I am just going to place my cursor right after the headline that says Degree Overview, just about right there. I am going to go up to my Insert Panel and I am going to find the Spry Objects and of these UI Widgets which are on the right-hand side here. I want to you use this second one which is the Spry Tabbed Panels. I am going to go ahead and click on that and I get a Panel on the page, it really is just that simple.
I am going to Save this and as soon as I Save it, Dreamweaver is going to say okay, you need a couple of files to control the look and feel and functionality of this particular widget. So it's going to copy over both of these files and it's telling me where it's going to place them, and it has placed them exactly where we told it to. So I am going to go ahead and click OK and there's my tab. Now, you could certainly begin typing into these different tabs and content regions, but I am going to save you a little bit of time and trouble. I am going to open up the asset directory and I have a text file in there called overview.
So I am going to go ahead and click that, and I am just going to highlight the text, Bachelor Program and then I am going to paste it into the first tab. I am also going to go over and select all the descriptive text here for the Bachelor Program and I'm going to paste that into its tab as well. Now anytime I want to switch between one tab and the next, all I've to do is hover over it, and I'll see this little Eye icon and clicking on that changes the focus to the second Tab. So with that done, I am going to highlight and copy the Masters Program, paste that into the second Tab, and then finally, select this last paragraph, copy that and paste that into the Content region and then I'll go head and Save it.
Now I am going to turn Live View on to see how this is working and if I scroll down there's my Tab Panels and clicking back and forth between them, exposes the Content. So they are working just fine. Now they're not styled correctly yet, but in terms of functionality, the functionality is working perfectly. So in our next movie, we're going to focus on finishing our Spry Tabbed Panel, by styling it to match the rest of our site.
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.