FIT5900 :
Dynamic HTML, Cascading Style Sheets, Document Object
Model
In the previous lecture:
Perl is a little bit
like a bag of magic tricks which you can use to amuse your friends, amaze your
Mum and write useful CGI scripts - thanks to its easy maintainability and powerful
web-friendly features.
In this lecture:
- What are DHTML, CSS and the DOM?
- What are they used for?
- Why are they so frustrating for programmers and web designers?
References:
- Goodman, D., Dynamic HTML, the Definitive Reference, O'Reilly, 1998,
Chpt's 1-3
- Holzschlag, M., Web by Design, the Complete Guide, Sybex, 1998, Chpt's
9, 20
- Flanagan, D., JavaScript, the Definitive Guide, O'Reilly, 2nd edn,
1997, Chpt's 1, 14
Dynamic HTML (DHTML)
- There is no Dynamic HTML "standard".
- DHTML is a collection of technologies which operate on HTML to make
web-pages dynamic.
- It consists of a scripting language, objects on which the scripts act
and a means for specifying the look of HTML content. These are provided
by JavaScript, the DOM and CSS respectively. Details are provided below...
- DHTML technolgies differ between operating systems, browsers and browser
versions.
This makes it a logistical nightmare to ensure everyone looking at a web page
can experience the dynamic content.
An example of a DHTML page at PHP (which nevertheless
includes some poor interface decisions... what are they?)
Platform-Specific Issues
"Should I have a static page which everyone can look at, or a dynamic
page which only people using a certain platform can experience?"
- A platform is any hard/soft-ware system forming the basis for product development.
Developer product |
Platform |
Operating system |
micro-processor |
Applications software |
operating system |
Peripheral |
hardware & operating system |
Website |
browser brand, browser version, browser operating system... yikes! |
Strategies for accomodating the mis-matched capabilities of multiple platforms
include...
Page branching
- Supply different versions of pages for users with browsers of differing
capabilities.
- Users may manually select which pages to view.
- Client-side scripting can be used to direct users to the appropriate pages
automatically.
Internal Branching
- Instead of supplying seperate documents, supply documents with internal
branches to generate appropriate content "on the fly".
e.g. JavaScript code containing the branches...
if (browser==navigator)
then blah;
else if (browser==explorer)
then blech;
else blooh;
|
- This strategy will only work for users with DHTML-enabled browsers, but
it can be used to create pages suitable for the different browser brands.
- At the start of each document establish a variable which determines the
kind of browser (e.g. Navigator and Explorer are the main two) into which
the page has been loaded.
The Lowest Common Denominator
- This method is really tough!
- Even though the documentation might say "This feature of X is supported",
chances are that it is supported "in a different way" from browser
to browser.
- The best way to do this is to start creating your pages for Navigator 4
- much stuff will still work in Explorer.
The reverse is not necessarily the case!
Cascading Style Sheets (CSS)
- Style sheets are a means of specifying the style in which a page element
is rendered.
- Style sheets maintain separation between the page element rendering style
and its content.
- Cascading Style Sheets (CSS) Levels 1 and 2 and CSS-P (Cascading Style Sheets-Positioning)
are style sheet specifications.
(The rules laid down by the spec's cascade to allow the resolution
of conflicts between rules which apply to the same HTML element.)
- Style sheets may be altered by scripts to change style rules after a page
has loaded.
- Style sheets may be used to specify fonts, colours, text alignment, margins
and other aspects of presentation outside the usual features of HTML.
- Style sheets may be used to create layers of HTML elements and to position
them at specific locations on the page (no need for complex tables to do your
page layout!)
Style Sheet Examples
<P STYLE="font-size:
20pt; color:#FF00FF">Some stylized text</P>
|
Some stylized text
|
But more usefully...
<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?
|
Linking external style specifications...
<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.)
Why is this useful?
Positioning elements in layers at specific
locations on the screen...
<HEAD><TITLE>Positioning Elements</TITLE></HEAD>
<BODY>
<IMG SRC="images/lect1/drymud.JPG" STYLE="position: absolute; top:
30px; left: 30px; z-index: 1" width="300" height="200">
<H1 STYLE="position: absolute; top: 50px;
left: 30px; z-index: 2;">
THE TEXT I WROTE
</H1>
</BODY>
|
What does this do?
|
The Document Object Model (DOM)
- When an HTML page is loaded, the browser creates a "document object
model" (i.e. a model of the objects in the document) which may
be accessed by a script....
...*NB* the DOM is not the script, but the organization of objects
upon which the script operates...
- Document "objects" include frames, forms, buttons, images, text-entry
boxes or any element which a script may access.
- Scripting languages operate on the objects to change their properties after
an HTML page is loaded.
- E.g. in Navigator 3+, image objects are scriptable... they can be accessed
by a script after a page has loaded.
Use this feature to swap image content when the mouse moves over the image...
an image-swapping mouse rollover.
- Frustrating note: the document object models of Navigator and Explorer differ.
In the version 4 browsers, Explorer leads the way in that every HTML element
is accessible to a script. Future browser versions are expected to further
enhance the possibilities of DHTML.
- ECMA-script is a "politically neutral" scripting standard which
Netscape and Micro$oft happily adhere to in their version 4 browsers (with
JavaScript and JScript respectively).
This lecture's key point(s):
- As you've seen (because you've used JavaScript and the DOM already), DHTML
is a powerful tool for increasing the interactivity of a web page.
- Be careful about cross-platform issues when using DHTML.
- CSS may be very useful for creating 'designed' pages and consistently
styled web sites.
FIT5900
courseware | FIT5900
lecture notes
©Copyright
Alan Dorin & Jon McCormack 1999,2000