A comprehensive example of web design (next)

Design | Web Page design Viii. Establishment of slices

Our basic navigation and page structure has been set up, and now it's time to add slices. The slices in fireworks are the primary reference object for outputting graphics and interacting, and the exported documents will cut the graphics into different parts based on slices and assemble them together in a browser through tables. At the same time, all interactions are generated through the links between slices, such as flip charts, pop-up menus, and so on.

1, the button we created earlier already has its own slice, so we need to create separate slices for the other objects.
2. Creating slices is usually drawn directly using the slice tool in the tool panel, but if you want to create a slice of the exact size, we can select the object and execute the insert slice in the right-click menu to insert the slice automatically.
3, we use the tool panel in the Slice tool in the middle of the page to draw an information display slices, we will be the next step of the navigation bar for each button related information displayed here.

4, our added slices by default are green translucent objects that are placed on the Web layer layer.

　　 Create drag and drop rollover effects

1, click on the "Enterprise Profile" button at the slice, this slice center will appear with a circular flag, dragging it to the upper-left corner of the slice you created in the previous step, setting a rollover effect, and setting the mouse slide to swap the contents of the second frame in the pop-up dialog box, as shown in the following illustration:

2, repeat the above steps, respectively, "Enterprise talent", "product display" two buttons to increase the rollover effect, and corresponding to the third and fourth frames respectively.
3, we are in the same position in the following frames, respectively, placed corresponding to each button description text.
4, the final effect as shown in the following figure:

　　 10, create pop-up menu

Usually the navigation information in our site must be very concise and practical, only the most important information appears in the navigation bar, and more navigation and content information is usually hidden. For complex display points and multiple information organizations, pop-up menus are the most effective tool for layered navigation, and pop-up menus can set a large number of target options in a small space. FIREWORKS4 New Create pop-up menu features can be very easy to implement this navigation structure, we simply add layered information to the pop-up menu editor, the program will automatically generate the corresponding interactive code.

1, select the "Product Display" button on the navigation bar to ensure that the Web layer is currently displayed and sliced visible.
2, click on this button to slice the center of the circular logo, from the pop-up menu select "Add pop-up menu" Add pop-up menu, as shown in the following image:

3, in the pop-up editor input as shown in the following figure, in the text and link input box, the point and the upper "+" can add a new menu content:

4, continue to enter the level two menu content, select an entry, click on the upper can make the current entry indent, to become the next level menu; Click to restore the current entry to the previous level menu. The final results are shown in the diagram:

5, click Next to enter the next Settings window, where we can set the size of text, menu styles and other properties, you can choose the final menu appearance is the standard HTML format, or image Image format. We select the picture format and set the text size to 10.

6. When you select the image format, you need to set up and over state menu styles in the lower two windows, and your Santa may be different from ours because we use custom style files. We can use custom styles as pop-up menu options based on the needs of different design projects.

7, we first draw a final pop-up menu rectangle, and set the desired fill, stroke and special effects.
The following figure:

8. Open the Style panel, select the rectangle you just created, select New style in the Style Panel pop-up menu, and name it MyStyle, as shown below:

A new style has been added to your style panel at this time.
9, select the Style Panel pop-up menu in the export styles will just this custom style output to the fireworks directory/configuration/nav menu/, and name it Styles.stl, but be aware that the original Styles.stl file must be backed up first.
10, we once again edit the pop-up menu just created, we can choose our custom style.
11, press F12 Preview generated pop-up menu, the following figure:

12, at this point the two-level menu of small arrows defaults to black, so see, we can also modify this arrow at the end of the style and color, specific methods see the previous chapters of this book.

　　11. Create deformable Animation

Adding animations to a Web site is a very small expense for the visitor's time and money, so before adding your animation, be sure to consider the following questions: whether the animation can improve your message, visitors to download and play the animation is fast, convenient, whether there is enough content and resources to make up the animation. Although the network animation and its way of transmission is constantly changing, but the traditional GIF animation still has a noticeable advantage, we are here to create a GIF animation two ways.

1. Create a new logo layer on the level board and place it under the Web layer layer.
2, we need to change the background layer to a shared layer, open the level board, switch to the background layer, select Share this Layer in the pop-up menu, share the background layer, the content on this layer will be visible in all frames, and a shared icon will appear at the end of this layer, as shown below:

3, switch to the logo layer, in the upper-right corner of the document to create www.karsong.com text.
4, press F8 to convert it to graphical symbols graphic symbol.
5. Open the effect panel and add a red glow effect to the instance of this symbol, as shown in the following illustration:

6, select this instance, in the right key pop-up menu to perform Edit>clone, copy a new instance, and with the same glow effects.
7, in the effect panel to modify the second instance of the effect, change it to yellow, and change the range and size of glow, the following figure:

8, select these two instances, in the right key pop-up menu to perform Symbols>tween instances create a distorted animation, set the number of inserted frames to 6 frames, and check distribute to frames distribution to the frame, as shown in the following figure:

9, open the Web layer layer display, in this animation position to create a slice.
10, open the Optimize Optimization panel, set the type of this slice is animated GIF, and set the number of colors to 32 color, as shown in the following figure:

11, this animation is complete, you can open the frame panel to set the animation frame between the time displayed.

12. Create Live aniamation animation

Fireworks4 adds a way to create a live animation that quickly creates an animated symbol, produces animation with immediate editing capabilities, and you can modify the various element attributes that animate at any time.

1, in the upper left corner of the document to add a slice, click on the bottom of the tool Panel button to close the slice display [click Next to the button to open the slice display].
2, in the level of the board to switch to the logo layer, in just the upper left corner of the position entered the text "Karsong."
3, select this type Object, press F8 shortcut key to convert it to an animated symbol, named "Animate Logo", the symbol type is "Animation", as shown in the following figure:

4. Set the Insert Frame number to 8 in the pop-up Settings window and make the following settings:

5. Drag the small red dot in the center of the generated animation symbol, drag it to the right position, and be careful not to drag it out of the slice range you just created.

6, open the optimization panel optimize set the type of this slice is "animated GIF", the color number is 32, as shown in the following figure:

　　13, optimize the image

Our design manuscript is basically finished, we need to set the optimization parameters and output format for different objects.

1, according to different output quality requirements and each part of the function, respectively, set their own slices, note that the slices should be divided neatly, simple.
2, select the left Portrait section of the slice, open the optimization panel, set output format for JPEG, the quality of 60.
3. We can switch to the 2-up Preview window to observe the results before and after the optimization, as shown in the following figure:

4. For the two animations created above, we have set the output type to animated GIF.
5. We can also set the slice of the center of the document as the text slice, and the output of this part will be the text content in future output.
6, select the middle section of the document slice, open the Object panel, select text in the object type, in the lower window input the final text content. It's important to note that you can not only enter plain text content, but also enter standard HTML format content, such as our <center> and <font color= "White" >. The resulting output will automatically format the text according to the definition here. As shown in the following illustration:

　　14. Output HTML file to Dreamweaver

Our design document has been completed, you can output it as an HTML file and go to Dreamweaver to continue editing.

1, choose the File menu under the Export Preview, open the Output optimization panel, in the optimization panel, all without the use of slices will automatically use the default output settings. Select the output format in GIF format with a color of 128 colors.
2, click Export, save type Select "HTML and Images"; HTML option, select "Export HTML File", Slices option "Export Slices".
3, in option options can be more detailed settings, select the General tab, to determine the HTML style options in the Dreamweaver is selected.
4, switch to Table label, in "Space from" choose "1-pixel transparent spacernested Tables".
5, in the empty cell area, select "Spacer Image" in the pop-up menu.
6, switch to document specific panel, tick the lower "multiple Nav Bar HTML pages", so that the building will be for each button corresponding to the column output of their respective pages.
7, click to determine the file output. See the output file as shown in the following illustration:

15, in the Dreamweaver in the Round Table edit

1, start Dreamweaver, in your output folder to open just the output of the example.htm in the middle of the table cell select the text, and change the contents of the text in the top of the sentence to add a word "corporate philosophy", and then change the color of the text is light gray. The text is styled as shown in the following illustration:

2, select the entire table using the Quick Tag Selector at the bottom of the document window to select <table> label.
3, open the property panel, note that at this time the property Panel has fireworks table tag on the top left, click the Edit button at the bottom right.

4, the FIREWORKS4 will start and open the Example.png document. Note the "Edit from Dreamweaver" flag appears at the top of the document window, as shown in the following illustration:

5, select the text in the middle of the document slice, open the object panel, we can see just in the Dreamweaver Squadron text changes have been reflected here, the corresponding HTML code has also been added. As shown in the following illustration:

6, we now make a little change in fireworks, in the "Carlsson Garments Co., Ltd." Add the words "2001.4".
7, click the "Done" button at the top of the document window, this will return to DW, you will see the picture is updated, but the text formatting information of the section of the document slice still exists.

　　It 's written in the back.

Here, our tutorial on this Web design example is finished. It should be pointed out that we end up with the entire page, the editable part of the Dreamweaver is only a fraction of the middle, but what fireworks can do is not just that, as an example we just introduced the use of fireworks for page design, Can do in every aspect. But concrete to the actual application, we should design your layout according to the concrete content, and as much as possible use the local output function of fireworks, the page is divided into several parts output, this can make the page have more flexibility and operability. For example, we can divide the entire page into the next three parts separately output, the upper navigation bar and animation as part of the output, the middle part can be divided into the left and right parts, the lower copyright information can be a separate part, or can be entered in the Dreamweaver of individual text. Finally, these individual output parts are assembled in Dreamweaver, which can keep the adaptability and flexibility of the page to a maximum. In addition, some of the content can be used as a background picture output, such as the main part of the page line texture can be output separately as a background picture, and in Dreamweaver defined as the background of the cell.