How to Make a Website (DW)/ Step 5- Make a Menu

From WSU Technology Knowledge Base
Jump to: navigation, search

Creating the Menu

The menu will be created using a special coded page called a Library Item.

EXPLANATION: A Library Item can be inserted into any HTML page, but can be opened and edited independently, as if it were an HTML page itself. Because any edits to this Library Item can be updated to other HTML pages in which it occurs, any changes in the menu will be updated to every HTML page that uses it. This means you only have to edit your menu in one file/page to make it work the same everywhere in your web site.

Open a new Library Item using the menu File>New.

DW new library item.png
NOTE: alternatively you may use a Template to create a model Banner/Menu for your standard web page design.

Making a Horizontal Menu with a Table RECOMMENDED

STEP ONE: Insert a table object on the page using the menu Insert>Table. Set the rows = 2 or 1 and column = 1.
  • If you are using a fixed width, it will likely be set to match your banner width. For example, 800 pixels.
  • If your banner width was set as a percentage or variable width, be aware that with a similar percentage or variable width your menu will make the columns of your menu items distribute across that width and so change with the size of the web window and not be fixed in place.
There are multiple ways to alter your table you could:
  • Click in any cell or select the table. Using the menu Insert>Table>Insert Column.... Add as many columns as you will need for menu items.
  • Look in your Insert Tab in your panel groups toolbar and click on the Table icon.

Tables.png

  • Click on the Table so that it is completely highlighted and change your rows & columns in the Properties Toolbar

Rowscol.png

STEP TWO: Type the menu items into the row where you want them to appear.
DW insert menu type.png
Recommended: Define the width (W) and height (H) size of the cells. This will keep the relative position of them in the appearance of your menu no matter what other changes are made. For a proportional menu or four items we have a width of 200 pixels. For height we recommend 50 pixels. These can be modified any time.

In these menus, the typed words have been centered in the cells using format controls in the properties.

For the typical portfolio web site you may want these four text menu items:

DW insert menu type2.png

Making a Vertical Menu with a Table

To make a vertical menu:

  1. Open a new Blank Library Item
  2. Use menu or toolbar to insert a table object--by default it will flush to the left.
  3. Set the parameters to a column of 125 pixels, and as many rows as you need for the menu. You can always add more or delete what you don't need.
  4. Enter text or graphical objects for the menu items. Modify them as needed.
DW menu vertical.png

Modifications to Vertical Menu

  • The column width for the vertical menu can be larger or smaller as you wish
  • Text will automatically "word-wrap." You can check an option for "No Wrap" in the cell properties.
  • A background color can be added to the column. If you want colors only for the Text Menu Cells, you will need to set those in the original Library Item file for the menu.
  • Using Page Properties, the characteristics of the Hyperlinks can be defined. See section on Setting Hyperlink behaviors below.

Making a Graphical Object in place of Type Object

Picalter.png

  • A quick way to alter your images is to right click on the picture and click on the Optimize option.
    • You maay change quality, size, sharpness, crop, among other options with this quick editing tool.
Helpful for small changes
  • If you feel like making significant changes to the image you may click on the options in the editing tools in the property panel or right-click and choose the editing options also.

Setting a Hyperlink on the Menu to an HTML Page on Your Site

NOTE: you will not add the links to the model page (index.html) contructed here until AFTER you have created other pages from the model. The menu will then link to those pages.

In order to set a hyperlink, you must first SELECT the object.

  • In the case of an Image, click on it.
  • In the case of Text, highlight it.

Then you may use the selector tool shown below to point to the HTML page which is the menu link. Or locate the file using the "folder" icon (for Explorer or Finder menus).

DW setting hyperlink.png

Or if the link is a web link you may type in the HTTP path in this field.


Saving the Menu as a Library Item

When you save these files they will save at the root level as a .lbi file.

You can also put them into a separate folder inside the root if your site will be large and complex and you want to keep all your Library Items in one place.

Library Item files will also be automatically listed as an "asset" to the web site in the panel.

You may use your Asset Panel as a way to access those items for insertion into HTML pages as described in Step 6 - Make an Index or Home Page

DW library item file panel.pngDW library item asset panel.png

Choosing the Font, Color, Link Behavior for your Menu

Other Resources

Specific help on creating and managing tables for design is found Here!

Design Options for Menus

Steps to make a website in Dreamweaver