CS 120, Fall 2011, Lab 3

CS 120, Fall 2011, Lab 3:
A Multi-page Web Site

In previous labs, you have only worked on individual web pages. But real web sites generally have many web pages. Those pages will often use similar styles, and there will be a separate CSS file to define that style. There also has to be a way to navigate the site. That is, there will be links from one page to another. Often there will be a menu of links on each page that contains links to all the other pages.

For this lab, you will convert an overly long web page into a multipage web site. You will also practice your CSS skills by adding style to the web site. The file that you will use is one that I showed in class last week. The page is a list of student prizes that have been awarded by the Department of Mathematics and Computer Science.

To begin, start up Aptana Studio. Create a new Web Project named lab3. Copy the file named prizes.html into your lab3 project. To do this: Go to the "Places" menu in the bar at the very top of the screen. Select the "Home Folder" entry from that menu. This will open a file browser window. Click on "File System" on the left edge of the window. Double-click the "classes" folder, then double-click the "cs120" folder. You will find prizes.html. Copy it into the lab3 folder in your Aptana window.

Divide the File

The file prizes.html contains many <div>'s. In the web site version, each of the <div>'s from prizes.html will go into its own file. You will have to create all those files and copy one section of prizes.html into each file.

All of the files that you want to create will have a similar outline. I suggest that you start by creating a new file named template.html that contains the following (which you can copy-and-paste from this web page):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="common.css">
<title></title>
</head>
<body>>

</body>
</html>

You can then copy-and-paste this file as a starting point for each of the files that you want to make. To make a copy of a file in Aptana, right-click the file name in the Aptana "Project Explorer," and select "Copy". Then right-click again and select "Paste". The default name for the file would be "Copy of template.html", but you can type in a different name. Each file should have its own appropriate name, such as the name of the prize that it describes. The main page should be called index.html, which is a common name for the main page of a web site. The main index.html page should contain introductory material and links to all the other pages.

So, go ahead and divvy up the file. Make copies of template.html and copy a section of prizes.html into each copy. (When you are done, you could delete prizes.html and template.html.) You should keep the <div> tags from prizes.html when you copy the sections, since they can be useful for styling your pages.

Some notes about the template:

A DOCTYPE is a good idea at the beginning of every HTML document, although it is not required. You don't have to memorize it. You can copy it from an existing file, or you can just let Content-assist fill one in for you if you just start typing <!. I suggest using the doctype for HTML 4.01 Transitional, but an XHTML doctype, as used in the textbook, is also a possibility. (Using XHTML instead of HTML obligates you to be more careful about certain things.)
The <meta http-equiv="Content-Type" ... line should solve some of the problems that people reported with funny characters. Again, you can always copy this from an existing file. A charset is the way that characters are encoded as numbers (which are all that the computer really understands). UTF-8 is the name of one particular charset. Including this line will make sure that the web browser uses the same charset that is used in Aptana. (If you use a different editor, you might be using a different charset.)
The line <link rel="stylesheet" ... refers to an external CSS stylesheet that you will have to write. This style sheet will define the common style of all your web pages. See the next section of the lab.

Add Style

All the pages in your web site will use a common style sheet. The style sheet will be a file named common.css in your lab3 project.

Create a new file named common.css in the lab3 project. In this file, you should write CSS rules to determine the general style of your web site. The major part of your grade for this lab will depend on the number of different CSS features that you use, how you apply them, and how attractive the result it. The HTML code from prizes.html uses id, class, span, and div to identify various aspects of the site. You should use them in your CSS file. You might want to use color, border, padding, margin, width, font, background-image... I hope that you will find at least a few things to do that we haven't covered in class. (List styling is one good opportunity for that.)

Note that I will look for files named index.html and common.css in your lab3 project. I expect to be able to open index.html in a web browser and find links from there to all the other pages.

Add Links

To navigate your site, you should add some links to index.html. You will need a link to each of the other pages. Although it is not absolutely required, you might want to design a set of links that you can copy-and-paste into each HTML file, so that it's possible to get from any page in the site to any other page.