CIS 397—Web Design - Missouri State University

Download Report

Transcript CIS 397—Web Design - Missouri State University 

CIS 375—Web App Dev II
DHTML
Introduction to DHTML



_________ HTML is “a term used by some vendors
to describe the combination of HTML, style sheets
and scripts that allows documents to be animated."
DHTML is NOT a _____ standard.
HTML 4.0 introduced two new important
technologies:




CSS
DOM
A _________ language allows you to control HTML
elements.
With DHTML, a Web page may look great in one
browser and horrible in another.
2
DHTML and CSS

Positioning text relative to normal positioning:
h1 {position: relative; left: 10;}

Positioning text absolutely (10 _____ from the left):
h1 {position: absolute; left: 10;}

Visibility of an element (default is “________”):
h1 {visibility: hidden;}

Z-index—higher indexes overlap lower indexes:
h2 {z-index: 2;}

Filters add special effects to text and _______:
h1 {width: 100%; filter: glow;}
3
Background Effects

A single image remains ______ upon scrolling:
<head>
<style>
body
{
background-attachment: fixed;
background-image: url("bulboff.gif");
background-repeat: no-repeat;
}
</style>
</head>
4
DHTML and DOM


The Document Object Model gives us access to
every _________ in a document.
The element must have the ____ attribute for the
scripting language to have access.
<h1 id="header">My header</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red"
</script>

The actual content of an element can be changed.
<h1 id="header">Old header</h1>
<script type="text/javascript">
document.getElementById('header').innerHTML="New header"
</script>
5
DHTML and Event Handlers

Elements can be made to change when an event
occurs.
<h1 onclick="style.color='red'">Click on this text</h1>

Some obvious events (see examples):








onfocus
onblur
onclick
ondblclick
onload
onmouseover
onsubmit
More examples
6