DHTML Positioning and Layout. What is DHTML? HTML and xHTML CSS JavaScript or VBScript.

Slides:

Advertisements

Similar presentations

LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.

Advertisements

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.

Week 10 Creating Positioned Layouts

© 2011 Delmar, Cengage Learning Chapter 10 Positioning Objects with AP Divs.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.

Using CSS for Page Layout. Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

Tutorial 4 Creating Special Effects with CSS

MORE Cascading Style Sheets (The Positioning Model)

Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

DHTML - Introduction Introduction to DHTML, the DOM, JS review.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

Tutorial 4 Creating Special Effects with CSS

CSS Positioning Creating Special Effects with CSS CS202 Working with Cascading Style Sheets (Chapter 4) CS202 1.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.

Creating an Animated Web Page

Working with Objects Creating a Dynamic Web Page.

CITS1231 Web Technologies JavaScript and Document Object Model.

XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page.

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.

DHTML - Introduction Chapter Introduction to DHTML, the DOM, JS review.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.

CSCE 102 – Chapter 6 (Web Design and Layout) CSCE General Applications Programming Benito Mendoza Benito Mendoza 1 By Benito Mendoza.

DHTML: Working with Objects Creating a Dynamic Web Page.

Introduction to Programming the WWW I CMSC Summer 2003 Lecture 7.

Chapter 8 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 8 Sebesta: Programming the World Wide Web.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

Interface Programming 1 Week 3. Interface Programming 1 CALENDAR.

DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.

XP Review 2 New Perspectives on JavaScript, Comprehensive1 Introducing Cascading Style Sheets Formatting Web Pages with CSS.

ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming DHTML Example.

Cascading Style Sheets Positioning Controls Visibility.

INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.

Positioning and Printing Creating Special Effects with CSS.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

Cascading Style Sheets Positioning Controls Visibility.

Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.

Tutorial 4 Creating Special Effects with CSS. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Work with CSS selectors.

Tutorial 4 Creating Special Effects with CSS. XP Objectives Work with CSS selectors Create styles for lists Create and apply class styles Create a rollover.

CSS Positioning & Layout Creating layouts and controlling elements.

Tutorial 4 Creating Page Layouts with CSS

Cascading Style Sheets CSS2 - a bit more advanced.

The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript.

Today’s objectives  Announcements  Positioning  Measurement units.

Chapter 10 Dynamic HTML (DHTML) JavaScript, Third Edition.

XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 6 1 Creating Dynamic Pages.

Working with Dynamic Page Layout Maureen Smith Professor, Saddleback College CIM 271B - Tutorial 1.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript.

Chapter 13: DHTML: Object Model and Collections CIS 275—Web Application Development for Business I.

CIS 375—Web App Dev II DHTML. 2 Introduction to DHTML _________ HTML is “a term used by some vendors to describe the combination of HTML, style sheets.

Working with Cascading Style Sheets

Putting Things Where We Want Them

Programming the Web using XHTML and JavaScript

Chapter 13 - Dynamic HTML: Object Model and Collections

Tutorial 6 Creating Dynamic Pages

Working with Dynamic Content and Styles

Tutorial 4 Creating Special Effects with CSS

Introduction to DHTML, the DOM, JS review

Positioning Boxes Using CSS

Presentation transcript:

DHTML Positioning and Layout

What is DHTML? HTML and xHTML CSS JavaScript or VBScript

What Can You Do? Position Elements Hide/Reveal Elements Create Animations And much more….

Positioning Objects CSS-P Now part of CSS2 position:position_type; left:value; top:value Left: from left of parent Top: from top of parent Parent: Item the object is under in the DOM (1.16)

Positions Absolute Defined coordinate, regardless of object's position (1.07) Relative Relative to its location in the natural flow of the document – difficult with just one object because browser resolution varies Use relatives when objects are positioned in relation to one another (1.08)

More Positions Fixed Places an object in one location in the display window and does not move Static Lets the browser place the object in it's natural flow

Layering Objects (1.09) z-index:value = default Web page If 2 objects have same z-index... The one defined later in HTML script is on top.

Object Visibility (1.10) visibility: visible inherit (from parent) hidden (takes up space in document flow) display:none

Overflow and Clipping (1.11) width: value; height: value absolute or relative units, or a percentage of parent unit overflow_type: visible hidden scroll auto

Da DOM Document Object Model (1.16) In theory it makes every object on a Web page available to you Doesn't always work because Netscape and Microsoft use different variations of the DOM for DHTML IE 6.0 and Netscape 6.2 getting extremely close 01.asp 01.asp Of course, Netscape 6.x DOM is nothing like 4.x…Oi!

Element Collection Can use JavaScript to refer to collections of objects/elements (1.17) document.collection[i].property document.collection.id document.links[0] document.collection["id"] document.links["Home"] document.links.Home

Some Cross-Browser "Gotchas" containers Netscape document.layers.id IE document.all.id document.id

Another "Gotcha" Referencing Nested Objects Netscape document.id1.document.id2.document.id3 document.Greetings.document.Title IE id3 Title

Get the "Gotcha" Taking care of cross-browser functionality Browser detection (1.21) var bName=navigator.appName; var bVer=parseInt(navigator.appVersion); var bVer=parseFloat(navigator.appVersion); IE 5.0 returns a variable of 4.0. IE 6.0 works.

Browser versus Object Detect Script Let's look on 1.22 Object can work in most cases

Cross-Browser Branching Design three pages IE Netscape Other Pages

API Application Programming Interface It's a.js file Write your cross-browser scripts once and only update as needed Go through the positioning objects using the API ( )

Netscape Greater flexibility with object position and movement IE doesn’t have this Table on 1.32 shows these methods

Link to the API Make sure to place the API reference after all other script and style tags in the because of Netscape.

Movement We'll discuss movement (Session 1.3) and move into dynamic content (Tutorial 2) next week