Graphics Programs Reference
In-Depth Information
Understanding Layout Techniques
It is important to understand how Web design has evolved because it will help you to
have a better understanding of current layout techniques.
Traditional HTML Layout Techniques
In the earliest days of the Web, text and images were aligned to the left of the page.
Designers soon discovered that they could use tables to provide a vertical and horizontal
structure for the content of a Web page. This grid structure provided some fl exibility in
arranging the content and elements in the Web page. Although this method was used
effectively for many years, the resulting HTML code is cumbersome because tables
were designed to display tabular data, not to provide hidden structure for the pages.
Even though tables are not the method used to structure Web pages today, you will still
encounter pages that do use tables to structure content. Because of this, you will learn
more about this method when you add a table to the site in another tutorial.
The second traditional method for structuring pages was frames. Frames divide a Web
page into multiple HTML documents. Each frame contains a single HTML document with
its own content and, if necessary, its own scroll bars. A Web page with frames is held
together by a frameset, which is a separate HTML document that defi nes the structure
and properties of a Web page with frames. This method is outdated and rarely used now.
Current CSS Layout Techniques
CSS page layout is the current standard for laying out professional Web pages. This
method of page layout uses div tags and Cascading Style Sheets (CSS) rather than HTML
tables or frames to structure content in a page. In CSS page layout, the div tag is com-
monly placed around text, images, and page elements to structure and position the
chunks (or divisions) of content in the page. The
div tag
creates a transparent, block-level
container in a Web page to hold content. You can place almost any other tag in a div tag.
As with other tags, you can add CSS styles to a div tag. You adjust the layout of pages
by creating styles that position the divs in the page. Although this sounds simple enough,
it can be a bit challenging because different browsers react slightly differently to the
styles you create and because users have different monitor sizes and use different screen
resolutions for display.
Positioning Div Tags in Web Pages
There are two general methods for positioning div tags in Web pages: absolute and
fl oating.
Absolute positioning (AP)
enables you to specify the exact pixel in the browser
window in which the upper-left corner of the div tag will be placed.
Floating positioning
enables you to create fl exible designs that vary in size and position in response to the
user's monitor size and screen resolution. Although absolute positioning seems like a
great idea, it is diffi cult to use effectively for page layout because users set their monitors
to display at different resolutions. However, designers sometimes use absolute position-
ing in very specifi c cases to achieve certain effects. Floating positioning is used more
frequently for page layout.
Floating positioning relies
heavily on the float attri-
bute to position the divs in
a page.
Comparing Types of Floating Layouts
The three general types of page layout that use fl oating divs are fi xed width, liquid, and
elastic.
Fixed-width
layout lets you set a specifi c size for the pages. Fixed-width pages display
at the specifi ed size in the user's browser, regardless of the user's screen resolution. In
some cases, the page is justifi ed to the left of the browser window when the user's screen
Search WWH ::
Custom Search