IT350 - Web and Internet Programming

Lab 04 – IT350 Designers

Introduction

This week you’ve learned how to apply more consistency and functionality to a website using frames or SSI.  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, using both frames and SSI.  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 web site status. 

Recall that different XHTML preludes will be needed for frames.  You will find the following snippets helpful:

<?xml version = "1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">                                                                                   

 

<?xml version = "1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                                                               

 

Lab Requirements

Note that this week you are not using the web pages that you previously created.  Instead, create two folders on your Web drive called "Lab04frames" and “Lab04ssi” (without the quotes) and store your work in those directories.

1.      Copy files: download this zipped version of the IT350 web site.  Unzip these files into your Lab04frames 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.      http://www.mXXXXXX.it350.cs.usna.edu/Lab04frames/index.html

3.      http://www.mXXXXXX.it350.cs.usna.edu/Lab04frames/calendar.html

4.      http://www.mXXXXXX.it350.cs.usna.edu/Lab04frames/design.html

5.      Add frames to “Lab04frames”:

6.      Rename Lab04frames/index.html to Lab04frames/main.html.

7.      Frameset page: Create a new Lab04frames/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. One of these frames will be a navigation bar. 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.

8.      Content pages: Create at least 3 different content pages to fill your frames.  For instance, you might use the calendar as one content page [page 1], then split main.html into multiple pages [pages 2 and 3] (perhaps by moving some of the external resource links to a separate content page).

9.      Navigation page: Create a page to act as a navigation bar.  Then add links to this navigation page – all of your content pages must be accessible by clicking on links from this navigation bar.  The navigation bar must remain visible after you click on a link in it (e.g., the new content should appear in a different frame).

10.  Other links: Make sure there is some link back to your main index.html page from every page (avoid “orphaned pages”).  Make sure your navigation bar has a link back to the default set of pages (“Home”).  Make sure you include an appropriate <noframes> tag in index.html with a link to some useful page.

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

12.  Add SSI to “Lab04ssi”:

13.  In this step, you will not use frames.  Instead, you will make a separate second version of the IT350 website that uses SSI instead.

14.  Copy your all your files from “Lab04frames” to “Lab04ssi.” 

15.  Delete Lab04ssi/index.html (make sure you still have the version in Lab04frames!) Rename Lab04ssi/main.html to Lab04ssi/index.shtml. (note the shtml!)

16.  Modify Lab04ssi/index.shtml to include your navigation bar using SSI.  Modify your navigation page so that is appropriate to be included in another HTML file, and so that it uses CSS or a table to give the navigation links a reasonable layout.

17.  Modify all your other content pages, including calendar.html, to also include the navigation bar.  You’ll need to rename them to end with .shtml

18.  Make sure your SSI site is working properly before you proceed.

19.  Choose frames or SSI.  Now that you’ve done the basics, decide whether you like your frames or SSI site better.  The remainder of the lab will improve whichever one you like better.

20.  Redesign: Now redesign the IT350 web site that you have in your Lab04frames OR Lab04ssi directory. 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:

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

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

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

24.  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.

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

26.  Improved functionality

27.  Improved appearance

28.  A consistent look

29.  Final tips:

30.  You are not required to add additional comments to course web pages beyond what is present already.

31.  Pages that validated before (index.html) must validate in your version.  Pages that did not (calendar.html) do not have to validate.

32.  You must test with more than one browser!

33.  Final links: Add a link from your default.htm page to Lab04frames/index.html and Lab04ssi/index.html.  Clearly indicate which one you chose to re-design/add CSS.

 

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 your peers select you as the winner of some fabulous IT350 prizes and some nominal extra credit.
  2. The owner of one of the sites that we discussed this week (details to be provided in class) just contacted the course coordinator, asking why his web site had been chosen as a negative example.  After some discussion, he has agreed to consider adopting a new web site design that you create.  Now’s your chance to make a mark on the Internet!  Re-design the front page of this site and include a link to it from your default.htm page.  The requirements from the owner are:
    1. No PDFs
    2. The website must be fast.  No movie introductions.
    3. No animated graphics.
    4. No sounds.
  3. The course coordinator received the above-mentioned email one day after we had our discussion about web design.  How did the web site owner realize that his site was being discussed and contact me?  Investigate how this might have happened (without contacting the owner!) and write your answer on the back of your coversheet.

Deliverables

  1. Your pages should contain all of the elements described in the requirements section above.
  2. Your final websites should be in a folder called "Lab04frames" and “Lab04ssi” on the Web drive. Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it350.cs.usna.edu/Lab04frames/index.html and http://www.mXXXXXX.it350.cs.usna.edu/Lab04ssi/index.shtml 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. 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 XHTML validator, as run on the final version of:
      1. Lab04frames/index.html
      2. Lab04frames/nav.html (or whatever you call your navigation page)
      3. Lab04ssi/index.shtml
        These should show that your documents correctly validated, but turn it in anyway if you can’t get your page to validate.  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 CSS file (required only for Lab04frames or Lab04ssi – whichever you chose, not both). This is a different validator, see http://jigsaw.w3.org/css-validator/
    4. A printout of the source to:
      1. Lab04frames/index.html
      2. Lab04frames/nav.html (or whatever you call your navigation page)
      3. Lab04ssi/index.shtml

Addenda:

1. A floating nav bar with SSI may not mesh well with the parts of calendar.html.  Try deleting the “width=95%” that is present in the start of each table in that file.

2. You are not required to make links to things like the Course Policy, Lab Guidance, etc. work (though you can if you want). These are relative links that would work if those files were added to your website, or if your webpage was substituted for the official IT350 web page.

3. IE error: “The XML page cannot be displayed.  Cannot view XML input using style sheet.  Please correct the error and then click the Refresh button, or try again later.”  If you get this error, try using Firefox instead.  If Firefox works fine, then you can blame it on IE bug and proceed.  If you want to try and fix it, try deleting all blank space and comments between your DOCTYPE declaration and the start <html> tag.  I found this sometimes (but not always) corrects the problem.  The problem seems to usually occur when accessing things from the file interface, not when using the web server.