Compiled by ackoo Creating Frames. Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table cell 3 Table cell 4.

Slides:

Advertisements

Similar presentations

Frames. What are frames? The ability to divide the browser window into sections that can function independently of one another. Navigation within the.

Advertisements

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.

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.

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

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

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.

HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:

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.

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.

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.

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.

CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.

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.

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.

Frames Using Frames? zRarely used zPrinting, bookmarking & resizing problems. zFrames can look different from browser to browser. zHard to design (need.

Jozef Goetz, © 2011 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved.

Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.

Using Frames in a Website GMU November 12-13, 2004.

Table Row Table Data ( Header & Data) Data Cell Padding TABLE.

HTML: Tables & Frames Internet Technology.

HTML Hypertext Markup Language. WORKING WITH FRAMES.

Tutorial 8 Designing a Web Site with Frames. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore the uses of frames.

Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 7 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.

© Marty Hall, Larry Brown Web core programming 1 HTML Frames.

Web Page Design Frames! Yet Another Way to Divide Up The Screen. Using HTML and JavaScript to Develop Website.

HTML FRAMES With Frames, you can display more than one Web page in the same browser window.

Microsoft FrontPage 2003 Illustrated Complete Creating a Frames Page.

Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.

LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.

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.

Lesson 9. Test 1 How was the test ? Assignment 1 (must complete satisfactorily even if you do not get any marks for it !!!!!!)

HTML Structure II (Frame)

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

HTML Tables & Frames Internet Technology.

HTML Tables & Frames Internet Technology.

Presentation transcript:

Compiled by ackoo Creating Frames

Compiled by ackoo Recall this… Table cell 1 Table cell 2 Table cell 3 Table cell 4

Compiled by ackoo How frames work? With frames, you can display more than one Web page in the same browser window. This page contains three frames: 1) Top frame for logo 2) Navigational table as the left frame 3) Content loads on the third frame.

Compiled by ackoo How frames work? Frames are described from top to bottom, and left to right. Approach frames design with caution. Don’t overuse it.

Compiled by ackoo Advantages and Disadvantages of Frames Advantages: ? Disadvantages: ?

Compiled by ackoo Advantages and Disadvantages of Frames Advantages: Ability to have one portion of window always visible while others scroll through longer content. Provide navigational possibilities. Unify information from several sites onto one page. Disadvantages: Difficult to click through them. Difficult to be bookmarked or found by search engines. More work for developers and a heavier load for the server. Is not supported by some browsers. Unable to print the whole pages (include logo)

Compiled by ackoo Example of Frameset and Frame Tags

Compiled by ackoo HTML Tags for Frames: and Frameset Page You need a frames-enabled browser to view this page. NOTES: Frameset doesn’t need a tag because it has no body. If you put contents in the tag, the contents won’t be displayed.

Compiled by ackoo Html tags for frames and its attributes. TagAttributesDescription Border=“number” Cols=“measurements” frameborder=“1” or “0” Rows=“measurements” Declare the body of a framed document. Border thickness in pixels when border is on. Number of columns (vertical frames). Specifies whether borders appear between the frames (1=yes, 0= No). Number of rows (horizontal frames) marginwidth=“number” marginheight=“number” name=“text” scrolling=“yes” or “no” or “auto” src=“url” Adds a frame to a framed document. Pixel space held on the left edge of the frame. Pixel space held on the top edge of the frame. Name of the frame (for targeting) Specifies whether scrollbars appear in the frame name of the file to load in the frame. Content that will display in a non-frames browser

Compiled by ackoo Do it now! Click for some examples of how frames are used: les.asp Let’s explore these examples

Compiled by ackoo Linking pages/contents to the navigation items. Example: ABOUT US VIDEO SLIDESHOW Do you notice the target attribute for link?? (Also, see an example from w3school).example

Compiled by ackoo Linking pages in your site’s frames There are several types of link target: Target to a frame (put the frame name, as previous example) Target to a blank browser window (_blank) Target to the same frame (browser window) (_self) Target to the parent frame, which cause breaking out of the frameset, ie the frameset that is one step up in the nested frame hierarchy. (_parent) Target to the top level of the browser window, breaks out its frameset and displayed in the full browser window. (_top)

Compiled by ackoo Do it now! To practice, download this zip file (and extract it): ( sic/notes/frame_practice.zip). sic/notes/frame_practice.zip Do this: Create an “index.html” file with frames: A top frame for logo page, a left frame for navigation page and a right frame for contents to load. Create the links for the navigation panel.

Compiled by ackoo More reading about Frame