Personal tools
You are here: Home → presentations → for lazy ones → dreamweaver → level III howto → navigation menus
« February 2012 »
February
MoTuWeThFrSaSu
12345
6789101112
13141516171819
20212223242526
272829
 

navigation menus

To create navigation menus we usually use a different right-sided frame.  With this method all navigation tasks can be performed within the same right sided frame, it is simple to use for viewing documents.  Documents are located in a second right frame.  A third top frame is displaying the title and logos.  The other advantage of this technique is efficiency: the same navigation frame can be used for many different pages and not have to be rewritten for each new document frame.  For the navigation buttons we use a java-based script called rollover image.  A rollover is an image that changes when the pointer moves across it.  A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the pointer moves over the primary image).  Both images in a rollover should be the same size.  Rollover images are automatically set to respond to the Mouse over event.  We have to create adapted buttons for the menus.   These buttons are created with Macromedia Fireworks. Macromedia fireworks is a professional Web graphics design and production tool. We create two buttons for each link.  One is displayed when the page first loads on other when mouse is over.

Creating a rollover image

  • In the Document window, place the insertion point where you want the rollover to appear.  Insert the rollover by using one of these methods: In the Objects panel's Common category, click the Insert Rollover Image icon.   In the Objects panel's Common category, drag the Insert Rollover Image icon to the desired location in the Document window.  Choose Insert > Interactive Images >Rollover Image.  The Insert Rollover Image dialog box appears.
  • In the Image Name field, type a name for the rollover image.
  • In the Original Image field, click Browse and select the image or type the path of the image you want displayed when the page loads.
  • In the Rollover Image field, click Browse and select the image or type the path of the image you want displayed when the pointer rolls over the original image.  If you want the images preloaded in the browser's cache so they load faster, select the Preload Images option.
  • In the When Clicked Go to URL field, click Browse and select the file, or type the path to the file you want to open when a user clicks the rollover image.  Note: if you don't set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.
  • Click OK to close the Insert Rollover Image dialog box.

 


Figure 14a. Buttons for the menus: one for mouse not over (left) one for mouse over (right).

 

Figure 14b. Screenshot of Dreamweaver: In the objects panel's common category, the insert rollover image icon.

 

Figure 14c. Screenshot of Dreamweaver: the rollover java script in the HTML code window.

 

Figure 14d. Screenshot of the page preview in Internet explorer: left the navigation toolbar, mouse not over state.

 

Figure 14e. Screenshot of the page preview in Internet explorer: left the navigation toolbar, mouse over state.

Document Actions