Handout6 html frames

WEBPROG1 – HTML Midterm Period
Handout #6

HTML Frames

Frames allow for multiple ".html" documents to be displayed inside
of one browser window at a time. This means that one page has no
content on it, but rather tells the browser which web pages you would
like to open.

Frames - A Generic Frame Page

Frames are most typically used to have a menu in one frame, and
content in another frame. When someone clicks a link on the menu
that web page is then opened on the content page. Here is a classic
example of a basic "index" frameset with a menu on the left and
content on the right.

Code:
<html>
<head>
</head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>

o frameset - The parent tag that defines the characteristics of this
frames page. Individual frames are defined inside it.
o frameset cols="#%, *"- Cols(columns) defines the width that
each frame will have. In the above example we chose the menu
(the 1st column) to be 30% of the total page and used a "*", which
means the content (the 2nd column) will use the remaining width
for itself.
o frame src="" -The location of the web page to load into the frame.
A good rule of thumb is to call the page which contains this frame
information "index.html" because that is typically a site's main
page.

Prepared By: RICHARD F. ORPIANO Page 1 of 4

Handout #6

Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as
follows:

<html>
<head></head>
<frameset rows="20%,*">
<frame src="title.html">
</frameset>
</html>

o frameset rows="#%, *"- rows defines the height that each
frame will have. In the above example we chose the new title (the
1st row) to be 20% of the total page height and used a "*", which
means that menu and content (which are the 2nd row) will use the
remaining height.

FrameBorder and FrameSpacing

You probably noticed those ugly gray lines that appear between
the frames. It is possible to remove these and manipulate the spacing
between frames with frameborder and framespacing. These attributes
appear within the frameset tag.

Note: Framespacing and border are the same attribute, but some
browsers only recognize one or the other, so use both, with the same
value, to be safe.

o frameborder="#" - A zero value shows no "window" border.
o border="#"- Modifies the border width, used by Netscape.
o framespacing="#" -Modifies the border width, used by Internet
Explorer.


Handout #6

Code:
<html>
<head></head>
<frameset border="0" frameborder="0" framespacing="0"
rows="20%,*">
<frame src="title.html">
cols="30%,*">
</frameset>
</html>

Frame Name and Frame Target

How nice would it be to make each menu link load into the content
page? We do this by naming each frame and setting the correct base
target inside menu.html.

Frame Code:
<html>
<head></head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</html>

menu.html Code:
<html>
<head>
<base target="content">
</head>
...
</html>

We first named the content frame "content" on our frame page
and then we set the base target inside menu.html to point to that
frame. Our frame page is now a perfectly functional menu & content
layout!


Handout #6

Noresize and Scrolling

It's possible to further customize the <frame> tag using the
noresize and scrolling="" attributes.

Code:
<html>
<head></head>
rows="20%,*">
<frame src="title.html" noresize scrolling="no">
cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</html>

o noresize - Do not let the frames be resized by the visitor.
o scrolling="(yes/no)"- Allow scrolling or not inside a frame.

We set the scrolling for our content frame to yes to ensure our
visitors will be able to scroll if the content goes off the screen. We also
set the scrolling for our title banner to no, because it does not make
sense to have a scrollbar appear in the title frame.


Handout6 html frames

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie Handout6 html frames

Ähnlich wie Handout6 html frames (20)

Mehr von Nadine Guevarra

Mehr von Nadine Guevarra (18)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Handout6 html frames