[Tutorial] Easy site layout

*Sinistra* · Feb 12, 2005, 08:11 PM

Here I will be explaining how to make an really nice looking layout with less fuss.

OK we are going to learn how to do a Simple PHP code which is really simple.

OK Example www.animegfx.net

I use PHP includes on my site Basicly a PHP Include is a line of code that you can add a file into a PHP Document. So say you do this

www.animegfx.net/top.php

This is the top and left hand side of the main page index.

www.animegfx.net/bottom.php

this is the right side and Bottom part of the main Page.

How did I get this to work you ask?

Well First thing first you need to make your site. Really simple layout is a Table layout if you do something simple it will work OK so lets try something simple

Open up your favorate text editors or if you have a webdevelopment program like DreamWeaver

Now we are going start off with something like

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	color: #000000;
}
body {
	background-color: #999999;
}
a:link {
	color: #333333;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #333333;
}
a:active {
	color: #333333;
}
-->
</style></head>

<body>
<div align="center"></div>
<table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
  <tr>
    <td><img src="logo.gif" width="800" height="150"></td>
  </tr>
  <tr>
    <td height="236" valign="top" bordercolor="#000000"><table width="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="22%" height="233">A little nave stuff gose over here </td>
        <td width="54%">

Now Save this page as top.php

We are going to do the bottom now

Open a new document and put this code in

Code:

</td>
        <td width="24%">More Nave stuff gose over here </td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Now save this file as bottom.php

Now your top should look something like this.

http://www.animegfx.net/top.jpg

And the bottom should look something like this.

http://www.animegfx.net/bottom.jpg

OK Now time for the Main Content of the site

This is really simple Seeing as your top has the open tag for the center table and your Bottom.php has the closeing tag all you have to do is the fallowing

Code:

<? include('top.php'') ?>

Content gose here 

<? include ('bottom.php') ?>

Save this file as index.php

And your finished product should look like this.

http://www.animegfx.net/site.jpg

I have included the Site template with the Logo Top and bottom.php so you can test it out for yourself Just a note your server must have PHP capibillitise Most free hosts Do so its good I hope you enjoyed this and have some fun with it

If you would like to use this template I have included the logo If you would like me to make you a logo you can PM me and I will make you up one.

*jaderabbit* · Feb 13, 2005, 02:23 PM

AWESOME, i wanting to make me a site too... been studying 3schools.. this will work better! ...an don't have to memorize all that stuff again >_<...
"cause i can learn by this".

*Sinistra* · Feb 15, 2005, 01:12 PM

Well thanks need any help just feel free to IM/PM me ^_^

Feb 12, 2005, 08:11 PM	#1 (permalink)
Sinistra Shining Star Join Date: Oct 2004 Location: North Carolina Posts: 2,520 Thanks: 0 Thanked 1 Time in 1 Post Credits: 1,234	[Tutorial] Easy site layout Here I will be explaining how to make an really nice looking layout with less fuss. OK we are going to learn how to do a Simple PHP code which is really simple. OK Example www.animegfx.net I use PHP includes on my site Basicly a PHP Include is a line of code that you can add a file into a PHP Document. So say you do this www.animegfx.net/top.php This is the top and left hand side of the main page index. www.animegfx.net/bottom.php this is the right side and Bottom part of the main Page. How did I get this to work you ask? Well First thing first you need to make your site. Really simple layout is a Table layout if you do something simple it will work OK so lets try something simple Open up your favorate text editors or if you have a webdevelopment program like DreamWeaver Now we are going start off with something like Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- body,td,th { color: #000000; } body { background-color: #999999; } a:link { color: #333333; } a:visited { color: #333333; } a:hover { color: #333333; } a:active { color: #333333; } --> </style></head> <body> <div align="center"></div> <table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000"> <tr> <td><img src="logo.gif" width="800" height="150"></td> </tr> <tr> <td height="236" valign="top" bordercolor="#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="22%" height="233">A little nave stuff gose over here </td> <td width="54%"> Now Save this page as top.php We are going to do the bottom now Open a new document and put this code in Code: </td> <td width="24%">More Nave stuff gose over here </td> </tr> </table></td> </tr> </table> </body> </html> Now save this file as bottom.php Now your top should look something like this. http://www.animegfx.net/top.jpg And the bottom should look something like this. http://www.animegfx.net/bottom.jpg OK Now time for the Main Content of the site This is really simple Seeing as your top has the open tag for the center table and your Bottom.php has the closeing tag all you have to do is the fallowing Code: <? include('top.php'') ?> Content gose here <? include ('bottom.php') ?> Save this file as index.php And your finished product should look like this. http://www.animegfx.net/site.jpg I have included the Site template with the Logo Top and bottom.php so you can test it out for yourself Just a note your server must have PHP capibillitise Most free hosts Do so its good I hope you enjoyed this and have some fun with it If you would like to use this template I have included the logo If you would like me to make you a logo you can PM me and I will make you up one. __________________ [ Anime Insight \| Anime Paper \| MiniTokyo \| Myspace \| DeviantART \| FireFox] Last edited by Sinistra; Nov 02, 2005 at 01:30 PM.
Status: Offline

Feb 13, 2005, 02:23 PM	#2 (permalink)
jaderabbit Cheetos Overlord Join Date: Dec 2004 Location: The World Posts: 3,650 Thanks: 0 Thanked 3 Times in 2 Posts Credits: 7,251	AWESOME, i wanting to make me a site too... been studying 3schools.. this will work better! ...an don't have to memorize all that stuff again >_<... "cause i can learn by this". __________________ -Just another green eyed angel, distorted by mans love for hate- \|THE INFAMOUS\|The Host\|Twilight Series\|Twilight Movie\|Untouched!\|
Status: Offline

Feb 15, 2005, 01:12 PM	#3 (permalink)
Sinistra Shining Star Join Date: Oct 2004 Location: North Carolina Posts: 2,520 Thanks: 0 Thanked 1 Time in 1 Post Credits: 1,234	Well thanks need any help just feel free to IM/PM me ^_^ __________________ [ Anime Insight \| Anime Paper \| MiniTokyo \| Myspace \| DeviantART \| FireFox]
Status: Offline

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Welcome to AnimeOnline.net, your personal Anime Community!	Anime Online Rulez!