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

HTMLConcepts and Techniques

Fifth Edition

Chapter 6

Using Framesin a Web Site

http://www.scseries.com/

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



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



Chapter Objectives

• Create a navigation menu page with text links• Create a home page


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


Using Frames

• Frames can be used:– Allow user to view more than on page at a time– Create a navigation menu, as a replacement for

menu lists and menu bar objects– To display headers, navigation menus, or other

information that need to remain on the screen as other parts of the web page change


Using Frames

• To use frames you must:– Create a frame definition file to define the layout of

frames– Add frameset tags to define the columns and rows

of frames– Define other frame attributes, such as borders,

margins, and scrolling



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






Frame Tag Attributes


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>

Creates frameset with two columns

<frameset rows=”30%,70%”> <frame src=”menu2.html”/><frame src=”home2.html” name=”win-main”/></frameset>

Creates frameset with two rows


Defining Frame Attributes

• frameborder attribute – defines the border that separates frames– 1 – turns attribute on– 0 – turns attribute off

• Browser automatically inserts five pixels 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 margin above and below a document within a frame– Specify size of margin in number of pixels


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


Planning and Laying Out Frames

• The most important step in creating an effective frame structure is planning and laying out a good frame design.– Sketching frame structure on paper before

writing HTML 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



• 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


Noframes Example

noframesHTML tag

noframesclosing tag


Entering Initial HTML Tags to Define the Web Page Structure


Note difference – useof frameset type ratherthan transitional type

No <body> or</body> tags

with framesets


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 frame changes



Defining Columns and Rows in the Frameset

Start frameset tag withtwo columns set at 22%

and 78% respectively


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

left column right column

menu.html home.html



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 file

for navigation



Specifying Attributes of the Main Frame

No frameborderon this frame

Second frame (second column)will display home.html file at

startup; this frame will changewhen links are clicked

Title and name of frame setto “win-main” – this is main

frame in which all other content will display



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>



Ending the Framesets

Two columnscreated

Turnframeborders

off with 0

Start and end frameset menu.html will be

displayed in firstframe in left column;

home.html will bedisplayed in second

frame in right column

target calledwin-main whereeach Web page

is displayed


Chapter 6: Using Frames in a Web Site

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

25






Creating the Navigation Menu Page

• The menu frame will always display the menu Web page (menu.html) in the left frameset.– Page contains the logo together with graphic and

text links that are used as a navigation menu.– Page includes links to display various pages in

the main frame (rightmost frameset)



Adding Links with Targets to the Menu Page



Adding Links with Targets to the Menu Page

29

When Necklaces link is clicked(either text or image), browserwill display necklace.html Webpage in win-main target frame

Text link fornecklace.html

Web page

This table data cell containsjewelslogo.gif image that will

display home.html file in targetwin-main when image link is clicked

When Orders link is clicked either text or image), browser will display

orderform.html Web page in win-main target frame same for Bracelets andWatches text and image links (will

display bracelet.html and watch.html)

Image link fornecklace.html

Web pageafter break line

Image link fororderform.html

Web pageafter break line



Adding an E-mail Link

• Type E-mail questions and comments to as the code Type <a href=”mailto: [email protected]”>janasjewels @isp.com</a>. to complete the e-mail link

30



Adding an E-mail Link

31

Email link




32



Creating the Home Page Copying and Pasting the HTML Code to a New File

33

New title isHome Page

Copy/pasted HTMLcode from

menu.html file



Creating the Home PageImage of jewelry

collage to be displayedon home page

Two paragraphsof text with

larger font (+1)

Horizontal space(10 pixels) added

to separateimage from text






Viewing and Printing the Frame Definition File Using a Browser

36



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




• 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




39



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



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 Summary

• Create a navigation menu page with text links• Create a home page


Project 4: Creating Tables in a Web Site 43

Homework # 11

• In the Lab 2 page HTML 295-296• Bright Idea, LLC Web Site• See

INF 186 Computer Assignment 11 Web page for details, hints, and requirements for the assignment

http://www.w3.org/MarkUp/

http://access.nku.edu/djmanning/webfiles/i186as11.htm


HTMLConcepts and Techniques

Fifth Edition

Chapter 6 Complete

Using Framesin a Web Site

Documents

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