Scribd
Upload
2 views

HTML-Frames

Html frames

Uploaded by

A Silva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML-Frames

Html frames

Uploaded by

A Silva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

core

programming

HTML Frames

1 © 2001-2003 Marty Hall, Larry Brown http://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 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
3 HTML Frames 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
4 HTML Frames 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>

5 HTML Frames 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>

6 HTML Frames www.corewebprogramming.com


FRAMESET ROWS, Example

<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
7 HTML Frames 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
8 HTML Frames www.corewebprogramming.com
Frame Border, Examples

9 HTML Frames 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
10 HTML Frames 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>
11 </HTML>
HTML Frames www.corewebprogramming.com
Frame Example 1, Result

12 HTML Frames 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>
13 </HTML>
HTML Frames www.corewebprogramming.com
Frame Example 2, Result

14 HTML Frames 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">

15 HTML Frames www.corewebprogramming.com


Targeting Example

16 HTML Frames 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>

17 HTML Frames 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>
18 HTML Frames www.corewebprogramming.com
Targeting Example, Results

19 HTML Frames 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
20 HTML Frames 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
21 HTML Frames www.corewebprogramming.com
core

programming

Questions?

22 © 2001-2003 Marty Hall, Larry Brown http://www.corewebprogramming.com

You might also like