Menu Magic II Extension Kit by PVII

Overview

DO YOU BELIEVE IN MAGIC?

Project Seven Development has raised the bar by leaps and bounds with Menu Magic II.
Menu Magic II provides everything you need to build an exciting DHTML menu of your
choice (horizontal, vertical, or dropdown) in just a few mouse clicks. And should you
change your mind—another click or two is all it takes to modify or remove the entire
menu!
When you click the Menu Magic II icon, the Menu Magic II interface opens and you can
choose a menu Type (Horizontal Tab Bar, Vertical Flyout, or Horizontal Dropdown), a
boatload of options, and you can even select a professionally designed Theme. Once your
options have been selected and the OK button is clicked, your menu is instantly gener-
ated—right before your eyes.
Part of the magic within Menu Magic II is what happens behind the scenes. A JavaScript
file is written and saved in your local site, then that file is linked to your page. CSS files
are written, filed in your site, and linked to your page. Graphics are generated (based on
the Theme you select) and written to a local folder within your site. The editable Fire-
works PNG is filed in your site, as well, to make it easy for you to edit the images as you
see fit. There’s no need to copy any files or folders—Menu Magic II places everything
you need where it belongs—automagically.
 Overview | 2

WHAT’S INCLUDED?
Your purchase of Menu Magic II includes everything you need to produce an efficient,
attractive menu in your choice of layout—Horizontal Tab Bar, Vertical Flyout, or Hori-
zontal Dropdown. Here’s what you get:
1. The Menu Magic II Extension System.
2. Custom CSS files for each menu Type and Theme.
3. Complete image sets to get you started and provide inspiration. Each menu
Type/Theme has its own graphics. Each menu type has a Basic theme set and a Bonus
theme set (six sets in all).
4. Editable Fireworks documents for each image set.
5. A detailed User Guide.

AN EXTENSIBLE EXTENSION
Menu Magic II was designed to enable you to add ThemePaks that fully integrate with
the interface—providing you with new image and layout possibilities. To find out more
about Menu Magic II ThemePaks, and to see them in action, visit the ThemePak page at
Projectseven.com:
http://www.projectseven.com/mm2/themes

What’s Included? | 2
3 | Support

Support

We hope you enjoy using Menu Magic II. We certainly enjoyed making it! Before you
seek help, please make sure you have read this entire User Guide. Your answer may well
be contained inside.
If you cannot find your solution in the User Guide, here’s how to proceed:

SUPPORT OPTIONS

THE PVII WEBDEV NEWSGROUP

Open 24 hours a day and seven days a week—all year long. Our newsgroup is a wonderful
community inhabited by our customers, our friends, and the PVII Team. It’s one of the
most popular Dreamweaver-related forums on the Internet and a great place to learn what
you need to know—and then some.
Outlook Express users can click below to log on:
News://forums.projectseven.com/pviiwebdev
If you are using Netscape, or another type of news reading program, access its help system
to find out how to set up a new news account. The server you will need to use is:
forums.projectseven.com
After setting up the server, you should get a list of available newsgroups. Choose:
pviiwebdev
Additional help on logging on to newsgroups can be found here:
http://www.projectseven.com/support

3 | Support Options
 Support | 4

THE PVII INFOBASE

This is our online database of technical notes, tips, tricks, and other goodies. Go to our
main Support page and you will see the InfoBase search and lookup controls in the side-
bar.
http://www.projectseven.com/support/support.asp
In addition, if you click below, you’ll get our 10 most recent tech notes:
http://www.projectseven.com/support/questions.asp?type=recent

E-MAIL
Point yourself at:
support@projectseven.com

Support Options | 4
5 | Contents

Contents

TABLE OF CONTENTS
OVERVIEW............................................................................................................................................ 1

Do You Believe in Magic?......................................................................................................... 1

What’s Included? ....................................................................................................................... 2
An Extensible Extension ...................................................................................................................... 2

SUPPORT................................................................................................................................................ 3

Support Options ......................................................................................................................... 3

The PVII WebDev Newsgroup ............................................................................................................ 3

CONTENTS ............................................................................................................................................ 5

Table of Contents ....................................................................................................................... 5

SECTION I - SET UP........................................................................................................................... 10

Create Archive and Backup Copies ......................................................................................... 10

Make a copy of your Archived Site ......................................................................................... 11
Defining a Site.......................................................................................................................... 12
Define Your New Dreamweaver Site................................................................................................. 12

Install the Menu Magic II extension ........................................................................................ 13

Mac OSX Issue .................................................................................................................................. 14

SECTION II – QUICK START GUIDE............................................................................................. 15

Inserting a Menu Magic II Tab Bar Menu.......................................................................................... 15

Creating a Horizontal Drop Down Menu ................................................................................. 20

Inserting a Menu Magic II Dropdown Menu ..................................................................................... 20

Creating a Vertical Flyout Menu.............................................................................................. 23

Inserting a Vertical Flyout Menu ....................................................................................................... 23

Creating a NavBar-Only Menu ................................................................................................ 26

5 | Table of Contents
 Contents | 6

SECTION III – MENU MODIFICATIONS .......................................................................................28

Deleting a Menu Button Image ................................................................................................ 29

Adding a New Menu Button Image.......................................................................................... 30
Moving a Menu Button Image ................................................................................................. 33
Changing the Default Menu Button ......................................................................................... 35
Changing the Image Swap Option............................................................................................ 37
Changing the Down State Link ................................................................................................ 38
The Down State Class Name.................................................................................................... 39
Changing the Persistent Default Submenu Status .................................................................... 40
Deleting Submenus and Changing the Menu Type .................................................................. 41
Deleting Submenus .............................................................................................................................42
Changing the Menu Type....................................................................................................................43

Placeholder Text Links............................................................................................................. 45

Converting a Placeholder Text Link to a Live Text Link ...................................................................45

Menu Button Image Links........................................................................................................ 48

Activating a Menu Button Image Link ...............................................................................................48
Accessibility Note...............................................................................................................................49

An Accessible DHTML Menu—Step 1 ................................................................................... 50

An Accessible DHTML Menu—Step 2 ................................................................................... 50
For Horizontal Tab Bar Menus ...........................................................................................................50
For Dropdown or Flyout Menus .........................................................................................................52

Table of Contents | 6
7 | Contents

SECTION IV – REMOVE MENU MAGIC II................................................................................... 54

Removing Menu Magic II ........................................................................................................ 55

SECTION V – IMAGES ...................................................................................................................... 56

Back it Up for Posterity............................................................................................................ 56

The Available Menu Magic II Fireworks PNGs ...................................................................... 57
Understanding the Editable .PNG File ..................................................................................... 59
Fireworks Layers................................................................................................................................ 59
Fireworks Frames............................................................................................................................... 60
Fireworks Slices ................................................................................................................................. 61
Slice Optimization.............................................................................................................................. 63

Modifying the Text Attributes.................................................................................................. 64

Changing the Text Label .................................................................................................................... 66

Modifying the Graphical Elements .......................................................................................... 69

Resizing the Graphics .............................................................................................................. 72
Decreasing Dimensions...................................................................................................................... 72
Increasing Dimensions ....................................................................................................................... 73

Editing Slices ........................................................................................................................... 76

Optimizing Graphics ................................................................................................................ 79
Exporting Graphics .................................................................................................................. 80
Automatically Rebuilding Your Menu in Dreamweaver ......................................................... 81
Modify Menu Magic II....................................................................................................................... 81

Removing Buttons in Fireworks .............................................................................................. 83

Deleting a Slice .................................................................................................................................. 83

Adding New Buttons in Fireworks........................................................................................... 84

Creating the New Button Images ....................................................................................................... 85
Creating and Positioning New Slices ................................................................................................. 86
Naming New Slices............................................................................................................................ 87
Notes on steps used to duplicate the graphics .................................................................................... 89

7 | Table of Contents
 Contents | 8

SECTION VI – CSS ..............................................................................................................................90

Embedded CSS for Menus Not Using Menu Magic II Themes ............................................... 90
External CSS for Menus Using Menu Magic II Themes.......................................................... 93
Doctypes................................................................................................................................... 97
Creating a Snippet...............................................................................................................................98
Inserting a Snippet ............................................................................................................................100

CSS: For Further Reading ...................................................................................................... 102

SECTION VII – ADVANCED TECHNIQUES................................................................................103

Changing the Swap Image Naming Convention .................................................................... 103

Creating a Menu Without Using a Theme.............................................................................. 104

APPENDIX I – MENU MAGIC II HELP SYSTEM .......................................................................113

Overview ................................................................................................................................ 113

Insert Menu Magic II ........................................................................................................................113
Modify Menu Magic II .....................................................................................................................113
Remove Menu Magic II ....................................................................................................................114
Set Menu Magic II ............................................................................................................................114
Trigger Menu Magic II .....................................................................................................................114

Optional Advanced Features .................................................................................................. 115

Swap Image Naming Convention .....................................................................................................115
Preserving Your Code Tweaks .........................................................................................................115
Themes..............................................................................................................................................115

Insert Menu Magic II.............................................................................................................. 116

Overview...........................................................................................................................................116
The Create Menu Process: ................................................................................................................117
The Interface .....................................................................................................................................118
Menu Images Section........................................................................................................................119
Menu Options Section.......................................................................................................................121
The Interface Control Buttons...........................................................................................................127

Table of Contents | 8
9 | Contents

Modify Menu Magic II by PVII............................................................................................. 129

Overview.......................................................................................................................................... 129
The Modify Menu Process ............................................................................................................... 130
The Interface .................................................................................................................................... 131
Existing Menu Sections.................................................................................................................... 132
Menu Images Section....................................................................................................................... 132
Menu Options Section...................................................................................................................... 134
The Interface Control Buttons.......................................................................................................... 138

Remove Menu Magic II by PVII............................................................................................ 140

Overview.......................................................................................................................................... 140
The Remove Menu Process.............................................................................................................. 141
The Interface .................................................................................................................................... 141

Set Menu Magic II by PVII.................................................................................................... 142

Overview.......................................................................................................................................... 142
Modifying an existing Set Menu Magic II behavior ........................................................................ 144
Creating a new Set Menu Magic II behavior.................................................................................... 144
The Interface .................................................................................................................................... 145
The Interface Control Buttons.......................................................................................................... 147

Trigger Menu Magic II by PVII............................................................................................. 148

Overview.......................................................................................................................................... 148
Modifying an existing Trigger Menu Magic II behavior ................................................................. 149
Creating a new Trigger Menu Magic II behavior............................................................................. 149
The Interface .................................................................................................................................... 150
The Interface Control Buttons.......................................................................................................... 150

Swap Image Naming Convention .......................................................................................... 151

Menu Magic II default naming convention:..................................................................................... 151
Changing the image naming convention .......................................................................................... 152

Preserving your code modifications ....................................................................................... 153

9 | Table of Contents
 Section I - Set Up | 10

Section I - Set Up

This section provides instructions for unpacking and archiving the Menu Magic II Exten-
sion Kit and for creating a new Dreamweaver web site.

CREATE ARCHIVE AND BACKUP COPIES

We strongly suggest that you follow these guidelines to create a permanent Archive copy
of your PVII product so you will always have an unaltered version available if the need
arises. This is the folder you’ll browse to whenever you wish to open the User Guide.
We also suggest that you copy your P7_MM2.zip onto external media for backup.
Create a folder named Studio VII to store this product, as well as other PVII products you
may acquire. Place the unzipped/unstuffed archive into this folder. The folders and files
should look like this:

FIGURE 1 STUDIO VII ARCHIVE

Keep this as an archive only. Never make any changes to the files in this folder.
To work through the tutorials in this User Guide, you'll copy and paste the work files from
this archive.

Create Archive and Backup Copies | 10

11 | Section I - Set Up

MAKE A COPY OF YOUR ARCHIVED SITE

Create a new folder for your work site. This is the site you'll work in and/or publish to
your web server.
Create a new folder on your hard drive and give it a meaningful name. As an example,
we'll create Menu Magic II in the root of our main hard drive: C:\Menu Magic II.
Navigate to the archive folder you created earlier (Studio VII\Menu Magic II) and copy the
MM II Tutorial folder. Do not copy the parent folder, the M2 User Guide, the license, or
the readme file—just the MM II Tutorial folder.
Paste the MM II Tutorial folder into the new site folder you created (C:\ Menu Magic II).
Your folder structure should look like this:

FIGURE 2 MENU MAGIC II SITE

11 | Make a copy of your Archived Site

 Section I - Set Up | 12

DEFINING A SITE
You need to define a site so that Dreamweaver knows where to store all of your files.
Additionally, the page you are working on must be a saved page in that site. Dreamweaver
makes this process very easy.

In order for Menu Magic II to work correctly, you must always work within a properly defined Dreamweaver site. Menu
Magic II will work in any defined Dreamweaver site. For the purposes of going through the Menu Magic II User Guide Tu-
torials, we will create a new site.

DEFINE YOUR NEW DREAMWEAVER SITE

-Open Dreamweaver
-Open the Site panel (or Site window).
-Choose Site→New Site.

Note: Dreamweaver MX users—Please select the Advanced Tab in the Site Definition dialog to create a basic site.

-Enter a meaningful name for your site (we've used Menu Magic II).
-Click the folder icon to browse to the folder you created above (C:\Menu Magic II) and
click Select.
-Click OK to create the new site.
-Click OK if Dreamweaver asks you to create an initial site cache.
When the Site Definition window closes, you’ll see your new site listed in the Site panel
(DWMX) or Site Window (DW 4).

FIGURE 3 – SITE PANEL (DREAMWEAVER MX)

Note: If you are not sure how to Define a Site in Dreamweaver, please refer to the Dreamweaver Help System (Press F1)
or the Dreamweaver Manual.

Defining a Site | 12
13 | Section I - Set Up

INSTALL THE MENU MAGIC II EXTENSION

Now we need to install the PVII Menu Magic II extension.
-Choose Commands→Manage Extensions.

FIGURE 4 – OPENING THE EXTENSION MANAGER

Extension Manager will open.

Make sure your working version of Dreamweaver is displayed on the Extension Manager
toolbar.

FIGURE 5 SELECT YOUR WORKING DREAMWEAVER VERSION

-Choose File→Install Extension.

FIGURE 6 – THE EXTENSION MANAGER

13 | Install the Menu Magic II extension

 Section I - Set Up | 14

The Select Extension to Install window will open.

The Extension is inside the M2

User Guide subfolder of the Menu
Magic II archive folder.

FIGURE 7 – SELECT EXTENSION TO INSTALL WINDOW

-Browse to the Studio VII/Menu Magic II Archive folder you created earlier and choose
M2 User Guide/P7_MM2_20.mxp
-Click Install.
-Click Accept in the License window.
Dreamweaver will inform you that it must be closed and restarted for the changes to take
effect.
-Click OK.
You should now see the Menu Magic II by PVII extension listed in the Extension Manager
list of Installed Extensions.
-Close Extension Manager.
-Close Dreamweaver.
-Restart Dreamweaver.

MAC OSX ISSUE

Sometimes Mac OSX will have file association problems if you attempt to install an ex-
tension via the Extension Manager’s File Menu. If you experience problems, use Dream-
weaver’s Site panel to locate the extension (P7_MM2_20.mxp). Once you’ve found it,
double-click the file. The Extension Manager should open and installation should begin.
Alternatively, you can use the Finder to locate the .mxp file, and then simply double-click
the file to open the Extension Manager.

Install the Menu Magic II extension | 14

15 | Section II – Quick Start Guide

Section II – Quick Start Guide

Let’s see just how magical Menu Magic II is.

We’ll create a styled menu in just a few mouse clicks. Menu Magic II will create and file
all of the images you need. Then it will create and link the appropriate Style Sheets and an
external JavaScript file. Menu Magic II will even create and file a Fireworks PNG in your
local site—so that you can edit and customize the menu images.

INSERTING A MENU MAGIC II TAB BAR MENU

Now we’re ready to let Menu Magic II do its thing!

Note: For a complete discussion of the Menu Magic Insert system, please see Appendix 1

-In the MM II Tutorial folder, open the file hz_tab_bar.htm

FIGURE 8 THE SITE PANEL (DREAMWEAVER MX)

-Click on the Menu Magic II icon on the Insert Bar, or click Insert→Studio VII→Menu
Magic II by PVII

FIGURE 9 – MENU MAGIC II ICON ON INSERT BAR

The Insert Menu Magic II window will open.

15 | Install the Menu Magic II extension

 Section II – Quick Start Guide | 16

1-Horizontal Tab Bar will be set in the Menu Type selection list. Leave it selected.

FIGURE 10 – SELECTING HORIZONTAL TAB BAR

-Select Basic from the Style Theme selection list.

FIGURE 11 – SELECTING THE BASIC THEME

Install the Menu Magic II extension | 16

17 | Section II – Quick Start Guide

NOTE: After you select the Basic theme, the thumbnail image to the right of the option lists will change to show an illus-
tration of the Style Theme that you have chosen. Also note that the menu images are automatically added to the Menu
Images list and that the Left Position and Top Position will change to settings optimized for the selected Menu Type and
Theme.

Because you’ve chosen a Menu Magic II Theme, all options will be optimally set for
you.
-Click OK
The menu will appear on your page instantly.

FIGURE 12 – INSERTED MENU

Menu Magic II has written all of the HTML markup; it’s created and linked the appropri-
ate style sheets and JavaScript file; and it’s written all of the image files (as well as the
editable Fireworks PNG).
All necessary folders to hold these items have been created for you.

17 | Install the Menu Magic II extension

 Section II – Quick Start Guide | 18

The following folders and associated items were created when you clicked OK.

You may have to refresh the site

panel to see the new folders

FIGURE 13

1. Local_Files/Fireworks: Contains the editable Fireworks PNG for the Theme you
chose.
2. m2css: Contains the external CSS files for the menu, which are now linked to your
page.
3. m2img: Contains all of the web images for the menu.
4. m2scripts: Contains the Menu Magic II external JavaScript file, which is now linked
to your page.
That’s all there is to it.
-Save your page.

Install the Menu Magic II extension | 18

19 | Section II – Quick Start Guide

-Preview in your default browser

FIGURE 14 – COMPLETED MENU PREVIEWED IN MOZILLA 1.2 (NETSCAPE 7)

Mouse on and off all of the buttons to get a feel for how the menu works.

NOTE: To support Netscape version 4 browsers, you should add the Dreamweaver Netscape Resize Fix to the page. To
do so, choose Commands→Add/Remove Netscape Resize Fix.

-Save and Close hz_tab_bar.htm

19 | Install the Menu Magic II extension

 Section II – Quick Start Guide | 20

CREATING A HORIZONTAL DROP DOWN MENU

Let’s create another type of Menu Magic II menu. This time, however, we’ll use one of
the included Bonus Themes.

INSERTING A MENU MAGIC II DROPDOWN MENU

Now we’re ready to let Menu Magic II work some more magic…

-In the MM II Tutorial folder, open the file dropdown_bonus.htm

-Click the Menu Magic II icon on the Insert Bar, or choose Insert→Studio VII→Menu
Magic II by PVII
The Insert Menu Magic II window will open.

FIGURE 15

-Select 2-Dropdown from the Menu Type selection list.

NOTE: After selecting Dropdown from the Menu Type drop down menu the image to the right of the drop down menus
will change to reflect the Dropdown menu. The Left Position, Top Position and Submenu Width values will change. The
Persistent Submenu and Auto Submenu checkboxes will also become deselected.

Creating a Horizontal Drop Down Menu | 20

21 | Section II – Quick Start Guide

-Select Bonus from the Style Theme selection list.

FIGURE 16 – SELECTING THE BONUS THEME

NOTE: After you select the Bonus theme, the thumbnail image changes to reflect your choice, the appropriate images are
automatically added to the Menu Images box, the menu options are all set for you—and the first button is set as the De-
fault Button (it displays a down state when the page loads and when the menu is inactive).

All of the options appropriate for this menu have been automatically selected.
-Click OK to insert the menu on your page.

FIGURE 17 – THE BONUS THEME AUTOMATICALLY ADDS A COOL BACKGROUND IMAGE TO YOUR PAGE, TOO.

If you check the contents of your Local_Files, m2img, and m2css folders, you’ll see that all of the assets that relate to
this new menu have been added automatically. Menu Magic II detected the presence of the folders and added all new
files it needed. The JavaScript file was detected and, if needed, updated.

21 | Creating a Horizontal Drop Down Menu

 Section II – Quick Start Guide | 22

-Save the page and then press F12 to preview in your default browser.
Mouse over any of the buttons to expose its submenu.

FIGURE 18 – MENU BUTTON CHANGES COLOR WHEN WHEN HOVERED OVER TO MATCH ITS SUBMENU

Mouse off the menu and Button 1 reverts back to its down state because it is set to be the
Default Button.

FIGURE 19 – BUTTON 1 REVERTS TO ITS “DOWN STATE” WHEN THE MENU IS INACTIVE

Tip: To prevent CSS styles from being lost when the window is resized in Netscape 4, you should add Dreamweaver’s
Netscape Resize Fix to the page. To add it, choose Commands→Add/Remove Netscape Resize Fix.

-Close the page.

Creating a Horizontal Drop Down Menu | 22

23 | Section II – Quick Start Guide

CREATING A VERTICAL FLYOUT MENU

Let’s create the third available Menu Magic II Menu Type: Vertical Flyout. And let’s use
the Bonus Theme again.

INSERTING A VERTICAL FLYOUT MENU

-In the MM II Tutorial folder, open the file vertical_bonus.htm
-Click the Menu Magic II icon on the Insert panel, or click Insert→Studio VII→Menu
Magic II by PVII
The Insert Menu Magic II window will open.

FIGURE 20 – SELECTING VERTICAL FLYOUT

-Select 3-Vertical Flyout from the Menu Type selection list.

Leave the window open. We need to select our Theme…

23 | Creating a Vertical Flyout Menu

 Section II – Quick Start Guide | 24

-Select Bonus from the Style Theme selection list.

FIGURE 21 – SELECTING THE BASIC THEME

NOTE: After you select the Bonus theme, the image next to the drop down menus will change to reflect the chosen Style
Theme. Also, note that the images are automatically added to the Menu Images box and the Left Position, Top Position,
and Submenu Width values will change.

All options will be optimally set for you.

-Click OK to insert the menu on the page.

FIGURE 22 – INSERTED MENU

Creating a Vertical Flyout Menu | 24

25 | Section II – Quick Start Guide

As with the first two menus, Menu Magic II has taken care of all the necessary assets for
this particular menu—including an integrated page background.
-Save the page
-Press F12 to preview in your default browser.

FIGURE 23 – COMPLETED MENU IN MSIE6 (NOTE THAT “SUBLINK 1.2” IS THE “DOWN STATE TEXT LINK”)

-Close the page.

25 | Creating a Vertical Flyout Menu

 Section II – Quick Start Guide | 26

CREATING A NAVBAR-ONLY MENU

Menu Magic II can create Navigation Bars without submenus. You can use Menu Magic
II’s powerful Image Swapping capabilities to build an image-only NavBar far more effi-
ciently than you could using Dreamweaver’s (or Fireworks’) built-in behaviors. You can
choose any of the Basic or Bonus themes to construct a NavBar-Only menu. We’ll use the
Bonus Horizontal Tab Bar Menu for this exercise.

-In the MM II Tutorial folder, open the file navbar_tab_bonus.htm

-Click the Menu Magic II icon on the Insert Bar, or choose Insert→Studio VII→Menu
Magic II by PVII
The Insert Menu Magic II window will open.

-Select 1-Horizontal Tab Bar from the Menu Type selection list.
-Select Bonus Theme from the drop down menu next to Style Theme.
-Click in the No Submenu (NavBar Only) checkbox to select it.

NOTE: When you select the

No Submenu (NavBar Only)
checkbox, the Submenu
Width, Persistent Submenu
and Auto Submenu options
become grayed out.

FIGURE 24 – SELECTING VERTICAL FLYOUT

-Click OK

Creating a NavBar-Only Menu | 26

27 | Section II – Quick Start Guide

The menu is inserted on your page.

FIGURE 25 – INSERTED MENU

-Save the page

-Press F12 to preview the page in your default browser.

FIGURE 26 – THE MENU IN MSIE6. BUTTONS SWAP ON MOUSE OVER.

FIGURE 27 – DEFAULT DOWN STATE BUTTON (BUTTON 1) WHEN MENU IS INACTIVE

Mouse on and off the buttons to see how the menu works.

27 | Creating a NavBar-Only Menu

 Section III – Menu Modifications | 28

Section III – Menu Modifications

Menu Magic II is designed to protect your existing menu and will not re-write content that
you have placed in the submenus. You can safely make changes to existing menu sections
without losing your work. Additionally, the Modify mode will affect neither the style
sheet(s) nor existing images. This allows you to edit images and style sheet(s) and still use
the Menu Magic II Modify system to fine tune your menu—with complete peace of mind.
The Modify system will write the code it needs to, while safeguarding your content. Menu
elements will have their IDs and/or names reassigned with respect to their new position in
the menu. No matter how many menus you add, delete, or relocate—the menu names and
IDs will always be meaningful and sequential—in keeping with each element’s onscreen
placement.
User-entered modifications to existing menu image links will always be preserved. Any
modified Alt tags, onClick events, or Href strings will be properly carried through to the
rebuilt menu. The content of the submenus is never touched and is transferred (if neces-
sary) to the revised submenu so that all menus remain sequentially placed and ID'd. A
unique feature of the Modify system is its ability to rename any boilerplate text links. If
the system encounters the unmodified text links, it will rewrite them to properly reflect the
modified submenu location. That is, Sublink 2.1 will become Sublink 3.1, if your modi-
fications result in a new button being inserted between the first and second buttons.

Note: For a in-depth discussion of the Modification system, please see Appendix 1

Creating a NavBar-Only Menu | 28

29 | Section III – Menu Modifications

DELETING A MENU BUTTON IMAGE

-Open hz_tab_bar.htm
-Choose Modify→Studio VII→Modify Menu Magic II by PVII (or Click the Menu
Magic II icon on the Insert Bar or Common Objects panel)
The Modify Menu Magic II window will open.
Warning: Deleting an existing menu button will also delete its associated submenu.

FIGURE 28 CLICKING DELETE

-In the Menu Images box, select (click) the last button (hbscb6.gif).
-Click the Delete button.
-Click OK.

NOTE: Menu Magic II will delete the menu and its associated submenu <div> element from the page.

-Preview the page

Everything will work, but there are now only five buttons and submenus.

29 | Deleting a Menu Button Image

 Section III – Menu Modifications | 30

ADDING A NEW MENU BUTTON IMAGE

Let’s continue working in hz_tab_bar.htm and add back the button we just deleted.
-Choose Modify→Studio VII→Modify Menu Magic II by PVII (or Click the Menu
Magic II icon on the Insert Bar or Common Objects panel)
The Modify Menu Magic II window will open.

FIGURE 29 CLICKING “ADD” IN THE MODIFY MENU MAGIC II WINDOW

-Click the Add button.

Adding a New Menu Button Image | 30

31 | Section III – Menu Modifications

The Select Image Source window will open.

FIGURE 30 SELECTING A NEW IMAGE

-Browse to the m2img folder and select hbscb6.gif

-Click OK
After you select the image, you will be returned to the Modify Menu Magic II window.

31 | Adding a New Menu Button Image

 Section III – Menu Modifications | 32

The image that you selected will he highlighted in the Menu Images box. It will be the
last image in the list. You can use the Up and Down buttons to place the image where you
want it in the menu—but we’ll leave it last because that’s where it belongs.

FIGURE 31

Note:The new button is distinguishable from the others by its lack of a name at the end of its description (p7TBimXX). The
name will be added after you click OK.

Tip: If you wish, you can now set the Link Separator for the new submenu that will be added.

-Click OK.
The new menu button image will be added to your page.
-Save the page, but leave it open.

Adding a New Menu Button Image | 32

33 | Section III – Menu Modifications

MOVING A MENU BUTTON IMAGE

Menus are always built on the page in the order that the menu sections appear in the
Menu Images list. You can change the order at any time by moving a menu section Up
or Down.
We’ll complete this task in hz_tab_bar.htm
-Choose Modify→Studio VII→Modify Menu Magic II by PVII (or Click the Menu
Magic II icon on the Insert Bar or Common Objects panel)
The Modify Menu Magic II window will open.
-In the Menu Images, select the second image (hbscb2.gif).
-Click the Down button once to move the image one position down in the list.

FIGURE 32 HBSCB2.GIF IS NOW IN THE THIRD POSITION—BELOW HBSCB3.GIF

-Click OK.
-Preview the page.

33 | Moving a Menu Button Image

 Section III – Menu Modifications | 34

FIGURE 33 - “BUTTON 3” IS NOW BETWEEN “BUTTON 1” AND “BUTTON 2”

Menu Magic II has logically re-ordered everything perfectly. Menu buttons and their
submenus have been repositioned and all existing content (and the underlying HTML)
maintains its correct relationships.
-Choose Modify→Studio VII→Modify Menu Magic II by PVII again
-In the Images List, select hbscb2.gif
-Click the Up button once to move it back to its original position.
-Click OK
The buttons are now back in their original order

FIGURE 34 - “BUTTON 2” IS AGAIN BETWEEN “BUTTON 1” AND “BUTTON 3”

-Save the page, but leave it open

Moving a Menu Button Image | 34

35 | Section III – Menu Modifications

CHANGING THE DEFAULT MENU BUTTON

The Default Menu Button is a button that you set to be displayed in its down state when
the page loads—to show users that they are on a page that relates to that button.

The next few tasks will explore the power of the Set Menu Magic II Behavior. It’s an enormously powerful part of the Menu
Magic II Suite and permits you to quickly change the default menu state—how the menu looks when the page first loads in
a browser.

We’ll complete this task in hz_tab_bar.htm

When hz_tab_bar.htm first opens, the first menu button is in the Down State. That is, it
is set to be the Default Menu Button.

FIGURE 35 – MENU BUTTON ONE IN THE DOWN STATE WHEN PAGE FIRST LOADS

Let’s reset this menu so that Button 3 is the Default Menu Button.

-Click the <body> tag on the Tag Selector bar along the bottom edge of the Design View
window.
-Open the Behaviors Panel and make sure its heading has changed to <body> Actions.
-Double-click the onLoad Event for the Set Menu Magic II by PVII Action.

FIGURE 36

The Set Menu Magic II by PVII window will open.

35 | Changing the Default Menu Button

 Section III – Menu Modifications | 36

FIGURE 37 SELECTING NEW DEFAULT MENU BUTTON

-Select p7Tbim30 from the Default Menu Button selection list.

-Click OK.
-Preview the page

FIGURE 38 – BUTTON 3 IS NOW THE DEFAULT AND DISPLAYS IN THE DOWN STATE WHEN THE PAGE FIRST LOADS

-Save the page, but keep it open.

Changing the Default Menu Button | 36

37 | Section III – Menu Modifications

CHANGING THE IMAGE SWAP OPTION

The Swap Option allows you to control your menu’s image swapping behavior. This is
another option that you access through the Set Menu Magic II Behavior interface.

We’re still working in hz_tab_bar.htm

-Click the <body> tag on the Tag Selector bar.

-Open the Behaviors Panel (make sure its heading has changed to <body> Actions).

FIGURE 39

-Double-click the onLoad Event for the Set Menu Magic II by PVII Action.

The Set Menu Magic II by PVII window will open.

-Select your new swap option from the Image Swap Option selection list.

FIGURE 40 SELECTING NEW IMAGE SWAP OPTION

For an in-depth discussion of the Image Swap Option, see:

Appendix 1: Image Swap Option.

-Click OK.
-Save the page, but keep it open.

37 | Changing the Image Swap Option

 Section III – Menu Modifications | 38

CHANGING THE DOWN STATE LINK

You can select a specific text link that should be displayed in a different style to denote
that this link corresponds to the current page.
We’re still working in hz_tab_bar.htm

-Click the <body> tag on the Tag Selector bar.

-Open the Behaviors Panel (make sure its heading has changed to <body> Actions).

FIGURE 41

-Double-click the onLoad Event for the Set Menu Magic II by PVII Action.

The Set Menu Magic II by PVII window will open.

FIGURE 42 SELECTING NEW DOWN STATE LINK

For an in-depth discussion of the Down State Link Option, see:

Appendix 1: Down State Link.
-Click OK.
-Save the page, but keep it open.

Changing the Down State Link | 38

39 | Section III – Menu Modifications

THE DOWN STATE CLASS NAME

This setting specifies the custom CSS class that is applied to the Down State Link, and
serves to style the Down State link to set it apart from the others.
We’re still working in hz_tab_bar.htm

-Click the <body> tag on the Tag Selector bar.

-Open the Behaviors Panel (make sure its heading has changed to <body> Actions).

FIGURE 43

-Double-click the onLoad Event for the Set Menu Magic II by PVII Action.
The Set Menu Magic II by PVII window will open.

FIGURE 44

The class name should not be changed unless your CSS skills are advanced. We rec-
ommend that you leave the class assignment as is. If you want to change the color (or
other attributes) of the Down State Link, you can edit the p7tbdn rule in your Menu
Magic II Style Sheets.
For an in-depth discussion of the Down State Class Name, see:
Appendix 1: Down State Class Name.
-Save the page, but keep it open.

39 | The Down State Class Name

 Section III – Menu Modifications | 40

CHANGING THE PERSISTENT DEFAULT SUBMENU STATUS

As a user moves his mouse over a menu button, its associated submenu will display—but
as soon as the user moves his mouse off the menu entirely, the default submenu will be-
come visible again as all other submenus hide—if the Persistent Default Submenu option
is set to Yes. This option has no effect if the Default Menu Button option is set to None.
-Click the <body> tag on the Tag Selector bar.
-Open the Behaviors Panel (make sure its heading has changed to <body> Actions).

FIGURE 45

-Double-click the onLoad Event for the Set Menu Magic II by PVII Action.
The Set Menu Magic II by PVII window will open.

FIGURE 46 SELECTING NEW RESISTENT DEFAULT SUBMENU STATUS

-Change the Persistent Default Submenu option to either Yes or No.

-Click OK.
For an in-depth discussion of the Persistent Default Submenu Option, see:
Appendix 1: Persistent Default Submenu.
-Save and close the page.

Changing the Persistent Default Submenu Status | 40

41 | Section III – Menu Modifications

DELETING SUBMENUS AND CHANGING THE MENU TYPE

Menu Magic II allows you to change the Menu Type—even on a menu that’s already been
customized. Menu Magic II will neither change your customized buttons nor the CSS file
linked to your page. Careful consideration to your page layout should be given when
changing to a different Menu Type, since spacing and layout issues are likely to be en-
countered.
The least problematic menu to change is typically a Navbar Only (No Submenu) menu
that does not have an integrated page background. Although we did build a Basic
Horizontal Tab Bar (hz_tab_bar.htm), it contains submenus. However, Menu Magic II
permits us to delete any or all submenus without a problem! Let’s do it.
-Open hz_tab_bar.htm
-Choose File→Save As…
The Save As window will open.

-Name the new file: flipflop.htm

flipflop.htm is now the active page.

41 | Deleting Submenus and Changing the Menu Type

 Section III – Menu Modifications | 42

DELETING SUBMENUS
-In flipflop.htm, open the Layers panel
-Shift-Select the six submenu Layers:
1. p7Tbsub10
2. p7Tbsub20
3. p7Tbsub30
4. p7Tbsub40
5. p7Tbsub50
6. p7Tbsub60

FIGURE 47 – SHIFT-SELECT ALL OF THE SUBMENU LAYERS

-Press your Delete key.

You should have seven Layers remaining: the six menu button triggers and the closer
(P7TabH).

FIGURE 48 – THE REMAINING LAYERS

-Preview the page and you’ll see that the menu works wonderfully as a Navbar only—
without submenus.

FIGURE 49 – THE NAVBAR ONLY MENU IN MSIE6

Deleting Submenus and Changing the Menu Type | 42

43 | Section III – Menu Modifications

CHANGING THE MENU TYPE

Here comes the flip and the flop!

-Choose Modify→Studio VII→Modify Menu Magic II by PVII

The Modify Menu Magic II window will open.
-Change Menu Type to: 3-Vertical Flyout

FIGURE 50 SELECTING NEW MENU TYPE

-Click OK.

FIGURE 51 – THE MENU IS NOW VERTICAL

43 | Deleting Submenus and Changing the Menu Type

 Section III – Menu Modifications | 44

-Preview the page.

FIGURE 52 – THE FINISHED MENU IN MSIE6 IS FLIPPED AND FUNCTIONING

Powerful Magic.
Inspirational, it is.

Deleting Submenus and Changing the Menu Type | 44

45 | Section III – Menu Modifications

PLACEHOLDER TEXT LINKS

When Menu Magic II inserts a new menu onto a page, it uses null links to represent real
links in the submenu—so you can preview the link styles. Null links can be identified by a
# symbol in the Properties Inspector Link box. If you inspect a null link in Code View, it
would look something like this:
<a href="#">Sublink 1.2</a>

While a real link might look like this:

<a href="page2.htm">Page 2</a>

CONVERTING A PLACEHOLDER TEXT LINK TO A LIVE TEXT LINK

Now, of course, you’ll want your links to actually go somewhere! You’ll want them to
load pages, for example. Here’s how to do it:
-Open the page containing the menu you wish to modify.
-Open the Layers panel

FIGURE 53 CHANGING <DIV> ELEMENT VISIBILITY

-Select the submenu Layer you want to work with.

Tip: To make sure the Layer you are working on stays visible, click the eye symbol to the left of the selected Layer so that
changes to an open eye—or change the selected Layer’s Vis property in the Properties Inspector to visible. When you
are done editing, make sure to change it back to “Hidden” by clicking the eye symbol in the Layers panel until it changes
to a closed eye or by setting the Properties Inspector Vis property to hidden.

-Click anywhere inside of the text link that you want to change.

45 | Placeholder Text Links

 Section III – Menu Modifications | 46

-Click the <a> tag on the Tag Selector bar at the bottom of the Design View window.

FIGURE 54 HIGHLIGHTING THE <A> TAG ON THE TAG SELECTOR BAR

The <a> tag should become bold, and the text for the link should become highlighted.
-Type the new text for the link. It should overwrite the selected text.

NOTE: Be sure to preserve the spacing in the submenu.

With the text link still selected, look at your Properties Inspector

FIGURE 55 CLICKING BROWSE FOR FILE

-Click the folder icon to the right of the Properties Inspector Link box.
The Select File window will open.

Placeholder Text Links | 46

47 | Section III – Menu Modifications

-Select the document you want to link to.

FIGURE 56 SELECTING A FILE

-Click OK.

NOTE: If you change the link text, and that link is your Down State Link, you will need to edit the Set Menu Magic II be-
havior on the <body> tag to reflect the new link text. See more…

Important! Don’t forget to set your submenu layer back to Hidden.

47 | Placeholder Text Links

 Section III – Menu Modifications | 48

MENU BUTTON IMAGE LINKS

When Menu Magic II inserts a new menu onto a page, it uses null links on the menu im-
ages to trigger the behaviors that are applied to the image. These null links are different
from the null links used for the submenu text. Instead of a # symbol, the link is:
javascript:;
If we activate the link, the menu will still function normally when the mouse is hovered
over a button (onMouseOver), but clicking a button will serve up a new page—
presumably, the main page of the associated section.

ACTIVATING A MENU BUTTON IMAGE LINK

-Open the page containing the menu you wish to modify.
-Click on one of the menu button images (any one).
Look at the Property Inspector.

FIGURE 57 CLICKING THE BROWSE FOR FILE FOLDER ICON

-Click the folder icon to the right of the Properties Inspector Link box.

Menu Button Image Links | 48

49 | Section III – Menu Modifications

The Select File window will open.

FIGURE 58 SELECT FILE TO LINK TO

-Select the document you want to link to.

-Click OK.

ACCESSIBILITY NOTE
When you activate the button image links, you also provide a way for people using assis-
tive technology (or those who have JavaScript disabled) to be able to navigate your site.
For this reason, we recommend that you always activate your button image links.

49 | Menu Button Image Links

 Section III – Menu Modifications | 50

AN ACCESSIBLE DHTML MENU—STEP 1

Activating your button link has another effect:
It makes your menu accessible to people using assistive readers (the vision impaired) and
to people with JavaScript disabled (the ultra-cautious). When these people mouse over the
buttons, nothing will happen because it takes JavaScript to operate the menu. Since you
activated your button links, however, you have accomodated these people and they will be
able to navigate your site.
Important! Menu Magic II (as well as all PVII menu systems) are designed with accessibility in mind. Other Dreamweaver
DHTML menu extensions, including Macromedia’s Popup Menus are constructed on the fly, in your browser. The HTML
structure is not available for you to edit. If someone visits such a page with an assistive reader, or simply with JavaScript
disabled, they are out of luck. More accurately, you are out of luck—because there will be nothing to click. No links, no
buttons—nothing.

Menu Magic II puts the HTML on your page, in Dreamweaver, and it’s always editable.

AN ACCESSIBLE DHTML MENU—STEP 2

To make your menu fully accessible, you need to expose the submenu links to assistive
readers and JavaScript-disabled browsers. How?

FOR HORIZONTAL TAB BAR MENUS

These are easy. Simply set the submenu that is associated with the current page to visible.
Let’s do one:
-Open hz_tab_bar.htm
The Default Menu Button for this page is Button 1. It’s the button that shows in its down
state when the page loads in a browser. It’s associated submenu is p7TBsub10. Each
submenu Layer that Menu Magic II places on your page is set to Hidden. Menu Magic II
handles all of the orchestrations. It hides and shows the proper submenus on cue, auto-
matically. If you set p7TBsub10 to Visible, your menu will still function normally and the
submenu text links will be exposed in all their accessible glory—to any browser, under
any circumstances.
-Open the Layers panel

An Accessible DHTML Menu—Step 1 | 50

51 | Section III – Menu Modifications

-Select p7TBsub10
-Click the eyeball column, to the left of the Name: p7TBsub10, until the little icon
changes to an open eye.

FIGURE 59

p7TBsub10 will become visible in your Dreamweaver design window and its visibility
property is now set to: Visible. Click anywhere on the page and p7TBsub10 will not go
away!

Note: You need to perform this task on every page.

51 | An Accessible DHTML Menu—Step 2

 Section III – Menu Modifications | 52

FOR DROPDOWN OR FLYOUT MENUS

If you set a submenu to be persistently visible in a Dropdown or Flyout menu, you will
likely obscure other content on your page.

FIGURE 60 – CONTENT IS OBSCURED BY A PERSISTENT DEFAULT DROPDOWN MENU

An Accessible DHTML Menu—Step 2 | 52

53 | Section III – Menu Modifications

A different technique can be utilized. You can simply copy the text links inside your de-
fault submenu and paste them onto your page—preferably at the bottom of the main con-
tent.

FIGURE 60-B – THE SUBMENU LINKS HAVE BEEN COPIED AND PASTED AT THE BOTTOM OF THA MAIN CONTENT AREA

53 | An Accessible DHTML Menu—Step 2

 Section IV – Remove Menu Magic II | 54

Section IV – Remove Menu Magic II

Menu Magic II includes a Remove feature that allows you to quickly remove an existing
Menu Magic II system from your page. This facility allows for easy removal when simply
prototyping pages or when a total redesign is necessary.
The system will look for, and remove, all of the elements on your page that follow the
Menu Magic II naming convention:
1. The MM2 Trigger Divs - All divs (layers) whose id (name) starts with p7TBtrig
2. The MM2 Images - All images whose name (or id) starts with p7TBim
3. The MM2 SubMenu Divs - All divs (layers) whose id (name) starts with p7TBsub
Additionally, the system will also remove these related components:
1. The Menu Magic II JavaScript - If the system detects that you are using the linked
JavaScript file (as created by the Insert Menu Magic II) then it will remove the link to the
JavaScript file on your page. It will not delete the actual external JavaScript file. If the
system detects that the scripts are on your page, then those scripts will be removed.
2. The Menu Magic II event triggers - The system will remove any setMM2 and
trigMM2 events it finds on the <body> tag, onLoad event. Any other existing onLoad
events will not be affected.
The system will not attempt to remove any linked or embedded style sheet in order to pro-
tect any modifications you may have made. If you wish to remove the style sheet, you
must do so manually, using the Dreamweaver CSS Styles panel or Code View.
WARNING: Using the Remove Menu Magic II command will erase the entire menu—and its contents.

An Accessible DHTML Menu—Step 2 | 54

55 | Section IV – Remove Menu Magic II

REMOVING MENU MAGIC II

Open the page that contains the Menu Magic II menu you want to remove.
-Choose Commands→Studio VII→Remove Menu Magic II by PVII

FIGURE 61 SELECTING REMOVE MENU MAGIC II BY PVII

The Remove Menu Magic II window will open.

FIGURE 62

-Click Remove in the Remove Menu Magic II by PVII window to remove the menu.
That’s it—the menu and all its components are now removed from the page.

55 | Removing Menu Magic II

 Section V – Images | 56

Section V – Images

When you insert a Menu Magic II navigation system on your page, the associated graphic
files are placed in a folder called m2img in your site root. The editable Fireworks .PNG
file is placed in a Local_Files/Fireworks folder. Menu Magic II creates and manages
these folders for you.
The graphics can be edited in Fireworks by opening the relevant .PNG file, making your
changes, and then exporting the modified graphics to the m2img folder for use on your
pages. When you export the images, the original images stored in the m2img folder will
be overwritten and your edited images will appear on any web pages that contain the rele-
vant Menu Magic II Type/Style menu.
We’ll cover the export process in detail later on in this Image Guide.
While a complete Fireworks User Guide is beyond the scope of this tutorial, we’ve pro-
vided an overview of modifying the graphics used in the Menu Magic II kit to help you
familiarize with some features of Fireworks as well as to assist you in editing the graphics
for use in any site you may be developing.

BACK IT UP FOR POSTERITY

Before editing the graphic files, make a back-up copy of all the Menu Magic II .png files
in the Local_Files/Fireworks folder as an archive.

Back it Up for Posterity | 56

57 | Section V – Images

THE AVAILABLE MENU MAGIC II FIREWORKS PNGS

Menu Magic II comes with the following Fireworks images:

MENU TYPE: HORIZONTAL TAB BAR | STYLE THEME: BASIC

horizontal_basic.png

MENU TYPE: HORIZONTAL TAB BAR | STYLE THEME: BONUS

horizontal_bonus.png – contains the buttons
horizontal_bonus_parts.png – contains the background and/or other supporting images

MENU TYPE: DROPDOWN | STYLE THEME: BASIC

drop_basic.png – contains the buttons

MENU TYPE: DROPDOWN | STYLE THEME: BONUS

drop_bonus.png – contains the buttons
drop_bonus_parts.png – contains the background and/or other supporting images

MENU TYPE: VERTICAL FLYOUT | STYLE THEME: BASIC

vertical_basic.png – contains the buttons

MENU TYPE: VERTICAL FLYOUT | STYLE THEME: BONUS

vertical_bonus.png – contains the buttons
vertical_bonus_parts.png – contains the background and/or other supporting images

Note: These Fireworks images are placed in your local site folder when you use the Menu Magic II interface to insert the
particular menu that relates to the image(s).

-Open Fireworks

57 | The Available Menu Magic II Fireworks PNGs

 Section V – Images | 58

We’ll be using a copy of horizontal_basic.png for these examples. As the name implies,
this is the .png file used when the Horizontal Tab Bar Menu Type and the Basic Style
Theme options are selected.

FIGURE 63 OPEN .PNG FILE IN FIREWORKS

-Open horizontal_basic.png (it’s in the Local_Files/Fireworks folder of your Menu

Magic II site)
-Choose File→Save As…
-Name the file horizontal_basic_tutorial.png and save it in the Local_files/Fireworks
folder.

The Available Menu Magic II Fireworks PNGs | 58

59 | Section V – Images

UNDERSTANDING THE EDITABLE .PNG FILE

Before modifying the graphics, we’ll take a look at the .png file’s structure and layout.

FIREWORKS LAYERS
There are two layers within the .png file: Web Layer and Layer 1. Layer 1 holds the
graphical elements and the text. Web Layer holds the slices. Slices are the segments of the
file that will be exported as graphics. The slices overlay the graphical elements. To view
the Web Layer, click the small plus sign (+) at the left of the layer name to expand that
layer.

FIGURE 64 EXPANDED WEB LAYER

There is a slice for each of the six buttons on the Web Layer. Each slice has been given a
unique name that will be used when the slices are exported.

59 | Understanding the Editable .PNG File

 Section V – Images | 60

FIREWORKS FRAMES
There are three frames in our .png file, each frame holding all of the graphical elements
for a different button state.

FIGURE 65 FRAME CHANGE BY SELECTING ARROWS AT BOTTOM OF ACTIVE WINDOW

Frame 1 holds the default state images. Frame 2 holds the over state images, and frame 3
holds the down state images. The different frames can be accessed by selecting the Next
(Previous) arrows at the bottom of the active window or, by selecting a new frame using
the Frame selector at bottom of Layers and Frames panel.

FIGURE 66 FRAME CHANGE BY SELECTING NEW FRAME AT BOTTOM OF LAYERS AND FRAMES PANEL

Understanding the Editable .PNG File | 60

61 | Section V – Images

FIGURE 67 GRAPHICS ON FRAME 2

FIGURE 68 GRAPHICS ON FRAME 3

FIREWORKS SLICES
Slices stored on the Web Layer will generate an individual graphic for each of the three
Frames in the file. The slice names will determine the filenames of the three graphics pro-
duced by that slice. To distinguish between the graphics, the filenames will be amended to
include an underscore and the button state used by Menu Magic II. Let’s check the file-
name settings and make sure the correct ones are being used.
-Choose Files→HTML Setup from Fireworks’ main menu.
The HTML Setup window will open.

61 | Understanding the Editable .PNG File

 Section V – Images | 62

FIGURE 69 HTML SETUP AND SETTINGS

In the HTML Setup window, select the Document Specific tab.

-Set Frames to Underscore + Rollover (over, down, overdown)
-Click OK to close the interface.

Understanding the Editable .PNG File | 62

63 | Section V – Images

SLICE OPTIMIZATION
You can check (or set) the optimization for any image by selecting its slice and inspecting
the Optimization panel.
-On the Layers panel, click the plus (+) sign next to Web Layer to expand it
-Select hbscb6 in the Web Layer

FIGURE 70 REVIEWING OPTIMIZATION SETTINGS IN THE EXPANDED LAYERS PANEL

You can see that Button 6 has been optimized for Index Transparency with the white
background color of the canvas being set to transparent. Button 6 is typical of the other
buttons in the file.
-On the Layers panel, click the minus (-) sign next to Web Layer to collapse it (we will
not be making changes to the slices at this time).
Now that we’ve covered the basics of the .png file, let’s move on to customizing the text
and graphics.

63 | Understanding the Editable .PNG File

 Section V – Images | 64

MODIFYING THE TEXT ATTRIBUTES

-With horizontal_basic_tutorial.png open in Fireworks, select the Pointer tool from the
Tool Bar

FIGURE 71 POINTER TOOL

-Use the Pointer tool to select the text Button 1 on the first button.

FIGURE 72 BUTTON 1’S TEXT IS SELECTED AND ITS OBJECT IS HIGHLIGHTED IN THE LAYERS PANEL

With the text selected, the text object is highlighted in the Layers and Frames panel and
attributes of the text are displayed in the Property Inspector.

FIGURE 73 TEXT ATTRIBUTES ON THE PROPERTY INSPECTOR (ANNOTATED)

Attributes we’ve used on the sample button text are depicted in the above graphic. Other
attributes/properties have been left at default settings. You are able to change any attrib-
utes you’d like to customize the text to your preference.

Modifying the Text Attributes | 64

65 | Section V – Images

Changes made in the Property Inspector will be reflected on the selected Button 1 text.

Remember – Frames are independent of one another. Changes made on Frame 1 will not affect the other two frames.
We’ll visit those frames to make changes (if any) after Frame 1 has been completed.

We’ve changed the text color to #333333 by clicking the color box and selecting #333333
from the leftmost column of color chips.

FIGURE 74 SELECTING NEW FONT COLOR

-With Button 1 text still selected, press Ctrl+C (Edit→Copy) to copy it.

65 | Modifying the Text Attributes

 Section V – Images | 66

-Multi-select the remaining button labels by holding the Shift key while selecting them.

FIGURE 75 MULTI-SELECT

-Choose Edit→Paste Attributes to assign all of the attributes from the Button 1 text ob-
ject to the other five buttons.

CHANGING THE TEXT LABEL

-Using the Pointer tool, double-click the button text to enter Edit Mode
The cursor changes to an I-beam with a small arrow to indicate the text can now be di-
rectly edited.

FIGURE 76 CURSOR BECOMES I-BEAM WITH ARROW

-Change the button labels as needed for your web site.

Modifying the Text Attributes | 66

67 | Section V – Images

Depending on the width of the edited text, it may be necessary to realign things so the text
remains centered on the button. Using the Subselection tool from the Tool Bar, we can
Shift-select (multi-select) both the text and the button graphic to align those two elements
relative to one another.

FIGURE 77 SUBSELECTION TOOL

We’ve used the Subselection tool instead of the Pointer tool because the button graphic is “grouped” together with other
graphical elements that create the complete button. We want the alignment to match up with the colored background area
of the button, the Subselection tool allows us to pick out that one element without changing other graphical components of
the button.

-Make sure the Subselection tool is active

-Shift-Select both the text and its button object
With both elements selected, we can use Fireworks’ main menu to align the two elements.

The graphic is correct. Macromedia seems to

have reversed the alignment setting options.
Center Vertical will align the two elements
along the x-axis (horizontally), while Center
Horizontal will make the alignment along the y-
axis (vertically).

FIGURE 78 ALIGN THE ELEMENTS RELATIVE TO ONE ANOTHER

-Choose Modify→Align→Center Vertical

67 | Modifying the Text Attributes

 Section V – Images | 68

Repeat the above steps to Modify the Text Lettering for each of the button labels.

FIGURE 79 BUTTON LABELS MODIFIED

FIGURE 80 FRAME 2 BUTTON LABELS MODIFIED

FIGURE 81 FRAME 3 BUTTON LABELS MODIFIED

While each Frame is independent, it is important to remember that each frame must be checked for consistency… espe-
cially on button labels.

Modifying the Text Attributes | 68

69 | Section V – Images

MODIFYING THE GRAPHICAL ELEMENTS

Some objects in the .png file may be grouped together to make it easier to move them
about the screen. They need to be ungrouped to permit editing the individual elements.

FIGURE 82 GROUPED OBJECT SELECTED

To ungroup the items, select a group and choose Modify→Ungroup

FIGURE 83 MODIFY→UNGROUP

FIGURE 84 AFTER UNGROUPING, FOUR INDIVIDUAL ELEMENTS ARE REVEALED

69 | Modifying the Graphical Elements

 Section V – Images | 70

With the graphics ungrouped, we can see the button consists of four objects in addition to
the text we modified earlier (dimensions in parentheses):
1. Larger rectangle (W100 H20)
2. Horizontal line (W113 H1)
3. Smaller rectangle (W3 H6)
4. Small circle (W3 H3)
Frame 3 buttons have one additional object: a small rectangle that covers a portion of the
line providing the illusion that the button is part of the page itself. In the following dia-
gram, this rectangle’s white fill color has been changed to emphasize the positioning.

FIGURE 85 SMALL RECTANGLE COVERS PORTION OF LINE

Any or all of the individual objects can be modified to suit personal preferences or to
compliment colors being used on your web site. In addition to a fill color being applied on
the larger rectangle, the rectangle outline is accomplished via effects rather than a stroke
color. The Property Inspector identifies attributes and effects applied.

FIGURE 86 RECTANGLE PROPERTIES

Modifying the Graphical Elements | 70

71 | Section V – Images

The rectangle’s fill color is changed in the same way we changed the font color earlier
(Figure 5-13). Select the rectangle and click the color box to open the color table. Choose
a new color from the color table.

FIGURE 87 APPLYING NEW COLOR

Effects used on the object can be reviewed or modified by accessing information for that
effect. Information is displayed by clicking the small information icon (blue circle) to the
left of the effect name on the Property Inspector.

FIGURE 88 INFORMATION ICON

Angle 270º
FIGURE 89 EFFECT INFORMATION PANEL DISPLAYED

The three effects applied on the rectangle use Inner Shadow to create an outline on three
sides of the rectangle. Which side the outline appears on is determined by the angle used.
Since we are dealing with a rectangle, the angles are increments of 90 degrees. These are
the angles you’ll find by inspecting each of the three effects: 270º, 360º, and 180º.

Remember, each of the three frames is independent from each of the others. Changes made on one frame will not affect
the others. You can use the frame select arrows at bottom of active window (Figure 5-3) to review changes made to your
buttons and preview the button states.

71 | Modifying the Graphical Elements

 Section V – Images | 72

RESIZING THE GRAPHICS

Depending on your site layout and button labels being used, you may need to make
changes to the dimensions of your buttons. We’ll first cover the steps for reducing the but-
ton size and then cover how to increase the dimensions.

DECREASING DIMENSIONS
The diagram below illustrates the larger rectangle selected. The width has been changed
from 100 pixels to 80 pixels by replacing the number 100 with 80 in the Property Inspec-
tor W (width) field.

Note:
The new width is typed into the field labeled W. Pressing the Enter
key after making the change will assure the new setting sticks
We’ve not seen a problem with FWMX sticking with changes however;
there have been instances with FW4 of the changes not sticking
unless the Enter key had been pressed following the change.

FIGURE 90 REDUCING WIDTH OF SELECTED OBJECT TO 80 PIXELS

Since we are reducing the rectangle’s width by 20 pixels, we need to make a like reduction to the width of the line beneath
it. We also need to reposition the little circle 20 pixels left to maintain the relative proportions of the original buttons.

To change the line’s width, select it and change its W value in the Property Inspector W
to 93. The small circle would then need to be repositioned 20 pixels to the left (by reduc-
ing the X coordinate by 20).

Tip: You can move an object in 10 pixel incre-

ments by selecting it then holding the Shift key
down while pressing the Left or Right Arrow
keys (on your keyboard).

FIGURE 91 RESIZING AND REPOSITIONING OBJECTS

Resizing the Graphics | 72

73 | Section V – Images

Realign the button label text if needed—as you did earlier.

Repeat steps in Decreasing Dimensions for any button that needs to be reduced in size.
Make similar changes as needed on Frames 2 & 3. On Frame 3, be sure to adjust the
smaller rectangle that runs beneath the button (See figure 85) as needed to accommodate
the resized graphics.
Review the modified graphics using the Previous/Next arrows at the bottom of the active
window to make sure everything is aligned properly.

Tip: If a button (or a text label) seems to jump as you change frames, then you have an alignment adjustment to make.

INCREASING DIMENSIONS
When you increase a button’s width, you also need to reposition any objects to the right—
in order to provide room for the expanded button. For this example, we’ll change the text
(button label) of the second button to read: Section 2 is here, then adjust the button ele-
ments to suit the longer label.

FIGURE 92 EDITED BUTTON NOW OVERLAPS NEIGHBOR

To make room for the expansion, we’ll first increase the canvas width.
-Choose Modify→Canvas→Canvas Size

FIGURE 93

73 | Resizing the Graphics

 Section V – Images | 74

The Canvas Size window will open.

FIGURE 94 INCREASE CANVAS WIDTH

-Increase the canvas width to 800 pixels

-Set the upper-left position as the Anchor

Note: Using the upper-left Anchor position will anchor existing objects to the top left corner of the canvas and expand the
canvas to the right and down depending on the New Size values you enter.

-Shift-select all objects (elements) to the right of the button that will be widened. The ob-
jects can be selected directly on the canvas or in the Layers panel.

FIGURE 95 SHIFT-SELECT ALL OBJECTS TO THE RIGHT OF THE BUTTON THAT WILL BE MADE WIDER

Resizing the Graphics | 74

75 | Section V – Images

-On your keyboard, hold down the Shift key as you press the Right Arrow key four times
to move the selected objects 40 pixels to the right.

FIGURE 96 INCREASED SPACE BETWEEN THE SECOND AND THIRD BUTTONS

From this point, we will employ steps similar to the steps taken earlier for reducing a but-
ton’s width.
-Select the small circle at the right edge of the line beneath the second button
-Hold down your Shift key while pressing your right arrow key four times to move the
circle 40 pixels to the right
-Select the horizontal line below the button and increase its width setting in the Property
Inspector W field by 40 pixels (from 113 to 153)
-Select the main button rectangle and use the Property Inspector to increase its width
from 100 to 140 pixels
-Multi-select (Shift+Select using Pointer tool) the main button rectangle and its text label.
-Choose Modify→Align→Center Vertical

FIGURE 97 THE BUTTON IS RESIZED AND THE GAP CLOSED UP

Note: The techniques employed in this section can be used to increase the size of any of the other buttons.

Don’t forget to make a similar edit to the second button on Frames 2 & 3. On Frame 3, be
sure to adjust the small rectangle that covers the button’s bottom portion (See figure 85) as
needed.
Review the modified graphics using the Previous/Next arrows at the bottom of the active
window to make sure everything is aligned properly. Again—make sure there is no unex-
pected button jumping as you move from frame-to-frame.

75 | Resizing the Graphics

 Section V – Images | 76

EDITING SLICES
Earlier in this section (See figure 64), we briefly referenced the Web Layer, which stores
the document’s slices. Slices are used to define the areas of a Fireworks document to be
exported as web images (JPGs or GIFs). If the .PNG document does not contain slices, the
entire document is exported as a single image. Horizontal_basic_tutorial.png has one slice
for each of the six buttons. The same slice serves to define one image for each frame.
Slices can be viewed by selecting Show slices and hotspots on the Tool bar.

Note: Our document has 6 slices—one for

each button—and 3 frames. That means that
this document will yield 18 web images.

FIGURE 98 SHOW SLICES AND HOTSPOTS

If no changes have been made to the button dimensions, each slice will be positioned di-
rectly over a button and would not need to be repositioned. If the button dimensions have
changed (even one!), the slices would need to be modified to reflect the change.

FIGURE 99 SLICES ALIGN WITH GRAPHICS

Editing Slices | 76
77 | Section V – Images

If the buttons (or any graphic that is overlaid with a slice) have been resized, the slices
will need to be adjusted before exporting.

FIGURE 100 ONE SLICE NEEDS TO BE RESIZED AND SEVERAL OTHERS NEED TO BE REPOSITIONED

The red (default color) lines visible in Slice View are Slice Guide Lines. These lines can
be dragged for positioning. Position your cursor over the line until the cursor changes to
be arrows showing the direction of movement available for that Slice Guide line.

FIGURE 101 MODIFYING SLICE GUIDE LINE POSITION

Drag the line to the new position. We’ve increased the view to 200% (press Ctrl and the
plus (+) sign on your Numeric keypad) to aid in more precise positioning.

FIGURE 102 REPOSITIONED SLICE GUIDE

Repeat this procedure for each of the remaining lines that need to be repositioned.

FIGURE 103 SLICE GUIDES HAVE BEEN REPOSITIONED OVER BUTTONS

77 | Editing Slices
 Section V – Images | 78

As an alternative to dragging the Slice Guide lines, the slices can be resized using the
Property Inspector. Select the slice to be modified using the Pointer tool and enter new
figures into the W (width) or H (height) fields, as needed, in the Property Inspector. The
X (horizontal) field identifies the number of pixels from the left canvas edge the slice be-
gins.

FIGURE 104 CHANGING SLICE DIMENSIONS VIA PROPERTY INSPECTOR

Note: Slices are on the Web Layer, which overlays the entire document—no matter which frame you happen to be view-
ing at a given point in time. When you turn on Slices, they are locked on top of the canvas. As you switch frames, the
frames are switching, but the Slices remain fixed and static. When you are in slice-editing mode, you can switch between
frames to make sure everything is aligning properly. The Slice you edit on frame 3 is the same Slice that occupies the
same space on frames 1 and 2.

Editing Slices | 78
79 | Section V – Images

OPTIMIZING GRAPHICS
If the colors have been changed on one or more elements in the document, it may be nec-
essary to refresh or change the optimization settings on your slices. These settings affect
how the images that Fireworks exports will look on your web page.
-Open the Optimize panel
-Select one of your button slices
-Click on the Rebuild button located on the Optimize panel

FIGURE 105 OPTIMIZING GRAPHICS

Optimization should be tested for all three frames—especially if different frames have
different backgrounds. Here’s how to test:
-Select the Preview tab at the top of the active window
-Select each button slice (using Pointer tool) on the frame and inspect its settings in the
Optimize panel
-Use the Previous/Next arrows at the bottom of the active window to change frames, test-
ing each slice on each frame for consistency

FIGURE 106 PREVIEW OPTIMIZATION SETTINGS

79 | Optimizing Graphics
 Section V – Images | 80

EXPORTING GRAPHICS
In order to get web images into your web site (and thus into your web pages), you need to
export them. We’re going to aim the exported web images at the m2img folder created in
your site’s root by Menu Magic II.
-Select File→Export
-Browse to the m2img folder and make sure it is the folder that appears in the Save in box
atop the Export window

FIGURE 107 EXPORTING GRAPHICS

The m2img folder was created and populated with the original images from this Fire-
works document by Menu Magic II. It is okay to overwrite the existing files.
Should you use Menu Magic II to create a Horizontal Tab Bar/Basic menu, in your current Dreamweaver site, your new
edited images will not be overwritten. However, if you create a Horizontal Tab Bar/Basic Menu in another Dreamweaver
site, the original Menu Magic II images will be used.

-Save and close your Fireworks document

Note: The .png file should be saved after exporting since the Design Notes (part of the .png file) have been updated with
export path data when the graphics were exported.

Exporting Graphics | 80
81 | Section V – Images

AUTOMATICALLY REBUILDING YOUR MENU IN DREAMWEAVER

If you open a page that contains a Menu Magic II menu built with Type: Horizontal Tab
Bar and Theme: Basic, any buttons you’ve resized and exported back to the site will ap-
pear either squashed or stretched. To fix things, you simply need to run the Menu Magic II
modify system.

MODIFY MENU MAGIC II

Menu Magic II allows you to quickly rebuild a menu when images have been edited (or to
add or remove buttons). To rebuild your menu—
-Choose Modify→Studio VII→Modify Menu Magic II by PVII

FIGURE 108 MODIFY MENUMAGIC II WILL RECOGNIZE CHANGES TO GRAPHICS AND APPLY TO PAGE

81 | Automatically Rebuilding Your Menu in Dreamweaver

 Section V – Images | 82

The Modify Menu Magic II window will open.

FIGURE 109 THE MODIFY MENUMAGIC II WINDOW

-Make no changes in the window—Simply Click OK

The button sizes will be reset and their positions recalculated automatically. There is no
need to individually inspect and reset graphic dimensions! Nor do you need to manually
change submenu positioning! Menu Magic II takes your menu from the doldrums to
pizzazz in just a few clicks!

Note: If, after following this tutorial, you’d like to revert your menu images back to the original ones, close the file you are
working on, open Local_Files/Fireworks/horizontal_basic.png and export its images to your m2img folder. That’s why
you created a copy of the original PNG and named it horizontal_basic_tutorial.png to work through our tutorials ☺

Automatically Rebuilding Your Menu in Dreamweaver | 82

83 | Section V – Images

REMOVING BUTTONS IN FIREWORKS

Removing a button is as simple as deleting the Slice for that button in the .png file. As
covered earlier (Editing Slices), Fireworks Slices are used to define an area of the file to
be exported as a web image.

DELETING A SLICE
-Switch to Fireworks and Open horizontal_basic_tutorial.png
-Turn on View Slices (See figure 98)
-Select the slice to be removed using the Pointer tool (See figure 71) and press the Delete
button on your keyboard

Note: Deleting the slice will not remove graphics that have already been exported, but it will prevent the underlying
graphic from being exported.

Tip: The graphical elements that comprise the button can be left in your .png file in the event you may need them in the
future. If you do need them, simply create a new slice for it.

83 | Removing Buttons in Fireworks

 Section V – Images | 84

ADDING NEW BUTTONS IN FIREWORKS

We’re going to use Copy and Paste to duplicate existing buttons and slices. The technique
is easy and very efficient. Once the buttons have been duplicated, you’ll modify the button
label text as described in Changing the Text Label, name the slices using the Menu
Magic II convention, export the new buttons to your Dreamweaver site, and use the Mod-
ify Menu Magic II system to add them to your existing menu.

-Open the original horizontal_basic.png in your Local_Files/Fireworks folder

-Choose File→Save As…
-Name the new file: horizontal_basic_tutorial02.png

Tip: You can use horizontal_basic_tutorial.png if you’d like, but your images will not match our screen captures.

-Use the Pointer tool to draw a selection box around all of the objects on the canvas

Note: You can also use the Layers panel to Shift-Select all the objects if you’d prefer.

-With all objects selected, press Ctrl+C to Copy them to the clipboard
-Immediately Press Ctrl+V to Paste them on top of the originals—but DO NOT move
your cursor yet!

FIGURE 110 SELECT ALL OBJECTS

Adding New Buttons in Fireworks | 84

85 | Section V – Images

CREATING THE NEW BUTTON IMAGES

-With the items still selected, hold down the Shift Key and press your Down Arrow Key
6 times to move the new objects 60 pixels lower on the canvas than the originals.

FIGURE 111 DUPLICATED GRAPHICS REPOSITIONED ON CANVAS

Tip: For Menu Magic II Theme sets that employ background images, make sure you copy the background elements, as
well—because the buttons are designed to precisely line up with the background.

Repeat the above steps to duplicate and position new buttons on each of the remaining
two frames.

Tip: Frames can be changed by using the Previous/Next arrows at bottom of active window or by selecting Frames tab in
Layers and Frames panel and selecting a new frame — or by clicking onto the Frame selector button at bottom of Layers
and Frames panel.

85 | Adding New Buttons in Fireworks

 Section V – Images | 86

CREATING AND POSITIONING NEW SLICES

After buttons have been duplicated and positioned on each of the three layers, we’ll need
to duplicate and position the Slices in a similar manner.

-Select View Slices and Hotspots (See figure 98)

-Expand the Web Layer
-Shift-Select all six slices
-Press Ctrl+C to Copy them
-Press Ctrl+V to Paste duplicates (but do not move your mouse!)
-Press and hold down your Shift Key while pressing your Down Arrow Key six times to
position the new slices over the new buttons

FIGURE 112 DUPLICATED SLICES

Adding New Buttons in Fireworks | 86

87 | Section V – Images

NAMING NEW SLICES

With the new slices positioned, the next task will be to name each one. As can be seen in
the following diagram, each of the new slices is simply identified as “Slice” and we’ve
already learned in Understanding the .png File (See figure 69) that filenames are based on
Slice names. We’ll need to rename the slices in keeping with the naming conventions al-
ready being used.
The naming convention is not a requirement of Menu Magic II. We are continuing with the same naming convention as a
matter of organization and convenience. Menu Magic II does need the _over and _down filename appendages that are
specified in the HTML Setup described (Figure 5-7 and related text) earlier, but the slice name can be whatever you’d like.
If changing the slice name on graphics already used by Menu Magic II, it will be necessary to use the Browse feature in the
Modify Menu Magic II window to select the newly named graphic.

-Click an empty area of the canvas to deselect the new slices

-Select the first new slice using the Pointer tool
-In the Property Inspector, type the name hbscb7 in the box directly below the word Slice

FIGURE 113 NAME THE SLICE IN PROPERTY INSPECTOR FIELD

Repeat these steps (selecting, naming) for the remaining slices, incrementing the number
at the end of the name sequentially for each slice:
hbscb8, hbscb9, hbscb10, etc.

87 | Adding New Buttons in Fireworks

 Section V – Images | 88

Alternately, you can double-click the object name in the Layers panel to open a field for
naming the slice.

FIGURE 114 NAMING SLICES IN THE LAYERS PANEL

Deactivate Slice View by clicking onto the Hide slices and hotspots icon in the Tool Bar
after each of the slices has been named.

FIGURE 115 HIDE SLICES AND HOTSPOTS ICON

You’re now ready to modify the text labels on the buttons as described in Changing the
Text Label earlier in this section.

Adding New Buttons in Fireworks | 88

89 | Section V – Images

NOTES ON STEPS USED TO DUPLICATE THE GRAPHICS

We used Copy and Paste instead of Clone so all objects would retain their grouping prop-
erties in the Layers panel (just like the original graphics). With Cloning, the new objects
intermix with the existing objects in the Layers panel. Using Copy and Paste keeps the
groups clustered (the Figure below shows a comparison).

FIGURE 116 CLONE AND COPY/PASTE COMPARISON

Using Copy and Paste also ensured that each new slice retained the Optimization settings
of the originals.

89 | Adding New Buttons in Fireworks

 Section VI – CSS | 90

Section VI – CSS

CSS is used to style the menus that are built on your page. Once Menu Magic II creates
the style sheet(s) for you, you can edit them as you see fit. Menu Magic II will not over-
write existing style sheets.
To edit any of the style sheets, you can use Dreamweaver MX’s built-in CSS Editor with full confidence. If you have
Dreamweaver 4, we highly recommend using a third-party CSS Editor.

Menu Magic II has two ways it deals with CSS:

1. If you Don’t Use a Theme: Embedded Style Sheets
2. If you Do Use a Theme: External Style Sheets

EMBEDDED CSS FOR MENUS NOT USING MENU MAGIC II THEMES

If you don’t use a Menu Magic II Theme, the system will embed a basic style sheet in the
<head> region of your page. Here is what that style sheet looks like:
<style type="text/css">
<!--
.p7tbsub {background-color: #FFFFFF; border: .1px solid #FFFFFF; font-size: 12px;
font-family: Arial, Helvetica, sans-serif; layer-background-color: #FFFFFF;}
.p7tbsub p {margin: 0px; padding: 6px 12px 12px 0px;}
.p7tbsub a:link {color: #000000;}
.p7tbsub a:visited {color: #666666;}
.p7tbsub a:hover {color: #FF9900;}
.p7tbsub a:active {color: #FF9900;}
.p7tbdn {color: #FF9900 !important; font-weight: bold;}
-->
</style>

Let’s review the individual rules—

Embedded CSS for Menus Not Using Menu Magic II Themes | 90

91 | Section VI – CSS

.P7TBSUB
The .p7tbsub class is applied to all submenu DIVs (Layers).
.p7tbsub {background-color: #FFFFFF; layer-background-color: #FFFFFF; border: .1px
solid #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
background-color: Sets submenu Layer background color. Default is white (#FFFFFF)
layer-background-color: Sets submenu Layer background color for Netscape 4. This is a NN4 proprie-
tary property that is necessary if you wish to support that browser.
border: We need to declare a token border width (in this case 1/10th pixel) in order for Netscape 4 to
render the Layer correctly. Edit this rule if you wish to have actual borders around your submenus. For
example, 1px solid #000000 will render a 1-pixel wide black border.
font-family: Set the type face for all text within the submenu layers.
font-size: Set the type size for all text within the submenu layers.

.P7TBSUB P
This tag selector affects all paragraphs within all submenu DIVs
.p7tbsub p {margin: 0px; padding: 6px 12px 12px 0px;}
margin: Sets the margin on all 4 sides of each paragraph to zero. We suggest you leave this property
alone unless you are an advanced CSS author.
padding: This property sets offset for all 4 sides of each paragraph in the submenu. It is written in CSS
shorthand. The 4 values represent the 4 sides of the paragraph in clockwise order from top to left: Top,
Right, Bottom, Left. These values provide some offset in a horizontal tab bar menu so that when users
move their mouse off of a text link, there is some room before the menu is hidden.

.P7TBSUB A:LINK
The default link color for all links inside the submenu DIVs
.p7tbsub a:link {color: #000000;}
The default link color is set to black (#000000)

.P7TBSUB A:VISITED
The visited link color for all links inside the submenu DIVs
.p7tbsub a:visited {color: #666666;}
The visited link color is set to dark gray (#666666)

91 | Embedded CSS for Menus Not Using Menu Magic II Themes

 Section VI – CSS | 92

.P7TBSUB A:HOVER
The hovered link color for all links inside the submenu DIVs
.p7tbsub a:hover {color: #FF9900;}
The visited link color is set to dark orange (#FF9900)

.P7TBSUB A:ACTIVE
The active link color for all links inside the submenu DIVs
.p7tbsub a:active {color: #FF9900;}
The visited link color is set to dark orange (#FF9900)

.P7TBDN
The down state link
{color: #FF9900 !important; font-weight: bold;}
This rule styles the down state link you optionally select. It’s set to the same color as the hover/active link
(dark orange) and is set to a bold weight to help it stand out. The !important attribute instructs modern
browsers to give the color property more specificity—that is, it will override potentially conflicting styles.

Important: While you can edit these rules as you wish, do not change their names!

Embedded CSS for Menus Not Using Menu Magic II Themes | 92

93 | Section VI – CSS

EXTERNAL CSS FOR MENUS USING MENU MAGIC II THEMES

If you use a Menu Magic II Theme, the system will write and link optimized style sheets
to your page. Here is what the style sheet for the Dropdown Menu Type using the Bonus
Style Theme looks like:
@import url("d_bonusv5.css");
.p7tbsub {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #FFFFFF;
layer-background-color: #FFFFFF; /*for Netscape 4*/
border: 1px solid #999999; /*for hairline border around submenus*/
}
.p7tbsub p {
padding: 3px 12px 0px 6px;
margin: 0px;
}
.p7tbsub a:link {
color: #666666;
text-decoration: underline;
}
.p7tbsub a:visited {
color: #666666;
}
.p7tbsub a:hover {
color: #6666CC;
background-color: #EEEEEE;
}
.p7tbsub a:active {
color: #6666CC;
background-color: #EEEEEE;
}
.p7tbdn {
color: #9999CC !important;
font-weight: bold;
}
body {
background-image: url(m2img/dbn_pbg.jpg);
/* Note: Make URL Absolute for Navigator 4 compatibility*/
background-repeat: repeat-x;
background-color: #FFFFFF;
}

Let’s review—

93 | External CSS for Menus Using Menu Magic II Themes

 Section VI – CSS | 94

The rule names are identical to the embedded style sheet, with these exceptions:
@import url("d_bonusv5.css");
body {
background-image: url(m2img/dbn_pbg.jpg);
/* Note: Make URL Absolute for Navigator 4 compatibility*/
background-repeat: repeat-x;
background-color: #FFFFFF;
}
.p7tbsub a:hover {
color: #6666CC;
background-color: #EEEEEE;
}
.p7tbsub a:active {
color: #6666CC;
background-color: #EEEEEE;
}
Let’s review these rules in a little more detail—

BODY
background-image: url(m2img/dbn_pbg.jpg);
/* Note: Make URL Absolute for Navigator 4 compatibility*/
background-repeat: repeat-x;
background-color: #FFFFFF;
The Bonus Themes all have background images that serve to tie together the interface elements.
background-image: url(m2img/dbn_pbg.jpg): Sets the page background image. The comment below
it is a reminder to change the URL from a document relative path (msimg/dbn_pgb.jpg) to an absolute
path (http://www.yoursite.com/ msimg/dbn_pgb.jpg) before uploading the CSS file to your server. Why?
Because Netscape 4 reads paths within external style sheets as relative to the page that CSS file is
linked to, rather than relative to the CSS file.
background-repeat: repeat-x: Instructs the browser to place the image at the top left corner of the
screen and to tile it from left to right only. So, a background image that is 60 pixels wide by 100 pixels
high, will repeat every 60 pixels left-to-right, but will not repeat top-to-bottom. The result would be a 100
pixel-high band that stretches across the entire width of the page.
background-color: Sets the page background color. In the presence of our x-tiling background image,
the color would fill in all parts of the window not covered by the image.

.P7TBSUB A:HOVER AND .P7TBSUB A:ACTIVE

color: #6666CC;
background-color: #EEEEEE;
The color sets the default text color for each of the links in both hover (as mouse is hovered over) and
active (when mouse is pressed down) states. The background color (#EEEEEE) sets the background of
each link to light gray as you hover your mouse over it or press your mouse down.

External CSS for Menus Using Menu Magic II Themes | 94

95 | Section VI – CSS

@IMPORT
url("d_bonusv5.css");
This directive instructs modern browsers (version 5 and higher) to import a special style sheet
(d_bonusv5.css) that contains more advanced styles that would cause problems in older browsers. Older
browsers completely ignore the directive and read only the main linked style sheet. When importing a
style sheet from within another style sheet, the @import directive must always come first.
Let’s see what’s inside the Imported Style Sheet:
.p7tbsub {
font-size: 80% !important;
border-top: 0px !important;
}
.p7tbsub p {
padding: 0 !important;
}
.p7tbsub a {
background-color: #FFFFFF;
display: block;
padding: 2px 6px 2px 20px;
text-decoration: none !important;
width: 100%; /*IE 5 PC reads this*/
voice-family: "\"}\"";
voice-family: inherit;
width:122px; /*IE5Mac IE6 Mozilla Opera read this*/
}
Now let’s review the rules—
.p7tbsub
font-size: 80% !important;
border-top: 0px !important;
font-size: For version 5 and higher browsers, we set font size to a relative value (80%), which enables
users to easily resize text in their browsers. Because the linked style sheet sets a fixed size (12px), we
need to use !important to override it. Why? Because the imported style sheet comes before the rules in
the linked style sheet. Browsers read rules from top to bottom and competing rules that come later are
always given precedence—unless we use the !important attribute.
border-top: The linked style sheet describes a 1px gray border on all four sides of our submenus. Net-
scape 4 only supports 4-sided borders. Version 5 browsers are capable of rendering borders on a side-
by-side basis. By eliminating the top border of our submenu, we can make it abut to the bottom of our
image buttons in a much more finished-looking way. Preview a page that uses a Dropdown menu with
the Bonus Theme in Netscape 4 and in a newer browser to see the difference. Again, we use !important
to make sure it overrides the 4-sided border set in the linked sheet. We are turning off just the top border
(setting it to 0px), the other three sides are being handled by the rule in the linked sheet.

95 | External CSS for Menus Using Menu Magic II Themes

 Section VI – CSS | 96

.p7tbsub p
padding: 0 !important;
padding: We need to set padding to zero because the offsets between the submenu links in version 5
browsers will be handled by the link style (p7tbsub a). We use !important to give precedence to this
value.
.p7tbsub a
background-color: #FFFFFF;
display: block;
padding: 2px 6px 2px 20px;
text-decoration: none !important;
width: 100%; /*IE 5 PC reads this*/
voice-family: "\"}\"";
voice-family: inherit;
width:122px; /*IE5Mac IE6 Mozilla Opera read this*/
background-color: Sets the background color of the <a> tag (the actual text links).
display: Sets the <a> tag to a block. That means, the links span the entire width of the submenu Layer
and the entire width is “clickable”. This makes our links appear and behave more like images than text.
padding: Creates offset on all four sides of each link. The CSS shorthand values start with Top and pro-
ceed clockwise to Left (Top, Right, Bottom, Left).

Note: the first 3 properties in this rule do not require !important because they have no like counterparts in the linked style
sheet to override.

text-decoration: Since the linked style sheet sets links to be underlined (text-decoration: underline), and
we want version 5 browsers to not underline links, we need to override it by resetting the value to none
and marking it !important.
width: IE5 on the PC needs the <a> tag width set to 100% in order for the entire width of the link to be
clickable. If IE5 were allowed to read the second width value (width: 122px), it would subtract the left and
right padding values (6px + 20px) from the width and the link would be shortened to 96px wide. A setting
of 100%, causes IE5 to use the entire width of the Layer (which is set to 148px directly on its <div> tag).
voice family: This is a hack that hides the second width property that comes below it, from IE5-PC. IE6,
as well as IE5-Mac, Opera, and Mozilla (Netscape 6 and 7) read the second width and, because it
comes later, it overrides the first width value. These modern browsers add padding to an element’s box
width. So, if we set the <a> tag to 122px wide, then add its left and right padding (6px + 20px), we come
up with 148px—which is precisely the width of our submenu Layers.

Important! When you need to edit the width of your submenus, remember to set both width values: the one before the
Voice Family hack and the one after it.

Note: to read more about this hack and about the IE5 box model bug it fixes, visit the hack’s author,
Tantek, at: http://www.tantek.com/CSS/Examples/boxmodelhack.html

External CSS for Menus Using Menu Magic II Themes | 96

97 | Section VI – CSS

DOCTYPES
The first line of every new document you create with Dreamweaver MX contains the
DOCTYPE1 (Document Type). Browsers use the doctype to determine how strictly to in-
terpret certain parts of the code. This is especially important for pages that contain
JavaScript and/or CSS. For some reason, Macromedia chose not to include a full doctype.
A DOCTYPE that includes a full URL (a complete web address) tells modern browsers to
render your page in standards–compliant mode thus treating your HTML, CSS, and
JavaScript in a predictable way.
By default, Dreamweaver MX inserts2 an incomplete DOCTYPE (no URL), which puts
modern browsers into Quirks mode. The browser will attempt to analyze your page in a
backwards-compatible way—rendering CSS and HTML as if for an older browser. Obvi-
ously, this is not a good thing.
Note: The work pages we’ve provided include a full DOCTYPE.

It would be good if we could store our new DOCTYPE inside Dreamweaver so it could be
easily accessed whenever needed. Dreamweaver MX has a feature called “Snippets” that
is tailor-made for this task.
Copy the text below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Note: Dreamweaver 4 does not have a built-in Snippets feature. Dreamweaver 4 users will need to copy and paste the
DOCTYPE manually.

1
Doctype is short for Document Type, which in turn is short for: Document Type Declaration (DTD). We are using an HTML 4.01 Tran-
sitional Doctype. The “Transitional” part means that certain tag properties are allowed in order to achieve compatibility with older (ver-
sion 4 ) browsers. You can copy the Doctype from within Acrobat Reader by clicking the “T” icon on Acrobat’s toolbar. If the icon is
not present, select Window→Toolbars→Basic Tools (Acrobat 5 or higher).
2
If you set up a Server Model (Cold Fusion, ASP, etc) in your Site Definition, Dreamweaver will not enter any Doctype at all.

97 | Doctypes
 Section VI – CSS | 98

CREATING A SNIPPET
-Open the Snippets panel (Shift + F9) or click the Snippets tab on your Files panel group.
Click the New Folder icon on the panel’s lower right border. It’s the first icon in the row
and resembles a file folder.

If you’re wondering why we have different

Snippets folders than Dreamweaver MX installs
by default, it’s because we removed the ones
we don’t use and added some new ones.

FIGURE 117

Note: We want the new folder to be in the root of your Snippets directory. Make sure that no folder in the Snippets panel is
selected (highlighted). If one of the folders is highlighted (even if the highlight appears grayed out), click the Name Title
Bar above the folders list in the Snippets panel twice to deselect the folder before creating a new folder.

-A new untitled folder will appear. Overwrite the word untitled with doctypes.

FIGURE 118- WE’VE NAMED OUR NEW FOLDER

Doctypes | 98
99 | Section VI – CSS

-With the doctype folder selected (highlighted), click the New Snippet icon (it’s the one
next to the New Folder icon) on the bottom right border of the panel.
-The Snippet window will open.
-In the Name box, type: 401 Transitional
-In the Description Box, type: Complete 4.01 transitional doctype
-For Snippet Type, enable (click) the Insert Block radio button
-Paste your copied doctype into the Insert Code box
Mac OSX users will have to type the Snippet code, as Dreamweaver for OSX seems not to have support for pasting in the
Snippets dialog.

-For Preview Type, enable the Code radio button

FIGURE 119

-Click OK

99 | Doctypes
 Section VI – CSS | 100

INSERTING A SNIPPET
Now that we’ve created our Snippet, let’s learn how to add a code Snippet to our page.
-Create a new Dreamweaver HTML document.
-Switch to Code View by clicking the Code View icon on the main toolbar or by choosing
View→ Code.
You should see code similar to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

</body>
</html>

-Delete the existing Doctype, then position your cursor on the now-blank line at the very
top of the code window, just above the opening <html> tag1.

FIGURE 120 - CURSOR ON LINE 1

1
A Doctype must go at the top of the page as its purpose is to inform browsers how the page that follows should be interpreted.

Doctypes | 100
101 | Section VI – CSS

-Open the Snippets panel

-Click the plus (+) sign to the left of the new doctypes folder you created
-Select the 401 transitional doctype Snippet
-Click the Insert button on the lower left edge of the Snippets panel

FIGURE 121- INSERTING THE SNIPPET

The code (doctype) will appear on the new line you created in your source code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

</body>
</html>

Congratulations! Now you’re a Snippet Maker first class.

101 | Doctypes
 Section VI – CSS | 102

CSS: FOR FURTHER READING

To learn more about CSS, you may want to look into our E-Book: Dreamweaver MX:
Building on Solid Foundations. Read about and download a sample chapter here:
http://www.projectseven.com/foundations
Another great source for CSS information is:
http://www.meyerweb.com/eric/css

CSS: For Further Reading | 102

103 | Section VII – Advanced Techniques

Section VII – Advanced Techniques

In this section, we’ll cover some advanced techniques that you might want to use in the
development of your Menu Magic II menu system.

CHANGING THE SWAP IMAGE NAMING CONVENTION

The images used for your menu can be named anything you like. However, you must fol-
low a naming convention for the swap images. For example, if your button image name is
home.gif, then the image that the user sees when they mouse over the button must be
named home_over.gif and the down state button must be named home_down.gif.
However, if you would like to change the naming convention for the over and down im-
ages the Menu Magic II JavaScript allows for this. Let’s say that you want to use the
Fireworks default naming for images in frames and your home.gif is still your image.
Then the mouse over image would be home_f2.gif and the down state button would be
home_f3.gif.
-Open the page that contains the Menu Magic II JavaScript. This will be the mm2script.js
file in the m2scripts folder of your site. If you created the menu manually, the scripts will
most likely be on the same page as the menu, in the <script> portion of the page's <head>
region.
-Find the P7_setMM2() function on the page. The first 4 lines of the function will look
like this:
function P7_setMM2(){ //v2.0 by PVII
//set the image over and down name convention
document.p7TabOver=”_over”;
document.p7TabDown=”_down”;
The third and fourth lines contain the naming convention for the swap images. As you
can see, the default is _over and _down.
-To change the naming convention in our scenario we will need to change _over to _f2
and _down to _f3.
function P7_setMM2(){ //v2.0 by PVII
//set the image over and down name convention
document.p7TabOver=”_f2”;
document.p7TabDown=”_f3”;

NOTE: You can use any names that you like. Just make sure that you keep the quotation marks around the names.

103 | Changing the Swap Image Naming Convention

 Section VII – Advanced Techniques | 104

CREATING A MENU WITHOUT USING A THEME

If you would like to create a menu manually instead of using the automatic features of
Menu Magic II the process is very easy.
-Create a new HTML document.
-Add a correct DOCTYPE
-Name the new page manual_menu.htm and save it in the MM II Tutorial folder.
In manual_menu.htm—
-Choose Insert→Studio VII→ Menu Magic II by PVII
The Insert Menu Magic II window will open.

FIGURE 122 SELECTING DROPDOWN

-Select the Menu Type: Dropdown from the Menu Type selection list.

Creating a Menu Without Using a Theme | 104

105 | Section VII – Advanced Techniques

-Click the Browse in the Insert Menu Magic II window.

The Select Image Source window will open.

FIGURE 123 SELECTING THE FIRST IMAGE

-Browse to the MM II Tutorial/images folder

Note: You can use any images you want to.

-Select dbnb1.gif
-Click OK.
NOTE: It is important that you select the default image for the button. Do not select the over or down state buttons.

The Select Image Source window will close.

Back in the Insert Menu Magic II window—

105 | Creating a Menu Without Using a Theme

 Section VII – Advanced Techniques | 106

FIGURE 124 CLICKING THE ADD BUTTON

-Click the Add button to add another button

The Select Image Source window will open again.

FIGURE 125 SELECTING THE SECOND IMAGE

-Select dbnb2.gif
-Click OK.

Creating a Menu Without Using a Theme | 106

107 | Section VII – Advanced Techniques

Repeat the steps above to add the dbnb3.gif and dbnb4.gif

FIGURE 126 STYLE THEME SET TO NONE

-Leave Style Theme set to None.

107 | Creating a Menu Without Using a Theme

 Section VII – Advanced Techniques | 108

FIGURE 127 SELECTING OVER AND DOWN

-Set Swap Option to Use Over as Down (you can choose whatever option you want)

Creating a Menu Without Using a Theme | 108

109 | Section VII – Advanced Techniques

FIGURE 128 SELECTING PARAGRAPH <P>

-Set Link Separator to Paragraph <p> (you can choose whatever option you want)

109 | Creating a Menu Without Using a Theme

 Section VII – Advanced Techniques | 110

FIGURE 129 LEFT AND TOP POSITIONS AND THE SUBMENU WIDTH

-Set Left Position to: 36

-Set Top Position to: 71
-Set Submenu Width to: 148

Creating a Menu Without Using a Theme | 110

111 | Section VII – Advanced Techniques

FIGURE 130 SETTING DEFAULT BUTTON

Make sure that the Use Default Button checkbox is checked if you would like a default
button for your page (we are using the first button as our Default).
-Select the first button in the Menu Images list and click Set Default Button.

NOTE: After you click Set Default Button, the text Default Button will appear in front of your image name. If you inadver-
tently select the wrong button, just click on the new button name and click Set Default Button again.

Click in the Persistent Submenu checkbox if you would like to have the submenu that
relates to the Default Button be persistent. This is not recommended for a dropdown
menu, as the submenu will probably obscure your page content.
Click in the Down State Text Link checkbox if you would like to have a submenu link
use a different CSS class if it is the selected link (we’re selecting this option). Menu
Magic II will use Sublink 1-2 as the default. You can change this after you insert the
menu by using the Set Menu Magic II Behavior.
Click in the Auto Submenu Width check box if you want the system to automatically set
the submenu width for the specified menu type. We’re not selecting this option. When
this box is checked, the Submenu Width box is disabled.

111 | Creating a Menu Without Using a Theme

 Section VII – Advanced Techniques | 112

Click in the No Submenu (NavBar Only) check box if you want to use this menu as a
navigation bar only. That is, the menus will not have submenus. We’re not selecting this
option.
-Click OK.
Menu Magic II will now create your menu. If you look in the Site panel you will see that
Menu Magic II has created a folder called m2scripts, and inside of that folder it created a
JavaScript file named mm2scripts.js, which was linked to your page.

Note: The m2scripts folder and the mm2scripts.js file were actually created the first time you inserted a Menu Magic II
menu on any page within your current Dreamweaver site.

If you look at the page in Code View, you will see that Menu Magic II also added the de-
fault CSS styles for your submenu.
<style type="text/css">
<!--
.p7tbsub {background-color: #FFFFFF; border: .1px solid #FFFFFF; font-size: 12px;
font-family: Arial, Helvetica, sans-serif; layer-background-color: #FFFFFF;}
.p7tbsub p {margin: 0px; padding: 6px 12px 12px 0px;}
.p7tbsub a:link {color: #000000;}
.p7tbsub a:visited {color: #666666;}
.p7tbsub a:hover {color: #FF9900;}
.p7tbsub a:active {color: #FF9900;}
.p7tbdn {color: #FF9900 !important; font-weight: bold;}
-->
</style>

Note: When you choose a Theme, Menu Magic II writes external CSS files and links them to your page.

-Click F12 to preview your new menu.

Creating a Menu Without Using a Theme | 112

113 | Appendix I – Menu Magic II Help System

Appendix I – Menu Magic II Help System

OVERVIEW
The Menu Magic II Extension Kit by PVII is a powerful Dreamweaver tool that enables
you to quickly build and manage a variety of appealing DHTML menus in seconds. Sim-
ply select one of the pre-defined menu types, choose one of the built-in Themes or point to
your own button images... Menu Magic II does the rest!
The Menu Magic II system includes these commands and behaviors to allow you to con-
trol every aspect of the menu system:

INSERT MENU MAGIC II

You begin building the menu by selecting:
Insert→Studio VII→MenuMagic II by PVII
The interface will allow you to choose from one of the three different menu types and will
automatically preset all of the option settings appropriate for the Menu Type you selected.
Next, you can choose a pre-defined menu Theme and simply click OK to build the
menu—or you can select your own menu images and set any of the menu options to create
your custom menu.

MODIFY MENU MAGIC II

You can easily modify an existing menu on your page at any time by selecting:
Modify→Studio VII→MenuMagic II by PVII
The system will recognize the menu and automatically populate the interface options
based on the existing menu. The system will allow you to add, delete, or reposition the
menu sections and you can change the image file associated with each menu button at any
time. Most of the menu options are available and can be changed to suit your needs. You
can even change the Menu Type and page position to totally alter the way the menu looks
and functions... all while preserving your existing menu content.

113 | Overview
 Appendix I – Menu Magic II Help System | 114

REMOVE MENU MAGIC II

Menu Magic II includes a Remove feature that allows you to quickly remove an existing
Menu Magic II system from your page. This facility allows for easy removal when simply
prototyping pages or when a total redesign is necessary. Simply Choose:
Commands→Studio VII→Remove Menu Magic II by PVII to open the Remove inter-
face, then just click Remove to completely remove the menu from your page.

SET MENU MAGIC II

This behavior enables you to modify the functional aspects of the Menu Magic II system
on individual pages and is automatically created when the menu is first built. You can
specify the Default button and related functionality for each page by adjusting the settings
using this behavior. You can also use this behavior to stitch together a working Menu
Magic II menu if you are creating the menu components manually.

TRIGGER MENU MAGIC II

This behavior is used to trigger all of the menu actions and is automatically created when
the menu is first built. Trigger Menu Magic II places the menu into its desired working
(default) state, based on the menu options defined in the Set Menu Magic II behavior,
when the page first loads. The behavior also handles all of the menu button trigger events.
In other words, it's what makes a properly set up menu actually work!

Overview | 114
115 | Appendix I – Menu Magic II Help System

OPTIONAL ADVANCED FEATURES

SWAP IMAGE NAMING CONVENTION

The naming convention used to identify the default, over, and down images is user-
definable to allow synchronizing with your image editor's capabilities. Accept our defaults
or make the changes outlined in this reference file.

PRESERVING YOUR CODE TWEAKS

If you make custom modifications to the Menu Magic II JavaScript, this reference will
show you how to easily shield your modified code from being overwritten.

THEMES
A very powerful feature of Menu Magic II is its ability to produce fully styled, profes-
sionally designed Theme Menus with just two clicks! Select a theme and the Menu Magic
II interface is automatically populated with images and option settings are perfectly set.
Just click OK and the menu is instantly built on your page. Of course, you can always
build your menu manually by choosing each button image and setting the options your-
self.
Additional Menu Magic II ThemePaks are available and will add more themes to the list
for you to use.

115 | Optional Advanced Features

 Appendix I – Menu Magic II Help System | 116

INSERT MENU MAGIC II

Menu Magic II enables you to build a variety of appealing DHTML menus with just a few
mouse clicks in an intuitive graphical interface. Click OK and the menu of your choice is
instantly (and automatically) built on your Dreamweaver page. The Menu Magic system
does it all for you... even to the extent of creating and linking the appropriate CSS and
JavaScript files. If you choose a Menu Magic II Theme, the automation is even more dra-
matic (more on that later).
Menu Magic II menus are fully editable in Dreamweaver. That is, they appear on your
screen as traditional "Layers" allowing you to edit them as you wish, using Dream-
weaver's full editing capabilities. Likewise, the CSS that styles the menu is fully editable
allowing you to customize the look of your menu at will.
The Menu Magic II system includes a complete online help system and these Dream-
weaver Commands and Behaviors to allow you to control every aspect of the menu sys-
tem:
1. Insert Menu Magic II - Creates a new menu
2. Modify Menu Magic II - Modifies an existing menu
3. Remove Menu Magic II - Quickly removes the menu (and all its components)
from your page
4. Set Menu Magic II - Controls how the menu functions on an individual page
5. Trigger Menu Magic II - Controls which Submenu appears when a button is trig-
gered (and/or when the page loads)

OVERVIEW
The menu creation process is controlled by the Insert Menu Magic II interface.
Choose Insert→Studio VII→MenuMagic II by PVII
The interface will open and you can choose a professionally designed Theme or you can
build a custom menu by selecting your own button images.
Note: If you already have an existing Menu Magic II menu on the page, it will be detected and Menu Magic II will auto-
matically switch you to the Modify interface.

Insert Menu Magic II | 116

117 | Appendix I – Menu Magic II Help System

To begin building your menu, the first choice to make is the Menu Type:
1. Horizontal Tab Bar
2. Dropdown
3. Vertical Flyout
Menu Magic II can create any of these menu types and will automatically preset all of the
option settings appropriate for the Menu Type you selected. Next, you can choose a pre-
defined menu Theme and simply click OK to build the menu... or you can select your own
menu images and set any of the menu options to create your custom menu.

THE CREATE MENU PROCESS:

1. Choose Insert→Studio VII→MenuMagic II by PVII to open the interface.
2. Select a Menu Type.
3. Select a Style Theme or click the Add button to select your button images.
4. Select or set any menu options you desire.
5. Click OK to build the completed menu.

117 | Insert Menu Magic II

 Appendix I – Menu Magic II Help System | 118

THE INTERFACE
The Insert Menu Magic II interface allows you to quickly and easily set all of the func-
tional parameters of the new menu. Simply browse to your images, or use the Style Theme
selector to choose a design, then set any additional options and click OK.

FIGURE 131

The interface is divided into two sections. The top section is where you add, delete and
reposition the menu buttons and where you select the actual button image for each menu
section. The bottom section allows you to set various options that control the menu's posi-
tion and behavior.

Insert Menu Magic II | 118

119 | Appendix I – Menu Magic II Help System

MENU IMAGES SECTION

This topmost section of the interface allows you to define all of the button images that will
comprise the finished menu.

MENU IMAGES
The Menu Images box lists all of the defined menu buttons by showing the image path
and sizes (width and height) for each of the menu sections, preceded by the word "But-
ton:". When a section does not yet have a button image defined, you will see the hint
"Browse to select a Button Image...". As you add button images, the system will display
the size for each image and set positions accordingly. While most menu deployments look
best when all of the images are sized in relation to each other, this is not a requirement.
Feel free to experiment with different menu button sizes for some interesting effects.
The image you select should always be the default button image. The system will auto-
matically handle image preloading for rollover and down-state images based on the Swap
Option you select. The file names of your button images can be anything you like. How-
ever, you must follow a naming convention for the swap images. For example, if you
name your default button image mybutton.gif, then the image you want to appear when
users mouse over it would be: mybutton_over.gif and the image you would want to desig-
nate the down-state would be named: mybutton_down.gif.
This naming convention is also user-definable to allow easy configuration with the output
of your image editor. Review "Swap Image Naming Convention" for complete details on
this feature.

IMAGE PATH / BROWSE...

You can select the button image you desire by clicking the button labeled Browse... or by
clicking the Add button if you are creating a new menu section. The Select Image Source
dialog box will open. Select the image that you would like to use for this menu section.
The image path will now be displayed in the Image Path box; the image path and image
size will also be displayed in the Menu Images list. Be sure to select only the default im-
age since the swap images (_over and _down) are automatically handled by the menu
scripts. You can change the image at any time by selecting that image in the Image List
and clicking the Browse... button. Valid image types are: .gif, .jpg, .jpeg, and .png.

Note: You must use the Browse button to select images. The system will ignore anything that you type directly into the
Image Path box.

119 | Insert Menu Magic II

 Appendix I – Menu Magic II Help System | 120

THE ADD BUTTON

To add a new menu button, click the Add button at the top of the interface. The Select Im-
age Source dialog box will open. Select the image that you would like to use for this menu
section. A new menu section line will appear in the Menu Images list displaying the image
path and size. The image path will also be displayed in the Image Path box. Be sure to
select the default image since the _over and _down swap images are automatically han-
dled by the menu scripts. If you do not select an image, then a new menu section line will
appear with the default hint: Browse to select a Menu Image.
You can add as many menu sections as you like.

Note: The interface will warn you if you have not selected an image name for the new menu section, and will not allow you
to finish until you have either made a valid image selection or have deleted the menu section.

THE DELETE BUTTON

You can delete a menu button at any time. Click on the menu section you want to delete in
the Menu Images list, and then click the Delete button at the top of the interface to com-
pletely remove this menu section.

CHANGING MENU BUTTON POSITIONS

The menu will be built on the page in the order that the menu sections appear in the Menu
Images list. You can change the order at any time by moving a menu section Up or Down.

Up
Click on the menu button you wish to move in the Menu Images list. Click on the Up but-
ton at the top of the interface. With each click of the Up button, the menu section will
move up one position.

Down
Click on the menu button you wish to move in the Menu Images list. Click on the Down
button at the top of the interface. With each click of the Down button, the menu section
will move down one position.

Insert Menu Magic II | 120

121 | Appendix I – Menu Magic II Help System

MENU OPTIONS SECTION

This section of the interface allows you to define how the menu will display and function.
Each of the options is preset with default values that the system will supply—depending
on other options that are set. Generally, accepting these default options will result in a
fully functional menu.

SELECT MENU TYPE

The system will generate the menu based on the type you select. The default type is the
Horizontal Tab Bar. Each menu type has specific options that are automatically set by de-
fault when the menu type is changed.

1. Horizontal Tab Bar

This will produce a horizontal menu with each of the menu buttons aligned horizontally
across the page. The top edges of the menu buttons will be vertically aligned to each
other. All submenus will be positioned at the left edge of the first menu button. The width
of the submenus can be specified by using the Submenu Width box or can be set to auto-
matically span the width of the entire menu bar by checking the Auto Submenu Width
box. The top edge of each submenu will be aligned to the bottom edge of its correspond-
ing menu button (so, if your buttons are of different heights, the vertical positions of the
submenus will likewise be different).

2. Dropdown
This will produce a horizontal menu with each of the menu buttons aligned horizontally
across the page. The top edges of the menu buttons will be vertically aligned to each
other. The submenu for each menu section will be positioned at the left edge of the corre-
sponding menu button. Each submenu can be set to the same width as its corresponding
menu button by checking the Auto Submenu Width box, or an explicit width can be speci-
fied by entering a number in the Submenu Width box. The top edge of each submenu will
be aligned to the bottom edge of its corresponding menu button.

121 | Insert Menu Magic II

 Appendix I – Menu Magic II Help System | 122

3. Vertical Flyout
This will produce a vertical menu with each of the menu buttons aligned vertically on the
page. The left edges of the menu buttons will be aligned to each other. The top edge of
each menu button will align to the bottom edge of the menu button above it. The submenu
for each menu section will be positioned at the right edge of its corresponding menu but-
ton. Each submenu can be the same width as its corresponding menu button by checking
the Auto Submenu Width box, or a custom width can be specified by entering a number in
the Submenu Width box. The top edge of each submenu will be aligned to the top edge of
its corresponding menu button with a 10px upward offset.

STYLE THEME
A very powerful feature of Menu Magic II is its ability to produce fully styled, profes-
sionally designed Theme Menus with just two clicks! Select a theme and the Menu Magic
II interface is automatically populated with images and option settings are perfectly set.
Just click OK and the menu is instantly built on your page. Of course, you can always
build your menu manually by choosing each button image and setting the options your-
self.
As you select a theme from the list, a preview image will display... giving you a good idea
of how the menu will look. All of the appropriate options will be set for you... specific to
the chosen theme. Be careful when overriding these options because they were set to co-
ordinate with the special nature of each menu (even to the extent that the menu will be
positioned correctly to align with a page background image in some cases). Menu Magic
comes with a default theme for each menu type and a special Bonus theme for each menu
type. Additional Menu Magic II ThemePaks are available and will add more themes to the
list for you to use.
When using a Theme, the system will automatically place all the button images, in each of
their three swap states, into a folder in your site's root: /m2images. If the folder does not
exist, Menu Magic II will create it for you. The corresponding style sheet(s) will be placed
into another folder (/m2styles) and linked to your page. Additionally, the editable Fire-
works source file (.png) for the images will be placed into a /Local_Files folder to allow
you to easily edit the menu images. In short... it's all done for you!
Menu Magic II will create all folders as necessary. These folders will only be created once... the first time they are needed.

Insert Menu Magic II | 122

123 | Appendix I – Menu Magic II Help System

None
Select None if you wish to build your menu manually. No Theme will be used. In this
mode, you must select each button image and set each of the options yourself. A prede-
fined minimal style sheet will be embedded on the page to allow you to further style the
submenu items.

Basic
This will produce a fully styled menu for each menu type. However, it will not carry
background images... and the styles are kept at a minimum. The images are designed for
quick and easy modification and lend themselves to a variety of page layouts. This is an
ideal choice if you'd like to build a menu system as a starting point from which to custom-
ize it.

Bonus Theme
These are full-scale PVII ThemePak themes that produce highly styled and engaging
menu systems... automatically and completely. All you need to do is click OK! Images
and style sheets are specifically designed for each theme and even contain matching back-
ground images.

SWAP OPTION
The Swap Option allows you to select the image swap behavior for the menu. The system
will automatically create the necessary onMouseOver and onMouseOut events for each
menu button to enable the desired image swapping. This setting can be easily modified
after the menu is built by using the setMenuMagic II Behavior.

None
Choose None if you do not want any button effects. The menu buttons will remain static,
with no effects on rollover, and any down-state settings are ignored. The scripts will not
preload any images.

Down Only
The down-state button images are used, if needed, to display the selected Default menu
button... which will swap to the normal image on rollover. The scripts will preload only
the down state (_down) images.

123 | Insert Menu Magic II

 Appendix I – Menu Magic II Help System | 124

Over and Down

Both the down-state (_down) and the over (_over) images will be used. The image will
swap to the over (_over) image on rollover for both the normal buttons and the Default
button. The down-state and the over images will be preloaded.

Use Over as Down

Use this option to save bandwidth or if you do not wish to have a separate set of images
for your down-State. Only the over (_over) images will be used. The script will also use
the over image as its down- state image for the default button. The scripts will preload
only the over (_over) images.

LINK SEPARATOR
The system will produce a submenu containing boilerplate text links in each of the sub-
menus. The Link Separator option allows you to define what appears in the space between
each of these text links. While you can select any of the separators for any menu type,
some of the choices make visual sense only for certain menu types. For example, a pipe |
only makes sense if the submenu is wide enough to properly display more than one text
link in per line, while a paragraph <p> separator makes sense if you want to keep each
text link on its own line.

Separators:
Pipe |
Dash -
Brackets [ ]
Paragraph <p>
Single Space
Double Space

Insert Menu Magic II | 124

125 | Appendix I – Menu Magic II Help System

DEFAULT BUTTON
You can select any button to display in its down state to provide a visual clue that the but-
ton relates to the current page. Once the menu is built, you can change this setting at any
time by using the setMenuMagic II Behavior. The Default button will always return to its
down state after a rollover. That is, the down image will be used instead of the normal im-
age. A Default button can also have a Persistent Submenu that will always display when
the menu is at rest. A default menu button is displayed as "Default Button" in the Menu
Images list.

Use Default Button

Check this box if you wish to use a default menu button. The Set Default Button will be-
come active and allow you to select the desired default menu button. Uncheck this box to
disable the Default Button option. The Set Default button will become inactive and any
existing Default Button you defined will be cleared from the Menu Images list.

Set Default Button

Clicking the Set Default Button will set the currently selected menu section in the Menu
Image list as the default button. To change the Default Button, simply select the desired
menu section in the Menu Image list and click the Set Default Button. To clear the Default
menu button without selecting another button, simply uncheck the Use Default Button
checkbox.

PERSISTENT SUBMENU
Check this box if you want the submenu corresponding to the default menu button to al-
ways be visible when the menu is at rest. As the user moves over the other menu buttons,
the associated submenus will display. However, as soon as the user moves off the menu
entirely, the default submenu will continue to display. This option has no effect if a De-
fault Menu Button has not been set. Once the menu is built, you can change this setting at
any time by using the setMenuMagic II Behavior.

125 | Insert Menu Magic II

 Appendix I – Menu Magic II Help System | 126

DOWN STATE TEXT LINK

Check this box if you would like to have the submenu text link that corresponds to the
current page highlighted with a different style. This feature allows the user to easily and
visually be aware of the current page. The style sheet includes a special custom class that
is assigned for this purpose: p7tbdn. Since there are no real text links in the menu when it
is first placed on your page, the system will always use the second text link in the default
menu (or the first menu if no default is selected) just so that the functionality is in place
and you have an opportunity to see it in action. Once you replace the boilerplate text links
with your real text links, you can easily assign any of these links as the Down State Text
Link by using the setMenuMagic II Behavior.
Uncheck this box if you do not wish to use the Down-State Text Link functionality.

AUTO SUBMENU WIDTH

The Auto Submenu Width checkbox allows you to have the system automatically create
the appropriate submenu width for the specified menu type. If the Horizontal Tab Bar
menu type is selected, this setting will assure that all of the submenus have a width that
spans the entire menu bar. If the Dropdown or Vertical menu type is selected, the system
will always set the width of each submenu to the width of its corresponding menu button
image. When this box is checked, the Submenu Width box is disabled.
Uncheck this box if you wish to use a specific fixed width for the submenus.

SUBMENU WIDTH
The Submenu Width box allows you to enter a pre-determined fixed width, in pixels, that
the system will use for all of the submenus. Use this option when you want to override the
automatic width features of the scripts (especially if you are using button images of vary-
ing width). This will guarantee that all of the submenus have identical widths. This box
will only be active if the Auto Submenu Width box is unchecked.

Insert Menu Magic II | 126

127 | Appendix I – Menu Magic II Help System

LEFT POSITION
You can position the menu anywhere on the page. The Left Position setting affects the
location of the left edge of the first menu button. The system will align the remaining
menu buttons correctly depending on the menu type selected. A meaningful default value
is supplied by the system for each menu type. If you are using a Theme, always accept the
value supplied since it is critical to properly align the menu buttons with the page back-
ground.

TOP POSITION
You can position the menu anywhere on the page. The Top Position setting affects the
location of the top edge of the first menu button. The system will align the remaining
menu buttons correctly depending on the menu type selected. A meaningful default value
is supplied by the system for each menu type. If you are using a Theme, always accept the
value supplied since it is critical to properly align the menu buttons with the page back-
ground.

NO SUBMENU (NAVBAR ONLY)

Another unique feature of Menu Magic II is the ability to work with one or more sub-
menus missing. Check this box if you wish to create a menu without a corresponding
submenu. The menu button images will have full rollover and down state functionality,
but no submenu is created on the page. This is ideal for setting up quick Navigation Bars
because all of the complex image swap and preloading is handled by the menu scripts. All
of the submenu-related options will be disabled when this option is checked.

THE INTERFACE CONTROL BUTTONS

OK
When you are done selecting the images and options (or a theme), click the OK button to
build the menu. The system will verify your option settings and either alert you to any
problems that need your attention or build the completed, fully functional menu on your
page. You can preview in a browser to operate the menu and check its functionality. To
make further changes, you will use the Modify Menu Magic II system.

127 | Insert Menu Magic II

 Appendix I – Menu Magic II Help System | 128

CANCEL
Click the Cancel button to completely abort the current Insert Menu Magic II operation.
This will close the interface and no changes will be made to your page.

GET MORE THEMES

Click this button to open your browser and visit our Menu Magic II ThemePak web site.
Here you will find information about the latest available ThemePaks.

HELP
Click the Help button to open the associated Help File in your browser. This page can re-
main open for easy reference while you continue working with the Menu Magic II inter-
face.

Insert Menu Magic II | 128

129 | Appendix I – Menu Magic II Help System

MODIFY MENU MAGIC II BY PVII

You can modify all aspects of an existing Menu Magic II system at any time. The system
is designed to allow modification without losing any of the submenu, style sheet, or image
modifications that you may have made. The system will allow you to add, delete, or repo-
sition the menu sections and you can change the image file associated with each menu
button at any time. Most of the menu options are available and can be changed to suit your
needs. You can even change the Menu Type and page position to totally alter the way the
menu looks and functions... all while preserving your existing menu content.
Choose Modify→Studio VII→MenuMagic II by PVII to open the Modify interface.
When the Modify interface first opens, the system will identify the type of menu you have
on the page and will populate all of the interface options based on the existing menu.
You can also access the Modify interface by clicking the Menu Magic II icon in the Insert
Bar (DWMX) or Objects panel (DW4).
Note: The Modify option will be unavailable (grayed out) in the menu if there is no current Menu Magic II system on the
page.

OVERVIEW
Menu Magic II is designed to specifically protect all of the elements of your existing
menu and will not re-write any of the content that you have placed in the submenus. You
can safely make changes to existing menu sections without losing your work. Addition-
ally, the Modify mode will not affect the style sheet(s) or existing images. This allows you
to safely modify images and style sheet(s) and still use the Menu Magic II Modify system
to fine tune your menu.
The Modify system will completely re-write the modified menu code to you page, while
protecting your content. All of the menu elements will be assigned the proper id or name
in relation to their new position in the menu. This allows you to insert or move as many
menu sections as you like while assuring that the new positions in the menu correspond
with the name or id of the image or menu div. This approach keeps the source code and
naming system readable and meaningful.

129 | Modify Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 130

User-entered modifications to existing menu image links will always be preserved. Any
modified Alt tags, onClick events, or Href strings will be properly carried through to the
rebuilt menu. The content of the submenus is never touched and is transferred (if neces-
sary) to the revised submenu so that all menus remain sequentially placed and ID 'd. A
unique feature of the Modify system is the ability to rename any boilerplate text links. If
the system encounters the unmodified text links, it will rewrite them to properly reflect the
modified submenu location. That is, Sublink 2.1 will become Sublink 3.1, if your modifi-
cations result in a new button being inserted between the first and second buttons.
When the Modify interface first opens, the system will identify the type of menu you have
on the page and will populate all of the interface options based on the existing menu.

THE MODIFY MENU PROCESS

1. Choose Modify→Studio VII→MenuMagic II by PVII to open the interface.
2. Add, Delete or move any of the button images.
3. Select or set any menu options you desire.
4. Click OK to rebuild the menu with your modifications reflected.

Modify Menu Magic II by PVII | 130

131 | Appendix I – Menu Magic II Help System

THE INTERFACE
The Modify Menu Magic II interface allows you to quickly and easily change all of the
functional parameters of the existing menu using an interface that is very similar to the
Insert Menu Magic II interface.

FIGURE 132

The interface is divided into two sections. The top section allows you to add, delete and
reposition the menu buttons... and to select the actual button image for each menu section.
The bottom section allows you to set various options that control the menu's position and
behavior.
The interface is very similar to the Insert interface and most of the same options are avail-
able. This section will deal specifically with the modification-related issues of each inter-
face item. The Theme and the No SubMenu options are not available in the Modify sys-
tem in order to protect the content of the existing menu, its submenus, and the related
files.
For a detailed discussion on all of the entry boxes see: Insert Menu Magic II

131 | Modify Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 132

EXISTING MENU SECTIONS

Menu Magic II is designed to specifically protect all of the elements of your existing
menu and will not re-write any content that you have manually placed in the submenus.
You can safely move existing menu sections up, down, or add as many new menu sections
as you like.

MENU IMAGES SECTION

The top section of the interface allows you to define all of the button images that will be
part of the modified finished menu.

MENU IMAGES
The Menu Images box lists all of the defined menu buttons. It displays the image path and
size (width and height) for each of the menu sections contained in the existing menu. The
order reflects the order in which they are placed in the existing menu. Additionally, all of
the existing menu sections contain the name of the button image that is being used in the
existing menu. For example, p7TBim20 denotes that this is the second (20) menu button
in the existing menu. Newly added buttons will not show this image name to allow you to
easily differentiate new buttons from existing buttons.
You can move any menu section to change the order of the menu buttons. Select the menu
section you wish to move and click the Up or Down button to move it to the desired loca-
tion.

IMAGE PATH / BROWSE...

You can change the button image file for any button by clicking the Browse... button. The
Select Image Source dialog box will open. Select the image that you would like to use for
this menu section. The image path will now be displayed in the Image Path box. The im-
age path and image size will also be displayed in the Menu Images list. Be sure to select
only the default image since the swap images (_over and _down) are automatically han-
dled by the menu scripts. You can change the image at any time by selecting that image in
the Image List and clicking the Browse... button. Valid image types are: .gif, .jpg, .jpeg,
and .png.

Note: You must use the Browse button to select images, the system will ignore anything that you type directly into the
Image Path box.

Modify Menu Magic II by PVII | 132

133 | Appendix I – Menu Magic II Help System

THE ADD BUTTON

To add a new menu button, click the Add button at the top of the interface. The Select Im-
age Source dialog box will open. Select the image that you would like to use for this menu
section. A new menu section line will appear in the Menu Images list displaying the image
path and size. The image path will also be displayed in the Image Path box. Be sure to se-
lect the default image since the _over and _down swap images are automatically handled
by the menu scripts. If you do not select an image, then a new menu section line will ap-
pear with the default hint: "Browse to select a Menu Image...".
You can add as many menu sections as you like.

Note: The interface will warn you if you have not selected an image name for the new menu section and will not allow you
to finish until you have made a valid image selection or you have deleted the menu section.

THE DELETE BUTTON

You can delete a menu button at any time. Click on the menu section you want to delete in
the Menu Images list, and then click the Delete button at the top of the interface to com-
pletely remove this menu section.
Warning: Deleting an existing menu button will also delete the associated submenu. You will loose the contents of the
submenu when you delete the button image.

CHANGING MENU BUTTON POSITIONS

The menu will be built on the page in the order that the menu sections appear in the Menu
Images list. You can change the order at any time by moving a menu section Up or Down.

Up
Click on the menu button you wish to move in the Menu Images list. Click on the Up but-
ton at the top of the interface. With each click of the Up button, the menu section will
move up one position.

Down
Click on the menu button you wish to move in the Menu Images list. Click on the Down
button at the top of the interface. With each click of the Down button, the menu section
will move down one position.

133 | Modify Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 134

MENU OPTIONS SECTION

This section of the interface allows you to define how the menu will display and function.
Each of the options is preset with default values that the system will supply, depending on
other options that are set. Initially, these options were set when the Modify interface first
opened and reflect the options of the menu currently on your page. The system will allow
you to change these options. However, careful thought is advised since some of the op-
tions may radically change the appearance of the menu and may not be suitable for your
existing menu system.

SELECT MENU TYPE

The Menu Type is set to reflect the type of menu that is currently on your page. The sys-
tem will re-generate the menu based on the type you select. Each menu type has specific
additional default options that will be automatically set when the menu type is changed.
Switching from one type to another may have an effect on the submenu width. If you want
to preserve your current submenu width be sure to un-check the Auto SubMenu Width
box before changing the Menu Type.

Note: If you change the Menu Type of an existing menu, some of the other options will be changed automatically to as-
sure that a proper menu will be built.

1. Horizontal Tab Bar

This will produce a horizontal menu with each of the menu buttons aligned horizontally
across the page. The top edges of the menu buttons will be vertically aligned to each
other. All submenus will be positioned at the left edge of the first menu button. The width
of the submenus can be specified by using the Submenu Width box or can be set to auto-
matically span the width of the entire menu bar by checking the Auto Submenu Width
box. The top edge of each submenu will be aligned to the bottom edge of its correspond-
ing menu button (so, if your buttons are of different heights, the vertical positions of the
submenus will likewise be different).

Modify Menu Magic II by PVII | 134

135 | Appendix I – Menu Magic II Help System

2. Dropdown
This will produce a horizontal menu with each of the menu buttons aligned horizontally
across the page. The top edges of the menu buttons will be vertically aligned to each
other. The submenu for each menu section will be positioned at the left edge of the corre-
sponding menu button. Each submenu can be set to the same width as its corresponding
menu button by checking the Auto Submenu Width box, or an explicit width can be speci-
fied by entering a number in the Submenu Width box. The top edge of each submenu will
be aligned to the bottom edge of its corresponding menu button.

3. Vertical Flyout
This will produce a vertical menu with each of the menu buttons aligned vertically on the
page. The left edges of the menu buttons will be aligned to each other. The top edge of
each menu button will align to the bottom edge of the menu button above it. The submenu
for each menu section will be positioned at the right edge of its corresponding menu but-
ton. Each submenu can be the same width as its corresponding menu button by checking
the Auto Submenu Width box, or a custom width can be specified by entering a number in
the Submenu Width box. The top edge of each submenu will be aligned to the top edge of
its corresponding menu button with a 10px upward offset.

SWAP OPTION
You can change the button image swap functionality of the menu system at any time. The
modified menu will rebuild all of the event handlers to properly reflect the option you
choose.

None
Choose None if you do not want any button effects. The menu buttons will remain static,
with no effects on rollover, and any down-state settings are ignored. The scripts will not
preload any images.

Down Only
The down-state button images are used, if needed, to display the selected Default menu
button... which will swap to the normal image on rollover. The scripts will preload only
the down state (_down) images.

Over and Down

Both the down-state (_down) and the over (_over) images will be used. The image will
swap to the over (_over) image on rollover for both the normal buttons and the Default
button. The down-state and the over images will be preloaded.

135 | Modify Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 136

Use Over as Down

Use this option to save bandwidth or if you do not wish to have a separate set of images
for your down-State. Only the over (_over) images will be used. The script will also use
the over image as its down- state image for the default button. The scripts will preload
only the over (_over) images.

LINK SEPARATOR
The Link Separator option is disabled for any existing menu section in order to preserve
the contents of the submenu. This option will become active only for newly added menu
sections. The system will produce a submenu containing boilerplate text links in each of
the new submenus.

Note: The Link Separator option is global for all new menu sections. The selected separator will be used for all of the
newly added menu sections. The separator used in existing menu sections will not be changed, regardless of this setting.

DEFAULT BUTTON
You can select any button to display in its down state to provide a visual clue that the but-
ton relates to the current page. Once the menu is built, you can change this setting at any
time by using the setMenuMagic II Behavior. The Default button will always return to its
down state after a rollover. That is, the down image will be used instead of the normal im-
age. A Default button can also have a Persistent Submenu that will always display when
the menu is at rest. A default menu button is displayed as "Default Button" in the Menu
Images list.

Use Default Button

Check this box if you wish to use a default menu button. The Set Default Button will be-
come active and allow you to select the desired default menu button. Uncheck this box to
disable the Default Button option. The Set Default button will become inactive and any
existing Default Button you defined will be cleared from the Menu Images list.

Set Default Button

Clicking the Set Default Button will set the currently selected menu section in the Menu
Image list as the default button. To change the Default Button, simply select the desired
menu section in the Menu Image list and click the Set Default Button. To clear the Default
menu button without selecting another button, simply uncheck the Use Default Button
checkbox.

Modify Menu Magic II by PVII | 136

137 | Appendix I – Menu Magic II Help System

PERSISTENT SUBMENU
Check this box if you want the submenu corresponding to the default menu button to al-
ways be visible when the menu is at rest. As the user moves over the other menu buttons,
the associated submenus will display. However, as soon as the user moves off the menu
entirely, the default submenu will continue to display. This option has no effect if a De-
fault Menu Button has not been set. Once the menu is built, you can change this setting at
any time by using the setMenuMagic II Behavior.

DOWN STATE TEXT LINK

This box will be checked if the system detects that your current menu system is using a
down-state text link and a down-state class name is defined. The existing text link will be
preserved and carried through... even if the menu button position has been changed. If a
newly added menu button is set as the Default button, then the down state text link will be
changed to the boilerplate text link in the new related submenu.
The down-state CSS class name that is currently being used by the existing menu will also
be used on the rebuilt menu.
Uncheck this box if you do not wish to use the Down State Text Link functionality.

AUTO SUBMENU WIDTH

The Auto Submenu Width checkbox allows you to have the system automatically create
the appropriate submenu width for the specified menu type. If the Horizontal Tab Bar
menu type is selected, this setting will assure that all of the submenus have a width that
spans the entire menu bar. If the Dropdown or Vertical menu type is selected, the system
will always set the width of each submenu to the width of its corresponding menu button
image. When this box is checked, the Submenu Width box is disabled.
Uncheck this box if you wish to use a specific fixed width for the submenus.

SUBMENU WIDTH
Switching from one type to another may have an effect on the submenu width. If you want
to preserve you current submenu width then be sure to un-check the Auto Submenu Width
box before changing the Menu Type. The width of the first submenu on the page will then
be supplied in the Submenu Width box.
You can also use this feature to quickly change the width of all your submenus by simply
entering the new width and clicking OK.

137 | Modify Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 138

The Submenu Width box allows you to enter a pre-determined fixed width, in pixels, that
the system will use for all of the submenus. Use this option when you want to override the
automatic width features of the scripts (especially if you are using button images of vary-
ing width). This will guarantee that all of the submenus have identical widths. This box
will only be active if the Auto Submenu Width box is unchecked.

LEFT POSITION
You can position the menu anywhere on the page. The Left Position setting affects the
location of the left edge of the first menu button. The system will align the remaining
menu buttons correctly depending on the menu type selected. A meaningful default value
is supplied by the system for each menu type. If you are using a Theme, always accept the
value supplied since it is critical to properly align the menu buttons with the page back-
ground.

TOP POSITION
You can position the menu anywhere on the page. The Top Position setting affects the
location of the top edge of the first menu button. The system will align the remaining
menu buttons correctly depending on the menu type selected. A meaningful default value
is supplied by the system for each menu type. If you are using a Theme, always accept the
value supplied since it is critical to properly align the menu buttons with the page back-
ground.

THE INTERFACE CONTROL BUTTONS

OK
When your modifications are complete, click the OK button to rebuild the menu. The sys-
tem will verify your option settings and either alert you to any problems that need your
attention or rebuild the completed, fully functional menu on your page. You can preview
in a browser to operate the menu and check its functionality. To make further changes you
can use the Modify command again, as many times as you like.
If you are not happy with the changes, you can revert to your previous, un-modified menu
by choosing Edit-Undo P7cmEditMM2 in the Dreamweaver menu.

Modify Menu Magic II by PVII | 138

139 | Appendix I – Menu Magic II Help System

CANCEL
Click the Cancel button to completely abort the current Menu Magic II operation. This
will close the interface without making any changes to your page.

GET MORE THEMES

Click this button to open your browser and visit our Menu Magic II ThemePak web site.
Here you will find information about the latest available ThemePaks.

HELP
Click the Help button to open the associated Help File in your browser. This page can re-
main open for easy reference while you continue working with the Menu Magic II inter-
face.

139 | Modify Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 140

REMOVE MENU MAGIC II BY PVII

Menu Magic II includes a Remove feature that allows you to quickly remove an existing
Menu Magic II system from your page. This facility allows for easy removal when simply
prototyping pages or when a total redesign is necessary.
Choose Commands→Studio VII→Remove Menu Magic II by PVII to open the Re-
move interface.

Note: The Remove option will be unavailable (grayed out) in the menu if there are no components of the Menu Magic II
system on the page.

OVERVIEW
The Remove Menu Magic II command will be available if the system detects the presence
of the setMM2 behavior on the <body> tag, onLoad event, or if the page contains at least
one image that is using the Menu Magic II naming convention (an image name that starts
with p7TBim).
The system will look for, and remove, all of the elements on your page that follow the
Menu Magic II naming convention:
1. The MM2 Trigger Divs—All divs (layers) whose id (name) starts with p7Tbtrig
2. The MM2 Images—All images whose name (or id) starts with p7Tbim
3. The MM2 SubMenu Divs—All divs (layers) whose id (name) starts with p7TBsub
Additionally, the system will also remove these related components:

1. THE MENU MAGIC II JAVASCRIPTS

If the system detects that you are using the linked JavaScript file (as created by the Insert
Menu Magic II) then it will remove the link to the JavaScript file on your page. It will not
delete the actual external JavaScript file. If the system detects that the scripts are on your
page, then those scripts will be removed.

2. THE MENU MAGIC II EVENT TRIGGERS

The system will remove any setMM2 and trigMM2 events it finds on the <body> tag,
onLoad event. Any other existing onLoad events will not be affected.

Remove Menu Magic II by PVII | 140

141 | Appendix I – Menu Magic II Help System

The system will not attempt to remove any linked or embedded style sheet in order to pro-
tect any modifications you may have made. If you wish to remove the style sheet you
must do so manually, using the Dreamweaver CSS Styles panel or Code View.

THE REMOVE MENU PROCESS

1. Choose Commands→Studio VII→Remove Menu Magic II by PVII to open the
interface.
2. Click the Remove button to completely remove the menu from your page.

THE INTERFACE
The Remove Menu Magic II interface allows you to quickly remove all of the menu com-
ponents from your page.

REMOVE
Click the Remove button to completely remove the Menu Magic II elements from your
page. This will remove all of the elements that follow the Menu Magic II naming conven-
tion.

CANCEL
Click the Cancel button to abort the Remove Menu Magic II operation. This will close the
interface and no changes will be made to your page. Everything will remain as it was be-
fore you opened the Remove Menu Magic II interface.

GET MORE THEMES

Click this button to open your browser and visit our Menu Magic II ThemePak web site
where you will find information about the latest ThemePaks available.

HELP
Click the Help button to open the associated Help File in your browser. This page can re-
main open for easy reference while you continue working with the Menu Magic II inter-
face.

141 | Remove Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 142

SET MENU MAGIC II BY PVII

The Set Menu Magic II Behavior enables you to modify the functional aspects of the
Menu Magic II system on individual pages. This behavior is required on all pages that use
the Menu Magic II menu system and is deployed automatically when using the Insert or
Modify systems.
You can specify the Default button and related functionality for each page by adjusting
the settings using this behavior. You can also use this behavior to stitch together a work-
ing Menu Magic II menu if you are creating the menu components manually.

OVERVIEW
The Set Menu Magic II Behavior is used to initialize the Menu Magic II system on your
page and is placed on the page's <body> tag, onLoad event so that the behavior will run
when the page first loads. This behavior is required on all pages that use the Menu Magic
II menu system.
On its own, the Set Menu Magic II behavior does nothing to trigger the menu action; it
simply initializes the menu system so that the Trigger Menu Magic II events can function
properly.
Whenever you use a Set Menu Magic II event, be sure to also add a Trigger Menu Magic
II event to cause the menu to display in its desired state.
Use this behavior to control the Default Submenu Button and Down-State Link settings on
each individual Menu Magic II page. You can also control the image swap, down-state
class name and persistent submenu settings on an individual page-by-page basis allowing
for complete flexibility throughout the entire Menu Magic II system.
Advanced users can also use this behavior to create the Menu Magic II menu by selecting
the various options and applying the behavior to the <body> tag, onLoad event. While the
scripts will work with most existing elements on your page, you must follow these mini-
mum naming conventions in order for the menu to work properly:

Set Menu Magic II by PVII | 142

143 | Appendix I – Menu Magic II Help System

1. Image Names: The page must contain one or more images using a name that starts
with p7Tbim
2. Submenu Names: The related submenu div (layer) must use a name that starts with
p7Tbsub
3. Menu Closer Div: This is a div (layer) that contains a small transparent .gif image
(shim.gif) that is sized to encompass an area greater than the overall area of the menu
and its submenus. The image contains an onMouseOver event to fire an empty Trigger
Menu Magic II event that will restore the menu to its default state whenever the user
moves off the menu components. The Menu Magic II scripts assume that this div is on
the page and will require that the name (id) is set to: P7TabH.
The image and submenu names are tied together by using exactly the same appendage.
For example, an image named p7TBim50 will correspond to a submenu named
p7TBsub50. Notice that 50 is the common appendage. This portion of the name can be
anything you like. For example, p7TBimButOne and p7TBsubButOne are acceptable...
but p7TBimButOne and p7TsubBut1 are not.
There is no requirement for a matching submenu to exist for each button image. In fact,
Menu Magic II will work perfectly without any submenus on the page. If the scripts find a
matching submenu, it will be used. If no match is found, the scripts will act on just the
menu button... just like a conventional image-only NavBar.
The image you select should always be the default button image. The system will auto-
matically handle image pre-loading for rollover and down-state images based on the Swap
Option you select. The file names of your button images can be anything your like. How-
ever, you must follow a naming convention for the swap images. For example, if you
name your default button image mybutton.gif, then the image you want to appear when
users mouse over it would be: mybutton_over.gif and the image you would want to desig-
nate the down-state would be named: mybutton_down.gif.
This naming convention is also user-definable to allow easy configuration with the output
of your image editor. Review "Swap Image Naming Convention" for complete details on
this feature.

143 | Set Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 144

MODIFYING AN EXISTING SET MENU MAGIC II BEHAVIOR

1. Click the <body> tag on the status bar Tag Selector (the bottom left of the DW Design
window).
2. Double-click the Set Menu Magic II by PVII behavior in the Behaviors panel to open
the interface.
3. Change the menu settings as desired.
4. Click OK to apply the revised behavior.
5. Be sure that the event is set to onLoad in the Behaviors panel.

CREATING A NEW SET MENU MAGIC II BEHAVIOR

1. Click the <body> tag on the Tag Selector (the bottom left of the DW Design window).
2. Click the plus sign (+) on the Behaviors panel.
3. Choose Studio VII - Menu Magic II - Set Menu Magic II by PVII to open the inter-
face.
4. Set the menu options as desired.
5. Click OK to apply the behavior.
6. Be sure that the event is set to onLoad in the Behaviors panel.

Set Menu Magic II by PVII | 144

145 | Appendix I – Menu Magic II Help System

THE INTERFACE
The Set Menu Magic II interface provides quick access to all of the Menu Magic II ini-
tialization controls to allow you to easily manage the menu settings on a page-by-page
basis.

FIGURE 133

DEFAULT MENU BUTTON

This setting defines the menu button that will be displayed in its down state to show users
that they are on a page that relates to that button. This listing will show all of the existing
images that use the Menu Magic II naming convention - a name that starts with: p7TBim.
Select the button name that you wish to show in its down state on this page, or select none
if you want all of the buttons to show in their normal state.

IMAGE SWAP OPTION

The Swap Option allows you to select the image swap behavior of the menu.

None
Choose None if you do not want any button effects. The menu buttons will remain static,
with no effects on rollover, and any down-state settings are ignored. The scripts will not
preload any images.

Down Only
The down-state button images are used, if needed, to display the selected Default menu
button... which will swap to the normal image on rollover. The scripts will preload only
the down state (_down) images.

145 | Set Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 146

Over and Down

Both the down-state (_down) and the over (_over) images will be used. The image will
swap to the over (_over) image on rollover for both the normal buttons and the Default
button. The down-state and the over images will be preloaded.

Use Over as Down

Use this option to save bandwidth or if you do not wish to have a separate set of images
for your down-State. Only the over (_over) images will be used. The script will also use
the over image as its down- state image for the default button. The scripts will preload
only the over (_over) images.

DOWN STATE LINK

You can select a specific text link that should be displayed in a different style to denote
that this link corresponds to the current page. This feature allows the user to easily and
visually be aware of the current page. The style sheet includes a special custom class that
is assigned for this purpose: p7tbdn (or you can use your own).
This list displays all of the current text links on your page. Select the text link that you
wish to display as the Down State Link or select none if you do not want to use this func-
tionality.

Note: If you do not select a custom class in the Down State Class Name this feature will have no effect.

DOWN STATE CLASS NAME

This setting specifies the custom class name of the style that defines the visual aspects of
the Down State Link. If you used the Create Menu Magic II command to build your menu
system, the custom class p7tbn was automatically included in your style sheet for this pur-
pose.
The listing will show all of the custom class names that are currently defined in your style
sheet(s). Select the custom class that should control the Down State Link, or select none if
you do not want to use this functionality.

Note: This setting will have no effect if you do not select a Down State Link.

Set Menu Magic II by PVII | 146

147 | Appendix I – Menu Magic II Help System

PERSISTENT DEFAULT SUBMENU

Select Yes if you want the submenu corresponding to the default menu button to always
be visible when the menu is at rest. As the user moves over the other menu buttons the
associated submenus will display... but as soon as the user moves off the menu entirely,
the default submenu will become visible again as the other submenus hide. This option
has no effect if the Default Menu Button option is not set.
Select No if you do not want to use this functionality.

THE INTERFACE CONTROL BUTTONS

OK
When you are satisfied with all of your settings, click the OK button to apply the behav-
ior.

CANCEL
Click the Cancel button to completely abort the current Menu Magic II operation. This
will close the interface and no changes will have been made to your page.

HELP
Click the Help button to open the associated Help File in your browser. This page can re-
main open for easy reference while you continue working with the Menu Magic II inter-
face.

147 | Set Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 148

TRIGGER MENU MAGIC II BY PVII

The Trigger Menu Magic II behavior is used to trigger menu actions under different cir-
cumstances such as when you mouse over a button image (onMouseOver) or when the
page loads (onLoad). This behavior is required on all pages that use the Menu Magic II
system. Without it, the menu will just appear on the page based purely on the html code.
Trigger Menu Magic II places the menu into its desired working (default) state, based on
the menu options defined in the Set Menu Magic II behavior, when the page first loads.
The Trigger Menu Magic II behavior also handles all of the menu button trigger events. In
other words, it's what makes a properly set up menu actually work!

OVERVIEW
The Trigger Menu Magic II behavior works in two modes:

1. AN EMPTY TRIGGER
When the behavior is used without any arguments (no image button name is referenced),
the scripts will place the menu into the configuration defined by the Set Menu Magic II
behavior: the menu's default state. This empty trigger must be used on the <body> tag's
onLoad event, right after the Set Menu Magic II behavior, in order to cause the menu to
actually switch into the desired default state when the page first loads. The empty trigger
is also used on the menu closer div (layer), P7TabH, to cause the menu to return to its de-
fault state when the user moves his mouse off the menu components.

2. A MENU BUTTON TRIGGER

When the behavior is used with an argument that references a button image, the scripts
will trigger the necessary action for that button. Depending on the menu options defined in
the Set Menu Magic II behavior, the button may switch to its rollover or down-state im-
age, the corresponding submenu will become visible, all other submenus will become hid-
den, and all other menu buttons will switch to their default states (either the normal image
or the down image).

Trigger Menu Magic II by PVII | 148

149 | Appendix I – Menu Magic II Help System

The Trigger Menu Magic II behavior is used often on the page - once on each of the menu
button images. We have purposely made this trigger behavior as compact as possible to
gain efficiency and ease of use. You only need to apply a single instance of the behavior
to the onMouseOver (or onClick, if desired) event of a button image to trigger all of the
menu effects. You do not need to use an onMouseOut event on the button images since
this is handled automatically by the empty Trigger Menu Magic II behavior on the closer
div.

MODIFYING AN EXISTING TRIGGER MENU MAGIC II BEHAVIOR

1. Select the element that contains an existing Trigger Menu Magic II behavior.
2. Double-click the Trigger Menu Magic II by PVII behavior in the Behaviors panel to
open the interface.
3. Select the Menu Button Name option you desire.
4. Click OK to apply the revised behavior.

CREATING A NEW TRIGGER MENU MAGIC II BEHAVIOR

1. Select (click) an element to act as the behavior trigger (a link, image or the <body>
tag)
2. Click the plus sign (+) on the Behaviors panel.
3. Choose Studio VII - Menu Magic II - Trigger Menu Magic II by PVII to open the in-
terface.
4. Select the Menu Button Name option you desire.
5. Click OK to apply the behavior.

149 | Trigger Menu Magic II by PVII

 Appendix I – Menu Magic II Help System | 150

THE INTERFACE
The Trigger Menu Magic II interface allows you to quickly choose a button image name
to trigger... or select none to restore the menu back to its default state.

FIGURE 134

MENU BUTTON NAME

This setting defines the menu button that will be acted on by the Menu Magic II scripts.
You can also choose none to cause the menu to display in its default state as defined by
the Set Menu Magic II behavior. This listing will show all of the existing images that use
the Menu Magic II naming convention... a name that starts with: p7TBim. Select the but-
ton name that you wish to trigger (or select none if you want the menu to return to its de-
fault state).

THE INTERFACE CONTROL BUTTONS

OK
When you have made your selection, click the OK button to apply the behavior.

CANCEL
Click the Cancel button to completely abort the current Menu Magic II operation.

HELP
Click the Help button to open the associated Help File in your browser. This page can re-
main open for easy reference while you continue working with the Menu Magic II inter-
face.
Note: Menu Closer Div -This is a div (layer) that contains a transparent .gif image (shim.gif) that is sized to encompass an
area greater than the overall area of the menu and all its submenus. The image contains an onMouseOver event to fire an
empty Trigger Menu Magic II event that will restore the menu to its default state whenever the user moves his mouse off
the menu components. The Menu Magic II scripts assume that this div is on the page and will require that the name (id) is
set to: P7TabH.

Trigger Menu Magic II by PVII | 150

151 | Appendix I – Menu Magic II Help System

SWAP IMAGE NAMING CONVENTION

The file names of your button images can be anything you like. However, you must follow
a naming convention for the swap images. For example, if you name your default button
image mybutton.gif, then the image you want to appear when users mouse over it would
be: mybutton_over.gif and the image you would want to designate the down-state would
be named: mybutton_down.gif.
The Menu Magic II system automatically handles image preloading of the swap images based on the Swap Option you
select.

MENU MAGIC II DEFAULT NAMING CONVENTION:

Default image: mybutton.gif
Rollover image: mybutton_over.gif
Down state image: mybutton_down.gif
This naming convention is also user-definable to allow synchronizing with your image
editor's capabilities. The basic image name must be the same for all three button images,
but the appendage you use to differentiate the rollover and down images can be any thing
you like. To change the image naming convention you will need to make a small change
in the Menu Magic II JavaScript code on your page.

151 | Swap Image Naming Convention

 Appendix I – Menu Magic II Help System | 152

CHANGING THE IMAGE NAMING CONVENTION

Let's assume that you want to use a naming convention that matches the default output of
Fireworks when working with a multi-frame image document. Fireworks will use a file
name appendage that designates the second and subsequent frame output:
(Frame 1) Default image: mybutton.gif
(Frame 2) Rollover image: mybutton_f2.gif
(Frame 3) Down state image: mybutton_f3.gif
To use this naming convention all we need to do is modify the Set Menu Magic II
JavaScript function. Here’s how—

In Dreamweaver, open the page that contains the Menu Magic II JavaScript. This will be
the mm2script.js file in the m2scripts folder of your site. If the menu was created manu-
ally, the scripts will most likely be on the same page as the menu in the <script> portion
of the page's <head> region.
Locate the P7_setMM2() function, the first 4 lines will look like this:
function P7_setMM2(){ //v2.0 by PVII
//set the image over and down name convention
document.p7TabOver="_over";
document.p7TabDown="_down";

The third and fourth lines declare what the script will use as the naming convention. Sim-
ply replace the text "_over" with the naming convention you want to use for the over im-
age, then replace the text "_down" with the naming convention you want to use for the
down-state image. In our example, we are changing the convention to use _f2 and _f3... so
our edited code should look like this:
function P7_setMM2(){ //v2.0 by PVII
//set the image over and down name convention
document.p7TabOver="_f2";
document.p7TabDown="_f3";

Save the JavaScript file (or if the script was located on the same page as the menu, save
the page).

Swap Image Naming Convention | 152

153 | Appendix I – Menu Magic II Help System

The Menu Magic II scripts will now automatically use _f2 and _f3 as the naming conven-
tion for the rollover and down images. The image filenames, using this convention, would
look like:
Default image: mybutton.gif
Rollover image: mybutton_f2.gif
Down state image: mybutton_f3.gif
You can use any convention you like, just be sure to always leave the quotation marks
around the convention name you use when editing the JavaScript file. For example, this
naming convention will also work fine:
document.p7TabOver="rollover";
document.p7TabDown="closed";

In this case, the image file names would look like this:
Default image: mybutton.gif
Rollover image: mybuttonrollover.gif
Down state image: mybuttonclosed.gif
As you can see, any naming convention will work, as long as you modify the two lines in
the Set Menu Magic JavaScript code.

PRESERVING YOUR CODE MODIFICATIONS

Once you have modified the Menu Magic II JavaScript code, you will want to be sure to
shield the modifications from being automatically replaced or updated. Whenever you use
the Insert or Modify Menu Magic II commands, the system will attempt to update your
existing JavaScript file with the current version to assure that the code base is always cor-
rect. This will overwrite your modifications and they will be lost.
You can shield you modified JavaScript page by simply changing the script file name:
-In the Dreamweaver Site panel (F8), click on the mm2scripts.js file name. Then click on
it once more to make its name editable.
-Change the file name to something like: mm2scripts_mod.js
Dreamweaver will ask you if you want to Update links.
-Click Update so that Dreamweaver will make the filename changes to all of the Menu
Magic II pages that contain an external link to this file.

153 | Preserving your code modifications