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

Assignment 3
Due Mon, Oct 10

Objectives

  • to experiment with CSS positioning techniques for page layout
  • to practice with relative links
  • to practice with the box model: margins, paddings, and borders
  • to practice with classes and pseudo-classes
  • to practice with documentation to learn CSS on your own

Details

This assignment lets you practice with a hodgepodge of options that you have at your disposal when you design a web site. You'll practice with images, layout, and several new CSS rules. You'll also practice with documentation so you're able to learn new tricks on your own, and not just rely on what you've seen in class. Remember, every html file you make should include a DTD, a comment for the assignment number, and meta tags for author, keywords, and description. As always, you'll be publishing everything at the end.

Part 1: A Page about You

Make an artistic web page about yourself that includes a collage of pictures and text. Your collage should contain at least 6 images and 3 blocks of text. Use an internal stylesheet to absolutely position all collage elements. The three text blocks should have different background colors but identical borders. Use a CSS class to make the borders happen. I'll let you figure out how to do the background colors. You may need to resize the images you choose so that they are somewhat similar in size.

A sample of what your collage might look like appears below. Note that I have fewer pictures and text than you'll have, but you get the idea.

Feel free to include more elements than just the collage on this page. (Tell me about yourself! This page is about you!) But at minimum, this page needs the following:

  • a title (heading)
  • a white background for the entire page
  • three links to sites you visit often (put one in each text box)
  • all images should be placed into a folder called "images" while the html file should remain outside this folder. PITFALL ALERT: Test your page after doing this!
  • Add this small image to your "images" folder (right-click on it to save it). Then use it as a background image for your page. You'll want this image to repeat vertically on the left-hand side of the page, just like I have in the picture above. To do this, you'll need some CSS we haven't seen before. Find out how to do this yourself by going to the Property List and then searching for the keywords in italics above. You can search for things in a web page by going to the Edit menu in your browser and selecting Find. Each property in the Property List is really a link you can click on to find out how it works. So find the right properties, read how they work, and then use them to make the background image function.

Publish this page on antipasto as "index.html", replacing the identically-named file that is currently in your webfiles volume on antipasto. Note that this page is not going into the "hw3" folder. We'll use that later. Test it by going to:

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

Note that if you name an html file "index.html", you don't need to include that name specifically in the URL. Test on Firefox and IE.

Part 2: Create a page about CSc055

In this part, you'll make a web page about our course. It will be published in your "hw3" folder on antipasto. Include the following information in an unordered list:

  • course number and course name
  • course description
  • instructor
  • room
  • meeting dates and times

Your page should also include:

  • at least two images relevant to the course
  • links to the following:
    • the CSc055 course page
    • Union's home page (www.union.edu)
    • the page you made in Part 1 (use a relative link)
    • the index page in your "project" folder (use a relative link). This html file doesn't exist yet, so make and publish a quick "index.html" file in your project folder that says your project is "under construction".
When you make your relative links, remember where this page will be published on antipasto with respect to the other pages you are linking to. That will help you get the links right.

Use an external stylesheet for this page. Add style of your own choosing including background colors, images, fonts, etc. Two items of style you must include are the following:

  1. In the unordered list you created for the course information, the bullets should be square. This time, you figure out what to look up in the documentation to make this happen.
  2. Just like in Assignment 2, all links for this part should look like buttons, similar, but not identical to the picture below.

    But this time, don't use images for the links. Use plain text, but then employ CSS to change the style of the links. In addition, the background color of each link button should change whenever the user either (1) hovers over the button or (2) is in "mid-click" (that is, holding the left mouse button down while in the process of clicking the link). Use two different colors for (1) and (2). An example of a color change is shown below.

Name this page "index.html" and publish it to your "hw3" folder on antipasto. Test everything, especially your links.

What to Turn In

Please turn in printouts of all HTML and CSS code. Use the gradesheet to make sure you have everything.

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.