Chapter 7. Page Layout 101

The Web was originally invented to help scientists exchange information, not to compete with the sophisticated design of newspapers, glossy magazines, or TV. Controlling a page's layout remains one of a Web designer's greatest challenges. The increasing expectations of Web surfers have forced designers to push HTML into new territories , and the primary weapon in this battle has been the HTML <table> tag.

Though originally intended to display tables of data, many Web designers use the <table> tag primarily for arranging elements on a Web page, as shown in Figure 7-1.

Figure 7-1. Underneath many Web pages is an invisible skeleton that gives the page form and structure. HTML tables let you control the placement of graphics, text, and other elements on a Web page with accuracy. Without tables, Web contents would simply flow from top to bottom on a pageboring!

Of course, trying to force a round peg into a square hole isn't always easy, and for years , designers had to twist the <table> tag to their own ends, resulting in complex and byte-heavy code that was difficult to update. However, sophisticated browsers like Internet Explorer 5 and 6, Mozilla, Opera, and Safari give designers a wider variety of options. These days, three basic design approaches are the most popular:

• Strict table-based layouts . This method uses only tables to position elements on the page. Frequently, this old-school approach requires merging cells across rows and columns , nesting tables within tables (a cumbersome technique) and the excessive use of table elements just to create margins, gutters, and areas of white space.

• Tables and Cascading Style Sheets . This combination approach sticks with the seasoned and reliable <table> tag to create basic layout areas, but employs CSS for more sophisticated formatting like margins, white space, borders, and backgrounds. This type of design is easier to create and makes for smaller Web page files than the table-only method. It also overcomes some of the cross-browser problems you'll encounter with the next technique. (The tutorial on Section 7.12.3 has an example of this method in action.)

• Cascading Style Sheets . CSS offers absolute positioning (discussed in Chapter 8), which means that, in theory, you can abandon tables completely and have total control over layout. Many sites now use CSS only. However, not all browsers display these designs correctly, and those that do don't always display them the same way. In fact, to get this type of design to work accurately, you may find yourself having to resort to as many tricks as you do with strict table-based layouts.

Fortunately, Dreamweaver provides the tools for creating any of these types of design. In this chapter, you'll learn about Dreamweaver's advanced table tools that let you build beautiful table-based layouts; in the next chapter, you'll learn how to maximize the power of CSS. With these toolsand this bookyou'll soon be gliding along the path to attractive, effective Web pages. (If you can't wait to get started using Dreamweaver to create advanced layouts, see Section 7.12.3 and follow the tutorial.)

But before you jump immediately into Dreamweaver's tools for creating table-based layouts, you should learn about a new addition to Dreamweaver 8, which makes creating sophisticated layouts substantially easier: guides.