Menu Maker and DreamWeaver Template

Working with Menu Maker with Dreamweaver templates seems to be as complicated as it should be. For one thing, it requires that an absolute path be used to point to the directory where the MM files resides; causing it to be changed from working from published files in your local directory and publishing it on the host server.

Does anybody has any work around that allows you to use relative paths?

What's the best place to store the files, the Templates directory or the image or graphics directory?

Thanks,

Sayasfx

Below are some instructions for using Dreamweaver templates with Webstyle. However the same would apply with menu maker. There are probably other ways to achieve this and those that are more accustomed to dreamweaver might be able to post an alternative solution!


When you create a template and insert a navbar within it, it causes various script elements to be inserted in the template page which reference the location of the JavaScript files used to create and display the navbar. The script elements contain relative links to the location of the JavaScript files

For example,

<script webstyle3>document.write('<scr'+'ipt src="xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="template.js">'+'</scr'+'ipt>');/*img src="template.gif" moduleid="webstyle (Project)\template_off.xws"*/</script>

Following this, you select to create some web pages which you would probably store in a separate folder in comparison to the template file.

Having created a page you select to apply a template to the page This causes the script elements to be applied to your web page. Assume your web page is named index.htm Applying the template will cause the script elements to be applied to the page as
<script webstyle4>document.write('<scr'+'ipt src="xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="template.js">'+'</scr'+'ipt>');/*img src="template.gif" moduleid="webstyle (Project)\template_off.xws"*/</script>

Now you select to view your web page index.htm in a web browser. The web browser reads the source code of the web page and attempts to retrieve the file xaramenu.js and template.js from the same folder as where the web page resides as this is what the source code tells it to do.

However the navbar will not display. This is because the files xaramenu.js and template.js are not in the same folder as the web page.

To work around this problem, you need to know the published url of where the template file and the other files in the template folder will be published to.

This will probably be http://www.yourdomainname.com/Templates

Once you know this information and have uploaded the Template and files within the folder to this location, select to edit the html which makes up your template. Find the code which references the navbars as below

<script webstyle3>document.write('<scr'+'ipt src="xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="template.js">'+'</scr'+'ipt>');/*img src="template.gif" moduleid="webstyle (Project)\template_off.xws"*/</script>
And ammend this to contain the full url of where the files mentioned are located. So the above would become

<script webstyle3>document.write('<scr'+'ipt src="http://yourdomainname.com/Templates/xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="http://yourdomainname.com/Templates/template.js">'+'</scr'+'ipt>');/*img src="template.gif" moduleid="webstyle (Project)\template_off.xws"*/</script>

Then apply the template to your web pages stored in separate folders and the menu would be displayed in the web pages when viewed in a web browser.

The menu will not be displayed within the editing mode of Dreamweaver. To resolve this problem, lets look again at the code.
<script webstyle3>document.write('<scr'+'ipt src="http://yourdomainname.com/Templates/xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="http://yourdomainname.com/Templates/template.js">'+'</scr'+'ipt>');/*img src="template.gif" moduleid="webstyle (Project)\template_off.xws"*/</script>

In the above example, you see the code img src="template.gif This is being used by Dreamweaver to cause the image of the navbar to be displayed in the normal mode of Dreamweaver.

We need to change the relative path to the image template.gif to be a full path. Therefore the above snippet would become

<script webstyle3>document.write('<scr'+'ipt src="http://yourdomainname.com/Templates/xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="http://yourdomainname.com/Templates/template.js">'+'</scr'+'ipt>');/*img src="file:///c:/template/template.gif" moduleid="webstyle (Project)\template_off.xws"*/</script>

Alternatively Navigate to the folder on your local computer where this gif file resides. Copy the file and paste it into the folder in which your web pages reside. This will allow the graphic to be displayed within your web pages in the Dreamweaver editor.

Thank you, trust this helps
CS

Hi - I've was looking on this forum to see if I could find a solution to the problems I had been having trying to use Menu Maker (MM) with Dreamweaver (DW) templates - but without any luck. However, I think I have now cracked it, so it only seemed polite to join up and share what I have discovered:

Step 0 - install MenuMaker and the Dreamweaver extension

Step 1 - create your DW template with a space where you intend the menu to go. In my case this was a table cell running the width of the page. The template is stored, as usual, in the Templates folder.

Step 2 - insert the MM menu into the template using the DW menu Insert > Xara Menu Maker > NavBar/Menu

Step 3 - use MM to create your menu in the usual way... but when you come to save the menu make sure you save it at the root level of your website (i.e. not in the Templates folder or some other sub-directory). I found it useful to set the Name (bottom left corner of the save files daialog)to something sensible like 'navbar' - this controls the names of the graphics (e.g. navbar_b1.gif) and the javascript menu config file (navbar.js)... I'll use these examples from now on for clarity.

When you are creating menu links, type them in 'from the root' - e.g. to create a link to a file called foobar.htm in a directory called pugwash, you would type pugwash/foobar.htm as the link. Don't type /pugwash/foobar.htm or it will all go horridly wrong.

You'll find that the file xaramenu.js is stored in the Templates folder while all the menu graphics and the config file navbar.js are stored in the root location. Don't move any of these files or it all stops working...

Step 4 - you need to edit the line of code in the template that defines the menu... for example mine looked like this:

<pre class="ip-ubbcode-code-pre"><script menumaker>document.write('<scr'+'ipt
src="xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt
src="../navbar.js">'+'</scr'+'ipt>');/*img src="../navbar.gif"
moduleid="clt-new (project)\navbar3_off.xws"*/ </pre>

Vital bit >>>> Insert /Templates/ before xaramenu.js and delete .. before /navbar.js and .. before /navbar.gif so it reads

<pre class="ip-ubbcode-code-pre"><script menumaker>document.write('<scr'+'ipt
src="/Templates/xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt
src="/navbar.js">'+'</scr'+'ipt>');/*img src="/navbar.gif"
moduleid="clt-new (project)\navbar3_off.xws"*/ </pre>

Save the template file and use it to create pages in the usual way - it will still work even if they are in sub-directories etc.

Step 5 - One more wrinkle... if you need to edit the menu, open up your DW template file, click on the MM menu, click the Edit button in the Properties Inspector... which opens up MM... do your editing and then click Save > Save and Exit to return to DW. You'll need to carry out Step 4 again to add /Templates/ and delete the '..'s to fix the code before you save the template and update all the files that use it.

Well, that was a fun afternoon at work - perhaps the next version of MM ought to make this process a bit easier?

Anna

Hello Anna
Your solution seems reasonable and I've tried it but still have problems with the menu showing up in the pages that have the template applied. The template page shows the menu correctly but none of the html pages that use the template.
The only way I can see the menu is to create another editable region where I wanted the menu to appear and paste in the script calling the menu.
Do you have any idea why the menu does not appear when it is inside the template? The script in the correct location, the paths are correct.
Thanks for any ideas any of you have.
Stan

Anna, you are the queen of the jungle. Thank you from my bottom to my heart - bad scripting, from the bottom of my heart. This solved one big problem and now if I can only figure out why I am getting a message that the parentObj has no properties.

I copied your solution to Word and saved it. This company should hire you to write the instructions.

Thank you very much
The Virtual Writer

In menu maker and Dreamweaver Template, graphics come in many flavors but not all file formats are suitable for all purposes. In general, there are graphics formats suitable for printing and those for on-screen viewing or online publishing. Within each group there are also formats that are better than others for the same task. This simple chart outlines the best use for several common formats. Match the format to your job either by starting with graphics in that format or by converting other artwork to the desired format.