Setting up your menus project
Before
you even start to create the menus you need to set up your
project.
Start DHTML Menu Builder and create a new empty project (File->New->Empty
Project)
.
The first step in setting up your project is to launch the
Project Properties dialog. (If it doesn't appear automatically
click File->Project Properties.)
Under the General tab you will see a setting called
Project Name.
Type here the name of your project; for this tutorial we will
call it "Tutorial", so type it without the double quotes.
The most important part of this dialog is the
Configurations tab. By default, DHTML Menu Builder will create an
empty Configuration for you to fill in.
Each Local configuration has two main sections, the Paths and
the Target Document. In the Paths section you're telling DHTML
Menu Builder where it should store the files it creates. In the Target Document section you will tell DHTML Menu Builder which
of the files in your web contains the hotspots.
The
Local Path to the Root Web setting must point to the folder
where your introductory HTML page is located. This file is
usually named index.htm, index.html, or default.asp.
(For this tutorial we'll use the folder where you saved the
hotspots.htm file,
c:\DMB_Tutorial\)
When setting up the Project Properties avoid typing the
paths manually, instead, use the browse buttons ( ) provided in the
dialog. As a rule, to avoid errors, it is always better to use the browse buttons in any part of DHTML Menu Builder.
The Folder to Store Compiled files must be a folder located
inside the root web. It can be the same folder as the one above.
However, for organizational purposes, create a new folder under
c:\DMB_Tutorial\ and name it
menus. Now use the browse button to
select the c:\DMB_Tutorial\menus\
folder.
The Folder to Store the Images should point to the
c:\DMB_Tutorial\images\ folder you
created in the previous step of the tutorial.
Now click on the Target Document button.
This section of the
configuration defines the document that will receive the menus.
When using hotspots, this document is expected to contain
hotspots. When using the toolbar feature, this document will
be used to receive all the necessary JavaScript code that loads the menus and displays them.
Again, avoid typing it manually and use the browse button to
locate the hotspots.htm file which
is stored in the c:\DMB_Tutorial\
folder.
Creating the menus
This is the fun part!
Now we're going to create some sample menus that later we'll
implement (or install) into the
c:\DMB_Tutorial\hotspots.htm
document.
So you have an idea, this is the structure of the menus
we're going to create:
| Home
|
Products
- Computers
- High Performance
- Gaming Systems
- Desktop Systems
- Computers for the Home
- Accessories
- Cables
- Adapters
- Connectors
- Batteries
- -------------
- Catalog Index
|
Links
Search the Web
xFX JumpStart
|
Contact Us |
The top level items (in bold), Home, Products, Links, and Contact Us are
groups (the toolbar items). The second level items (Search the Web, etc.) are
the commands. The top level items
(groups) will be used to create the toolbar.
So, let's start adding our menu items to the project!
First
of all make sure you're in Map mode. In this mode DHTML Menu
Builder displays all the menu items in a tree-like structure
which makes it easier to work with the projects. You can switch
modes using the modes tab on the main dialog as displayed on
this image. Click here for a
complete description about the Map View.
| If you would like to
always use the Map mode by default click on
Edit->Preferences and enable the option "Default to Map
View" |
You will see that when a new project is created DHTML Menu
Builder displays two items: the "Default" toolbar and the "(NoToolbar)" item.
The "Default" toolbar is an empty toolbar that DHTML Menu
Builder creates every time you start a new project.
The "(No Toolbar)" is a special item that holds all the menu
items that are not associated to any toolbar. Groups under this
special item will not be part of any toolbar.
The first thing to do is to rename the "Default" toolbar
item. To do so select it and click
Edit->Rename
Now type "My Toolbar" (without the double quotes). Although this
will not affect our project in any way it is a good idea to keep
things organized.
To add a group to your project and under "My Toolbar", select
the "My Toolbar" item and click
Menu->Add Group
DHTML Menu Builder will add a new group and wait for you
to type its caption. The caption is the actual text that will be
displayed when the menus are viewed from a browser.
Other ways to create a new
group are:
- Press the F6 shortcut key
- Right click any toolbar item and click
Add Group
- Click on the
Add Group icon ( )
on the toolbar |
Type Home and press the ENTER
key on your keyboard.
Because
this item does not contain any commands (menu items) select
(none) from the
Action Type parameter of the Over
event.
Add the second group: Products
You can use any of the above mentioned methods to create this
new group.
Now, we can add commands to this group.
Now we will add the commands to the "Products" group.
To add a command to the Products group, select it and click Menu->Add
Command
DHTML Menu Builder will add a new command and wait for you to
type its caption. Type "Computers" (without the double quotes).
Other ways to create a new
command are:
- Press the F7 shortcut key
- Click on the
Add Command icon ( )
on the toolbar |
Create another command by clicking Menu->Add
Command and name it "Accessories".
Now, let's add a special type of command, a separator.
Separators are just horizontal lines (or vertical if the
commands layout is set to horizontal) which can be used to
separate commands inside the same group.
To add a separator click Menu->Add
Separator
Because separators do not display any text DHTML Menu Builder will not
prompt you its caption. In fact, when a separator is selected, all the fields in the Command Properties are disabled.
Repeat the above process to add a command and name it "Catalog Index".
Now let's create a subgroup (or submenu) under the Computers
command.
| Subgroups (or submenus)
are menu items that are displayed when a command is
selected. This is very useful to keep your menus organized
under main categories. This will not only keep your menus
organized but will also make them a lot easier to use by
your users (the visitors of your web site... the ones you
are designing these menus for). |
Select the Computers command and click
Menu->Add SubGroup
Add these commands to the subgroup:
- High Performance
- Gaming Systems
- Desktop Systems<br><small>Computers for the Home</small>
Notice that the last command contains several HTML tags. The
<br> tag is used to create multi-line captions and the <small>
tag is used to reduce the size of the text. As you'll see in the Live Preview pane, DHTML Menu
Builder has created a multi-line command. Multi-line commands
are commands whose Caption contains two or more lines of text.
| You can use virtually any
HTML tag on the menu item's caption. Although not all the
tags will be properly rendered by the Live Preview, they
will look just fine when you view your menus with a
browser. |
Let's now create another subgroup.
Select the Accessories command and click
Menu->Add SubGroup
Add these commands to the subgroup:
- Cables
- Adapters
- Connectors
- Batteries
Finally let's add the last two toolbar items.
Right click the "My Toolbar" item, click
Add->Group and name the new item "Links".
Add these commands to the Links group:
- Search the Web
- xFX JumpStart<sup>®</sup>
| To add the ® symbol press
and hold the ALT key and then type 0174 on your keypad. |
Again, right click the "My Toolbar" item, click
Add->Group and name the new item
"Contact Us".
Remember that since this group will not contain any commands (menu items) select
(none) from the
Action Type parameter of the Over
event.
At this point DHTML Menu Builder's interface should look like
this:
(note that the names of the subgroups may vary)

If you want to take a look at how your menus are working so far, click Tools->Preview.
| Because the preview uses
an instance of Internet Explorer what you see on the
preview is what you will actually see when your menus are
implemented on the pages of your web site. |
Continue » |