Graphics Programs Reference
In-Depth Information
is larger than the specifi ed page size. In other cases, the page is positioned in the center
of the user's browser window. The display size you set for the page depends on the target
audience. Research indicates that users almost always have at least an 800 × 600 screen
resolution. Pages created for this resolution should have a width of 760 pixels to provide
room for the browser chrome (the borders of the Web browser window including the
frames, menus, toolbars, and scroll bar). Many Web sites are also created at a width of
955 pixels. These sites are optimized to display on monitors set to a screen resolution of
1024 × 768 and higher. This is especially true for sites that appeal to a tech-savvy target
audience, such as microsoft.com and CNN.com .
Liquid layouts adjust to fi t the user's browser width. When the user resizes the browser
window, the page adjusts to fi t the new size. Liquid layouts are sometimes called fl uid
layouts because content seems to fl ow to fi ll the size of the user's browser window.
This type of layout maximizes the use of the available space (sometimes referred to as
browser real estate), but designers have less control over the look of the pages. When the
browser window is particularly wide, content can look sparse and be diffi cult to read.
This type of design limits the control you have over design elements such as symmetry
and white space, and the design suffers as a result.
Elastic layouts are fi xed-width designs that use an em instead of pixels as the unit for
div and text styles. An em is a unit of measurement that is relative to the size of the font.
This enables the text and the page layout to change size when the user's browser dis-
plays font size changes. It does not change when the browser window is resized. When
users can change the text and layout display size in their browser, the site becomes more
accessible for users with assistive devices and impaired vision.
Using Prebuilt CSS Layout Pages
The prebuilt CSS layout pages in Dreamweaver provide designers with files for build-
ing commonly used CSS page layouts. These pages are not templates; they are more
like the basic architecture from which you can create your own designs. There are many
discrepancies in the way that browsers interpret and display CSS layout. These pages
are helpful tools for designers because they contain the fixes that enable the content to
display similarly across the most common browsers. According to Adobe, these layouts
render correctly in the following browsers: Firefox (Windows and Macintosh) 1.0, 1.5,
and 2.0; Internet Explorer (Windows) 5.5, 6.0, 7.0; Opera (Windows and Macintosh) 8.0,
9.0; and Safari 2.0. Without cross-browser fixes in place, creating CSS layouts can be a
frustrating process.
The prebuilt CSS layout pages that use fixed-width, fluid, and elastic layouts contain
div tags, a list of CSS styles, and placeholder content. By selecting and replacing place-
holder content, and by editing the existing CSS styles and creating new styles, you can
create your own Web pages using the prebuilt pages as a starting point. You can also
move the styles to a style sheet and use them in all the pages of your site.
Exploring CSS Layout Code
Prebuilt pages are a good place to start understanding the underlying code used for CSS
layout. Dreamweaver adds comments , which are notes added to the code of HTML
pages that do not get read or displayed by browsers. Comments are often used in the
code of the prebuilt pages to help designers understand what the code is used for and
how it works. It is a good idea to add comments to the complex code to explain what
you have done to other designers. Comments also help you recall what you did when
you need to edit the pages in the future.
Search WWH ::




Custom Search