IT350 - Web and
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.
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:
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.
For a nominal amount of extra credit do some/all of the following: