Due before midnight, Thursday 12 Apr 2007
In this assignment, you'll be creating a 2 column "Jello" layout similar to those demonstrated in class.
Remember, I've put template HTML and XHTML files on the web.
Feel free to use them as starting points.
All final pages should be both valid HTML or XHTML and valid CSS.
Make a folder called hw07. Inside it create 2 subfolders, images, and css. Create additional folders as needed.
You'll be creating just one (X)HTML file this week, and it will be the index.html file inside your hw07 directory. This will be a mockup of what you might choose to use as your main index for all of your class assignments. It will have 4 parts:
All of which is contained within a fixed-width Jello container between 400 and 800 pixels wide (25 to 50 ems assuming a default font size of 16px). This should always be centered in the browser.
You'll also need to include the following:
I'll try to include suggestions here, but the things that are required are listed in Part 2 above.
You'll probably want to start by making a container in which all of your content is going to go. Fix the size and set the left and right margins to auto in order to ensure that it is centered in the window.
Everything else goes into this container. (You can style the background of the page if you'd like. Color, background images, etc.)
Create a <div> that extends the full width of your container and put your header information inside. This could include information such as your name or the class name. Maybe toss in an image such as your CSCI100 banner from HW#3 or colors that you liked from HW#5, have some fun!
You should create a column of information on the left hand side of the screen that needs to contain 2 blocks of links. The first should be links to the rest of your assignments in this class. The second is up to you. I'll suggest having links to pages you use often for this class (homepage, validator, w3schools, etc.) but you should have at least 3 here.
Make sure the two blocks are visually separate, and don't appear to be one big list. Put in headers for the lists or maybe try out creating the block-style menu we saw in class.
Put some content here, include headers and paragraphs. Maybe come up with a div class to handle sections of information where you can style it so it fits together (e.g., boxed, color changes, background image, etc.)
Remember that this is supposed to be a mockup of what you might use as an index page for your assignments. You might want to include information about yourself, about the class, or about the assignments.
Create a footer that will not overlap with the two columns (use clear).
If you followed the Honor Code in this assignment, include that requisite statement within your footer.
I affirm that I have adhered to the Honor Code in this assignment.
Be sure to cite any sources you used for "inspiration" or layout
models in comments within the page. Recall that HTML comments are
placed between the following tags:
<!--
-->
Update your index.html file in your csci100 directory with a link to this assignment.
If you want, you can style this page, maybe even based off of this assignment (be sure to fix the hrefs).
Be sure all (X)HTML files are validated as either 4.01 Strict or XHTML 1.0, and all CSS files are valid CSS.
Upload, set permissions, and so forth. You now just need to electronically handin all your files.
If you are using Terminal you can just do this as one command:
ssh username@cs.oberlin.edu handin -c cs100 -a 7 www/csci100/hw07
Crazy column construction! J-E-L-L-O!