Project 06

1,321 views

Published on

HTML Book PPT

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,321
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Project 06

    1. 1. Project 6 Using Frames in a Web Site
    2. 2. Project Objectives <ul><li>Define terms related to frames </li></ul><ul><li>Describe the steps used to design a frame structure </li></ul><ul><li>Plan and lay out a frameset </li></ul><ul><li>Create a frame definition file that defines three frames </li></ul><ul><li>Use the <frameset> tag </li></ul>
    3. 3. Project Objectives <ul><li>Use the <frame> tag </li></ul><ul><li>Change frame scrolling options </li></ul><ul><li>Name a frame content target </li></ul><ul><li>Identify Web pages to display at startup </li></ul><ul><li>Set frame rows </li></ul>
    4. 4. Project Objectives <ul><li>Set frame columns </li></ul><ul><li>Create a header page with text </li></ul><ul><li>Create a navigation menu page with text links </li></ul><ul><li>Create a home page </li></ul>
    5. 5. Creating a Frame Definition File <ul><li>A frame definition file defines the layout of the frames in a Web site and specifies the Web page contents of each frame </li></ul><ul><li>A frameset is used to define the layout of the frames that are displayed </li></ul>
    6. 6. Creating a Frame Definition File
    7. 7. Frame Tag Attributes
    8. 8. Starting Notepad and Entering Initial HTML Tags
    9. 9. Defining Columns and Rows in the Frameset <ul><li>If necessary, click line 10 and then press the ENTER key twice </li></ul><ul><li>Type <frameset cols=“25%,75%”> and then press the ENTER key </li></ul><ul><li>Type <frameset rows=“18%,82%”> and then press the ENTER key </li></ul>
    10. 10. Defining Columns and Rows in the Frameset
    11. 11. Specifying Attributes of the Header and Menu Frames <ul><li>If necessary, click line 13 </li></ul><ul><li>Type <frame src=&quot;header.htm“ title=“header” name=“header” scrolling=&quot;no“ frameborder=&quot;no&quot;> and then press the ENTER key </li></ul><ul><li>Type <frame src=&quot;menu.htm“ title=“menu” name=“menu” scrolling=&quot;no“ frameborder=&quot;no&quot;> and then press the ENTER key twice </li></ul>
    12. 12. Specifying Attributes of the Header and Menu Frames
    13. 13. Specifying Attributes of the Main Frame <ul><li>If necessary, click line 16 </li></ul><ul><li>Type <frame src=&quot;home.htm“ title=“win-main” name=&quot;win-main“ frameborder=&quot;no&quot;> and then press the ENTER key </li></ul>
    14. 14. Specifying Attributes of the Main Frame
    15. 15. Ending the Framesets <ul><li>If necessary, click line 17 </li></ul><ul><li>Type </frameset> as the tag </li></ul><ul><li>Click line 15 to position the insertion point </li></ul><ul><li>Type </frameset> and then press the ENTER key </li></ul>
    16. 16. Ending the Framesets
    17. 17. Saving the HTML File <ul><li>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 </li></ul><ul><li>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 </li></ul>
    18. 18. Saving the HTML File
    19. 19. Creating the Header Page <ul><li>Click File on the menu bar and then click New on the File menu </li></ul><ul><li>Enter the HTML code as shown in Table 6-4 on page HTM 269 </li></ul><ul><li>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. </li></ul><ul><li>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 </li></ul>
    20. 20. Creating the Header Page
    21. 21. Starting a New Notepad Document and Entering Initial HTML Tags
    22. 22. Adding Links with Targets to the Menu Page and Saving the HTML File <ul><li>Enter the following HTML beginning on line 11 </li></ul>
    23. 23. Adding Links with Targets to the Menu Page and Saving the HTML File <ul><li>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 </li></ul><ul><li>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 </li></ul>
    24. 24. Creating the Home Page <ul><li>Click File on the menu bar and then click New on the File menu </li></ul><ul><li>Enter the HTML code as shown in Table 6-7 on page HTM 274 </li></ul><ul><li>Position the insertion point on the second blank line (line 11) </li></ul>
    25. 25. Creating the Home Page <ul><li>Type <img src=&quot;thomaswaterfall.jpg“ width=“309” height=“384” /> as the tag </li></ul><ul><li>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 </li></ul><ul><li>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 </li></ul>
    26. 26. Creating the Home Page
    27. 27. Viewing and Printing the Frame Definition File Using a Browser <ul><li>Start your browser </li></ul><ul><li>Type G:Project06ProjectFiles framedef.htm in the Address box and then press the ENTER key </li></ul><ul><li>Click File on the menu bar and then click Print on the File menu </li></ul><ul><li>Click the Options tab in the Print dialog box </li></ul><ul><li>Click As laid out on screen to select it and then click the Print button </li></ul>
    28. 28. Viewing and Printing the Frame Definition File Using a Browser
    29. 29. Testing the Links <ul><li>Click the Cross Hatch link on the navigation menu </li></ul><ul><li>Click the Full Color link on the navigation menu </li></ul><ul><li>Click the Ink Wash link on the navigation menu </li></ul>
    30. 30. Testing the Links <ul><li>Click the Order Form link on the navigation menu </li></ul><ul><li>Click the Home link on the navigation menu by clicking the logo </li></ul><ul><li>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 </li></ul>
    31. 31. Printing All HTML Files <ul><li>Click the Notepad button on the taskbar </li></ul><ul><li>Click File on the menu bar and then click Print. Click Print in the Print dialog box to print the home.htm file </li></ul><ul><li>Using Notepad, open the file, framedef.htm, from the Project06ProjectFiles folder in the HTML Data Files </li></ul><ul><li>Click File on the menu bar and then click Print. Click Print in the Print dialog box to print the file framedef.htm </li></ul><ul><li>Repeat the third and fourth steps to open and print the header.htm and menu.htm files </li></ul>
    32. 32. Quitting Notepad and a Browser <ul><li>Click the Close button on the browser title bar </li></ul><ul><li>Click the Close button on the Notepad window title bar </li></ul>
    33. 33. Project Summary <ul><li>Define terms related to frames </li></ul><ul><li>Describe the steps used to design a frame structure </li></ul><ul><li>Plan and lay out a frameset </li></ul><ul><li>Create a frame definition file that defines three frames </li></ul><ul><li>Use the <frameset> tag </li></ul>
    34. 34. Project Summary <ul><li>Use the <frame> tag </li></ul><ul><li>Change frame scrolling options </li></ul><ul><li>Name a frame content target </li></ul><ul><li>Identify Web pages to display at startup </li></ul><ul><li>Set frame rows </li></ul>
    35. 35. Project Summary <ul><li>Set frame columns </li></ul><ul><li>Create a header page with text </li></ul><ul><li>Create a navigation menu page with text links </li></ul><ul><li>Create a home page </li></ul>
    36. 36. Project 6 Complete Using Frames in a Web Site

    ×