|
Using
"white space"
HTML
Add "lead"
using spacer GIFs
When using spacer GIFs to add
white space around your type, adopt the method preferred by most Web designers:
incorporate the vspace and hspace
attributes.
For example, rather
than laying out your spacer GIFs like this:
<IMG src="spacer.gif" width=150 height=100>
place them this
way:
<IMG src="spacer.gif" width=2 height=2 hspace=74 vspace=49>
If you compare the
two approaches you'll see that the second one yields a cleaner, faster
page.
What's a spacer GIF?
Spacer GIFs are to Web typography as thin pieces
of lead are to traditional typography. In traditional print layouts, blocks
of metal type were separated by thin pieces of lead (usually measured
in points), hence the term leading. In Web typography, without
the aid of Cascading Style Sheets, Web designers are
limited to using a 1-pixel transparent GIF, usually called a spacer
GIF, to separate lines of type
CSS
Cascading Style Sheets Cascading Style Sheets
are a big breakthrough in Web design because they allow developers to
control the style and layout of multiple Web pages all at once. Before
Cascading Style Sheets, changing an element that appeared on many pages
required changing it on each individual page. Cascading Style Sheets work
just like a template, allowing Web developers to define a style for an
HTML element and then apply it to as many Web pages as they'd like. With
CSS, when you want to make a change, you simply change the style, and
that element is updated automatically wherever it appears within the site.
Both Navigator 4.0 and Internet Explorer 4.0 support Cascading Style Sheets.
If you needed any more proof of the problem-solving nature of CSS, the
World Wide Web Consortium (W3C) has recommended Cascading Style Sheets
(level 1) as an industry standard.
I deliberately put a border around both of these
so you could see the "spacer.gif"
The blue
example uses a spacer GIF (in the middle cell) with
height and width dimensions set
to 100 and 150. The red example, however, incorporates the hspace
and vspace attributes to load the spacer GIF at its
original 1-pixel size, accomplishing the same effect as the blue example.
|