Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 6 Working with Frames.

Published byNaomi McCoy Modified over 8 years ago

Similar presentations

Presentation on theme: "Chapter 6 Working with Frames."— Presentation transcript:

1 Chapter 6 Working with Frames

2 Agenda Create Frames Customize Frame Borders Control Frame Margins
Add Alternative Text Prevent Frame Resizing Hide or Display Frame Scroll Bars Target a Link Create a Nested Frameset Create an Inline Frame

3 Create Frames You can use frames to divide the Web browser window into panes. This allows you to display different pages in the browser window at the same time. For example, you might use one frame to display a navigational page that lists links to different pages on your Web site and show the result of a clicked link in another frame. You can use the <FRAMESET> and <FRAME> tags to define the frame structure. The <FRAMESET> tag creates a frameset, dividing the window into sections, while the <FRAME> tag specifies which page goes into which frame.

4 Create Frames(Continued)
Create and save a new HTML document, including only the basic <HTML>, <HEAD>, and <TITLE> tags. Below the </HEAD> tag, type <FRAMESET and a space. Define the frameset to include two or more rows or columns and specify a size in pixels for the rows or columns. To create frames in rows, type ROWS=”?,?”>, replacing ? with the height of each row in your frameset. To create frames in columns, type COLS=”?,?”>, replacing ? with the width of each column in your frameset. You can also set a row or column size as a percentage by typing the value followed by a percentage sign, such as 30%.

5 Create Frames(Continued)
Type <FRAME NAME=”?”, replacing ? with a name for the frame. Type a space and SRC=”?”>, replacing ? with the name and location of the Web page you want to appear in the frame. Repeat the previous steps for each frame. Type </FRAMESET>. The Web browser displays the frames. In this example, two row frames appear in the browser window. You can use a nested frameset to combine rows and columns in a frameset.

6 Frameset attributes Optional Attributes Attribute Value Description
cols pixels % * Specifies the number and size of columns in a frameset rows Specifies the number and size of rows in a frameset Standard Attributes Attribute Value Description class classname Specifies a classname for an element id Specifies a unique id for an element style style_definition Specifies an inline style for an element title text Specifies extra information about an element

7 Frame Attributes Optional Attributes Attribute Value Description
frameborder 0 1 Specifies whether or not to display a border around a frame longdesc URL Specifies a page that contains a long description of the content of a frame marginheight pixels Specifies the top and bottom margins of a frame marginwidth Specifies the left and right margins of a frame name text Specifies the name of a frame noresize Specifies that a frame is not resizable scrolling yes no auto Specifies whether or not to display scrollbars in a frame src Specifies the URL of the document to show in a frame

8 Frame Attributes Attribute Value Description class classname
Standard Attributes Attribute Value Description class classname Specifies a classname for an element id Specifies a unique id for an element style style_definition Specifies an inline style for an element title text Specifies extra information about an element

9 Example <frameset cols="33%,34%,33%" bordercolor="black" border="5"> <frame src="pw1.html"> <frameset rows="33%,34%,33%" border="5"> <frame src="pw2.html"> <frame src="pw3.html"> <frame src="pw4.html"> </frameset> <frame src="pw5.html">

10 CHANGE THE FRAME BORDERS
You can change the thickness of your frame borders using the BORDER attribute. By default, Web browsers display the borders around your frames at a thickness of 6 pixels. You can set your frame borders to another size as well as control the color of the borders. Within the <FRAMESET> tag, type BORDER=”?”, replacing ? with a thickness value in pixels. The Web browser displays the frames with the designated border thickness.

11 CHANGE THE BORDER COLOR
Within the <FRAMESET> tag, type BORDERCOLOR=”?”, replacing ? with a color value. The Web browser displays the frames with the designated color.

12 Control Frame Margins You can control the amount of space that appears between a frame border and the contents of the frame. Using the MARGINWIDTH and MARGINHEIGHT attributes, you can set margins for the top, bottom, left, and right sides of your frames. Margin space is measured in pixels. Within the <FRAME> tag, type MARGINWIDTH=”?”, replacing ? with the amount of space you want to set for the left and right margins. Type a space and MARGINHEIGHT=”?”, replacing ? with the amount of space you want to set for the top and bottom margins.

13 Add Alternative Text You can use the <NOFRAMES> tag to insert alternative text for users whose browsers do not support frames. In some cases, the user may have decided to turn off frame display. Alternative text can alert them to the content they are missing. Directly above the </FRAMESET> tag, add a line and type <NOFRAMES>. Type any alternative text you want to appear. Type </NOFRAMES>. If the user’s browser does not support frames, or the frame display is turned off, a page appears with the alternative text.

14 Prevent Frame Resizing
By default, users can resize the frames in your Web page, allowing them to view more information in a frame. You can control your page layout by restricting frame resizing. This can be useful if you need the frame dimensions to remain fixed so that the content is viewed correctly. Type NORESIZE inside the <FRAME> tag of the frame you want to control. You do not assign a value to the NORESIZE attribute. You can repeat the previous step for any other frames for which you want to prevent resizing.

15 Hide or Display Frame Scroll Bars
Web browsers automatically display scroll bars if a frame’s content exceeds the size of the frame. You can use the SCROLLING attribute to control when scroll bars appear. A yes value displays scroll bars, while a no value hides the scroll bars. Click inside the <FRAME> tag of the frame you want to control. Type SCROLLING=”?”, replacing ? with yes to display scroll bars or no to hide scroll bars. You can repeat the previous steps to control the scroll bars in other frames.

16 Target a Link You can make links on your pages open content in specific frames. To target links to particular frames, you must identify each frame with a unique name and then reference that name with the <A> tag’s TARGET attribute. You can also open a page into the entire browser window by using a TARGET value of “_top”. This breaks the user out of the current frameset. Open the HTML file where the link should appear. Type <A HREF=”?”, replacing ? with the target page. Type a space and TARGET=”?”>, replacing ? with the frame name. Type the link text. Type </A>.

17 OPEN ON TOP OF A FRAMESET
Open the HTML file where the link should appear. Type <A HREF=”?”, replacing ? with the target page. Type a space and TARGET=”_top”>. Type the link text. Type </A>.

18 Create a Nested Frameset
You can nest a frameset within another frameset, creating a combined frameset. For example, you might place a two-frame frameset within the largest frame of your main frameset. In the frameset document, add a line where you want to insert a nested frameset. Type <FRAMESET ROWS=”?,?”> to insert rows, or type <FRAMESET COLS=”?,?”> to insert columns, replacing ? with the row or column values for your frames. Add the frame tags to define the frame names and source pages. Type </FRAMESET> to complete the nested frameset.

19 Create an Inline Frame You can create a floating frame, also called an inline frame, that appears within the content of a Web page. Inline frames do not require a frameset. Type <IFRAME SRC=”?” where want to insert an inline frame, replacing ? with the name and location of the page you want to appear within the inline frame. Type a space and NAME=”?”, replacing ? with the name of the inline frame. Type a space and WIDTH=”?” HEIGHT=”?”>, replacing ? With width and height values. Type </IFRAME>.

20 Lab 6 Create Frames Customize Frame Borders Control Frame Margins
Add Alternative Text Prevent Frame Resizing Hide or Display Frame Scroll Bars Target a Link Create a Nested Frameset Create an Inline Frame

Download ppt "Chapter 6 Working with Frames."

Similar presentations

Frames How to make a page that uses frames. Preview There used to be a time that frames were frowned upon because most browsers did not support them Nowadays.

Frames How to make a page that uses frames. Preview There used to be a time that frames were frowned upon because most browsers did not support them Nowadays.
Frames.

Frames.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.

Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.

Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
COS 125 Day 25. Agenda  Assignment #7 Due  Final capstone progress report due next class  Assignment #8 Posted Due April 25 One more to go  Exam #5.

COS 125 Day 25. Agenda  Assignment #7 Due  Final capstone progress report due next class  Assignment #8 Posted Due April 25 One more to go  Exam #5.
Frames 1 Lecture HTML: Frames and Miscellaneous Tags.

Frames 1 Lecture HTML: Frames and Miscellaneous Tags.
XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.

XP 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial 5.
1 DePaul University SNL 262 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Instructor: David A. Lash.

1 DePaul University SNL 262 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Instructor: David A. Lash.
1 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.

1 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.

Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
The Power of Tables They aren't just for sitting stuff on anymore...

The Power of Tables They aren't just for sitting stuff on anymore...
Create a Web Site with Frames

Create a Web Site with Frames
Web Technologies Lecture # 5 : HTML Frames. Objectives n Create/control appearance & placement of frames n Control the behavior of hyperlinks on pages.

Web Technologies Lecture # 5 : HTML Frames. Objectives n Create/control appearance & placement of frames n Control the behavior of hyperlinks on pages.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 

 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
Frameset. FrameSet With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each.

Frameset. FrameSet With frames, we can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each.
Using Frames in a Web Site

Using Frames in a Web Site

Similar presentations

Ads by Google