The purpose of this article is to summarise the process of building a static website using standard technologies such as Photoshop, XHTML, CSS etc.

When building websites for my clients I regularly use a content management system such as Joomla. I will talk about content management systems later in this article.

I generally think about the web design process as split into the following stages...

• Design and preparation

• Programming

• Content Management System (CMS) integration

• Adding content, plugins and developing the site functionality

Design and Preparation

To help you get started with the design you might find it useful to download the 960 Grid template from the following address. 960.gs. Inside the package they have templates files for Photoshop, Illustrator, Fireworks, InDesign etc.

Most designers use Photoshop and/or Illustrator for the design. They are both similar in functionality. Photoshop as the name suggests is generally better for processing photographs and Illustrator is generally better for illustrations such as logos, icons etc.

I prefer to use photoshop but that's only because I am more comfortable using photoshop.

There are essentially two editing methods which are used when creating a design. One method is pixel based and the other method is vector based. An example of pixel based editing is processing a photograph in some way and an example of vector based editing may include the illustration of cartoon character etc. You can shape and manipulate vector images as many times as want giving you much more control over the design. Vector based editing is a skill that requires time and patience to learn but I would recommend focusing your efforts on developing this skill.

The preparation part of this stage referrers to slicing up the design into logical sections. These sections will then be pieced back together in the programing stage. When creating a design it is important to label all of the different layers and group all related layers into groups or "layer sets". This will make life easier when cropping the different parts of the design. The process of cropping or slicing a design can require a lot of consideration depending on the complexity of the design.

What format should I save the cropped files?

There are many different image formats. However, I am only going to mention the three most common formats used in web design and these are PNG, JPEG and GIF.

In general PNGs are useful for images, which require a transparent background. However, transparent PNG's are larger in size in comparison to JPEG or GIF.

The JPEG format is useful if you do not require transparent background images but still require smooth variations of tone and colour. JPEG is commonly used for photographic images, paintings etc.

The GIF format is useful for simple images with solid areas of colour. Due to the colour limitations, the GIF format it is not appropriate for photographs etc. Of course the advantage of using the GIF format is the comparatively small files size.

Programming

Now that you have the individual sections/images of the design cropped and ready it is time to start re-constructing the design using two formatting languages which work together called XHTML and CSS. I will not go into much detail about these languages but in a nutshell CSS is a list of rules, which determine the look and feel of the site as well as specifying the layout of the site. XHTML is used to output these rules to the browser.

NOTE: When building a website using XHTML/CSS it is important to use the validation tool validator.w3.org at regular intervals. This will make it easier to debug your code should you encounter any browser discrepancies.

OK. to summarise...

You have designed the website using Photoshop or Illustrator, cropped the design into logical slices, re-constructed the design using XHTML and CSS and tested the resulting web page on a variety of browsers. As mentioned previously in the article, I do not want to go into too much technical detail as the purpose of this article is outline the various stages for those who are new to web design.

Anyway, now it is time integrate the Content Management System (CMS).

Content Management System Integration

What is a Content Management System?

Think about MySpace, Facebook etc. You can login and edit pictures, text etc. The changes then appear when you view your profile.

Facebook and MySpace both have a system in which you can manage the content yourself.

In our scenario we want to add the same functionality to the web page the we have built. For the purpose of this example we will assume that we are using the Joomla CMS. Joomla is an open source CMS meaning that it is free to use.

Integrating the CMS can be done in various ways but I generally take the following steps:

• Convert XHTML/CSS web page into a Joomla template.

• Upload and install the Joomla CMS onto my web-server

• Upload the converted template to the templates folder.

• Login to the administration section of the website (CMS) and start adding content, plugins etc.

Convert XHTML/CSS web page into a Joomla template

This can seem complex at first but it can be achieved by simply copying and pasting sections of code from an existing template into your index.html file. You just need to learn which parts of the code to copy and paste. You will also need to save the index.html file as index.php.

I will publish a tutorial about Joomla template conversion at some point in the near future.

Upload and install the Joomla CMS onto your web-server

You could install Joomla locally but for the sake of simplicity I will only make reference to the installation of Joomla on a live web server. The simplest most easy way of doing this would be to use Fantastico. To use this application, simply log-in to your hosting control panel (cpanel), click on the Fantastico icon, select Joomla from the list and follow the simple installation instructions.

Upload the converted template to the templates folder

Ok. So you have converted the template and saved it as index.php. You will however, also need to create a file called templateDetails.xml. This file will give Joomla information about the template and allow you to select it as default in the administration section. Again, I will not go into this now.

Inside the folder where all of your files are you should have something like index.php, index.html, stylesheet.css and templateDetails.xml. You should also have an "images" folder for your images. Much of the way you structure your folders is up to you. Now go to the templates folder on your web-server. You can access the files on your web-server using either your hosting control panel of via FTP (file transfer protocol). Upload your folder to the /templates/ directory. Next, login to the Joomla admin and in the template manager section and select your template as default.

Login to the administration section of your website (CMS) and start adding content, plugins etc

This is fairly self-explanatory. You can read tutorials about how to edit and update the content but I feel its better to have a play around and if you come across a problem, use Google to find an answer. It normally works for me.:-)