PrintIn this tutorial we use root-relative paths for the links.
The steps involved are exactly the same for document-relative links.
Since document-relative paths can look very different to root-relative paths (depending on the location of the active document), we have included a separate version of this tutorial for the document-relative situation, see Doc-relative links.
- 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 Id.
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:
Make sure you specify root-relative links (i.e. use paths that start with "/").
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 root-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 'Site Root'.
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 and then press Cancel.]
Make items Seven, Eight and Nine a submenu of item Six...
...while holding down the Shift key, click item Seven and then item Nine. With these 3 items selected, click the Indent button
.
Hold down the Shift key 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.
We created a complete navigable website using a template to copy a menu onto each page in the website.
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 the editable region that we named "alt" and also into the page title on each page stub.
In this example we used root-relative paths for our links when defining the menu. If we had used document-relative paths instead then we would have had to make the paths relative to the location of the active page.
- Open an instance page.You can use any one of the page stubs pg1.htm,... pg12.htm.We need to open one of the pages that are attached to the template as the active page. In Dreamweaver, close any pages that are currently open and then open pg4.htm.
Open the Menukit extension: Commands->Menukit.
Since the active page, pg4.htm, 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.
In this case you can select either the active page itself, pg4.htm, or the attached template, menu.dwt.
Select pg4.htm and notice that menu M1 disappears from the Menu selection list. This is because the menu is in a locked region in the instance page pg4.htm and therefore cannot be edited. In fact, menu M1 can only be edited in the template, menu.dwt.
Select menu.dwt and notice that menu M1 re-appears in the Menu selection list. Now we can make our modifications to M1.
- Amend menu M1.
Change the position and color of the menu...
On the Menu tab, change the value of 'Top' from 100px to '70px'. Change 'Left' from 20px to 120px. Change the theme from 'Green3' to 'Red6'.
Change the menu type...Change the value of 'Type' from CSS Flyout to, say, CSS Dropdown.
Change menu contents...Select the Structure tab and change at least one of the labels. For example, change the second item's label from "Two" to "Second".
- Save Changes
Save and then exit Menukit.
If you have followed all the instructions in this tutorial your site files should look like the contents of chkpt4.zip which you can find in the support files.Menukit opened and updated the stylesheet file M1.css and the template menu.dwt.Save all files and then press 'Update' when the Update Template Files dialog appears.
Save any unsaved changes to pg4.htm and then upload the entire site to the server and test the changes you have made.
