Inserting Graphics

To replace the graphics in the template or insert new graphics:

Using Dreamweaver -
1. Click on the existing graphic.
2. Using the Properties Box, type in the location of your graphic file in the "SRC" box. If you are unsure of your file path, use the File Icon next to the box to browse to your file.

Property Box

Using HTML code, look towards the top of the page. Change the text in red. Insert the file path to your image file.

<img src="images/Blue-top2.gif" width="420" height="79">

Notice in the <img> code that width and height attributes have been added. Use those to help create your own graphics and to judge the sizes. If you chose not to duplicate the graphic then make sure to delete the follow text.

<img src="images/Blue-top2.gif" width="420" height="79">

Using Dreamweaver - also delete the values in the Property Box in the "W" and "H" boxes.

Download Issues

Remember that every graphic that appears on the page adds to the size of the page. When the size of the page becomes large, the performance of the sight slows down. Keep the graphics simple and spare. Remember that the content is what the students need, not the fancy pages.

How to Create

To create graphics for the web, you will need to find a graphics program that generates gif or jpg file types. Something like Adobe PhotoShop, Macromedia Fireworks or one of the Corel products will work. The program used to create graphics for the template was Adobe Illustrator Ver. 10. This version of the software contains web tools that allows you to save everything you create as web graphics.

The first time around, a text-based web site will work great. As you become more familiar with designing web pages, you can begin to incorporate more graphics.