The grey-background box with tabs is a sample of what you can build with one of Dreamweaver's "Spry" widgets, the one called "Spry Tabbed Panels." I decided to explore Spry after trying Lesson 11 in Dreamweaver Classroom in a Book, which has some more complex examples. This one is easy: Just go to Dreamweaver's Insert menu at the top of the screen and choose Layout Objects, then "Spry Tabbed Panels."
Initially, you get two tabs labeled "Tab1" and "Tab2," but both of those headings -- like anything else on any page -- can be edited. Follow the tabs to learn what I did.
- How did I do it?
- Code I didn't have to write
- Final trick: More tabs
How? Simple steps...
This page itself began as a Dreamweaver CS-Five one-column layout with header and footer, but I moved the H1 heading into the "header" div. Using the CSS panels, I added a dark red background color to the body, and changed the colors of the header and footer background, the H1 tag and links.
Next, I pointed to that "Insert" menu heading, chose "Layout Objects" and "Spry Tabbed Panels."
The tabbed panels appeared on screen, so I wrote this text in the first one, edited the tab names, and used Dreamweaver's CSS panels to change some colors.
I created this page directly on the Web server, so that's where I was working when I inserted the "Spry" widget. The page was in the folder "public_html/326/css-exercises."
"Spry" is Dreamweaver's name for a combination of javascript, CSS and sometimes small images, all inserted into your page to create a special effect -- in this case, the "tabs" effect to make one page display several chunks of content without scrolling. Click the right tab to read more about the files and code.
Code? Looking behind the magic
Examine the code of this page and you will see what Dreamweaver inserted: "script" and "link" sections in the head of the document:
<script src="../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
... and a one line "script" section at the end of the body of the document:
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
... plus some relatively simple HTML in the body, using UL, LI and DIV tags to set up the tab section contents.
Notice from the "src=" and "href=" addresses that Dreamweaver copied a javascript "js" file and a style sheet "css" file into a folder on my server two levels (../../) above the folder this page resides in.
That is, it put the files in "public_html" -- not in my "public_html/326" folder or the "public_html/326/css-exercises" folder where the page itself lives.
Dreamweaver also gave me a warning that I might have to move the files to the server -- since Dreamweaver has no way to know that my "local work folder" and the "server folder" are the same thing. I can move those files anywhere I want, as long as I change the addresses to match.
Because the three files are linked, I can view any of them from inside Dreamweaver.
At the top of the editing window, my current HTML page is identified as "Source Code" and the other two file names (SpryTabbedPanels.js and SpryTabbedPanels.css) appear next to it. I can view or (in theory) edit the code by clicking on them, but I haven't experimented with making any changes.
Final trick: Adding another tab
As I mentioned, I just inserted the basic widget, which has two tabs. There's a Dreamweaver way to modify the tabbed panels widget, but I decided to see if I could edit the HTML code and create a third tab just by copying and pasting.
If you're reading this, it worked!
What are the pros and cons of this tabbed display?
PRO: People who hate to scroll the screen can click tabs instead.
CONS: I'm not sure what is going to happen if someone tries to use this page on a small-screen mobile device, or if they try to print it (see this PDF). If I were designing a "real" site and wanted to make sure I didn't disappoint any users, I'd dig into the Dreamweaver documentation and find out more about those issues!
Again, if you want to learn more, here's Adobe's documentation on modifying the tabbed panels widget. And several other Spry widgets are explained in Dreamweaver Classroom In a Book or the basic Dreamweaver Help files.