Create Three Column Page

Issue

The newspaper-like, multi-column format is very useful for presenting a number of short segments of information. A common example is a “portal” page that presents summaries of various other pages or sections within the site. In situations where many links to other pages are displayed, or linked graphics are shown, a three column format brings all the choices onto the page in an easy to read single view.

Figure 1: The Look of a Three Column Page

The multi-column page usually presents a “tighter” look with small font size. This allows more short bursts of information to be presented in the space.

Solution

The solution is to use the SQI pre-packaged markup with its associated style sheet formats. A simple copy-and-past process provides the framework for the three column look.

Markup Framework

Steps to create a new three column page are:

1. Open a new window, or tab, to work in while keeping this recipe open for reference.

2. Create a new empty page.

3. Copy the framework below and past into a new page.

   = Page Title =
   
   [[HTML(<table class="front-page"><tr><td class="front-page-left3">)]]
   = First Heading First Column =
   
   
   
   [[HTML(<!-- --- SECOND COLUMN STARTS ------ -->)]]
   [[HTML(</td><td class="front-page-center3">)]]
   = First Heading Second Column =
   
   
   
   [[HTML(<!-- -------  THIRD COLUMN STARTS -------------- -->)]]
   [[HTML(</td><td class="front-page-right3">)]]
   = First Heading Third Column =
   
   
   
   [[HTML(</td></tr></table>)]]
   

4. Replace title and heading placeholders with actual text and start development of the page.

Discussion

The three column formating uses the [[HTML()]] macro to place standard HTML into the page formating stream. By using the pre-package markup block you don't need to know any of the HTML formating. However, if you already know a little HTML this provides an example of increasing control of a page look.

A second part of the markup is the style called for with class=”front-page-left3”, class="front-page-center3" and class="front-page-right3". This controls the font, font size, margins, etc. The complete look can be changed across all the pages using these classes with simple edits to the style sheet. If you want a different look, or even small modifications, contact the SQI support staff.

Indexing and Searching

This article focuses on the formation of a page. However, the real goal is to publish and mature the page content so that the right information is available to staff and clients at the moment of need (see Instant Publish / Instant Access). Access to information on the page is enabled by KnowledgeDex – the Enterprise Search technology.

Text on the page created is captured by KnowledgeDex on every indexing cycle. Thus, all new or changed information contained within the page can be accessed by a world class search capability immediately.