Dreamweaver Templates + Webstyle 4

[Xara Support]

I hope the following information helps those that have encountered problems with using Navbars within Dreamweaver templates

1. I create a folder at c:\intepub\wwwroot\dreamweaver\butterfly the butterfly folder contains 1 sub folders named support My aim is to apply a dreamweaver template to pages which will be stored within the butterfly folder and the sub folder support.


2. I Open Webstyle and select web pages followed by the themeset I wish to use
3. Click on the layout you wish to use and customise it as needed. For the purpose of this example I have selected the butterfly theme and selected Butterfly_page1
4. I select to save the layout. I select Dreamweaver enabled, set the project folder in which the edited layout should be saved and click on the save web page button
5. I set the page to be saved to c:\inetpub\wwwroot\dreamweaver\butterfly and name the page template.htm prior to clicking on the save button
6. This causes template.htm to be saved to the location above along with a folder named template_files containing the graphics and js files associated with the web page
7. I close webstyle and open Dreamweaver mx 2004
8. I select to create a new Dreamweaver site

9. I double click on template.htm to cause the page to be loaded and then left click on the navbar and then select split mode causing the html associated with the navbar to be displayed
10. I change

<script Webstyle4>document.write('<scr'+'ipt src="template_files/xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="template_files/template_hnavbar.js">'+'</scr'+'ipt>');/*img src="template_files/template_hnavbar.gif" moduleid="dreamweaver (Project)\template_hnavbar_off.xws"*/</script>

To read

<script Webstyle4>document.write('<scr'+'ipt src="/dreamweaver/butterfly/template_files/xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="/dreamweaver/butterfly/template_files/template_hnavbar.js">'+'</scr'+'ipt>');/*img src="template_files/template_hnavbar.gif" moduleid="dreamweaver (Project)\template_hnavbar_off.xws"*/</script>


The / tells the browser to go to the root directory. It will then view the dreamweaver directory followed by the butterfly directory followed by the template_files directory for the appropriate javascript file

11. I then select file followed by save as template and select to update links.
12. I know have a Templates folder containing templates.dwt
13. I edit the dwt file adding editable regions
14. I then click on file and new. I select the templates tab and click on the template saved in step 12. This causes an utitled page to be created.
15. I select file followed by save as and save the page as index.htm to the butterfly folder
16. I repeat steps 14 and 15 and this time save the pages as index.htm to the support folder within the butterfly folder.

This has allowed me to have a page named index.htm created from a dreamweaver template stored within the butterfly folder as well as the support folder.

If I wish to upload the site to my web server, I will need to ensure the site on the web server maintains the same structure. Assume the web site was www.xara.com. I would need to upload the site to xara.com/dreamweaver/butterfly and this will allow the navbar and all other graphics to be displayed correctly.

[Caerwyn]

Or maybe this is another way.

I’ve just moved from GoLive to DreamWeaver. I was drawn by the idea of being able to invoke WebStyle from within DreamWeaver. I make heavy use of templates in GoLive and combined with WebStyle it worked well. I was disappointed when I tried to do the same thing in DW, but I have a solution which to me seems more elegant than any I’ve read proposed so far. If you’ll bear with me then I’ll share it.

Setting the scene…
You have your main site in a folder called web, then the template files are in a sub folder called Templates. I’ve put the graphics from the WebStyle navbar in a sub folder called buttons.

1) Build your template as per normal.
2) Open it and click on the Insert -> WebStyle3 ->NavBar.
3) Do your thang…
4) When you save the NavBar, select the top level of your site for the folder to save in and the buttons folder for the graphics. You’ll have all the graphics plus the navbar.js file in the buttons folder. XaraMenu.js is saved to the templates folder.
5) Open the template in source code view and for the navbar you’ll see a segment something like this…


<script webstyle3>document.write('<scr'+'ipt src="xaramenu.js">'+'</scr'+'ipt>');document.write('<scr'+'ipt src="../buttons/en.js">'+'</scr'+'ipt>');/*img src="../buttons/en.gif" moduleid="Tectryx (Project)\en_off.xws"*/</script>


Replace it with the following.

<SCRIPT SRC="xaramenu.js"></SCRIPT>
<SCRIPT SRC="../buttons/en.js"></SCRIPT>

When you save your template all the files derived from it will update correctly. When you upload to your server the links will all work, with no fussing about, because they are relative to the document not the site root.

So far so good but it really looks crappy in page layout mode. Never fear we can fix that too; add the following line just afterwards.

<NOSCRIPT><IMG SRC="../buttons/en.gif"></NOSCRIPT>

Now you have the pretty picture in design mode too, but what if the user runs an old version of IE with no scripting or a paranoid user has scripting turned off (and who can blame them). Add a map, and you’ll have a set of buttons which work whether scripting is on or off. Okay so you’ll lose the submenus if there’s no scripting, but at least it looks consistent. If you don’t want to add a map then you should delete the NOSCRIPT line before you go live other wise you’ll end up with an image which looks like a menu but does nothing. That’s about the only draw back I can see.

In the previous example ‘en’ is the name of my navbar, you’ll have to change it to match whatever you’ve used.

You’ll lose the ability to double click on the NavBar to launch WebStyle but the answer is pretty straightforward. Just click after your code and launch WebStyle, when you’ve finished just delete the inserted block code and keep your modified version.

Let me know what you think or if you use the idea.

[dmattock]

Just a big thank you for your advice. I am new to Web Style and dwt and was having great difficulties installing a NavBar into a Dreamweaver template - the links just would not work, until I followed your advice. An effective and neat solution to the problem and my site now works beautifully.

Many thanks again

David