Introduction
With this assignment, you will set up the basic structure of a styled web site, and start investigating some of the basic features of CSS.
Description
You will always use linked style sheets for your web pages in this course. So create a development directory for this assignment at “My Documents/Assignment 4” with a subdirectory for your style sheets named “css” uder that. Also, create another subdirectory named “images” under the development directory too.
Copy your image files from Assignment 2 (the one with the images and table) into the images subdirectory, and copy your main web page from Assignment 2 into “Assignment 4/index.php”. Adjust the img tags in the web page to refer properly to the actual image files if necessary. Validate and test your assignment on the server to make sure everything works correctly.
Use Vim or Dreamweaver to create a new stylesheet named “css/style-all.css” and put the following rule in it:
Put a link to your stylesheet in the head of your index.php document:
Be sure your page now shows up with a red background.
From now on, you are to put a second link at the bottom of each of your web pages to get your style information validated. The URL of the W3C CSS Validator is:
Test this link and make sure the page passes the CSS Validation. But look carefully at the validations results and you will see a warning. What is that warning, and why should you pay attention to it?
Finally, it's time for you to be creative. Your assignment is to make your page look “nice.” Here are the guidelines for what you must do. As long as you include the features listed here, you can do anything you want. Just make sure all styling is done by editing your style sheet and that your styling effects all pass the W3C CSS validation with no warnings or errors.
- Change the ugly red background of the page to something pleasing. Be sure to avoid the CSS warning mentioned above. You may use a solid color, or you can experiment with a background image. See the URL under Figure 8-6 for a source of free background images you can use.
- Make sure the title of your web page appears in an H1 heading at the beginning of the page. This should be the only H1 in the page. Use CSS to make it centered on the page. Hint: the property name is text-align. See Page 294 of the textbook.
- Give solid colored backgrounds to all the headings. Use colors that complement each other and go well with the background you are using for the whole page. Again, be sure to avoid the CSS warning mentioned above. Use the online Color Scheme Generator to pick your colors.
- Make all your images have the same height, and give them a border. In addition to my sunset and peaches pictures, here is vertically-oriented picture of a chain hoist you should include to make sure you don't distort any images. And here's the wing picture if you would like to add that to your collection. The crane and the wing have different (larger) sizes compared to the peaches and sunset. The idea is to make them all the same height in order to make the whole web page fit well in the browser window. Even if you decide to use your own pictures, make sure your page works well with mine first to be sure you are doing it right.
- Use Example 8-4 on page 124 as a guide, and format your table so it has borders and backgrounds.
Submission
Due Date: November 15
When you finish coding and testing your web page, send an me an email message:
- Use “CS-081 Assignment 4” as the Subject. To be safe about avoiding my spam filters, make your captialization, spelling, and spacing look just like that.
- Put your login id, your real name, and your 4-digit ID number in your message.
- Starting with “My Documents” put the exact pathname to the directory containing your web page and all associated files and directories in your message. Be sure spelling and punctuation are exactly right. Use forward slashes ('/') for pathname separators.