Learning Adobe DreamWeaver CS4

By Greg Bowden

Chapter 19

Creating Menus
and Tabbed Panels

Guided Computer Tutorials

www.gct.com.au
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, 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.
 Chapter

19
Creating 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.

3 Access the CHAPTER 19 folder of the

DWcs4 SUPPORT FILES and open the
QANTAS.HTML page.

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.

© Guided Computer Tutorials 2009 19-1

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.

2 Delete the buttons from the

NAVIGATION region under the
banner.

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

4 Call the template:

tw_template2
and select SAVE.

19-2 © Guided Computer Tutorials 2009
 Creating Menus and Tabbed Panels 19
C Inserting the Popup Menu
The SPRY widgets are displayed in the SPRY tools of the INSERT panel.

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.

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.

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 2009 19-3

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 #.

19-4 © Guided Computer Tutorials 2009
 Creating Menus and Tabbed Panels 19
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.

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.

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.

© Guided Computer Tutorials 2009 19-5