Assignment 2
Due Mon., September 27, 2010
Summary
In Assignment 1, we took a mocked-up version of our project management interface and made it XHTML strict. In doing so, we took out all of the presentation-specific and deprecated HTML and the result looks like a mess. Also, this first version used tables to layout the different parts of the interface. In this assignment, we will start with a new version of the mock up that does not use tables and instead more appropriately uses <div> elements to structure the various components of the page. But, it still looks bad. Your assignment is to use CSS in order to add presentation and layout to the interface and make it look decent again.
What To Do
- Create a folder on your own computer.
- Copy down all of the files needed for assignment 2.
- All of the files you need are in a directory located at the following filepath:
/afs/cs.unc.edu/proj/courses/comp416-f10/public_html/assignments/a2/a2-files
- All of the files you need are in a directory located at the following filepath:
- Edit the file project-v20.css in order to make project-v20.html look good.
- Add various CSS rules in order to make the interface look decent again. Below is a roadmap for doing so, but I strongly encourage you to come up with your own designs. Because you have a local copy of all of the images and other pages that project-v20.html references, you should be able to see the effect of your changes by pointing a browser to your local copy of project-v20.html.
- Once you are happy with the result, create a folder in your class webspace called "a2" and copy all of the files back up to your a2 directory.
Below is a suggested roadmap for doing the assignment. In each step, I describe a visual goal (i.e., what changes in how the page is rendered that I desire) and describe a CSS strategy for achieving it. For each step, I've included a screen shot of what things might look like afterwards. I say might because there is more than one way to do things and each may have a slightly different result. So how you end up doing things might not be exactly how I did them when I worked through the assignment myself. That is just fine so don't get too caught up in trying to make it look just like my screenshots.
If you follow this roadmap to its last step successfully, you will get full credit for the assignment. But I encourage you to go further or, even better, use CSS in order to achieve a completely different design than what I have.
- Step 0: This is what project-v20.html looks like before we start.
-
Step 1: Make all of the images an appropriate size.
I would suggest a size that is about the size of the text (say 12 pixels or so). To do this, determine a CSS selector that picks out all of the image elements and then set that element's size related attributes accordingly. Here is the result. -
Step 2: Get rid of borders around the images.
Notice how all of the action icons have borders around them. This is because these images are being used as links. This border is a bit clunky and you probably want to get rid it. The CSS selector you used in step 1 should already pick out the appropriate image elements. Add to that selector attribute values that make that border go away. Here is the result. - Step 3: Set up top-level layout.
Now it's time to tackle layout. Start from the top of the document and work down. Looking at the overall structure of the document, you will notice that the <body> element of the page has two <div> elements as children. One has its id attribute set to "sidebar" and the other has its id attribute set to "main". That should give you a hint as to how to lay those elements out. I suggest floating the sidebar to the left and letting the "main" <div> flow around it. If you don't want the main div to fill in the space below the sidebar, add some margin space to the left in order to keep the space under the sidebar clear. Here is the result. - Step 4: Make the sidebar pretty.
Spread out the navigation links in the sidebar from the tag links in the sidebar and add a separating border between them. Here is the result. - Step 5: Make the project header pretty.
Make the project name larger, push the project description underneath it a bit and use a larger font, perhaps italicized. Here is the result. - Step 6: Layout the panels.
Layout the notes panel and the events panel side by side with action panel spread out across underneath. Here is the result. - Step 7: Layout the things in the panels.
Make the dates, item text, and action icons line up. Here is the result. - Step 8: Give the list items in the notes panel alternating colors.
Here is the result. - Step 9: Do the same for the other panels with different colors.
Here is the result.
Other things you might want to do include:
- Separate notes and events panels a touch
- Style the fonts for panel headings
- Here is what that might look like.
