• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Working with Layout Tools > The Quest for Layout

The Quest for Layout

Today's Web page designers have a variety of technologies available to build pages and lay them out in a way that is not as limiting as early HTML. Three HTML layout options in particular—tables, frames, and layers—offer the Web designer more options than ever.

GoLive takes this "evolution" one step further with a very unique feature—the layout grid. Think of the layout grid as an interface to an automatic table generator. Layout grids "create" sophisticated tables that automatically include HTML code to maximize the display consistency among browsers. Of course, the value of grids is that you can use them to create sections for a page, and you can position text, graphics, and other HTML objects anywhere you choose—without having to work with HTML code.

Layers and Cascading Style Sheets

Version 4 of the HTML specification—the document that describes all elements in the language—included a major new tool for building page layouts. Layers (GoLive refers to them as floating boxes) allow you to position objects on the page without any regard for their relative location. In other words, where tables and layout grids always have some connection to the origin of the page—the upper-left corner of the page—layers are defined by the distance in pixels from the origin and thus, float on the page. You can use layers to position text, images, and media objects or even to edit animations.

A floating box, like many other tools in the Objects palette, can be placed onto a layout grid. Unlike layout grids, floating boxes can be placed anywhere on the page, and at any point in the design process.

Finally, a unique advantage of floating boxes is that you can place several of them atop each other, so they can overlap.

In summary, many of the positioning features of the layout grid can be realized using floating boxes, although page designers who need to support pre-4.0 browsers should not use them.

You'll find a complete discussion of layers in Chapter 12, "Layers and Positioning." For more on tables, read Chapter 7, "Working with Tables."

Tables vs. Grids: Which is Better?

Both traditional tables and GoLive layout grids are, in fact, HTML tables.

Layout grids are also useful tools for Web page designers, who can use them to position objects with pixel-level accuracy—making it possible to choose the exact location in the layout where an object will appear—though you should not expect that level of accuracy when a page is actually viewed in a specific browser. Objects you drag around a layout grid will snap to the grid when you complete the drag, allowing you to arrange them along the horizontal and vertical gridlines. Layout grids are also easy to build and change as you work with them.

Despite their flexibility as a way to build pages in GoLive, grids do make it even more necessary than usual for you to check your page design in several browsers as you build it to make sure that objects on a grid appear where they should, especially in relation to one another.

In some cases, a layout grid is not the right choice. Use a table instead if you are building a design containing content whose size varies by browser, such as text, which is rendered at a substantially larger size by PC browsers than by Mac browsers. This is also true of HTML for elements (see Chapter 8, "Working with Forms" ). In a similar vein, stick to a table if you want to align text with an image, since you can keep the two in a single cell, and thus maintain their relationship.

If you decide to use layout grids, keep them simple. Don't load up a single grid with lots of objects (if you have 20 objects or more, chances are that the grid is too complicated) and use multiple grids if you need to build a more complex layout. Make sure that your grids are arranged vertically, not side-by-side. This keeps both grids simpler, since a grid that appears to the right of another grid must include extra code for needed columns.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint