Menukit

A Dreamweaver Extension

for making different types of Menus

 Print

Description This is similar to the Frame & Template tutorial although the shape of the frameset is slightly different here because this time we are creating a Fixed Left, Nested Top layout like this:

In this case the main menu and submenus are in separate frames. The main menu remains resident in a navigation frame on the left of the screen. Submenus appear dynamically in the main frame whenever the main menu is moused over.

Since every page that is loaded into the main frame requires a copy of the submenus we put the submenus into a template. Before creating the menu we attach a template to the page in the main frame. Menukit then puts the submenus into the attached template.

As Menukit creates page stubs for pages that are loaded into the main frame it attaches the template to each.

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 #F4F8FF.

   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 Left, Nested Top' 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 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 'mainFrame'. Click the Menu tab to bring it forward again.

   Since the page in the mainFrame frame has an attached template the Menu tab includes a selection list that allows you to choose either 'main.htm' or 'content.dwt'.

   We want to put the submenus into the template so select 'content.dwt'.

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

   Select 'DHTML Flyout' for 'Type:' and 'Blue 6' for 'Theme:'.

   Select 'Document body' for ' Container'.

   Set 'Position:' to 'absolute'.

   The height of the top frame is 80px. Specifying a value of 100px for Top positions the main menu 20 pixels below the top border of the frame mainFrame.
   (Menukit automatically positions the submenus for you).
   Enter '100px' into the 'Top' and '0px' into the 'Left' input fields.

5. Bring forward the 'Structure' tab and create 12 new menu items by clicking 12 times.

   Hold down the Shift key 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, 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. Tick these 2 checkboxes:

   	'Animated open/close'
   	'Create page stubs'

   If you like, you can also tick these checkboxes to have drop-shadows added to your menu:

   	'Main menu shadow'
   	'Submenus shadow'

   The Menu tab should now look like this:

   
8. Specify which frames to use. Bring forward the Frames tab.
   Dont forget this step!
   Tick the Main Menu checkbox in the frame entitled 'leftFrame' and the Submenus checkbox in the frame entitled 'mainFrame'.

   Save and Exit Menukit.

   Menukit generates a full set of page stubs for the website. Save all and when the Update Template Files dialog appears press 'Update'. Save again (to save any files that were updated by the template).

   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.