Alignmentexplains the way pictures and text
line up. The content on a web page should be visually connected
to everything else. As a designer, you will want to create strong
lines within each web page to make it appear more organized and
visually appealing. This can be done by carefully considering the
alignment of text. Center alignment is generally difficult to read
for most viewers. Strong left or right alignment looks more professional
and clean as does this justified text. Lack of consistency in alignment
is a very noticible design flaw so choose one alignment type and
use it for the entire web page or site.
Here
are examples of
the three types of
vertical alignment.
Open
House
Temple High School
413 South 31st Street
Temple, Texas 76501
Center Alignment
Open
House
Temple
High School
413
South 31st Street
Temple, Texas 76501
Left
Alignment is also called flush left, left justified or jagged
right. Right alignment is also called flush right, right justified
or ragged left
Open
House
Temple
High School
413
South 31st Street
Temple, Texas 76501
Horizontal
Alignment and Vertical Alignment
Horizontal alignment is just as important to web pages
as the vertical alignment. Text should be aligned
on the same "baseline" or bottom line. Generally speaking
Images should also be aligned so that they are aligned with the
top or bottom of text blocks. Review the example below.
Rules of Thumb
1. Avoid placing items arbitrarily
and mixing alignments
2. Remember that center alignment does not make professional looking
pages
3. Avoid aligning text to left edge of browser page or to the
top of page
4. Aligning of all elements along one edge makes a page visually
cleaner
5. Turn borders off tables when making colums and rows
6. Remember that the alignment of images with text is also important
Image Alignment
When it comes to working
with text and images web design can be particularly complicated.
This is because of the way graphics "float" next to text.
Images move with the text as web pages are resized so it makes it
rather difficult to control their placement. The solution for most
web designers is to use tables and cells to "contain blocks
of text and their corresponding graphics. This allows the precise
placement of all elements in a web page. For an example of how this
very web page has been arranged into tables note the dotted lines
in the example below:
Each
of the squares in this web page represent a table cell much
like the ones you would see in a Spreadsheet application.
The graphics and text have been arranged into the cells to
provide structure to the page. The cells are really invisible
so that visitors cannot actually see them.
For more information
about web page layout
see the following sites:
