How to insert a css3 drop down menu Dreamweaver to many pages using Dynamic Web Template?

Q: I have a bit of a problem:

I am trying to use the menu in a (Dreamweaver) template and therefore have to put the CSS3Menu index files in the template folder - but when I create a webpage from that template in the root folder it can't 'see' the menu file in the template folder.

The header info in the template is 'locked' (not an editable region) - so I'm not sure how to allow the menu files to be linked to both the template and the other pages?

Is there an easy way round this?

A: 1. Use "Publish" function and save your menu. You can enter any name you like, for example enter "menu". So you'll have menu.html file and "menu_files" folder with all menu files.

2. Start Dreamweaver and open your website. Lets create the template for the website which we'll use on all pages. Delete all unnecessary code from this page.

3. Now you should add a CSS3Menu in your template page. Switch to the Design view mode. Decide where you would like the menu to appear in your page. Click in the spot you want the code to appear in and type the phrase: your code here

4. Open the generated in CSS3Menu menu.html page in any text editor. Copy the following code:

<link rel="stylesheet" href="menu_files/css3menu1/style.css" type="text/css" />
<ul id="css3menu" class="topmenu">
        <li class="topfirst"><a href="#" title="Item 0">Item 0</a></li>
        ...
</ul>


5. Go to the "Edit Menu" with Dreamweaver and select the "Paste" option to paste the menu code that we copied to the clipboard earlier. Since the phrase we typed was highlighted, it will be replaced when we paste the code in.

6. To display menu correctly you should change "menu_files/" to "templates/menu-files/".
Find the following code:

<link rel="stylesheet" href="templates/menu_files/css3menu1/style.css" type="text/css" />


Notice that if your website has a complex structure with many folders and subfolders, the best way is using of absolute links.
For example:

<link rel="stylesheet" href="http://domain.com/templates/menu_files/css3menu1/style.css" type="text/css" />


Absolute paths will be the same for all folders.

7. Switch to the Design view mode. Now you should select regions that will be editable. For example lets create three editable regions: two titles and the main content area. Right click the selected area, choose the templates, and make the template become new editable region. You can enter any name you like, for example enter "content".

8. Save this file as a template. So, the file will store in the assets of the files.

9. Your template will be saved in the "templates" folder. Now you should copy the "menu_files" folder into the same folder with your main_template.dwt page ("templates" folder).

Related