2. Chapter 6: Using Frames in a Web Site 2
Chapter 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
3. Chapter 6: Using Frames in a Web Site 3
Chapter Objectives
• Use the <frame> tag
• Change frame scrolling options
• Name a frame content target
• Identify Web pages to display at startup
• Set frame rows and columns
• Create a navigation menu page with text links
• Create a home page
4. Chapter 6: Using Frames in a Web Site 4
Introduction
• A frame is a rectangular area of a Web page in which a
separate Web page can be displayed.
• Frame allow a user to display several pages at one time
in a single browser window.
• Each frame displays a different, individual Web page and
capable of interacting with other Web pages
• Web page that include frames look and act differently
from the Web pages created in previous projects.
5. Chapter 6: Using Frames in a Web Site 5
Plan Ahead – General Project Guidelines
1. Plan the Web site
2. Analyze the need.
3. Choose the content for the Web page
4. Determine the layout for the pages and how one page
links to another.
5. Create the Web page and links.
6. Test all Web pages within the Web site.
6. Chapter 6: Using Frames in a Web Site 6
Using Frames
• When frames are used, the browser contain multiple Web
page and image files.
• Frame can be used:
– To allow view more than one Web page at a time.
– To create a navigation menu
– To display headers, navigation menu and other information
• To used frames, you must:
– Create a definition file to define the layout of frames.
– Add frameset tags to define the column and row of frames
– Define other frame attribute, such as borders, margins and
scrolling.
7. Chapter 6: Using Frames in a Web Site 7
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 frame definition file use a combination of three HTML tags and
attributes, as shown in Table 6-1
• Table 6-1 Frame Tags
8. Chapter 6: Using Frames in a Web Site 8
Creating a Frame Definition File
• A frameset is used to define the layout of the frames that are displayed
• A frame definition file also contains additional information, specified in
attributes and values. Refer Table 6-2
• Table 6-2 Frame Tag Attributes
9. Chapter 6: Using Frames in a Web Site 9
Defining Column and Rows in a Frameset
• For each frame, the src attribute is used to define which
Web page should be displayed in the frame at startup
• Within the <frameset> tag you specify the number of
columns and rows in the display area with the cols and
rows atributes
10. Chapter 6: Using Frames in a Web Site 10
Plan Ahead – Identify what frame layout to use
for the Web Pages
• Effectively place the navigation frame – eg. menu bar
• Effectively place the main target frame.
• Add other frames as necessary
• Code the frame definition file
11. Chapter 6: Using Frames in a Web Site 11
Planning and Laying Out Frames
• The most important step in creating an effective frame
structure is planning out a good frame design.
• Sketching the frame structure on paper before writing
the HTML code can help save time when determining
which HTML <frameset> and <frame> tags and
attributes to use.
• Frame layout can be designed in a variety of ways.
• The goal and purpose of the Web site is to determine
which layout is approapriate
12. Chapter 6: Using Frames in a Web Site 12
Entering Initial HTML Tags to Define the Web
Page Structure
• Open a new file in Notepad and enter the HTML code shown in
Table 6–3. Press ENTER at the end of each line of code. If you
make an error as you are typing, use the BACKSPACE key to
delete all the characters back to and including the incorrect
characters, and then continue typing
• Compare what you typed to Figure 6–10. If you notice errors,
use your mouse pointer or ARROW keys to move the insertion
point to the right of each error and use the BACKSPACE key to
correct the error.
• Position the insertion point on the blank line two lines below the
</head> tag and two lines above the </html> tag (line 11)
13. Entering Initial HTML Tags to Define the Web
Page Structure
Chapter 6: Using Frames in a Web Site 13
14. Chapter 6: Using Frames in a Web Site 14
Defining Columns and Rows in the Frameset
• If necessary, click line 11
• Type <frameset cols=”22%,78%”> to define the
two columns and then press the ENTER key twice
15. Chapter 6: Using Frames in a Web Site 15
Defining Columns and Rows in the Frameset
16. Chapter 6: Using Frames in a Web Site 16
Specifying Attributes of the Menu Frame
• If necessary, click line 13
• Type <frame src=”menu.html” title=”menu”
name=”menu” frameborder=”0” />
and then press the ENTER key to insert the HTML
code for the menu frame
17. Chapter 6: Using Frames in a Web Site 17
Specifying Attributes of the Menu Frame
18. Chapter 6: Using Frames in a Web Site 18
Specifying Attributes of the Main Frame
• If necessary, click line 14
• Type <frame src=”home.html” title=”win-
main” name=”win-main” frameborder=”0” />
and then press the ENTER key twice to insert the
HTML code for the main frame
19. Chapter 6: Using Frames in a Web Site 19
Specifying Attributes of the Main Frame
20. Chapter 6: Using Frames in a Web Site 20
Ending the Framesets
• If necessary, click line 16
• Type </frameset> as the tag and then press the
ENTER key
22. Chapter 6: Using Frames in a Web Site 22
Saving, Validating, and Printing the HTML File
• With a USB flash drive connected to one of the computer’s USB
ports, click File on the Notepad menu bar and then click Save As.
Type framedef.html in the File name text box (do not press
ENTER)
• If Computer is not displayed in the Favorite Links section, drag the
top or bottom edge of the Save As dialog box until Computer is
displayed
• Click Computer in the Favorite Links section to display a list of
available drives
• If necessary, scroll until UDISK 2.0 (G:) appears in the list of
available drives.
• If necessary, open the Chapter06ChapterFiles folder
23. Saving, Validating, and Printing the HTML File
• Click the Save button in the Save As dialog box to
save the file on the USB flash drive with the file name
framedef.html
• Validate the Web page
• Click framedef.html – Notepad on the taskbar and print
the HTML file
Chapter 6: Using Frames in a Web Site 23
24. Chapter 6: Using Frames in a Web Site 24
Saving, Validating, and Printing the HTML File
25. Chapter 6: Using Frames in a Web Site 25
Starting a New Notepad Document and
Entering Initial HTML Tags
• Click File on the Notepad menu bar and then click
New
• Enter the HTML code in Table 6–4 to enter the initial
tags
• Position the insertion point on line 12
26. Starting a New Notepad Document and
Entering Initial HTML Tags
Chapter 6: Using Frames in a Web Site 26
27. Chapter 6: Using Frames in a Web Site 27
Adding Links with Targets to the Menu Page
28. Chapter 6: Using Frames in a Web Site 28
Adding Links with Targets to the Menu Page
• If necessary, click line 12
• Enter the HTML code shown in Table 6–5, and then
press the ENTER key twice after the last line
29. Adding Links with Targets to the Menu Page
Chapter 6: Using Frames in a Web Site 29
30. Adding an E-mail Link
• If necessary, click line 33
• Type <p><em><font size=”-1”>E-mail
questions and comments to as the code and
press the ENTER key
• Type
<a href=”mailto:
janasjewels@isp.com”>janasjewels
@isp.com </a>.</font></em></p> to
complete the e-mail link
Chapter 6: Using Frames in a Web Site 30
32. Saving, Validating, and Printing the HTML File
• Save the file in the Chapter06ChapterFiles folder on
your USB drive with the file name menu.html
• Validate the Web page
• Print the HTML file
Chapter 6: Using Frames in a Web Site 32
34. Copying and Pasting the HTML Code to a New
File
• Click menu.html – Notepad on the taskbar, if
necessary
• Click immediately to the left of the < in the <!
DOCTYPE html tag on line 1
• Drag through the <body> tag on line 10 to highlight
lines 1 through 10
• Press CTRL+C to copy the selected lines to the
Clipboard
• Click File on the Notepad menu bar and then click New
• Press CTRL+V to paste the contents from the
Clipboard into a new file
Chapter 6: Using Frames in a Web Site 34
35. Copying and Pasting the HTML Code to a
New File
• Press the ENTER key three times
• Type </body> and then press the ENTER key
• Type </html> and then press the ENTER key
• Change the title on line 8 to say Home page (rather
than Menu)
• Click line 12 to position the insertion point
Chapter 6: Using Frames in a Web Site 35
36. Copying and Pasting the HTML Code to a
New File
Chapter 6: Using Frames in a Web Site 36
37. Chapter 6: Using Frames in a Web Site 37
Creating the Home Page
• If necessary, click line 12
• Enter the HTML code shown in Table 6–6, pressing
the ENTER key after each line
39. Chapter 6: Using Frames in a Web Site 39
Saving, Validating, and Printing the HTML File
• Save the file in the Chapter06ChapterFiles folder of
your USB drive as home.html
• Validate the Web page
• Print the HTML file
40. Chapter 6: Using Frames in a Web Site 40
Saving, Validating, and Printing the HTML File
41. Chapter 6: Using Frames in a Web Site 41
Viewing and Printing the Frame Definition
File Using a Browser
• Start your browser
• Type G:Chapter06ChapterFiles framedef.html in
the Address box and then press the ENTER key to view the two
Web pages defined in the frame definition file and verify that the
correct pages are displayed at startup
• Click the drop-down arrow on the Print icon on the Command
bar, and then click Print
• Click the Options tab in the Print dialog box
• Click As laid out on screen to select it, and then click the Print
button to print the frames as laid out on screen
42. Viewing and Printing the Frame Definition
File Using a Browser
Chapter 6: Using Frames in a Web Site 42
43. Chapter 6: Using Frames in a Web Site 43
Testing and Printing the Links
• Click the Necklaces link on the navigation menu and ensure
that the Necklaces page shows in the main frame.
• Click the drop-down arrow on the Print icon on the Command
bar and click Print. Click the Options tab in the Print dialog box,
click As laid out on screen, and then click the Print button to
print a copy of the necklace.html Web page as laid out in the
browser
• Click the Bracelets link on the navigation menu and ensure that
the Bracelets page shows in the main frame. If you want a copy
of the Web page as shown in the browser, print the Web page
using the As laid out on screen option
44. Chapter 6: Using Frames in a Web Site 44
Testing and Printing the Links
• Click the Watches link on the navigation menu and ensure that
the Watches page shows in the main frame. If you want a copy
of the Web page as shown in the browser, print the Web page
using the As laid out on screen option
• Click the Orders link on the navigation menu to ensure that the
order form appears in the main frame. If you want a copy of the
Web page as shown in the browser, print the Web page using
the As laid out on screen option
• Click the Home link on the navigation menu by clicking the
Jana’s Jewels logo
• Click the e-mail link and verify that the New Message window
shows janasjewels@isp.com as the address. Click the Close
button to close the New Message window and quit the e-mail
program
46. Chapter 6: Using Frames in a Web Site 46
Quitting Notepad and a Browser
• Click the Close button on the browser title bar
• Click the Close button on the Notepad window title
bar
47. Chapter 6: Using Frames in a Web Site 47
Chapter 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
48. Chapter 6: Using Frames in a Web Site 48
Chapter Summary
• Use the <frame> tag
• Change frame scrolling options
• Name a frame content target
• Identify Web pages to display at startup
• Set frame rows and columns
• Create a navigation menu page with text links
• Create a home page
