Homework- Cascading Style Sheets

This is the review assignment from Tutorial 7 in the ITD-110 textbook. It is a better learning experience than the exercises in the current textbook.

One problem with doing this assignment is your textbook does not really have a comprehensive style sheet reference. If you have your ITD-110 textbook, the appendices contain the information you need. Otherwise there are some references in the chapter in your textbook. A good place to go that I recommend is http://www.w3schools.com/css.

Chris has received feedback on your pages from the other members of the Web site team at Maxwell Scientific. They like the way you've used style sheets to create an overall design, but there are some style changes they'd like you too make.

Also, the physics, engineering, and electronics pages have been written, so your first task will be to apply the style sheets to those pages. Chris also would like you to continue giving each products page a distinct header color. Finally, she wants you to insert the watermark graphic, "Review.jpg" on each page to indicate that these Web pages will be going back to the Web site team for final review once you're finished.

To make the design changes to the Web Site:

  1. Open this file (a self extracting executable for Windows computers) and save the files to the folder of your choice, or to a student data diskette.
  2. In your text editor, open the files, Physicstxt.htm, Engtxt.htm, and Electtxt.htm. Save the three files as Physics.htm, Eng.htm, and Elect.htm, respectively.
  3. In your text editor open up the file MWSPtxt.css and save it as MWSP.css.
  4. Change the font color for the headers in the Engineering page to blue, in the Electronics page to teal, and in the Physics pages to the rgb color value (158, 160, 224).
  5. Replace the horizontal lines surrounding the science articles in the Electronics and Physics pages with a <div> container that has the class name "SciArticle".
  6. Locate the product specials in the Engineering, Electronics, and Physics pages and add the property class="Special" to the appropriate <li> tags. Also to make the page work for Netscape user, enclose the monthly specials within the <div> tags.
  7. Link the three pages to the MWSP style sheet.
  8. Add, for all three pages, a new background -- white in color, with the Review.jpg graphic fixed (no scrolling) horizontally and vertically in the center of the display window, and with no tiling of the graphic.
  9. For every page, reduce the font size of the customer comments to 0.8 em, and display the comment text, customer name, and customer location in italics.
  10. Change the current style of the hyperlinks. Display all hyperlinks with a background color value of (128, 128, 128), in a white font with no underlining. Also, the size of the text should be 1 em unit, and the font choices should be first Arial, the Helvetica, and then any other generic sans-serif font. If a pointer is hovering over the link, the font color should change to yellow.
  11. Create the illusion of a 3-D box around all the science articles by changing the width of the top and left borders to 1 pixel, and the width of the right and bottom borders to 4 pixels.
  12. Create a new class called "SciTitle" for the title of all the science articles. Display the science article titles centered within a white box and a solid black border one pixel wide.
  13. Save your changes to all of the files.
  14. Validate your MWSP.css file with the W3C CSS Validator Service to CSS-2 and print out the validated source code, whether successful or not (you can ignore warnings). Validate the HTML using UTF-8 encoding and XHTML 1.0 Transitional type for at least Elect.htm and print out the validated source code, whether successful or not.
  15. Print your style sheet and HTML code for all five web pages.
  16. Open each of the five pages in your Web browser and print each one.
  17. Staple them all together and put your name on the top most sheet, and turn it in at the next class.