web design home resources contact
assignments email rodmilstead.com

Slice and Dice

This assignment combines Fireworks, Dreamweaver and YouTube. You will slice out two areas of your Fireworks page and replace them with HTML via Dreamweaver.

Here are some samples:
Loma Alta Snake
UFO in Marin

1. Choose a YouTube video.

2. Create a page in Fireworks with a design that
-use at least three images for an overlapping/collage design. Borrow your design ideas from the theme or subject of your chosen video.
-slice out at least two areas - one for the YouTube video and one for HTML text. Check out the dimensions for the video in the embed code and make sure that the width of your slice matches. For the height, try adding 20 pixels to the height listed for the video.

3. Save your Fireworks page as a PNG in a folder called slice.

4. Export your Fireworks page as HTML and Images into the folder called slice. Make sure that you set it to save images in a separate folder.

5. Open the HTML version of your page in Dreamweaver.

6. Delete the slice for the YouTube clip. Copy and paste the YouTube video embed code into the code for your page. Preview and see if it fits.

7. If the YouTube video fits then keep going. If not, go back to Fireworks and resize the slice. Go back to step 6.

8. Delete the other slice and type a few sentences into the empty table describing why you selected this clip.

9. Save it and preview. Happy? Upload to your bravenet site and email the URL of the page to rmilstead@tamdistrict.org with the word SLICE in the subject line.

Why not add text in Fireworks? What's the difference if you use HTML for text?

text in Fireworks
text in HTML
-may result in larger file size
-more control over text font and appearance
-text can be treated as a graphic
-no need to use Dreamweaver/HTML
-Google won't crawl the text - the page is unreadable to Google
-may reduce file size
-Google can recognize and crawl the text on the page
-less control over the appearance of the text
-update the text in HTML - no need for Fireworks to add a line of text
-viewer can adjust text to suit their needs