Make a Web page using the pages panel

The following is a concrete example of how the pages panel actually works, as follows.

1. Create a new fireworks file.

2. Set the canvas to a width of 932 pixels, a height of 538 pixels, and a white background color in the New Document dialog box that pops up. As shown in Figure 1.3.

Figure 1.3 New Document dialog box

3. Copy the prepared background material into the current document. and change the name of the layer where the background image is located to background. The effect is shown in Figure 1.4.

Figure 1.4 Copying the image footage to the current document

4, in the background layer to make the left side of the page button and image ads, the page in the upper right corner of the navigation background, the effect is shown in Figure 1.5.

Figure 1.5 Making page ads and navigation

5. Windows (window) layers (shortcut: F2) command, open the layers panel of fireworks 9 and create a new layer "content".

6, in the layer "content" to make navigation content and the page in the lower right corner of the body content, the effect as shown in Figure 1.6.

Figure 1.6 Making the content in a Web page

7. Select the Windows (Windows) pages page (shortcut: F5) command to open the Fireworks 9 pages panel.

8. Click the New Page button in the lower right corner of the pages panel to create three pages, the total number of pages is four, and the number of column buttons is the same. The effect is shown in Figure 1.7.

Figure 1.7 Creating three new pages

9. Rename all the pages in the pages panel, where the name will be the file name of the page after the final output, as shown in Figure 1.8.

Figure 1.8 Renaming a page

10, the new page is blank, the effect is shown in Figure 1.9.

Figure 1.9 A new blank page

"description" When making multiple pages, often use the same page layout, or the same logo, background, or buttons. At this point, you can "share" some of the first pages that you created earlier into other pages, which is the most powerful feature of pages. Because in the previous production process, the same content of all pages in the entire site was made to the "background" layer, so this time you can "share" the content of the "background" layer to all pages (pages). The text and images in the content layer need to be changed according to different columns, so there's no need to "share" to pages.

11. Select the page "index" and switch to the layers panel. Select the layer background, open the Options menu for the Layers panel, select the Share layer to pages (share layer to page) command, as shown in Figure 1.10.

Figure 1.10 Select from the Options menu in the Layers panel

Share layer to pages (share layers to page) command

12. After selecting the share layer to pages (shared layers to page) command, the Share layer to Pages dialog box pops up. The effect is shown in Figure 1.11.

Figure 1.11 Share layer to pages (shared Layer to page) dialog box

13. Select all pages in the Exclude Layer from Pages dialog box on the left, click the Add button, and add to the Include Layer to Pages dialog box for the inclusion layer to page. The effect is shown in Figure 1.12.

Figure 1.12 Adding a page to the include Layer to Pages dialog box

14, the layer "background" in the content, in each page can be seen. All layers that are shared to the page are displayed in a yellow background. The effect is shown in Figure 1.13.

Figure 1.13 Sharing the layer "background" to all pages

15. At this point, you can make completely different content in different pages (pages), but all pages maintain the same background effect. Select the Webdesign page in the pages panel. Then switch to the layers panel, and the layer that corresponds to the "webdesign" page is displayed.

16. Create a new layer "content" on the layer "background". and make the content in the page "webdesign" in this layer, the effect is shown in Figure 1.14.

Figure 1.14 Making the contents of the page "Webdesign"

17, using the same method, the content of all the pages are produced, it is important to note that all the content needs to be made into a new layer, and this layer is not "shared".

18, next add slices to the page, select the page "index", using the fireworks 9 slicing tool to add slices to the page four buttons, the effect is shown in Figure 1.15.

Figure 1.15 Adding a slice to a button

19, but this time the added slices can only be displayed in the page "index", the other pages are not visible to these slices. This means that in fireworks 9, you can add different slices to each page. As shown in Figure 1.16.

Figure 1.16 Adding a slice to a button

20, but in this example, each page button slice should be exactly the same, this time also can be the slice of the page layer "shared" to all pages.

21. Select the "index" page in the pages panel, open the Layers panel, select the page layer in the Layers panel, and include a slice of four buttons in the page layer, as shown in Figure 1.17.

Figure 1.17 Slices in the web layer

22, at this time if directly select the page layer of the Options menu, there is no "share layer to pages (shared layer to page)" command, the page layer itself does not support the "share" to the page function, the effect is shown in Figure 1.18.

Figure 1.18 Options menu for the Web layer

23. You can click the second button in the bottom right corner of the layers panel to create a sublayer in the page layer and drag the four-button slices onto the sublayer, which is a new feature of fireworks 9, as shown in Figure 1.19.

Figure 1.19 Creating a sublayer for a web layer

24, for the sub-layer of the web layer, you can use the "share" to the page command, so that the current slice can be shared to all the pages, the effect is shown in Figure 1.20.

Figure 1.20 Sublayers of a shared web layer

25. For links between multiple pages, it can also be done in fireworks 9. Select the added slice, and you can set up links between multiple pages in the link text box in the Properties panel, as shown in Figure 1.21.

Figure 1.21 Setting up a link between multiple pages

26, and Fireworks 8, you can use the optimization panel to optimize all slices, and then you can select the "file" "Export" (shortcut: "ctrl+shift+x") command to the output of the Web page.

27. When the Export command is selected, the export dialog for fireworks 9 pops up, as shown in Figure 1.22.

Figure 1.22 Export dialog box

which

File name: This is not required here because the name of the exported page is the same as the name in the pages panel.

Export: As in the past, choose to export the Web page and image "HTML and Images".

Current page only: Export only this check box is recommended because we want to export all the pages, not just the current page.

Put images in subfolder: Place the resulting page in a folder, this option must be selected.

28, click the "Keep" button, Fireworks 9 will automatically generate all the pages, you just need to find the folder to save the file, slowly appreciate your work it! The effect is shown in Figure 1.23.

Figure 1.23 Web site generated after export

Operation Tips:

1, in the production of basic pages must be divided into layers, the content will not change and need to change the content of different layers to create. Then the "share" to the page only need to share a portion of the layer is OK.

2, the Web layer is not directly shared, you need to create a child layer in the Web page to share to the page.

Write it in the back.

On the New Pages (page) features, will continue to study, in this tutorial is not related to the use of the "Main Page", but you can tell that once a page is set to "Main Page", then all the pages will be applied to the "main Page" content, Somewhat similar to the template in Dreamweaver.

Fireworks for Web page image processing can be said to be very professional, in Adobe's existing software system, there is no such software can be compared with it, but can fireworks in the new owner to continue to write its deified? I believe this is what every fireworkser expects. , we wait and see.