Embed Size (px)
Citation preview
1
HTML Frames
http://jjcweb.jjay.cuny.edu/ssengupta/
Learning Objectives
Explore the uses of frames in a Web site
Display a document within a frame
Format the appearance of a frame
2
What is a frame? Frames are sections of the browser window capable of
displaying the contents of multiple webpages in a single Web page display
3
Remember!
The browser has to load multiple HTML files when working with frames
4
Planning Your Frames first Before you start creating your frames, plan their
appearance and how they are to be used:
1. How do you want the frames placed on the Web page?
2. What is the size of each frame?
3. What information will be displayed in each frame?
4. What Web pages will users first see when they access the site?
5
Planning Your Frames Layout
6
Frameset A frameset describes the frame layout
The <frameset> element is used to store the definitions of the various frames in the file. These definitions will typically include:
o Size and location of the frameo Web pages the frames display
7
What is the tag used for frameset? <frameset>…</frameset> example
<html><head>
<title>Learning Frames</title></head>
<frameset>define layout and frames here
</frameset>
</html>
8
Frameset
Simplest Layout Defined in Either Rows or Columns
9
Frames in columns or rows
You must choose to layout your frames in either columns or rows
To create a frame layout, you will use the cols and rows attributes of the <frameset> elemento The cols attribute creates a column of frameso The rows attribute creates a row of frames
10
Creating a column frame layouto attribute name: colso attribute value: number of pixels | percentage
| *
<frameset cols=“column1 width%, column2 width%, *”>
11
cols attribute for <frameset>
Content of frames
So, now we have created the frame layout
But the frames are not yet visible!!
So, what goes inside the frames?
HTML files!!!
12
use <frame> tag within o <frameset> & </frameset> tags
<frameset cols=“30%,*”>
<frame src=“abc.htm”>
<frame src=“xyz.htm”>
</frameset>
13
Define frame source
Let’s create the first example
14
Creating a row frame layouto attribute name: rowso attribute value: number of pixels | percentage
| *
<frameset rows=“row1 height%, row2 height%, *”>
15
rows attribute for <frameset>
Creating a Nested frame structure
16
Combination of rows and cols
Creating a Nested frame structure
17
<html> <head> <title> Learning Frames </title> </head> <frameset rows="30%, *"> <frame src="header.htm"> <!– nested frameset --> <frameset cols="30%, *"> <frame src=“links.htm"> <frame src=“home.htm"> </frameset> </frameset></html>
Remember correct nesting of the structures are ABSOLUTELY important here.
18
Nesting framesets
nesting one pair of <frameset> tags in another
<frameset rows=“30%,*”>
<frame src=“heading.html”>
<frameset cols=“30%,*”>
<frame src=“body_left.html”>
<frame src=“body_right.html”>
</frameset>
</frameset>
Using the <noframes> Element Use the <noframes> element to allow your Web site to be
viewable using browsers that do or do not support frames
When a browser that supports frames processes this code, it ignores everything within the <noframes> elements and concentrates solely on the code within the <frameset> elements
When a browser that doesn’t support frames processes this code, it doesn’t know what to do with the <frameset> and <noframes> elements, so it ignores them
When you use the <noframes> element, you must include <body> elements, this way, both types of browsers are supported within a single HTML file
19
The <noframes> Syntax
The syntax for the <noframes> element is: <html>
<head>
<title>title</title>
</head>
<frameset>
frames
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
20
Site Layout #1
21
streetsign logo here
John Jay Link
Class website Link
Some Description here
logo.html
link.htmlhome.html
index.html
Site Layout #2
22
Some content here
Some content here
Some content here
Some content here
Some content
here
Site Layout #3
23
Some content here
Some content here
Some content here
Some content here
Some content here
