Designing Browser Based Materials

Recently, at a community college where I teach multimedia, there has been a effort to consolidate numerous smaller departments into larger ones. Multimedia is to be place with the IT department. The new chair and I discussed Web development teaching assignments. During this conversation he said, "I don't care if they (the students) can put in a "picture" on a page or not as long as the code is correct !"

I didn't respond, because I didn't really know what to say. I know that my code is good, but I wanted to ask if he has seen a Web site lately, it's all about "pictures," graphics, layouts and design. For this reason, this tutorial will be concerning page design and layout.

Side Bar: "To Code, or Not to Code?" This is one of the most ask questions by those who are just beginning to create browser based materials. The answer is — well, yes and no. Some of the best pages were designed by artist who worked with programmers that wrote the code. With applications such as Dreamweaver and Go Live, pages can be created with little or no knowledge of HTML coding. However,if you want complete control of browser based materials, especially blogs, you need at least a speaking vocabulary or a rudimentary knowledge of HTML code.

Layout Rationale

Divs with CSS are the standard for page layout elements, however, tables can still be used on web pages. To creatively and effectively do well designed page layoout map out or drawithe page before starting. Definitions can be in absolute measurements such as pixels (px) or em or they can be in percentages making the p[ages very fluid. Here are the most commonly used Web page layout templates.

One Column

In this scheme, the total width of the page has no visual divisions. This page is contained within a single cell of a table (a nested table may be used within this cell to contain interior elements). Sometimes called a "splash page," these pages often contain logos, flash animations or other movies and simply have an "Enter Here" to access the remainder of the site.

Side Bar: A banner is the top area or a graphic that stretches across the top of many Web pages. Any page layout can be with or without a banner.

  An example of one column page layout, Stink.com, has both a centered logo and a centered title. This page has no banner. Navigation is text links below the logo. This legendary site is noted for its roll-over animated gif logo. Go and play with the logo.

One + One Column

This design is of one very large column, minimum of 75% or more of the page area, and a smaller ribbon located to the left or right. One of the more popular conventions as the side section is often used for buttons and other navigational elements.

  The smaller + one column is usually on the left side and is often the area used for navigational elements. However, some designers have experimented with placing it on the right side as in the example below.

One + Two Column

This scheme has one larger section in the center and two smaller segments on either side. This design is often used for pages that need an area for a high number of links. Care should be taken as the smaller areas do not appear cluttered and thus the page is visually busy.

Two Column

   Separated so that 50% of the visual space is on either side of a center vertical, this model is often used to shorten lines of text for ease of reading. Care should be taken as this can become very visually boring if not broken up with other visual elements.

Two + One Column

Two larger columns with one smaller ribbon either to the right or left identifies this page layout. This design is another used on pages that need areas for large number of links. Again the areas become cluttered with links and images and thus the page appears visually busy.

The smaller area in the two + one column layout may be used as a navigational area or, as in this example, simply a design element. Some designers have used this very creatively with the visual separation at the edge of a 15" monitor. On a 15" monitor the page appears to be two column, however, on a 17" or larger monitor, it is two t one column.

Multiple Columns

Any layout with three or more columns is considered to be multiple column. Because of its complexity is very difficult to design, however, if done well, it produces an outstanding page.

   Multiple column can be any combination from pages that seem to have three columns to those pages that have a staggered layout as the page below.