Using Frames in A Web Site: HTML Project 06

HTML Project 06
USING FRAMES IN A WEB SITE

FRAMES
 A frame is a rectangular area of a Web page—a
window—in which a Web page can be displayed.
Frames allow a user to display several Web pages
at one time in a single browser window. Each
frame displays a different, individual Web page,
each of which is capable of interacting with other
Web pages.
PROJECT 06 VOCAB
 Is used to define each frame in a frame definition file
frame tag  The src attribute of the <frame> tag is used to identify the Web page that will display
in this frame
 Defines the layout of the frames in a Web site and specifies the Web page contents of each frame
frame definition
file
 Used to define the layout of the frames that are displayed
frameset
 An attribute of the <frame> tag, this attribute defines the border that separates frames
frame border  If the border is turned off, the browser automatically inserts five pixels of space to separate the
frames which can be increased or decreased
 An attribute of the <frame> tag, it can be used to change the border to any other color
bordercolor
 An attribute of the <frame> tag that lets you change the margin on the left and/or right of a frame
marginwidth
 An attribute of the <frame> tag that lets you change the margin above and below a document
marginheight within a frame
 An attribute of the <frame> tag that lets you tell the browser not to display scroll bars and turns
scrolling off scrolling in a frame
 Scroll bars automatically display when the page is longer or wider than the screen
 An attribute of the <frame> tag that locks the borders of a frame to prohibit resizing
noresize  By default, Web page visitors can resize any frame on the screen by dragging it
FRAME TAGS
Frame Tags
<frameset>  Defines the structure of the frames within a window
</frameset>  Required end tag when creating frames
<frame>  Defines a given frame; required for each frame

 No end tag required
<noframes>  Defines alternate content that appears if the

</noframes> browser does not support frames
 Supported by multiple types and versions of
browsers
FRAME TAG ATTRIBUTES
Frame Tag Attributes
<frameset> cols  Indicates the number of columns

rows  Indicates the number of rows
<frame> frameborder  Turns frame borders on or off

bordercolor  Changes the border color
marginwidth  Adjusts the margin on the left and right of a frame
marginheight  Adjusts the margin above and below a document within
noresize a frame
name  Locks the borders of a frame to prohibit resizing
scrolling  Defines the name of a frame that is used as a target
src  Indicates whether a scroll bar is present
 Indicates the Web page or other file to be displayed in
the frame
USING FRAMES
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">

A frame is a rectangular area of a Web page and allow a
user to display several Web pages at one time in a
single browser window.

USING FRAMES
1.Create a frame definition file (specifies how many
frames)

A. In that file, create a frameset tag to define the layout
of the frame—specifies how many rows and columns
<frameset>
1) Use frame tags to define each frame within the
frameset tags <frame> (no end tag is needed)

USING FRAMES
<frameset cols=”25%,75%”> Frameset 1

<frameset rows=”18%,82%”> Frameset 2
<frame src=”header.htm”> <frame src=”menu.htm”>

</frameset>

<frame src=”home.htm” name=”main”> Frameset 3

Target Name
</frameset>
3 FRAMES, 2 COLUMNS, 2 ROWS
<!DOCTYPE html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

A frame is a rectangular area of a Web page and allow a user to
display several Web pages at one time in a single browser window.
Three frames
Two columns
Two rows
2 FRAMES, 2 ROWS
Two frames
Two rows
2 FRAMES, 2 COLUMNS
Two frames
Two columns
FRAME DEF FILE
The initial HTML tags used in the frame definition file

are different.

They DO NOT INCLUDE the BODY tags.

These tags are not needed!!!! If you have a frameset
tag, you CANNOT have a body tag. The two are
mutually exclusive!!!

NO BODY TAGS
<!DOCTYPE html

<html>
<head>
<title> Your Name Name of project </title>
</head>

</html>
3 FRAMES, 2COLUMNS, 2 ROWS
Header
header.htm
Main Content Area

Navigation Menu
home.htm
menu.htm
The FIRST STEP in creating frames is to create a
frame definition file which defines the layout of the
frames in a Web site and specifies the Web page
contents of each frame.

<frameset> Defines the structure of the frames
</frameset>
<frame>Defines a given frame—required for each
frame (no end tag)
<frameset cols="25%,75%"> <frameset rows="18%,82%">
<frame src="header.htm" scrolling="no"
frameborder="no">
<frame src="menu.htm" scrolling="no" frameborder="no">
</frameset>
<frame src="home.htm" name="win-main"
frameborder="no">
</frameset>
Header header.htm
Menu menu.htm
Home home.htm

Use framedef file to create framedef.htm
This Website has three frames; three <frame> tags
Create two columns and two rows: (equal 100%)
The left column is divided into two rows

The main frame will display the home page
2 COLUMNS
 <frameset cols=28%,72%>
 <frame src="lab6-2menu.htm" scrolling=no>
 <frame src="lab6-2home.htm" name="win-
main">
 </frameset>
2 ROWS
 <frameset rows="27%,73%">
 <frame src="apply6-1menu.htm"
scrolling="no">
 <frame src="apply6-1home.htm" name="win-
main">
 </frameset>
<frameset rows="30%,70%">

<frameset cols="25%,75%">
<frame src="lab6-3logo.htm">
<frame src="lab6-3header.htm" scrolling="no">
</frameset>

<frameset cols="25%,75%">
<frame src="lab6-3menu.htm" scrolling="no">
<frame src="lab6-3home.htm" name="win-main">
</frameset>
NAME=“WIN-MAIN”
The name attribute, name="win-main" is used to

assign the target name, win-main, to the main
frame. The links in the navigation menu will use
the target name, win-main, to indicate that all
linked Web pages should be displayed in the
main frame.
 The hyperlinks on the menu.htm file contain the
target to the home (win-main) frame:
 Because the home.htm file was named “win-
main,” the files will open in that frame when the
navigation menu hyperlinks are clicked.
 The Cross Hatch hyperlink was clicked and the
Web page was opened in the home frame.
Important to Note:

Doctype (different)
<!DOCTYPE html
framedef file (no body tags)

Creates the structure
home.htm page MUST be named
“win-main” in framedef file

<frame src=“home.htm” name=“win-main”>
Named: Apply6-1solution/Lab6-1 solution

Menu File
All hyperlinks must be targeted to the “win-main”
home.htm page

<a href=“name of file” target=“win-main”>

Using Frames in A Web Site: HTML Project 06

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Using Frames in A Web Site: HTML Project 06

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML Project 06

USING FRAMES IN A WEB SITE

<frame>  Defines a given frame; required for each frame

<noframes>  Defines alternate content that appears if the

Frame Tag Attributes

<frameset> cols  Indicates the number of columns

<frame> frameborder  Turns frame borders on or off

<frame src=”header.htm”> <frame src=”menu.htm”>

The initial HTML tags used in the frame definition file

Main Content Area

The left column is divided into two rows

The name attribute, name="win-main" is used to

framedef file (no body tags)

Anda mungkin juga menyukai