It is now time to test your HTML & CSS skills here. Bascially, with my help we're going to create a nice layout for your new website. Before starting, you'll need to have some sort of an image editing program, like Adobe Photoshop. If you don't have Adobe Photoshop, don't dispair! You can always download GIMP for free. Before starting, it is necessary that you take a moment to learn your program's tools, and make sure that you feel comfortable with them!

First of all, create a new canvas, 800 pixels wide and 800 pixels high (800 x 800). Now, make a new layer named BannerBG. A nice height for a banner is about 200 pixels. So, go and shade the top part of your layout to create the background of your banner.

Next, do the same for the Disclaimer. A nice size for a disclaimer is about 150 high. Make a new layer named FooterBG and select the bottom of the screen and shade to create your disclaimer/footer.

Now, we're going to do the leftmenu. Make a new layer named LeftnavBG, and set the Select Tool to 150px wide, and 450px wide, and then go select the left part of the canvas between the disclaimer and banner, and then shade to create the left nav.

The Right nav is very similar to the left nav. Create a new layer named RightNavBG, and simply set (or keep the current dimensions from the left nav) the select tool to 450px high and 150px wide, then select to the very right of the canvas between the footer and banner. Shade, and you've got yourself a right nav!

Finally, we come to the content area. Create a new layer named ContentBG, and set your select tool to 500px wide and 450px high, and select in the center between all the shaded areas. Then fill with a color of your choice, and then you've finished the background of your layout!

Now that we've finished the backgrounds, it's time to decorate the layout! Create a new alyer named BTexture, and select the banner area. Then, using two colors of your choice, Select Filter > Render > Clouds. Then, feel free to decorate the banner at your descretion, perhaps adding text and a pattern.

We are now going to decorate the disclaimer, to tie in with the banner. Create a new layer named DTexture, and then choose the same two colours you chose for the disclaimer and once again, Filter > Render > Clouds. Then continue to add text and patterns.

Now that we've finished the banner and disclaimer, it's time to do the two navigation menus. If you wish to make your site look nice, I recommend having the two menus mirror each other. So, apply a patten, and make the menu look fancy. Then select the menu area which you decorated, and press Ctrl + C. Create a new canvas, set to the dimensions of the Clipboard, and then press Ctrl + V. Then select Image > Rotate Canvas > Flip Horizontal. Once again, select the entire canvas, and Ctrl + C Return to the main canvas, select the undecorated menu using the Select Tool, and Ctrl + V.

Finally, it's time to do the content area. Seeing as people are most likely going to be reading from the content area, I recommend that you just keep it simple, and plain. Simply fill it with the base color, or leave it as is.

Just to make your layout look nice, create a new canvas, which ever size you want, and make some sort of repeatable graphic. This is going to be the background image of your layout. You may want to use a pattern, or scanlines. Whatever you choose!

Now you've created all the images you'll need for your layout, and it's time to do the coding. Start up your HTML Editor, and copy/paste this code straight into it. If you'd like to view the template, it's right here.

Then, using all the CSS knowledge that you've learnt, add the images you just made into the <style> area at the top of the code. Soon enough, you should have your very own layout. Here's the finished example.

And that, is it. If you have any concerns or queries, please e-mail me at nickyn001@gmail.com.