Home | CSS | Tables | Images | Typography | Layout | Devices | Color Theory | Forms | Features | Resoures | Access |

Images

To add an image to your web page follow the directions below:

1. On the Insert toolbar click the Image button.
2. A box will open and you will need to locate the image you wish to add.
3. After you locate your image click OK.
4. A notification box will appear telling you that the image is located outside your root folder.
5. Click Yes to confirm you would like the image to be copied to your root folder.
6. Another box will appear and you will need to locate the assets folder in your root folder.
7. Double click the assets folder to open it, name your image as you wish.
8. Add alternative text to the image.
9. Your image should now appear on your page.
10. You should be able to see your image file inside the assets folder in the files panel.

Rollover Images

A rollover image lets your audience know that an image has meaning or is a link. The rollovers require a minimum of two graphics, the main image and then an image when the cursor is over the image. Be sure that the images are the same size to avoid looking distorted. The same applies for simple rollovers.

A disjointed rollover is when you run your mouse over one image and a separate image on the page changes.

Navigation bars with multiple rollover states has up to four different states: up, over, down, and over while down. Up is when the graphic appears on the web page right after it is loaded, this referred to as the out or off state. Over is the graphic that appears when the mouse is moved over the image. Down is the way the graphic looks after the user clicks on it. Over while down is what appears when the mouse is moved over the graphic in the down state only.

Flash buttons have similar characteristics to rollovers and is created in Adobe Flash and is created in swf file format, instead of gif or jpeg. To view Flash content on the web, you must have the Flash plug-in installed in your browser, you can download it for free at www.adobe.com/flashplayer.

Editing Images

Here are some sites you can visit if you would like to research editing your images: MEDIACOLLEGE.com , CreativeCow.com , and Fotosizer.com. But Photoshop CS3 is one over the best image-editing programs.

Images may need to be edited for a web site do to their dimensions and size. A large image may take to long to load on the site and may instigate your viewer to leave for another site. People do not have much patience when it comes to viewing and waiting for images and things to load on the internet.

The dimensions tells us the width and height of our image in pixels, and also tells us the file size of our image. The file size tells us how large or small our image is going to print based on the image resolution, which we also set with file size. You can think of the dimensions section as the section you'd want to change if you were working on an image for the web or simply to display on your computer screen, while the file size is used when you need to control how large your image will print.

Home | CSS | Tables | Images | Typography | Layout | Devices | Color Theory | Forms | Features | Resoures | Access |