The Steps
All the images you create will be kept in a single folder in your website. This folder is called "images." If you don't already have a folder called "images" in your Sites folder, please create one now. Each image you create will first be saved into this folder. You will use Fireworks to create most of your images. Only after the image is saved will you insert the file into your Dreamweaver document.
In this assignment you are going work with different images. Create a new Dreamweaver document titled images.html.
Fireworks automatically saves all documents as a PNG format. You can change the format to a variety of image formats.
To change formats go to the menu bar and select File -> Image Preview and click in the 'Format' drop down menu box.
When creating Web pages we are going to use PNG, GIF (flat color images), or JPG images (for photographs).
1. Open Fireworks and from Fireworks open a new image file. This image file can be a picture you already have (on your Desktop or in your iPhoto Library) or it can be an image you save to your folder from the Internet.
2. Check the bottom right corner of the window your image is opened in. Are you viewing your image at 100%? If not, try to change your view.
3. Go to the Modify menu, then Canvas --> Image Size. You can alter the size of your image by pixels or by print size. Try changing the size. Before you put any image on your web pages you should make sure you've made it the size you want in Fireworks.
4. In the same Image Size window, set the resolution to 72 pixels/inch. This is the optimum setting for a web browser on the Mac OS.
5. Save your image by going to Image Preview. What type of file do you want to save this image as? How big is your image file size going to be? How can you change that? Make sure to save/export it into your Sites-images folder.
6. Create a six-cell table in images.html. Insert this new image into the table. Include the following information with each image: image type (png, gif, jpeg), size of the image in pixels (400 X 300, for example), size of image file ( 42 KB, for example), and where you got the image (citation).
For images that are not your own, you MUST cite the source. For images from the internet, please write (either on the web page or in the code) a citation like this: "The image of (describe the image) is from: http://www.(the rest of the address)." DO NOT use the google images web address, but the actual, original web address where the image appears.
7. Using Fireworks, create and/or edit the following images and insert them AND the information indicated in step 6 in one of the cells of the table:
- An image of yourself taken with a digital camera (this could also be edited in iPhoto).
- A drawing made using Fireworks and saved as a GIF image.
- A drawing made using Fireworks and saved as a PNG image.
- An image you scan into the computer.
- Text (in a cool font) as an image WITH a transparent background.
- Make at least one of these images a link.
Helpful hints:
- Keep them small - keep the file size smaller than 40KB if possible.
- Reduce the color set of simple line drawings
The Assignment
Create images.html, so that:
- Images.html contains a 6-cell table, each with a unique image, that has been edited or created in Fireworks, of the following types:
- image from the Internet (an image in the Public Domain)
- An image of yourself taken with a digital camera (this could also be edited in iPhoto).
- A drawing made using Fireworks and saved as a GIF image.
- A drawing made using Fireworks and saved as a PNG image.
- An image you scan into the computer.
- Text (in a cool font) as an image WITH a transparent background.
- Images.html contains the following for every image:
- citation for every image that is not your original image or information about how you made the image
- image type (png, gif, jpeg)
- size of the image in pixels (400 X 300, for example)
- size of image file ( 42 KB, for example)
- Images.html contains at least one image that is also a link to another page.
- If you have time, research how (and why) to make an Image Map. Add an image outside the table and create an image map with it. Below the image, describe what you have done.