Chapter 10. Breaking the Design Down into Manageable Chunks

In previous chapters, Ken decided to use tables for his layout and he made a sketch of his design. As Ken looks at his design, he wonders how he can easily control the layout with one large table. There will be a lot of rows and columns, with some information spanning several columns. But, what if he breaks the page up into manageable chunks (tables).

 

The top part can be one table with two columns (cells). The first cell contains his business name and tag line. The second cell contains the main navigation links for the web site. So, for this table and contents, Ken only needs to use the following HTML tags — table (start a table), tr (table row), td (table definition), h1 (heading level 1),  p (paragraph), and a (anchor or link).

 

The three column format under the top part can also be a table with one row, but with three cells. The first cell contains a drawing of a golfer, the second cell contains unique content for the web page, and the third cell has the latest news. The layout works for the home page. For the other pages, Ken will only use two cells — one with the golfer image that he will carry across all web pages and one for the unique content for that page. Since there is not a third cell for these additional pages, the second cell is wider. In addition to the HTML tags used so far, Ken just needs to use an additional tag – img (image) .

 

The bottom bar, with the contact information will be a table with one row and one column.

 

Ken finds that he doesn’t need to use a lot of complicated HTML tags to build his web pages. Ken builds a simple prototype page and gets five people that can play the role of consumers looking for custom golf clubs. He gets their input and review comments on the design. Based on those comments, he makes several improvements that will help meet his target audience wants and needs.

 

The next design step is to use CSS to add style to the web page. This is a fun thing to do.

Chapter 9. Sketching the Design

Ken has looked at other web sites and has a good idea of what he wants his web site to look like. He wants a crisp clean look. He knows that for his target audience, too much technology such as Flash will just get in the way of the reader finding the information they are looking for. Ken likes the clean look of web sites like the Mayo Clinic, many government web sites, or a Bill Gates business venture web site he found. If it is good enough for them, it is good enough for him. He wants his site to include:

• His business name and tag line in the upper left corner
• The main navigation links for the web site across the top, next to his business name and tag line
• A three-column format under the top header. The first column contains a drawing of a golfer. The second column contains content information relating to a specific page. For the home page, this will be Ken’s value proposition. The third column contains the latest news about new products or the golfing industry. Only the home page has the latest news column. Other pages will just have two columns — the drawing and unique content for that page.
• At the bottom of the page is a bar across the page that contains his address and contact information.

Ken sketches his web site design on a sheet of paper. Now, he needs to determine how he will layout the web page using HTML code. The next step is to break the design down into manageable HTML chunks.