In this article, we are going to focus on the very basic skills you need to work with pages, layers, and states. 

We will talk about:

• Creating and importing pages

• Working with layers and the objects contained in layers

• How states work, as well as how to create a new state for a layer

About Pages

If you look at the Fireworks document it's just a blank page. 

What's more, it's only one page, as we can tell by looking in the upper right hand corner of the work area.

You can add multiple pages to any document that you create. These pages can house different designs. They can also have different dimensions and resolutions.

To add a new page, go to the Pages panel, as shown below.

Click the menu options button in the upper right hand corner, then select New Page.

You can switch between pages in the work area by clicking on the page in the Pages panel – or by going to the work area and selecting the page, as shown below.

In the upper left hand corner of the work area, you can choose to preview a page. You can also view all the pages in the document two at a time (2-Up) or four at a time (4-UP).

Importing Pages

Importing a page in Fireworks means that you are importing another PNG file into your current document. If the PNG file has one page, you will import that one page.

To import pages, go to File>Import.

Locate the PNG file on your computer, click on it to select it, then click Open.

You will then see the Import Page dialogue box.

By default, this shows the page in the document you are going to insert first. You can click the next button to view and select the next page in the document.   The button is circled below.

The artwork from imported page(s) will be inserted into the current page when you click on the Import button.   If you want the imported page(s) to appear on a different page, put a checkmark in the "Insert after current page" box.

Click the Import button when you are finished.

Click Ignore if you see a dialogue box asking if you want to overwrite existing styles.

Place the cursor over the area of the document where you want to place the upper left corner of the page.   Your mouse cursor will look like this:

Click on the document to place it.

Working with Master Pages

There may be times when you want design elements that appear on one page to appear on every page in a document.  

This is especially true if you're creating a website, and you want aspects such as the header, footer, and navigation to appear on every page.  

Instead of having to create the header, footer, and navigation for each individual page, you can create a master page that contains all these common elements.

To create a master page, select the page that you want to make a master page by clicking on the page in the Pages panel.

Next, right click on the page. You will see the Pages panel options.

Select Set as Master Page.

A master page doesn't have a page number to the left of the page name in the Pages panel. Instead, you will see a small icon to let you know that the page is now a master page.

Fireworks will also add a Master Page layer to all other pages in your document, as shown below.

The Master Page layer has a padlock icon beside it. This means the layer is locked. When a layer is locked, you cannot edit or make changes to the layer.   In order to make changes to a Master Page Layer, you need to go to your master page and make changes there.

About Layers

Layers are used on a page. Just as with Photoshop and other editing programs, layers let you organize and group different objects that are part of your design. Each layer can contain vector and bitmap objects as well as text. In addition, you can hide layers so they can't be seen. You can move layers, and you can remove objects from different layers.

To view the layers on a page, go to the Layers panel, as shown below.

As you move your mouse over your page in the work area, the layer that appears under your mouse will be highlighted in red.

Naming Objects in a Layer

We have imported two images onto the page below.   We did this by going to File>Import, then locating the images on our computer.

These images appear in Layer 1 in our Layers panel. The currently selected object is highlighted in below.

As you can see in the snapshot of the Layers panel above, both objects have the same name.   Even if they didn't, as we start to add more objects, we will want a way to be able to easily identify the object each layer represents. To do that, we can name the objects.

To name an object, double click on the object in the Layers panel.

Type in a name for the object, then push Enter.

Grouping Objects

You can also group objects together.

To group two more objects together, click on the Subselection tool in the Select area of the Tools panel. It looks like this: 

Drag a rectangle around the objects you want to group.   This will select all objects in the group.

NOTE: When an object is selected, a blue bounding box appears around it.

As you can see in the snapshot above, both objects are selected.

Next, right click on the page and select Group.

Go to the Layer panel. You can now see the group of objects that you created, as well as how many objects are in the group.

You can also name the group to help you identify it; however, you'll want to make sure you leave the number of objects that are in the group as part of the name.

Rearranging the Order of Objects in a Layer

You can rearrange the order that objects appear in the Layers panel by first clicking on the object to select it, then dragging it upward to move it up higher in the list – or lower to move it lower in the list.

You will see a black bar appear as you drag the object in the Layers panel. This lets you know where the object will be placed when you release your mouse.

You can see the black bar in the snapshot below.

Adding New Layers

To add a new layer, click the New/Duplicate layer button at the bottom of the Layers panel, as pictured below.

The new layer appears above the other layers in the Layers panel.

You can rename the new layer by double clicking on it and entering a new name. When you're finished, press Enter.

Blending Layers

Blending modes are used to decide how two layers blend together.   For example, in the snapshot below, we have two layers. These are the two layers:

Only the top layer (the one on the left) is visible in our Fireworks document, as you can see below.

By going to the Properties panel and clicking on the Blend mode dropdown menu, we can select a blending method for the two layers. The current blend mode is Normal.

Now let's try Screen:

As you can see, that doesn't blend the two layers too well at all.   So next, we try Luminosity:

This is Tint.

Moving Objects to a Different Layer

Now that you've created a new layer, you can move objects from other layers into the new layer.

To do this, follow the same steps you took to rearrange objects in the Layers panel:

• Click on the object in the Layers panel that you want to move.

• Drag it to the new layer.

Locking Layers

When you lock a layer, you prevent that layer from being moved or edited.   To lock a layer, click on the empty box to the left of the layer. A padlock icon will appear in the box, as shown beside Layer 2 in the snapshot below.   This means that the layer is locked.

Sharing Layers Between Pages

 In addition to creating a master page, you can also share layers between pages. When you share layers between pages, you can take a layer that's one page and share it with other pages. 

To share a layer that's on one page with other pages in your document, select the layer that you want to share, then click the menu options button at the top right corner of the Layers panel.

Select Share Layer to Pages from the dropdown menu to specify the pages. 

Select Share Layer to All Pages to share the layer with all pages in the document.

We are going to select Share Layer to Pages.

Using the Add and Remove buttons, add the pages you want to share the layer with.  

Click the Remove button to exclude pages to share the layer with.

Click OK when you are finished.

About States

If you've ever visited a website where a button or icon changes appearance when you hover your mouse above it, then you already have a basic understanding of states.   Using states, you can show different states of an object, create frame-by-frame animation, and even change the visibility of an object when a mouse hovers over it.  

Each page in Fireworks automatically has one state. Some documents may never have more than one state. That is up to you. 

You can view the different states by going to the States panel.

NOTE:  Remember, if you don't see a panel on the right side of the Fireworks window, go to Window in the Menu bar and put a checkmark beside the panel you want to view by clicking on the name of the panel.

Duplicating States

The first step in creating a rollover effect or animation using states is to add states to the States panel.

The States panel is pictured below.

To duplicate a state, drag State 1 to the New/Duplicate State icon in the bottom right hand corner of the panel. We have circled it in red below.

To rename a state, double click on the state and enter a new name for it. Press Enter when you're finished.

Change Content in States

We now have two states in the States panel.   Now we are going to make the content in State 1 change in State 2.

To do this, go to the Layers panel. You can see which state is currently selected. We want to make sure it is the state we just created.

We are going to use the Pointer tool in the Select area of the Tools panel to select the layer.  

We used a fill color to change the content of the layer. 

You can go to the Layers panel and toggle back and forth between the two states. 

Since states are an important part of the Fireworks workflow, it's important that you only know what they are for the time being.