Using Dreamweaver mx to design navigation bar effects

There are a lot of special effects on the design of the navigation bar, but have you ever browsed a navigation bar effect? When the mouse is moved to the navigation column, the navigation column is covered by a layer of "mask", and the "mask" is removed when the mouse moves away. The effect can be set in the Dreamweaver MX two CSS properties to control, when the mouse moved and moved away from the navigation column to display the background picture, and set the navigation bar table Mouse response events can be achieved. Of course, the background image is important, a dynamic, variable length of alternating gif pictures, you can use fireworks to make the picture.

　Create a background effect chart

Create a new 170x17 pixel, transparent background document in fireworks. Change the paint bucket fill color to light gray (#F1F1EF), select the toolbar Rectangle Tool tool, and use the color to draw a rectangle for the editing visual area. Change the paint barrel fill color to yellow-brown (#FF9900), and in the same way, draw a small rectangle on the left side of the picture (Figure 1). Finally, the GIF image is exported and named Mouseover.gif, which is later used as a background image to display when you move the mouse over the navigation column.

Figure 1

On the basis of this picture, make the animated GIF image when the mouse moves. The menu "windows/frames" command opens the Frame Control Panel, clicks the four times panel "New Frame" button to add four frames, adds this four frame function is: in each frame sets from the long to the short gray (#F1F1EF) background layer picture to realize the dynamic transformation effect. Select the pale gray background layer picture in the first frame of the picture, click the Triangle button in the upper right corner of the frame panel, execute the pop-up menu "Copy to Frame" and choose "All Frames" in the Copy to Frames dialog box to confirm that the light gray background picture is copied to each frame. And don't forget, too. The Yellow-brown (#FF9900) rectangular layer picture is also copied to each frame. Select the first frame picture, use the mouse to adjust the light gray background layer picture size to edit the visual area to the right 1/5. Similarly adjusts the 2, 3, 4 frame light gray background layer picture gradually to disappear in the left yellow-brown small rectangle, selects the paint barrel fill color to be dark purple (#003366), fills the yellow-brown small rectangle to be this color. To make the effect smoother, double-click the Frame Control Panel after the frame time delay parameter to set it to "8" (Figure 2). Finally, export the Mouseout.gif animation file.

Figure 2