MCS-270 Lab 2: Using CSS (Spring 2008)

Partner lab, start in lab on Friday, Feb 22; finish by Friday, Feb 29

Introduction

The purpose of this lab is for you to learn how to use CSS to give a consistent look and feel to a collection of web pages, in such a way that these pages are easy and intuitive to use, and are also attractive. You should work together in groups of two or three (preferably three), starting in lab on Friday, Feb 22. As I said in class, try to choose these groups so that each group has some HTML/CSS experience, if possible.

Resources

Tasks

  1. In order to put the base CSS/HTML files that Joe wrote into a your web directory, open a terminal on one of the departmental Linux machines and issue the following command: 
        (umask 022; cp -r ~karl/public/270/mcs270-lab2 ~/www-docs)
    Be sure to issue this entire command, including the parentheses and semi-colon. This will copy a directory containing these base files into your www-docs directory. After doing so, you should be able open this file using Firefox. The address will be: 
        http://www.gac.edu/~your_username/mcs270-lab2/base.html
    (Of course, replace your_username with your actual username.) Do this. If you are not able to open this file with Firefox, then there is probably wrong with the file permissions. San said that you could come ask him for help if you have problems here; he is in his office (Olin 304).
  2. After opening this file with Firefox, open the actual file with a text editor (e.g., Emacs). You can also open the CSS files, which are in the css subdirectory of mcs270-lab2. Do so, and play around with these files (html and css), seeing what happens. I want you to at least get to this point before class on Monday. Also, be sure to read the material Joe put together for you in Joe Lencioni's links on CSS.
  3. Your basic task is to use CSS to come up with a better look and feel for the Music Department Scheduling System website that I mentioned in class on Thursday. Take a look at this site; you can follow the Manage Rooms, Manage Users, and View Schedules links there. You can work with the Joe's CSS files and redo the homepages given there so they look nicer and are easier to use. I recommend that you start by redesigning the manageUsers.html file. BTW, I strongly recommend that you not use the Music Department files themselves as starting points. Instead, design them from scratch.
  4. We will discuss the lab in class on Monday, February 25, deciding together what improvements should be made. I will also make clearer for you what I want you to hand in on Friday, February 29.