Use fireworks to make simple and refreshing websites

The network has become a part of people's daily life, like the house in life, most people also want to have their own cyberspace, if the design of their own house beautiful generous it? Below we will take a simple and refreshing page as an example to teach you how to design a good web page.

1. Start Fireworks, create a new canvas of size 180*200 pixel, set the canvas color to #EFEFEF.

2. Select the Rectangle tool in the toolbar, draw a 154* 183 rectangle, set the rectangle's fill color in the property panel to #a9b1be, the stroke set to 1-pixel softness, and the color #677387, as shown in the figure.

3. Draw a width of 152 with a rectangular tool, the rectangle with a height of 19, set the stroke to none in the property inspector, change the fill category to linear, modify the linear fill color swatch, the color of the first color swatch is #e6ffff, and then click the area below the gradient order to add a new color swatch with the color # A4BECF, the last color sample is #FFFFFF, the specific settings as shown:

Go back to the canvas and adjust the direction of the gradient, and now your diagram should look like the following picture.

4. Make the following rectangle in the same way as step 3.

Select the bottom rectangle, and in the property inspector's Effect menu, select Shadow and Glow > Drop shadow to add a shaded effect to the rectangle, as shown in the figure.

5. Use the line tool to draw two lines of length 153, the color is #677387, the stroke type is 1 pixel soft, respectively, placed in the upper rectangle below and the top of the rectangle below.

6. Add Title column text, font for elektr_02_5, size 10, do not eliminate sawtooth, add content area text, font for 04b03b, size 8, do not eliminate Sawtooth,

7. In the Frame panel, click New/Re Frame button to add a frame. Return to the first frame, press CTRL + "A" to select all the objects on the canvas, press CTRL + C to copy them, then press CTRL + V to paste them, and then hold down the SHIFT key to select home, FIREWORKS, DREAMWEAVER text, up and to the left each offset 1 pixels, this is to make when the mouse moved to the text, the effect of the offset.

8. Back to the first frame, select the Slice tool on the toolbar to cut the text link area.

Then switch to the Pointer tool, click the Home slice, select "Add Image Exchange Behavior ..." In the pop-up menu, select the slice in the Swap Image dialog box, and click OK.

In the same way, the behavior of FIREWORKS and DREAMWEAVER Exchange images is made separately.

Tip: You can switch to the Preview view first, and move the mouse over the link to see the effect.

9. Combined the above steps, will be able to complete the entire Web version of the production, the final effect as shown in the picture.

This page is my favorite type, feel clear refreshing cool, I hope you will like. Click here to download the source file