A comprehensive example of web design (i)

Design | Web page Design In this article we will help you to experience the powerful features of fireworks in web authoring, through a Web page design process that gives you a detailed description of how fireworks deals with various tasks at different stages of web design. By addressing every specific task you encounter, you will have a unified global understanding of the main features of fireworks, as well as a clear idea of how to use fireworks in your design. The following figure is the complete look of this tutorial:

We will be based on one of the typical Web page design process, so that you gradually learn the following:

1, import and edit the bitmap image.
2. Automatic Task Processing
3. Create vector graphics
4. Create text
5, create the button
6. Create navigation bar
7, Set button properties
8. Set up Slice
9, create drag and drop rollover effect
10, create pop-up menu
11. Create deformable Animation
12, optimize the image
13. Output HTML file to Dreamweaver
14, in the Dreamweaver in the Round table edit

　　 Pre-design preparation

1, the website introduction:

Let's take a look at the main tasks we're going to do before the tutorials are introduced. This is a clothing company's corporate website design, the company mainly to men's clothing, but also take into account the part of women's clothing. The main task of the site is to help visitors understand the company's basic profile and product information, and as a display window for the company, to show the image of the enterprise and product line. According to the requirements of the owner, the website contains the company profile, enterprise talent, product display, company honor and contact information. We will use this to get the navigation structure of the website.

2. Design guideline:

The guiding ideology of this website design is to create an elegant, noble, tranquil atmosphere, in order to reflect this theme, the designer will be texture, depth of light, light, tone and physical model photos and static text together, more use of lines, hard edges, dark tones to form the Web site interface. A large area of male models in the page highlighting the theme of men's clothing, to interspersed with a straight line to reflect the feeling of a clothing texture. The company's name is a soft and smooth coarse qian to express, to break the whole page of the hard feeling, while highlighting the name of the enterprise, to achieve very bright feeling.
3, page structure:

The entire site adopts a unified structure, divided into the top and bottom two sections, above for the site's navigation bar, the following left with different men's clothing pictures and text headings to represent each page theme. To the right is the content area, with dark striped pictures as the background.

Below we will be based on the above design analysis, divided into different parts for you to introduce the production process. After creating a new file, we need to make a simple setup of our work environment to meet our mission requirements. First you need to set the area and background color of the workspace, open Modify>canvas size for the common 800x600 resolution, we set the length of the workspace to 776 this can be set according to need, but preferably not more than 778, high 515 according to the actual content determined, Then execute Modify>canvas color to set the background color to black. Then open the View>grid>edit Grid dialog box, set horizontal grid spacing to 10 pixels, 5 pixels vertically, and set the grid color to dark gray to not affect the viewing page, open grid display and grid capture. As shown in the following illustration:

　　 first, import and edit the bitmap image.

Fireworks4 with perfect bitmap creation, modification and processing functions, we can import and edit the external bitmap file, you can modify and delete the colors in the bitmap, you can increase the effect of the vector map. Our work will start from the level board, after creating a new file, the default is only two layer web layer and Layer1 layer, double-click the Layer1 layer, change the layer name to "background layer". As shown in the following illustration:

1. We import a picture of a male model into this layer.
2, double-click the picture can enter the bitmap editing mode, we can use the rectangular selection tool to select unwanted parts and delete it.
3, the bitmap size can be adjusted after the use of real-time special effects for color adjustment, open Effect Panel, select Adjust Color/levels, in the Levels distribution diagram, drag three sliders, as shown in the following figure for color adjustment:

4, the import of bitmaps generally have some small miscellaneous points, we can use Effect>blur>gaussian Blur to the image of some fuzzy processing, so that it adds some soft feeling, as shown in the following figure:

Second, automatic task processing.

Since we will use this process to process bitmaps many times later, we can use the automatic processing capabilities provided by fireworks to speed up the work behind us, which can be handled in many ways, and we introduce the three most commonly used:

1 Save as a command. Open the History panel history, select the last two steps effect record, select the Save As command in the pop-up menu, and save the two steps as an executable command named Bmpmodify. We need to execute this bmpmodify command under the Commands menu later.

2 save for a effect. We can also save all effects on the picture as a built-in effect, open the Effect panel, execute save Effect as in the pop-up menu, and save it as a mydesign effect.

When we open the effect panel we can see that our custom mydesign effect is already in it, and we can use it just like any other special effects. The following figure:

3 save for a style. A style is a combination of attributes such as strokes, fills, effects, fonts, and so on in fireworks that quickly sets the object to a uniform appearance, and we can save the above setting as a style. Select the bitmap image you just made, open the style panel style, and execute the new style in the pop-up menu, so we just need to keep the effects that are applied to the picture and set it in the following figure:

　　Third, create vector objects

A bitmap is a pixel to describe an object, it is suitable for the color change rich photos, and vector map is using the path and fill to define the appearance of the object, it is very easy to edit, and its quality will not be lost or weakened by the size of the change. Fireworks also provides a way to edit both of these format images, by default, fireworks creates and edits objects in a vector way. Fireworks provides a common tool for creating vector objects, and we use these tools to create basic vector graphics below.

1. Select the Rectangle tool on the tool panel and draw a 776x30 rectangle at the top of the document.

2, set fill for linear gradient fill, click on the Fill Panel edit button editing fill, as shown in the following figure:

3. Draw a 130x400 rectangle solid fill object on the right half of the portrait.
4, Next we will create a button object at the top of the document, first in the layer of a new "navigation layer", using the rectangular tool to create the "Company First" button object, the size of 140x15, filled with a linear gradient between red and black fill, open the effect panel, set inner bevel special effects, As shown in the following illustration:

5, we can also draw some segments in the background layer to break the monotony of the background feeling. As shown in the following illustration:

　　Four, create text

Fireworks also offers powerful word processing, which allows you to use text-editing Windows to set the text in a flexible way, and as with other objects, we can apply various effects to the text.

1, select the tool Panel Text tool, open the Text editing window, enter "Carlsson Garments Co., Ltd.", as shown in the picture:

We see that in the Text editing window we can set separate properties for different text.
2, in the left half of the document to enter the corresponding English text content, and rotate the text 90 degrees, as shown in the following figure:

3, open the layer board, selected "Karsong" to set its synthesis method for "luminosity"

4, open Effect panel, for "Dress&adornment CO. LTD "text adds drop shadow effect.

　　V. Create a button

With the button editor provided by fireworks, we can quickly create a set of buttons with a similar look, and we can set the appearance of different states of the buttons.

1, the use of rectangular tool to draw a 90x15 rectangular button object, set its fill for linear gradient fill, the above rectangular input "enterprise profile."
2, the previous step we have built the basic appearance of the button, we can convert it to a button symbol reuse. Select the rectangle and text you created above, press F8 to convert it to a symbol, and the symbol type button.

3, at this time the button symbol only has a basic shape, double-click just created this symbol, open the button editing window.
4, the common button up state, in the button editor of the up window we can edit ordinary objects like, for the button to add some special effects. Open the effect panel and add inner bevel effects for this button rectangle, type frame, as shown in the figure:

5, switch to over state, click on the "Copy up Graphic" to the up state of the object copied to the over state window. Change the gradient fill direction of the rectangle, change the effect type of the button is smooth, the following figure:

6, switch to down state, click the "Copy over Graphic" at the bottom of the over state of the object to copy to the Down state window. Change the fill type of the rectangle is solid fill solid, change the effect type of the button is Frame1, and finally change the color of the text to red, the following figure:

7, note that in the button down status, you need to cancel the "show down the state Upon Load" check, while ensuring that "Include Nav Bar Down" is checked, This enables future output to output the corresponding HTML file according to the different buttons.
8. Close the button edit window, one instance of the button has been placed in the document.

　　Vi. Creating navigation bars

Using the buttons created above, we can quickly create a consistent style of Web navigation, and we can set the appearance and text of each button individually, while maintaining their similarity.

1. We first add a special effect to the above created button instance, open the effect panel, select Adjust Color>color Fill, set the blending mode of this effect to hue hue, as shown in the following figure:

So when we want to change the color of each button instance, we just need to modify the blend color in this effect without having to modify the button symbol.
2, create multiple button instances. Select the button instance above, while holding down the ALT key, drag and copy the button instance, repeat this step, and create five button instances.
3, select the Five button instances, open the Modify panel, select Horizontal Center alignment, as shown in the following figure:

4, now the effect of navigation bar as follows:

5, we need to each button in the navigation bar to set a different color, open the effect panel, respectively, change each button to add the effect of the mixed color settings, it is set to different color values, respectively, to #cc9900, #663399, #33FF00, #FF00FF. The navigation bar effect at this point is as shown in the following illustration:

　　Seven, set button Properties

The navigation bar looks different, but they have the same text content, we need to modify them to their respective content, and set each button corresponding link address.

1. Open the Object panel, select the second button instance, and change the button text on the object panel to "Enterprise talent".

2, after pressing the ENTER key, will pop up the following prompt box:

We chose current to make the text change only valid for the present button.

3, the rest of the button text modified to "product display", "Corporate Honor", "contact". Toggle the Preview window for the document preview, you can look at the final effect.

4, open the URL panel, select each button, in the URL panel to set their corresponding link address.