CSE3325: Dynamic HTML, Cascading Style Sheets, Document Object Model


In the previous lecture:

In this lecture:


References:


Dynamic HTML (DHTML)

Have a look at the PHP (PHP: Hypertext Preprocessor) web page for alternatives to JavaScript.


Platform-Specific Issues

"Should I have a static page that everyone can look at, or a dynamic page that only people using a certain platform can experience?"

Strategies for accommodating the mis-matched capabilities of multiple platforms include...

Page branching

Internal Branching

The Lowest Common Denominator


Cascading Style Sheets (CSS)


Style Sheet Examples

This first example employs style sheets inline:

<p style="font-size: 20pt; color:#FF00FF">Some stylish text</p>

Some stylish text


This second example employs style sheets across a single document:

<head>
<style type="text/css">

em { background-color: #ffff00; color: #0000ff }

h1 { font-family: Arial, Helvetica, sans serif; font-size: 24pt}

p { font-family: Times, serif; font-size: 18pt }

.codeTextStyle { font-family: Courier, serif; font-size: 12pt }

</style>
</head>

<body>
<h1>Exciting News!</h1>
<p>Here is something to <em>read</em> on a rainy day.</p>
<BR><BR>

<span class="codeTextStyle">

for (i=0; i<10; i++)<br />
{ printf("I must not throw stones at passing cars\n"); }<br />

</span>
</body>

What does this do?


This third example shows style sheets (that are probably being employed in several documents) being employed to an entire document:

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>


In the file (styles.css for example) you put everything that would normally fall between the <style> tags. (Don't put the <style> tags themselves in the style file though.)

NOTE: Linked styles (from files) are over-ridden by document specific style sheets (from a document header) which are over-ridden by inline styles (from an XHTML tag). This "cascade" of specifications gives Cascading Style Sheets its name.

Positioning elements in layers at specific locations on the screen...

<head><title>Positioning Elements</title></head>

<body>
<span style
="position: absolute; top: 30px; left: 60px; z-index: 1">
<img src="images/lect1/drymud.JPG" alt="dry mud" width="300" height="200" />
</span>

<h1 style="position: absolute; top: 50px; left: 120px; z-index: 2;">
THE TEXT I WROTE
</h1>
</body>

What does this do?

Note that the <img> tag needs to appear in a 'container' tag such as <span> or <div> and that it is the container tag itself which has the positioning specification in it. (This is just the way CSS is currently implemented)

Here's an example in which two images are overlaid. (It actually works... if you set the transparency of the foreground GIF image properly you can use it as an overlay.)


The Document Object Model (DOM)





This lecture's key point(s):


CSE3325 courseware | CSE3325 lecture notes

©Copyright Alan Dorin 2005