Menukit

A Dreamweaver Extension

for making different types of Menus

 Print

Objective

In this exercise 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.

1. Create the frameset.
   Start Dreamweaver in an empty site and 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:

   
2. 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 frame...

   ...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 #DDEEFF, the page in topFrame to #000059 and the page in mainFrame to #E6E6E6.

   Go to: File->Save All.

   Dreamweaver prompts with a 'Save As' dialog 4 times - once for the frameset itself and once for each of the three frames.

   As each prompt is displayed Dreamweaver highlights the border of the corresponding frameset or 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:

   	frameset ->	index.htm
   	mainFrame ->	main.htm
   	leftFrame ->	nav.htm
   	topFrame ->	banner.htm

3. 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.

4. 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.

5. Define the hierarchical structure. 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 (Windows) or Command+Shift (Macintosh) 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:

   
6. Set Options. Bring forward the Menu tab.

   Put a tick in each of these checkboxes:

   	'Animated open/close'
   	'Create page stubs'

7. Save and Exit.

   Press Save and then exit Menukit.

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

   Important! Menukit does not set a background color for the page stubs it generates. Upload and test.

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

Review

Blue6

Theme 'Blue6' is defined only for menu level 0 (i.e. top level menu). All submenus inherit the level 0 settings for size, color, font, etc. This can make it hard to see the different submenus in a Telescopic menu. Therefore you may prefer to use a theme like the one on the right that uses different colors and widths at different menu levels. Refer to the Multi-level Theme tutorial to learn how to define a theme like MyBlue6.

MyBlue6