CS 203 Lab 3
Due within 4 days of the lab
Starting this week, you will indicate that your lab is ready for marking by
filling out a form that is below
If you have not already done so, please get your index.html page on
osiris.
This week, be sure you have some interesting content. You can remove
anything you only did because I wanted you to try something out.
This week I want you to have at least
two pages, so start a new one if you only have index.html as yet.
CSS styles
For today, add some (more) style
specifications to your page(s). See How
to
do CSS styles
Modify some image for your
site.
For example, if an image is 3000 pixels wide, and has too much sky
and a building wall on the left and you want the final result to be 400
pixels wide on your page, first select a rectangle and crop to eliminate the extra edges, and
then resize (scale) to a width of 400(pixels). (Be sure a box such
as "keep ratio" is checked, so you don't distort the picture)
Most PC's have utilities with at least capabilities to crop, to adjust
brightness and contrast, and to
scale (resize) images.
In our lab, use:
- Windows
- paint.net
- Mac-OS:
- Preview
In particular, you could:
- Crop or scale a large image so it is an appropriate size for your
page.
- You could crop yourself from the class picture, for example
- Modify an image to make it suitable for background, by adjusting
the contrast and/or brightness.
All pages should be linked
All your pages should be reachable from index.html. One should be
able to start there, and find links to (most) of the other pages. Each
other page should have a link back to "home" (index.html)
<a href="index.html">Home</a>
As sites become more complex, site navigation becomes more
problematic. Put links to other pages wherever appropriate. One hates
to be sent around in circles without ever finding what one thinks must
be there, however.
Minimum requirements for this week:
- You signed in to the class, so your name is in the class list, otherwise your lab will not be marked,
- Some file has been modified,
- You use some CSS,
- At least one page (file) has a background-image, and the the text
contrasts well with it. (Yellow on
white doesn't.)
- If necessary, there is a good background-color in case image
isn't displayed for some reason, and
- When printed, the text shows up well. (CSS @media rules if necessary)
- It appears that you have modified some image, perhaps for size,
cropping, or brightness.
- You now have at least 2 pages, and there is a list, an image, and
a table.
- Each page has a distinct title (so I can tell them apart in my
"History")
- Each page has a link back to "Home" (index.html)
- Home has links, directly or indirectly, to every file you expect
us to look at! This is a continuing requirement.
- Tell me what you did,
by filling out this form, so that I can find your form easily, and you can tell me anything you want about it, or your pages.
Please feel free to experiment as much as you like with styles.
Back to CS
203