Dec 10

Tutorials from Sothink DHTML Menu users: Incorrect path to menu and resources

This is not a tutorial site. Sothink has an an extensive DHTML Menu Tutorial Center with tutorials on getting started and more advanced subjects. Also, the DHTML Menu program has a Help section. The suggestions we offer here are based on our use of DHTML menu They work for us, and they might work for you, too. Before we start with the step-by-step instructions, here are three recommendations that we feel are important:
•    Use DHTML menu as a standalone program. If you use Adobe GoLive, Dreamweaver, Expression Web, or FrontPage you may be tempted to integrate DHTML menu with your Web authoring software using one of the plug-ins supplied with DHTML menu. Do not succumb to the temptation; if you do, you are making more work for yourself and asking for trouble.
•    Do not include menu code in your pages. Always generate a JavaScript include file. There are many advantages to having your menu in an external JavaScript file, but perhaps the most important advantage is that you only have to edit and upload a single file whenever your menu changes.

•    Unless you use Dreamweaver CS4, download and install Google’s Chrome Browser. We’re not suggesting that you give up Firefox or Internet Explorer, but Chrome is an excellent browser for previewing menus and Web pages. It is based on the WebKit browser framework, and it is very fast and fairly standards-compliant.
For this exercise, we created an actual site with a working menu. Here are the steps:
1) On our local system we created a folder named “newsite”, and within the “newsite” folder we created a folder named “menu”.
2) We developed a fixed width Web page with a header, top navigation, content, and footer.
3) We developed a DHTML Menu based on the “Dark” template.
a. We highlighted <Top-level Menu> in the menu tree and then selected Global>Resource Folder.

b. In Global – Resource Folder, we clicked on the “Switch to Web Path” icon in the upper right corner.

c. Under Web Path, we entered menu/ for both JavaScript and Images.

The example shown above will work if you have a single level site. However, if your site has multiple levels, if you are using a PHP template, or if you just want to be safe, enter a complete path such as http://yourdomain.com/menu/.

d. We changed the template menu text and links to meet the needs of our site. The menu links should include the name of the page and the extension, as in the following example:

Make sure the link does not include a path on your local hard disk, as in this example:

If you happen to have a link to a page in a different folder, add the name of the folder in front of the page name, followed by a slash. For example, members/agendas.html. Also, be sure to read Item 5 on the next page.
e. Under Global – General we selected Center for the menu alignment.

f. We selected Publish JS.. from the Publish menu.

g. Here is the Publish JS popup:

g1. We named our JavaScript include file newsite_menu.js and saved it in the site’s “menu” folder.
g2. We copied and pasted this line of code in the header of our Web page, just below the title.
g3. We ignored the first line and copied the <script> code to our top Navigation DIV.
g4. We entered the path to the site’s “menu” folder for both JavaScript and Images.
g5. We checked “Copy the resource files”.
g6. We clicked OK and the JavaScript include file and all the menu resource files should have been copied to the site’s “menu” folder.
h. As a final step, we saved the menu .pgt file to the “menu” folder. It is uploaded to the server with the other menu resource files, and that gives us a backup of the .pgt file.
4) The work on the menu is done and we can now complete work on the (X)HTML pages and upload the site to the Web server.
5) The steps we have suggested work fine as long as all the site’s pages are in a single folder. There may be times, however, when some of a site’s pages are in a different folder. As an example, you may have a “members only” page in a password-protected subdirectory (folder). In order for a DHTML Menu to work in such a situation, do the following:
a. For the Web Path, use a complete URL for the “menu” folder, as in the following example:

b. Go to Global – Link Prefix and enter a complete URL for the site, as in the following example:

6) DHTML Menu requires JavaScript. Since a small number of visitors to your site may have JavaScript disabled, it is a good idea to provide alternate navigation, and DHTML Menu makes it easy to include alternate navigation. On the “Tools” menu you will see options to “Generate Site Map” and “Generate Search Engine Friendly Code.” For illustrative purposes, this site includes both options.