CSc 055: Assignments
Assignment 1 Assignment 2 Assignment 3 Assignment 4
Assignment 5 Assignment 6 Assignment 7 Assignment 8

Assignment 4
Due Mon, Oct 17

Objectives

  • to continue practicing with CSS page layout techniques:
    • <div> and <span>
    • multi-column layouts
    • box model properties: margin and padding
  • to work with html tables

Details

Absolute positioning is easy to do, but has serious drawbacks. The look of your page can change greatly from computer to computer. Fortunately, there are more robust ways of doing layout. In this assignment, you'll practice more with the box model as well as two new tags, <div> and <span>, in order to create one of the most popular web page layouts today: a page with content in one column and a set of navigation links (a nav bar) in the other.

As always, let's stay organized. Place all pictures in an "images" folder (either the one from last assignment or a new one) while keeping html files outside of this folder. Don't forget the basics: comment line for assignment number, meta tags, and correct DTD on every html page.

Part 1: CSc 055 page Redo

Redo Part 2 of the previous assignment in its entirety, wherein you made a page about this course. This time, however, make it in a two-column format, where the left column will contain

  • a heading (like Navigation or something)
  • all the links from the previous version (in the same CSS-produced "button" style as before)

The right column will contain everything else:

  • the course specifics in an unordered list
  • two relevant images

Make one change to the right column. Right after each bullet point, make a label for the information that follows like "Course name", "Instructor", and "Day and time". Each of these labels should be in a different color and slightly larger than the information that follows, though each bullet point info should be on just one line. Use <span> to accomplish this. The picture below shows a sample of the layout I'm expecting.

Again, feel free to include more in the way of content and style. The point here is to get comfortable working with multi-column layouts. The following are required, however:

  1. Use an internal stylesheet this time
  2. Publish this as "index.html" in your csc055 folder on antipasto (so don't overwrite your old one). PITFALL ALERT: Since you're publishing this in a different place, your relative links will need to be updated!
  3. Once you have this page working, notice that when you scroll, both columns scroll, so one needs to scroll back up in order to click on the nav bar. The position attribute that we learned in class has more values than just absolute and relative. It can be used to keep the left column from scrolling so that the nav bar is always accessible, as shown below. Use the CSS Property List in the Resources section to figure out how to use position to keep the left column <div> from scrolling.

After publishing, your page should be at

http://antipasto.union.edu/~YOUR USERNAME/csc055

Test it on both IE and Firefox.

Part 2: Let's Table That, shall we?

Create and publish a page named "index.html" that will go into your hw folder. It will serve as a directory to all your assignments, similar to the picture below.

Here are the details.
  1. Use a table to organize the information. There will be 3 columns.
  2. Each row will contain info about that assignment: the assignment number, the assignment topic, and comments about what you did (like the topic for your image map, for example.) As the term progresses, you should add meaningful comments for future assignments.
  3. There should be a heading for each column and a heading for the entire table, as shown in the picture. The main heading will span all three columns. All headings should be centered within their respective cells.
  4. Each assignment number will be a relative link to the "index" page you created for that assignment. As the term progresses, you should add links to each new assignment. So for now, you should have links for the first three assignments. (This assignment won't have a link since nothing is being published to the hw4 folder.)
  5. Format your table using CSS properties in an internal stylesheet. Do not use HTML attributes (like "align") within the table tags themselves.
  6. Keep your html file readable. Be consistent about where you place starting and ending tags for <tr>, <td>, <th>, etc.

Publish this page to your "hw" folder. Test on both IE and Firefox.

What to Turn In

Please turn in printouts of all HTML and CSS code. Here's the gradesheet.

Gentle reminder...

All assignments are individual projects. I encourage you to talk to others about the general nature of the project and ideas about how to pursue it. However, the technical work, the writing, and the inspiration behind these must be substantially your own. If any person besides you contributes in any way to the project, you must credit their work on your assignment. Similarly, if you include information that you have gleaned from other published sources, you must cite them as references. Looking at, and/or copying, other people's written work is inappropriate, and will be considered cheating.