1 / 37

Project 6

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

drake
Download Presentation

Project 6

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Project 6 Using Framesin 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 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

  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

More Related