 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages. 

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

Chapter 3 – Web Design Tables & Page Layout
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.
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.
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.
Using Frames in a Web Site
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:
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.
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.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 7: Working with Frames Kelly L.
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.
Frames 2 nd March. Write the code for this using tables and using layers …..
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.
Windows and frames and the anchor tag. Frames Independent, scrollable portions of a Web browser window, with each frame capable of containing its own.
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.
Windows and frames and the anchor tag. Frames Independent, scrollable portions of a Web browser window, with each frame capable of containing its own.
1 HTML Frames
© Marty Hall, Larry Brown Web core programming 1 HTML Frames.
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.
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Working with Frames.
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.
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
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
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.
Chapter 6 Frames and Image Maps Frame sets and frames Image Maps.
Introduction to HTML.
HTML Structure II (Frame)
FRAMES.
Client-Side Internet and Web Programming
Table of Contents Creating Frames Frameset Tag and its attributes
Table of Contents Creating Frames Frameset Tag and its attributes
Table of Contents Creating Frames Frameset Tag and its attributes
Presentation transcript:

 You've probably come into contact with web sites in which the browser window seemingly allowed you to move around between several different pages.  The truth is that the browser really was allowing you to view several pages at once.  An HTML feature known as frames allows you to divide the browser window into regions that contain separate web pages; each of these regions is known as a frame.  Frames are roughly similar to in that they allow you to arrange text and graphics into rows and columns. Unlike a table cell, however, any frame can contain links that change the contents of other frames (or itself).

 A frame is a rectangular region within the browser window that displays a web page alongside other pages in other frames.  The main advantage of using frames becomes apparent when you click one of the navigational links in the top frame. The top frame will not change at all in this example, but a new page will be loaded and displayed in the bottom frame.  When they're implemented properly with only two or three frames, the effect can be helpful, but more than that and you'll likely just cause confusion and frustration among your visitors.

 A frameset document actually has no content.  It only tells the browser which other pages to load and how to arrange them in the browser window.  A frameset document is an HTML page that instructs the web browser to split its window into multiple frames, and specifies which web page should be displayed in each frame.  In the listing there is a tag instead of a tag.  No tags that would normally be contained in a tag can be within the tag.

 The tag in this example includes a rows attribute, meaning that the frames should be arranged on top of each other like the horizontal rows of a table.  If you want your frames to be side by side, use a cols attribute instead of rows.  You must specify the sizes of the rows or cols, either as precise pixel values or as percentages of the total size of the browser window.  You can also use an asterisk (*) to indicate that a frame should fill whatever space is available in the window.  If more than one frame has an * value, the remaining space will be divided equally between them.

 means to split the window vertically into two frames.  The top frame will be exactly 80 pixels tall, and the bottom frame will take up all the remaining space in the window.  The top frame contains the document banner.html, and the bottom frame contains greeting.html.  Because you can't predict the size of the window in which someone will view your web page, it is often convenient to use percentages rather than exact pixel values to dictate the size of the rows and columns. For example, to make a left frame 20% of the width of the browser window with a right frame taking up the remaining 80%, you would type the following : 

 Within the and tags, you should have a tag indicating which HTML document to display in each frame.  If you have fewer tags than the number of frames defined in the tag, any remaining frames will be left blank.)  Include a src attribute in each tag with the address of the web page to load in that frame. (You can put the address of an image file instead of a web page if you just want a frame with a single image in it.)

 The real power of frames begins to emerge when you give a frame a unique name with the name attribute in the tag.  You can then make any link on the page change the contents of that frame by using the target attribute in an tag. ◦  This code displays the greeting.html page in that frame when the page loads and names the frame "main".

 In the code for the top frame you will see the following link: ◦  When the user clicks this link, news.html is displayed in the frame named main (the lower frame).  To accomplish this sort of interactivity before the invention of frames, you would have had to use complex programming or scripting languages. Now you can do it with a simple link!  If the target="main" attribute had been left out, the news.html page would be displayed in the current (top) frame instead.

 Want to open a page in a new window without using frames? Just use one of the following special names with the target attribute of the tag (for example, Click here to open the popup.html document in a new window. ):  _blank loads the link into a new, unnamed window.  _top loads the link into the entire browser window. Use this when you want to get rid of all frames or replace the entire window with a whole new set of frames.  _parent loads the link over the parent frame if the current frame is nested within other frames. (This name does the same thing as top unless the frames are nested more than one level deep.)  _self loads the link into the current frame, replacing the document now being displayed in this frame. (You'll probably never use this because you can achieve the same thing by simply leaving out the target attribute altogether.)

 By nesting one frameset within another, you can create rather complex frame layouts.  A cols frameset is used to split each row of the rows frameset into three pieces.  Before you get to thinking that I'm contradicting myself when it comes to the complexities of frames, please understand that the purpose of this example is to demonstrate how nested frames work, not to encourage a particular technique.

 The ugly parts are the gray dividers between the frames, which completely ruin the effect of surrounding the center frame with nicely designed graphics. There also isn't enough room in the top and bottom frames to display the graphics without scrollbars. Fortunately, there are HTML commands to get rid of the frame dividers, make more space in small frames by reducing the size of the margins, and force frames not to have scrollbars.

 In addition to the name attribute, the tag can take the following special frame- related attributes: ◦ marginwidth Left and right margins of the frame (in pixels). ◦ marginheight Top and bottom margins of the frame (in pixels). ◦ scrolling Display scrollbar for the frame? ("yes" or "no") ◦ frameborder Display dividers between this frame and adjacent frames? (1 means yes, 0 means no) ◦ noresize Don't allow this frame to be resized by the user.

 marginwidth and marginheight are pretty self-explanatory, but it's worth taking a close look at each of the other attributes.  Normally, any frame that isn't big enough to hold all of its contents will have its own scrollbar(s).  People viewing your frames can ordinarily resize them by grabbing the frame borders with the mouse and dragging them around.  If you don't want anyone messing with the size of a frame, put noresize="noresize" in the tag.  Frames are flexible enough to allow you to control the size of frame borders or eliminate borders altogether.  This makes a frame document look just like a regular web page, with no ugly lines breaking it up. Just put a frameborder="0" attribute in every single tag not just in the tags.

Tag/AttributeFunction … Divides the main window into a set of frames that can each display a separate document. Attributes ROWS="..."Splits the window or frameset vertically into a number of rows specified by a number (such as 7), a percentage of the total window width (such as 25%), or as an asterisk (*) indicating that a frame should take up all the remaining space, or divide the space evenly between frames (if multiple * frames are specified). COLS="..."Works similar to ROWS, except that the window or frameset is split horizontally into columns.

Tag/AttributeFunction FRAMEBORDER="..."Specifies whether to display a border for the frames. Options are YES and NO. BORDER="..."Size of the frame borders in pixels Defines a single frame within a. Attributes SRC="..."The URL of the document to be displayed in this frame. NAME="..."A name to be used for targeting this frame with the TARGET attribute in links. MARGINWIDTH="..."The amount of space (in pixels) to leave to the left and right side of a document within a frame.

Tag/AttributeFunction MARGINHEIGHT="..."The amount of space (in pixels) to leave above and below a document within a frame. SCROLLING="..."Determines whether a frame has scrollbars. Possible values are YES, NO, and AUTO. NORESIZEPrevents the user from resizing this frame (and possibly adjacent frames) with the mouse.... Provides an alternative document body in documents for browsers that do not support frames (usually encloses... ).