Download presentation
Presentation is loading. Please wait.
1
Using Frames in a Web Site
Project 6 Using Frames in a Web Site
2
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
3
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
4
Project Objectives Set frame columns Create a header page with text
Create a navigation menu page with text links Create a home page
5
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
6
Creating a Frame Definition File
7
Frame Tag Attributes
8
Starting Notepad and Entering Initial HTML Tags
9
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
10
Defining Columns and Rows in the Frameset
11
Identifying Attributes of the Header and Menu Frames
If necessary, click line 13 Type <frame src="header.htm“ scrolling="no“ frameborder="no"> and then press the ENTER key Type <frame src="menu.htm“ scrolling="no“ frameborder="no"> and then press the ENTER key twice
12
Identifying Attributes of the Header and Menu Frames
13
Identifying Attributes of the Main Frame
If necessary, click line 16 Type <frame src="home.htm“ name="win-main“ frameborder="no"> and then press the ENTER key
14
Identifying Attributes of the Main Frame
15
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
16
Ending the Framesets
17
Saving the HTML File With a floppy disk in drive A, click File on the menu bar and then click Save As. Type framedef.htm in the File name text box If necessary, click 3 1⁄2 Floppy (A:) 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
18
Saving the HTML File
19
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 Position the insertion point on the second blank line (after the <body> tag) on line 11 Type <font face="broadway“ color="navy" size="+2">BILL THOMAS on line 11 and then press the ENTER key
20
Creating the Header Page
Type <br />ILLUSTRATIONS </font> as the tag With a floppy disk in drive A, click File on the menu bar and then click Save As. Type header.htm in the File name text box If necessary, click 3 1⁄2 Floppy (A:) 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
21
Creating the Header Page
22
Starting a New Document and Entering Initial HTML Tags
23
Adding Links with Targets to the Menu Page and Saving the HTML File
Enter the following HTML beginning on line 11
24
Adding Links with Targets to the Menu Page and Saving the HTML File
With a floppy disk in drive A, click File on the menu bar and then click Save As. Type menu.htm in the File name text box If necessary, click 3 1⁄2 Floppy (A:) 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
25
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 273 Position the insertion point on the second blank line (line 11)
26
Creating the Home Page Type <img src="thomaswaterfall.jpg"> as the tag With a floppy disk in drive A, click File on the menu bar and then click Save As. Type home.htm in the File name text box If necessary, click 3 1⁄2 Floppy (A:) 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
27
Creating the Home Page
28
Viewing and Printing the Frame Definition File Using a Browser
Start your browser Type a:\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
29
Viewing and Printing the Frame Definition File Using a Browser
30
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
31
Testing the Links Click the Order Form link on the navigation menu
Click the Home link on the navigation menu Click the link and verify that the New Message window shows as the address. Click the Close button to close the New Message window and quit the program
32
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 on the HTML Data Disk 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
33
Quitting Notepad and a Browser
Click the Close button on the browser title bar Click the Close button on the Notepad window title bar
34
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
35
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
36
Project Summary Set frame columns Create a header page with text
Create a navigation menu page with text links Create a home page
37
Project 6 Complete
Similar presentations
