Working with HTML Frames The Good, The Bad & The Ugly

Working with HTML Frames

The Good, The Bad & The Ugly

Frames Overview Method of dividing the browser

window into two or more sub-windows

Creating a framed page is like specifying a “blueprint” for a house

No content is specified in the HTML script that creates a framed page

Use frames only when absolutely needed

Frames – A Blessing & A Curse

Can detract from message conveyance

Can be distracting if not used correctly

Can be used to organize information

Can be used for consistency

Frame Basics No <body>…</body>

Container Individual framesets

can only be specified in rows or columns, but never both

Nested framesets are okay to use (allows us to use both rows and columns in the same page)

Frame Syntax - <frameset> Container that acts as a “blueprint”

in which all frames are specified Can be specified only in rows or

columns, but never both Can contain nested framesets Several attributes Syntax:<frameset>…</frameset>

Attribute: border

Specifies the frame border thickness between frames

Takes a value in pixels Syntax:<frameset border=“2”>

Found In: <frameset>Found In: <frameset>

Attribute: bordercolor

Specifies the border color Takes color names or hex values Support for this attribute is limited Syntax:<frameset bordercolor=“blue”>


Attribute: cols

Specifies how the frameset is to be built – using columns

Establishes both number of columns and their sizes

Sizes can be specified in relative or absolute measurements

Syntax:<frameset cols=“85,*,85”>


Attribute: rows

Specifies how the frameset is to be built – using rows

Establishes both number of rows and their sizes

Sizes can be specified in relative or absolute measurements

Syntax:<frameset rows=“30%,*”>


Attribute: frameborder

Specifies whether or not a 3-D separator will be added between frames

IE and Navigator differ in frameborder values: IE takes “1” for yes and “0” for no Navigator takes “yes” or “no”

Syntax:<frameset frameborder=“0”

frameborder=“no”>


Frame Syntax - <frame> Independent tag that defines a

single frame Helps define the content of a frame Found nested within <frameset>…</frameset>

Several attributes Syntax:<frame attribute1

attribute2 … >

Attributes: bordercolor & frameborder

Same purpose as the same attributes found in <frameset>…</frameset>

Same syntax:<frame bordercolor=“#FF0000”

frameborder=“1”frameborder=“yes”>

Found In: <frame>Found In: <frame>

Attribute: name

Gives a frame a name Required for referencing that

frame as a target in hypertext references

Syntax:<frame name=“topTitle”>


Attribute: src

Specifies the source of the HTML file initially loaded into a given frame

Required Can take absolute or relative

pathnames Syntax:<frame src=“labs/lab1.html”>


Attribute: src

Specifies the source of the HTML file initially loaded into a given frame

Required Can take absolute or relative

pathnames Syntax:<frame src=“labs/lab1.html”>


Attribute: marginwidth

Specifies the amount of space between the left and right edges of a frame and the frame contents

Specified in pixels Syntax:<frame marginwidth=“10”>


Attribute: marginheight

Specifies the amount of space between the top and bottom edges of a frame and the frame contents

Specified in pixels Syntax:<frame marginheight=“10”>


Attribute: noresize

Specifies that the user will not be able to resize a frame

Needs only to be specified once in an individual frameset

Takes no values Syntax:<frame noresize>


Attribute: scrolling

Specifies whether or not a scrollbar appears in a frame

Three possible values: yes no auto

Syntax:<frame scrolling=“auto”>


Attribute: longdesc

Specifies a link to a document containing a text description of a frame

Used for non-visual browsers Syntax:<frame longdesc=“labs/lab1Desc.html”>


Frame Syntax - <noframes> Container that defines content for

browsers that do no read frames Found after </frameset> tag No attributes Syntax:<noframes>Your browser does not support frames. Upgradeor die a slow, painful death!</noframes>

Nesting Framesets

<frameset rows=“20%,*”>

<frame name=“title”>

<frameset cols=“120,*”>

<frame name=“toc”> <frame name=“main”>

</frameset>

</frameset>

Targeting Frames Target frames using the standard

anchor tag - <a href …> Target is defined in content pages

only, not in <frameset>…</frameset>

Uses the target attribute target attribute identifies the

frame’s name

Targeting Frames Syntax:<a href=“mypage.html”

target=“main”>Open page in main frame!</a>

Targeting Frames Reserved target values:_blank_self_parent_top

Syntax:<a href=“mypage.html”

target=“_blank”>Open page in a new window!</a>

Using the <base> tag Allows you to specify a “default”

target for all links in a document Saves a lot of typing Found in the <head>…</head> Syntax:<head>

<base target=“main”></head>

Questions?

Documents

Working with HTML Frames The Good, The Bad & The Ugly