CMPT 165 Assignment 3

Part 1: Design

For the first part of the assignment, you will come up with two designs for web pages.

Pick two distinct page layouts for a website. For example, you might choose the splash page and content pages of a website; or pages with text and pages with figures from the same site; or thumbnail gallery pages and individual picture pages from an image gallery.

Whatever your choice, you will be creating designs for two types of pages within a single website. They will likely have similar overall design but different details appropriate to their content.

Use an image editing program to draw a rough sketch of the two page designs. Don't worry too much about the details: you will probably want to just draw blocks for the main parts of the page. In particular, keep in mind the design principles discussed in the course.

You may use any image editing program(s) you want (that will produce appropriate image formats). The GIMP (bitmap) and Inkscape (vector) are both free. The images must give an idea of your overall design, but exactly how you do that is up to you—we will be looking to see that you have some idea how to work with an image editor.

Once you are happy with your designs, save the image in a format appropriate for display on the web.

Create a simple web page that gives an overview of your design. Include the two design images. Discuss why you designed the page the way you did (again, keeping in mind the design principles from the course), and feel free to mention any parts of the design that aren't included in your images (like small details that wouldn't fit in the images). See the incomplete design example for an idea of what we're looking for.

Your design should be complete enough that someone else could start the second part of the assignment using your designs. The final result might not be exactly what you had in mind, but it should be reasonably close.

Part 2: Implementation

For the second part, you will use XHTML and CSS to implement your designs from Part 1.

Create two web pages and stylesheets, using your design from above as a guide. The content of these pages isn't important: you can make up dummy content or use real content.

Your pages might not look exactly like the design from Part 1. This could be because of technical limitations, or because you rethink your designs once you see them in the browser. Don't worry if your original design doesn't match reality exactly—resist the urge to go back and “fix” your design. Add a section to your design page from Part 1 describing problems or changes from this part of the assignment.

As usual, the XHTML should be valid, with the meaning of tags matching their contents. The CSS should contain all “visual” information and be valid as well.

Submitting

Upload all of your files to the course web server: design overview and implementation, with all images and stylesheets.

When you're done, submit the URL of the XHTML pages (both design and the implementation) to CourSys.