Lab 5 Instructions

Using CSS to Control Web Page Layout

You will practice using CSS by applying it to the review web site you made in labs 2 and 4.

Part 1

You will use the single web page from lab 4, part 1 (originally done for lab 2, part 1, it was a single page with a review of something) as your starting point.

1. Create an external CSS file with rules that:

   • Set a background image.
   • Set a fixed width for the body of the page.
   • Use the float property to move the figure to the right side of the page.
   • Use the clear property to end the float.

Part 2

Use lab 4, part 2 as a starting point. (Originally done for lab 2, part 2. It was a review site with a home page and at least three review pages.)

1. Use float and other appropriate CSS properties to create navigation links on each page. The navigation list should be arranged horizontally and links should look like buttons (have a colored background, no bullets, etc.) rather than links.

2. On at least one figure:

   • Add padding, a visible border, and margin.
   • Make the corners of the figure rounded.
   • Use relative positioning to place the figure somewhere other than its original location.

3. For the header of each page (including the home page):

   • Add a background image.
   • Set the Z order so that the heading (H1) is on top.

Check your pages using the W3C HTML Validator and the W3C CSS Validator.

Submission

Publishing to citstudent

• Use FileZilla to upload the folders containing your web site to citstudent.

  • Do not zip the files.
  • If both parts 1 and 2 are in the same web site (as they should be), you can just upload that one web site.

• Record the URL (web address) of your home page so that you can enter it on Moodle. Hint: remember that public_html is not part of the URL.

Submitting to Moodle

• Zip the web site (assuming parts 1 and 2 are in the same web site).

• Upload the zip file to Moodle.

• Enter the URL (web address) of your site's home page in the "Online Text" box for this assignment on Moodle. This is important—without this, I won't be able to find your web page on the internet.

   

Web Authoring Lab Instructions by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.