Transcript HTML Frames
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
Frames Document
text, pictures, hyperlinks, photos, etc.
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>
Nested Frames
<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>
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
click in left frame , then View Source
save file on Desktop or floppy
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