| Introduction This tutorial will guide
you through the complete process of creating working menus from
scratch.
If you would like to see how the menus, the menu bar and the
project will look like at the end, download the ZIP file containing everything mentioned
on this tutorial.
Creating the menu bar
There are many ways you can create a menu bar.
The easiest and most recommended is to create a set of images
to serve as hotspots and place them inside the cells of a
table. Although you could use text instead of images, the use
of images is highly recommended. Also, it is very important
that you create independent images for each one of your
hotspots, instead of creating a single image and then using an
image map to define hotspots; the HotSpots Editor (a tool you
will learn to use in this tutorial) does not support image maps.
You can use any graphic application to create your hotspot
images. Some sample images are provided here for you to use with
this tutorial:
To save the above images, just right click on the image and choose Save Picture As... from the
context menu.
Open your preferred HTML editing application and create a
table with 4 cells in it. Since you will be using images, you
can choose any type of alignment for the table and its cells. Then place one image inside each cell.
When using images as the hotspots, the menus created with DHTML
Menu Builder will be able to auto-align to the images
dynamically regardless of the size of the browser or the screen
resolution. This is why it is so important the use images
instead of text-based hotspots.
Now you must prepare these images so they are ready to accept
the menus. Only those images that will display menus need to be
prepared. In this tutorial we'll create two menus, one for the
Products hotspot and another for the Links hotspot.
The first step is to convert the images into hyperlinks. Each HTML
editing application has its own way to create a hyperlink, so you
should consult your program's documentation to see how to do
this. When you're asked for the target link to which the
hyperlink should (the pound or hash sign, typically found above the number 3 on the keyboard) point to, type: #
(the pound or hash sign, typically found above the number 3 on the keyboard).
The pound symbol (#) means that this hyperlink will point
to itself. This is known as a "null-hyperlink."
(If you want to do this by hand, enclose the image's
code in <a> </a> tags:
The source code of the just the Products image should look
something like this:
<img border="0" src="products.jpg"
width="100" height="30">
After conversion into a null hyperlink, it will look something like this:
<a href="#"><img border="0" src="products.jpg" width="100"
height="30"></a>
This is all you need to do to prepare the images that will be
used as hotspots.
Create a folder on your hard drive
and call it DMB_Tutorial. (For example,
"c:\DMB_Tutorial\") Then create
an empty HTML file in that folder and name it hotspots.htm.
Later in the tutorial you will see how we will use this file as
the receiver for the menus.
Now, create a folder called menus inside the c:\DMB_Tutorial\ folder.
We will use this folder to store the JavaScript file generated
by DHTML Menu Builder.
Finally, create a folder called images inside the c:\DMB_Tutorial\ folder.
We will use this folder to store any images you menus may use.
Your folder structure should look similar to the image below.

Continue » |