Project 6

Report
HTML
Concepts and Techniques
Fourth Edition
Project 6
Using Frames
in a Web Site
Project Objectives
•
•
•
•
•
•
•
•
Design and create a frame structure
Change frame scrolling options
Name a frame content target
Identify Web pages to display at startup
Set frame rows
Create a header page with text
Create a navigation menu page with text links
Create a home page
Project 6: Using Frames in a Web Site
2
Creating a Frame Definition File
• Example:
www.student.gsu.edu/~wkim5/project06/framedef.htm
• A frameset is used to define the layout of the
frames that are displayed
Project 6: Using Frames in a Web Site
3
Creating a Frame Definition File
Project 6: Using Frames in a Web Site
4
Frame Tag Attributes
Project 6: Using Frames in a Web Site
5
Structure of frames
framedef.htm
header.htm
home.htm
Menu.htm
Project 6: Using Frames in a Web Site
6
Start framedef.htm file
<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
"http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Bill Thomas Illustrations</title>
</head>
</html>
Project 6: Using Frames in a Web Site
7
Start framedef.htm file
• Note that there is no
<body>
</body>
Project 6: Using Frames in a Web Site
8
Defining Columns and Rows
in the Frameset
<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
"http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Bill Thomas Illustrations</title>
</head>
<!-- Define columns and rows in the frameset-->
<frameset cols="25%,75%">
<frameset rows="20%,80%">
</html>
Project 6: Using Frames in a Web Site
9
Specifying Attributes of the Header
and Menu Frames (rows)
</head>
<frameset cols="25%,75%">
<frameset rows="20%,80%">
<!-- Specify Attributes of the Header and Menu Frames-->
<frame src="header.htm" title = "header" name = "header"
scrolling="no" frameborder = "no" />
<frame src="menu.htm" title = "menu" name = "menu"
scrolling="no" frameborder = "no" />
</html>
Project 6: Using Frames in a Web Site
10
Specifying Attributes of the Header
and Menu Frames (rows)
What if frameborder = “yes”?
What if scrolling = “yes”?
Project 6: Using Frames in a Web Site
11
Ending the frameset of the first
column
<frameset rows="20%,80%">
<!-- Specify Attributes of the Header and Menu Frames-->
<frame src="header.htm" title = "header" name = "header"
scrolling="no" frameborder = "no" />
<frame src="menu.htm" title = "menu" name = "menu"
scrolling="no" frameborder = "no" />
<!-- Ending the frame set of rows-->
</frameset>
</html>
Project 6: Using Frames in a Web Site
12
Specifying Attributes
of the Main Frame
<!-- Specify Attributes of the Header and Main Frames-->
<frame src="home.htm" title = "win-main" name
= "win-main" frameborder = "no" />
</html>
Project 6: Using Frames in a Web Site
13
Ending the Framesets
<!-- Ending the frame set-->
</frameset>
<!-- Specify Attributes of the Header and Main Frames-->
<frame src="home.htm" title = "win-main" name = "win-main"
frameborder = "no" />
<!-- Ending the frame set-->
</frameset>
Project 6: Using Frames in a Web Site
14
Creating the Header Page-header.htm
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Bill Thomas Illustrations</title>
</head>
<body>
<a href = "thomaswaterfall.jpg" target = "win-main">
<img src = "thomaslogo.jpg" width = "179" height = "81" />
</a>
</body>
</html>
Project 6: Using Frames in a Web Site
15
Creating the Menu Page-menu.htm
<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
"http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html >
<head>
<title>Bill Thomas Illustrations</title>
</head>
<! Insert the body with options>
</body>
</html>
Project 6: Using Frames in a Web Site
16
Insert the body with options
<!DOCTYPE html
PUBLIC "-//W3C/DTD XHTML 1.0 Frameset// EN
"http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html >
<head>
<title>Bill Thomas Illustrations</title>
</head>
<! Insert the body with options>
<body text = "navy" link="navy" vlink="navy" alink="navy">
</body>
</html>
Project 6: Using Frames in a Web Site
17
Add the tables
<! Add linkgs with Targets to the Menu pages>
<table>
<tr>
<td><a href = "thomascross.jpg" target = "win-main"> Cross Hatch<br />
<img src ="thomascrosssm.jpg" width = "72" height = "98" /></a> </td>
<td><a href = "thomasfull.jpg" target = "win-main"> Full Color<br />
<img src ="thomasfullsm.jpg" width = "72" height = "98" /> </a> </td>
</tr>
<tr>
<td><a href = "thomasink.jpg" target = "win-main"> Ink Wash<br />
<img src = "thomasinksm.jpg" width = "92" height = "98" /> </a> </td>
<td><a href = "orderform.htm" target = "win-main"> Order Form<br />
<img src = "orderformsm.jpg" width = "72" height = "98" /> </a> </td>
</tr>
</table>
Project 6: Using Frames in a Web Site
18
Add e-mail link
<! Add email link>
<p><em><font size = "-1"> E-mail questions and comments to
<a href = "mailto:[email protected]>[email protected]</a>.
</font></em></p>
Project 6: Using Frames in a Web Site
19
Create the home.htm
• Insert an image (see the file)
Project 6: Using Frames in a Web Site
20
Viewing and Printing the Frame
Definition File Using a Browser
• Start your browser
• Click File on the menu bar and then click Print on the File
menu
• Click the Options tab in the Print dialog box
• Click As laid out on screen to select it and then click the
Print button
Project 6: Using Frames in a Web Site
21
Viewing and Printing the Frame
Definition File Using a Browser
Project 6: Using Frames in a Web Site
22
Testing the Links
• Click the Cross Hatch link on the navigation menu
• Click the Full Color link on the navigation menu
• Click the Ink Wash link on the navigation menu
Project 6: Using Frames in a Web Site
23
HTML
Concepts and Techniques
Fourth Edition
Project 6 Complete
Using Frames
in a Web Site

similar documents