1 / 44

Chapter 6

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

marlo
Download Presentation

Chapter 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. Chapter 6 Using Framesin a Web Site

  2. Chapter Objectives • Defineterms related to frames • Describe the steps used to design a framestructure • Plan and lay out a frameset • Create a framedefinitionfile that defines threeframes • Use the <frameset> tag Chapter 6: Using Frames in a Web Site

  3. Chapter Objectives • Use the <frame> tag • Changeframescrollingoptions • Name a framecontenttarget • IdentifyWebpages to display at startup • Setframerows and columns Chapter 6: Using Frames in a Web Site

  4. Chapter Objectives • Create a navigationmenupage with textlinks • Create a homepage Chapter 6: Using Frames in a Web Site

  5. Introduction • Frame – rectangular area of a Web page • Essentially a window in which a separate Web page can be displayed • Frames allow several Web pages at one time in a single browser window • Each frame displays a different, individual Web page • Each is capable of interacting with other Web pages

  6. Using Frames • Frames can be used: • Allow user to view more than on page at a time • Create a navigationmenu, as a replacement for menulists and menubarobjects • To display headers, navigationmenus, or other information that need to remain on the screen as otherparts of the web page change

  7. Using Frames • To use frames you must: • Create a framedefinition file to define the layout of frames • Addframesettags to define the columns and rows of frames • Define other frame attributes, such as borders, margins, and scrolling

  8. Creating a Frame Definition File • A frame definition filedefines the layout of the frames in a Web site and specifies the Web page contents of eachframe • A frameset is used to define the layout of the frames that are displayed Chapter 6: Using Frames in a Web Site

  9. Creating a Frame Definition File Chapter 6: Using Frames in a Web Site

  10. Frame Tag Attributes Chapter 6: Using Frames in a Web Site

  11. Defining Columns and Rows in a Frameset <frameset cols=”22%,78%”> <frame src=”menu.html” title=”menu” name=”menu” frameborder=”0” /> <frame src=”home.html” title=”win-main” name=”win-main” frameborder=”0” /> </frameset> Createsframeset with two columns <frameset rows=”30%,70%”> <frame src=”menu2.html”/> <frame src=”home2.html” name=”win-main”/> </frameset> Createsframeset with two rows

  12. Defining Frame Attributes • frameborder attribute – defines the border that separates frames • 1 – turns attribute on • 0 – turns attribute off • Browser automatically insertsfivepixels of space to separate the frames (can be changed) • marginwidth attribute – lets you change the margin on the left and/or right of a frame • marginheight attribute – lets you change the marginabove and below a document within a frame • Specify size of margin in number of pixels

  13. Defining Frame Attributes • scrolling attribute – instructs the browser that scroll bars should not be displayed • turning off scrolling prevents user from being able to scroll the page • Note: To turn off scroll bars, the <frame /> tag must include the scrolling=“no” attribute and value • noresize attribute – instructs the browser that user can not resize the frames window size by dragging its borders • “noresize” setting prevents user from being able to resize the frame • Note: To turn off resizing, the <frame /> tag must include the noresize=“noresize” attribute and value

  14. Planning and Laying Out Frames • The most important step in creating an effective frame structure is planning and layingout a good frame design. • Sketching frame structure on paperbeforewritingHTML code • Saves time when determining which HTML <frameset> and <frame/> tags and attributes to use • Once the structure is on paper, the number of rows and columns required, as well as whether scrolling is needed, is more apparent

  15. Creating a Frame Definition File • First step in creating the Web page is to code the frame definition file using HTML tags. • Noframes tag – used to create alternative text that appears in lieu of frames for browsers that do not support frames • Use <noframes> tag after the last </frameset> tag • End this section of HTML code with </noframes> tag

  16. Noframes Example noframesHTML tag noframesclosing tag

  17. Entering Initial HTML Tags to Define the Web Page Structure Note difference – useof frameset type ratherthan transitional type No <body> or</body> tagswith framesets Chapter 6: Using Frames in a Web Site 17

  18. Defining the Frameset Columns and Rows • Define the frame structure – number of columns and rows of the display area • Frame definition file (framedef.html) used in this chapter’s web site • Site includes two columns that divide screen vertically • When framedef.html file opened in browser navigation menu (menu.html) appears in left frame • Content of left frame remains constant • Content of right framechanges

  19. Defining Columns and Rows in the Frameset Start frameset tag withtwo columns set at 22%and 78% respectively Chapter 6: Using Frames in a Web Site 19

  20. Specifying Attributes of the Menu and Main Frame • Add specific attributes of each frame • <frame /> tag used to define each frame in a frame definition file • Src attribute of <frame /> tag used to identify the Web page that will appear in this frame

  21. Specifying Attributes of the Menu Frame Title and nameof frame set to “menu” No frameborderon this frame First frame (first column) willdisplay menu.html file: this framewill always display menu.html filefor navigation Chapter 6: Using Frames in a Web Site 21

  22. Specifying Attributes of the Main Frame No frameborderon this frame Title and name of frame setto “win-main” – this is mainframe in which all other content will display Second frame (second column)will display home.html file atstartup; this frame will changewhen links are clicked Chapter 6: Using Frames in a Web Site 22

  23. Frames General Code • Type<frameset cols=”22%,78%”> to define the two columns • Type<frame src=”menu.html” title=”menu” name=”menu” frameborder=”0” /> • Type<frame src=”home.html” title=”win-main” name=”win-main” frameborder=”0” /> • Type</frameset> Chapter 6: Using Frames in a Web Site

  24. Ending the Framesets Two columnscreated Turnframebordersoff with 0 Start and end frameset target called win-main whereeach Web pageis displayed menu.html will be displayed in first frame in left column; home.html will be displayed in second frame in right column Chapter 6: Using Frames in a Web Site

  25. Saving, Validating, and Printing the HTML File • Click the Save button in the Save As dialog box to save the file on the USB flash drive with the file name framedef.html • Validate the Web page • Clickframedef.html – Notepad on the taskbar and print the HTML file Chapter 6: Using Frames in a Web Site

  26. Saving, Validating, and Printing the HTML File Chapter 6: Using Frames in a Web Site

  27. Creating the Navigation Menu Page • The menu frame will always display the menuWebpage (menu.html) in the leftframeset. • Page contains the logo together with graphic and textlinks that are used as a navigationmenu. • Page includes links to display various pages in the mainframe (rightmostframeset) Chapter 6: Using Frames in a Web Site

  28. Adding Links with Targets to the Menu Page Chapter 6: Using Frames in a Web Site

  29. Adding Links with Targets to the Menu Page When Necklaces link is clicked(either text or image), browserwill display necklace.html Webpage in win-main target frame Text link fornecklace.htmlWeb page Image link fornecklace.htmlWeb pageafter break line This table data cell containsjewelslogo.gif image that willdisplay home.html file in targetwin-main when image link is clicked Image link fororderform.htmlWeb pageafter break line When Orders link is clicked either text or image), browser will displayorderform.html Web page in win-main target frame same for Bracelets andWatches text and image links (willdisplay bracelet.html and watch.html) Chapter 6: Using Frames in a Web Site

  30. Adding an E-mail Link • Type <p><em><font size=”-1”>E-mail questions and comments to as the code Type <a href=”mailto: janasjewels@isp.com”>janasjewels @isp.com</a>.</font></em></p> to complete the e-mail link Chapter 6: Using Frames in a Web Site

  31. Adding an E-mail Link Email link Chapter 6: Using Frames in a Web Site

  32. Saving, Validating, and Printing the HTML File Chapter 6: Using Frames in a Web Site

  33. Creating the Home Page Copying and Pasting the HTML Code to a New File Copy/pasted HTMLcode from menu.html file New title isHome Page Chapter 6: Using Frames in a Web Site

  34. Creating the Home Page Image of jewelrycollage to be displayedon home page Horizontal space(10 pixels) addedto separateimage from text Two paragraphsof text withlarger font (+1) Chapter 6: Using Frames in a Web Site

  35. Saving, Validating, and Printing the HTML File Chapter 6: Using Frames in a Web Site

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

  37. Testing and Printing the Links • Click the Necklaces link on the navigationmenu and ensure that the Necklaces page shows in the mainframe • Click the drop-downarrow on the Printicon on the Commandbar and clickPrint. Click the Optionstab in the Print dialog box, clickAslaidout on screen, and then click the Printbutton to print a copy of the necklace.html Web page as laid out in the browser • Click the Braceletslink on the navigationmenu and ensure that the Braceletspageshows in the mainframe. If you want a copy of the Web page as shown in the browser, print the Web page using the As laid out on screen option Chapter 6: Using Frames in a Web Site

  38. Testing and Printing the Links • Click the Watches link on the navigationmenu and ensure that the Watches page shows in the mainframe. If you want a copy of the Web page as shown in the browser, print the Web page using the As laid out on screen option • Click the Orders link on the navigation menu to ensure that the order form appears in the mainframe. If you want a copy of the Web page as shown in the browser, print the Web page using the As laid out on screen option • Click the Home link on the navigationmenu by clicking the Jana’sJewelslogo • Click the e-mail link and verify that the New Message window shows janasjewels@isp.com as the address. Click the Closebutton to close the New Message window and quit the e-mail program Chapter 6: Using Frames in a Web Site

  39. Testing and Printing the Links Chapter 6: Using Frames in a Web Site

  40. Chapter Summary • Defineterms related to frames • Describe the steps used to design a framestructure • Plan and layout a frameset • Create a framedefinition file that defines three frames • Use the <frameset> tag Chapter 6: Using Frames in a Web Site

  41. Chapter Summary • Use the <frame> tag • Change frame scrolling options • Name a frame content target • Identify Web pages to display at startup • Set frame rows and columns Chapter 6: Using Frames in a Web Site

  42. Chapter Summary • Create a navigationmenu page with textlinks • Create a homepage Chapter 6: Using Frames in a Web Site

  43. Homework # 11 In the Lab 2 page HTML 295-296 Bright Idea, LLC Web Site SeeINF 186 Computer Assignment 11 Web page for details, hints, and requirements for the assignment Project 4: Creating Tables in a Web Site 43

  44. Chapter 6 Complete Using Framesin a Web Site

More Related