Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2...

Using Framesin a Web Site

Project 6

Project Objectives

Project 6: Using Frames in a Web Site2

Define terms related to framesDescribe the steps used to design a frame

structurePlan and lay out a framesetCreate a frame definition file that defines

three framesUse the <frameset> tag

Project Objectives


Use the <frame> tagChange frame scrolling optionsName a frame content targetIdentify Web pages to display at startupSet frame rows

Project Objectives


Set frame columnsCreate a header page with textCreate a navigation menu page with text

linksCreate 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 13Type <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 16Type <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 17Type </frameset> as the tagClick line 15 to position the insertion pointType </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 browserType 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 boxClick 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 menuClick 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 taskbarClick 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 framesDescribe the steps used to design a frame

structurePlan and lay out a framesetCreate a frame definition file that defines

three framesUse the <frameset> tag

Project Summary


Use the <frame> tagChange frame scrolling optionsName a frame content targetIdentify Web pages to display at startupSet frame rows

Project Summary


Set frame columnsCreate a header page with textCreate a navigation menu page with text

linksCreate a home page

Using Framesin a Web Site

Project 6 Complete

Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2...

Documents

Transcript of Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2...