CIS 451: HTML Frames Adapted from materials developed by Dr. Soe (updated January, 2009)

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

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

1 Frames •What is Frame? •How Frames Work? •Setting Up a Frameset Page •Targetting Frames •Content for Users Without Frames.

Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.

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.

CIS101 Introduction to Computing HTML Project Two.

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

CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.

Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.

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

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.

HTML Lesson 5 TBE 540. Prerequisites The user must be able to… –Create basic web pages with a text editor and/or a web page editor.

XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.

Link and Table in HTML. Statistics HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML.

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.

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.

Web Technologies Website Development Trade & Industrial Education

Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C

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.

HTML Concepts and Techniques Fourth Edition Project 6 Using Frames in a Web Site.

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.

Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.

1 Planning and Laying Out Frames Sketch the frame structure on paper before writing the HTML code two rows two columns.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 6.

Kingdom of Saudi Arabia Ministry of Higher Education Al-Imam Muhammad Ibn Saud Islamic University College of Computer and Information Sciences Chapter.

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

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.

Tutorial 5 Windows and Frames Section B - Working with Frames and Other Objects Go to Other Objects.

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

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

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.

XHTML Hyperlinks. Creating Links to Other Web Pages A link, or hyperlink, is a specially formatted Web page object that the user can click to open a different.

Using Frames in a Web Site Project 6. Project Objectives Project 6: Using Frames in a Web Site 2 Define terms related to frames Describe the steps used.

Web Design (8) Images (2). My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In.

Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.

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.

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.

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 !!!!!!)

Creating Frames on a Web Page

Client-Side Internet and Web Programming

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

Using Frames in a Web Site

Table of Contents Creating Frames Frameset Tag and its attributes

Tutorial 8 Designing a Web Site with Frames

Dreamweaver Basics.

Presentation transcript:

CIS 451: HTML Frames Adapted from materials developed by Dr. Soe (updated January, 2009)

Frames Frames put HTML files into a table format Frames use 2 types of documents: Content Documents text, pictures, hyperlinks, photos, etc. Frames Document Defines layout in columns or rows or columns within rows or rows within columns Provides scroll bars Link in one frame can load HTML doc in another frame

Tag Required for Frames-style pages Replaces tag completely tag has 3 types of attributes-- numerical values: size in pixels,% and/or *: ROWS COLS

3 Column Frame 3 column frames

2 Row Frame 2 Rows

Nested Nested Frames

Frame Interaction Hyperlink in 1 frame changes contents of another named (target) frame (sample)sample Assign meaningful names to frames (NAME = "menu", "right", or etc.) Click Database Reports to see the linked page in the right frame

TARGET Attribute Tells browser frame into which requested document is displayed Name of target frame (e.g., "menu") OR Special ("magic") targets: "_top" Whole window "_blank" New (unnamed) window "_self" Frame containing hyperlink (if no target, defaults to _self)

Lots of People Hate Frames I Hate Frames Page Why Frames Suck (Most of the Time) (Jacob Nielsen is a "big name" in the usability field) Why Frames Suck (Most of the Time) another I Hate Frames PageI Hate Frames Page

Frames Exercise click hotlink in IE, then View Source hotlink save file on Desktop or floppy click in left frame, then View Source save file on Desktop or floppy change links to Internet web pages use full address so href=" [etc.]"

Frames Exercises - 2 try to verify the problems identified in Why Frames Suck (Most of the Time) Why Frames Suck (Most of the Time) try to create a web page with at least 10 separate frames link external web sites as <FRAME SRC = for the individual frames

Frames Exercises - 3 try to validate a frames web page at W3C validater W3C validater use the Validate by Input version and fix code in the textarea control