Adventures in SuperComputing - Summer Teacher Institute

Dreamweaver Fundamentals

Graphics and Images

All images must be in the folder. One approach is to have a separate folder called “images” if there are a lot of pictures and icons. Extra folders are useful when building a complex site, but remember that all the links will change if this decision is made after the construction of the site has begun.

Graphics are probably one of the more exciting pieces to the Web. They give Web pages that fun, classy, or sophisticated look. They can also make your page look gaudy and too busy if not used correctly.

Graphic Format

For the Web, graphics are typically in one of two formats:

  • GIF (Graphics Interchange Format) : 1-to-8 bit color support (256 colors)
  • JPEG (Joint Photographic Experts Group) : 1-to-24 bit color support (16.7 million colors)

Similar to setting a hyperlink, you set the image source:

<IMG SRC="image.gif or image.jpg">

Note that IMG and SRC work in conjunction with one another, but control two separate functions on the image. IMG affects the image it self; how it is positioned. SRC affects the location of the graphic. As with the hyperlink, we have to determine if the graphic link will be relative, document relative, or absolute.

Finally, you need to fill in the "ALT" attribute with a text equivalent for all images in order to make your site accessible and functional for all users.

Getting Graphics

It is highly discouraged to link to graphics on the Web. The site you are linking to could change, move, or even worse, disappear. Then you are left with a broken image icon on your page.

There are literally hundreds of sites available for "borrowing" free graphics. A few of these sites are listed below:

Once you have found a graphic you like, you need to save it to your folder. This is actually quite simple:

  1. Identify graphic to be saved.
  2. Place your mouse cursor on top of graphic.
  3. Click on the right mouse button.
  4. Choose Save Image As
  5. Save the graphic in the same folder as the rest of your HTML documents.

NOTE: Be sure to remember the name of the graphic file or rename it to something you can easily remember!!