| 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)
.
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.)
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.
Every configuration has two main sections, the Paths and
the HotSpots Editor. In the Paths section you're telling DHTML
Menu Builder where it must store (save) 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 you introductory HTML page is located. This file is
usually named 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.
The Folder to Store Compiled files must be a folder located
inside the root web or it can be the same as well.
For organization purposes, create a new folder under the
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 Menu button.
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.
Finally click on Tools->Toolbars Editor
and click on the Delete Toolbar button ( )
to avoid DHTML Menu Builder from creating a toolbar.
Creating the menus
This is the fun part!
Now we're going to create some sample menus that later we'll
attach to the hotspots we created in the first step of the
tutorial.

So you can have an idea, this is the structure of the menus
for the Products hotspot that we're going to create.
This is composed by a main group (also known as a root level
menu) where two of its commands will display a submenu with more
options.
Menus are composed of two basic elements: groups and
commands, so let's start creating the first group:
Before
you add the first group it is recommended that you switch to the
"Normal" view. By default DHTML Menu Builder will start in "Map"
mode; in this mode DHTML Menu Builder modifies the way the menu
items are presented in the project so its easier to work with
toolbars. Since we're not going to use toolbars it is highly
recommended that you switch to the "Normal" mode. To do so
simply click on the "Normal" tab.
To add a group to your project select
Menu->Add Group
DHTML Menu Builder will add a new group and wait for you to give
it a name
Type grpProducts and press the ENTER
key on your keyboard.
Now, we can add commands to this group.
To add a command select Menu->Add
Command
DHTML Menu Builder will add a new command and wait for you to
give it a name
Type Computers and press ENTER.
When creating new items, DHTML Menu Builder will fill the
Caption property automatically for
you. If required you can later change both, the
name and the
Caption to whatever you need to. You should note though
that DHTML Menu Builder will automatically remove invalid
characters from the item name and
change them for an underscore (_).
Create
another command by selecting Menu->Add
Command and name it Accessories.
Now, let's add a special type of command, a separator.
Separators are just horizontal lines which can be used to
separate commands inside the same group.
To add a separator select Menu->Add
Separator
Separators do not have names so DHTML Menu Builder will not
prompt you for one.
Repeat the above process to add a command and add a new one
and name it Catalog_Index. Note that
DHTML Menu Builder will automatically remove the space in the
name and rename your entry to
Catalog_Index.
Submenus, under DHTML Menu Builder are just normal groups, so
to create the two submenus shown in the picture above we'll
follow the exact same steps.
Create a new group and name it grpComputers and add these
commands to it: High Performance,
Gaming Systems and
Desktop / Home.
Now let's do something interesting with the last command,
Desktop / Home:
Select the command and change its
Caption to: Computers for the Home<br>Desktop
Systems
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.
To create a new line simply use the <br> HTML code.
Now let's create the second group that will be used as a
submenu by the Accessories command.
Just follow the above instructions and name the new group
grpAccessories.
Add these commands to the group: Cables,
Adapters,
Connectors and Batteries.
Now,
we need to configure the Computers
and Accessories commands so when
selected they display the two respective submenus we just
created.
Let's configure the Computers
command first.
Select the Computers command and
click on the Over tab of the
Actions pane.
Select the Display SubMenu action
type and select the grpComputers
group from the Target Group list.
What you just did is tell DHTML Menu Builder that when the
mouse passes over the Computers
command, the grpComputers should be
displayed.
Repeat the same process to set up the
Accessories command so when the mouse passes over it, the
grpAccessories group is displayed.
To take a look at how your menus are working so far,
select Tools->Preview and DHTML Menu
Builder will generate a sample toolbar for you so you can test
your project.
To finish the project let's create the last menu: Links.
Repeat what you have learned and create a group named
grpLinks and add two commands to it:
Search the Web and
xFX JumpStart.
When creating the Desktop / Home command you learned that you
can use HTML tags to format the Caption
of your menu items.
DHTML Menu Builder supports the use of almost any tag in the
Caption, but not all of those tags will be properly rendered by
the Live Preview.
An example is the use of the <sup></sup> tags. These tags will
make the text enclosed text appear superscripted.
To demonstrate this feature select the xFX
JumpStart command you have just created and add the ®
symbol at the end, so the Caption
looks like this: xFX JumpStart®
NOTE: To add the ® symbol press and hold the ALT key and then
type 0174 on your keypad.
Now, enclose the ® symbol with the <sup> tag, so the Caption
looks like this: xFX JumpStart<sup>®</sup>
If you take a look at the Live Preview you will notice that
the results are not what we expected, but if you preview your
menus you will see that the real preview does render the tags
and makes the Caption look like this: xFX JumpStart®
Now, lets make our menus look cooler!
Select the first group, grpProducts
and click Menu->Color
Click the Back Color button and type
these values: FF,
C8 and 40
for red, green and blue respectively.
Set the border size to 2 and set the
four border colors to 80,
40 and 40
for red, green and blue respectively.
Click on the OK button to close and
commit the Color dialog.
Click on Menu->Margins and select
2 pixels for both the horizontal and
vertical margins.
To set up the other groups with the same style settings, just
make sure the prgProducts group is
selected and click on Edit->Copy
Check the Color,
Image and
Margins checkboxes and click OK.
Now select Edit->Paste, choose the
Paste to all groups option and click
OK.
As easy as that you have just applied the same style changes
to all the groups in the project!
Now,
let's change the style of the commands.
The steps are very similar as changing the style of the groups.
Select the first command under the
grpProducts group, Computers,
and click on Menu->Color
For the Normal state click on the
Reset button. This will assign the
default settings based on the parent group's style.
For the Mouse Over state, click on
the Text Color button, the click on
Windows and select the White color.
Now click on the Back Color button
and type 80, 40
and 40 for red, green and blue
respectively.
Now click on Menu->Font to set
the font type, size and style of the command's
Caption.
For both states select Tahoma for
the font type, 11 for the size and
Bold for the style.
Finally, to propagate the same style to all the commands,
make sure the Computers command is
selected and click on Edit->Copy
Select the Font and
Color checkboxes and click
OK.
Click Edit->Paste, choose the
Paste to all Commands and click
OK.
This should be a good time to preview your project.
Because the Computers and Accessories commands are used to
display another menu, is a good idea to let the user know that
by selecting them they will get another menu with more options.
An easy and effective way is to add small arrows to the right of
the commands' Caption.
These arrows can be small images you have created with some
graphic editor or you may use the two arrows bellow:
To save the above images, just right click on the image and
select Save Picture As... from the
context menu.
Note that one arrow is black and the other is white. This is
because the menus we have created have a light background color
when the items are not selected and a dark background color when
selected. Then, we'll use the black arrow for the default state
of the menus and the white for when the menus are selected. This
way the arrow image will always contrast with the command's
background color.
You should save these images in the
c:\DMB_Tutorial\images\ folder.
To
set up the Computers command to use
these arrow images, select the command and click
Menu->Image
Click on the Change button of the
Normal state, under the
Right Image pane.
Click on the From File... button and
select the black_arrow.gif image.
Click on the Change button of the
Mouse Over state, under the
Right Image pane.
Click on the From File... button and
select the white_arrow.gif image.
To apply these changes to the
Accessories command, select the
Computers command, click on
Edit->Copy and check the Image
checkbox.
Now select the Accessories command,
click on Edit->Paste, make sure the
Paste to the command Accessories
option is selected and click OK.
Continue » |