Adobe Creative Suite 3 Video Workshop

Home / Design Center / Tutorials

Using the Pages panel

Tom Green


This video shows you how to use master pages and create multi-page layouts. You learn how to create pages, navigate through them, and share layers to specified pages.

Requirements

To follow along with this article, you will need the following software and files:

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Using the Pages panel

  1. In Fireworks, choose File > Open. Select the HomePage.png file, and click Open.

    Note: The exercise files in this tutorial use special fonts, including Memphis LT Std Bold and Bell Gothic Std Light. If you do not have these fonts installed on your computer, please substitute them with a font of your choice. If a message appears notifying you that the document contains missing or broken links, choose Fix Links Automatically.

  2. Choose Window > Pages to open the Pages panel (which opens the Pages, Layers, and Frames panel group by default). Choose Page 0.
  3. In the upper right corner of the Pages, Layers, and Frames panel group, click the icon to display the Pages Options menu. Choose Duplicate Page.

  4. With Page 1 selected, repeat Step 3 to create another duplicate page. Repeat until you have four pages (Pages 0, 1, 2 and 3, as shown in Figure 1).

    Duplicate pages using the Pages panel menu.

    Figure 1: Duplicate pages using the Pages panel menu.

  5. To navigate through the pages, click the pop-up menu at the bottom of the Document window and choose a page (see Figure 2). Selecting a page with this menu also selects the page in the Pages panel, but you can also select pages by clicking them individually within the Pages panel.

    Navigate to the correct page.

    Figure 2: Navigate to the correct page.

  6. Select Page 3. In the Layers panel (choose Window > Layers to display it, if needed), delete the text and image layers within the Bottom Boxes folder (see Figure 3). You are going to convert this page to a master page for use as a template.

    Delete layers from the template.

    Figure 3: Delete layers from the template.

  7. Choose the Pages panel. Click the icon in the upper right of the panel to display the panel menu, and choose Set As Master Page. Page 3 now appears in the Pages panel as Page 3 (Master Page), highlighted in gray to indicate that it's selected. Normal layers are highlighted in blue when selected (see Figure 4).

    Set a master page.

    Figure 4: Set a master page.

  8. To link a page to the master page, select the page to be linked. From the Pages panel menu, choose Link To Master Page. Alternatively, click in the left column next to a page; this links the page to the master page, as indicated by the link icon that appears in the column (see Figure 5).

    Each page can contain its own links, guidelines, layers, canvas color, image resolution or any other property you want to apply. Using links, you can work more productively by creating prototypes or templates that contain the core features of your web page.

    Link pages to master pages by clicking the left column.

    Figure 5: Link pages to master pages by clicking the left column.

  9. Choose the Layers panel. Master pages will always appear in this panel as well. Notice that the Master Page appears as a locked layer, and all the sublayers are locked as well (see Figure 6).

    Master pages layers are locked in the Layers panel.

    Figure 6: Master pages layers are locked in the Layers panel.

  10. Return to the Pages panel. Double-click Page 0 and rename it Master. You can also rename a page using the Pages Options menu, by choosing Rename Master Page. As with the layers in your projects, it's important to give your pages as descriptive names as possible.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.