Reading Assignments

Read Chapters 4, 9, 12 of the textbook.

Read CSS Positioning 101 by Noah Stokes.

Coding Assignment

1. Set up a directory for the assignment.

   Name the directory Assignment_6, and make it a direct subdirectory of your My Website directory.

   Add a link to Assignment_6/Example_A.xhtml to your index.xhtml page; put right after the h1 for the page.

2. Create 12 identical web pages and 13 stylesheets for the assignment.

   The names of the web pages will be: Example_A.xhtml, Example_B.xhtml, Example_C.xhtml, Example_D.xhtml, Example_E.xhtml, Example_F.xhtml, Example_G.xhtml, Example_H.xhtml, Example_H2.xhtml, Example_H3.xhtml, Example_I.xhtml, and Example_J.xhtml. These all go in your new Assignement_6 directory.

   The stylesheets all go in your site’s existing css directory. Name one stylesheet examples.css, and name the other twelve example_a.css, example_2.css, etc.

   Put a link to examples.css in all of your new web pages, and add a second link in each web page to the corresponding stylesheet.

   It will be much more efficient to create just Example_A.xhtml, examples.css, and example_a.css, and get everything working for those three files first, and then to make 11 copies of Example_A.xhtml and example_a.css with all that framework set up and tested. The alternative would be to create all 25 files, and then to edit each one separately, but that would be very tedious. The following instructions assume you will be working the more efficient way.

3. Set up contents of Example_A.xhtml

   Give the body four children: a header, a nav, a section, and a footer, in that sequence. Note that when it comes time to style these four elements, you will be able to use simple child selectors, like body>section for these four elements: no need for classes or ids.

   Put an h1 and a p inside the header. Make the h1 say Example A and make the paragraph say something clever.

   Put twelve p elements inside the nav, and put an a element inside each p. Use this code for the first paragraph:

   <p id="current-example"><a href="Example_A.xhtml">Example A</a></p>

   Make the other 11 paragraphs just like this, except omit the class attribute from them, and adjust the text and href attritbutes so the links go to the appropriate pages. (Even though the other 11 pages don’t exist yet.)

   Leave the section empty for now, and put the validation links inside the footer.

   Go to your web site, click on the link to Assignment 6, and you should see something that looks like the screenshot below. Note that no stylesheet rules are set up yet.

   

4. Make 11 copies of Example A

   Edit each web sheet so it has the correct title, h1, and so the correct paragraph has the current-example class.

   Verify that you can navigate across the 12 web pages by clicking on the links. There is no point in validating the css yet, but you should validate the xhtml of several of the pages.

5. Format Example A

   Set up the navigation section so that the links are arranged horizontally; it’s all right to put them on two rows because there are so many of them. Regardless of how many lines there are in the header section, the nav must appear in the same place across web pages.

   Implement the other requirements for the assignment as specified in class. Apologies from your absent-minded professor for putting this part of the assignment up only 4 hours before the deadline!

   Be sure the validation links (in the footer) remain fixed at the bottom of the web page. The section for the examples must fill the space between the nav and the footer

   Put the HTML code from the A List Apart article inside the section, and the corresponding CSS code in the Example A stylesheet.

6. Set up and test all 12 examples.

   Make sure all 12 web pages look right. Adjust stylesheets as necessary.

Submit the Assignment

When your page is ready for me to review, send an email message to Christopher.Vickery@qc.cuny.edu with CS‑081 Assignment 6 as the Subject line. All you have to do is to put your name in the body of the message so that I know who sent the message. I will then copy your website from your profile on the server (oak) in the lab to the web server on babbage, where I will verify that it works correctly.

• The web server on babbage is on a case-sensitive file system. That means that if you don't capitalize file and directory names exactly right, your site will no longer work when it is copied to babbage, even though it may have worked perfectly well in the lab, where the file system is case-insensitive. Be sure you have turned on the “case sensitive link check” option for your site, and run a link check for your site before submitting the assignment.
• Your site will not be copied to the DocumentRoot on babbage, so any links with absolute pathnames (ones that start with a / character) will not work: make sure that all internal links in your site use relative, not absolute, pathnames.