A method of making a fine navigation effect of Web page making technique

Navigation | tips | Web page

The general navigation effect everyone is very familiar with, for example, using CSS to set the navigation text, underline, background color or displacement.

Nothing to do, try to achieve the same navigation effect in the DW.

First analysis of the composition of the effect, the mouse after the background changes, small image rotation. Ok! Consider using swap image in DW (flip Chart) + Background image change (CSS definition) should be able to achieve the effect.

Prepare 4 GIF images, respectively:

Background image when the mouse passes (using animate in FW can be very simple to achieve the gradient effect, this image transparency from 0% to 100%)

The background image when the mouse is drawn (this image transparency is 100% gradient to 0%)

Dynamic small Image

Still small image (set image format in FW to save after GIF)

　　1. Background effect implementation

Define two classes using CSS:

. style1 {Background-image:url (bg.gif)}
. style2 {Background-image:url (b.gif)}

Background image for mouse passing and drawing respectively

Then add the following code to the cell:

You can implement the background gradient appears when the mouse passes, remove the effect of background gradient disappear.

　　2. Flip diagram Effect Implementation

Inserts a still small image in the cell, uses the behavior to add the swap image effect, sets the mouse to pass after turns to the dynamic small image.

To get closer to the effect, you need to apply the flip chart effect to the cell and cut the following code in the still Small image code:

Paste into the Cell Code TD tab.

Can realize the mouse through the cell when the image flip, produce dynamic effect.

All the results can be achieved by now.

In this example, the effect of using DW is almost as good as that of flash production, or even better (we have the effect of fading the background gradient when the mouse is out of the cell).

Section:

1. The background image of the gradient in the FW (I just made two gradient image) + for navigation cell modification can make the effect more delicate, excellent;

2. When you use this method to make navigation effects, you need to use more than one cell, note that the swap effect can not be copied, copy code need to modify two code:

Change the name of the flip chart to a different value.

3. The technical content of this example is not very high, and I am not very familiar with Flash, do not know how to make a DW or flash which is simpler, here is to provide you with a solution to the problem.

4. Two simple effects of the superposition can make a relatively cool effect, I hope you can have some inspiration

Add a point: when making animated background images, in order to achieve the effect, you need to set the GIF animation loop is no looping (not cycle)