GRAF 1031 – Week 3

Slicing

download the working file

here's another image to use in the banner

example

Make a new folder on the desktop called week3, with a folder inside called images.

Masking an image

Open the png file you downloaded

Unlock the background layer

Select the nav bg image, and copy (Cmd+C)

Turn the layer visibility "on" for the image banner layer

Select the Bitmap in the image banner layer, and then choose Edit>Paste as Mask

Save

Slicing and creating rollovers

From the options menu of the frame panel, choose duplicate frame

make a change to the main navigation, such as a glow, or shadow, or simple colour change.

slice the document as shown below:

select (individually) each of the 6 slices in the main nav. Right click (Ctrl+Click) and choose:

select the preview tab at the top of the screen to ensure the rollovers work.

Exporting

For this manner of exporting you'll need to have the optimize panel open.

Select the first slice, at the top. We'll call this top_nav

In the optimize panel, set the slice format to GIF

Ctrl+Click and choose export selected slice:

Select the 7 slices which make up the second row (Shift+Click), and Ctrl+Click and choose export selected slices:

Export the rest of the slices as you did the first slice.

Create the tables in Dreamweaver

Define a new site in DW called week3. Local folder week3 on the desktop.

Create a new page, save it as index.html in the main root of your folder.

Insert a new table:

Insert the top_nav image in the first row

Insert Fireworks html in the second, and browse for the main_nav.htm file

Insert a new table in the third row, 1 row, 2 col. and insert the next set of images from our design

Insert the footer image in the last row.

For the repeating background, select the first table we inserted, in locate the bg background field in the property inspector.

Click the blue browse folder to browse for the image. Choose the image slice second from the bottom (including some of the white content area of the design). Click okay.

To add the background on the page, choose Modify/Page Properties. In the first screen change the background colour to #585858.