IT350 - Web and Internet Programming

Lab 09 – More style

Introduction

This week we have learned about the pros and cons, and mechanics of frames. We also reviewed  Java Script cookies.  In this lab you will return to your site and add both of these features.

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">                                                                               

 

Note that all your pages MUST validate for this lab!!

Lab Requirements

You must create a folder on your Web drive called "Lab09" (without the quotes) and store your work in that directory. 

1.      Copy your old files from some previous lab into your Lab09 directory.  You probably want to use Lab03 from this – the last lab that primarily involved your website theme. You can use a later lab if you want (ex. Lab05), but remember that your pages must validate.

2.      Add frames:

3.      Rename index.html to main.html.

4.      Frameset page: Create a new 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.

5.      Content pages: Create at least 2-3 different content pages to fill your frames.  You can either split main.html into multiple pages and/or use other pages (like form.html, event.html). Make sure “main.html” is one of your content pages.

6.      Navigation page: Create a page to act as a navigation bar (call this nav.html).  Then add links to the navigation page – all of your content pages must be accessible by clicking on links from this navigation bar.  Make sure that the navigation bar will remain visible after you click on a link in it (the new content should appear in a different frame).

7.      Other links: Make sure that every content page, including the navigation page, has a link back to your index.html page (avoid “orphaned pages”).  Make sure you include an appropriate <noframes> tag in index.html with a link to some useful page.

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

9.      Add cookies:

You must design some functionality that uses cookies so that:

10.  Your page stores two distinct pieces of information with a cookie

11.  Each piece of information influences the style or content of your page

12.  Both pieces of information can be changed by the user, and the new information is stored in a cookie

13.  The page does something reasonable when no cookie is stored (the first time the page loads) – be sure to check this at the end!

14.  It’s okay if this only works for one of your frame pages – but make it the main one.

 

Example: you store the user’s name and favorite color.  When the page loads, the page displays their name and changes the background to their favorite color. They can change either by clicking on buttons, causing a pop-up box to prompt them for the new information.

You do NOT have to do the same thing as the above example – but you must follow the listed requirements.

15.  Validation: Validate all of your XHTML files using the W3C validator. 

16.  Links: add a link to Lab09/index.html on your default.htm page

17.  Instructions (IMPORTANT): on your default.htm page, explain to the instructor how to see that your site does what it should.  In particular, give answers to these three questions (and number your answers):

18.  What two pieces of information are stored via a cookie (and how does it affect the display)

19.  How does the user change what is stored?

20.  What does your webpage do if no cookie is present?

 

Your web page 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.

Deliverables

  1. Your main web page should be called "index.html" (without the quotes).
  2. Your pages should contain all of the elements described in the requirements section above.
  3. All of your files should be in a folder called "Lab09" (without the quotes) on the Web drive. Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it350.cs.usna.edu/Lab09/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!
  4. 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 these three pages: a.) index.html, b.)nav.html, and  c.)main.html. This should show that your document 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 are required to validate correctly.
    3. A printout of the source to your index.html file (not the rendered page that you normally see with Internet Explorer).
    4. A printout of the source to your nav.html file.
  5. Make sure you have the required instructions on your default.htm page!! (see above)