Scribd
Upload
78 views

Using Frames in A Web Site: HTML Project 06

Three frames are defined using a frame definition file with two columns and two rows. The left column contains two rows for a header and menu. The main content area is in the right column and displays the home page. The frame definition file does not include body tags and defines each frame with <frame> tags, naming the home page frame "win-main" so hyperlinks in the menu frame target that frame.

Uploaded by

angela_edel
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
78 views

Using Frames in A Web Site: HTML Project 06

Three frames are defined using a frame definition file with two columns and two rows. The left column contains two rows for a header and menu. The main content area is in the right column and displays the home page. The frame definition file does not include body tags and defines each frame with <frame> tags, naming the home page frame "win-main" so hyperlinks in the menu frame target that frame.

Uploaded by

angela_edel
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

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
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.

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
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
<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
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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”>
 

You might also like