Creating pop out menus in Dreamweaver

I began by creating images in Photoshop and then slicing the images in ImageReady.

Here are 3 of the rollover pairs I used in the navigation bar

original image	rollover image

Next I place the images in a table which was placed along the top of the web page in a horizontal navigation bar.

I accessed Insert > Interactive Images > Rollover Images

This dialog box appeared.

1. I entered a descriptive name for the image (do not use Image 1, Image 2 etc)

2. By selecting the "browse" button I located the "What's New" original image and the rollover image.

3. I entered alternate text which would display if the image did not load

4. Finally I entered the URL of the link.

Here is a the navigation bar with the images inserted, at this point there are no pop out menus, just rollovers.

The What's New is only one page. The student information section has several pages

1. examples of excellence

2. student testimonials

3. campus policies

4. challenge forms

to create a pop out menu that contains links to these four pages I select the button image

Next I display the Behaviors window (Window > Behaviors)

I access the + sign in the upper left corner and select the option of Pop Out Menu option

This window will appear. The first tab :"Contents" allows you to enter the names of the pop out menu items and establish links. Each time a new item needs to be added you select the + button. To remove an item you select the - button. To rearrange the times use theup or down buttons.

Next I select the "Appearance" tab which allows me to set the color of the text and background color for the menu items and the rollove effect which will occur. I am also able to destermine the size of the font and specify the font face. I can also display the text in bold or italic formatting and finally I can display the text as left, center or right aligned.

My next step is the Advanced tab, where I can set the height and width of the cells which display the menu items, set cellpadding or cellspacing, establish a border and determine border color.

The final setting is the position tab. I decided to have the pop out display below the main navigation.

Here is the finished button

Now I want to create a pop out menu that has sub menus that appear

For this activity I use the image.

I follow the steps discussed above with one significant difference.When identifying the menu items I use the indent setting to determine which items will be designated as submenus.

I entered pop out menus of

overview

adobe certificates

and then I entered Photoshop, Illustrator, PageMaker, InDesign, and Adobe Application Specialist

After typing the Photoshop menu item I clicked on the indent button. The remaining items were indented until I selected the outdent button.

Here is how the pop out menu window appeared.

Here is how the menu appears

Here is a web page with the navigation bar partially finished