. http://www.shuilongs.com/cios/cios255graphics.html


UAS Logo U NIVERSITY OF A LASKA
S OUTHEAST break bar
SITKA CAMPUS
CIOS 255
ShuiLong

break bar
Introduction | Colors and Values | Gifs | Tricks and Tips
Symbols and Buttons | Banners | Fonts
ASCII Characters | Animations
break bar

Introduction

Welcome to the graphics section of web publishing. This section offers lessons in all you've ever wanted to know about graphic manipulation. How to install, find, change, alter, manage, distort, morph, animate and more. There are lessons on tricks and tips to using graphics, placing and making symbols and banners, finding, downloading and installing fonts, and an explanation in the pros and cons to using ascii characters.

Colors and RGB Values

Colors can help or hinder readers of your Web pages. There are two ways of representing colors in HTML documents. One involves straightforward color names such as blue, green, yellow. In the HTML I/Images part of the CIOS 153/WP I class, you learned how to use colors in your HTML document.

Many browsers have predefined color names that are available to you. However, since different browsers have different lists and since the definitions of individual colors may vary from browser to browser, it is recommended that web authors use the color numbering scheme. Although somewhat more complex, this is better supported across platforms and thus a requirement for CAST compliancy.

Colors in HTML documents are represented by three two-digit hexadecimal numbers. Each of the two digits signifies the amount of a primary color. The first two digits represent the red component, the next two the green portion, and the last two the amount of blue. In other words, a color is formed by mixing different amounts of red, green, and blue. This method of representing colors is called the RGB color model. The total lack of color is the color black. #000000 represents black. The color of white is #FFFFFF. Note that the # symbol must be used prior to the six digit combination.

Assignment:

Gifs

This part of the graphics class assumes that you have completed the Web Publishing I/Images class, that you have used the HTML image tag by including an image in your web document, and that you show an understanding of why the inclusion of the alt="" attribute is important. If you need a refresher, the class is located at: http://www.shuilongs.com/cios/cios153html.html#images

This section also assumes you have read the Web Tips document and understand the "rules" to including graphics on your document, including: the 50K rule, focal point, image reuse, the difference between .GIF and .JPEG/.JPG extensions, and the definiton of a progressive image. If you do not understand any one of these terms, or just need a refresher, the document is located at http://www.shuilongs.com/cios/webtips.html.

Assignment:

Tricks and Tips

Online Image Converters :
There are image converting programs located on WWW sites. They allow you to bounce an image located on the WWW (for instance, an image on your website) to their site, convert it, save it to your disk, and then upload to your website and use. This means you do not have to download an image program to your already overcrowded hard-drive, nor do you need to know how to use a new image program to use fancy tools to convert your image.

Assignment: Graphics Programs :
Below is a list of several Graphic Programs that you can download and use. (See, told you this list would pop up again!) Usually on a time trial basis. If you are interested in learning more about image conversion, download one or more of these programs and play away!

Assignment:
There is no assignment but the instructor would be curious to see what you create and use :-) ! Misc. Graphics Tips :
      There are some new HTML tricks that are not yet read by all browsers. For instance, I indented this paragraph. To do so I used the   & nbsp ;   character entity. You learned about using Character Entities in the in the HTML II/Character Entities part of this class.
The HTML code  
 
 , indents the nested text from both sides. As shown in this paragraph example.
.I can also indent a paragraph, or place an image with very exact pixel precision using the Single Pixel Gif Trick.

Assignment:
If you are interested in pursuing more about Image tips and tricks, try these sites:

Symbols and Buttons

There are many web sites online that provide image indexes which include symbols and buttons you may use on your web site. Several of these sites provide online image generating programs for you to use to create custom buttons.

Assignment:
There is no assignment, just a beginning list of sites for you to choose from if you decide to use symbols or buttons on your Web Site.

Banners

There are many web sites online that provide banner makers/generators. Like the above gif conversion programs, the creator fills and submits a form which generates the banner file. The generated file is saved and uploaded to the web site and included on a web page.

Assignment:

Fonts

There are other ways to make Banners and Titles for your HTML page. One way is to create a document using a wide variety of fonts. Finding downloadable fonts to use with your document software of choice (for instance: Word 6.0, Word Perfect, Word Pad) on the web is fairly easy. From there you must save it as an image. Edit the image using your graphics program. Then upload the image to your web server and include the image in your web document.

Assignment:
There is no assignment, just a beginning list of sites for you to choose from if you decide to further explore saving and using interesting fonts.

ASCII Characters

In the old days only pain ASCII text files could be sent via e-mail. Today an e-mail message may contain an attachment that consists of virtually any type of file. Usually, people refer to ASCII files as text or plain text files, and to all types of files as binary files. If someone wanted to create an image in ASCII text, they had to create it with characters. It is recommended that ASCII characters not be used as graphics on HTML pages, unless you are writing to a text-only audience.

Assignment:
There is no assignment, just a beginning list of sites for you to choose from if you decide to further explore using ASCII Characters.

Animations

Simple animations can add interest to a page without adding a lot to the page size. To make your own customized animated GIF files, you need to download shareware software such as GifBuilder for the MAC or Gif Construction Set or Gif Animator for the PC. You can find them at Download.com or Shareware.com. Or, you can use premade animations that are downloadable from the WWW.

Assignment: