Tables Layout
Here's a tutorial on how to make a simple table layout. I usually use Photoshop to make my layouts and then I cut and code them by hand.To cut the layout I flatten all layers, copy the flattened background, delete it, then paste the copied background as a new layer. I then use the Rectangular Marquee and select the first slice that I want to use, copy that, delete it, and then paste that into a new image. I then save that as the slice. I then follow the same steps until I'm done. It's quicker than it sounds. ;)
Okay, let's start out with a layout that I made that isn't coded yet.
I then cut that image into seven different images.
left.jpg
top.jpg
right.jpg
bg.jpg
bg_02.jpg
bottom_01.jpg
bottom_02.jpg
Now we're ready to code the layout. This layout will consist of only a content area.
<table width="400" border="0" cellpadding="0" cellspacing="0" align="center" background="bg.jpg">
^ Set your width of the layout, add your background to the table, and center it.
<tr valign="top">
^ Start a row and align everything to the top of the row.
<td width="8"><img src="left.jpg" width="8" height="249"></td>
^ Start a column and insert your left side image, then close the column.
<td width="385"><img src="top.jpg" width="384" height="249">
Content...blah, blah, blah
</td>
^ Start another column and add your main image, then add a line and start your content, close the column.
<td width="7"><img src="right.jpg" width="8" height="249"></td>
^ Start another column and insert your right side image, then close the column.
</tr>
^ Close the row.
<tr valign="top">
^ Start another row.
<td colspan="3"><img src="bottom_01.jpg" width="400" height="3"></td>
^ Start another column and insert your bottom image, close the column.
</tr>
^ Close the row.
<tr valign="top">
^ Start another row.
<td colspan="3" background="bg_02.jpg"><center>© Site</center></td>
^ Start another column, and add your second background. Enter any copyright text you want, and then close the column. I also centered the text. Close the column.
</tr>
^ Close the row.
<tr valign="top">
^ Start another row.
<td colspan="3"><img src="bottom_02.jpg" width="400" height="2"></td>
^ Start another column and insert your last bottom image. Close the column.
</tr>
^ Close the row.
</table>
^ Close the table.
Okay, now here's your finished code:
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">
<tr valign="top">
<td width="8"><img src="left.jpg" width="8" height="249"></td>
<td width="385"><img src="top.jpg" width="384" height="249">
Content...blah, blah, blah
</td>
<td width="7"><img src="right.jpg" width="8"
height="249"></td>
</tr>
<tr valign="top">
<td colspan="3"><img src="bottom_01.jpg" width="400" height="3"></td>
</tr>
<tr valign="top">
<td colspan="3" background="bg_02.jpg"><center>© Site</center></td>
</tr>
<tr valign="top">
<td colspan="3"><img src="bottom_02.jpg" width="400" height="2"></td>
</tr>
</table>
...and here's how it should look coded, note I did not add any css to the layout.
[click here]
And there's how to make a table layout. Good luck on your own. ^_^
Navigation
» Main/Updates» Domain
» Current Layout
» Past Layouts
» Guestbook (pop)
» Contact
» Links
» Credits
Graphics
» Terms of Usage» Layout Guide
» Layouts
» Abstract Art
Other
» Tutorials» PNG's
| 2003 - 2008 Amber-Nights.net |