YOUR FIRST WEB PAGE DOWNLOAD

As usual, if you have a problem, raise your hand.  When you are done,
come to the TA or instructor and make sure you have your completion
of the lab recorded.  Before you go, always log off your machine.


GETTING STUFF

1.  Before you can design web pages, you have to learn how to
	download and upload files.  

	This can be easy or hard, depending on how much of it
	you actually do yourself.  As usual, you'll learn more when
	you do it the hard way.

	But let's start easy.

	Find ten web sites you like and save them to the desktop.
	Yes, ten.  I want to make sure that you have enough that
	one of them will give you trouble.

	First, try saving each by viewing the source and saving
	the notepad or wordpad text to a file.  Try viewing this
	saved desktop file in the browser.  Missing the images, right?

	You can save the web page using File/Save as Complete Web Page.
	This will get the images with the source.

2.  You will use secure shell file transfer to put the files on a
	server.  Your server is hilton.cec.wustl.edu, account is
	cs100.  You need to use the .www-docs folder and make a
	subfolder with your name (no spaces in the name, please).
	Hint:  you need to show hidden files in order for .www-docs
	to show up.

	Put one of your web pages and its associated images on the
	server.

	You should be able to view it as http://cec.wustl.edu/~yourname

	and notice how the URL changes when you click on the html file
	you uploaded.

	If you run out of space, your fellow students have not done
	their assignments correctly.  Feel free to blow away some of 
	their files on the server.  This is one reason why it's nice
	to have your own account.

3.  If this one displayed correctly (no missing images, correct fonts,
	all flash files present), try delete the html and the images
	from the server and put another of your saved pages and its
	image folder on the server.

	Surely one of them will break.

	When it does, there are several possibilities.  Some are easier
	to fix than others.  If you are missing a flash file, see
	if you can look through the source and find something ending
	in .swf.  You need to find this file on the web and download
	it separately, then include it in your files you upload to the
	server.  If it is a style file, look for something ending in
	.css.  Yes, have to view the html source and use Search/Find.
	If you are missing an image that is part of a javascript animation,
	or a rollover, this can be a bit harder to figure out.  But you
	might be able to guess it.  Maybe the TA isn't too busy to help
	you.

4.  Wow, what an exercise.  Now, choose one web page.  Open three
	browsers.  In browser one, show the original as it appears on
	the web.  In browser two, show the copy you have on the desktop.
	In browser three, show the version you have put on the
	server, hilton.

	Ask the person next to you if he/she can tell which version is
	the original, which is the local disk, and which is on the 
	Wash U server.  If you hit the F11 key, you can hide the URL's
	which makes it really hard.  The only way to tell is to reload,
	or to mouse around and look at where the links take you (or
	right-click for the properties of images).

REALLY MESSING AROUND

5.  This is already a lot to have done for the day.  But one more thing
	to do is to look at the source of one of the pages.  Use the
	desktop version.  (You can close your connection to the server
	if you want.)

	The source of a web page usually has a lot of numbers in it,
	specifying font sizes, table widths, image heights, and colors.
	Change some numbers.  Just a couple.  Then save the source and
	view the revised version in the browser.  Did you see anything
	change?

	Try again.  Make a few changes to the source and view the result
	in the browser.

	This is even a good time for you to learn keyboard shortcuts.  The
	edit-source-save-file-change-window-reload-browser cycle is very
	common in web design.  You DO NOT want to be stuck using your
	mouse.  CTRL-S will save a file, ALT-TAB will switch between
	windows, and CTRL-R will reload the browser.  Try it.

	Make half a dozen changes and view the results each time,
	using your keyboard shortcuts instead of the mouse.

	OK, show the TA and you can go.