Download HTML Frames

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Transcript
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