Use fireworks 8 to create webpage renderings 2-generate webpage

1. Case Study
This is an example of using fireworks 8 to create a web page. Click here for the previous case. We have already introduced how to create a webpage. Here we will introduce how to generate a webpage. This is also the most important part of website production. This section describes how fireworks Works works collaboratively with Dreamweaver. This example is mainly divided into four parts. I hope you can use this example to get some inspiration. Due to the limited level of the author, I hope you can criticize and correct the mistakes. I hope my friends can visit www.go2here.net. Thank you.
-------------------------------------------
1.1 create a web site
First, create a web site. The procedure is as follows:
1. Start the Dreamweaver 8 software and select the site @ new site command.
2. In the pop-up "define site" window, select the "advanced" tab.
As shown in 3.1.2, set local site parameters in "Local Information" in the "site definition window.

Figure 1.2 Document Properties dialog box
4. Click OK to complete site creation.
5. Create a folder named "bjdm" on the hard disk, which is the root directory of the current site.
-------------------------------------------
1.2 create an image Homepage
Then, create the homepage of the website image. The procedure is as follows:
1. Start fireworks 8 and open the image page. 1.3.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-04_FJHbHpqPBqgj.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.3 Use fireworks 8 to open the image Homepage
2. Select the background gradient area in the cropping tool area in the toolbox. 1.4.

Figure 1.4 select the gradient area of the background
3. Select the file @ image Preview command (shortcut: Ctrl + Shift + x) to optimize and output the background gradient. 1.5.

Figure 1.5 optimized background image
[Note] the background color is gradient, so it is optimized to "jpg" format.
4. Click the export button to export the optimized background image to the damei Beijing site, and create an "IMG" folder on the site to save all the images. 1.6.

Figure 1.6 export the background image to the "IMG" folder on the site
[Note] the name of the exported background image cannot contain Chinese characters. "BG" indicates the background. The reason why we need to export the background image separately is that in the final webpage, the background image can be tiled as the background of the webpage.
5. re-open the image homepage in fireworks 8.
6. Click the eye icon in front of the background image in the layers panel in fireworks 8 to hide the exported background image. 1.7.

Figure 1.7 hide a background layer
[Note] the background is output separately, so the background is not required in subsequent editing. After the background layer is hidden, the content in the background layer will not be output when the image is exported. The effect is the same as that in the deleted layer.
7. Select view @ ruler (shortcut: CTRL + ALT + r) to open fireworks 8's ruler. 1.8.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-010_MMkLvOSaaZCm.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.8 enable the fireworks 8 scale
8. Drag the guides from the ruler to achieve more accurate slicing. The effect is 1.9.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-011_8pU9avSwG5Va.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.9 drag the Guides
9. Select [slicing tool] in the toolbox and draw slices Based on the guides you have just dragged. The effect is 1.10.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-012_Z47qAVD69WnM.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.10 draw slices
[Note] when creating a slice, you must note that the slice and slice should not overlap as much as possible, and use the slice to overwrite all the images.
10. Click [two] in the upper left corner of the canvas to display the two windows.
11. Select the [Window] @ [optimization] command (shortcut: [F6]) to open the [optimization panel] of fireworks 8 ]. 1.11.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-013_0UK7tHIfeUh6.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.11 slice optimization
[Note] in two optimization modes, select the slice on the left and set it in [optimization panel]. The optimized effect is displayed in the preview window on the right. The optimization principle is that the areas of images with many colors and fading colors are optimized to "jpg" format, while those with less colors are optimized to "GIF" format.
12. After optimization, select file @ Export (shortcut: Ctrl + Shift + r) to open the export window of fireworks 8. 1.12.

Figure 1.12 export window
13. Configure the settings in the export window. The storage location must be in the root directory of the site. The file name is "Index" and the storage type is "HTML and image ", place the images generated by all slices in the "IMG" folder.
[Note] After export with the Export command of fireworks 8, a webpage is automatically generated and the exported slice is combined into a complete image effect using a table.
-------------------------------------------
1.3 use Dreamweaver 8 for Adjustment
1. Open the [file panel] of Dreamweaver 8, and save the web pages and cut images generated by fireworks 8 to the site. 1.13.

Figure 1.13 webpage files and images on the file panel
2. Double-click index.htm. In the Dreamweaver 8 edit window, open the generated image homepage. The effect is 1.14.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-016_VGPuzR2rSFKX.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.14 open the image Homepage
3. Copy the provided flash material to the Flash folder on the site. 1.15.

Figure 1.15 copy the Flash Animation material to the Flash folder of the website.
4.remove the female image from the image page "index.htm. The effect is 1.16.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-018_Pff96GYIKbxW.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.16 delete an image from the page
5. Select the cell of the deleted image and set the deleted image as the background image of the current cell in the properties panel. 1.17.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-019_xtNUdbxAe6be.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.17 set the background of a cell
6. Select Insert @ Media @ flash (shortcut: CTRL + ALT + F ]). Insert Flash animation into this cell ". 1.18.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-020_TxbO0S5kBEaB.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.18 insert a Flash Animation
7. however, the size of the Flash animation is much larger than that of the cell, on the property panel, set the width and height of the Flash animation to "406 pixels" and "258 pixels ". The final result is 1.19.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-021_08qv0leyvHpT.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.19 set the width and height of a Flash Animation
[Note] the width and height of the Flash animation are actually the same as those of the cell background. The specific size can be obtained after being sliced and inserted into Dreamweaver.
8. Select the Flash animation, click the parameters button in the lower-right corner of the property panel, and enter "wmode" = "Transparent" 1.20 in the displayed parameters dialog box.

Figure 1.20 add parameters to Flash Animation
[Note] this parameter is used to change the background of the Flash animation to transparent. In many cases, we can overwrite a transparent Flash animation on the background image to quickly implement the flash page effect. There are a lot of materials for transparent background Flash Animation. You can use it directly and find many such Flash animations on the Internet.
9.use the same style to insert a Flash animation into text.swf on the right side of the image's first page ". 1.21.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-023_g6uOJNJ8xEY5.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.21 create a transparent background Flash Animation
10. Select the [Window] @ [CSS style] command (shortcut: [SHIFT + F11]) to open the CSS style panel of Dreamweaver 8. 1.22.

Figure 1.22 open the Dreamweaver 8 style panel
11. click the button in the lower-right corner of the CSS style panel to create a new style rule.
12. As shown in 1.23, set the new style rule in the pop-up [New Style rule] Panel. Select "class" in the "selector type" radio button, and enter ". BG; select "New Style Sheet file" in the "define in" radio button ".

Figure 1.23 create a style rule
13. Click OK to enter the Save style window. 1.24.

Figure 1.24 save Style dialog box
14. Name the style "dm" and save it in the "CSS" folder of the current site.
15. Click Save to enter the style effect editing window.
16. As shown in 1.25, select "background" in "category" on the left in the "Edit style" window and set it on the right. In the "background image" text box, enter the relative path of the background image. In the "repetition" drop-down list, select "vertical repetition". In the "horizontal position" drop-down list, select "right-aligned ".

Figure 1.25 select the gradient area of the background
17. Click OK to create the style. The corresponding style sheet file is saved in the "CSS" folder on this site. 1.26.

Figure 1.26 select the gradient area of the background
18. In the Dreamweaver 8 page editing window, select the "body" tag in the tag selector in the lower left corner. 1.27.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-032_RlXOdBoJQvET.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.27 select the "body" tag in the tag Selector
19. Right-click the "body" tab of the tag selector, and select "set class" @ [BG] in the pop-up menu, as shown in Figure 1.28.

Figure 1.28 Add a style to the "body" label
-------------------------------------------
1.4 adjust the image in fireworks 8
1. Select the "click to enter" image on the homepage of the image in the editing window of Dreamweaver 8, and click the "Edit with fireworks" button in the property panel.
2. At this time, the computer automatically starts fireworks 8, and the dialog box shown in 1.29 is displayed. Click [use this file. Go to the edit status of fireworks 8.

Figure 1.28 "find source" dialog box in fireworks 8
3. Use the [two] optimization mode. On the [optimization panel], select "index color transparency" and change the background white of the current image to a GIF image with transparent background. 1.29.

Figure 1.29 set the background transparency of the image
4. After optimization, click "finish" in the upper left corner of the fireworks canvas to return to the Dreamweaver editing window.
5. In the Dreamweaver 8 page editing window, select the "table" label in the tag selector in the lower left corner and set the table alignment to center alignment in the "properties" panel. 1.30.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-037_16vQi56vI3Ci.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.30 align a table
6. So far, the homepage of Beijing daomei image has been created. Save the page and press the shortcut key [F12] to preview it in IE browser. The effect is 1.31.
CTRL + scroll wheel zoom in or out "src =" http://bbs.blueidea.com/attachments/2006/8/17/1-038_eYnZuMbMIo5a.jpg "width =" 716 "onLoad =" attachimg (this, 'load ', 'click to view the full graph in the new window/nctrl + scroll wheel zoom in or out ') "border =" 0 ">
Figure 1.31 Effect of completing the homepage