PrintIn this tutorial we use document-relative paths for the links. The method we use is exactly the same as in the root-relative tutorial. Menukit takes care of any changes that must be made to links when a menu is viewed/processed from different folders in the site.
Since the paths are document-relative, the links will look different when Menukit is opened in pages that are in different folders in the site.
We will illustrate this by opening Menukit in active documents that are stored in folders at different levels in the site's directory structure.
- Create a template.
First, we create a template and add an editable region to it.Start Dreamweaver in an empty site and go to: File->New...
Select category 'Template page' in the General tab and then select 'HTML template' in the 'Template page' panel. Create the template.
Make sure you are in Design View.
Use the Draw Layer tool on Dreamweaver's Layout tab/menu to create a small layer near the top right corner of the template. We will use this layer to put a page title on each page that will be based on this template.
Make the layer about 70px high by 180px wide and position it on the right side of the page where the menu will not cover it (eg left 400px, top 40px).
Click inside this layer to place the cursor inside it and then select
Insert->Template Objects->Editable Region.
When you save the template Dreamweaver creates a folder named 'Templates' in your site's root directory and saves the template in it.Change the name of the editable region to 'alt'. For the purpose of this tutorial you must spell it 'alt' exactly. (This is explained further in step 5 below.)Besides giving it the name 'alt', Dreameaver also inserts the name as text inside the editable region. Just delete the 3 letters a-l-t to leave the editable region empty. Select
At this stage your site files should look like the contents of chkpt1.zip which you can find in the support files.File->Save as Template...and save the template as 'menu.dwt'.
- Create a temporary page.
Create a blank HTML page and save it in your site's root directory as temp.htm.
[Creating this temporary page is optional. You may find it useful in the next step to have a temporary page available if you would like to learn about the difference between a document-relative path and a root-relative path.]
- Create the menu.
If necessary, you can refer to the 'Multi-level Menu' tutorial.Open 'menu.dwt' as the active document and create a menu named 'M1' with 12 items...Open the Menukit extension: Commands->Menukit. Click
and
enter 'M1' (without the quotes) for the menu name.
Select 'CSS Flyout' for 'Type' and 'Green3' for 'Theme'.
Select the 'Structure' tab and create 12 new menu items by clicking
12 times.
Hold down the Shift key (Windows) or Command+Shift (Macintosh) and click on the first and last items to select all 12 items.
Click
to open a multi-edit window. When you have finished entering
the menu details your multiple-edit window should look like this:
Since our active document (i.e. menu.dwt) is stored in the /Templates directory we specify a document-relative link to page pg1.htm in the root directory as ../pg1.htm.Make sure you specify document-relative links.
At this stage your site files should look like the contents of chkpt2.zip which you can find in the support files.Press Save to save your work (but don't exit Menukit). - Define the hierarchical structure.
[If you would like to verify that the above links
are document-relative then highlight item 'One' in the Structure tab and
click the browse button
to open the 'Select target URL' dialog.
Set the 'Relative to:' field to 'Document'.
Browse to the temporary file that you created in step 2 and click on it once to highlight it (but don't press OK).
Confirm that the path is ../temp.htm in the URL field.]
Make items Seven, Eight and Nine a submenu of item Six...
...while holding down the Shift key (Windows) / Command+Shift (Macintosh), click item Seven and then item Nine. With these 3 items selected, click the Indent button
.
Hold down the Shift key (Windows) / Command+Shift (Macintosh) and click item Four and then item Ten (selecting 7 items altogether). Click the indent button.
The Treeview panel should now look like this:
- Set menu properties.
Select the Menu tab and tick the 'Create page stubs' checkbox.Tick the 3-D Buttons checkbox if you want the menu buttons to have a 3-dimensional appearance.
To set the position of the menu on the page, enter 100px into the field labelled 'Top' and 20px into the 'Left' field.
Menukit may take a minute or so to create the page stubs before exiting.Press Save and and then exit Menukit.Menukit generates a set of page stubs with the template attached to each page. As it generates each page stub, Menukit searches the template for any editable regions whose names begin with the letters 'alt'. For each one that it finds it inserts the content of the corresponding 'Alt' field into the editable region. Since we put an editable region named 'alt' inside a small layer on the template, we end up with a set of page stubs containing the menu and the Alt text that we defined for each link.
- Save the template and update the page stubs.
Save All.At this stage your site files should look like the contents of chkpt3.zip which you can find in the support files.When the 'Update Template Files' dialog appears press 'Update'.Upload the website to the server and test.
Menukit generated a set of pages and attached the template to each page.
Menukit inserted the Alt text that we defined for each menu item into an editable region in the template that we named "alt"; it also inserted this text into the page title element of each page.
In this example we used document-relative paths for our links when defining the menu. When Dreamweaver updated the pages based on the template, it adjusted the links to make them relative to each page. Thus, the links in page pg8.htm (in /sub1/sub2) are different to the links in page pg1.htm (in the root folder). Here is a code fragment showing the links in pg1.htm:
<li><a title="Page One" href="pg1.htm">One</a></li>
<li><a title="Page Two" href="pg2.htm">Two</a></li>
<li><a class="par" href="#">Three</a>
<ul class="L1">
<li><a title="Page Four" href="sub1/pg4.htm">Four</a></li>
<li><a title="Page Five" href="sub1/pg5.htm">Five</a></li>
and this is the same code fragment showing the same links in pg8.htm:
<li><a title="Page One" href="../../pg1.htm">One</a></li>
<li><a title="Page Two" href="../../pg2.htm">Two</a></li>
<li><a class="par" href="#">Three</a>
<ul class="L1">
<li><a title="Page Four" href="../pg4.htm">Four</a></li>
<li><a title="Page Five" href="../pg5.htm">Five</a></li>
- Update menu using instance page pg1.htm.
In Dreamweaver, close any pages that are currently open and then open pg1.htm.Open the Menukit extension: Commands->Menukit.
Since the active page has a template attached to it, Menukit displays a drop-down selection list on the Menu tab that allows you to pick the page you want to edit.
Select the template page, menu.dwt.
Click on the Structure tab to bring it forward. Click on the plus signs to open each submenu.
Note that the links are shown relative to the active page, pg1.htm.
We only need to make a minor change for this lesson. Change label 'Twelve' to 'XII'.
Save and then exit Menukit.
Menukit opens and updates both the stylesheet file M1.css and the template menu.dwt.
At this stage your site files should look like the contents of chkpt4.zip which you can find in the support files.Save all files and press 'Update' when the Update Template Files dialog appears.Save the active page, pg1.htm, and upload the entire site to your test server and test the changes you have made.
Confirm that the button label of item twelve has been changed on all the pages in the site (you may have to refresh the browser cache).
We have already processed a page, pg1.htm that is in the root folder.
Now we will process a page, pg8.htm, that is in a different folder, /sub1/sub2/, that is 2 levels deeper than the root folder.
- Update menu using instance page pg8.htm.
In Dreamweaver, close any pages that are currently open and then open pg8.htm.Open the Menukit extension: Commands->Menukit.
Since the active page has a template attached to it, Menukit again displays a drop-down selection list on the Menu tab that allows you to pick the page you want to edit. Select the template page, menu.dwt.
Click on the Structure tab to bring it forward. Click on the plus signs to open each submenu.
Note that the links are shown relative to the active page, pg8.htm.
Again, we can make do with just a trivial change to test that the menu is updated properly. This time change label 'Eleven' to 'XI'.
Save and then exit Menukit.
Menukit opens and updates both the stylesheet file M1.css and the template menu.dwt.
At this stage your site files should look like the contents of chkpt5.zip which you can find in the support files.Save all files and press 'Update' when the Update Template Files dialog appears.Save the active page, pg8.htm, and upload the entire site to your test server and test the changes you have made.
Confirm that the button label of item Eleven has been changed on all the pages in the site (again, you may have to refresh the browser cache).
