cis 451: html frames adapted from materials developed by dr. soe (updated january, 2009)

CIS 451: HTML Frames

Adapted from materials developed by Dr. Soe(updated January, 2009)

Frames

Frames put HTML files into a table format Frames use 2 types of documents:

Content Documents text, pictures, hyperlinks, photos, etc.

Frames Document Defines layout in columns or rows

or columns within rows or rows within columns

Provides scroll bars Link in one frame can load HTML doc in

another frame

<Frameset> Tag Required for Frames-style pages

Replaces <BODY> tag completely <FRAMESET> tag has 3 types of

attributes--numerical values: size in pixels,% and/or *: ROWS COLS

<FRAMESET ROWS="500,*" or COLS="25%, 75%">

3 Column Frame

<HTML><HEAD><TITLE>3 column frames</TITLE></HEAD> <!- note: Don't use BODY tag -><FRAMESET COLS = "50, 25%, 25%"> <FRAME SRC = "doc1a.htm" name="left"> <FRAME SRC = "doc2.htm" name="middle"> <FRAME SRC = "doc3.htm" name="right"></FRAMESET></HTML>

2 Row Frame<HTML><HEAD><TITLE>2 Rows</TITLE></HEAD>

<FRAMESET ROWS = "50%, 50%"> <FRAME SRC = "doc1a.htm" name="top"> <FRAME SRC = "doc1b.htm" name="lower"></FRAMESET></HTML>

<HTML><HEAD><TITLE>Nested </TITLE></HEAD><FRAMESET COLS = "40, 60%, 100%"><!- total !=100 -> <FRAMESET rows = "*, *" BORDER=1

MARGINWIDTH = 10> <FRAME SRC = "doc1a.htm"> <FRAME SRC = "doc1b.htm"> </FRAMESET> <FRAME SRC = "doc2.htm"> <FRAME SRC = "doc3.htm" SCROLLING=YES></FRAMESET></HTML>

Nested Frames

Frame Interaction

Hyperlink in 1 frame changes contents of another named (target) frame (sample) Assign meaningful names to frames

(NAME = "menu", "right", or etc.) Click <A HREF = "dbreport.html"

TARGET = "right">Database Reports</A> to see the linked page in the right frame

TARGET Attribute

Tells browser frame into which requested document is displayed Name of target frame (e.g., "menu")

OR Special ("magic") targets: "_top" Whole window "_blank" New (unnamed) window "_self" Frame containing hyperlink

(if no target, defaults to _self)

Lots of People Hate Frames

I Hate Frames Page Why Frames Suck (Most of the Time)

(Jacob Nielsen is a "big name" in the usability field)

another I Hate Frames Page

Frames Exercise click hotlink in IE , then View Source

save file on Desktop or floppy click in left frame , then View

Source save file on Desktop or floppy

change links to Internet web pages use full address so href="http://

[etc.]"

Frames Exercises - 2 try to verify the problems

identified in Why Frames Suck (Most of the Time)

try to create a web page with at least 10 separate frames link external web sites as <FRAME

SRC = for the individual frames

Frames Exercises - 3 try to validate a frames web page

at W3C validater use the Validate by Input version and

fix code in the textarea control