If you look at the design of many web pages on the Internet, you will probably notice that a large number of them have multiple columns. For example, on thesitewizard.com, most pages have two columns: the left column holds the site logo and navigation buttons while the right has the main content. (Note: you may not see the left column if you're using a smartphone to read this article, since I've moved the left column to the bottom of the page for browsers that have very narrow windows, such as what you have on a smartphone.) It is possible to have more than two columns too. At the time I wrote this, thesitewizard.com's main page has three columns.
Since Nvu 0.90 does not allow you to arbitrarily position text and graphics on your web page, nor does it allow you to create multiple columns using Cascading Style Sheets (CSS) directly 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 Nvu Tutorial 3: How to Create Data Tables for your Web Page because you thought you would never need to use tables, you should return to that chapter and try it now. This chapter assumes that you already know how to create and configure tables.
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 chapter of the Nvu Tutorial at https://www.thesitewizard.com/gettingstarted/nvu1.shtml
The aim of this section is for you to create a page that looks something like the following:
For the purpose of this exercise, you will be creating your Reciprocal Links page using a two column layout. A "Reciprocal Links" page is where people place links to sites that link back to them.
If you decide to keep the two column layout you create here for your site after you finish this chapter, you should go back to the pages you created earlier and modify them. This allows your site to have a consistent feel. That is, if you want a two-column layout for your site, change all the pages on your site to have the same two-column layout. Likewise if you prefer a one-column layout or a three-column layout (and so on), change them to have the same layout. This is not a hard-and-fast rule, just a general recommendation; for example, as noted above, thesitewizard.com (at the time this was written) varies its layout according to its content: it uses a three column layout for its main page and a two column layout for its articles.
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 Nvu 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, 2 columns and a width of 100% (that is 100 % of window). In the "Border" field, enter 0. You are creating a table without any lines that occupy the entire width (100%) of the window.
Move your cursor into the left column (eg, by clicking in the blank space in that column with your mouse), and type the text given in the diagram 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:
If you have forgotten how to create links, you can review chapter 2 again for the information. If you are using Nvu 0.90 (and possibly other versions as well), you might find that the links you create do not appear to have the traditional blue underline. This is due to a longstanding bug in Nvu and its predecessor, Mozilla Composer; don't worry - if you created the links correctly, they will be there when your website is viewed by a browser even if it doesn't appear while you are creating the page.
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 Nvu 0.90 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 diagram above as a temporary placeholder. The URLs for the links in the diagram are as follows:
https://www.thesitewizard.com/gettingstarted/nvu1.shtml)https://www.thefreecountry.com/security/spywareremoval.shtml)I'm sure you have noticed that the width of the right column expanded as you typed your text. Nvu 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.
To fix this, move the cursor to the left colum (eg, 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". 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.
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 "#ffff99" 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 "#ffff99" appearing in that field.)
As it stands, the navigation panel and the text in the right column is centred vertically on the page. To fix it so that all the text starts at the beginning of the page, position your cursor in the left column and select "Table | Table Properties" from the menu again. Click the "Cell" tab. In the "Content Alignment" section, click the down arrow for "Vertical" and select "Top" to align all your content at the top of the browser window. Repeat the procedure with your cursor positioned in the right column.
If you have not already done so, you may wish to change the size of the text and the typeface used to something other than the default. For example, I used the "Helvetica, Arial" option in the "Format | Font" menu for the text. You can also use a graphic image with your site's logo in place of the text "Shakespeare's Website". (Make sure that the width of the logo is suitably narrow so that it can fit into your left column when your site is viewed with a 800x640 screen resolution.)
When you're done with your changes, save the page and publish it.
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.
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 Nvu 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.
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).
You can see an example of a site map by checking out thesitewizard.com's Site Map at https://www.thesitewizard.com/sitemap.shtml. You do not need to use a three-column layout for your Site Map though; the only reason thesitewizard.com's Site Map has three columns is because there are too many pages to list in a linear fashion. Your Site Map can be a straightforward list of links to all your pages if you like. In fact, it is best to keep your Site Map simple so that visitors can find what they want easily. Restrain yourself from making it into such a graphical feast that your visitors have to solve a maze of visual puzzles before they can locate your pages.
In the next chapter, we will create the final page of your website - the Feedback Form page. The latter will allow your visitors to contact you using a web form.
Next: Nvu Tutorial 5: How to Add a Feedback Form to Your Website Using Nvu.
Copyright 2004-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here: Top > Getting Started with Your Website > How to Create a Website > Nvu Tutorial 4: How to Create a Multiple Column Layout for your Web Page in Nvu
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create a Multiple Column Layout for your Web Page in Nvu (Tutorial)
