Help Files and Tutorials for Computer Users


Web Site Project

- cont'd


Create a professional-looking "City" web site using Macromedia Fireworks.

Getting Started:

Create a web site for an imaginary city.  The site will be hosted internally only - not on a public domain site.  Check out several city web sites to get an idea of the typical content.

Visit the following sites to get ideas:

Your completed project should include the following:

  • Main page is to be created in Macromedia Fireworks and Dreamweaver

  • At least five categories with link pages

  • links to each page should have a 'return to...' button or link, or a 'close window' button

  • You may use other software to prepare images and graphics

Click here  to see a sample of this project

The following tutorial is intended only to help you get started in Fireworks. Don't hesitate to use the Fireworks Help features, or go on-line for more hints.

Your first step will be to develop a plan and gather information. Click here to review information on basic web page planning.

Open a new file in Fireworks and choose a canvas size of 760 x 410 with a resolution of 72 dpi.  There is some debate over what is the "ideal" web page dimension, but 800 by 600 is a common screen resolution, so most viewers will see your site the way you intended.

For the header area I created two rectangles using the Rectangle Tool.

Although the Snap function will help, you can precisely locate the rectangles using the Coordinates display in the Properties inspector at the bottom of the screen. 

You can also set the exact dimensions of the rectangle.

The Colour Selector will determine the Fill colour.  You can experiment with the Outline colour, Texture, and Edge.

Fig. 1

Text can be edited as you would in a word processor program. You can also change the Fill and Outline colours, and create various Effects such as Drop Shadow, Blur, and others.

For the main heading I chose an outline colour, and a drop shadow effect.

Fig. 2

You can also apply effects to photos. Photos and images can be prepared in PhotoShop, or other programs, and imported into Fireworks using the File --> Import command.

Creating Buttons From Text

Using the Text tool, create  a text caption for your first button. You can use the coordinates to accurately position the text.

Fig. 3

With the text selected go to the Modify menu and select Symbol --> Convert to Symbol.

Fig. 4

In the Symbol Properties window, select Button. In the Name box you can give the button a distinctive name.

To save time, buttons can be copied and pasted as with regular objects.  Go to Modify  --> Symbol --> Edit Symbol to edit the text captions. 

Fig. 5

To change the behaviour and appearance of the button when the mouse moves over it, or when it's clicked, go to Modify  --> Symbol --> Edit Symbol

Selecting the Over and Down tabs allows you to change the colour and position of the button in the 'mouse-over' or 'down' state.  Start off by selecting the Copy Up Graphic button to copy an instance of the text button to the other layers.

Fig. 6

Adding a Pop-Up Menu

To add a pop-up menu go to Modify --> Pop-Up Menu --> Add Pop-Up Menu.

In the pop-up menu that appears, you can add as many related links as you need to each button.  The Button Names will appear in the drop-down menu when you click the button on your web page.

Fig. 7

Creating a Swap Image Effect

I have prepared a series of images I plan on using for the Swap-Image roll-over effect.  The images have been cropped to the identical height and width.  This is a very important rule of thumb - image and photo dimensions should always match the dimensions of the frame or table they will be placed in.  Have you ever noticed a photo with a width or height that looks out of proportion? 

Fig. 8

In many software programs the image will try to fit into whatever container it is placed into, regardless of proportions.

Here is a BAD EXAMPLE of a 'skewed' photo.  The table dimensions do not match the dimensions of the photo.

Fig. 9

The first photograph that I imported was placed in the default Frame 1.  To precisely locate and align objects, go to View --> Grid --> Snap to Grid.

Right-click on the image to create a slice.

In the Frame Window click on the New/Duplicate Frame button.

Fig. 10

With the new frame highlighted, everything on the original frame seems to disappear.  It is still there, but all you can see are the outlines of the slices.

Go to File --> Import and browse for the image you want to use for the swap.  With the Snap function on, it should be easy to locate the new image precisely in to the Slice rectangle. This new image is in Frame 2.

Once the new image is lined up, go back to Frame 1 by selecting Frame 1 in the Frame Window.

Fig. 11

If the Button Symbol graphic images do not already have green 'slice' overlays, right-click the image and choose 'Insert Slice'.

Select the green slice of the Button Symbol you wish to use. The Behaviour Handle should appear as a white circle in the centre of the image. Click on the white circle to bring up the behavior options.

The Swap Image window should appear.

Fig. 12

The dialogue "When rolling over the current slice, swap an image in the slice chosen below." will appear.  The area representing the button image slice should be highlighted.

Next, select the slice representing the photo image that will be swapped.

Make sure Frame 2 is selected in the "Show swapped image from" box.

Fig. 13

Select OK to accept changes, and go to File --> Save. If you haven't already, go to File --> Export and choose HTML as type, to create the web page.

Congratulations.  You should have your first Swap-Image function. Continue on for the rest of the images and kinks.

Click here to see Sample Site

Fig. 14

Click to continue

Return to Home Page (more help files)

T. Carson 2008