Star Wars File Index

Right-click or command-click the links below and choose Save Link As to make your own copy before starting the homework.

HTML Files

Images

Instructions

You will add styling to the three pages linked above, whose content has been written by me. The pages can be copied from the course web page. You should not need to edit these pages. Make your own copies of them, along with their associated images, and add a link from your index.html page. As before, all your work must be uploaded to aurora in order to receive credit. You will link all three pages to a single style sheet, whose rules will apply to each. This style sheet should add the following effects:

  1. Set the page background color to something other than white. All content within the page (h1 and div tags) should be confined to a strip of width 800 pixels with a second, contrasting background color and equal margins on either side. The text should be large in size, using a serif font of your choice.
  2. The title (h1 tag) should have the stars.png image as its background. It should use yellow sans-serif lettering 0.6 inches tall, and have a yellow border 5 pixels wide at the bottom.
  3. The list of links at the bottom should also use the stars.png image as a background, and have a yellow border 5 pixels wide at the top. The h3 tag contents should be made to disappear by setting display: none; and the items of the list should be set to float: left; so that they appear on a single line. The bullets should also be suppressed, and a little space placed between them. The links should all change color when the mouse moves over them.
  4. The images within the main page content should be set to 200 pixels in width and floated to the sides: the first to the right, the second to the left. The third (where present) should be centered and span the width of the page.
  5. There should be no gaps between any of the middle content where the main page background shows through. (Add padding & margin 0 as necessary.) All the middle content should be neatly aligned vertically.

Click here for a sample image showing how one of your pages might look when finished.