HTML and CSS Reference
In-Depth Information
11 Using DOM to Enhance
Web Pages
Introduction
The Document Object
Model (DOM)
The Document Object
Model (DOM) is an
application programming
interface (API) that
identifies interfaces,
semantics, and
relationships, and allows
JavaScript and other
languages to dynamically
manipulate and update
the structure of the
underlying document.
The core parts of the
DOM are the scripting
language, the markup
language, and style sheets.
The DOM's simple and
hierarchical naming system
makes certain objects
on a Web page, such as
images, forms, and layers,
accessible to scripting
languages, which allow
the appearance of the
Web page to fit a specified
circumstance.
In Chapter 10, you learned to write JavaScript user-defined functions to add scrolling
messages and pop-up windows to your Web site, to validate user entries on Web forms,
to make calculations from user input, and to format output to a text field. This chapter
builds on those skills and others you have learned so far by introducing the Document
Object Model ( DOM ), a c ombination of technologies that includes HTML, Cascading
Style Sheets (CSS), and a scripting language, such as JavaScript, which used to be referred
to as DHTML. The DOM will make your Web pages more dynamic. In this chapter,
you will use DOM to manipulate image objects. You will create four Web pages that
incorporate a navigation bar using image rollovers, display a random image when a Web
page loads, showcase a slide show, use a floating image as a link to a pop-up window, and
use pop-up captions to display additional information.
Project — The Hickory Oaks Forest
Preserve Web Site
You are on the Web development team for Hickory Oaks Forest Preserve, which is
redesigning its Web site to incorporate DOM technology. The new design includes
a navigation bar that uses image rollovers as links to three different Web pages about
the nature center, the gift shop, and the trails. For consistency, every Web page uses
the same navigation bar. The home page uses a random number generator to display
a different image every time the user reloads the page.
To make the Hickory Oaks Forest Preserve Web site more interesting, you will have
the Nature Center Web page automatically start a slide show displaying different images
of trees. You will have the Gift Shop Web page use a floating image to add animation
to the page, which stops when the user places the mouse over the image and starts up
again when the user moves the mouse off the image. If the user clicks the floating image,
a pop-up window displays with a coupon. For the Trails Web page, you will add pop-up
captions providing more information about certain aspects of the trails. A pop-up caption
is text that appears when you hover the mouse pointer over an item on the screen; the
text provides additional information about the item. The Web pages provided in the Data
Files for Students contain embedded CSS to format and place text and images. Later in
the chapter, you will enter additional CSS selectors and properties related to the pop-up
captions and images.
Figure 11-1 shows the completed Hickory Oaks Forest Preserve Home page and
the three supporting Web pages with dynamic elements.
HTML 508
 
Search WWH ::




Custom Search