Dreamweaver CS6: The Missing Manual

Types of Web Page Layouts

Being a web designer means dealing with the unknown. What kind of browsers do your visitors use, will your design work in all browsers, and so on. But perhaps the biggest challenge designers face is creating attractive designs that work across different size screens. Monitors vary in size and resolution, from petite 15-inch 640 x 480 pixel displays to 30-inch monstrosities displaying, oh, about 5 million x 4.3 million pixels. (In addition, designers now have to cope with the very small displays found on millions of cell phones and other mobile devices. Chapter 11 has information on how you can use CSS to create sites for those devices.)

Note

A new approach to web layout, called Responsive Web Design, uses a liquid layout and some fancy CSS to completely change a page’s design at different screen resolutions. That is, you can create one design for a phone, a different design for a tablet, and a third layout for desktop browsers. You’ll learn about this technique, as well as a new tool in Dreamweaver CS6 to build these kinds of layouts, in Chapter 11.

Float-based layouts offer two approaches to this problem: fixed-width or liquid layouts (the latter also called fluid layouts). A fixed-width layout gives you the most control over your design but can inconvenience some of your visitors. Folks with really small monitors have to scroll to the right to see everything, and those with large monitors see wasted space that could display more of your excellent content. ...