Design | Web Page design
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.
