Guide to DIY site building

By RICHARD WOOD

The Google search engine became a close friend in my challenge to build websites for free.

Searching the internet with words such as "free" can really send you round the bend, and not surprisingly, creating websites is huge topic. Paid services abound and many sites bundle site creation with everything else they do.

But my aim was to avoid all that and go straight for the number-eight-wire approach.

My target was easy-to-use web creation tools that I could download on to a bog-standard Windows-based PC. But I needed quality software too, software that would organise and create a consistent design across the entire site.

It became clear early on that I would need an HTML web page editor, pre-designed graphics, and a content management system (CMS).

The first two are easily found, in fact you can create HTML web page designs in a good word processor if you want.

Finding a free content management system was more difficult. Most of the free ones originate on the Linux operating system. They require database systems and special programming languages and don't have much Windows documentation.

But I persevered. I wasn't going to be satisfied just telling you to link together your word documents.

And after searching for a month on and off I found Citydesk from Fog Creek Software, a tool so handy I'll simply direct you straight to it.

It has a free offering that can handle up to 50 files or pages and, stretching the brief of this article, if you pay US$79 ($143) you can take that to 500.

Citydesk is similar to high-powered database-driven content management systems but operates in a different, and much easier, way.

It is simply a Windows program that merges your article files with your design templates to generate HTML pages and automatically upload those to your website. It took me two nights to produce the first version of my ITKiwi.com news site. I later changed to a more sophisticated product.

When your site is on the web it has no database behind it, holding the site content. But because the program has pre-generated every possible page that could be delivered, it doesn't matter.

Citydesk maintains a simple article database on your PC with fixed fields such as headline, author, teaser, body, keywords, and publish from and to dates. There is little flexibility here, but that's the theme - something that is simple and works. If you want to peer under the hood, Citydesk is using a Microsoft Access database format to store your information.

In each article you can tell Citydesk which template to use, and it picks up headlines, teasers, and body text according to what you specify.

You can find free templates on the web and adapt them to Citydesk - Free Layouts has 500 to chose from. But I couldn't find designs I liked for my purposes, so I started from scratch.

Citydesk has its own web-page editor built in, but I found it just too basic, so it was off to Google to find a freebie.

There are some quite sophisticated HTML editors free on the web. They can flip back and forth from the HTML code and what your page will look like as you place graphics. But I warn you, this is not quite desktop publishing.

I tossed up between two specialty tools. Sothink and ACEhtml both offer demo versions of professional products. I went with Sothink.

The prime components of HTML web page are tables, often of unspecified dimensions. These tables have rows and columns, complicated by the ability of cells within the resulting grid to "span" across adjacent rows and columns if necessary.

Tables can also "nest" within tables, allowing for even more complex box-within-box pages.

Try to keep it simple to start with or you will spend hours trying to understand what's going wrong.

The main complication is that the rows and columns don't necessarily have a fixed size - they can adapt to different browser window sizes if you let them.

Save frequently and make extra copies of designs you like, in case you muck up the one you're working on.

The fun part is adding colours and text. Text sits within the cells and can be aligned left, right or centred. Colours for fonts and cell backgrounds may be selectable from a colour wheel, and/or may be defined by a six-digit "HEX" code such as 00FF00. (Each set of two digits can have a value from 0-9, A-F and corresponds to the quantity of red, green, and blue respectively.)

In most cases your site may look pretty dull or boxy until you get some clip art on it, although I admit I avoided it.

If you have your own scanner, camera, and design tools you will be able to create your own graphic designs. Otherwise use a search engine such as Google and hunt the web for "free web graphics".

You will find sites such as GoGraph which can provide free downloadable items.

Depending on the site, some free graphics are available for general use, while others are only for personal or non-profit use.

Remember, each graphic may also need to be aligned within the cell it is placed in. Usually, you access such settings by right clicking on your mouse.

When you have your template design together make sure you've got into the right file in Citydesk and add your variable names in the right places.

Citydesk comes with a basic loop script on the main page to create an article list on your main page, but you can adapt that as required.

You can have as many folders as you like within the system and it's worth learning how to make your own loops so you can generate other lists on your site.

This may sound like programming, but the Citydesk folk have made a great effort to limit its complexity.

Within a day or two I was being tricky by giving loops special variable names of their own so I could use them across different templates.

Fog Creek Software

Free Layouts

ITKiwi.com

Sothink

ACEhtml