CS-081 Assignment 4

For this assignment, you are to practice using various CSS positioning and formatting features of your web site’s home page. The structure you are to set up is to have five sections: (1) The page title is to be in a div named header: the title itself is to appear centered at the top of the page. (2) There is to be a footer div at the bottom of the page containing the usual XHTML and CSS validation links for the page: they should be small and centered. (3 and 4) There are to be two sidebar divs: the left one is to contain an unordered list with links to the Home and Picture Gallery pages, and the one on the right is to contain some thumbnails from your Picture Gallery, aligned vertically. (5) The content div goes in the middle of the other four. Fill the content div with lots of paragraphs (fifteen would be a good number) of Lorem Ipsum text, enough to make sure the page is too tall to fit completely in anybody’s viewport.

Details

1. Set up the page structure and insert the Lorem Ipsum text.

   Here is the structure of the body of your index.xhtml file:

   <div id="header"> <h1>Page title goes here.</h1> </div> <div id="navigation"> <ul> List items containing links go here. </ul> </div> <div id="sidebar"> Images go here </div> <div id="content"> Many paragraphs of Latin text go here. </div> <div id="footer"> Validation links go here. </div>

   Your page should look just like the one above, with your own content inserted in the places indicated. As explained in class, Lorem Ipsum is latin text that is used in laying out projects to show where text goes, but without distracting the viewer with meaningful content. There are several sites on the Web that will generate Lorem Ipsum text for you. For example, www.lipsum.com is a good one: go to the section, “Where can I get some?” to get your paragraphs for this project. Copy the generated text, and paste it into your content div. Be sure to wrap each paragraph in its own p tags, and to reformat the text so your code will be easy to read without having to scroll horizontally.

   Once you have your XHTML page set up properly, you can close it and should not have to change it again for the rest of this project: do everything else by editing your screen.css stylesheet for the page.

2. Use floats to position the sidebars and the content section.

   Edit your screen.css stylesheet to assign the values left and right to the float property of the navigation and sidebar divs:

   #navigation { float: left; } #sidebar { float: right; }

3. Select an harmonious color scheme for the five divs.

   Use Petr “Pixie” Staníček’s Color Scheme Generator to select a set of colors to use for various elements of your web site. For this assignment, you are to use a different background color for each of the five divs plus a contrasting color for the text, so you would need at least six colors. However, you may use just one color for both the header and footer, a second color for the content, and a third color for both sidebars. Set the background-color and color properties for each div and make sure your home page looks good.

4. Select fonts.

   Select two different font families for your site: one for headings and another for body text (what goes inside paragraphs). You have five font-family property values to choose from: serif, sans-serif, cursive, fantasy, and monospace. Review pages 48-49 of the textbook, and experiment with those five values as your fallback font families. The following “web safe” fonts are installed by default on both Windows and Mac OS X according to Jason Beaird in The Principles of Beautiful Web Design; use two of them as the preferred fonts for your headings and body text. The following list shows these font names using their own font-families, provided they are installed on the computer you are using to read this page:

   • Arial
   • Arial Black
   • Comic Sans MS
   • Courier New
   • Georgia
   • Impact
   • Times New Roman
   • Trebuchet MS
   • Verdana

   And here is the fallback set, whose appearance may vary from browser to browser, even on the same computer:

   • Serif
   • Sans-Serif
   • Cursive
   • Fantasy
   • Monospace

5. Style the Links.

   Use CSS to make the navigation list display as a set of bars that span the width of the navigation div. Make the appearance of a link change when the mouse hovers over it and after the link has been visited using the pseudo-classes, a:link, a:hover, and a:visited.

6. Adjust Margins, Borders, and Padding.

   Use CSS to style the layout of the various parts of the page so it is easy to read and looks good.

7. Optional Features

   You may apply background images to various parts of the page, and you may choose to make some of the elements of the page remain fixed on the screen as the user scrolls through the content div.

Submit The Assignment

Send me email when you have completed the assignment.

Be sure you put CS-081 Assignment 4 in the Subject of your message and put your name in the message body.