1) The images The key to this exercise was to scale or crop the images... a) because they were simply too big; and b) because they were of different widths - by giving them the same width you make it easier to get a nice column of images. When scaling the images, - It was unsatisfactory if you asked the browser to do it (e.g. by setting their width in either the HTML or the CSS). - It was important to do it instead using PaintShopPro/Gimp/etc. - It was important to preserve their aspect ratio, otherwise you distorted the images (e.g. people appear stretched or squashed). 2) The HTML - It was essential to do what the lab sheet asked you to do, especially nav in head, and main before images. (If you put the images before the main, then you were solving a completely different exercise - you received a heavy penalty.) - Here's a sketch of one simple solution: ...

...

- Several of you left out the #wrapper and failed to center the web page. 3) The CSS - The essential elements were the following: a) Center the wrapper #wrapper { width: 760px; margin-left: auto; margin-right: auto; } b) Carry out the "four steps" (float the thing that comes first; give it a width; clear the footer; put a margin on the thing that you didn't float): #main { float: right; width: 500px; } footer { clear: both; } aside { margin-right: 500px; } - Some of you omitted step four - I made the point in the lecture that this margin is needed to make your design more robust. So you lost marks for omitting it. Similarly, some of you threw in extra things (e.g you set the width of the

and some of you even floated it) - why? - All widths, margins, etc. needed to be in pixels - since this was a fixed-width layout. - Rule of thumb: never set the height of anything in a web page - unless you're an absolute expert (and even then think twice before doing it). - Of course, for higher marks you needed to do more. For example, you needed to float the logo image; you needed to do some nice colours; perhaps some padding, borders and margins; and so on. - Some common errors: a) In the lecture, I advised you to set the width of the #wrapper to something sensible (e.g. 760px - 960px). Anything larger might look fine in WGB G20 but is too big for people with smaller screens. This was a depressingly common mistake, and it was penalised. b) You needed to ensure that it all "added up". In other words, whatever width you used on the images plus the width of the #main plus any extra padding/border/margins should equal the width of the #wrapper. c) Some of you used massive background images that took ages to load. Or some of you used smaller background images and allowed them to tile - if you do this, make sure that you use images that tile together nicely. In some cases, the background images were too bright - the text on top of them could barely be read. 4) Validation I validated your HTML and your CSS. Did you? 5) Other things I was also influenced by other things, e.g. - Did you indent the HTML and CSS in a nice way? - If you used

and/or

, did you use them correctly? (In my opinion, chunks of stuff about the Carolina, the Collegiate and the St. Louis are

s, not

s.) If you used

, , , etc etc etc, did you use them correctly? Did you include good alt-texts? Did you include the end tag? (I gave you lots of feedback for lab1, so I expected to see an improvement - otherwise, you're not learning.) - Did you suffer from class-itis or id-itis? - Were you ambitious, or did you play it lazy-and-safe? - And, finally, did the finished web page look nice? Be advised that just because you think yours looked great doesn't mean that it scored highly. The lab sheet itself indicated that technical quality was the most important criterion.