Menukit

A Dreamweaver Extension

for making different types of Menus

 Print

Objective

This tutorial is similar to the Menu in a Frame tutorial except that we attach a template to the main content page. We create a website using a frameset with 3 frames in a configuration that looks like this:

We put a menu into the navigation frame on the left. The menu page remains resident in the navigation frame and controls the loading of pages into the main frame.

We use Menukit to generate page stubs for testing the menu. In this case when we generate the page stubs, the pages that are created will be based on the template.

1. Create a template.
   Do not put a template directly into the frameset. The server would transmit it to the browser and the browser would not be able to interpret it properly.
   The first thing we have to do is create a page that is attached to a template. We then put that page into the main content frame in the frameset.

   Start with an empty site. In Dreamweaver 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. Set the background color of the template page to #E8ECF0.

   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

   File->Save as Template...

   and save the template as 'content.dwt'. Close the template. Now go to: File->New... and select your site in the 'Templates' category. Select the 'content' template in the site panel and click 'Create'. Save the page as 'main.htm' and then close it.

2. Create the frameset. Go to: File->New...

   Select category 'Framesets' on the General tab and then select 'Fixed Top, Nested Left' in the 'Framesets' panel. Press 'Create' and, if prompted by Dreamweaver, accept the default frame titles.

   Make sure you are in Design View and that the Properties Inspector (Window -> Properties) is visible. You can use Ctrl+F3 (Windows) or Command+F3 (Macintosh) to toggle the Properties Inspector on/off.

   Click on the vertical line between the left frame and the main frame on its right. Use the Properties Inspector to set the Column Value of the left frame to 120 Pixels, like this:

   

   Click on the horizontal line between the top frame and main frame. Use the Properties Inspector to set the Row Value of the top frame to 80 Pixels, like this:

   
   Go to File->Save Frameset As ...

   and save the frameset as 'index.htm'.

3. Insert page 'main.htm' into the frameset. Make sure the Frames panel (Window -> Frames) is visible. You can use Shift+F2 to toggle the Frames panel on/off. Select frame 'mainFrame' in the Frames panel (not the document window) by clicking on it. Enter 'main.htm' in the Src field of the Properties Inspector, like this:
   

   Set frame colors

   Set a different page background color for the page in each frame so the frames can be seen clearly.
   Repeat the following instructions for each of the other frames, 'topFrame' and 'leftFrame' ...

   ...click inside the frame (in the document window). Use either the Properties Inspector (or go to Modify->Page Properties...) to set a background color in each frame. Use any colors you like - we set the page in leftFrame to #B3D7F4 and the page in topFrame to #6699CC.

   Go to: File->Save All.

   Dreamweaver prompts with a 'Save As' dialog twice - once for each of the 2 frames that have not yet been saved.

   As each prompt is displayed Dreamweaver highlights the border of the corresponding frame that it is about to save.

   At this stage your site files should look like the contents of chkpt1.zip which you can find in the support files.
   Name your files as follows:

   	leftFrame ->	nav.htm
   	topFrame ->	banner.htm

4. Start Menukit and create the menu.
   If necessary, you can refer to the 'Multi-level Menu' tutorial.
   With 'index.htm' as the active document, open the Menukit extension: Commands->Menukit.

   Bring forward the Frames tab and click the 'Main Menu' checkbox in the frame labelled 'leftFrame'. Click the Menu tab to bring it forward again.

   Alternative method... The support files include a page, sample.htm, with a menu that you can import and rename if you don't want to key in the menu details from scratch.

   Click and enter 'M1' (without the quotes) for the menu Id.

   Select 'DHTML Telescopic' for 'Type' and 'Blue6' for 'Theme'.

   Select 'Document body' for ' Container'.

   Set 'Position:' to 'absolute'.

   Enter '30px' into the 'Top' and '0px' into the 'Left' input fields.

5. Enter the menu details.

   Bring forward 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 the items.

   Click to open a multi-edit window. When you have finished entering the menu details your multi-edit window should look like this:

   

   The menu will reside in the navigation frame on the left and the linked pages will be loaded into the large frame that we named mainFrame. Specify 'mainFrame' as the target frame where each page is to be loaded.

   Press 'OK' to close the multi-edit window and return to the Structure tab.

6. Define the hierarchical structure. Make items Seven, Eight and Nine a submenu of item Six...

   ...while holding down the Shift key (Windows) or Command+Shift (Macintosh), 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 in the Structure tab should now look like this:

   
7. Set Options. Bring forward the Menu tab.

   Put a tick in each of these checkboxes:

   	'Animated open/close'
   	'Create page stubs'

8. Save and Exit.

   Press Save and then exit Menukit.

   Menukit generates a full set of page stubs for the website.

   When processing in a frameset, Menukit opens any document it needs to update.
   Save all files and Exit menukit.

   At this stage your site files should look like the contents of chkpt2.zip which you can find in the support files.

   Upload and test.