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:
- 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.
- 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.
- 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.
- 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.
- 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.