This definition is broad enough to cover animations elements moving across the page over time, new interaction models drag-and-drop, and new controls sliders, combo boxes, and in-place e
Trang 1P A R T 2
Trang 2What You Should Know About
DHTML and script.aculo.us
DHTML is the term assigned to a collective set of technologies used to create dynamic
web content, including HTML, JavaScript, and CSS The dynamism in DHTML comes
from the fact that we’re modifying the structure and presentation layers of the document
(HTML and CSS) after the page has been loaded This definition is broad enough to cover
animations (elements moving across the page over time), new interaction models
(drag-and-drop), and new controls (sliders, combo boxes, and in-place editors)
DHTML isn’t a special language; it’s just a term for what becomes possible when the
DOM APIs for markup and style are made available to JavaScript Some of it relies on
sta-ble, agreed-upon standards like the DOM; some of it relies on the mystical APIs that were
introduced a decade ago as part of the browser wars It exists at the intersection of the
visual and the analytical, making designers and developers equally uncomfortable
We’ll deal with the analytical parts as we go The visual parts require a crash course
in CSS concepts and a quick look at the APIs that let us control how elements are
dis-played through JavaScript
Introducing the CSS Box Model
Web design is all about rectangles, to put it plainly Every element represented visually
is a rectangle of some sort (That we aren’t dealing with circles, triangles, or irregular
polygons is a blessing Be thankful.)
Typically, these rectangles are placed onto the page in a way that represents their
hierarchical relationship The rectangle created by a table cell, for instance, will appear
inside the one created by its table row A parent element, then, acts as a containing block
for its children
193
Trang 3This is the default rendering behavior for most elements because it’s a visual
con-veyance of the elements’ semantics Most parent-child relationships have meaning A list
item belongs to an unordered list; a legend belongs to a fieldset; a table cell belongs to a table row
As you’ll learn, though, there are ways to override this default arrangement With CSS, you can have near-perfect control of how elements are placed
Visualizing with Block-Level Elements
Visually, most elements are represented as blocks—big rectangles, if you prefer—and are thus called block-level elements.
As the primary pieces of page construction, block-level elements are broadly cus-tomizable Through CSS, you can control their dimensions, colors, and spacing Also
remember that many CSS properties inherit—some properties defined on an element
propagate to its children unless specifically overridden
Block-level elements have implicit line breaks If there are two paragraph
ele-ments in a row, for instance, the second will render below the first By default, they
won’t compete for horizontal space Figure 9-1 illustrates this behavior
Figure 9-1.The markup on the left translates roughly to the structure on the right.
But, as Figure 9-2 illustrates, any element can be made to behave like a block-level element, even if it isn’t one, by setting that element’s CSS displayproperty to block
C H A P T E R 9 ■ W H AT YO U S H O U L D K N O W A B O U T D H T M L A N D S C R I P T A C U L O U S
194
Trang 4Figure 9-2.An element meant for inline display can act like a block-level element if its CSS
display property is changed.
Formatting Blocks with Inline Elements
Other elements don’t lend themselves to block formatting Many—like anchor (a),
emphasis (em), and strong (strong)—are meant to be formatted within the lines of a
paragraph or other block-level element They’re inline elements—small rectangles, if
you prefer—and are not as greedy or imposing, space-wise, as their block-level
brethren Figure 9-3 illustrates
Figure 9-3.By default, inline elements adopt the size and shape of the text they envelop.
Inline elements can contain text and other inline elements, but not block-level
elements:
<! RIGHT: >
<p><strong>Never pour salt in your eyes.</strong></p>
<! WRONG: >
<strong><p>Never pour salt in your eyes.</p></strong>
Trang 5Inline elements don’t have implicit line breaks If you wish to start a new line, you
must use a line break (br) or wrap at least one of the elements inside a block-level element
You can make any element behave like an inline element by setting its display prop-erty to inline
We’ll revisit inline display later For now, though, let’s take a closer look at block dis-play and the box model
Thinking Outside the Box: Margins, Padding, and Borders
The box model is day-one material for those learning CSS But even experts can be sur-prised by its nuances
The dimensions of an element are nominally controlled by the CSS widthand height
properties, but these control the dimensions of the usable content area, not the entire box A block-level element can also have padding (space inside the box) and margin
(space outside the box)
In between margin and padding lies the box’s border A developer can also control
a border’s thickness, color, and style (see Figure 9-4)
Figure 9-4.An illustration of common measurements in the CSS box model, along with related DHTML properties
C H A P T E R 9 ■ W H AT YO U S H O U L D K N O W A B O U T D H T M L A N D S C R I P T A C U L O U S
196
Trang 6This might all be clearer in example form (see Figure 9-5):
<! HTML: >
<p id="box">Never pour salt in your eyes.</p>
/* CSS: */
#box {
width: 50px;
height: 50px;
background-color: #ddd;
margin: 25px;
padding: 10px;
border: 5px solid #aaa;
}
Figure 9-5.The visual result of the given markup and CSS