Dynamic Learning Dreamweaver CS3
Page 4

CSS layouts

The continuing efforts of web designers to find the best design practices have resulted in a migration from table-based to CSS-based layouts. The use of tables for web page layouts is an old technique, preferred for their easy grid-like structure and guaranteed compatibility in most older browsers. However, the positioning flexibility that only CSS offers has made it the standard for today's web designers.

If you're a CSS novice but you want to get started on the right foot, the new CSS layouts in Dreamweaver will quickly get you up and running. Extensive inline comments included in the code will help you learn so that you can sharpen your CSS expertise while being creative and productive.

Choose from lots of ready-to-customize CSS layouts that you can modify with your own content, colors, and images.

Choose File > New. Under Blank Page > HTML, you will see dozens of preconstructed layouts that take full advantage of the flexibility and power of CSS. Press Cancel.

To see an example of a page based on one of these layouts, Choose File > Open. Navigate to the dw01lessons folder and select the CSSLayouts.html document. Press Open. This page is based on the three-column liquid-header and footer CSS layout, which you can find under New Document > HTML.

Left: Dreamweaver’s built-in, three-column, liquid-header and footer CSS layout. Right: A customized version of this CSS layout with some basic formatting.

Leave this file open, as you will use it in the next exercise.

 

Browser compatibility check

For years, web site designers have battled with consistency issues across different browsers, which often leads to sites being geared toward one specific browser or another. This is especially true of CSS-dependent web pages, where varying standards among browsers means lots of testing, trial, and error. Dreamweaver's new Browser Compatibility Check feature locates any potentially buggy CSS and HTML combinations and displays them in the Results panel. By combining Browser Compatibility Check with the CSS Advisor, you can address and resolve any potential compatibility issues without juggling browsers.

The Manage CSS feature and the CSS Advisor

With CSS you can format, fine-tune, and position text, images, and content boxes creatively and precisely on your web page. Dreamweaver CS3 provides several panels, menus, and helpers to get you up and running with CSS. Not all designers follow the same workflow; some like to create styles before adding content, and others may add and edit styles as they progress further into a project. The Manage CSS feature in Dreamweaver makes it possible to easily adjust, move, and transition styles as you work so that you can add and fine-tune styles across multiple pages.

Meanwhile, the software's CSS Advisor feature flags potential CSS-related problems that may surface during the Browser Compatibility checks. The Results panel shows you the exact issue, the page and line number where it occurs, and an online link to the Adobe CSS Advisor so that you can find the best solutions to the problem. It's like having a CSS expert sitting alongside you, ready to help!

Adobe Device Central

The widespread use of Internet-ready devices, such as mobile phones and PDAs, makes it more necessary than ever to adapt your work for multiple sizes and platforms. Dreamweaver CS3 is now integrated with Adobe Device Central, which displays and simulates the appearance of HTML content in a variety of mobile, PDA, and handheld device skins and environments. Adobe adds new device profiles quarterly so that you can always stay on top of the market and make sure your content looks its best. Small Screen Rendering (SSR) mode shrinks images and text to emulate how they will display in a selected device, making it easier and more intuitive to develop rich mobile content.

To preview a page in Device Central:

With the CSSLayouts.html file open, choose File > Preview in Browser > Device Central. Device Central, which is a separate application, launches.

Preview a currently open page in Device Central.

The Device Central application shows the page in the default mobile device. To see how this page will look in a popular mobile phone or PDA, double-click a device name from the Available Devices list on the left. Try the Motorola RAZR listing.

The CSSLayouts.html page, as it would appear in the popular Motorola RAZR phone.

Choose File > Close (Windows) or Device Central > Quit (Mac OS) to exit Device Central. Choose File > Close to close the file.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | PDF Version

If you enjoy our articles, click here to subscribe.
Free JavaScripts provided by The JavaScript Source

©2007 AGI. All rights reserved. Reprinted with permission.