How to Create Advanced Web Page Layouts for Your Business Website - dummies

How to Create Advanced Web Page Layouts for Your Business Website

By Greg Holden

People with some experience creating business websites typically use tables for layout. They might be right up the alley of an adventurous type who wants to start an online business.

Set the tables for your customers

Tables are to designers what statistics are to sports fans. They provide another means to present information in a graphically interesting way. Tables were originally intended to present “tabular” data in columns and rows, much like a spreadsheet. But by using advanced HTML techniques, you can make tables a much more integrated and subtle part of your web page.

Because you can easily create a basic table using web page editors, such as Dreamweaver, GoLive, and Expression web, starting with one of these tools makes sense. Some adjustments with HTML are probably unavoidable, however, especially if you want to use tables to create blank columns on a web page. Here is a quick rundown of the main HTML tags used for tables:

  • <table> </table> encloses the entire table. The border attribute sets the width of the line around the cells.

  • <tr> </tr> encloses a table row, a horizontal set of cells.

  • <td> </td> defines the contents of an individual cell. The height and width attributes control the size of each cell. For example, the following code tells a browser that the table cell is 120 pixels wide:

    <td width=120> Contents of cell </td>

Cells in a table can contain images as well as text. Also, individual cells can have different colors from the cells around them. You can add a background color to a table cell by adding the bgcolor attribute to the <td> table cell tag.

The clever designer can use tables in a hidden way to arrange an entire page, or a large portion of a page, by doing two things:

  • Set the table border to 0. Doing so makes the table outline invisible, so the viewer sees only the contents of each cell, not the lines bordering the cell.

  • Fill some table cells with blank space. They act as empty columns that add more white space to a page.

The page appears to be divided into three columns, but the “columns” are cells in a table with borders that aren’t visible.


Break the grid with layers

Tables and another set of virtually obsolete layout tools called frames bring organization and interactivity to web pages, but they confine your content to rows and columns. If you feel confined by the old up-down, left-right routine, explore layers for arranging your web page content.

Layers, like table cells and frames, act as containers for text and images on a web page. Layers are unique because they can be moved around freely on the page — they can overlap one another and “bleed” right to the page margin.

Layers carry some big downsides: You can’t create them with just any web editor. Microsoft Expression Web is a good choice because it lets you create layers using cascading style sheets (CSS) commands so they display accurately by almost all browsers.

With either Dreamweaver or Expression web, you can draw a layer directly on the web page you’re creating. You add text or images to the layer, and then resize or relocate it on the page by clicking and dragging it freely. The result is an innovative page design that doesn’t conform to the usual grid.

Achieve consistency with Cascading Style Sheets

Cascading style sheets (CSS) are the tools of choice among designers who want to observe standards that have been established on the Internet and who want to make sure their web pages appear the same from browser to browser. If you have a choice on how to lay out a page, and you want to precisely position items while creating layouts that are easily updatable, look into CSS.

If you want to create full-featured, cutting-edge layouts, you need to use CSS. The major web design programs — Dreamweaver, GoLive, and Expression web — all support CSS designs. Rather than learn CSS from scratch, choose one of these applications and let it do the work for you.

Standards like CSS and XML are important because they enable you to reach the widest set of viewers possible. A style sheet is a document that contains the formatting for a web page. By separating the formatting from the content, you quickly apply the same formatting to multiple web pages.

You can also update the design of an entire website easily: Rather than change a heading from Arial to Verdana 20 separate times on 20 web pages, for example, you change it once, and all the pages that have the style sheet attached to them have their headings updated all at once.