\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-081 Assignment 7

Introduction

For this assignment, you are to create two stylesheets for your Blog, one which positions the navigation links vertically, and one which positions the links horizontally between the top heading and the blog entries list.

Reference Material

The Assignment

Be sure you have completed Assignment 6 successfully before you start working on this one. It is too late to receive credit for Assignment 5, but you cannot receive credit for this assignment without completing that one first.

  1. Create two stylesheets for the blog page.

    Create two new files in your site’s css. Name one fixed.css, and the other one absolute.css. Add these two links to the head element of your blog’s index page:

    <link rel="alternate stylesheet" type="text/css" media="all" title="Vertical Menu" href="../css/fixed.css" /> <link rel="alternate stylesheet" type="text/css" media="all" title="Horizontal Menu" href="../css/absolute.css" />

    You need to put these links after the existing link to the stylesheet you have been using so far for the course. (Do not take that one out.) With these links in place, Firefox will let you activate one of these alternative stylesheets from the View menu. This web page is set up with an alternate stylesheet that you can try now. If you open View—>Page Style, you will see an item named A different style; click on it, and see the appearance of this page change. (Use View—>Page Style—>Basic Page Style to get back to the original version—or just reload the page.)

  2. Implement the fixed position version

    Add rules to fixed.css so that the navigation links occupy a fixed position relative to the viewport, on the left side, far enough down to be below the main heading. Add enough of a left margin to the blog list so that it does not overlap the navigation links. Use Photoshop to create two background images for the a elements in the navigation links list, one for the inactive state, and a different one for when the mouse is hovering over the link. Adjust the list’s list-style-type property for the list, the display property for the a elements, margins, and paddings as needed to create a visually coherent navigation list.

    Test the blog page to be sure scrolling works as expected, that the links respond correctly when the mouse hovers over them, and that everything looks right.

  3. Implement the absolutely positioned version

    Add rules to absolute.css so the navigation list shows up as a horizontal “menu bar” between the top heading and the blog entry list. Unlike the fixed position version, this version of the menu should scroll off the screen if you scroll down the page. Use margins, paddings, borders, background images, colors, etc. to create the best-looking menu bar you can.

    Optional: Add a navigation link to the blog page itself and to another page called resume.xhtml. Add a class attribute with the value, current-page to the link to the blog page, and use CSS to make that link look different.

Submit The Assignment

You must check your page using to the W3C validators: there must be no warnings or errors that either of them can detect.

Check your home page to make sure it is still legible and functional.

Run a link check on your site before submitting the assignment; fix any errors. (Right click in the Files panel on the right, select Check Links, then select Entire Local Site (keyboard shortcut: Control-F8). Fix any broken links.

Submit the assignment by midnight of the due date:

  1. To submit this assignment, simply send me an email message telling me that your web page is ready for me to look at: I will copy it from Oak to Babbage, and check it out there.
  2. Be sure to put your name in the body of your email message!
  3. The Subject line must be CS-081 Assignment 7 to avoid my spam filters.
  4. Send your email to Christopher.VickeryATqc.cuny.edu. (Fix up the 'AT' part.)

See the course home page for grading and late homework policies.