Post on 12-Aug-2020
transcript
Chapter 6
Using Framesin a Web Site
Chapter 6: Using Frames in a Web Site 2
Chapter Objectives
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
Chapter 6: Using Frames in a Web Site 3
Chapter Objectives
Use the <frame> tagChange frame scrolling optionsName a frame content targetIdentify Web pages to display at startupSet frame rows and columns
Chapter 6: Using Frames in a Web Site 4
Chapter Objectives
Create a navigation menu page with text linksCreate a home page
Chapter 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 frameA frameset is used to define the layout of the frames that are displayed
Chapter 6: Using Frames in a Web Site 6
Creating a Frame Definition File
Chapter 6: Using Frames in a Web Site 7
Frame Tag Attributes
Chapter 6: Using Frames in a Web Site 8
Entering Initial HTML Tags to Define the Web Page Structure
Open a new file in Notepad and enter the HTML code shown in Table 6–3. Press ENTER at the end of each line of code. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, and then continue typingCompare what you typed to Figure 6–10. If you notice errors, use your mouse pointer or ARROW keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error.Position the insertion point on the blank line two lines below the </head> tag and two lines above the </html> tag (line 11)
Entering Initial HTML Tags to Define the Web Page Structure
Chapter 6: Using Frames in a Web Site 9
Chapter 6: Using Frames in a Web Site 10
Defining Columns and Rows in the Frameset
If necessary, click line 11Type <frameset cols=”22%,78%”> to define the two columns and then press the ENTER key twice
Chapter 6: Using Frames in a Web Site 11
Defining Columns and Rows in the Frameset
Chapter 6: Using Frames in a Web Site 12
Specifying Attributes of the Menu Frame
If necessary, click line 13Type <frame src=”menu.html”title=”menu” name=”menu”frameborder=”0” /> and then press the ENTER key to insert the HTML code for the menu frame
Chapter 6: Using Frames in a Web Site 13
Specifying Attributes of the Menu Frame
Chapter 6: Using Frames in a Web Site 14
Specifying Attributes of the Main Frame
If necessary, click line 14Type <frame src=”home.html”title=”win-main” name=”win-main”frameborder=”0” /> and then press the ENTER key twice to insert the HTML code for the main frame
Chapter 6: Using Frames in a Web Site 15
Specifying Attributes of the Main Frame
Chapter 6: Using Frames in a Web Site 16
Ending the Framesets
If necessary, click line 16Type </frameset> as the tag and then press the ENTER key
Chapter 6: Using Frames in a Web Site 17
Ending the Framesets
Chapter 6: Using Frames in a Web Site 18
Saving, Validating, and Printing the HTML File
With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad menu bar and then click Save As. Type framedef.html in the File name text box (do not press ENTER)If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayedClick Computer in the Favorite Links section to display a list of available drivesIf necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives.If necessary, open the Chapter06\ChapterFiles folder
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.htmlValidate the Web pageClick framedef.html – Notepad on the taskbar and print the HTML file
Chapter 6: Using Frames in a Web Site 19
Chapter 6: Using Frames in a Web Site 20
Saving, Validating, and Printing the HTML File
Chapter 6: Using Frames in a Web Site 21
Starting a New Notepad Document and Entering Initial HTML Tags
Click File on the Notepad menu bar and then click NewEnter the HTML code in Table 6–4 to enter the initial tagsPosition the insertion point on line 12
Starting a New Notepad Document and Entering Initial HTML Tags
Chapter 6: Using Frames in a Web Site 22
Chapter 6: Using Frames in a Web Site 23
Adding Links with Targets to the Menu Page
Chapter 6: Using Frames in a Web Site 24
Adding Links with Targets to the Menu Page
If necessary, click line 12Enter the HTML code shown in Table 6–5, and then press the ENTER key twice after the last line
Adding Links with Targets to the Menu Page
Chapter 6: Using Frames in a Web Site 25
Adding an E-mail Link
If necessary, click line 33Type <p><em><font size=”-1”>E-mail questions and comments to as the code and press the ENTER keyType <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 26
Adding an E-mail Link
Chapter 6: Using Frames in a Web Site 27
Saving, Validating, and Printing the HTML File
Save the file in the Chapter06\ChapterFiles folder on your USB drive with the file name menu.htmlValidate the Web pagePrint the HTML file
Chapter 6: Using Frames in a Web Site 28
Saving, Validating, and Printing the HTML File
Chapter 6: Using Frames in a Web Site 29
Copying and Pasting the HTML Code to a New File
Click menu.html – Notepad on the taskbar, if necessaryClick immediately to the left of the < in the <!DOCTYPE html tag on line 1Drag through the <body> tag on line 10 to highlight lines 1 through 10Press CTRL+C to copy the selected lines to the ClipboardClick File on the Notepad menu bar and then click NewPress CTRL+V to paste the contents from the Clipboard into a new file
Chapter 6: Using Frames in a Web Site 30
Copying and Pasting the HTML Code to a New File
Press the ENTER key three timesType </body> and then press the ENTER keyType </html> and then press the ENTER keyChange the title on line 8 to say Home page (rather than Menu)Click line 12 to position the insertion point
Chapter 6: Using Frames in a Web Site 31
Copying and Pasting the HTML Code to a New File
Chapter 6: Using Frames in a Web Site 32
Chapter 6: Using Frames in a Web Site 33
Creating the Home Page
If necessary, click line 12Enter the HTML code shown in Table 6–6, pressing the ENTER key after each line
Chapter 6: Using Frames in a Web Site 34
Creating the Home Page
Chapter 6: Using Frames in a Web Site 35
Saving, Validating, and Printing the HTML File
Save the file in the Chapter06\ChapterFiles folder of your USB drive as home.htmlValidate the Web pagePrint the HTML file
Chapter 6: Using Frames in a Web Site 36
Saving, Validating, and Printing the HTML File
Chapter 6: Using Frames in a Web Site 37
Viewing and Printing the Frame Definition File Using a Browser
Start your browserType G:\Chapter06\ChapterFiles\framedef.html in the Address box and then press the ENTER key to view the two Web pages defined in the frame definition file and verify that the correct pages are displayed at startupClick the drop-down arrow on the Print icon on the Command bar, and then click PrintClick the Options tab in the Print dialog boxClick As laid out on screen to select it, and then click the Print button to print the frames as laid out on screen
Viewing and Printing the Frame Definition File Using a Browser
Chapter 6: Using Frames in a Web Site 38
Chapter 6: Using Frames in a Web Site 39
Testing and Printing the Links
Click the Necklaces link on the navigation menu and ensure that the Necklaces page shows in the main frameClick the drop-down arrow on the Print icon on the Command bar and click Print. Click the Options tab in the Print dialog box, click As laid out on screen, and then click the Print button to print a copy of the necklace.html Web page as laid out in the browserClick the Bracelets link on the navigation menu and ensure that the Bracelets page shows in the main frame. 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 40
Testing and Printing the LinksClick the Watches link on the navigation menu and ensure that the Watches page shows in the main frame. 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 optionClick the Orders link on the navigation menu to ensure that the order form appears in the main frame. 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 optionClick the Home link on the navigation menu by clicking the Jana’s Jewels logoClick the e-mail link and verify that the New Message window shows janasjewels@isp.com as the address. Click the Close button to close the New Message window and quit the e-mail program
Testing and Printing the Links
Chapter 6: Using Frames in a Web Site 41
Chapter 6: Using Frames in a Web Site 42
Quitting Notepad and a Browser
Click the Close button on the browser title barClick the Close button on the Notepad window title bar
Chapter 6: Using Frames in a Web Site 43
Chapter Summary
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
Chapter 6: Using Frames in a Web Site 44
Chapter Summary
Use the <frame> tagChange frame scrolling optionsName a frame content targetIdentify Web pages to display at startupSet frame rows and columns
Chapter 6: Using Frames in a Web Site 45
Chapter Summary
Create a navigation menu page with text linksCreate a home page
Chapter 6 Notes for Quizzes. A frameset is used to define the layout of the frames that are displayed. The <frameset> attribute call cols indicates the number of columns. The default value for printing a Web page with frames is printing only the selected frame.If you use an asterisk, the browser determines how much space isnecessary for the frame based on the information you include in the attribute. When the frame width is defined in pixels, the size of the frame stays fixed when the browser window is resized. There must be a </frameset> tag to close every <frameset> tag. The sizes of the margins of a window are specified as a certain number of pixels. Scroll bars allow a user to scroll through a Web page when the page exceeds the size of the frame area. With frames, a Home page is one part of a frame structure. You should include a text link with every graphic link.
Chapter 6 Notes for Quizzes.A frame is a rectangular area of a Web page in which a separate Web page can be displayed. In the analysis phase of the Web Development Life Cycle, you should analyze what content to include on the Web page. The start <noframes> and end </noframes> tags are used to specify alternative text. The frame tag attribute called src indicates the Web page or other file to be displayed in the frame.Within the <frameset> tag you specify the number of columns and rows in the display area with the cols and rows attributes. The frameborder attribute defines the border that separates frames. If the border is turned off, the browser automatically inserts five pixels of space to separate the frames. It helps to write code, save it, and then view it in a browser to see the effect.You do use the <body> tags when creating a Web page. The title “win-main” is unique naming convention not only used when naming frames.
Chapter 6 Notes for Quizzes.HTML tags define the overall structure of the Web pageA frameset is used to define the layout of the frames displayed.The attribute Frameborder turns frame borders on or offThe attribute marginheight adjusts the margins above and below a document within a frame. The home page displays at startup in the main target frame.The purpose of the Web site is determined in the planning phase of the Web Development Life Cycle. If any links do not work correctly, return to notepad to modify the HTML code. One common way of providing an easy way for your visitors to return to the home page is to make the logo a link back to the home pageUsing a percentage when specifying a frame column or row size has an advantage in that the sizes of the row and column will change when the browser window is resized The noresize attribute can be used to prevent web site visitors from resizing the frame.
Chapter 6 Complete
Using Framesin a Web Site