Every thing you need to know about designing your website from start to finish… - Stage 3 (Part 1)

Slicing your designs
Once all designs are set up correctly in Photoshop/Fireworks they are ready to be sliced. Slicing means to separate your design into different images that will be used as ‘building blocks’ to construct your site in HTML. Fig. 1 below shows an example of how I sliced up Frou Frou Designs (link the name to www.froufroudesigns.com.au) main template. I have split apart the slices so you can see each one clear.

  Fig. 1 – A sliced design.

Naming, optimising and saving slices
Once you are finished slicing, you will need to name all the slices. Slices should be named according to what they are – for example the top slice in Fig. 1 was named ‘top_header’. Optimising an image involves specifying the format of an image and finding an appropriate balance between image quality and file size.  An image’s file size is determined by the type of image and the quality you set it to be.

Images for the web can be saved in three formats - .gif, .jpeg and .png. .Gif’s are the smallest in file size and are used mainly for line drawings and simple images like graphs or solid colour illustrations.

1. .Gif images can be made from up to 256 colours which determine the quality. A .gif  set to 256 colours will be higher in quality and larger in size than a .gif set to 126 colours.
2. The .jpeg file format is used for complex images and pictures. You can set the quality of a .jpeg by specifying a percentage value. Normally .jpeg’s used in websites are set to around 60% quality.
3. .PNG  images are high in quality and were designed to replace the .Gif.  Normally .PNG’s are used when a good quality transparent image is required.

After you are done naming and optimizing all your slices, you will need to save them. Usually they are saved in a folder called “images” in your websites directory. 

Rollover Images
A rollover image is an image which usually consists of two states – the first state is when the mouse is not over the image and the second state is when the mouse is over the image. Rollover images are commonly used for buttons and involve a change in the second state like a change in colour. To create a rollover image you would need to save a copy of the image in both states. When the image is ready to be inserted into the website you would specify which image is for each state.

CSS or Tables?
There are a few ways to set up or code your website but the most common is with CSS (Cascading Style Sheets) or Tables. Most designers still develop websites using tables and have not adopted the more efficient way of CSS. I unfortunately, until about 6 months ago, was one of those designers until I saw the light of CSS! Trying to explain CSS and tables would entail another series of articles in itself, so I will just explain the main benefits of using CSS over tables.

• A CSS style sheet is an external file separate from the HTML document which stores a collection of rules and styles that are applied to an entire website. If you want to make a change throughout the entire site you only need to change the style sheet.
• Tables are designed for tabular data, not laying out designs. CSS has better control over the look and feel, and the positioning of a layout in a website.
• Since the file is stored separately to the HTML document this reduces the amount of code on each HTML page which makes it faster to load.
• Complex layouts can be created easily and are more flexible in CSS than in Tables.
• CSS can provide greater accessibility within a website.

If you want to know more about CSS, there are a lot of great articles on the net – just type “Benefits of CSS” into Google and read away!

I think that’s enough to digest for today, next week we will finish the construction stage by going though creating templates and pages, SEO (Search Engine Optimisation) and adding functionality to your website using BC.

Til next time
Jill McMahon