PHP-Seite im Aufbau.

Der Aufbau der index - Seite.
Der Aufbau der index-Seite könnte so aussehen.
Eingegeben sind PHP-Dateien für Header (header.php), Navigation links (navi.php), eine Footer (footer.php) und eine Home (home.php), die als Startseite geladen wird.
Alle PHP - Dateien nutzen ein Cascading Style Sheet (CSS) für das Design der Seite, Texte und Tabellen.

<?PHP
// start output buffer
@ob_start();
?>

<HTML>
<HEAD>
<TITLE>Internetseitenbau in PHP und CSS mit Seitenvorschau</TITLE>
<meta name="keywords" content="php,css,seitendesign,homepagebau,seitenvorschau" />
<meta name="description" content="Hier zeigen wir einen Internetseitenaufbau in PHP mit CSS und bieten eine Vorlage f&uuml;r Ihren Internetauftritt, bzw. f&uuml;r Ihre Homepage" />
<meta name="author" content="Ihr Name" />
<meta name="publisher" content="Ihr Name" />
<meta name="copyright" content="Ihr Copyright" />
<link rel="stylesheet" href="style.css" type="text/css" />
</HEAD>
<BODY link="#72869E" vlink="#72869E" alink="#72869E">
<table width="963" border="0" cellspacing="2" cellpadding="2" align="center" bgcolor="#FFFFFF" style="border:1px dotted #000000">
<tr>
<td>
<table background="g/maser.jpg" width="950" border="0" cellspacing="0" cellpadding="0" align="center" height="70">
<tr>
<td align="center" valign="middle">
<?php include "{$_SERVER['DOCUMENT_ROOT']}/header.php";?>
</td>
</tr>
</table>
<table width="956" border="0" cellspacing="3" cellpadding="1" align="center">
<tr>
<td width="14%" valign="top">
<?php include "{$_SERVER['DOCUMENT_ROOT']}/navi.php";?>
</td>
<td width="86%" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="1" cellpadding="15" align="center" height="8">
<tr>
<td bgcolor="#FFFFFF" height="2">
<font color="#72869E"> <br>
<?
if(!isset($site))$site="home";
if(!@include("./".$site.".php" ))
print("<b>Sorry, diese Seite existiert nicht</b>

<p>&nbsp;</p>
<table width=\"90%\" border=\"0\" cellspacing=\"0\" cellpadding=\"10\" align=\"center\" bgcolor=\"#FFFFFF\">
<tr>
<td bgcolor=\"#FFFFFF\">
<p><font color=\"#000000\"><b> Diese Art des Zugriffs ist bei diesem
Internetauftritt nicht m&ouml;glich. Pr&uuml;fen Sie, ob Sie den Dateinamen richtig
eingegeben haben oder benutzen Sie unsere Navigationleisten.</b></font></p>
<p><font color=\"#000000\"><b>Illegale Zugriffe au&szlig;erhalb des lokalen
Dateisystems sind nicht gestattet und werden strafrechtlich von uns verfolgt.</b></font></p>
<hr>
<p><font color=\"#000000\"><b>Webmaster</b></font></p>
</td>
</tr>
</table><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

");
?>


</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="950" border="0" cellspacing="0" cellpadding="0" align="center" height="10">
<tr>
<td>
<?php include "{$_SERVER['DOCUMENT_ROOT']}/footer.php";?>
</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>

<?PHP
// empty output buffer
@ob_end_flush();
?>

Cascading Style Sheet (CSS)
Dieses CSS wird in die PHP - Vorschauseite verwendet. In der PHP - Vorschau haben wir den CSS - Dateinamen style.css verwendet.

body {background-image: url("g/gruen.jpg");font-family:Verdana,Arial,Helvetica,sans-serif;font-size: 10pt;color: #000000} .h{font-family:Arial,sans-serif;font-size: 20px;color: #008000} .q{text-decoration:none; color:#0000cc}
a {font-size: 9pt ;font-family: Arial; color: #72869E}
a:hover {font-size: 9pt ;font-family: Arial; color: #990000}
p {font-size: 9pt ;font-family: Arial; color: #000000}
p.zentriert {text-align: center;font-size: 10pt ;font-family: Arial; color: #000000}
h1 {font-size: 16pt ;font-family: Arial; font-weight: bold; color: #000000; text-align:center}
h2 {font-size: 10pt ;font-family: Arial; font-weight: bold; color: #000000; text-align:center}
img {border: 0px;}

#navi-links {width: 167px;text-align: left;border: 1px solid #000000;border-bottom: none;margin-bottom: 2em;}
#navi-links ul {margin: 0;padding: 0;list-style-type: none;text-indent: 15px;}
#navi-links li {list-style-image: none;margin: 0;border-bottom: 1px solid black;}
#navi-links a {display: block;width: 167px;height: 22px;font: bold 12px/22px Arial, Helvetica, sans-serif;}
#navi-links a:link, #navi-links a:visited {background-color: #990000;color: #FFFFFF;text-decoration: none;padding-bottom: 0;}
#navi-links li a:hover {background-color: #000000; color: #fffff;text-decoration: none;}
#navi-links li a#titel {background-color: #CC9933;color: #fffff;text-decoration: none;}

.blackredmenu ul{font: bold 13px arial;padding-left: 0;margin-left: 0;height: 20px;}
.blackredmenu ul li{list-style: none;display: inline;}
.blackredmenu ul li a{padding: 2px 0.5em;text-decoration: none;float: left;color: black;background-color: #000000;border: 2px solid #000000;color: #3BFF00}
.blackredmenu ul li a:hover{background-color: #660000;border-style: outset;color: #ffffff}
.blackredmenu ul li a:active{border-style: inset;}

td.sand {background-color: #ffcc66; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt}
td.rot {background-color: #eed2d2; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt}
td.blau {background-color: #bbffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt}
td.black {background-color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt;color: #ffffff}

Der Inhaltstext der PHP-Seite.
Der hier angezeigte Text wird bei dieser Seite aus der home.php geladen. Die verschiedenfarbigen Zeilen oder Zellen / Spalten der Tabelle sind in der CSS-Datei definiert und werden über class eingebunden.
Nachfolgend zeigen wir einige Beispiele.

<p class="zentriert">Zentrierter Absatz</p>

<p>Normaler Absatz mit Text von links.</p>

<h1>Überschrift mit Textgröße in Fett und Zentriert</h1>