Chapter 10
Organizing Your Web
Pages Visually
In This Chapter
Creating effective borders
Floating elements
Using the clearproperty with floats
T
his chapter focuses on two ways to visually organize a Web page: adding
borders around elements, and floating elements on the page.Borders can be a good way to help your viewers understand the layout of
your page, its various zones, and their purposes. Paragraphs are a way of
dividing text into logical units — the reader knows that a paragraph division
indicates a new idea, or further expansion of the idea in the previous
paragraph.Similarly, paragraphs themselves can be grouped into larger logical units. For
example, a Web page may be subdivided into a section describing your com-
pany, another section containing links to various locations in the Web site,
and yet another section advertising your latest product.Each of these sections might contain several paragraphs, but you group them
together because they belong together logically.Paragraphs can be grouped in many ways. Headlines or sub-heads, for exam-
ple, group the paragraphs that follow them. Horizontal lines (<hr>) can be
used to effectively divide groups of paragraphs. Or you can resort to less-
elegant visual zoning by coloring the background of the paragraph groups
using different colors (this last approach isn’t recommended except for
Web sites designed for kids).Finally, you see how to exploit the useful floatproperty to allow elements
to flow around each other, such as a paragraph of text that seems to enclose
a photo.