Week 9
We Present Midterm Projects in Class Today!
Have your project uploaded to your site and ready to show.
Also, be sure you have a copy of your project files with you to hand in (they will be copied to a USB flash drive).
Assignment 8 - Due Saturday, Nov. 2
You will create the layout shown in the pictures at the links below, using the techniques we discussed in the Week 8 lecture. (I don't just link to the completed page, of course, or you would be able to see the HTML and CSS used. Think of this as the graphic image your client gives to you and asks you to make a page just like this.) The details of how the page looks will vary depending on your computer operating system and browser, but the two examples below show how it looked in Firefox 3.5 on a Windows XP machine and a Macintosh. You will see that the lines are wrapping in different places, so if yours wraps differently, that's OK, as long as the spacing is the same.
IMPORTANT NOTE! The background image in your layout should go to the edges of the browser window (the example pictures only show a little of the background image on either side just so I didn'y have to make the image too large). The layout is a centered elastic layout with a content area 45 ems wide and a background image that fills the rest of the browser window on the left and right as shown.
You will need the starting file with the basic layout and text content. The starting file text tells you more details of how the layout is to look. Read and follow those directions.
You will also need to copy the background image and chimp image to your root folder for this assignment.
Upload the page to your web space on ftp.unm.edu. You may name the page whatever you like.
Your page must validate as HTML5 using the validator at: http://validator.w3.org/
Your CSS must validate using the validator at: http://jigsaw.w3.org/css-validator/
Send an email to tbeach@unm.edu that includes the URL to your main page for this assignment.
NOTE! The Subject line of this email should be "IT145 YourName Asg. 8"
You will be graded on:
How well you followed directions
How well your page matches the example images
You sent the correct URL in your email.
The page validates using the validators listed above
Extra Credit:
- Change the layout so that it is percentage based with 5% to 10% of the window width on each side for the background image to show through, and the remainder of the window divided up with about 75% for the main content area and 25% for the navigation areas (including their paddings).
Reading Assignment:
- Read Chapters 14 and 15 of HTML5 & CSS3 (for next week's class)