Adding Textures, Color, Graphics, and Animation to Web Pages

Introduction

Making web pages visually appealing is important. In order to design an effective web page, you need to catch the viewer's attention and keep it long enough to present your content. There are many ways that you can add interest to web pages, such as adding color to background and text, using textures, bullets, bars, and graphics. There is an abundance of material available on the Internet. This lesson will introduce you to some basic concepts of graphic design, show you how to add these to your web pages, and give you some Internet references for graphics and design tools you can begin using today.

It is important to avoid overdoing it when adding textures and graphics to web pages. Just a few notes on style:

• Use graphics to draw reader to content and give visual focus.
• Avoid graphic distractions and confusing layout.
• Using graphics in small doses will have maximum effect.
• Establish a layout/style and be consistent across all pages of site.
• Limit use of large images or multiple images on a page, they require more time to download.

For more information on style and designing effective web pages, check out the Sun Microsystem's Guide to Web Style or the WWW Style Manual by Yale Medical School.

---

Resources

Color

• ColorMaker - allows you to sample colors for background, text, and links; then gives you the body tag to copy into your web page when you find the combination you like
• RGB Color Chart - contains hexadecimal codes for a color palette that will not dither when viewed on the web

  Background

• Textures - about 80 different background samples, can view full screen with text samples on them
• Pattern Land - browse archives by picture or name

  Graphics

• Hee Yun's Graphic Collection - copyright free collections of clip art, bullets, bars and backgrounds
• Jelane's Free Web Graphics - collection of groups of buttons & bars that work well together
• Microsoft Images Gallery - rules, buttons, backgrounds, bullets, icons, clip art, photographs
• Media Builder Image Library - animated GIFs, background textures, borders, icons, lines
• Cool Graphics on the Web - web graphics, animations, icons, sounds, kid and cultural diversity collections
• Caboodles of Clip Art - clip art forum, theme collections (ex. animals, education, sports)
• Clip Art Universe - copyright free buttons, pictures, animated GIFs, dividers
• Teachers.Net Teaching Clip Art - education theme clip art
• GIF Animation on the WWW - download software to animate your own graphics, gallery of animated GIFs

  Searching for Graphics

• Yahoo's Image Surfer - Yahoo's search engine for graphics
• Clip Art Searcher - search forms optimized for finding graphic files

---

Procedures

Follow these instructions to use graphics with Claris Home Page:

• Color - using color for background, links, and text
• Textures or Backgrounds - using background images
• Adding Graphics - inserting images, bullets, bars, animated GIFs
• Downloading Graphics - how to get and save graphics from the web to use in your web pages
• Clip Art Library - how to find and use graphics from the Claris Home Page Clip Art Library

---

Exercise

In this exercise you will be given a web page to work with. Your task is to use the procedures from this lesson to make it more visually appealing.

1. Go to the exercise page and view it as it is now.
2. Save the web page source, so that you make changes to it, by opening the File Menu and selecting Save As.
3. Choose the format (on the bottom of the window) to be Source. Save the file to your desktop. You may want to create a folder called "Practice" with an Images folder inside for your graphics.
4. Open Claris Home Page and open the File menu. Select Open, then find the file "Exercise" on your desktop and open it. Now you can edit this page.
5. Try adding color, a background, and a graphic to the page of text.

Go to Exercise Page

Last updated on July 18, 1997