Creating Frames in a Web Page

1
Creating Frames in a Web Page
2
Introduction

• Frames divide a Web page into more than one
  window
• A frame is a rectangular area (window) in which
  text or graphics can appear
• A frame definition file contains the layout of
  the frames on the Web page
• You will need a separate HTML file for each frame
  on your Web page

3
Creating Web Pages with Frames

• Frames can be used
• To allow a Web site visitor to view more than one
  page at a time
• For navigation
• To display information that must stay on the
  screen as other parts of the page change

4
Creating Web Pages with Frames
frames
frame
5
Using Frames

• To use frames, create a frame definition file
  using these three tags

6
Using Frames
7
Using Frames

• The frame definition file also contains
  additional information

8
This code produces

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSample of Two Horizontal Frameslt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS30, 70gt
• ltFRAME SRCmenu2.htmgt
• ltFRAME SRChome2.htm NAMEwin-maingt
• lt/FRAMESETgt
• lt/HTMLgt

9
this frames page
row
border
row
10
This code produces

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSample of Two Vertical Frameslt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS30, 70gt
• ltFRAME SRCmenu1.htmgt
• ltFRAME SRChome1.htm NAMEwin-maingt
• lt/FRAMESETgt
• lt/HTMLgt

11
this frames page
columns
12
This code produces

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAndrews High School Class of 90lt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS30, 70 FRAMEBORDERNOgt
• ltFRAME SRCheader.htm SCROLLINGNOgt
• ltFRAMESET COLS25,75gt
• ltFRAME SRCmenu.htm SCROLLINGNOgt
• ltFRAME SRChome.htm NAMEwin-maingt
• lt/FRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

13
this frames page
no border
14
Planning and Laying Out Frames

• Sketch the frame structure on paper before
  writing the HTML code

two rows
two columns
15
Setting Frame Rows

• Use the ROWS attribute in the ltFRAMESETgt tag to
  set the number and sizes of rows
• ltFRAMESET ROWS30, 70gt

sizes of rows as apercentage of thescreen
16
Setting Frame Rows

• Additional rows may be added by simply specifying
  the height in percentage of screen height or
  number of pixels
• Asterisks may be used instead of numbers to
  evenly divide the remaining space available

17
Setting Frame Columns

• Columns divide the screen vertically
• The COLS attribute works like the ROWS attribute
• If you need more than two columns, you must
  include the dimensions for the columns in the
  ltFRAMESETgt tag

18
Setting Frame Columns
Enter the FRAMESETtag on line 9 of yourdocument
19
Identifying the Column Content

• The first column will display the navigation page
  that will remain constant
• Do not turn off scrolling, in case further links
  are added in the future
• The default scrolling setting is AUTO
• The scroll bar will automatically be available
  for the frame, if needed

20
Identifying the Column Content

• The second column will display variable
  information
• Use the NAME attribute to give that frame a
  target name
• Links can use this target to direct the display
  of subsequent Web pages to that frame

21
Identifying the Column Content
22
Ending the Framesets

• You must enter a lt/FRAMESETgt tag for each
  ltFRAMESETgt tag

23
Viewing and Printing the HTML Files Using your
Browser
frame 1header.htm
frame 3home.htm
frame 2menu.htm
24
Viewing and Printing the HTML Files Using your
Browser

• In the Print dialog box of the browser, under the
  Print Frames section, are three options
• As laid out on screen
• Only the selected frame
• All frames individually
• The default is to print all frames individually
• For this project, print as laid out on screen

25
Viewing and Printing the HTML Files Using your
Browser

• Click the Print button on the Standard Buttons
  toolbar

26
Advanced Frame Options

• Using NORESIZE
• By default, users may resize frames unless you
  specify the NORESIZE attribute in the ltFRAMEgt tag
• Examples
• ltFRAME SRCheader.htm SCROLLINGNO NORESIZEgt
• ltFRAME SRCmenu.htm NORESIZEgt
• ltFRAME SRChome.htm NAMEwin-main NORESIZEgt

27
Designing a Four-Frame Structure

• A four frame structure might work for this Web
  site design

28
Designing a Four-Frame Structure

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAndrews High School Class of 90lt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS30,70gt
• ltFRAMESET COLS25,75gt
• ltFRAME SRClogo4.htm SCROLLINGNOgt
• ltFRAME SRCheader4.htm SCROLLINGNOgt
• lt/FRAMESETgt
• ltFRAMESET COLS25,75gt
• ltFRAME SRCmenu.htm SCROLLINGNOgt
• ltFRAME SRChome.htm NAMEwin-maingt
• lt/FRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

29
Summary

• Frames divide a Web page into more than one
  window
• A frame is a rectangular area (window) in which
  text or graphics can appear
• A frame definition file contains the layout of
  the frames on the Web page
• You will need a separate HTML file for each frame
  on your Web page

30
Now for some practice