Frames. Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and.

Slides:



Advertisements
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.
Advertisements

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.
Chapter 11 Creating Framed Layouts Principles of Web Design, 4 th Edition.
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
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.
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.
1 Web Page Design Frames! - Chapt 20 Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.
Linked Windows and Frames. Frames and Linked Windows2 Linked Windows n Information pointed to by hyperlink displayed in another window n Target attribute.
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...
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.
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.
 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.
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.
HTML 2 FRAMES. Frames Intro Frames are a feature supported by Netscape 2.0 (and higher) Internet Explorer 3.0 (and higher) and a few other browsers. Frames.
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.
XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.
1 Advanced Frame Options Using NORESIZE  By default, users may resize frames unless you specify the NORESIZE attribute in the tag  Examples:
WHAT are frames? what.html are.htmlframes.html. Intro to Frames HTML frames allow you to display more than 1 HTML document in the same browser window.
XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives  Describe the uses of frames in a Web site  Lay out frames within a browser window.
XP Using Frames in a Web Site Ali Alfayly. XP Tutorial Objectives Create frames for a Web site Control the appearance and placement of frames Control.
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.
1 Web Developer & Design Foundations with XHTML Chapter 5 Key Concepts.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
CIS67 Foundations for Creating Web Pages Professor Al Fichera Reference for CIS127 and CIS 137.
HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►
Frame Page A Frame Page does the following: –Defines the size of each frame. –Defines how the window will be broken up – rows or columns. –Specifies which.
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.
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
Working with HTML Frames The Good, The Bad & The Ugly.
CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
1 Web Developer Foundations: Using XHTML Chapter 5 Key Concepts.
Kingdom of Saudi Arabia Ministry of Higher Education Al-Imam Muhammad Ibn Saud Islamic University College of Computer and Information Sciences Chapter.
Chapter 8 HTML Frames. 2 Principles of Web Design Chapter 8 Objectives Understand the benefits and drawbacks of frames Understand and use frames syntax.
Web111a_chapt05.ppt HTM: Section 5 Frames A section of the browser window capable of displaying an entire web page Display multiple web pages on the screen.
HTML Concepts and Techniques Fifth Edition Chapter 6 Using Frames in a Web Site.
Jozef Goetz, © 2011 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved.
HTML: Tables & Frames Internet Technology.
Tutorial 8 Designing a Web Site with Frames. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore the uses of frames.
FRAMES. Frames allow you to divide the page into several rectangular areas and to display a separate document in each rectangle. Each of those rectangles.
1 HTML Frames
Web Page Design Frames! Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.
Week 9: HTML Tables and Frames HNDIT11062 – Web Development.
HTML FRAMES With Frames, you can display more than one Web page in the same browser window.
HTML Frames. Advantages to Using Frames n flexibility in design n information in different Web pages n remove redundancy. n site easier to manage. n update.
INTRODUCTORY Tutorial 9 Creating Frames. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Decide when to use frames for a Web site Learn.
1 HTML Frames
Microsoft FrontPage 2003 Illustrated Complete Creating a Frames Page.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
Jozef Goetz, © 2011 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved.
XHTML Introductory1 Frames Chapter 5. XHTML Introductory2 Objectives In this chapter, you will: Work with the Frameset Document Type Definition (DTD)
HTML Comprehensive Concepts and Techniques Second Edition Creating Frames on a Web Page.
CS-3432 Electronic Commerce Lecture – 9 Sikandar Shujah Toor
Introduction to HTML.
HTML Structure II (Frame)
FRAMES.
Tutorial 8 Designing a Web Site with Frames
Designing a Web Site with Frames
Tutorial 8 Designing a Web Site with Frames
HTML Frames
Presentation transcript:

Frames

Dividing a page, called frameset, into frames, allow the visitor to see more than one page at a time Each frame contains its own Web page, and theoretically could be viewed independently in a separate window One of the disadvantage  they can be hard to navigate

Creating a Simple Frameset Think of a frameset as a window with individual panes Each pane shows different information You decide how many panes your windows will have how its border look like should have scroll bars or not Assigning individual URLs to each pane, that is, frame

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “ <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> FRAMES IN ROWS Create simple frameset with 3 horizontal rows all in the same column no … rows=“20%,60%,*” 3 rows row height name  identify the particular frame’s use

Creating Frames in Columns

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “ <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> FRAMES IN COLUMNS

Creating Frames in Rows and Columns

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “ <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> FRAMES IN COLUMNS

Combining Framesets

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “ <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> COMBINING FRAMESETS

Creating an Inline Frame inline If you want to mix text, graphics and a frame all on one page, you’ll need to create a floating or inline frame

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “ <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> INLINE FRAME COLOURS - colors - colors - colors - colors - colors combiningframesets.htm this part :: type the text that should appear if the browser can't display the frame </body> in the … tag and refer to frame.url

Adjusting a Frame’s Margins All browsers display a frame’s contents with a default margin from 8 to 15 pixels on each side You can adjust the margin so that there is more space, or, if you prefer, so that the frame’s contents begin in the top- left corner

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” “ <meta http-equiv=“content-type” content=“text/html;charset=utf-8” /> COMBINING FRAMESETS

Showing or Hiding Scroll Bars You can decide whether each individual frame should have scroll bar all the time, never, or only needed Only when needed Only when needed :: means that the scroll bars will appear only when there is more information than can be shown at one time in the frame If the visitors makes the window big enough, these scroll bars will eventually disappear To show scroll bars all the time : scrolling=“yes” To hide scroll bars all the time : scrolling=“no” To show scroll bars when needed : scrolling=“auto”

Adjusting the Color of the Borders In theory, you can change the color of each frame individually In practice, however, since the borders are shared between frames, the possibilities are more limited Unfortunately, the bordercolor attribute is not standard (X)HTML

Adjusting the Frame Borders By default, your visitor’s browser will draw sculpted borders around each frame in your frameset The border tag lets you control the width of the space between frames The frameborder tag lets you choose to fill that space with sculpted borders or leave it blank To hide the sculpted borders:

Keeping Visitors from Resizing Frames Frames with relative or variable sizes are always resized when the visitor changes the size of the browser window However, you can also choose whether to let the visitor resize the individual frames To keep visitor from resizing your frame:

Targeting Links to Particular Frames You can have other pages appear in the same frame The trick is to add a pointer, called a target, to the links to those pages The target says “open this link in the photos frame”

COMBINING FRAMESETS YELLOW text - text - text - text - text - text - text - text - text - text blue green red purple

Targeting Links to Special Spots You will want to make more general instructions, like having the link open on a new window. There are 4 special target names: <a href=“content.htm” target=“_blank”  to have the link open a new window target=“_self”  to open the link in the same frame that contains the link target=“_top”  to use the entire current window for the link target=“_parent”  to open the link in the frameset that contains the current frameset

Changing the Default Target In a frame contains a link, the link will open up in the same frame, by default, unless you change the target You can change the default target for all the links on a page by using the base tag

YELLOW text - text - text - text - text - text - text - text - text - text blue green red purple YELLOW text - text - text - text - text - text - text - text - text - text blue green red purple

Nesting Framesets As if frames and framesets weren’t complicated enough, you can nest framesets inside of frames to achieve special effects Build the inner frame == “combiningfra mesets.htm” Build the outer frameset == "Winter.htm" NESTING FRAMESETS