Learning Adobe DreamWeaver CS4By Greg Bowden

Guided Computer Tutorialswww.gct.com.au

Creating Menus and Tabbed Panels

Chapter 19

PUBLISHED BY

GUIDED COMPUTER TUTORIALSPO Box 311Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any particular time, just as a single text book would be used. If you intend to use the notes with multiple students the single user version should be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many copies as required, or to place the PDF files on the school network, intranet and staff laptops. A certificate of authentication is provided with multi-user versions. Bookmarks provide links to all headings and sub-headings, and individual chapters are provided.

First published 2009

ISBN: 1 921217 74 X Module 1 1 921217 75 8 Module 2 PDF document on CD-ROM

Every effort has been made to ensure that images used in this publication are free of copyright, but there may be instances where this has not been possible. Guided Computer Tutorials would welcome any information that would redress this situation.

© Guided Computer Tutorials 2009 19-1

Chapter

19Creating Menus and Tabbed Panels

As a web site becomes larger with more pages linked it can be a space saver to have some links or content hidden and set them to display when the user moves the mouse over a button or text link. In other words as a pop-up menu or tabbed panels. You can create pop-up menus and tabbed panels using a program such as FireWorks, however, DreamWeaver provides popup menus and tabbed panels as widgets, which are small pieces of code that can be edited and formatted. Think of a widget as a mini-program within the main program.

DreamWeaver provides a collection of SPRY widgets that combine CSS and Javascript, and allow you to add dynamic elements to your web sites. Two of these are SPRY popup menus and SPRY tabbed panels.

Popup Menus

A Saving the Prepared Pages

Three Airliine pages that have been prepared for you will need to be saved in your TRAVELWISE2 folder so that links from the popup menu items can be set to them.

1 Load DreamWeaver or close the current files and set the FILES panel to your TRAVELWISE2 site.

2 Display the FILE menu and select OPEN.

4 Use SAVE AS from the FILE menu to save the page in your TRAVELWISE2 folder under the same name. There is no need to update links, then close the pages.

5 Repeat steps 2 to 4 for the BA.HTML and SINGAPORE.HTML pages.

3 Access the CHAPTER 19 folder of the DWcs4 SUPPORT FILES and open the QANTAS.HTML page.

© Guided Computer Tutorials 200919-2

Learning Adobe DreamWeaver CS4

B Adjusting the Template

The popup menu will be placed in the main navigation section of the template. The template will then be saved under a different name so that you still have a copy of the original template.

1 Open the TW_TEMPLATE.DWT page from the TEMPLATES folder of the FILES panel.

NOTE: If the CONTENT region has been centred from the previous exercise, you can click in the CONTENT region and select the LEFT ALIGN button from the PROPERTIES INSPECTOR to left align it.

3 Display the FILE menu and select SAVE AS TEMPLATE

2 Delete the buttons from the NAVIGATION region under the banner.

4 Call the template:

tw_template2

and select SAVE.

© Guided Computer Tutorials 2009 19-3

19Creating Menus and Tabbed Panels

C Inserting the Popup Menu

The SPRY widgets are displayed in the SPRY tools of the INSERT panel.

D Adjusting the Menu Buttons

The text in the menu bar, the number of buttons and the sub-menus are all set in the PROPERTIES INSPECTOR. In this case we will create a menu bar with five buttons and set a popup menu on one of those buttons.

1 In the PROPERTIES INSPECTOR leave the MENU BAR name as MenuBar1.

1 Set the INSERT panel to the SPRY tools and click on SPRY MENU BAR

2 Leave the HORIZONTAL menu bar selected in this case and select OK.

3 The menu bar is inserted in the NAVIGATION region.

2 ITEM 1 should be selected in the left column, set the TEXT box to HOME and click on the BROWSE icon next to the LINK box

© Guided Computer Tutorials 200919-4

Learning Adobe DreamWeaver CS4

3 Select the INDEX.HTML page from your TRAVELWISE2 folder to insert the link.

4 Select ITEM 2 in the left column, set its TEXT box to SPECIALS and its LINK box to the SPECIALS.HTML page.

5 Select ITEM 3 in the left column and set its TEXT box to Airlines, but leave its LINK box as #.

6 Select ITEM 4 in the left column and set its TEXT box to ORDERS and its LINK box to the ORDERS.HTML page.

7 Click on the ADD MENU ITEM button (+) at the top of the column to insert another button. Set the TEXT box to CONTACT and leave the LINK as #.

© Guided Computer Tutorials 2009 19-5

19Creating Menus and Tabbed Panels

E Adjusting the Popup Menu

The popup menu will be set on the AIRLINES button, however, popup menus can be added to any of the buttons.

1 In the PROPERTIES INSPECTOR click on AIRLINES in the left column.

NOTE: Buttons can be added or removed from the popup menu using the + or - button above the column. You can change the order of the buttons using the arrow buttons above the left column.

2 Click on ITEM 3.1 in the second column and set the TEXT box to BRITISH AIRWAYS and the LINK box to the BA.HTML page.

3 Click on ITEM 3.2 in the second column and set the TEXT box to QANTAS and the LINK box to the QANTAS.HTML page.

4 Click on ITEM 3.3 in the second column and set the TEXT box to SINGAPORE AIRLINES and the LINK box to the SINGAPORE.HTML page.