Free Resources
New Hot Searches
Webmaster Tools
Visit Our Sponsers
KompoZer
A FREE WYSIWYG Web Page Editor
How to Create a Multiple Column Layout for your Website using KompoZer
If you look at the design of many websites, you will probably notice that most of them have multiple columns of text and graphics on each page.
Since KompoZer does not allow you to arbitrarily position text and graphics on your web page, nor does it allow you to easily create multiple columns using Cascading Style Sheets (don't worry if you don't know what this is) from the WYSIWYG interface, you will have to use an old webmaster trick to accomplish this. Here is where the table creation tips that you learnt in the previous chapter of this tutorial come into play.
If you have not done the exercise given in KompoZer Tutorial 3: How to Create Data Tables for your Web Page because you thought you will never need to use tables, you should return to that chapter and try it now. I will assume that you already know how to create and configure tables in this chapter.
For those of you who arrived at this page without reading any of the preceding chapters, and want to start at the beginning, you can find the first guide of KompoZer tutorial here.
Creating a Two Column Layout for Your Web Page
The aim of this section is for you to create a page that looks something like the following:
Steps to Take
The basic idea here is to create an invisible table that has the number of columns you want. The table is configured so that it fills the entire width of the browser window.
Start KompoZer with a blank page.
Insert a table with "Table | Insert | Table". When the dialog box appears, click the "Precisely" tab at the top of the dialog box. In the fields that appear in the dialog box, specify 1 row and 2 columns. Leave the default width of "100% of the window" as it is. In the "Border" field, enter 0 to replace the default border value. You are creating a table without any lines that occupy the entire width (100%) of the window. Click OK when you are done.
Move your cursor into the left column (eg, by clicking in the blank space in that column with your mouse), and type the text shown in the picture above. The underlined items in my diagram represent links to the other pages on your site. They are the same links that you have been using in the earlier chapters of this tutorial. For your ease of reference (if you have been using the same page names that I have given in the earlier chapters), the links point to the following pages:
- Home (index.html)
- About Us (aboutus.html)
- Feedback Form (feedback.html)
- Reciprocal Links (links.html)
- Site Map (sitemap.html)
Before you carry on further, save the page. When prompted for a title for the page, enter "Reciprocal Links". For the filename, enter "links.html". Don't get creative here (unless you know what you're doing): if you change the filename or the title of the page at this point, you will need to go back and change all the links that you have already created in the earlier chapters of this tutorial.
Once you have saved the page, you can open it in your web browser to verify that your links were coded correctly and appear normal. You need to do this because KompoZer doesn't render the left column correctly, making it difficult for you to check visually in the web editor.
Now move your cursor to the right column (eg, by clicking in it). Type the main content of your Reciprocal Links page here. If you have no idea what to type, use the example text given in the picture above as a temporary placeholder. The URLs for the links in the diagram are as follows:
"Please let us know" (feedback.html). Note that this sentence is just a placeholder until you get real links to place here. Once you have something, you can delete the sentence "If you wish to exchange link with us, please let us know" or, at your option, leave it above (or below) your list.
I'm sure you have noticed that the width of the right column expanded as you typed your text. KompoZer mimics the behaviour of a web browser when rendering table columns that do not have an explicit width setting. While a column that changes its width dynamically according to its content is acceptable for most data tables, it is not what we want when we use (or abuse) a table as a container for our page content.
Another problem is that the text on your page is centered vertically, that is, if you don't have much text in that particular column, it will appear in the centre of your page.
To fix this, move the cursor to the left column (e.g., by clicking in it). Select "Table | Properties" from the menu. Click on the "Cells" tab at the top of the dialog box that appears. Click the checkbox for "Width" to select it ("Width" can be found in the "Size" section). Type 20 in the Width field. Change the drop down box for "Width" from "Pixels" to "% of table". Under "Content Alignment", check the "Vertical" box, and select "Top" from the drop-down box beside it. Click the OK button.
The left side of the table should change its width. If the width is still not acceptable for your content, try again and use a different number till you are satisfied with the width of the left column.
Once you are satisfied with the width for the left column, repeat the procedure for the right column. The width for the right column should be 80 if you used 20 for your left column (ie, 100% - 20% = 80%). If you've used a number other than 20 for your left column, subtract that number from 100 to get the value you need to enter. Remember to set the vertical alignment value to "Top" for this column as well.
Many people use a different colour for their navigation panel (which is what the left column of your page currently functions as) to distinguish it from the main content of your page. To do this, make sure your cursor is in the left column, and select "Table | Table or Cell Background Color" from the menu. Select a colour other than black, blue or purple. Actually, you are free to select whatever colour you want.
But if you select either black, blue or purple, you will find that some of the text becomes extremely difficult to read under certain circumstances. If you can't decide, choose one of the yellow-based colours. For example, I selected the "#ffcc66" colour. (Every colour you choose has an associated colour value. This value appears in the "Hex" field at the bottom of the dialog box. If you want to choose the same colour I did, click on the colours until you find one that has "#ffcc66" appearing in that field.)
When you're done with your changes, save the page and publish it.
How to Create a Three-Column (or More) Layout
Although you will not be creating any three-column page for the purpose of this tutorial, if you find you need such a layout, simply enter the required number (eg, "3" for a three-column page) instead of "2" for the "Columns" field when you create your table.
Special Cases
Sometimes you need to create a page that is basically two columns but with a single column either at the top or at the bottom of the page. For example, you may want to put a banner at the top of the page that spans both columns. Or you might want to put a copyright notice at the bottom of the page that stretches from the left side of the page to the right.
The easiest way to do this in KompoZer is to simply place the banner or text before (or after) your table. Another method is to create a table with more than one row, and join the cells in top row (or the bottom row) so that there is only one column for that row. I leave these special cases as an exercise for those interested.
Creating a Site Map
At this point, you have sufficient knowledge to create a respectable-looking website with multiple pages. You can now consolidate your knowledge by creating (on your own) a Site Map for your website.
A Site Map is a page that links to every important document on your website. Such a page is a useful aid to your visitors in case they want to locate a particular page quickly. It is usually present in well-designed sites with multiple pages, and is one of the facilities that improve a site's usability. Although your site has only a few pages at present, and all of them are listed in your left-column navigation panel, it is a good practice to always create a site map for your sites (unless the site only has one or two pages).
Related Pages:
WebBusinessReviews.com
WebBusinessReviews.com's
Members Area
Includes Free: Video Tutorials, Guides, Unlimited Downloads, ebooks, Free PLR Products and lots more...