Transcript Project 6 - Beaver Dam Elementary

HTML
Concepts and Techniques
Fourth Edition
Project 6
Using Frames
in a Web Site
Project Objectives
• Define terms related to frames
• Describe the steps used to design a frame
structure
• Plan and lay out a frameset
• Create a frame definition file that defines three
frames
• Use the <frameset> tag
Project 6: Using Frames in a Web Site
2
Project Objectives
•
•
•
•
•
Use the <frame> tag
Change frame scrolling options
Name a frame content target
Identify Web pages to display at startup
Set frame rows
Project 6: Using Frames in a Web Site
3
Project Objectives
•
•
•
•
Set frame columns
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
4
Creating a Frame Definition File
• A frame definition file defines the layout of the
frames in a Web site and specifies the Web page
contents of each frame
• A frameset is used to define the layout of the
frames that are displayed
Project 6: Using Frames in a Web Site
5
Creating a Frame Definition File
Project 6: Using Frames in a Web Site
6
Frame Tag Attributes
Project 6: Using Frames in a Web Site
7
Starting Notepad
and Entering Initial HTML Tags
Project 6: Using Frames in a Web Site
8
Defining Columns and Rows
in the Frameset
• If necessary, click line 10 and then press the
ENTER key twice
• Type <frameset cols=“25%,75%”> and then
press the ENTER key
• Type <frameset rows=“18%,82%”> and then
press the ENTER key
Project 6: Using Frames in a Web Site
9
Defining Columns and Rows
in the Frameset
Project 6: Using Frames in a Web Site
10
Specifying Attributes of the Header
and Menu Frames
• If necessary, click line 13
• Type <frame src="header.htm“
title=“header” name=“header”
scrolling="no“ frameborder="no"> and
then press the ENTER key
• Type <frame src="menu.htm“
title=“menu” name=“menu”
scrolling="no“ frameborder="no"> and
then press the ENTER key twice
Project 6: Using Frames in a Web Site
11
Specifying Attributes of the Header
and Menu Frames
Project 6: Using Frames in a Web Site
12
Specifying Attributes
of the Main Frame
• If necessary, click line 16
• Type <frame src="home.htm“
title=“win-main” name="win-main“
frameborder="no"> and then press the
ENTER key
Project 6: Using Frames in a Web Site
13
Specifying Attributes
of the Main Frame
Project 6: Using Frames in a Web Site
14
Ending the Framesets
• If necessary, click line 17
• Type </frameset> as the tag
• Click line 15 to position the insertion point
• Type </frameset> and then press the ENTER
key
Project 6: Using Frames in a Web Site
15
Ending the Framesets
Project 6: Using Frames in a Web Site
16
Saving the HTML File
• With a USB drive plugged into your computer,
click File on the menu bar and then click Save As.
Type framedef.htm in the File name text box
• If necessary, click UDISK (G:) in the Save in list.
Click the Project06 folder and then click the
ProjectFiles folder in the list of available folders.
Click the Save button in the Save As dialog box
Project 6: Using Frames in a Web Site
17
Saving the HTML File
Project 6: Using Frames in a Web Site
18
Creating the Header Page
• Click File on the menu bar and then click New on the
File menu
• Enter the HTML code as shown in Table 6-4 on page
HTM 269
• With a USB drive plugged into your computer, click
File on the menu bar and then click Save As. Type
header.htm in the File name text box.
• If necessary, click UDISK (G:) in the Save in list. Click
the Project06 folder and then click the ProjectFiles
folder in the list of available folders. Click the Save
button in the Save As dialog box
Project 6: Using Frames in a Web Site
19
Creating the Header Page
Project 6: Using Frames in a Web Site
20
Starting a New Notepad Document
and Entering Initial HTML Tags
Project 6: Using Frames in a Web Site
21
Adding Links with Targets to the Menu
Page and Saving the HTML File
• Enter the following HTML beginning on line 11
Project 6: Using Frames in a Web Site
22
Adding Links with Targets to the Menu
Page and Saving the HTML File
• With a USB drive plugged into your computer,
click File on the menu bar and then click Save As.
Type menu.htm in the File name text box
• If necessary, click UDISK (G:) in the Save in list.
Click the Project06 folder and then click the
ProjectFiles folder in the list of available folders.
Click the Save button in the Save As dialog box
Project 6: Using Frames in a Web Site
23
Creating the Home Page
• Click File on the menu bar and then click New on
the File menu
• Enter the HTML code as shown in Table 6-7 on
page HTM 274
• Position the insertion point on the second blank
line (line 11)
Project 6: Using Frames in a Web Site
24
Creating the Home Page
• Type <img src="thomaswaterfall.jpg“
width=“309” height=“384” /> as the tag
• With a USB drive plugged into your computer, click
File on the menu bar and then click Save As. Type
home.htm in the File name text box
• If necessary, click UDISK (G:) in the Save in list. Click
the Project06 folder and then click the ProjectFiles
folder in the list of available folders. Click the Save
button in the Save As dialog box
Project 6: Using Frames in a Web Site
25
Creating the Home Page
Project 6: Using Frames in a Web Site
26
Viewing and Printing the Frame
Definition File Using a Browser
• Start your browser
• Type G:\Project06\ProjectFiles\
framedef.htm in the Address box and then press the
ENTER key
• 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
27
Viewing and Printing the Frame
Definition File Using a Browser
Project 6: Using Frames in a Web Site
28
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
29
Testing the Links
• Click the Order Form link on the navigation menu
• Click the Home link on the navigation menu by clicking
the logo
• Click the e-mail link and verify that the New Message
window shows [email protected] as the address. Click
the Close button to close the New Message window and
quit the e-mail program
Project 6: Using Frames in a Web Site
30
Printing All HTML Files
• Click the Notepad button on the taskbar
• Click File on the menu bar and then click Print. Click Print in
the Print dialog box to print the home.htm file
• Using Notepad, open the file, framedef.htm, from the
Project06\ProjectFiles folder in the HTML Data Files
• Click File on the menu bar and then click Print. Click Print in
the Print dialog box to print the file framedef.htm
• Repeat the third and fourth steps to open and print the
header.htm and menu.htm files
Project 6: Using Frames in a Web Site
31
Quitting Notepad and a Browser
• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
title bar
Project 6: Using Frames in a Web Site
32
Project Summary
• Define terms related to frames
• Describe the steps used to design a frame
structure
• Plan and lay out a frameset
• Create a frame definition file that defines three
frames
• Use the <frameset> tag
Project 6: Using Frames in a Web Site
33
Project Summary
•
•
•
•
•
Use the <frame> tag
Change frame scrolling options
Name a frame content target
Identify Web pages to display at startup
Set frame rows
Project 6: Using Frames in a Web Site
34
Project Summary
•
•
•
•
Set frame columns
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
35
HTML
Concepts and Techniques
Fourth Edition
Project 6 Complete
Using Frames
in a Web Site