Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2...
-
Upload
logan-phillips -
Category
Documents
-
view
213 -
download
0
Transcript of 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
Project 6: Using Frames in a Web Site3
Use the <frame> tagChange frame scrolling optionsName a frame content targetIdentify Web pages to display at startupSet frame rows
Project Objectives
Project 6: Using Frames in a Web Site4
Set frame columnsCreate a header page with textCreate a navigation menu page with text
linksCreate a home page
Creating a Frame Definition File
Project 6: Using Frames in a Web Site5
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
Project 6: Using Frames in a Web Site6
Frame Tag Attributes
Project 6: Using Frames in a Web Site7
Starting Notepad and Entering Initial HTML Tags
Project 6: Using Frames in a Web Site8
Defining Columns and Rows in the Frameset
Project 6: Using Frames in a Web Site9
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
Project 6: Using Frames in a Web Site10
Specifying Attributes of the Header and Menu Frames
Project 6: Using Frames in a Web Site11
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
Project 6: Using Frames in a Web Site12
Specifying Attributes of the Main Frame
Project 6: Using Frames in a Web Site13
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
Project 6: Using Frames in a Web Site14
Ending the Framesets
Project 6: Using Frames in a Web Site15
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
Project 6: Using Frames in a Web Site16
Saving the HTML File
Project 6: Using Frames in a Web Site17
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
Project 6: Using Frames in a Web Site18
Creating the Header Page
Project 6: Using Frames in a Web Site19
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.
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
Creating the Header Page
Project 6: Using Frames in a Web Site20
Starting a New Notepad Document and Entering Initial HTML Tags
Project 6: Using Frames in a Web Site21
Adding Links with Targets to the Menu Page and Saving the HTML File
Project 6: Using Frames in a Web Site22
Enter the following HTML beginning on line 11
Adding Links with Targets to the Menu Page and Saving the HTML File
Project 6: Using Frames in a Web Site23
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
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
Creating the Home Page
Project 6: Using Frames in a Web Site24
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)
Creating the Home Page
Project 6: Using Frames in a Web Site25
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
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
Creating the Home Page
Project 6: Using Frames in a Web Site26
Viewing and Printing the Frame Definition File Using a Browser
Project 6: Using Frames in a Web Site27
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
Project 6: Using Frames in a Web Site28
Testing the Links
Project 6: Using Frames in a Web Site29
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
Project 6: Using Frames in a Web Site30
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
Project 6: Using Frames in a Web Site31
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
Project 6: Using Frames in a Web Site32
Click the Close button on the browser title bar
Click the Close button on the Notepad window title bar
Project Summary
Project 6: Using Frames in a Web Site33
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
Project 6: Using Frames in a Web Site34
Use the <frame> tagChange frame scrolling optionsName a frame content targetIdentify Web pages to display at startupSet frame rows
Project Summary
Project 6: Using Frames in a Web Site35
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