CS-081 Assignment 7

In this assignment, you are to “flesh out” your web site with some dummy content, including a “stock” image. You will also explore some page layout techniques. In particular, you are to implement a “sidebar” design for the navigation links.

1. Set up a common structure for the three new pages.

   At this point the three pages you added for Assignment 6 all consist of an h1, a ul for the list of navigation links, and a p containing the two validation links. Now, on all three of the new pages (not on the term paper):

   1. Wrap the h1 element in a div with an id named heading (or “header.”)
   2. Give the paragraph containing the validation links an id named footing (or “footer.”)
   3. Insert a new div between the navlist and the footer. Give it an id named content. You will fill this div with dummy content in the next step.
   4. Add a class attribute with the value current-page to the a link in the navigation link that goes to the current page of the site.

   Of course, it would have been easier to do this as part of Assignment 6: you could have set up one page with this structure, and then duplicated it for the other two. But we didn’t.

2. Add dummy content to the three main pages.

   Each page gets it’s own structured content:

   The Home Page

   Pretend this is the personal web page for a student. Add some subheadings (at least two), some dummy (Lorem Ipsum) text, (at least 4 paragraphs), and anything else you think a savvy college student might put on his/her home page.

   Somewhere on the page, include a picture of this student. Go to http://istockphoto.com, search for pictures of students, pick one suitable for your web page, click on the “download a comp” link, and save the file in your site’s images folder. Note that you do not need to purchase anything or even to register with iStockphoto to do this. The picture will have a watermark to prevent unauthorized use; you only have to pay them if you want to get a picture without the watermark. The picture on your home page must have the iStockphoto watermark on it. (There are many good stock photo web sites, but for this assignment, use iStockphoto so I will see the watermark.)

   The Blog Page

   In the content div of the Blog page, put an ordered list. Set up the first li with an h2, a p, a div, and another p, in that order.

   • Give the h2 the class blog-entry-title.
   • Give the first p the class blog-entry-dateline.
   • Give the div the class blog-entry-content.
   • Give the ending p the class blog-entry-footer.

   Fill in the h2 content with an English title for a blog entry. Fill in the dateline paragraph with a date in a span and an author’s name in another span. Fill in the blog-entry-content div with two paragraphs of Lorem Ipsum text. Fill in the footer with a dummy anchor tag that says, “Read more …”.

   1. The dummy link goes nowhere. Normally, you would put the value of an id after the hash symbol, and the link would take the user to the element with that id. With nothing after the hash symbol (or a nonexistent id), the link goes nowhere.
   2. The three dots after “Read more” are called an ellipsis, and are a single Unicode character. Use the … (“horizontal ellipsis”) character entity to enter it in the paragraph.

   Make sure the blog page has no XHTML errors or warnings, then make 3–4 copies of the blog entry list item. It’s all right to leave them all the same.

   The ePortfolio Page

   • Put a definition list inside the content div of the ePortfolio Page.
   • Put in a dt element containing a link to your term paper.
   • Put in a dd element with a paragraph telling how wonderful your term paper is.
   • Make 3–4 copies of your dt/dd pair inside your definition list.

3. Create the navigation list sidebar.

   For this assignment, you do not need to make a new stylesheet; you can continue to use assignment_06.css. Verify that all three web pages and the stylesheet validate using the W3C validators before proceeding.

   • Add rules to the stylesheet so the navigation list is on the left side of the page. You have a choice of making its width 20% (or so) of the page width, or a fixed number of pixels; about 300px would be a typical width to use. Give the content div a left margin equal to the width of the navigation list. Position the navigation list using the float property. (You could use fixed positioning if you prefer.)
   • Make the list items in the navigation list narrower than the list itself, center them within the list, and give them a top/bottom margin so that they are separated from each other.
   • Make the anchors inside the list items in the navigation list fill up their list items by using the display:block; trick demonstrated in class. Center the text in the anchors, and remove the underlining. Change their background color (and color if you like) when the user hovers over them with the mouse.
   • Make the background color of the link to the current web page have a different appearance from the other two, and make the cursor continue to be a pointer when the mouse hovers over this link.

Once you have set up your web site and tested that both the XHTML and CSS links at the bottom of the page give you no warnings and no errors, log out of your account so your site will be copied to the server. I will copy your site from the server to the computer in my office (babbage) to check it out.

Remember: even if your site validates perfectly, you still have to make sure that all the CSS rules actually work as you intended. Testing your web page and fixing any unexpected appearances is a critical component of all the assignments for this course.

When you finish your assignment, send me an email message telling me that it is ready. Use CS-081 Assignment 7 as the subject line. Make it look just like that to avoid my spam filters. Send the email to: vickeryatbabbage.cs.qc.cuny.edu.

Vickery Home—Course Home Page—This Semester’s Schedule Page—XHTML—CSS—Last updated