I-Frames By Josh Gallagan. Why I-Frames Allow you to keep main page consistent Allow you to keep main page consistent Only the content refreshes in the.

Slides:



Advertisements
Similar presentations
Tutorial 1: Developing a Basic Web site
Advertisements

Source: ojects/tabber/ ojects/tabber/
More frames in XHTML Please use speaker notes for additional information!
External Site Links by Awnya Boam. Links are found… …almost everywhere on the internet. They allow users to travel from one site to another.
Powerpoint Templates Page 1 Powerpoint Templates Let’s Build a Website by Sybil Prince Nelson.
Resources. Overview Problem Report WebCT Faculty & Student Support Searching.
HTML Computing Concepts HTML - An Introduction 1.
Creating a Website Part Two Navigation. Creating Usable Navigation Provide enough location information to let the user answer the following navigation.
Internet aided courses in Mathematics Thierry Dana-Picard JCT Meital Conference 5762.
Chapter 1 Understanding the Web Design Environment
Websitepipeline ™ university Web Page Catalog adding and editing web pages.
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.
WEB DESIGN W HAT I S IT ?. W HAT IS W EB D ESIGN It includes graphic design Interface design Interactivity Using Standardized Programming Language Search.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.
Web Technologies Website Development Trade & Industrial Education
Creating Web Pages Overview. Design – Start with a Purpose Before you start any web page, you need to design the website. The first question that should.
CIS 451: HTML Frames Adapted from materials developed by Dr. Soe (updated January, 2009)
30 september 2009 The communication mix shifts from paper to screen: take the edge with digital documentation.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Web Site Design Principles
Chapter 1 Understanding the Web Design Environment Principles of Web Design, 4 th Edition.
Week 1 Understanding the Web Design Environment. 1-2 HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to.
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
Images, Hyperlinks, and Sound Module 2: XHTML Basics LESSON 3.
Web Design (5) Navigation (1). Creating a new website called ‘Navigation’ In Windows Explorer, open the folder “CU3A Web Design Group”; and then the sub-folder.
Links Teppo Räisänen LIIKE/OAMK What is a Link? Blue, underlined piece of text? Something leading to somewhere? A relation or a reference?
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.
An Introduction To Websites With a little of help from “WebPages That Suck.
1.  Use the anchor element to link from page to page  Configure absolute, relative, and hyperlinks  Configure relative hyperlinks to web pages.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
Web Design March 21, Agenda Return graded work Review / Discuss Homework Assignment Unit 6: Web Authoring Software Lesson Objectives: Students develop.
Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.
Table Row Table Data ( Header & Data) Data Cell Padding TABLE.
1.Go to Appfurnace website and Create an account *AppFurnace only works on Google Chrome or Safari.
Creating Links. The Anchor Element: The anchor tag can be used in three different ways: 1.External link – to link to a web page outside your own website.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
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.
Google Docs, Forms and Video Mashup Using HTML5 for Assessment Applications Robert Workman Southern Connecticut State University
A New Page to Add-On Your Multimedia Page. Creating a New Page Open up a new Windows Notepad Click File > Save As > My Computer > “your flash drive” Name.
HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
Links Building a Website Lesson 5. Links There are various ways to use links on a website: Link to other sites Link to other pages on the same site .
ASP.NET Rehab AlFallaj. Manualy type the following code for iframe tag in the aspx source code.
Chapter 8 HTML Editors. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors Text editors don't have word processing features.
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
KompoZer. What is it? A FREE product used to design websites A FREE product used to design websites A WYSIWYG HTML Editor A WYSIWYG HTML Editor –WYSIWYG:
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.
AGCJ 407: Web Authoring in Agricultural Communications Design Characteristics AGCJ 407 Web Authoring in Agricultural Communications.
Design Team: the design team deals with the ideas and the production of the products/applications App design: the app design team creates the company.
Iframe.
Adding Interactivity Comp 140 Fall Web 2.0 Major change in internet usage –From mostly static pages Text Graphics Simple links –To new paradigm.
By This video tutorial will show you how to download Thief The Bank Heist DLC full game free on your Xbox 360.
Unit 3: Understand Multimedia Production and Web Design Objective 3.02: Develop Webpages Section A: Introduction to Web Development and Standards.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
My Website By : Peter Problems while building website These are the problems I had to overcome while building my site. Getting pictures to be the same.
Unit 2, Lesson 5 Website Development Tools
Table of Contents Creating Frames Frameset Tag and its attributes
Unit 2, Lesson 5 Website Development Tools
Creating a Successful Web Presence
Table of Contents Creating Frames Frameset Tag and its attributes
The Website Foundation
The Website Foundation
Table of Contents Creating Frames Frameset Tag and its attributes
Building a Custom Gadget in OU Campus
Dreamweaver Basics.
Menu.
Presentation transcript:

I-Frames By Josh Gallagan

Why I-Frames Allow you to keep main page consistent Allow you to keep main page consistent Only the content refreshes in the I-frame Only the content refreshes in the I-frame Gives the feel of a dynamic website Gives the feel of a dynamic website Allows great flexibility, but still a stable environment Allows great flexibility, but still a stable environment No slow downloads of graphics = less bandwidth = less $ No slow downloads of graphics = less bandwidth = less $ Can use with WYSIWYGs Can use with WYSIWYGs

I-Frame Example

Live I-Frame Example

The I-Frame Code

How I-Frames Work

Link Targets 1. If you set the target attribute of a link to "_blank", the link will open in a new window. Blank Blank 2. If you set the target attribute of a link to "_self", the link will open in the same window. Self Self 3. If you set the target attribute of a link to "iframe", the link will open in the iframe. Iframe Iframe

Link Targets Ctd Blank Blank If you set the target attribute of a link to "_blank", If you set the target attribute of a link to "_blank", the link will open in a new window. the link will open in a new window. Self Self If you set the target attribute of a link to "_self", If you set the target attribute of a link to "_self", the link will open in the same window. the link will open in the same window. Iframe Iframe If you set the target attribute of a link to "iframe", If you set the target attribute of a link to "iframe", the link will open in the iframe. the link will open in the iframe.

You Try It 1. Go the site ame=tryhtml_link_target and test the link targets. ame=tryhtml_link_target ame=tryhtml_link_target 2. Use the I-Frame tutorial I gave you. In Notepad, create a website using the code.