mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-10-19 09:55:03 +02:00
242 lines
13 KiB
HTML
242 lines
13 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
|
|||
|
|
|||
|
<html>
|
|||
|
|
|||
|
<head>
|
|||
|
<title>Trennung von Inhalt und Layout f<>r kleine Homepages</title>
|
|||
|
<link rel="stylesheet" type="text/css" href="../../src/self.css">
|
|||
|
<meta name="description" content="Trennung von Inhalt und Layout f<>r kleine Homepages">
|
|||
|
<meta name="keywords" content="SELFPHP, PHP, Layout">
|
|||
|
<meta name="author" content="Damir Enseleit, mail@selfphp3.de">
|
|||
|
<meta name="DC.Contributer" content="Matthias Hupp, m.hupp@selfphp3.de">
|
|||
|
<meta name="DC.Publisher" content="Damir Enseleit, mail@selfphp3.de">
|
|||
|
<meta name="DC.Date" content="2003-07-17T16:53:41+02:00">
|
|||
|
<meta name="DC.Identifier" content="http://www.selfphp.info/tipps_tricks/layout/trennung_inhalt_layout.php">
|
|||
|
<meta name="DC.Language" content="de">
|
|||
|
<meta name="DC.Rights" content="../../editorial/index.php">
|
|||
|
<meta name="SELF.Firstdate" content="2001-08-02T02:08+01:00">
|
|||
|
<meta name="SELF.Version" content="1">
|
|||
|
<meta name="SELF.Pagetype" content="Ordner">
|
|||
|
<meta name="SELF.Path" content="SELFPHP == ../../index.php">
|
|||
|
</head>
|
|||
|
|
|||
|
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
|
|||
|
<table width="100%" border="0" cellspacing="0" cellpadding="4">
|
|||
|
<tr>
|
|||
|
|
|||
|
<td bgcolor="#FFEEDD" colspan="3" class="nav"><a name="top" class="an"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a>
|
|||
|
<a href="../../index.html"><b>SELFPHP</b></a>/<a href="../../navigation/index.html">Navigationshilfen</a>
|
|||
|
<img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von">
|
|||
|
<a href="../index.html"><b>Tipps & Tricks</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von">
|
|||
|
<a href="index.html"><b>Layout</b></a></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td width="11%" bgcolor="#EEEEEE" class="doc"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFPHP"></td>
|
|||
|
<td bgcolor="#EEEEEE" valign="bottom" class="doc"><h2>Trennung von Inhalt und Layout für kleine Homepages</h2></td>
|
|||
|
|
|||
|
<td bgcolor="#EEEEEE" align="right" valign="bottom" class="doc"> </td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td bgcolor="#EEEEEE" align="center" valign="top" class="doc"><img src="../../src/dokx.gif" width="30" height="20" border="0" alt="Informationsseite" /></td>
|
|||
|
<td bgcolor="#FFFFFF" valign="top" nowrap colspan="2"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten" /> <a href="#autor"><b>Autor</b></a><br />
|
|||
|
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#beispiel"><b>Beispiel</b></a><br />
|
|||
|
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#beschreibung"><b>Beschreibung</b></a><br />
|
|||
|
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#fazit"><b>Fazit</b></a><br />
|
|||
|
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#download"><b>Download</b></a></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td colspan="3" class="doc"><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<h2 class="Sh2"><a name="autor" class="an">Autor</a></h2>
|
|||
|
<table width="100%" cellpadding="10">
|
|||
|
<tr>
|
|||
|
<td bgcolor="#E4EEFF" class="xmpcode"><b>Name:</b> Benjamin Fleckenstein<br /><b>Email:</b> <a href="mailto:ben@nb-kreativ.de">ben@nb-kreativ.de</a><br/><b>Website:</b> <a href="http://www.nb-kreativ.de" target="_blank">http://www.nb-kreativ.de</a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<br /><br />
|
|||
|
<table width="100%" class="doc">
|
|||
|
<tr>
|
|||
|
<td><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben" /></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten" /></a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<h2 class="Sh2"><a name="beispiel" class="an">Beispiel</a></h2>
|
|||
|
|
|||
|
<img src="../../src/dokf.gif" width="15" height="10" border="0" /> <a href="http://www.selfphp.com/tipps_tricks/layout/trennung_inhalt_layout/index.php" target="_blank"><b>Anzeigebeispiel:
|
|||
|
So sieht's aus (Online)</b></a> <br />
|
|||
|
<br />
|
|||
|
<table width="100%" cellpadding="10">
|
|||
|
<tr>
|
|||
|
<td bgcolor="#E4EEFF" class="xmpcode"><code><font color="#000000">
|
|||
|
<font color="#0000BB"><?php<br /><br /> $titel </font><font color="#007700">= </font><font color="#DD0000">"Wie man sieht ist auch der Titel w&auml;hlbar"</font><font color="#007700">;<br /> <br /> include </font><font color="#DD0000">"header.inc.php"</font><font color="#007700">;<br /> <br /></font><font color="#0000BB">?><br /></font><br /><h1>Inhalt</h1><br />In dieser Datei steht nur der Inhalt der Seite, das Layout wird in den Dateien<br />header.inc.php und footer.inc.php erstellt!<br /><br><br /><br><br />Beispiel f&uuml;r die Trennung von Inhalt und Layout!<br /><br /><font color="#0000BB"><?php<br /><br /> </font><font color="#007700">include </font><font color="#DD0000">"footer.inc.php"</font><font color="#007700">;<br /> <br /></font><font color="#0000BB">?></font> </font>
|
|||
|
</code></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<br /><br />
|
|||
|
<table width="100%" class="doc">
|
|||
|
<tr>
|
|||
|
<td><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben" /></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten" /></a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<h2 class="Sh2"><a name="beschreibung" class="an">Beschreibung</a></h2>
|
|||
|
<table width="100%" cellpadding="10">
|
|||
|
<tr>
|
|||
|
<td bgcolor="#E4EEFF" class="xmpcode">Wenn man gerade mit der Webseitenprogrammierung angefangen hat stellt man
|
|||
|
schnell fest, dass damit vieles einfacher wird, unter anderem wird es einfacher
|
|||
|
das Layout einer Seite zu verändern, da man mit PHP eine Trennung von
|
|||
|
Inhalten und Layout vorzunehmen.
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Eine solche Trennung hat den Vorteil, dass man das Layout verändern kann
|
|||
|
ohne dass man jede einzelne Seite verändern muss.
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Natürlich gibt es schon viele vorgefertige System die eine solche Trennung
|
|||
|
vornehmen können. Aber gerade für kleine Seiten, wie private Homepages
|
|||
|
oder ähnliches, sind diese Systeme meistens etwas überdimensioniert.
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Für solche Anforderungen ist die nachfolgende Idee gedacht.
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Die Theorie ist, dass man alles, worin sich die einzelnen Seiten nicht
|
|||
|
unterscheiden auslagert. Das heißt man nimmt die Navigation, Logos usw.
|
|||
|
aus der Datei und schreibst Sie in zwei andere Dateien (z.B. header.inc.php
|
|||
|
und footer.inc.php).
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Die erste Datei (header.inc.php) beinhaltet nun alles von Beginn der Seite
|
|||
|
bis zum Anfang des Inhalts.
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
header.inc.php
|
|||
|
<pre>
|
|||
|
<html>
|
|||
|
<head>
|
|||
|
<title><?php echo $titel ?></title>
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
<table border="0">
|
|||
|
<tr>
|
|||
|
<td valign="top" width="150">
|
|||
|
<a href="xyz.htm">Menüpunkt1</a><br />
|
|||
|
<a href="abc.htm">Menüpunkt2</a><br />
|
|||
|
</td>
|
|||
|
<td valign="top">
|
|||
|
</pre>
|
|||
|
(Um jeder Seite noch einen individuellen Titel geben zu können habe
|
|||
|
ich noch eine PHP Anweisung in die Datei eingebaut die die Variable $titel
|
|||
|
ausgibt)
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Die zweite Datei beinhaltet alles was nach dem Inhalt der Datei kommt
|
|||
|
bis zum Ende der Datei
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
footer.inc.php
|
|||
|
<pre>
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
</body>
|
|||
|
</html>
|
|||
|
</pre>
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
In den eigentlichen Seiten bleibt nur noch der Inhalt und zwei Include
|
|||
|
Anweisungen, und der Variablen $titel.
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
<pre>
|
|||
|
<?php
|
|||
|
|
|||
|
$titel = "Willkommen";
|
|||
|
|
|||
|
@include "header.inc.php";
|
|||
|
|
|||
|
?>
|
|||
|
|
|||
|
<h1>Überschrift der Seite</h1>
|
|||
|
Inhalt Inhalt, noch mehr Inhalt
|
|||
|
|
|||
|
<?php
|
|||
|
|
|||
|
@include "footer.inc.php";
|
|||
|
|
|||
|
?>
|
|||
|
</pre>
|
|||
|
(Hier wird $titel gesetzt, welches in der Datei header.inc.php ausgegeben wird)
|
|||
|
<br>
|
|||
|
<br>
|
|||
|
Auf diese Art kann man das Layout in den beiden .inc.php Dateien verändern,
|
|||
|
und die Änderung wirkt sich sofort auf alle Seiten aus, da diese das Layout
|
|||
|
ja erst beim Aufruf hinzufügen!</td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<br /><br />
|
|||
|
<table width="100%" class="doc">
|
|||
|
<tr>
|
|||
|
<td><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben" /></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten" /></a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<h2 class="Sh2"><a name="fazit" class="an">Fazit</a></h2>
|
|||
|
<table width="100%" cellpadding="10">
|
|||
|
<tr>
|
|||
|
<td bgcolor="#E4EEFF" class="xmpcode">Zugegebenermaßen trennt diese Idee das Layout nicht vollständig vom Inhalt, da in den Seiten ja noch HTML Elemente wie <h1> enthalten sind, aber in Verbindung mit CSS ist diese Lösung ganz passabel.<br /><br />Benjamin Fleckenstein</td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<br /><br />
|
|||
|
<table width="100%" class="doc">
|
|||
|
<tr>
|
|||
|
<td><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben" /></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten" /></a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<h2 class="Sh2"><a name="download" class="an">Download</a></h2>
|
|||
|
<table width="100%" cellpadding="10">
|
|||
|
<tr>
|
|||
|
<td bgcolor="#E4EEFF" class="xmpcode">Der Download beeinhaltet folgende Dateien:<ul>
|
|||
|
<li>header.inc.php (Layoutdatei 1)</li>
|
|||
|
<li>footer.inc.php (Layoutdatei 2)</li>
|
|||
|
<li>index.php (Inhaltsdatei)</li>
|
|||
|
<li>readme.txt (Lizenz und Hinweise)</li>
|
|||
|
</ul><a href="trennung_inhalt_layout.zip">Download starten</a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
<br /><br />
|
|||
|
<table width="100%" border="0" cellspacing="0" cellpadding="4">
|
|||
|
<tr>
|
|||
|
<td colspan="3" class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td width="11%" align="right" class="doc">weiter:<a href="../index.php"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
|
|||
|
|
|||
|
<td colspan="2"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">
|
|||
|
<a href="../index.html"><b>Tipps & Tricks</b></a></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
|
|||
|
<td align="right" class="doc">zurück:<a href="index.html"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
|
|||
|
|
|||
|
<td colspan="2"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite">
|
|||
|
<a href="index.html"><b>Layout</b></a></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td colspan="3" class="doc"> </td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
|
|||
|
<td bgcolor="#FFEEDD" colspan="3" class="nav"><a name="bottom" class="an"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a>
|
|||
|
<a href="../../index.html"><b>SELFPHP</b></a>/<a href="../../navigation/index.html">Navigationshilfen</a>
|
|||
|
<img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von">
|
|||
|
<a href="../index.html"><b>Tipps & Tricks</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von">
|
|||
|
<a href="index.html"><b>Layout</b></a></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<td colspan="3"><a name="bottom" class="an"><br>
|
|||
|
© 2001, 2002, 2003</a> <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail">
|
|||
|
<a href="mailto:mail@selfphp.com">Damir Enseleit, mail@selfphp.com</a> , <a href="http://www.selfphp.info/impressum.php">Impressum</a></td>
|
|||
|
</tr>
|
|||
|
</table>
|
|||
|
</body>
|
|||
|
|
|||
|
</html>
|