project 06

HTMLConcepts and Techniques

Fourth Edition

Project 6

Using Framesin 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


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 Objectives

• Set frame columns• Create a header page with text• Create a navigation menu page with text links• Create a home page


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


Creating a Frame Definition File


Frame Tag Attributes


Starting Notepad and Entering Initial HTML Tags


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


Defining Columns and Rows in the Frameset


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


Specifying Attributes of the Header and Menu Frames


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


Specifying Attributes of the Main Frame


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


Ending the Framesets


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


Saving the HTML File


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.



Creating the Header Page


Starting a New Notepad Document and Entering Initial HTML Tags


Adding Links with Targets to the Menu Page and Saving the HTML File

• Enter the following HTML beginning on line 11


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



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)



• 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



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


Viewing and Printing the Frame Definition File Using a Browser


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


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


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


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 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 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 Summary

• Set frame columns• Create a header page with text• Create a navigation menu page with text links• Create a home page

HTMLConcepts and Techniques

Fourth Edition

Project 6 Complete

Using Framesin a Web Site

project 06

Technology

file menu

frame definition file

menu bar

menu frames

navigation menu page

print dialog box

print button

text box