Table
of
Contents:
Getting Started - Tips and Tricks
Interlit Web Site Links to Textbook Chapter Resources
Required Equipment, Software and Services
Course Syllabus
Course Assignments and Due Dates
Part One: Understanding The Internet
Part Two: Getting On The Internet
Part Three: Communicating Over The Internet
Part Four: Finding Things On The Internet
Part Five: Creating Web Pages
Part Six: Using Multimedia On The Internet
Part Seven: Planning For The Future Of The Internet
Send E-Mail:
Internet Literacy Home Page |
After completing this chapter, you will be able to:
- Download the shareware version of Paint Shop Pro for Windows or Graphic Converter for the Macintosh.
- Convert images into a file format suitable for display on Web pages.
- Resize and resample images to fit the layout of a Web page.
- Adjust colors for optimum display performance on Web pages.
- Understand the concept of a transparent GIF.
- Know how to download a utility for creating transparent GIFs.
- Paste an image onto a Web page.
- Tile an image onto a Web page.
Backgrounds and Images
The use of backgrounds and images adds interest to an ordinary web page. Nearly every page on the WWW uses some form of graphics or pictures to spice up its site.
Where to Obtain Backgrounds and Images
- From Internet sites which offer free graphics (Use Yahoo or another directory or search engine to find these sites.)
- Create your own using Paintshop Pro, Adobe Photoshop or Illustrator, Microsoft Paint, Corel
- Create yoru own using digital photography or a scanner
- From a commercially produced CD or diskette containing non-copyrighted clip art images
Considerations
- Make sure the background color or images do not obscure text or slow down the page's loading time
- Use page images sparingly to avoid clutter
- Use proper image file types: gif, jpg, jpeg
- Keep individual image file sizes down to no more than 20k
- If you resize image files, watch out for distortion
- Provide alternative text for web surfers who have disabled image loading functions on their browser
Background Colors:
- Use a hexadecimal color code (Example: #FF0000)
- Use one of 16 Netscape default colors by name (black, navy, silver, blue, maroon, purple, red, fuschia, green, teal, lime, aqua, olive, gray, yellow, white)
HTML Coding for Background
<BODY BGCOLOR=#FF0000>
-
<BODY BGCOLOR=RED>
- or to use a background image -
<BODY BACKGROUND="BACKGROUND.JPG">
HTML Coding for Images
<IMG SRC="IMAGE.GIF">
Providing Alternative Text for Images
<IMG SRC="IMAGE.GIF" ALT="IMAGE FILE">
Image Alignment and Placement on Web Page
You have several options for aligning images with text on your page. You can use a table to place an image in one cell and the accompanying text in an adjoining cell. You can also use the following HTML coding options:
| <IMG SRC="IMAGE.GIF" ALIGN=LEFT> | This coding would place the image on the left-hand side of the page with text wrapping around the side of the image on the right. |
| Other Possibilities include: | RIGHT (Image appears on right, text on left)
TOP (Aligns image to the tallest item on the line)
TEXTTOP (Aligns image to the tallest text item on the line)
MIDDLE (Aligns bottom of line of text with middle of image)
ABSMIDDLE (Aligns middle of line of text with middle of image--use with small images)
BOTTOM (Aligns the bottom of line of text to the bottom of the image)
BASELINE (Same at BOTTOM>
|
| You can also center your images on the page by using this coding: | <CENTER><IMG SRC="IMAGE.GIF"></CENTER>
|
Sizing Images
If you don't wish to use a graphics program to resize your images, you can resize using HEIGHT and WIDTH HTML keywords as part of your coding. For example:
<IMG SRC="IMAGE.GIF" WIDTH=240 HEIGHT=260>
Remember, the number you use to define height and width refers to the number of pixels.
Online Resources:
- Kodak: Photo CD Menu
- ETC PhotoCD Catalogue
Digital Camera Manufacturers
- Agfa Digital Imaging and Electronic Prepress Systems
- Apple Computer
- Canon Computer Systems Inc.
- Casio
- Welcome to Connectix
- The World of EPSON
- Welcome to Fuji Photo Film U.S.A., Inc.
- Welcome to Eastman Kodak Company
- Welcome To Nikon Inc.
- Olympus America Inc.
- Welcome to RICOH WWW Server
- SONY
- Internet Product Watch
Clip Art and Backgrounds
- The Background Sampler
- Jelane's Free Web Graphics
- Imagine : Version 1.0
- Hee Yun's Graphic Collection
- Barry's Clip Art Server
- The Graphic Station
Converting and Creating Images
- Home of Jasc Software, Inc.
- Graphic Converter (shareware)
- GIF Construction Set
- GIF Animator: Overview
- GifBuilder
- GIF Animation on the WWW
- Optimizing Animated GIFs / GIF Animation - WebReference.com
Go to:
Chapter Eighteen
Chapter Twenty
|
