Use Dreamweaver MX to design navigation bar special effects

There are many special effects on navigation bar design, but have you browsed such a special effect on navigation bar? When you move the mouse over the navigation column, the navigation column will be covered by a "mask", and the "mask" will be removed when you move the mouse away. In fact, you can set two CSS attributes in Dreamweaver MX to control them separately. When you move the mouse over or remove the navigation bar, the background image is displayed, and you can set the mouse response event of the navigation bar table. Of course, a background image is crucial. You need a dynamic GIF image that can be converted in length or length. You can use Fireworks to create the image.

Create background effects

Create a 170x17 pixel file with a transparent background in Fireworks. Change the fill color of the paint bucket to light gray (# F1F1EF), select the toolbar "Rectangle Tool", and use this color to draw a Rectangle in the editing area. Change the fill color of the paint bucket to yellow brown (# FF9900), and draw a small rectangle on the far left of the image in the same way (as shown in Figure 1 ). The final GIF image is named "mouseover.gif". It will be used as the background image displayed when you move your mouse over the navigation bar.

Figure 1

Create a dynamic GIF image when you move the mouse away based on the figure. Run the "Windows/Frames" command to open the Frame control panel. Click "New Frame" at the bottom of the panel to add four Frames: on each frame, set a light gray (# F1F1EF) background layer image to achieve dynamic conversion. Select the light gray background layer image in the first Frame, click the triangle button in the upper right corner of the Frame panel, and run the "Copy to Frame" command, in the Copy to Frames dialog box, select "All Frames" to Copy the light gray background layer image to each frame. Of course, do not forget to Copy it to the brown color (# FF9900) the rectangular layer image is also copied to each frame. Select the first frame of the image and use the mouse to adjust the image size of the light gray background layer to 1/5 on the right of the editing visible area. Similarly, adjust the 2, 3, and 4 light gray background layer images gradually become shorter to disappear in the left-side yellow-brown small rectangle, and select the fill color of the paint bucket as dark purple (#003366 ), fill in the small yellow-brown rectangle for this color. To make the effect smoother, double-click the time delay parameter after each frame on the frame control panel and set it to "8" (as shown in Figure 2 ). Finally, export the mouseout.gif animation file.

Figure 2

</