Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to create and use Dreamweaver’s Spry Tabs

When you have lots and lots of things to show on a Webpage to the point it becomes unreadable what do you do? You try to split the content on several pages. The old way to do this was to create separate pages and the user could browse and open various content sections in new pages. The new way to do this is to create a single page that shows the first section of content and hides the rest. Viewing the rest of the content sections is possible without reloading the page, which makes things very fast. Dreamweaver’s Spry Tabs are an easy way to display several content sections without refreshing the page. To give you an example, have a look at this page were you can browse through samples of Vertical, Tabbed and Dropdown menus without reloading the page. Sweet isn’t it? Let me show you how I did the sample page (tutorial explains also how to do the 2 columns DIVs that hold the screenshots).

Locating the Spry Menus in Dreamweaver

First thing to do is to open Dreamweaver, define a site, or open an existing project and create new HTML file. In the upper Dreamweaver menu, in the Insert tab go to Spry, select Spry Tabbed Panels.

Working in Design View

In the Design view, you will see 2 files added: SpryTabbedPanels.js and SpryTabbedPanels.css which contains the JavaScript for the navigation and the CSS for the spry tabs. In the properties, you can change the name for Tabs, the default name is TabbedPanels1, where you have Tab 1 and Tab 2, and the default start tab is set to Tab 1.

Working in Code View

If you change to code view, you can see inside the body tags, the code for the spry tabs. The spry tabs are inside the div with the id “TabbedPanels1” which are a part of the class “TabbedPanels”.  An id tag can be attributed to only one object, while a class attribute can hold more than one object. After the div containing the spry tabs, Dreamweaver puts the JavaScript code in order for the spry tabs to work. It is best that the JavaScript code should be placed at the bottom of the page, right before the body end tag. This is an optimization webpage tip, we will cover some optimization tips in a future tutorial. In the head section are the links for the JavaScript file and out external CSS file.

I have renamed the file to spry_tabs, and changed the tabs name. In order to change the names for the tabs, you can go in the code view and where you find the following line of code :

<li class=”TabbedPanelsTabs” tabindex=”0″>Tab 1</li>

Change the “Tab 1” to whatever you like for the tab 1 name. Do the same for the tab 2. Or you can go in the design view, place your mouse over a tab and when you see an eye icon, click it and you can set there the new tab’s name. Also I have added a new tab, you can do that from properties, after you press the blue line which has the “Spry Tabbed Panels: TabbedPanels1” line, go and press the plus button where it says Panels, it should be a tooltip telling you “Add a new tab”. You can change the order of the tabs by pressing the triangle buttons.

Adding content to each Tab

I need a 700px spry tab panel, so go to code view, select the SpryTabbedPanels.css file,  and go to .TabbedPanels and where it says “width:100% “ instead of the 100% enter the number of pixels you desire, in my case I need a 700px width, so it will look something like in the picture below. In the .TabbedPanelsContentGroup, go to background-color and change it to #CCC (this is the hex code for the white color) (I’ve done this in order to have a gray background inside the spry Tabs).

Optimization tip

We can remove the default comments from the CSS file, by compressing it at :

http://www.cssdrive.com/index.php/main/csscompressor/

Select Compression mode : normal and for the Comments handling select strip all comments, go to your SpryTabbedPanels.css copy all text (CTRL+A and Copy) and Paste it in the link, and press compress-it! It will show you the new css rules compressed, copy it and overwrite the SpryTabbedPanels.css and it should look something like in the picture below.

You should see the compression details at the link, below the highlight code, something like “Savings: 6834 bytes (82%)”. We will cover about this tip in a future tutorial.

Creating the DIVs that contain the pictures

You can add any type of content in the Tabs, but for the samples page I needed a 2 columns layout to hold the screenshots and their title. To do this, you need a container div for every row which will have a div for the left image and another div for the right image (both divs should have style=”float:left”). I’ve also added a secondary div for the image title. The code looks like this :

<!– start first row with a container–>

<div class=”container”>

<!– start left container that includes the picture and title text–>
<div class=”image_left” >
<!– the first div includes the picture, the second div includes the title that will appear below–>
<div class=”sample_text” ><img alt=”" src=”" style=”border:1px solid #999″ /></div>
<div class=”sample_text”>Picture title</div>
</div>
<!–left container ends here–>

<!– start right container –>
<div class=”image_right”>
<div class=”sample_text”><img alt=”" src=”" style=”border:1px solid #999″ /></div>
<div class=”sample_text”>Picture title right column</div>
</div>
<div style=”clear:both”>&nbsp;</div>
<!– right container ends here–>

</div>

<!– end first row –>

I’ve inserted some html tags “<!– comments goes here –>” to help you see the code easier. You have to set your own alt text for the images, and also set the correct path in your src=””. To make more rows, simply copy the code more times.

The CSS

Ok, now we have to work a bit on the SpryTabbedPanels.css file to make the DIVS to appear on 2 columns as in the sample page. Add this code to the end of the file:

.container {width:700px;height:auto;}

.image_left{width:330px;padding:10px;float:left;}

.image_right{width:330px;padding:10px;float:left;}

.sample_text{font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#666; width:330px; float:left;}

With these set  you’re spry tabs should look something like in the picture below.

Need better looking Tabs with Flash effects?

If you don’t need the content to load without reloading the page but you need something fancy you can have a look at the Creative DW Menus Pack. It’s a Dreamweaver menu extension that makes animated menus a breeze. Here is a short tutorial on how to make a Vertical menu with the extension.

If you encounter any difficulties or you have any other problems with the creation of the Spry Tabs comment below. Hope you enjoyed the tutorial.

Facebook comments:



2 Responses to “How to create and use Dreamweaver’s Spry Tabs”

  1. [...] For your CSS files, try to combine them and use a csscompressor to load fewer bytes (like in this this tutorial). Just a quick remember, copy your CSS rules there, select compression level and how to handle the [...]

  2. Hunsad says:

    Great guide,
    here’s some Q’s:

    What if I’d like the tabs to be presented by Images I’ve made myself? Is that possible?

    And what if I’d like the first horizontal tabbed panel to be followed by a second tabbed panel? I.e. instead of the vertical dropdown menus.

    Thanks!

Leave a Reply