Activity 11: Slicing a Website

Step 5: Drop Down Menu
In a webpage, when we rollover the services we will see 3 more options. It will look like this:

To create a drop down menu in Fireworks CS5, follow these steps:

  • Create a slice for ‘Course Content

  • Right click on the slice and select ‘Add Pop-up Menu’
  • Click on the ‘+’ sign in the pop-up-menu editor to add the required number of sub menu options.

 

  • Type the name of each sub-menu and indented sub menu option

  • You will need to indent your Activities using this button:

 

  • Be sure to set up a Unit 1 Sub-menu with Activities 1-11 indented and a Unit 2 with Activities 1-3 indented.  See below.

 

  • Specify the appearance – colours, fonts etc.

 


Specify whether you want borders or not

 

  • Specify the position of the menu

 

  • Click the ‘Done’ button. It will look like this:

You can drag the box with the 3 sub-menu items to align it the way you want.

Test the drop down menu:

 

  • Select ‘File’ from the main menu
  • Select ‘Preview in Browser’
  • Select the browser of your choice to see how it will look in the browser.

Move on to the next page