IT350 - Web and
This week we have learned about the pros and cons, and mechanics of frames, as well as 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:
version = "1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
version = "1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Note that all your pages MUST validate for this lab!!
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 to start, but remember that your pages must validate.
2. Add frames:
1. Rename index.html to main.html.
2. 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.
3. Content pages: Create at least 2-3 different content pages to fill your frames. These can be based on splitting main.html into multiple pages and/or using other pages (like form.html, event.html). Make sure “main.html” is one of them.
4. Navigation page: Create a page to act as a navigation bar (call this nav.html). 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).
5. 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.
6. Completion: Make sure your frames work properly before you go on to the next step.
3. Add cookies:
1. Your page stores two distinct pieces of information with a cookie
2. Each piece of information influences the style or content of your page
3. Both pieces of information can be changed by the user, and the new information is stored in a cookie
4. The page does something reasonable when no cookie is stored (the first time the page loads) – be sure to check this at the end!
5. It’s okay if this only works for one of your frame pages – but make it the main one.
2. 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.
3. You do NOT have to do the same thing as the above example – but you must follow the listed requirements.
4. Validation: Validate all of your XHTML files using the appropriate W3C validator.
5. Links: add a link to Lab09/index.html on your default.htm page
6. 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):
1. What two pieces of information are stored via a cookie (and how does it affect the display)
2. How does the user change what is stored?
3. 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.