Download Slides

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
Document related concepts
no text concepts found
Transcript 
HTML Frames
http://jjcweb.jjay.cuny.edu/ssengupta/
1
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:
o What information will be displayed in each frame?
o How do you want the frames placed on the Web page?
o What is the size of each frame?
o What Web pages will users first see when they access the
site?
o Should users be permitted to resize the frames to suit their
needs?
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 frame
o Web pages the frames display
7
Frameset



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
Layout Defined in Either Rows or Columns
9
Frames in rows or columns


You must choose to layout your frames in
either rows or columns
To create a frame layout, you will use the
rows and cols attributes of the <frameset>
element
o The rows attribute creates a row of frames
o The cols attribute creates a column of frames
10
rows attribute for <frameset>

Creating a row frame layout
o attribute name: rows
o attribute value: number of pixels | percentage | *
<frameset rows=“row1 height%, row2 height%, *”>
11
cols attribute for <frameset>

Creating a column frame layout
o attribute name: cols
o attribute value: number of pixels | percentage | *
<frameset cols=“column1 width%, column2 width%, *”>
12
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!!!
13
Define frame source

use <frame> tag within
o <frameset> & </frameset> tags
<frameset rows=“30%,*”>
<frame src=“heading-part.html”>
<frame src=“main-body.html”>
</frameset>
14
Let’s create the first example
15
Creating a Nested frame structure
Combination of rows and cols
16
Creating a Nested frame structure
<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.
17
Nesting framesets

nesting one pair of <frameset> tags in
another
<frameset rows=“30%,*”>
<frame src=“heading.html”>
<frameset col=“30%,*”>
<frame src=“body_left.html”>
<frame src=“body_right.html”>
</frameset>
</frameset>
18
Practice example
index.html
streetsign
logo here
logo.html
Some Description here
John Jay Link
Class website Link
link.html
home.html
19
Related documents