IT350 - Web and Internet Programming

Lab 04 – IT350 Designers

Introduction

You have now learned significant amounts of XHTML, including new information about frames. This week, we have also read about and discussed web site style (in the broad sense) and design.

For this week’s lab, you will redesign the IT350 web site to make it more attractive and functional, in particular to add frames. When complete, we will have a competition where you judge the results. Winners from each section will receive fabulous prizes, and the grand prize winner (as chosen by the instructors) will have his or her site promoted to official IT350 status.

Lab Requirements

You must create a folder on your Web drive called "Lab04" (without the quotes) and store your work in that directory. Note that this week you are not using the web pages that you previously created.

1. Copy files: download this zipped version of the IT350 web site. Unzip these files into your Lab04 directory. This is not a complete dump of all the IT350 files, so some of your links will be broken. However, verify that you can correctly access the following pages:

a.) http://www.mXXXXXX.it.cs.usna.edu/Lab04/index.html

b.) http://www.mXXXXXX.it.cs.usna.edu/Lab04/calendar.html

c.) http://www.mXXXXXX.it.cs.usna.edu/Lab04/design.html

2. Add frames:

a.) Rename Lab04/index.html to Lab04/main.html.

b.) Frameset page: Create a new Lab04/index.html file. This will be the new main page, which must contain a <frameset> tag, and must split the resultant screen into at least two frames. Recall that you will need to use a different DTD/prelude in this document in order for your document to validate with a <frameset> tag.

c.) Content page: Create at least 3 different content pages to fill your frames. Likely you will want to create a new “navigation” page to fill one frame. You may also wish to split main.html into multiple content pages. For instance, you may want to move some of the external resource links to a separate content page.

d.) Add links: All of your content pages must be accessible be clicking on some link that is initially visible after loading http://www.mXXXXXX.it.cs.usna.edu/Lab04/index.html. In addition, at least one hyperlink must cause the new document that is loaded to appear in a different frame than the one that the hyperlink was in (recall that, to validate, this will require yet another different DTD/prelude). You could meet all these requirements with a navigation bar that links to all your content pages, but you can explore other techniques if you like.

e.) Completion: Make sure your frames work properly before you go on to the next step.

3. Transcend frames? As we learned, frames are useful but have some problems. Consequently, you may not really want them in your final, improved web site. Choose one of the following options as suits your taste:

a.) Ditch frames: Rename your “Lab04” directory to “Lab04frames”. Make a new Lab04 directory and unzip the IT350 source files again into this directory. Use these files in the next step. (If you wish, it’s fine to copy parts of your Lab04frames directory back to Lab04 if you find that helpful.

b.) Keep frames: Use the files you already created in the next step.

4. Redesign: Now redesign the IT350 web site that you have in your Lab04 directory (with or without frames). Try to make it both more attractive and more functional. You have free rein to change the site in any way, including adding or combining pages, module a few restrictions:

a.) Essentially all the content from the old IT350 web site must be present in the new web site.

b.) You may add new content if you like, or different views of old content (e.g. to show due dates in a different way).

c.) You must make use of CSS and an external stylesheet to apply some styling.

d.) The final product must be suitable enough in taste and functionality that it could be used as the official IT350 web site.

Note that the calendar already uses a stylesheet named “style.css” (not the “styles.css” we used before). You can modify this stylesheet if you like or create a new one. You may also change the layout/HTML details of the calendar page, but it should still make use of some stylesheet.

5. Goals: When complete, the IT350 website should exhibit:

a.) Improved functionality

b.) Improved appearance

c.) A consistent look

Your web pages must be constructed using Notepad or a similar text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.

NOTE: some of the pages from the IT350 site (the course policy, the labs, lab guidance) were constructed with Microsoft Word. You can modify/re-create these pages if you like (still using a text editor), but it is definitely not required. These files are not included in the ZIP file but you can download them from the web if you like.

Extra Credit

For a nominal amount of extra credit do some/all of the following:

1. Design such an outstanding site that you peers select you as the winner of some fabulous IT350 prizes and some nominal extra credit.
2. Modify your frames implementation so that it appears to function like normal frames, but the URL displayed at the top changes with each click, so that you can cut and paste the URL to get the same configuration back. You may want to research this on the web (look for solutions to dealing with frames problems).
3. A key advantage of frames is that you can essentially re-use the same code across multiple pages without duplicating it. With an Apache-based web server, you can use “server side includes” to accomplish the same thing. See if you can discover a way to do this given our web server, which is Microsoft IIS. (only for the brave of heart: this may not be possible)

Deliverables

1. Your pages should contain all of the elements described in the requirements section above.
2. Your final website should be in a folder called "Lab04" on the Web drive. Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it.cs.usna.edu/Lab04/index.html where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!
3. If your final website in Lab04 does not have frames as described above, then your frame-based IT350 site should be viewable at http://www.mXXXXXX.it.cs.usna.edu/Lab04frames/index.html
4. Regardless of whether your frames-based site is in Lab04 or Lab04frames, that site must satisfy all the requirements of step 2 under “Lab Requirements” above.
5. Your default.htm page must have links to Lab04/index.html (and Lab04frames/index.html, if appropriate).
6. Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
1. A completed assignment coversheet. Your comments will help us improve the course.
2. The first page of the output of the W3C HTML validator, as run on the final version of your Lab04/index.html. This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. If the W3C validator is not working when you need it, you may substitute results from http://www.validome.org/ instead. Note: even though you are turning in validation results for only some of your pages, all pages (including CSS) are required to validate correctly.
3. First page of the output of the CSS validator, as run on your final Lab04/style.css file (or whatever you call your main stylesheet). This is a different validator, see http://jigsaw.w3.org/css-validator/
4. A printout of the source to your Lab04/index.html file OR your Lab04frames/index.html page – whichever one uses frames.
5. A printout of the source to some page that makes use of a hyperlink that causes the content of a different frame to appear, as described in Step 2 of the Lab Requirements above.

.