Download presentation
Presentation is loading. Please wait.
1
Creating Frames on a Web Page
Project 5 Creating Frames on a Web Page
2
Objectives Define terms related to frames
Describe the steps used to design a frame structure Plan and lay out frameset Create a frame definition file Use the <FRAMESET> tag Use the <FRAME> tag Change frame scrolling options
3
Objectives Name a frame content target
Identify Web pages to display at startup Set frame rows Set frame columns Create a header page with an image and text Create a navigation page Create a home page
4
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
5
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
6
Creating Web Pages with Frames
7
Using Frames To use frames, create a frame definition file using these three tags:
8
header.htm in frame 1, scrolling off
Using Frames header.htm in frame 1, scrolling off two rows created menu.htm in frame 2 two columns created home.htm in frame 3 target name frameset ending tags
9
Using Frames The frame definition file also contains additional information:
10
This code produces… <HTML> <HEAD>
<TITLE>Sample of Two Horizontal Frames</TITLE> </HEAD> <FRAMESET ROWS=“30%, 70%”> <FRAME SRC=“menu2.htm”> <FRAME SRC=“home2.htm” NAME=“win-main”> </FRAMESET> </HTML>
11
… this frames page row border row
12
This code produces… <HTML> <HEAD>
<TITLE>Sample of Two Vertical Frames</TITLE> </HEAD> <FRAMESET COLS=“30%, 70%> <FRAME SRC=“menu1.htm”> <FRAME SRC=“home1.htm” NAME=“win-main”> </FRAMESET> </HTML>
13
… this frames page columns
14
This code produces… <HTML> <HEAD>
<TITLE>Andrews High School Class of ’90</TITLE> </HEAD> <FRAMESET ROWS=“30%, 70%” FRAMEBORDER=“NO”> <FRAME SRC=“header.htm” SCROLLING=“NO”> <FRAMESET COLS=“25%,75%”> <FRAME SRC=“menu.htm” SCROLLING=“NO”> <FRAME SRC=“home.htm” NAME=“win-main”> </FRAMESET> </HTML>
15
… this frames page no border
16
Planning and Laying Out Frames
Sketch the frame structure on paper before writing the HTML code two rows two columns
17
Start Notepad
18
Enter Initial HTML Tags
19
sizes of rows as a percentage of the screen
Setting Frame Rows Use the ROWS attribute in the <FRAMESET> tag to set the number and sizes of rows <FRAMESET ROWS=“30%, 70%”> sizes of rows as a percentage of the screen
20
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
21
Enter the FRAMESET tag on line 6 of your document
Setting Frame Rows Enter the FRAMESET tag on line 6 of your document first row is 30% high second row is 70% high
22
Identifying the Header Content
The frame in the first row will display the header Web page A <FRAME> tag must define each frame in the frame definition file Use the SRC attribute to identify the Web page that will display in the frame You will turn off scrolling because the header can display without having to scroll
23
Identifying the Header Content
Enter the FRAME tag on line 7 of your document Web page that displays in first frame scrolling turned off for first frame
24
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 <FRAMESET> tag
25
Enter the FRAMESET tag on line 9 of your document
Setting Frame Columns Enter the FRAMESET tag on line 9 of your document first column is 25% wide second column is 75% wide
26
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
27
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
28
Identifying the Column Content
Web page menu.htm displays in a second frame Web page home.htm displays in a third frame Name of third frame; other Web pages can use as a target Enter the FRAME tags on lines 10 and 11 of your document
29
Enter the /FRAMESET tags on lines 13 and 14 of your document
Ending the Framesets You must enter a </FRAMESET> tag for each <FRAMESET> tag begin frameset 1 begin frameset 2 end frameset 1 end frameset 2 Enter the /FRAMESET tags on lines 13 and 14 of your document
30
Saving the HTML File Save the HTML file on the HTML Data Disk with framedef.htm as the file name file name
31
Creating the Header Page
The header frame always displays on the AHS Web site The image (screagle.gif) that will go in the header is contained on the HTML Data Disk
32
Entering Initial HTML Tags
Select New from the File menu Enter the initial HTML tags, as usual, and type AHS Header Frame as the title Make the background color navy: <BODY BGCOLOR=“NAVY”> Press ENTER twice Click the blank line (line 6)
33
Entering Initial HTML Tags
background color
34
Adding an Image and a Heading
Create a one-row borderless table that contains the image and heading text Enter this HTML code starting on line 7
35
Saving the HTML File Save the HTML file on the HTML Data Disk with header.htm as the file name file name
36
Entering Initial HTML Tags
Select New from the File menu Enter the initial HTML tags, as usual, and type AHS Menu Frame as the title Set the colors of the background, body text, and the links by entering the following tag: <BODY BGCOLOR=“#FFCC00” LINK=“NAVY” VLINK=“NAVY” ALINK=“NAVY”>
37
Entering Initial HTML Tags
Press the ENTER key twice Click the blank line (line 7)
38
Adding Hypertext References and Targets
Enter this HTML code starting on line 7 to create the navigational links:
39
Adding Hypertext References and Targets
The target attribute tells the browser in which frame to open the link
40
Saving the HTML File Save the HTML file on the HTML Data Disk with menu.htm as the file name file name
41
<BODY LINK=“RED” VLINK=“RED” ALINK=“RED”>
Creating the Home Page Select New from the File menu Enter the initial HTML tags, as usual, and type AHS Home Frame as the title Set the color of links to red: <BODY LINK=“RED” VLINK=“RED” ALINK=“RED”> Press ENTER twice Click the blank line (line 6)
42
Creating the Home Page Enter this HTML code starting on line 7 to create the navigational links:
43
Saving the HTML File Save the HTML file on the HTML Data Disk with home.htm as the file name file name
44
Viewing and Printing the HTML Files Using your Browser
Start your browser Type a:\framedef.htm in the address box and then press the ENTER key The three Web pages created in this project display on the Web site home page
45
Viewing and Printing the HTML Files Using your Browser
frame 1 header.htm frame 3 home.htm frame 2 menu.htm
46
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
47
Viewing and Printing the HTML Files Using your Browser
Click the Print button on the Standard Buttons toolbar
48
Testing the Links Click the Reunion News link on the menu.htm frame
Click all other links in the frame, ending with Home
49
Printing all HTML Files
Click the home.htm button on the Standard taskbar Select Print from the File menu Repeat the first two steps for the framedef.htm, header.htm, and menu.htm files Close Notepad and close your browser
51
Advanced Frame Options
Using NORESIZE By default, users may resize frames unless you specify the NORESIZE attribute in the <FRAME> tag Examples: <FRAME SRC=“header.htm” SCROLLING=“NO” NORESIZE> <FRAME SRC=“menu.htm” NORESIZE> <FRAME SRC=“home.htm” NAME=“win-main” NORESIZE>
52
Designing a Four-Frame Structure
A four frame structure might work for this Web site design:
53
Designing a Four-Frame Structure
<HTML> <HEAD> <TITLE>Andrews High School Class of ’90</TITLE> </HEAD> <FRAMESET ROWS=“30%,70%”> <FRAMESET COLS=“25%,75%”> <FRAME SRC=“logo4.htm” SCROLLING=“NO”> <FRAME SRC=“header4.htm” SCROLLING=“NO”> </FRAMESET> <FRAME SRC=“menu.htm” SCROLLING=“NO”> <FRAME SRC=“home.htm” NAME=“win-main”> </HTML>
54
Summary Define terms related to frames
Describe the steps used to design a frame structure Plan and lay out frameset Create a frame definition file Use the <FRAMESET> tag Use the <FRAME> tag Change frame scrolling options
55
Summary Name a frame content target
Identify Web pages to display at start-up Set frame rows Set frame columns Create a header page with an image and text Create a navigation page Create a home page
56
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
57
What You Should Know
58
Project 5 Complete
Similar presentations
