THREE OR FOUR SKILLS (depending on how fast you are!)

A.  Task 1 is easy to describe, but it might take a while:
	choose four of your favorite fellow student sites from assignment 1
	and four of your favorite fellow student sites from assignment 2.

	We're going to build a page with three frames on it.
	You choose whether to go rows first or columns.  

	I want you to have a big frame called main, in which you
	will bring up the beach or camille site that the person chooses.
	In a smaller frame, which is attached to main, you will have
	a navigation frame, called nav, with four choices in it.

	Ha ha ha, you can see it coming.  There needs to be a third
	frame, called topchoice, which has two choices:  choose to
	load the nav frame with four beach choices, or choose to load
	the nav frame with four camille choices.  Good luck!  That's all
	I'm going to say -- you have to figure out how to do it.  There
	are a few obvious ways -- maybe you can already see one of them.

	You might want to look at 

	http://www.cs.wustl.edu/~loui/104f05/classfiles/thu2.html	

	to remind yourself how frames work.  Also have a look at
	the class cheatsheet, if not for this task, then for the next
	one:

	http://www.cs.wustl.edu/~loui/104f05/cheatsheet.list

B.  Task 2 is easy to describe, too, and it won't take much time at all.

	I want you to choose one of your classmate's web sites and
	add a simple search bar to it.  You need to make a form tag
	and an input tag and locate it somewhere on the page.

	You can even use a style=position:absolute;top:...
	attribute if you don't want to parse their html.  Your form should
	have a submit button, hopefully of type image, so it looks nice.
	And it should have 
	
	method=get
	action=http://www.cs.wustl.edu/~loui/104f05/1025/test.cgi

	so it actually works.

	Maybe you can make the search bar a decent color.


C.  Since few of you did this lab, here it is:
IMAGE SLICING (This is 100-W lab 7)

1.  Find a web page that is complicated, like the nytimes.com
	site, or a complex artistic site.  Do a print-screen
	or alt-print-screen.

	Paste it as a new image in ImageReady.

2.  Select three areas you would like to be image rollovers
	(when you mouse over these areas, they change saturation).

	After each selection, choose "create slice from selection."

	After each selection, copy that selection to a new image.

3.  Now save the sliced image using "Save Optimized As".  

	Use a name that does not have any strange characters or spaces
	in it.

	Verify in the browser that you can view the html you saved.

	Show the TA that you can isolate one of the slices as a separate
	image by mousing over it, opening the properties, and using
	that as the URL, so that the browser displays just one of the sliced
	images.

	Note the path to the images folder being used.

4.  Go back into ImageReady and copy your three selected slices into Photoshop.

	Change the saturation of each of the three slices, and save
	each in the images with a slightly modified name.  I like
	to use img3b.jpg when the original is img3.jpg.

5.  Now edit the html source... note that it specifies a table with
	lots of images.  Find each of the images you selected and
	give each a unique id.  I like id=img3 for img3.jpg, and
	so forth.

	On img3's img tag, you will add the attribute:

		OnMouseOver="img3.src='images\img3b.jpg'"

	assuming that the src of the image is images\img3.jpg.

	Try saving this and reloading the page in an IE browser.

	Mouse over the image.  Did the image change?

6.  Add the corresponding OnMouseOver event to the other two images
	you selected.

7.  You want the original image to be restored when you mouse out,
	right?  Add

		OnMouseOut="img3.src='images\img3.jpg'"

	And test to see if that works.

	Do it to all three of your images.

	Show the TA.

8.  Try doing the rollover in a different order.  First, compose
	an image out of three layers, and keep the layers separate.

	You might find a background image, then put a border shape
	on it, like an inked line, then put some text on top.

	Make three new versions of this image, where each new version
	slightly alters just one of the layers.

	Save all three new images, and the old image, as img0, img1, 
	img2, and img3.

	Now make a web page with just the img0 image on it using the
	IMG tag.

	You're going to need three buttons.  The easiest thing
	to do is to find three MORE images, or to make them,
	and it's good if they all have the same height and width
	and are fairly small.

	Add these images to the bottom of your page using the IMG
	tag.

9.  We are going to add the code so that putting the mouse over each
	button will cause the main image to change:

	Add an OnMouseover event to the first button that causes img0 to
	become img1.  
	
	Add an OnMouseover event to the second button that causes img0
	to become img2.
	
	Add an OnMouseover event to the third button that causes img0
	to become img3.

D.  If you can get this far, I want you to do transparent gifs, too:

MAKING TRANSPARENT GIF'S

LAUNCH PHOTOSHOP

1.  You heard me, launch Photoshop.

2.  Say you want a new image, 100 x 300 pixels, and you want it
	to have a transparent background.  If you don't specify
	this transparency, you will be quite disappointed later
	in the lab.

3.  Use your brush and try to make some awful grafitti that you
	might see in a barrio somewhere where it seems you don't
	belong late at night without a big dog or stick.  You might want
	to use two colors, where the second darker color outlines or
	shadows the main, larger brush strokes.  I think this is usually
	what you see.  Oh yeah, you might want to use a spray paint tool
	or diffuse brush.

	Hah, not so easy to make nice looking grafitti, is it?

4.  Save this as a GIF, and make sure you specify that it should have
	a transparent background.o

5.  Now find an image of a wall on the web and make a web page where it
	is the background image.  You can do this with the BODY tag
	and the BACKGROUND=foo.jpg attribute/value pair.

6.  Now add your new image to the page using the IMG tag (remember, SRC=foo.gif).  
	You should be able to see through the unused parts of your image,
	through to the background.  If you see a big white square, you
	didn't do it right.

7.  Add a STYLE=position:absolute;top:300;left:200 attribute/value
	pair to your image tag.  This should move your grafitti over
	and down.

	Change the values as needed, and use the height and/or width
	attributes for the img tag to get it to look good.

8.  Unfortunately, someone always sprays over your nice art work.
	Go back to Photoshop and make two more transparent gifs.
	Overlay these on top of your grafitti and on top of your wall
	using three IMG tags.

9.  Try adding text to your page in a nice large font.  You can access
	larger fonts than FONT SIZE=6 or FONT SIZE=+6 by using the
	STYLE tag:  FONT STYLE=font-size:5in

	Nice, huh?

	Don't forget to add color to your text.  Remember how?

10.  Show the TA and you are done.