Layout Tutorial

You'll need a graphic program of any kind (Paint, GIMP, Photoshop, etc.)

First, start your program and set the image width to 750px-800px (so that it's compatible on every screen resolution) and the width to 800px. Then, use your program to create the five box/rectangles, or you can use the templete I have already created below.

Click

Then, you can play with your program to spice up that template you have and design it. Click the link below to view mine that I made.

Click

After you have done that, split and crop the image into the five pieces, banner, left menu, right menu, content, and disclaimer. Be sure to click the links to see what I mean.

Banner
Left Menu
Content
Right Menu
Disclaimer

Now, it's time for the coding!

First, insert this code in. It's your site title.
<html> <head> <title>//.Site Name Here.\\</title>

Second, insert this tag in. It's your CSS for the layout. Simply upload the five pieces of your layout onto your website or another image uploader website like Photobucket and Imageshack and paste the URLs of those images where if says to in the code.
<style> A:link { text-decoration: none; color: #003399; } A:visited { text-decoration: none; color: #003399; } A:active { text-decoration: none; color: #003399; } A:hover { text-decoration: none; color: #6666FF; } body { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; text-align: justify; margin-bottom: 5px; margin-right: 0px; margin-top: 5px; } #centerlayout { margin-left: -370px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; width: LAYOUT TOTAL WIDTHpx; left: 50%; top: 0%; position: absolute; } #leftmenu { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url('LEFT MENU IMG URL'); repeat-y; text-align: left; border: 0px; width: LEFT MENU WIDTHpx; } #rightmenu { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url('RIGHT MENU IMG URL'); repeat-y; text-align: right; border: 0px; width: RIGHT MENU WIDTHpx; } #content { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 10px; background-color: #FFFFFF; background-image: url('CONTENT IMAGE URL'); repeat-y; border: 0px solid #000000; width: CONTENT WIDTHpx; } #disclaimer { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url('DISCLAIMER URL'); border: 0px solid #000000; text-align:center; width:DISCLAIMER WIDTHpx; height:DISCLAIMER HEIGHTpx; } #banner { font-family: Verdana; sans serif; helvetica; color: #333333; font-size: 9px; background-color: #FFFFFF; background-image: url('BANNER IMAGE URL'); width:BANNER WIDTHpx; height:BANNER HEIGHTpx; border: 0px solid #000000; text-align:center; } </style>

Third, you have to paste this code in. It controls your left menu. I suggest you to only edit the links.
</head> <body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10"> <div id="centerlayout"> <table cellspacing="0" cellpadding="0" border="0"> <tr><td valign="top" align="center" id="banner" colspan="3"></td></tr> <tr> <td valign="top" id="leftmenu"> <center>HEADER</center> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <center>HEADER</center> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <center>HEADER</center> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <center>HEADER</center> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> </td>

Then, paste this code in. It controls your content. Remember, only edit what's inside of the warnings.
<td valign="top" id="content"> <div align="justify"> <table cellspadding="5" cellspacing="0" border="0"> <tr> <td valign="top" id="content"> <center>.:. CONTENT HEADER HERE .:.</center> Make sure you fill out the CSS properly or else this will all be messed up... </td></tr></table> </div> </td>

Finally, add this code to the rest. It controls your right menu and your disclaimer.
<td valign="top" id="rightmenu"> <center>AFFILIATES</center> <center> <a href="#">Affy 1</a> <a href="#">Affy 2</a> <a href="#">Affy 3</a> </center> <center>HEADER</center> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> <a href="#">Link Here</a> </td></tr> <tr><td valign="top" id="disclaimer" colspan="3"> </td></tr> </table> </body> </html>

And... you're done with your new layout! Hope you enjoyed this tutorial.
Click here to see what I have! ;3

Main

Interactive

Interviews

Fun

Gallery

Graphics

Tutorials

Info

Host

Credits

Layout Tutorial