Print this Tutorial Print
Create a website with Nested Templates

Objective Create a 2-tiered website navigation system using nested templates.

The requirement is for a website that is divided into a number of different sections (in this tutorial we will refer to these as Departments). In the upper tier, a main menu is used to navigate between the different departments.

In the lower tier, each department has its own separate menu to navigate among that department's pages:2-tier structure

Outline of Method We use a base template to hold the main menu as well as page layout details that are common to all pages. We also use a set of nested templates, one for each department, that contain a menu and other content that is specific to each department.

  • Create a base template that contains a dropdown menu in the header region of a 3-column page.
  • Make an instance of the base template for each department.
  • Insert a department menu (CSS flyout) into each page and adjust the page headings, etc., as appropriate for each department.
  • Save each page as a template. These are the nested templates (i.e. nested within the base template).
  • Use the nested templates to create instance pages for each department.
  1. Create a temporary page with the basic layout. Download the support files for this tutorial. Create an empty site and unzip the chkpt1.zip files into it.

    Since we will use the same 3-column layout for every page, we will first create a template page to hold the 3-column layout.

    If you want to learn more about this 3-column layout refer to the 3-Col using Divs tutorial in the 'Page Layouts' section.
    Start Dreamweaver and open the initial page, start.htm, which contains a 3-column layout.

    Note that here we added a few headings and some styles for the <h1>, <h2> and <h3> elements to the basic 3-column layout . We will modify these headings later in the tutorial for the individual departments and pages.

    We gave 'topNav' a property "align: center" and a width of 100% (of the viewport).
    Since we want our dropdown menu to be centered at the bottom of the header region so that it can drop down over the main content area, we inserted a <div> named 'topNav' into the header and positioned it absolutely at the bottom of the 'header' div. We will use 'topNav' as a container for our dropdown menu.
  2. Insert a Dropdown Menu into the header. We require a dropdown menu that will allow navigation between departments. Among the support files you will find a page named 'topmenu.htm' that includes a ready-made menu named 'SDM' for navigating between 5 departments. We will now copy that menu into our page.

    If necessary, refer to the 'Import a Menu' tutorial in the 'Creating Menus' section.
    Open the Menukit extension, Commands->Menukit.

    Use the 'Import menu' buttonImport menu on the Menu tab to import the menu from page topmenu.htm. Rename the menu from 'SDM' to 'DM' upon import.

    Now we will put the menu into the 'topNav' <div>...
    ...select 'topNav' in the Container selection list and set Position to 'relative'.

    Set the values of both 'Top' and 'Left' to 0px. The Menu tab should now look like this:

    Save and exit Menukit. Save all open files.

  3. Save the page as a template.

    With start.htm as the active document, go to

    File->Save as Template.

    When the "Save as Template" dialog opens enter the name 'main' in the 'Save as:" field and press Save. Press 'Yes' when it asks if you want to 'Update Links?".

Review We have created the base template. It has a scalable 3-column design and it contains a dropdown menu for navigating between 5 departments.

What do we do next?

Now we need to create 5 instance pages of this template that we can use as master pages, one for each department. We will insert a CSS Flyout menu onto each of these master pages for navigating that department's pages.

Then we will create a nested template from each department master page just as we did with the start.htm page above.

  1. Insert Editable Regions into the template. The template that we created does not have any editable regions in the <body>. Although we could create some instance pages based on this template we would not be able to modify them in any way.

    Now we will insert an editable region into each of the 5 areas (header + 3 columns + footer) in the template...

    Working in Code view, move the cursor to just inside the closing </div> tag of the header <div> (i.e. immediately to the right of the closing </div> tag that closes the 'topNav' <div> at or near line 142) and go to:

    Insert->Template Objects->Editable Region.

    Name the editable region 'headerReg' and press 'OK'. Delete the text 'headerReg' that Dreamweaver has placed inside the editable region to leave it empty.

    Continue in this way to insert 4 more editable regions as follows:

    • insert an editable region named 'leftCol' inside the 'left' div
    • insert an editable region named 'rightCol' inside the 'right' div
    • put an editable region named 'mainContent' into the 'content' div
    • insert 'footerReg' into the 'footer' div

    Just as you did with the text 'headerReg', in each case delete the text that Dreamweaver inserts into the editable region.

    We also need to make the headings editable...

    Highlight the word 'Department' inside the <h2> tags and then go to

    Insert->Template Objects->Editable Region.

    Name the editable region 'alt1' (spell it a-l-t-1 exactly). Now delete the text 'Department' from inside the editable region (this editable region must be empty for our purposes.)

    Highlight the 2 words 'Page Header' inside the <h3> tags and then go to

    Insert->Template Objects->Editable Region.

    Name the editable region 'alt2'. This time, don't delete the text inside. (i.e. leave the text 'Page Header' as it is). This is explained further in step 6 below.

    Save the template. If Dreamweaver displays a warning about placing an editable region inside a block tag, just ignore it - press OK.

    Similarly, if Dreamweaver dispalys a message about changing a template and updating pages that use it, press OK (nothing will be updated on this occasion).

  2. Create a master page for each department.
    When generating a page stub, if Menukit finds any empty editable regions whose names begin with the letters "alt", it inserts a copy of the 'Alt' field from the menu definition. If the 'Alt' field is empty then it inserts the menu item label instead.
    We will now use Menukit to generate the master pages...

    Note that the Dropdown menu in the main.dwt template has a set of links to pages named mast1.htm, mast2.htm, etc. Since these pages have not yet been created, we can use Menukit to generate page stubs for them. And, since the menu is defined in a template, Menukit will attach the template to each stub.

    With main.dwt as the active document, start Menukit and tick the 'Create page stubs' checkbox.

    At this stage your site files should look like the contents of chkpt2.zip which you can find in the support files.
    Save and Exit Menukit. Menukit creates the pages.

    Save all and press 'Update' when the Update Template Files dialog appears.

  3. Edit the department master pages
    When Menukit is opened on a page that is attached to a template, it displays a drop-down selection list named "Page/template" on the Menu tab. This allows you to choose which page you want to edit i.e. the page itself or the attached template. In this case we want to insert a new department menu into the master page so we select mast1.htm.
    Close any files that are open and then open mast1.htm. Delete the text 'Page Header' from the 'alt2' editable region to leave that region empty.

    With mast1.htm as the active document, start Menukit. Select 'mast1.htm' in the 'Page/template' selection list on the Menu tab.

    We want to insert a CSS Flyout menu, named 'D1', that links to a set of about 10 pages that will be stored in a folder named 'dept1' in the site's root folder.

    Among the support files there is a page named dmenu1.htm that includes a ready-made CSS Flyout menu, 'SD1', that links to 10 pages named pg1.htm, pg2.htm,... pg10.htm in a folder named 'dept1'.

    Use the 'Import menu' buttonImport menu on the Menu tab to import the 'SD1' menu from page dmenu1.htm and rename it upon import as 'D1'.

    On the Menu tab, select 'leftCol' in the 'Container' drop-down list. Leave all the other fields just as they are. They should look like this:

    Save and exit Menukit. Save all open files.

    Repeat the above procedures (read the Warning next before you begin) for mast2.htm, mast3.htm, mast4.htm and mast5.htm importing the menus 'SD2', 'SD3', 'SD4' and 'SD5' from pages dmenu2.htm, dmenu3.htm, dmenu4.htm and dmenu5.htm renaming them on import as 'D2', 'D3', 'D4' and 'D5' respectively.

    At this stage your site files should look like the contents of chkpt3.zip which you can find in the support files.
    Warning! It is very important that you remember to delete the text 'Page Header' and to select 'mast*.htm' in field 'Page/template' in each case before importing the menu. And don't forget to select 'leftCol' in 'Container' after you have imported the menu.
  4. Make nested templates from the master pages Select mast1.htm as the active document.

    Go to 'File->Save as Template...' and name the template 'dept1'. If Dreamweaver displays a warning about placing an editable region inside a block tag, just ignore it - press OK.

    Press 'Yes' when it asks 'Update Links?'.

    Repeat this for mast2.htm,... mast5.htm to make 4 more nested templates named dept2, dept3 dept4 and dept5.

Review - Important! Menu 'D1' is inside an editable region named 'leftCol' in the nested template, dept1.dwt.

As things stand, region 'leftCol' will remain editable in any pages that are based on dept1.dwt. Because of this, Dreamweaver will not update the menu 'D1' in any pages that are based on the template following updates made to 'D1' in the template. (This makes sense - it should not overwrite any manual changes you might have made to those pages).

However, this is not the behaviour we want. We want the 'D1' menu to be editable only in the nested template itself and we want any changes made to it in the nested template to be copied automatically to any pages that are based on that template.

According to the rules for Nested Templates...

Editable regions in a base template (main.dwt) pass through the nested template (dept1.dwt) and remain editable in pages based on the nested template unless a new editable region is defined in that region in the nested template.

Therefore, to get the effect we want, we simply need to insert a new editable region into the 'leftCol' editable region in mast1.dwt. Then, only the new region will be editable in pages that are based on dept1.dwt but the rest of the contents of 'leftCol' will be locked. And, any subsequent changes that we make to menu 'D1' in the nested template will be copied to all pages based on the template.

  1. Insert a new editable region in each Nested Template Open the template 'dept1.dwt'.

    Working in Code view, place the cursor inside the 'leftCol' editable region immediately ahead of the menu code i.e. before the line that looks like this:

    <div id="D1m" class="FND1">

    Go to:

    Insert->Template Objects->Editable Region.

    Name the editable region 'newLeftCol' and press 'OK'. As before, delete the text 'newLeftCol' that Dreamweaver puts inside the editable region.

    *As an experiment, don't insert a new editable region in dept5.dwt. We'll examine the effect this has on propagating updates in step 14 below.
    Save the template.

    Repeat the above steps to insert new editable regions in the other templates dept2.htm, dept3.htm and dept4.htm*.

  2. Create Pages for all Departments In order to create a set of pages for each department, we will make use of Menukit's ability to generate page stubs for missing pages.

    Repeat for each department template...

    Open the department template, making it the active document.

    Start Menukit. On the Menu tab, select the department template in the Page/template selection list. Put a tick in the 'Create page stubs' checkbox, like this:

    Save and exit Menukit. Save all open files.

    Press 'Update' when it asks 'Update templates used in these files?'.

    Repeat for each of the other department templates 'dept2.dwt', 'dept3.dwt', 'dept3.dwt', 'dept4.dwt' and 'detp5.dwt'.

  3. Upload and Test
    At this stage your site files should look like the contents of chkpt4.zip which you can find in the support files.
    Upload the entire site to the testing server and test the site.

    You will be able to use the Dropdown menu to switch between departments and the Flyout menus to navigate within a department.

  4. Maintaining the 2-tier Site Navigation system You may use Menukit to make changes to a menu by editing its template directly (i.e. opening the template where the menu is defined, making it the active document.)

    or

    You may use Menukit to make changes to a menu indirectly by using an instance page as the active document and editing the attached template where the menu is defined.

    For example, the pages in the dept2 folder are attached to 2 templates, i.e. 'dept2.dwt' and 'main.dwt'. If you open page dept2/pg7.htm as the active page, Menukit gives you access to menus on each of these attached templates, enabling you to amend either the top-level menu 'DM' defined in 'main.dwt' or the department menu 'D2' defined in 'dept2.dwt'.

    In the above screenshot the base template, 'main.dwt', has been selected and the Dropdown menu 'DM' on that template is active.

    In the screenshot below, the nested template, 'dept2.dwt', is selected and the Flyout menu for Department 2, 'D2', is active.

  5. Modify the Top-level Menu, 'DM'

    Open page dept2/pg7.htm. Start Menukit.

    Select 'main.dwt' in the Page/template selection list and note that menu 'DM' becomes visible and editable.

    On the Menu tab, change the menu Type to CSS Horizontal. Change the theme to 'Grey5'.

    Select the Structure tab and change the label of the third menu item from 'Group' to 'Internal'.

    Save and exit Menukit. Save all open files.

    When the 'Update Pages' dialog appears, press 'Update'.

    Save any remaining unsaved files and upload the site to the server and test.

Review Menukit allows you to update a menu on a template using any page attached to that template.
  1. Modify a Department Menu

    Open page dept3/pg4.htm making it the active document. Start Menukit.

    Select 'dept3.dwt' in the Page/template selection list and note that menu 'D3' becomes visible and editable.

    On the Menu tab, change the theme to 'Gold5'.

    Select the Structure tab and change the label of the last menu item from 'Twelve' to 'XII'.

    Save and exit Menukit. Save all open files.

    When the 'Update Pages' dialog appears, press 'Update'.

    Close the dialog when it finishes and save any remaining unsaved files. Upload the site to the server and test.

Review Menukit enables you to update a menu on a nested template using a page attached to that template. Dreamweaver then copied the updated menu to all pages that are based on that template, i.e. the pages in dept3.

Why has the last item on the D3 menu on mast3.htm not been changed from Twelve to 'XII'? Page mast3.htm was not updated. Mast3.htm is the master page that we used to create the dept3.dwt template for department 3. It is not, in fact, attached to that template. Therefore it was not updated when the template was updated.

Although the menu on mast3.htm has had its theme changed to Gold5, that is because it shares the same stylesheet, D3.css, that the template uses.

  1. Modify Department 5 Menu

    Open page dept5/pg4.htm and make it the active document. Start Menukit.

    Select 'dept5.dwt' in the Page/template selection list and note that menu 'D5' becomes visible and editable.

    On the Menu tab, change the theme to 'Mauve3'.

    Select the Structure tab and change the label of the last menu item from 'Twelve' to 'Dozen'.

    Save and exit Menukit. Save all open files.

    When the 'Update Pages' dialog appears, press 'Update'.

    Close the dialog when it finishes and save any remaining unsaved files. Upload the site to the server and test.

Review and Analysis Although the color of the departmental menu, D5, has indeed been changed, the 'Twelve' label was not changed on any of the pages that are attached to the template.

The color has changed because the stylesheet was updated.

If you look at the menu in the nested template, dept5.dwt, you will see that the label has been changed from 'Twelve' to 'Dozen'. However, Dreamweaver has not copied the change to any of the pages based on the nested template because the menu is in an editable region which remains editable in pages based on the template.

This further illustrates the point we made in the review panel that follows item 7 above.