Adding Images to Your Web Site
Adding images will liven up your pages and appeal to the visual learners in your class.
Maps, diagrams, photographs, animated images, panoramic movies (VR) and
Quicktime movies can all be included in your coursesite, if prepared properly
so that the file sizes are not too large. This is a lot of fun!
|
|
Finding Graphic Resources
A wide variety of clipart is available -
some for free - some for a small fee. Your CTLs have purchased Clip Art
software (264,000 images on CDs) and online resources. Please contact
your CTL Coordinator to see what is currently available.
Free clipart is available online. An Internet
search should return a variety of links. Most sites allow you to use what
they have as long as you do not try to resell the images for profit or
create a direct link to their sites (causing more traffic on their servers.)
Read "Ethics &Fair Use" to find
out how you can use graphics for educational purposes.
Creating Your Own Graphics
Digital cameras and graphic editors help
you create your own art with ease!
Digital cameras can be used to take photos
which can be altered, collaged, image-mapped to create instructional materials.
Digital photos can also be used to create a "class page" with
student pictures and profiles. Cameras can be checked out from the CTL
for 2-3 days.
Adobe Photoshop can can be used to create
graphis, manipulate graphics (add special effects) and prepare graphics
for the web. Inaddition, you can create collages that can be image-mapped
becoming a course interface.
Macromedia
Fireworks can help you create
graphics, buttons, seals, and much more, which can then be exported
as
individual graphics or as web pages (using Dreamweaver. Fireworks can
also create course interfaces. Example
All of the above applications are available
on machines in the CTLs. Instructions for Using Fireworks - Editing and Optimizing Graphics from with Dreamweaver - tutorial .zip file 420KB
Inserting VR movies and Quicktime movies
VR movies and Quicktime movies can be used for a variety
of instructional purposes. Apple has made movie making a snap with iMovie.
Check out a digital movie camera from the CTL and try it yourself. Any
G4 Mac will have the software to create your own iMovie, with easy to
understand instructions.
File size is the main consideration when including
a movie on your website. Try some examples to experience this download
time first hand.
Examples: CSM
Tour VR | CTL
Lab VR | eLearning movie
Streaming video is not yet an option in our district.
Server space is precious and movies quickly hog available space on servers.
The CVC (California Virtual Campus) has
been considering offering this service to the community colleges in
its 4 regions.
Contact your CTL coordinator if you have a project
in mind. Keep in mind that they must remain under 3 minutes so that
your students with 56K modems can download them.
- tours of sites (relevant to your course)
- how-to demonstrations (chemical process, welding techniques,
automotive repair)
- step-by-step procedures
Preparing Graphics for the Web
Graphics included within a text document,
such as Microsoft Word are compressed by the program. Graphics included
in email windows, as attachments or on web pages, need to be compressed
using a graphic compression program.
To prepare an image for a web page (or for
emai) , you need to follow these steps: ( Shareware graphic optimizers and editors are available.)
- decrease the dimensions as much as possible
- convert file format to a web file format
- compress the image to the lowest file size, yet acceptable appearance
Decreasing Dimensions
Sending a 5 x 7 in. photo will annoy email
recipients as they wait for the large download to complete. Use a graphic
editor such as Photoshop to reduce the physical dimensions of the image
to the lowest size that you are willing to accept. You can also use Adobe's
free online editor. LINKS ARE BELOW.
Converting Images to Web File Formats
The PICT files commonly used by Macintosh
plantform and the BMP files used by PC platform will not transfer successfully
on the web. These are two common file formats commonly used on the Web
About Graphic Compression Schemes
JPEG (Joint Photographic Experts
Group)
JPEG or JPG files are for photographs
and any graphic requiring subtle variations in tone. They often use
thousands of colors.
This 150 x 200 pixel, low-quality jpeg, 16K is ready for web transfer.
Tip: The original 5x7 picture from your digital camera may be as high
as 2.5MB.
The rule - shoot high quality, then reduce for the web. If you begin
with low quality image captures, you will have fewer options for manipulating
the image afterwards.
GIF (Graphics
Interchange Format)
GIF file format is limited to 256 colors and
is usually associated with clip art and lineart images - It works best
with flat colors, not gradual tone
|
|
1 K non transparent type |
1 K transparent type
|
A transparent GIF file is used when you want
the GIF image's background to show through to the page background. |
Graphic editors will usually offer you
a "web-safe palette" because not all platforms use the same 256 colors
by default. When viewed on another computer in 256-color mode, the colors
in your image may get replaced by a dithered approximation from that
platform's palette. Since the 216 web-safe colors are common to most
-- but not all -- platforms, using them will help your documents appear
the way you intend on the widest range of systems
Compressing an Image to Its Lowest
File Size
Both JPEGs and GIFs offer various levels
of compression.
- JPEG - High ...Medium ...Low ....(Scales
vary from 10-1 to 100% to 10%)
- GIF - 8 bit
depth = 256 colors to 2 bit depth = 4 colors
- What ia a web-safe
palette?
Inserting Graphics into Your Web Pages
- Place the image in an image or media folder within your faculty folder
- Place your cursor where you would like to insert the image
- Select 'insert image' from the application toolbar.
Inline Images
Inserting grapics into a web page can be done in-line, in tables or
in layers.In-line graphics are inserted in the next available line:
 Monky Wrench
 Pliers
 Hacksaw
Table Layout
Table layout allows grapics to be placed next to text. This can be
achieved using multiple cell tables.
Example:
| Hacksaw |
Pliers |
Monkey wrench |
|
|
|
Borders were turned on so that you can see how the the table holds
the text and images in place; howevver, normally borders are turned off
and are invisible. Note accessiblilty issues
|
