Campus Specs Sheet - Templates Lesson

Now that I have a second level page that contains nested tables and CSS code, I need to make more.

Many beginners think they need to create ImageReady mock ups for EVERY page at this site. Fortunately this is not necessary, instead you need to create a "spec, sheet" that describes the template and then calls out the changes which need to be made on each second level page.

To begin I would describe the template.

An HTML file called "admissions.html" will be used as the template. This file is comprised of 5 tables.

1. the outer table which contains 2 rows and 3 columns
2. the inner table which holds the logo, photos, and main navigation, referred to as the "top table"
3. an inner table which holds the sub-navigation for each second level page referred to as the "left table"
4. the inner table which holds the main page content, referred to as the "content table"
5. an inner table which holds the colored box of text, url, and lower navigation, referred to as the "right table"
6. the table with only one row and one cell, which displays the colored background and white italic text, referred to as the "colored table".

All copies of this file are saved in the root folder "campus-final".

The images you need to make each additional second level page are stored in an "images" folder within the "campus-final" folder.

To create the "services.html" make the following changes:

1. replace the "admission-title.gif" image with the graphic "services-title.gif".

2. in the main navigation bar, replace the "services.gif" with "services-bl.gif", remove the linking and rollover code for the services image.

3. in the main navigation bar replace the "admission-bl.gif" with the image "admission.gif". Next add the rollover and linking code for the admission button.

4. create a new left navigation table which will replace the one which currently displays in the admission page. Use the following images in the order listed.
   admissions-sub.gif
   admissions-sub-over.gif
   career.gif
   career-over.gif
   counseling.gif
   counseling-over.gif
   financial.gif
   financial-over.gif
   health.gif
   health-over.gif
   scholarship.gif
   scholarship-over.gif
   activities.gif
   activities-over.gif
   employment.gif
   employment-over.gif
   transfer.gif
   transfer-over.gif
   
   
5. substitute the students services text for the text in the content table

6. substitute the "services news" text for the text displayed in the colored box which is located in the right inner table.

   I would continue with this format for EACH second level page.

   I feel it is helpful to include a picture which identifies the 6 areas listed above, which will change on each second level page. I have created a GIF, however you can just print out the page and then draw on it to illustrate.