How to Create A Text Box With Tabs - Spry Tabbed Panels - HTML
Jan 3rd, 2009 | By Adobe-Masters.com | Category: Dreamweaver, Tutorials | 8,749 views | Subscribe | PDFPlaying around with the spry options lead me to creating something that I adore so much, spry tabbed panels. The adobe-masters.com homepage features a text box with tabs for Lead Article, Popular Post, Recent Post, Recent Comments, and About the Site. I like having tabs. They are good for cutting down the amount of spaced used on a web page, especially if you’re presenting lots of content.
The following steps show How to Create A Text Box With Tabs - Spry Tabbed Panels for a simple html page using javascript. We’re using the spry tabbed panel on the DaughtersKitchen.com Cookie Diet page as the example.
Step One - Creating the Tabbed Panel: Open Adobe Dreamweaver. Create a new page as we did on the one page auto template page. Then, select Spry from the Insert Bar drop-down list and choose Spry Tabbed Panels.
Step Two - Customizing the Tabbed Panel: Two tabs are generated in step one by default. Customize these tags with a name by typing in something like “About the Cookie Diet”, “Cookie Flavors”, “Ingredients, or “Testimonials” like the example above.
I was able to modify the tab color within the properties for .TabbedPanelsTab, .TabbedPanelsHover, and .TabbedPanelsSelected in the SpryTabbedPanels.css file.
The expample above also uses a brown background image instead of a color. Insert a similiar background image in the .TabbedPanelsContentGroup by adding a background-image property. You may refer back to the wine and dine page tutorial image from this background image tutorial for help.
Step Three - Make your Spry Tabbed Panel Live, Publish It: This spry tabbed panel was uploaded into site build it for sitesell for this DaughtersKitchen.com page. I’d be happy to share the steps it took to integrate the spry tabbed panel into SBI upon request. Just leave a comment if you’re interested in seeing this as the next Adobe-Masters.com tutorial post. Don’t forget to subscribe for free updates.
New news! The making of a Cookie Diet page, Dr. Siegal trends again
[...] Panel As A Payment Text Box - DreamweaverHow to Add Button Image to Dreamweaver Spry MenuHow to Create A Text Box With Tabs - Spry Tabbed Panels - HTML Tags: Alison Cattelona, business marketing design, check boxes, dreamweaver spry, free spry, [...]
Hello,
Wonderful tutorial,
I really want to know what steps you took to make sure that the tabs work as they should. What do I need to know here. I’ve tried the same thing, but all of the tabs show up at once. It’s almost as though the page is simply ignoring the .js and .css files in the SpryAssets folder. I checked the code and confirmed that the files are linked to. Am I missing something. Please help.
Cheers!
Hi DO, try this Spry Tabbed Panels In Dreamweaver Don’t Work - Solutions to Make It Happen link. It should help. Please let me know how it works out.
Thanks for the tutorial. I’m wondering if you’ve found anyone who has successfully changed the stylesheet to use images for the tabs.
Thanks!
Hello,
It’s me again. It’s been really hectic lately. Thank you so much for the link to Solutions to Make It Happen. I do have it working now. The only problem is that I need to add the Spry Tabbed Panel(s) and then the rest of the page elements around it. When I try to add more Spry Tabbed Panels after the fact, those additional ones simply don’t work. They do work if I start a blank page, but, as you can imagine, it gets pretty tedious after a while, especially if you’re not always sure how many you will need.
Skyetech, while I haven’t styled the tabbed panels with images, I did add a myriad of other new properties to them. Though, again, any Spry Tabbed Panels I want to put in have to be added to the page first. Only then can I start to build the rest of the page around it.
@DO
The additional “spry files” and “folder” should be renamed and redefined in the HTML to something like SpryTabbedPanels1. Hope this helps.
[...] How to Create A Text Box With Tabs - Spry Tabbed Panels - HTML [...]
Great blog. I am glad I found it on Google.I’ll be back to visit your site soon.
How do you get rid of that awful blue border around the tab when you select another tab?
Thank you for that code.Cheers!
Thats really great. Most bloggers dont have much to say or make things up. I am glad you have an honest truthful opinion.