1. HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site

2. 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 tag

3. Project 6: Using Frames in a Web Site 3 Project Objectives Use the tag Change frame scrolling options Name a frame content target Identify Web pages to display at startup Set frame rows

4. Project 6: Using Frames in a Web Site 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. Project 6: Using Frames in a Web Site 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. Project 6: Using Frames in a Web Site 6 Creating a Frame Definition File

7. Project 6: Using Frames in a Web Site 7 Frame Tag Attributes

8. Project 6: Using Frames in a Web Site 8 Starting Notepad and Entering Initial HTML Tags

9. Project 6: Using Frames in a Web Site 9 Defining Columns and Rows in the Frameset If necessary, click line 10 and then press the ENTER key twice Type and then press the ENTER key

10. Project 6: Using Frames in a Web Site 10 Defining Columns and Rows in the Frameset

11. Project 6: Using Frames in a Web Site 11 Specifying Attributes of the Header and Menu Frames If necessary, click line 13 Type and then press the ENTER key Type and then press the ENTER key twice

12. Project 6: Using Frames in a Web Site 12 Specifying Attributes of the Header and Menu Frames

13. Project 6: Using Frames in a Web Site 13 Specifying Attributes of the Main Frame If necessary, click line 16 Type and then press the ENTER key

14. Project 6: Using Frames in a Web Site 14 Specifying Attributes of the Main Frame

15. Project 6: Using Frames in a Web Site 15 Ending the Framesets If necessary, click line 17 Type as the tag Click line 15 to position the insertion point Type and then press the ENTER key

16. Project 6: Using Frames in a Web Site 16 Ending the Framesets

17. Project 6: Using Frames in a Web Site 17 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

18. Project 6: Using Frames in a Web Site 18 Saving the HTML File

19. Project 6: Using Frames in a Web Site 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 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

20. Project 6: Using Frames in a Web Site 20 Creating the Header Page

21. Project 6: Using Frames in a Web Site 21 Starting a New Notepad Document and Entering Initial HTML Tags

22. Project 6: Using Frames in a Web Site 22 Adding Links with Targets to the Menu Page and Saving the HTML File Enter the following HTML beginning on line 11

23. Project 6: Using Frames in a Web Site 23 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 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

24. Project 6: Using Frames in a Web Site 24 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)

25. Project 6: Using Frames in a Web Site 25 Creating the Home Page Type 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

26. Project 6: Using Frames in a Web Site 26 Creating the Home Page

27. Project 6: Using Frames in a Web Site 27 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

28. Project 6: Using Frames in a Web Site 28 Viewing and Printing the Frame Definition File Using a Browser

29. Project 6: Using Frames in a Web Site 29 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

30. Project 6: Using Frames in a Web Site 30 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 billthomas@isp.com as the address. Click the Close button to close the New Message window and quit the e-mail program

31. Project 6: Using Frames in a Web Site 31 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

32. Project 6: Using Frames in a Web Site 32 Quitting Notepad and a Browser Click the Close button on the browser title bar Click the Close button on the Notepad window title bar

33. Project 6: Using Frames in a Web Site 33 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 tag

34. Project 6: Using Frames in a Web Site 34 Project Summary Use the tag Change frame scrolling options Name a frame content target Identify Web pages to display at startup Set frame rows

35. Project 6: Using Frames in a Web Site 35 Project Summary Set frame columns Create a header page with text Create a navigation menu page with text links Create a home page

36. HTML Concepts and Techniques Fourth Edition Project 6 Complete Using Frames in a Web Site