49
HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site

Ddpz2613 topic6 frame

Embed Size (px)

Citation preview

Page 1: Ddpz2613 topic6 frame

HTMLConcepts and Techniques

Fifth Edition

Chapter 6

Using Framesin a Web Site

Page 2: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 2

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

Page 3: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 3

Chapter Objectives

• 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• Create a navigation menu page with text links• Create a home page

Page 4: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 4

Introduction

• A frame is a rectangular area of a Web page in which a separate Web page can be displayed.

• Frame allow a user to display several pages at one time in a single browser window.

• Each frame displays a different, individual Web page and capable of interacting with other Web pages

• Web page that include frames look and act differently from the Web pages created in previous projects.

Page 5: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 5

Plan Ahead – General Project Guidelines

1. Plan the Web site

2. Analyze the need.

3. Choose the content for the Web page

4. Determine the layout for the pages and how one page links to another.

5. Create the Web page and links.

6. Test all Web pages within the Web site.

Page 6: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 6

Using Frames

• When frames are used, the browser contain multiple Web page and image files.

• Frame can be used:– To allow view more than one Web page at a time.

– To create a navigation menu

– To display headers, navigation menu and other information

• To used frames, you must:– Create a definition file to define the layout of frames.

– Add frameset tags to define the column and row of frames

– Define other frame attribute, such as borders, margins and scrolling.

Page 7: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 7

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 frame definition file use a combination of three HTML tags and attributes, as shown in Table 6-1

• Table 6-1 Frame Tags

Page 8: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 8

Creating a Frame Definition File

• A frameset is used to define the layout of the frames that are displayed• A frame definition file also contains additional information, specified in

attributes and values. Refer Table 6-2

• Table 6-2 Frame Tag Attributes

Page 9: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 9

Defining Column and Rows in a Frameset

• For each frame, the src attribute is used to define which Web page should be displayed in the frame at startup

• Within the <frameset> tag you specify the number of columns and rows in the display area with the cols and rows atributes

Page 10: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 10

Plan Ahead – Identify what frame layout to use for the Web Pages

• Effectively place the navigation frame – eg. menu bar• Effectively place the main target frame.• Add other frames as necessary• Code the frame definition file

Page 11: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 11

Planning and Laying Out Frames

• The most important step in creating an effective frame structure is planning out a good frame design.

• Sketching the frame structure on paper before writing the HTML code can help save time when determining which HTML <frameset> and <frame> tags and attributes to use.

• Frame layout can be designed in a variety of ways.• The goal and purpose of the Web site is to determine

which layout is approapriate

Page 12: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 12

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 typing

• Compare 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)

Page 13: Ddpz2613 topic6 frame

Entering Initial HTML Tags to Define the Web Page Structure

Chapter 6: Using Frames in a Web Site 13

Page 14: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 14

Defining Columns and Rows in the Frameset

• If necessary, click line 11• Type <frameset cols=”22%,78%”> to define the

two columns and then press the ENTER key twice

Page 15: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 15

Defining Columns and Rows in the Frameset

Page 16: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 16

Specifying Attributes of the Menu Frame

• If necessary, click line 13

• Type <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

Page 17: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 17

Specifying Attributes of the Menu Frame

Page 18: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 18

Specifying Attributes of the Main Frame

• If necessary, click line 14

• Type <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

Page 19: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 19

Specifying Attributes of the Main Frame

Page 20: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 20

Ending the Framesets

• If necessary, click line 16

• Type </frameset> as the tag and then press the ENTER key

Page 21: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 21

Ending the Framesets

Page 22: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 22

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 displayed

• Click Computer in the Favorite Links section to display a list of available drives

• If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives.

• If necessary, open the Chapter06\ChapterFiles folder

Page 23: Ddpz2613 topic6 frame

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

• Click framedef.html – Notepad on the taskbar and print the HTML file

Chapter 6: Using Frames in a Web Site 23

Page 24: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 24

Saving, Validating, and Printing the HTML File

Page 25: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 25

Starting a New Notepad Document and Entering Initial HTML Tags

• Click File on the Notepad menu bar and then click New

• Enter the HTML code in Table 6–4 to enter the initial tags

• Position the insertion point on line 12

Page 26: Ddpz2613 topic6 frame

Starting a New Notepad Document and Entering Initial HTML Tags

Chapter 6: Using Frames in a Web Site 26

Page 27: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 27

Adding Links with Targets to the Menu Page

Page 28: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 28

Adding Links with Targets to the Menu Page

• If necessary, click line 12

• Enter the HTML code shown in Table 6–5, and then press the ENTER key twice after the last line

Page 29: Ddpz2613 topic6 frame

Adding Links with Targets to the Menu Page

Chapter 6: Using Frames in a Web Site 29

Page 30: Ddpz2613 topic6 frame

Adding an E-mail Link

• If necessary, click line 33

• Type <p><em><font size=”-1”>E-mail questions and comments to as the code and press the ENTER key

• Type

<a href=”mailto: [email protected]”>janasjewels @isp.com </a>.</font></em></p> to complete the e-mail link

Chapter 6: Using Frames in a Web Site 30

Page 31: Ddpz2613 topic6 frame

Adding an E-mail Link

Chapter 6: Using Frames in a Web Site 31

Page 32: Ddpz2613 topic6 frame

Saving, Validating, and Printing the HTML File

• Save the file in the Chapter06\ChapterFiles folder on your USB drive with the file name menu.html

• Validate the Web page

• Print the HTML file

Chapter 6: Using Frames in a Web Site 32

Page 33: Ddpz2613 topic6 frame

Saving, Validating, and Printing the HTML File

Chapter 6: Using Frames in a Web Site 33

Page 34: Ddpz2613 topic6 frame

Copying and Pasting the HTML Code to a New File

• Click menu.html – Notepad on the taskbar, if necessary• Click immediately to the left of the < in the <!DOCTYPE

html tag on line 1• Drag through the <body> tag on line 10 to highlight

lines 1 through 10• Press CTRL+C to copy the selected lines to the

Clipboard• Click File on the Notepad menu bar and then click New• Press CTRL+V to paste the contents from the

Clipboard into a new file

Chapter 6: Using Frames in a Web Site 34

Page 35: Ddpz2613 topic6 frame

Copying and Pasting the HTML Code to a New File

• Press the ENTER key three times• Type </body> and then press the ENTER key• Type </html> and then press the ENTER key• Change 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 35

Page 36: Ddpz2613 topic6 frame

Copying and Pasting the HTML Code to a New File

Chapter 6: Using Frames in a Web Site 36

Page 37: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 37

Creating the Home Page

• If necessary, click line 12

• Enter the HTML code shown in Table 6–6, pressing the ENTER key after each line

Page 38: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 38

Creating the Home Page

Page 39: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 39

Saving, Validating, and Printing the HTML File

• Save the file in the Chapter06\ChapterFiles folder of your USB drive as home.html

• Validate the Web page• Print the HTML file

Page 40: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 40

Saving, Validating, and Printing the HTML File

Page 41: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 41

Viewing and Printing the Frame Definition File Using a Browser

• Start your browser• Type 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 startup

• Click the drop-down arrow on the Print icon on the Command bar, and then click Print

• Click the Options tab in the Print dialog box

• Click As laid out on screen to select it, and then click the Print button to print the frames as laid out on screen

Page 42: Ddpz2613 topic6 frame

Viewing and Printing the Frame Definition File Using a Browser

Chapter 6: Using Frames in a Web Site 42

Page 43: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 43

Testing and Printing the Links

• Click the Necklaces link on the navigation menu and ensure that the Necklaces page shows in the main frame.

• Click 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 browser

• Click 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

Page 44: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 44

Testing and Printing the Links

• Click 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 option

• Click 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 option

• Click the Home link on the navigation menu by clicking the Jana’s Jewels logo

• Click the e-mail link and verify that the New Message window shows [email protected] as the address. Click the Close button to close the New Message window and quit the e-mail program

Page 45: Ddpz2613 topic6 frame

Testing and Printing the Links

Chapter 6: Using Frames in a Web Site 45

Page 46: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 46

Quitting Notepad and a Browser

• Click the Close button on the browser title bar• Click the Close button on the Notepad window title

bar

Page 47: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 47

Chapter 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

Page 48: Ddpz2613 topic6 frame

Chapter 6: Using Frames in a Web Site 48

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• Create a navigation menu page with text links• Create a home page

Page 49: Ddpz2613 topic6 frame

HTMLConcepts and Techniques

Fifth Edition

Chapter 6 Complete

Using Framesin a Web Site