Presentation is loading. Please wait.

Presentation is loading. Please wait.

Frames 8th March.

Published byCurtis Fisher Modified over 6 years ago

Similar presentations

Presentation on theme: "Frames 8th March."— Presentation transcript:

1 Frames 8th March

2 Write the code for this using tables and using layers …..

3 Frames Frame layout and design Frame sets and nesting Using frames
Target frames and windows

4 Frames Web pages that do not use tables, layers or frames tend to be left-side heavy When a surfer clicks on a link, from a set of links, the browser displays the corresponding HTML file in a new web page, which may not have the same links, for further navigation – frames solve this Frames divide a browser window into regions, with each region having its own web page

5 Frame Layout & Design A frame is a rectangle that has a width and height, a location in a browser window, and content A frame has width, height, location, and content A collection of frames is referred to as a frame set. It controls the layout of its frames A frameset and a frame are created using the <frameset> and <frame> tags (+ <noframes>) The <frameset> tag replaces tag replaces <body> tag

6 Frame Layout & Design Useful tips: Keep the frameset simple
Keep the frame’s content short Keep the frames organised – use a driver frame

7 Frame Sets & Nesting A frame set width is defined by number of columns, cols A frame set height is defined by number of rows, rows Units of rows and cols can be pixels or percentage of browser window

8 Frame Sets & Nesting

9 Frame Sets & Nesting

10 Frame Sets & Nesting XHTML does not have a limit on the depth of frame nesting However, one or two levels of nesting is all that is needed in practice

11 Using Frames There are 4 XHTML tags that can be used:
<frameset> - Encloses all other frame tags Attributes: rows, cols : rows, cols <frame> - Creates a frame in a frame set Attributes : name, src, noresize, scrolling, frameborder, marginwidth, marginheight, longdesc <iframe> - Creates an inline frame Attributes : name, src, width, height, align, scrolling, frameborder, longdesc, marginwidth, marginheight <noframes> - specifies alternative content for a browser Attributes: NO ATTRIBUTES

12 Using Frames The <iframes> tag creates inline frames
An inline frame is a frame that is embedded inside the content of a Web page No frame sets are required to create inline frames Unlike the <frame> tag, the <iframe> tag is used inside the <body> tag

13 Using Frames <frameset rows="*, *" cols="50%, *"> <frame src="...." name="myFrame1" frameborder="0"/> <frame src="...." name="myFrame2" frameborder="0"/> <frame src="...." scrolling="no"/> <frame src="...." noresize marginwidth="0" marginheight="0"/> </frameset>

14 Using Nested Frames <frameset cols="*, *"> <frameset rows="*, *"> <frame src="...."/> <frame src="...."/> </frameset> <frame src="...."/> </frameset>

15 Target Frames & Windows
Frames optimise web page layout and facilitate navigation Contents of some frames may never change and that of others may change frequently Frames offer convenience to web surfers Target frames receive content from other frames Target frames must be given names when they are created i.e. use name attribute of the <frame> tag The source frame can then refer to a target frame source by its name i.e. use target attribute

16 Target Frames & Windows

17 Target Frames & Windows
Example.html <frameset cols=“160, *"> <frame src=“toc.html"/> <frame src=“initialContent.html“ name=“myTarget”/> </frameset> <h2> Click any link in the left frame…. </h2> <a href= target=“myTarget”>NU programs</a><br/> <a href= target=“myTarget”>MIT programs</a><br/> initialContent.html toc.html

18 Conclusion Frames Frame layout and design Frame sets and nesting
Using frames Target frames and windows

19 Reference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript

Download ppt "Frames 8th March."

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.
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.
JavaScript: Introduction to Handling Events 20 th April 2011.

JavaScript: Introduction to Handling Events 20 th April 2011.
Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties.

Cascading Style Sheets 23 rd March. Cascading Style Sheets (CSS) CSS Syntax Linking CSS to XHTML Inheritance & Cascading Order Font Properties Text Properties.
Frames How to Create Frames in HTML Dr. Sanders. Why Frames? Frames allow you to have more than a single window on the screen at the same time. –You can.

Frames How to Create Frames in HTML Dr. Sanders. Why Frames? Frames allow you to have more than a single window on the screen at the same time. –You can.
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...
HTML ll Events, Framesets and XHTML. onclick  Captures the click event  Can be used with most tags  Examples onclick=“javascript:alert(‘Thank you for.

HTML ll Events, Framesets and XHTML. onclick  Captures the click event  Can be used with most tags  Examples onclick=“javascript:alert(‘Thank you for.
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.
Chapter 6 Working with Frames.

Chapter 6 Working with Frames.
 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.
Lecture on: Frames. FRAMES VERSUS TABLES Frames allow part of the page, usually a navigation bar, to stay put.

Lecture on: Frames. FRAMES VERSUS TABLES Frames allow part of the page, usually a navigation bar, to stay put.
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.

XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.
XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.

XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.
HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:

HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:
FRAMES. With frames, we can display more than one HTML document in the same browser window. Each HTML document is called the same browser window. Each.

FRAMES. With frames, we can display more than one HTML document in the same browser window. Each HTML document is called the same browser window. Each.

Similar presentations

Ads by Google