Fireworks Web Design Comprehensive Example-1

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: