Notes for 3/7

Summary for HCI 201 -- 3/7/06

Review Questions

Explain the difference between a normal frame and an inline frame.
Ans: A normal frame is a frames page that takes up the entire browser and displays HTML pages in its frames. An inline frame is placed on an HTML page.
What is a frameset?
Ans: A list of all the frames that will make up the frames page.

Sketch the frames page defined by this frameset:

<frameset cols="50%, *">
    <frameset rows="15%, *">
        <frame name="nw" src="header.htm">
        <frame name="sw" src="body1.htm">
    </frameset>
    <frameset rows="*, 15%">
        <frame name="ne" src="body2.htm">
        <frame name="se" src="footer.htm">
    </frameset>
</frameset>

What is the target of an address tag?
Ans: The target of an address tag specifies where the HTML page with the tag address will be displayed. This is important for a frames page, where a link specifies the target as a different frame on the frames page.
How do you add a control like a textbox, button or drop-down list to a page?
Ans: Select Insert Form >> Select the control to add.

Take Quiz 5

Quiz 5 will take place between 1:30pm and 1:55pm.

Checklists for Website Design

Williams and Tollett Website Design Checklists
These lists are on pages 162 to 164 of the textbook.
Take these lists seriously. Websites that do not conform to these principles will be penalized more heavily than the Hobby Website was.
Use the principles of Alignment, Contrast, Proximity and Repetition.

Implementing a Slide Show

Note: the following is just a practice problem. You should not submit it.
To implement a slide show:
1. Add a name attribute to the img tag:
  <img src="images/dog.jpg" name="animals">
2. Download these images into the images folder:
3. Copy and paste this Javascript script into the head section of your page:
  
  <script type="text/javascript"> var images = ["images/dog.jpg", "images/cat.jpg", "images/frog.jpg", "images/fish.jpg"]; var index; function nextImage( ) { document.images.animals.src = images[index]; index = (index + 1) % 4; window.setTimeout("nextImage( );", 3000); } </script>
  Note: a text area such as the one above is usually used to display HTML or JavaScript code for cut and paste because the code can be literally shown without the usual special characters <, >, & ", and   needed for display.
4. The 3000 argument means wait 3000 milliseconds (3 seconds) before calling nextImage again.
5. To start the slide show, include an onload tag in the body tag for the page:
  <body onload="index=0; nextImage( );">

Changing More than One Webpage with a Single Click

See the Double Load Example.

Using Cut and Paste Javascript

See these websites:
http://www.dynamicdrive.com and http://www.javascriptkit.com
For Exercise Ex11, you will choose an interesting JavaScript script from one of the two preceding websites, get it to work in a FrontPage project and provide directions so that a person reading your Ex11 can implement it for herself.
Here is the Ex11 Description.