CS-081 Assignment 3

This is an exercise in managing CSS layout box properties: margin, border, padding, background color, background image, and position.

1. Set up the assignment directory.

   Create a new subdirectory of your web site, and name it Assignment_03. Right-click on your index.xhtml file from Assignment 2, and select Edit→Duplicate from the drop down memory. This will create a new file named Copy of index.xhtml, which you should drag to the Assignment_03, and rename index.xhtml.

2. Add a navagation list to your home page.

   Add a new div to the index page for this assignment, placing it between the header and content divs. Use the following code:

   <div id="navList"> <h2>Navigation Links</h2> <ol> <li><a href="#" class="current-page">Home</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Information</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Help</a></li> </ol> </div>

   Feel free to change the wording of any of the text if you would like to, but keep exactly this XHTML code structure, and do not change any of it as you work on the project.

   Pick one of the style sheets you used for Assignment 2 to use as the starting point for this assignment. Feel free to change it to make the page more attractive.

   Verify that the list of links display properly as a bulleted list.

3. Style the navigation list as a horizontal navigation bar.

   Copy one of your stylesheets from Assignment 2 to your css directory, using the name assignment_03.css. Update the index page for this assignment so that it uses just this one stylesheet. Update the stylesheet to make your new index page look “good” if it doesn’t already. Make sure your new index page displays properly as-is, with the ordered list for the links.

   Now edit the stylesheet for the assignemntn to remove the bullets from the unordered list (list-style-type:none), make the h2 element disappear (display:none), and make the list items all appear on the same line. You could implement that last feature by declaring the list items’ display property as inline, but to give you better control over the appearance, use the float:left; property to stack them together, left-justified, in a single line. Test the page to make sure the list is now displayed all in a line.

   Use a background image for each anchor to make the links look like tabs. For this assignment, I am providing a fixed-width image, 150px wide, Menu-Tab-150x250.png, which you may download to your images directory. Floating the li elements that hold the anchors causes them to “shrink-wrap” so they just surround the anchors. To get the full width of the tab images to show, you need to set the width of the list items to the width of the images (width:150px;). This design will accommodate a small amount of text-size increase because the images are taller than the text that appears inside them. But when any line of text gets wider than 150px, the design “breaks” and the text will extend outside the tabs. The Sliding Doors of CSS technique can be used to handle horizontal growth; feel free to experiment with it!

   The anchors should expand to fill up the list items that contain them, but anchors are normally inline elements, which do not normally expand beyond their own content unless you specify margins, borders, and/or padding. But declaring the display property of the anchors to be block (display:block;) will accomplish the same thing. You will still need to adjust the padding of the anchors in order to stretch their height enough to make the tabs look “good”.

   Remember that in order for your CSS to pass validation, you must always specify a background-color if you specify a (text) color.

   To make the tabs change color when the user mouses over them, use different background image: Menu-Tab-150x250-Hover.png.

4. Create multiple pages.

   Create four more web pages in the Assignment_03 directory for your site, which can all be copies of this assignment’s index.xhtml page. Use file names like about.xhtml, info.xhtml, etc. Update the # link targets in the navigation list so clicking on each link actually takes the viewer to the selected page. (Update the links, then create the pages: that way you won’t have to update all the links in all the pages separately.) Change the current-page id so that is is on the proper link for each page. Add a CSS rule to the assignment_03.css stylesheet so that the link to the current page looks different from the other ones. For example, you simply have no background image for the anchor element on the current page.

5. Optional: Create your own background images for the menu tabs.

   Use Fireworks to create your own background images for the menu tabs. Experiment with shapes, colors, gradients, and

Before you submit the assignment, be sure you perform the following four tests:

1. Publish your page and all the style sheets to the server’s document root

   Verify that everything looks right.

2. Perform a link check on your site to make sure there are no mistakes due to capitalization problems.

   (Remember, you checked the "case-sensitive link checking" option when setting up your site.) Right click on the site folder in Dreamweaver, and select “check links”. If there are any problems, they will show up in a separate window. Fix them and do another check until there are no problems left.

3. Validate the XHTML.

   You should have been looking at the TIDY and Firebug icons in the Firefox status bar as you were testing your code to be sure they both are green circles with white checkmarks inside them. Now, click on the XHTML link in the footer of your web page to get a full W3C validation check. Fix any warnings (or errors) that the validator reports.

4. Validate the CSS.

   Once the XTML validates successfully, check the CSS using the other link in the footer of your page. Again, fix any warnings or errors that the validator reports.

A final check before you submit your assigment is to view the page using Internet Explorer instead of Firefox to make sure there are no problems when using that browser. You should also check the page using Opera and Safari. You may ignore minor differences, but correct any big discrepancies.

Once you have completely tested and fixed your web page, send me an email message telling me it is ready for me to review. I will get a copy of your entire site from the copy of your profile that is saved on maple, so there is no need to tell me which computer you were working on. Just tell me that the site is ready for me to look at.

Send your email to me by midnight of the due date. My email address is: vickery at babbage.cs.qc.edu.

You must use exactly this Subject line for your email to be sure I actually receive it: CS-081 Assignment 3. (Include the "CS-081" part in the subject line of all messages you send to me this semester.)

If you do not receive an “OK, I’ll check it out!” reply from me within a day or two of submitting the assignment, it means I did not receive it. But I will be sending that acknowledgement manually, so don’t resubmit the assignment until I have had a chance to reply to the first one.