Zymic

Make a new layer. Now make a selection like below:

Fill the selection in with white, set the blend mode to overlay and the opacity to 16%. Press ctrl+d to deselect once done. Save the document as contentbar.gif - (important.. do not name it any thing else!) My bar is now looking like below:

Now go back to the layout in Dreamweaver, find the below code and add the highlighted code (valign bit).

Again, find the below code and add the valign tag:

In my final result of this tutorial, you will notice I had a welcome image on the front page. I have made one so all you need to do is add your own text etc. The main background was a free photo from: http://www.spoonloads.com/view.php?what=Urban&id=53 in which I modified and added various layers as shown below. Copy the below image into Photoshop.

Add your text and finishing touches. Once done save as welcomeimage.jpg in your images folder.

Now back in Dreamweaver lets add the main content area! Find the below code:

Paste the below code (into the area as shown above).

The content I told you to paste in is all example text (yeah.. I was sad enough to write it), this is just to show you ways you could display the content, of course you can make the content boxes into other things so feel free to experiment and add your real content. The layout is looking pretty good don't you think? We are nearly done, if you have got this far.. give your self a cookie and reward yourself :)

Before I forget, we need to make the package boxes into links. The easiest way to do this is to use the Image-Map feature in Dreamweaver. Click on the first package image and find where I have highlighted.

Click on the rectangle icon and drag a box over the more info area of the image and then edit the link as shown below. Repeat the same process for the other 2 boxes.

Now let's add a copyright bar to the bottom of the layout, we can't afford to miss this out! In your code view find the last </table> tag which is right at the bottom, after that tag paste the below code in. Change the text to your liking.

Okay, lets apply a border to add the finishing touches to the edges of the layout. I have decided to do this in css and also use a dotted image border. First right click > save target as on this link and save the image in your images folder. Now add this CSS code into your head tag:

You should now notice your layout has a simple pixel dotted border on the left and right hand side.

Remember to save your document! Okay, the layouts finished and you want to make the other pages, but how do you make them and where do you add the content?!

I get asked this from time to time, all it is, is a simple File > Save As..., and then you can save it as the new page. For example resave index as support.html

Okay, we have now made a new page called support.html, now we can add the support content.. but how?! Simple, delete the contents of the content table (remember to rename the box "support".

As you can see, the layout will stretch 100%, so no matter how much content you use.. the layout will keep expanding without any dodgey stretches you may get if you would of sliced it. Simply make all your new pages by the simple file > save as method and you should be well on your way.

Apply some link styles to your CSS, add this to your head tag. This will make the text links a lot better unlike those nasty default blue ones.

I'd advise you to validate the code once done, especially if you want to keep things professional.

http://validator.w3.org/

Hopefully you have successfully completed the tutorial, if you have please let me know as i'd love to see your result. This has to be one of the largest tutorials I have ever written so i'd really appreciate it if you dropped me a comment or voted. I'd prefer you to not contact me if you need help and your completely new to Photoshop as I purely do not have the time to help, however if your fairly good with Photoshop but are stuck on one particular stage feel free to ask in our forum or in our IRC chat as i'm sure you will get help.

Here is my finished result, soon I will be posting this layout as a free web template however I really have to emphasize that your only cheating yourself if you download it after trying to do this tutorial (and failing), keep at it.. it takes time. Simply add any finishing touches and your done :)