|
Fireworks
Web Site Project
- cont'd
Assignment:
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 |
|
|
|
|
