HTML Frames 2
HTML Frames 2
1
2001-2003 Marty Hall, Larry Brown http://www.corewebprogramming.com
Web
core
programming
HTML Frames
HTML Frames 2
www.corewebprogramming.com
Agenda
Advantages and disadvantages of frames
FRAME template
Defining rows and cols in a FRAMESET
Common FRAME and FRAMESET attributes
Nested frames
Targeting a document to a named
FRAME cell
2
HTML Frames 3
www.corewebprogramming.com
Frame Advantages
Certain parts of the interface (e.g., a TOC)
are always on the screen
Can avoid retyping common sections of
multiple Web pages
Consistent use across a large site
sometimes simplifies user navigation
A convenient way to mix text-oriented HTML
with Java applets
Image maps are more convenient if the map
image remains on screen and only the
results section changes
HTML Frames 4
www.corewebprogramming.com
Frame Disadvantages
The meaning of the Back and Forward
buttons can be confusing
Poorly designed frames can get the user
lost
Hard to find real URL of a page you want
Printing problems!
Hard to bookmark "configuration"
Some very old browsers do not support
frames
Security
Hackers can insert frame cells into your pages in some
circumstances, perhaps stealing information intended for
your site
3
HTML Frames 5
www.corewebprogramming.com
Frame Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Document Title</TITLE></HEAD>
<FRAMESET ...>
<!-- FRAME and Nested FRAMESET Entries -->
<NOFRAMES>
<BODY>
<!-- Stuff for non-Frames browsers -->
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
HTML Frames 6
www.corewebprogramming.com
FRAMESET Attributes
COLS, ROWS
A comma-separated list of pixel values, percentages, and
weighted remainders
FRAMESET entries should always specify at least two
rows or columns. Netscape problems if not!
Examples
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
<FRAMESET COLS="25%,*,*">
...
</FRAMESET>
4
HTML Frames 7
www.corewebprogramming.com
FRAMESET ROWS, Example
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
HTML Frames 8
www.corewebprogramming.com
FRAMESET Attributes
(Continued)
FRAMEBORDER
Indicates whether borders will be drawn between frame
cells
YES or 1 specifies borders; NO or 0 specifies no border
Can be overridden by FRAMEBORDER settings in
individual FRAME entries
Often used in conjunction with BORDER=0 and
FRAMESPACING=0
BORDER (Netscape), FRAMESPACING (IE)
Specify the thickness of the border between cells
Apply to outermost FRAMESET only
BORDERCOLOR
Sets the color of the border between cell, using either a
hex RGB value or color name
5
HTML Frames 9
www.corewebprogramming.com
Frame Border, Examples
HTML Frames 10
www.corewebprogramming.com
FRAME: Specifying Content of
Frame Cells
SRC
URL of the document to place in the frame cell
NAME
Supplies destination for TARGET attribute of hypertext
links
FRAMEBORDER, BORDERCOLOR
MARGINWIDTH, MARGINHEIGHT
Specifies the left/right and top/bottom cell margins,
respectively
SCROLLING
Indicates whether cells should have scrollbars
NORESIZE
Disables the ability to resize the frame cells
6
HTML Frames 11
www.corewebprogramming.com
Frame Example 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 1</TITLE></HEAD>
<FRAMESET ROWS="55%,45%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">non-frames version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
HTML Frames 12
www.corewebprogramming.com
Frame Example 1, Result
7
HTML Frames 13
www.corewebprogramming.com
Frame Example 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 2</TITLE></HEAD>
<FRAMESET COLS="55%,45%">
<FRAMESET ROWS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<FRAMESET ROWS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<NOFRAMES>
<BODY>
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">nonframes version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
HTML Frames 14
www.corewebprogramming.com
Frame Example 2, Result
8
HTML Frames 15
www.corewebprogramming.com
Targeting Frame Cells
Specify the cell in which to place a page
referenced by a hyperlink
The NAME Attribute of FRAME
<FRAME SRC="..." NAME="cellName">
The TARGET Attribute of A HREF
<A HREF="..." TARGET="cellName">
HTML Frames 16
www.corewebprogramming.com
Targeting Example
9
HTML Frames 17
www.corewebprogramming.com
Cold-Fusion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Investing in Cold Fusion</TITLE>
</HEAD>
<FRAMESET ROWS="75,*">
<FRAME SRC="TOC.html" NAME="TOC">
<FRAME SRC="Introduction.html" NAME="Main">
<NOFRAMES>
<BODY>
This page requires Frames. For a non-Frames version,
<A HREF="Introduction.html">the introduction</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
HTML Frames 18
www.corewebprogramming.com
TOC.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%">
<TR><TH><A HREF="Introduction.html" TARGET="Main">
Introduction</A></TH>
<TH><A HREF="Potential.html" TARGET="Main">
Potential</A></TH>
<TH><A HREF="Investing.html" TARGET="Main">
Investing</A></TH>
<TH><A HREF="References.html" TARGET="Main">
References</A></TH></TR>
</TABLE>
</BODY>
</HTML>
10
HTML Frames 19
www.corewebprogramming.com
Targeting Example, Results
HTML Frames 20
www.corewebprogramming.com
Predefined Frame Names
_blank
Load document into a new browser window
_top
Causes the linked document to take up the whole browser
window
Document will not be contained in a frame cell
_parent
Places document in the immediate FRAMESET parent
Same as _top if no nested frames
_self
Place document in current cell
Only necessary to override a BASE entry
11
HTML Frames 21
www.corewebprogramming.com
Summary
Frames require a Frameset DOCTYPE for
validation
A FRAMESET can be divided either into
columns or rows
To create both rows and columns use nested
FRAMESETs
By giving a FRAME a name, documents can
be targeted to the named frame cell
<FRAME NAME="">
<A HREF="" TARGET="">
There are four predefined frame names
_blank, _top, _parent, and _self
22
2001-2003 Marty Hall, Larry Brown http://www.corewebprogramming.com
Web
core
programming
Questions?