Softcome guide

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.ProgrammingNow 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.vooweb.com 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 IntegrationWhat 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 vooweb.com 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.