3/2/06 Notes

To Notes

Summary for HCI 201 -- 3/2/06

Review Questions

On which edge of a web page should the navigation bar be located?
left right top bottom.
Ans: Either the top (easier) or left (requires a table or layers).
What does a FrontPage theme do for you?
Ans: Automatically sets the colors, fonts, bullets, navigation buttons, etc. for a website.
How do you add a theme to a website using FrontPage?
Ans: Select Insert Theme. Then select one of the available themes on the right and apply it to all the pages of the website.

Creating Web Pages with Frames

Disclaimer: Some web designers think that frames are a bad idea.
Recommendation: Do not use frames for your business website.
By creating a frame document, the browser's display area can be divided into frames.
Each frame can display a different document.
Advantages of frames:
1. Pages can be displayed in one frame and links in another frame so that the links are always visible and need not be repeated on each page of the website.
2. Frames are easier for the website designer.
3. Frames are useful as "metapages" that comment on other pages.
Disadvantages of frames:
1. Individual frames are hard to bookmark.
2. A search engine that finds a page cannot connect the page to the frames page that contains it.
3. You cannot print a single frame with File >> Print. To print the single frame, right click on the frame and select Print.
4. Frames pages are hard to fix if something goes wrong.
5. Older browsers do not support frames.

To create a frames page in Front Page:

Create a new FrontPage Web named TestFrames.

Add new pages to the web according to this table:

File Name Text

banner.htm Mike's Website

welcome.htm This is the Welcome Page

history.htm This is the History Page

contact-us.htm This is the Contact Us Page

pictures.htm This is the Pictures Page

Select File, New, Page or Web.
Select Page Templates.
Choose the Frames Page Tab. Make sure Banner and Contents is selected, then click OK.
Save new_page_1.htm as index.htm.
Click the Set Initial Page... button for the top frame. Set it to banner.htm.
Click the Set Initial Page... button for the right frame. Set it to welcome.htm.
Click the New Page button for the left frame. Enter five links with these texts:
Welcome, History, Pictures, Contact Us, DePaul U.
Set the Hyperlink properties to the corresponding file for the first four links.
Set the address of the DePaul U link to the address http://www.depaul.edu (absolute link).
Set the Target Frame of the DePaul U link to New Window.
Set the title of each page.
Make sure all files are saved. Save the left frame as links.htm.
Test the behavior of the site using Internet Explorer or Netscape.

Look at the source code of each file, especially the frames page.
A frameset is the collection of frames that make up a browser's window.
A frameset can only consist of frame and frameset tags.

File Name	Text
banner.htm	Mike's Website
welcome.htm	This is the Welcome Page
history.htm	This is the History Page
contact-us.htm	This is the Contact Us Page
pictures.htm	This is the Pictures Page

Practice Problems on Framesets for Quiz 5

Show what the frames page looks like for each of these framesets:

<frameset rows="33%,*">
    <frame name="banner" src="a.htm">
    <frameset cols="25%,*">
        <frame name="contents" src="b.htm">
        <frame name="main" src="c.htm">
    </frameset>
</frameset>

Ans: Screen Dump for Example 1

<frameset rows="33%,*">
    <frameset cols="25%,40%,*">
        <frame name="one" src="a.htm">
        <frame name="two" src="b.htm">
        <frame name="three" src="c.htm">
    </frameset>
    <frameset cols="35%,*">
	<frame name="four" src="d.htm">
	<frame name="five" src="e.htm">
    </frameset>
</frameset>

Ans: Screen Dump for Example 2

<frameset rows="15%,*,15%">
    <frame name="top" src="a.htm">
    <frameset cols="25%,*">
        <frame name="contents" src="b.htm">
	<frame name="main" src="c.htm">
    </frameset>
    <frameset cols="75%,*">
        <frame name="bottom-left" src="d.htm">
        <frame name="bottom-right" src="e.htm">
    </frameset>
</frameset>

Ans: Screen Dump for Example 3

Setting Scrollbar Colors

Use the following six CSS properties to set scrollbar colors in Internet Explorer:
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-track-color
scrollbar-shadow-color
Here is a diagram that illustrates the meanings of these properties:
Here is an example webpage that uses the values in the diagram. It also sets the scrollbar-track property to blue.
Warning: the preceding properties are not part of the CSS standard and are guarenteed to work with IE only.

Inline Frames

An inline frame an area with text and possibly a scrollbars that is added directly to a web page.
An inline frame is often used for technical or legal descriptions such as a licensing agreement.
To add an inline frame to an HTML page using front page:
1. Create a separate page containing the text to be displayed in the inline frame. You can use part of this fake text.
2. To insert the inline frame on the page, select the main menu entry Insert >> Inline Frame. Choose Set Initial Frame to select the page created in 4, or choose New Page for a blank page to be edited.
3. To change the properties of the inline frame, move the cursor arrow to the edge of the inline frame, right click, and select Inline Frame Properties.