In the last section you learned how to incorporate images in web pages and you will remember that the pictures are not really part of the page, but rather are "called in" when the page loads. This means that all pictures are separate files that must be stored along with your HTML files to compose a complete page. The size of the picture files will dictate much of what you can do with pictures.
You may have noticed (particularly if you have surfed the web from home using a modem) that some pictures, and occasionally entire pages, download very slowly. This is due to a few, interrelated factors that you need to understand.
One of these factors is your modem. When you use a modem to connect to the web, you are really using the telephone wires to transmit web page files. While phone lines are OK for voice communication, they are very "narrow" for other types of electronic information (they call this bandwidth). It's like trying to squeeze a river of water through a small faucet. There isn't much you can do about this problem other than to get a bigger, higher capacity connection which will be relatively expensive compared to your modem.
What you can do is make the amount of water, the information in your web page that is, smaller. This is where an understanding of graphic file formats and compression comes in handy. Pictures are made up of many discrete dots or pieces called pixels. Each pixel carries information related to the color and shading of that individual pixel. The computer file that represents a picture is composed of all the pixels that make up the picture, so that's a pretty hefty file size. It's a lot bigger than simple text files anyway.
There are also different schemes or formats for how to organize and represent all of those pixel's information and these are called file formats and there are lots of different ones. To make things even more complicated, there are also different formulas for squeezing the data in a picture file so that it is even smaller; these are called compression formats. Fortunately, for web designers, there are only a few that are important. Web pages use two formats to compress and display pictures: GIF and JPEG formats. All web page pictures are stored in one of these formats.
The first, GIF (which stands for Graphics Interchange Format) was created by CompuServe, but has become a standard across web pages. It is most effective for line drawings or diagrams that don't contain a lot of shading.
The other format is JPEG which stands for Joint Photographic Experts Group, the group that set the standard for the data compression the format uses. The JPEG format is best suited for photographic or shaded pictures, although either format will work adequately for either type of picture. The good news is that either format can be read or displayed by any browser on any computer platform in the world (except the real old, non-graphical browsers that are rarely used today).
Many pictures that you obtain for inclusion in your web pages will be stored in file formats other than GIF or JPEG. In fact, many scanners or graphics programs typically save files as PICT format on the Macintosh and as BMP format on Windows computers. Newer graphics programs frequently allow you to save your scanned or painted images as GIF or JPEG, but if your graphic application does not, then a conversion program like GIF Converter or GraphicConverter will help you convert from most any file format to either GIF (for line or drawn images) or JPEG (for photographic images) formats. The most popular graphic application on either platform is Adobe PhotoShop which not only does an excellent job in helping you design graphics, but also allows you to do conversions easily.
There are an almost unlimited number of different sources of graphics. These include:
The processes for obtaining and creating these graphics is extensive to the point of being another course, but most school computing labs have reasonably good graphic resources, both image and graphic applications. Check your local lab for available graphic materials. Images can also be downloaded from the web by simply moving the mouse cursor over the image and holding the button until the "Save Image as... " menu appears and then following the prompted steps. Remember though, copyright is an important concern and most web-based images are copyrighted. Check this out before using "borrowed images" in your web pages!
Your local computer lab should also have scanners and graphics software that can be easily learned to help you create your own materials. Check with the lab supervisor or instructional technologist for help and advice.
All of this talk about pictures and visual materials is a reminder that the Web is a very visual medium and, while it is ideal for publishing text-based material, it can also deliver high quality graphical and photographic material. You, as a web designer should understand a little about how to select visuals for inclusion and what to do about some of the problems they may cause when you place them in your pages.
Sometimes visuals are quite simple and serve to guide or direct the user's attention, or to help structure or organize the text on the page. Visual elements such as arrows, highlighted text, line rules, tables, and areas of color each work to clarify the material presented or to break it up into meaningful units. Granted, these seem simple but look a a few web sites next time you are browsing and notice how many of these are used regularly to format text.
Actual pictures or photographs are frequently used in web sites to augment learning. How you go about choosing a picture is important because one that is not clear is not useful. Bold, simple graphics are always desirable because they are easily read and understood. Sometimes though, you may want to incorporate actual photographs to communicate your point. In that case select ones that are clear and show the information accurately. Photos realistically portray concepts only if they are sharp and distinguishable. Images that seem blurred or fuzzy or are too small only confuse and waste valuable page space. The best rule for putting pictures in your pages is to use graphics (drawings) as often as possible and then place only good quality, sharp photos in the page to illustrate your points.
Appearance is a consideration whenever you are including pictures. If you are in doubt as to whether a particular picture looks right aesthetically, ask others who are not as familiar with your page for their opinion. Remember, you page must look good to be effective with students!
At this point, you have probably realized that you made some mistakes in the initial design of your web pages. Now is the time to go back and revise them in accordance with the graphics and design guidelines presented here. Consider the fonts you have specified, and the basic layout. Is it clear and aesthetically pleasing? Can visitors find what they need and do it easily? Is the site intuitive? Have you been consistent in your use of color, fonts, layout formats?
Make your changes and the start creating your pages in HTML because we will be uploading them to the server in the next module.