| Scenario: Positioning the menus inside a
table's cell (Free Flow mode)
To
configure our project so the toolbar is positioned using the
Free Flow mode we first click
Tools->Toolbars Editor->Positioning and select the
Free Flow option.
That's all that is required to configure the project.
You may have noticed that, besides the Free Flow option,
appears a code between brackets; this is the ID that the toolbar
will look for on your pages.
An ID is something like a unique name that you can assign to an
element on page to identify it and distinguish it from the rest.
The ID displayed next to the Free Flow option is telling you the
ID that you must use for this toolbar. If you have a project
with more than one toolbar then each toolbar will have its own
ID.
And how do we assign an ID to our cell? Its actually very
easy and all you will need is a text editor or you could use
your preferred HTML editor (such as FrontPage, Dreamweaver,
etc...)
So, start you favorite editor for HTML documents and load the
document containing the cell where you want the toolbar to
appear.
If you're using a visual editor such as FrontPage or Dreamweaver
you will have to switch to "Code View" so you can see the HTML
code.
Next, locate the HTML code for the cell. In our example, this is
how the HTML code for the cell looks like:
| <td align="left"
valign="top" bgcolor="#004080" height="100%" nowrap></td> |
Now, all you have to do is to add the "ID" parameter and
assing it the ID that DHTML Menu Builder generated for your
toolbar: dmbTB1ph. When done, the code for your cell will look
like this:
| <td align="left"
valign="top" bgcolor="#004080" height="100%" nowrap
id="dmbTB1ph"></td> |
Notice that we have highlighted the changes in bold/red text.
That's it... that's all that is required to assign an ID to a
cell.
Now, when you view your menus using a browser the menus will
look for the dmbTB1ph ID and will position themselves inside
whatever tag contains the ID.
Below you can see how the sample looks like after we have
added the ID parameter to our cell.
| Try to increase this
window's size as much as possible to ensue that the sample
layout is fully displayed. |
The great advantage of this method is that the toolbar will
flow with the cell's size, alignment and all its parameters in
general. This means that if you ever change your design layout,
as long as you keep the cell's ID, the toolbar will reposition
itself inside the cell... automatically.
This concludes this tutorial.
Click here to return the
"Positioning the menus" tutorial index. |