Phone: 415-963-0926 | 415-963-0927

Web Design Tutorial

Part 2 - Slicing and Coding

In this article I will show you how to create a web page using Adobe Dreamweaver, Photoshop and Fireworks.

The previous section of this tutorial showed you how to create your web sites function and visual identity.

Once you have the visual design of your web site finalised in Photoshop you can start turning it into a working web site. This is the final Photoshop image, as a plain image:

Don't forget to keep saving your work as you go.

The first stage of this process in called slicing. Slicing your image breaks down your large photoshop document into small sections enabling it work effectively as a web page. When drawing your guides consider where the different elements such as links (navigation elements or navbars) and bodies of text will be.

Start by opening your Photoshop document (PSD) in Fireworks and selecting the size you want your web page to be. For this example I have chosen 1000px by 750px. Then using the slices tool slice your image up into as many parts as necessary. The key thing to note here is that I've created slices for the navigation area, which I've decided should be the space underneath the title on the left, and a slice for the content area, which is the large space in the top middle of the image. In a moment we will turn these into content areas, by turning foreground images into divs with a background image. This will allow us to put HTML content in these areas.

Once have sliced your image you are ready to export it to Dreamweaver. Fireworks lets you export your slice image as HTML (a description of the page), CSS (the visual styles associated with it) and a collection of images (the slices that make up your site).

In order to do this you will need to use the export wizard and select a few options. Firstly you will need to choose to export your image to Dreamweaver.

Next you will need to choose the format you would like your slices to be saved as. For this example I have chosen to use JPEGs because they offer you a much wider range of colours than GIFs. This is important if the background of your website is a photograph with lots of colours. If you are simply using a flat colour then then I would recomend using GIFs insted.

The next step is to click on Export you will then be given a new set of options. It is important to save your exported file as "index.html" as this will make your page the default home page when you come to up load it to the web.

Then next step is to ensure that you choose to export your file as CSS and images (.html) rather than the default HTML and images. Choosing this option makes editing your website easier in Dreamweaver. There are also many good reasons to avoid using tables for layout, which is the default.

Once you have clicked Export your original image has now been turned into a HTML document and can be viewed in a web browser such as Firefox. I recommend downloading Firefox if you do not already have it, as it is very good for web development. Once you have downloaded Firefox I recommend that you install a plugin for it called Firebug, which will make your life much easier.

You are now ready to start turning some of your foreground image tags into content areas so that you can add real content to your website:

Go into split view so you can see the code and the graphics at the same time.
Click on the slice into which you want to put content (links, text, images etc), it will highlight the element in the code which represents what you just clicked on in the design. This is an image tag within which is a src="image_name.jpg" attribute - where image_name.jpg for this example is index_r1_c4.jpg - make a note of this filename or cut it to the clipboard.
Make a note of this slice's width and height in pixels - you can do this by selecting the slice in Fireworks with the black cursor tool, at which point you get a read-out of the height and width like this:
Replace the whole <img ...> tag with <div id="navbar"><div id="navbar_inner"></div></div> (I've used navbar just as an example, if you want to make this a content area instead of a navbar then call it content and content_inner).

Then in the stylesheet (index.css) make a new section which should look like:

#content {
  	width:487px;
	height:550px;
	float:left;
	background-image:url(image_name.jpg);
}

#content_inner {
	margin-left:10px;
}

... where image_name.jpg is the name you made a note of just a moment ago, and height and width are the dimensions you recorded with "px" after them to indicate they are measured in pixels. The other code here is float:left which is just the way that Fireworks lays things out, for more information on how this works see this article.
Now click save and you should be able to start adding content to your website!
You may also wish to change the background colour of the site, the font and the style of the links... you can find all of this in the stylesheet.
Now for the background colour, change the second line in the stylesheet. The colours are described in hexadecimal colour format, which you can copy from Fireworks or Photoshop's colour tool / eyedropper.
You can change the font by adding a stylesheet declaration along the lines of :
* { font-family: Courier New; }
You can change the link colour by adding:
a { color: #000000; } (change the colour to your choice of colour as above)
You can add underlines to links by adding:
a { text-decoration: underline; }
You will also need to find and delete this line: text-decoration:inherit;
At this point your website should be looking something like this:

I hope that this article has helped give you an introduction to how web slicing and HTML/CSS coding works. If you want a place to experiment with your website and get it online then check out our web hosting packages and cheap domains.

With many thanks to Justin Flegg for contributing this article - if you're in need of some quality web design please contact him through Digital Crocus on 0845 508 1104.