Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Site Design

Site Design


Site Design Made SimpleMost sites are done with tables in html. Most newbies (and vets) make the interface and then modify that interface per page, making many html files with mostly identical code. This has many obvious problems, like if you want to update a link, you have to go threw every page and modify it accordingly. Or if you want to add content, you have to remove text, add text, upload, see if it works, modify it again, so on and so on. Annoying. If you want to redo the interface, you have to port old content over to new content. Now, this makes html coding tedious and brain numbingly annoying. The answer that most people come up with to fix it is to quit on their site. But, there's hope. The smart and experienced coders out there who want all pages to have the same interface do something different.

PHP is a fairly simple coding language that has many uses. In this tutorial I am going to teach you how to build a simple interface by using PHP to assemble many html files in to one interface.

What is the up side to this type of site design? Well, if I want to update a link in my navigation menu, instead of going threw all the files and updating it manually, which is tedious and hard, I can open one file, update that file and it's done. This method of design will split the code in to manageable sections, which are called upon in a php file. This allows for you to be able to modify one file, and have the effects be instantly visible to every file that utilizes that file for a function, such as a navigation bar and it's links. It makes things simpler and gives the developer more time to focus on content instead of the site actually working.

*Please note that the server you're using MUST support PHP or this will not work.

How This Works

How this will work is we will build the basic interface template. Lets make a simple table so I can show you how this will workâ?¦

<HTML> <HEAD> <TITLE> template site </TITLE> </HEAD>
<BODY>
<table width = "98%" border = "1" bordercolor = "#000000" cellspacing = "0" cellpadding = "2">
<tr>
<td colspan = "2" bgcolor = "#c0c0c0" align = "center"> <b>
welcome to yoursite
</td>
</tr>
<tr>
<td width = "20%">
side bar <br> <br>
<ul>
<li> selection 1
<li> selection 2
<li> selection 3
<li> selection 4
<li> selection 5
<li> selection 6
</ul>
<br>
<br>
</td>
<td width = "80%" valign = "top"> <br>
<p> site content goes here. </p>
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#c0c0c0" align = "center">
some footer stuff here
</td>
</tr>
</table>
</BODY>
</HTML>

now, the goal is to split this up in to several different php files. This is really easy. Just split this up in to relevant section 'blocks'. For exampleâ?¦ header.php could includeâ?¦

<HTML> <HEAD> <TITLE> template site </TITLE> </HEAD>
<BODY>

<table width = "98%" border = "1" bordercolor = "#000000" cellspacing = "0" cellpadding = "2"> <tr>
<td colspan = "2" bgcolor = "#c0c0c0" align = "center"> <b>
welcome to yoursite
</td>
</tr>
<tr>
<td width = "20%">
side bar <br> <br>
<ul>
<li> selection 1
<li> selection 2
<li> selection 3
<li> selection 4
<li> selection 5
<li> selection 6
</ul>
<br>
<br>
</td>

body.php could includeâ?¦

<td width = "80%" valign = "top"> <br>
<p> site content goes here. </p> </td>

footer.php could includeâ?¦

<tr> <td colspan = "2" bgcolor = "#c0c0c0" align = "center"> some footer stuff here </td> </tr> </table> </BODY> </HTML>



Author's URL: allsyntax.com
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

No comments yet...
Add comments to "Site Design"

Captcha