Visual formatting
Accessible Web pages don’t have to look drab. Jazz up your pages with
plenty of color and other formatting.
Choose colors, fonts, text size, borders, margins and more
with styles
The phrase to remember when designing a Web page is “separate presentation
from content.” This means that once you have formatted your document’s
“logical structure”—after you have marked headings, lists, etc.—choose
how those structural elements will look throughout your document with styles
or, more correctly, cascading style sheets (CSS).
Styles
let you tell a browser that any level-two heading, for example, should have
dark blue Arial text with a light blue background and will be 120 percent of
the browser’s default text size. One advantage of using styles is that
you only need to do the visual formatting once and then any level-two heading
you make in the document will automatically look the way you want it. Even better,
you can reuse your styles to give all your pages a consistent look. Styles also
make it easy to change how your documents look—you don’t have to reformat
each block of text individually.
Styles put the directions for visual formatting in a tidy bundle in the head
of your document instead of scattering those directions throughout the code
that describes the logical structure. This makes your Web pages smaller, faster
loading, and easier to figure out if you need to tweak the HTML tags. Most important:
browsers, search engines and other internet devices more easily interpret this
relatively uncluttered code.
Wright State Guideline
- Guideline 2: Logically organize your page and use HTML to encode meaning
rather than appearance—use HTML tags for purpose they were created and
use style sheets where appropriate.
How to...
Creating margins and columns with tables
Web designers commonly use tables to position text and graphics on a Web page.
This practice is beginning to wane as newer browsers give better support for
style sheets. For now, though, tables are still OK and, for many people, a simpler
and safer way to lay out a page.
Table widths
You can give a table either a fixed width or a percent width:
Fixed-width Table
|
This is a fixed, 400 pixel-wide table. Resize your browser window and
this table doesn’t change. If the window gets too narrow, this table
will run off the side of your browser.
|
Percent-width Table
|
This table is 80 percent wide. Resize your browser window and this table
changes to always be just 80 percent of the width of the page.
|
Flexible, percent-width tables are handy in WebCT for accommodating students’
different monitor sizes. The margins like the ones on this page could be made
by putting everything into a one-cell table that’s 92 percent wide, centered,
and has the borders turned off. Instead, the style sheet gives the body tag
four percent left and right margins.
How to...