Valid XHTML 1.0!
Valid CSS

 

 

 

SSI / PHP Template For Websites

PHP Template with External CSS

With a search engine, it is possible to find hundreds of free 'fancy' website - webpage templates; however, the web templates do not contain instructions! This site shows how to make a custom template.

For more advance use - reference:
Template Generator (Tableless CSS)
PHP Dynamic Menu (PHP script)
CSS/PHP Template Generator (Tableless)

This page shows how to use SSI (Server Side Includes) inside a web template. The example template is a 'simple web design' that gives detailed instructions for using SSI (Server Side Includes) or PHP includes. (View Some Templates n Code. This website does not go into the use of Paint Shop Pro (PSP) or Photoshop (PS) to make professional looking graphics banners, logs, etc. - that is left for graphics experts and should be the next step after mastering php templates IOHO.

With this php web template setup, we create a css, a heading file, a menu file and a body file. Then we put these 'pieces' together in a php template page (another .php file).

After the web template is finished, it's only necessary to change the 'title' and the 'body file' to make a new page. Of course, it is wise to use 'save as' and a new file name - such as 'page2.php'.

Note: A quick glance down this page may scare a newbie but it is really 5 small sets of code (pages) that you study / understand separately. Description of the 5 files are:

  1. Template file = page1.php (Usually renamed to index.php). Contains all the required webpage 'opening' n 'closing' tags. When you create a new page you only have to change the 'title' and the 'name of the body file'
  2. CSS (style sheet) = style.css. This contains all the format code such as text color, size, etc etc. BTW: Changing attributes in this external css will reproduce the changes on all pages.
  3. Header Page = head.html. This file will contain the HTML tags that control the header on each page.
  4. Menu = menu.html. Can be a few simple links (anchor tags) or could be a line of buttons (images inside anchor tags).
  5. Page Body = page1body.html. This is main part of the entire page. You will use different 'body' files for different pages (such as page2body.html, page3body.html, etc).

(View Resulting Page Here)


Color indicators are:

Blue = Typical HTML Code for each file (piece)
Red = HTML To Change in the final webpage template (for new page)
Gray = Remarks / Comments that will not display in browser.

page1.php

(or index.php for default)
<html>
<head>
<title> Page 1 </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<?php
include ("head.html");
?>
<!-- Table for Main Body -->
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td valign="top" align="left" width="90">
<?php
include ("menu.html");
?>
</td>
<td width="1" bgcolor="lightskyblue" valign="top">  </td>
<td valign="top">

<?php
include ("page1body.html");
?>
<br> <br>
<?php
include ("menu.html");
?>
</td>
<td width="1" bgcolor="lightskyblue" valign="top">   </td>
</tr></table>

</body></html>

style.css

body {
background-color: #FFFFF0;
font-family: Arial, Verdana, sans-serif;
font-size: 18px;
color: #00008B;
scrollbar-face-color: antiquewhite;
scrollbar-highlight-color: darkorange;
scrollbar-3dlight-color: yellow;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: antiquewhite;
scrollbar-arrow-color: blue;
scrollbar-track-color: lightyellow;
}

a { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #483D8B; text-decoration: underline}

a:hover { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A; background-color: #FAEBD7}

h1 { font-family: Arial, Verdana, sans-serif; font-size: 36px; color: #A52A2A }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #A52A2A }
h3 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #A52A2A }
h4 { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A }
h5 { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #A52A2A }
h6 { font-family: Arial, Verdana, sans-serif; font-size: 8px; color: #A52A2A }

hr{ color:brown; background-color:tan; width:90%; height:2px; }

table { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #00008B; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px}

.note { font-family: Arial, Verdana, sans-serif; font-size: 14px; color: purple;
font-weight: bold;}

head.html

<table height="80" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="left" valign="bottom" width="160" rowspan="2">
<a href="http://www.ibdhost.com/">
<img src="free/images/logo.gif" width="160" height="74" border="0" alt="logo">
</a></td>
<td align="left" valign="bottom" height="25" width="100%" nowrap colspan="4">
<b>Title or Links Here</b></td></tr>
<tr><td align="right" valign="top" height="50" width="100%" nowrap colspan="4">
<table width="455" height="50" cellspacing="0" cellpadding="0" border="0" background="free/images/headcolor.gif">
<tr>
<td height="50" width="55" align="left" valign="top" background="free/images/headback.gif">
<img src="free/images/headback.gif" width="55" height="50" border="0" alt="background"></td><td height="50" width="400" align="center"> </td>
</tr></table></td></tr>
<tr>
<td align="left" valign="top" height="5" background="free/images/headcolor.gif" nowrap colspan="5">
<table width="100%" height="1" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="free/images/headcolor.gif" width="1" height="1" alt="bar">
</td></tr></table>
</td></tr></table>

menu.html

[<a href="index.php">Home </a>]
[<a href="page2.php">Page 2</a>]
[<a href="page3.php">Page 3</a>]
[<a href="page4.php">Page 4</a>]


page1body.html

<h2> H2 size heading </h2>

This is the body / main part of my web page. Anything you put here - including pictures, etc will show on the web page. Summary: this is the 'body' section'

Example for a horizontal line = <hr>

Example using 'class' = 'note':
<span class="note"> Example using 'class' = 'note' </span>

Now let's put in an image (that is in the same folder as this file so we don't have to put the full path / URL

<img src="images/hoglogo2.gif" border="4" width="100" height="65" alt="Razorback Hog Logo">

Hint: Remember to work on your hard drive and keep a backup of all 'master' files.
<P> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah


(View Resulting Page Here)

Adsense Dead

Owner Has


Gone Fishing