Tasks

Midterm Exam Due Now

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.

 

arrow upreturn to top

Graphics

Formats

By now you should have read Tollett and Williams. Perhaps your head is spinning a bit with graphics, but it’s time to start playing.

First, let’s 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 strange case of PNG

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.

Inline Graphics and Web Color

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.

The HTML

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?).

 

arrow upreturn to top

Graphics Work

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.

Typography

Follow Tollett and Williams on the following:

 

arrow upreturn to top

Graphics Task

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:

Web Graphics Sites

Graphic Tricks

Animated GIFs (if you're bored)

Or

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

Clip Media Places to Start With

 

arrow upreturn to top

Table Practice

Exercise 1: Use a table to format these exercise pages to look something like this

Exercise 2: Duplicate my format for this page (the formatting for ECI 304)

Examine this page

  1. See if you can predict how many rows and columns there are
  2. View source
  3. Find the dimensions of each column

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.

Table Resources

 

arrow upreturn to top

Assignments for week of November 1

Lab Work

Readings

Hollenbeck Home

Last modified Thursday, April 13, 2006 9:56 AM
.

Search ECI 575

|