Creative Spry Tabbed Panels
Dreamweaver uses the Spry framework to add interactivity to a page. here we experiment with the Spry Tabbed Panels widget to create an attractive finish
01 Add tabbed panels
To add the basic tabbed panels go to Insert>Spry>Spry Tabbed Panels. The page will need to be saved before adding the widget. The default widget is equipped with two tabs and two content areas. To add more select the whole widget and click the blue tab in the top-right corner to activate the appropriate Properties panel.
02 New tabs
To add a new tab/panel simply press the ‘+’ button in the Properties window. Add as many as needed. These can be rearranged into order, however all are going to be renamed, negating the need to arrange. The first item to work on is the tabs. Double-click TabbedPanelsTab in the CSS Styles panel and remove all borders.
03 Change text and font
The Tabbed Panels widget adds default text for each tab, eg <li class=”TabbedPanelsTab” tabindex=”0”>Tab 1</li>. Select the text, delete and add your own text. Now double-click TabbedPanelsTab to view the current font options. Select the desired font from the Font-family drop list and select the desired font size.
04 Resize tabs
By default the tabs in the widget do not have any set height or width. For this tutorial the aim is going to be to stack the text over two lines, and this will be achieved by setting the width of the tabs. Switch to the Box category and then set the width to 100 pixels (or whatever width is suitable for you).
The default tabs have a selection of padding options to help position the text. This can be modified to position as you desire. In this example the left and right padding has been removed and the width of the tab extended to compensate. The text has been centred via Block>Text-align.
06 Tab spacing
By default the spacing between the tabs is set at one pixel to the right. To push the tabs further apart it is simply a matter of increasing the padding. Select the Box category and change the right margin from 1 to 2. Now press Apply, save the CSS file and preview the page via F12, or File>Preview in Browser.
07 Coloured tabs
The tabs in the widget have three different states; normal, selected and hover. Each state is assigned a different colour. To modify the normal state colour go to TabbedPanelsTab and choose a new colour. To modify the hover state go to the TabbedPanelsTabHover class. To modify the selected state visit TabbedPanelsTabSelected.
08 Background images
Now it is time to create background images to add a little more style for the different states. The tabs are currently 110px wide and 70px high. Add the 4px padding to get a total of 118px and 78px. Take away 5px from height for the pointer to be added and create in Photoshop.
09 Apply images
First delete all the current background colours for Tab, TabHover and TabSelected. Select TabbedPanelsTab and add buttonnormal.png as the background image and set background-repeat to no-repeat. Next add buttonhover. png to TabbedPanelsTabHover and buttonselected02. png to TabbedPanelsTabSelected.
The widget has a content area which is associated with each tab. To customise, double-click TabbedPanelsContentGroup and remove all borders except the bottom. This will be styled to give the content a defined finish point. Now select TabbedPanelsContent and delete any background colour.
11 Add content
The final step is to create content to appear in each panel. To populate a panel, first select a tab and click the eye icon. This will display the corresponding content panel. The height of the content panel is undefined so it will expand to fit any content. Now add content using standard HTML and CSS.
12 Font alternatives
The advent of web fonts means that designers can incorporate new styles without worrying if the font will be substituted. One solution is the Google Font Directory at http://code.google.com/webfonts. Select a font, click Get the code, copy and paste the code and put into the head of the page. Now add into the CSS as normal.