Clean Web Page part 2
Tutorial Description:
Learn how to slice & code your layout.
In the First Part of this tutorial you learned how to design a Clean Web Page. In this part you will learn how to slice and code it. And as this is a requested tutorial by a guy that told me he could not afford a program like Dreamweaver, Frontpage we will only use Notepad for the coding part. Well enough talking it’s time to begin, the first thing you need to do is to take the Slice Tool.
Slice Tool: 
Slice Part:
1. Now when you have the Slice Tool selected it’s time to make the first slice and as you can see on the image below I start with the header, so just click and drag with the Slice Tool. Make sure you only slice the header and not the menu.
2. Then it’s time to slice the menu, and as you can see on the image below I start to slice on the left side and stops just before I reach “Home”. Then slice each button. And as you can see I also made a slice on the right side. Then go back to your first sliced button and right click, choose Edit Slice Options and a dialog box will appear. ( See Image 2 ) Then apply the same settings on your next button, but change it to about.html, then repeat this procedure on the rest of the buttons.
3. Now the only thing that’s left is to slice the content box. First make a slice along the top on the content box.
IMAGE
Then make 3 slices as the image below shows.
IMAGE
Then make one slice as you can see on the image below.
IMAGE
Now make a slice along the bottom of the content box, but leave a small space between the bottom of the layout and the bottom slice.
IMAGE
Now with the space we left, make one last slice.
IMAGE
And now you are done slicing, just go to File>Save For Web.
Now it’s time for the coding part, this is not so hard as you may think, just follow the steps below and you will see how easy it’s.
Coding Part:
1. The first lines you see when you have open up index.html is this.
<html>
<head>
<title>index</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table id=”Table_01″ width=”750″ height=”401″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td colspan=”11″><img 
></td>
</tr>
Now change those lines to this, but if you made the layout with a different background color you change it to your bgcolor.
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#999999″ leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table width=”750″ height=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td valign=”top” background=”images/index_17.gif”><table width=”750″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td colspan=”11″><img ></td>
</tr>
2. Now look down a little bit and you will see a code like this.
<td><img 
></td>
<td colspan=”9″><img 
></td>
<td><img 
></td>
Now change those lines to this.
<td background=”images/index_12.gif”> </td>
<td background=”images/index_13.gif” colspan=”9″>
<p>All content goes here</p></td>
<td background=”images/index_14.gif”> </td>
3. Now look just below the lines you just edit and you will find a line like this.
<tr>
<td colspan=”11″><img 
></td>
</tr>
Delete those lines and you are done. Below you have the complete code I use for my tutorial template.
<html>
<head>
<title>index</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#999999″ leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table width=”750″ height=”100%” border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td valign=”top” background=”images/index_17.gif”><table width=”750″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td colspan=”11″><img ></td>
</tr>
<tr>
<td colspan=”2″><img 
></td>
<td><a href=”index.html”><img 
></a></td>
<td><a href=”about.html”><img 
></a></td>
<td><a href=”portfolio.html”><img 
></a></td>
<td><a href=”tutorials.html”><img 
></a></td>
<td><a href=”affiliates.html”><img 
></a></td>
<td><a href=”resources.html”><img 
></a></td>
<td><a href=”contact.html”><img 
></a></td>
<td colspan=”2″><img 
></td>
</tr>
<tr>
<td colspan=”11″><img 
></td>
</tr>
<tr>
<td background=”images/index_12.gif”> </td>
<td background=”images/index_13.gif” colspan=”9″>
<p>All content goes here.</p></td>
<td background=”images/index_14.gif”> </td>
</tr>
<tr>
<td colspan=”11″><img 
></td>
</tr>
<tr>
<td colspan=”11″><img 
></td>
</tr>
<tr>
<td><img 
></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
<td><img ></td>
</tr>
</table>
</body>
</html>