HTML and CSS Reference
In-Depth Information
Overview
As you read through this chapter, you will learn how to use DOM with JavaScript to
create dynamic pages as shown in Figure 11-1 on the previous page by performing these
general tasks:
Create a navigation bar using image rollovers for all Web pages.
Create a Home Web page that displays a different random image each time the Web
page is loaded.
Create a slide show on the Nature Center Web page showing different types of trees.
Create a floating image on the Gift Shop Web page that also serves as a link to
launch a pop-up window.
Create pop-up captions on the Trails Web page to provide additional information
about selected terms.
Plan
Ahead
General Project Guidelines
In creating a complex Web site with multiple Web pages, you should determine what pages
will be created and what content each page will contain. In addition, you should determine
the links to other pages. The Hickory Oaks Forest Preserve Web site contains four Web
pages. The main Home page has links to three other pages: Nature Center, Gift Shop, and
Trails. Each Web page uses the same navigation bar with image rollovers as buttons. The
Home page uses a random number generator to display a different image each time the
Web page is loaded. The Nature Center Web page has a slide show. The Gift Shop Web page
has a floating image and uses a pop-up window that displays a coupon for the preserve's
gift shop. The Trails Web page uses pop-up captions to provide more information about the
plants and animals you might encounter and observe on the trail. When necessary, more
specific instruction concerning the above guidelines is presented at appropriate points
in the chapter. The chapter will also identify the actions performed and decisions made
regarding these guidelines during the creation of the Web pages shown in Figure 11-1.
Document Object
Model Techniques
The DOM techniques
used to create these Web
pages are designed for
use in Microsoft Internet
Explorer 9. Because not all
browsers recognize objects
in the same way, these
techniques may not work
or may yield unexpected
results in other browsers.
The DOM hierarchical
naming system makes
objects on a Web page,
such as images, form
components, layers, and so
on, accessible to scripting
languages. Because style
sheets control position or
location of objects, they
allow a scripting language
even greater control over
these objects. The DOM
naming system uses these
objects to create a tree-
like hierarchy of parent
and child relationships. In
this hierarchy, each object
is a node.
The Document Object Model (DOM)
Each section and component on a Web page is an object, and the Document Object
Model (DOM) allows scripting languages such as JavaScript to access and manipulate
those objects. The DOM allows developers to use a combination of HTML objects, tags
and attributes, style sheet properties, and scripting languages to create Web pages that are
more animated and more responsive to visitor interaction than basic HTML Web pages.
With DOM, a developer is able to identify objects, such as graphics, and position,
replace, or move them anywhere on a Web page. Positioning specifies the placement of
elements, such as text and graphics, on a Web page. Dynamic positioning of elements
is a key feature of modern Web pages and makes the Web pages more appealing and
interactive.
 
Search WWH ::




Custom Search