Performance Exercise: Create links and formatting as called for in provided pages using a text editor. Completion of the basic site will result in a "B". Extra tasks are clearly marked, and their successful execution will result in an "A". This test is open book, and you may ask for my help on Part 4.
By now you should have read Tollett and Williams. Perhaps your head is spinning a bit with graphics, but its time to start playing.
First, lets be clear about when to use gif and when to use jpeg. GIF for simple and small, JPEG for large and/or complex pictures like photos. Review the following page and notice how different compression acts with different kinds of graphics.
Further illustration and explanation of these formats can be found at Creating Killer Web Sites:
The problem with GIF is that it is copyrighted, and the owner (who shall go nameless) started threatening to charge for its use. That, and a desire for a better format, led to the creation of PNG (pronounced "ping"). It is worth knowing about this format, because it does offer richer possibilities (multiple transparencies, better animation, "alpha" channels, etc.). Someday it may become more standardized, but right now it seems stuck.
Note for Fireworks users: though Fireworks saves its graphics as ".png" files, they actually are not web ready. Fireworks .png's are "super" PNG's, with added proprietary information. Thanks Macromedia, for making things more confusing.
Another little problem with graphics is that they may or may not look like you want on someone else's browser. Macs and Windows use a different palette, for instance, and this used to cause all sorts of problems. This resulted in the creation of the Web palette, 216 "safe" colors that you could rely on no matter what system and/or monitor was displaying your pages.
You can experiment with color combinations with these online utilities.
You will always use "inline" graphics. They are placed using the <img src="url"> tag. The URL can be absolute or relative, but 99% of the time you will use relative (linking to another person's links is both bad form and risky, as who knows with they will move them?).
I'd like you to take a fair amount of time and work on graphics. There are a number of links available to help you at any level. Please view the table on the right for places to help your graphics work.
I strongly suggest going through Graphics 101.
Follow Tollett and Williams on the following:
Add one new picture to your index.html page. It can be anything from anywhere. It needs to be in a folder called graphics that should exist on your site's root level.
Having done that, see what other graphics you can employ to make your site interesting, using the following resources:
Try using ImageReady's Gif Animation powers. I've never done this, but it's supposed to be great.
Finally, become a total graphics geek by going through Optimizing Web Graphics, another tutorial from the Webreference site
Exercise 2: Duplicate my format for this page (the formatting for ECI 304)
Examine this page
The specifications for this page
Create a background graphic in Photoshop
Lay the table over the page
Upload your work and link them to your index.html page.
Thursday, April 13, 2006 9:56 AM