The World Wide Web is the major lane of the Information Highway. Students must not only learn to search and find information on the Web, but also use, qualify, interpret, expand, arrange or rearrange, change, correct and control this information. One look at the popularly and growth of such sites as MySpace.com or YouTube.com graphically show how students want to have control or at least some effect on the web.

Initially, browser based referred to materials only used for the World Wide Web but it has evolved to much more. Browser materials are used not only for the Web sites which includes Blogs, but it also has become a major tool for instructional modules and it has also become the standard for the electronic portfolio.

Blogs

Blogs began as a frequently updated online personal Web journal or diary, which showed such things as travel logs, family or personal events and personal ideals or concepts. Now they have become a forum for political views, personal philosophy, educational philosophy and place to preview products — anything you want to share with the rest of the world. Blogs can also allow for response which gives gives the end-users an interactive connectivity. RSS (Really Simple Syndication) facilitates broadcast and publication of podcasts, news and any other materials to a user who subscribes.

Most of the soft wares used to create blogs are free. The operation of the software range from the simple and limited to the very complex and everything in between. Since Blog space is often free, I personally feel that all teachers and / or classes should have a blog.

Web Sites

From its very meager beginnings of black text on white pages, web sites have grown into major colorful and interactive, multimedia pieces containing sound, music and video. There are more than two million new web sites being created each month.

Electronic Portfolio

Although a well developed resume is a very important, more and more both colleges and perspective employers are asking for proof of skills and other materials which is in the resume. The electronic portfolio helps provide the evidence.

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

Frames and CSS may be used for page layout elements, however, tables are the major control used on the majority of browser pages. To use layout tables effectively, the columns (up and down), rows (left and right) and cells should be mapped out in a drawing before starting. Definitions should be in absolute measurements of pixels (px). The width of a total page should be between 600 px. to 925 px. The height of a single on-screen page is approximately 480 px.

Here is an example of a drawing for a page. The size of individual cells is often governed by the size of graphics, images or the text information that is to be placed within the cells. Smaller tables may be embedded within larger cells for more precise control.

Page Layout

Although table layout is created in rows, traditionally, page design has been defined in tall, up-and-down or columns. Some designers have experimented with left and right or row definitions, however, this tutorial will be in column definitions. 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 + 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.