tbz-repos/aktuelle.kurse
1
0
Fork 0
mirror of https://gitlab.com/harald.mueller/aktuelle.kurse.git synced 2024-10-19 18:05:02 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity
09e61e7545
aktuelle.kurse/old_m133/4_Modulinhalte_und_Uebungen/00-Anwendungen-Beispiele-Uebungen/PHP_Referenz/tipps_tricks/layout/trennung_inhalt_layout.html
Müller Harald 507e5da390 muh
2022-05-13 11:53:50 +02:00

242 lines
13 KiB
HTML
Raw Blame History

<!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 &amp; 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&uuml;r kleine Homepages</h2></td>
<td bgcolor="#EEEEEE" align="right" valign="bottom" class="doc">&nbsp; </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" />&nbsp;<a href="#autor"><b>Autor</b></a><br />
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#beispiel"><b>Beispiel</b></a><br />
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#beschreibung"><b>Beschreibung</b></a><br />
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<a href="#fazit"><b>Fazit</b></a><br />
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten">&nbsp;<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">&lt;?php<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;$titel&nbsp;</font><font color="#007700">=&nbsp;</font><font color="#DD0000">"Wie man sieht ist auch der Titel w&amp;auml;hlbar"</font><font color="#007700">;<br />&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;include&nbsp;</font><font color="#DD0000">"header.inc.php"</font><font color="#007700">;<br />&nbsp;&nbsp;&nbsp;&nbsp;<br /></font><font color="#0000BB">?&gt;<br /></font><br />&lt;h1&gt;Inhalt&lt;/h1&gt;<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 />&lt;br&gt;<br />&lt;br&gt;<br />Beispiel f&amp;uuml;r die Trennung von Inhalt und Layout!<br /><br /><font color="#0000BB">&lt;?php<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#007700">include&nbsp;</font><font color="#DD0000">"footer.inc.php"</font><font color="#007700">;<br />&nbsp;&nbsp;&nbsp;&nbsp;<br /></font><font color="#0000BB">?&gt;</font>&nbsp;&nbsp;&nbsp;&nbsp;</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&auml;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&auml;ndern kann
ohne dass man jede einzelne Seite ver&auml;ndern muss.
<br>
<br>
Nat&uuml;rlich gibt es schon viele vorgefertige System die eine solche Trennung
vornehmen k&ouml;nnen. Aber gerade f&uuml;r kleine Seiten, wie private Homepages
oder &auml;hnliches, sind diese Systeme meistens etwas &uuml;berdimensioniert.
<br>
<br>
F&uuml;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&szlig;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>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;?php echo $titel ?&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table border="0"&gt;
&lt;tr&gt;
&lt;td valign="top" width="150"&gt;
&lt;a href="xyz.htm"&gt;Men&uuml;punkt1&lt;/a&gt;&lt;br /&gt;
&lt;a href="abc.htm"&gt;Men&uuml;punkt2&lt;/a&gt;&lt;br /&gt;
&lt;/td&gt;
&lt;td valign="top"&gt;
</pre>
(Um jeder Seite noch einen individuellen Titel geben zu k&ouml;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>
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<br>
<br>
In den eigentlichen Seiten bleibt nur noch der Inhalt und zwei Include
Anweisungen, und der Variablen $titel.
<br>
<br>
<pre>
&lt;?php
$titel = "Willkommen";
@include "header.inc.php";
?&gt;
&lt;h1&gt;&Uuml;berschrift der Seite&lt;/h1&gt;
Inhalt Inhalt, noch mehr Inhalt
&lt;?php
@include "footer.inc.php";
?&gt;
</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&auml;ndern,
und die &Auml;nderung wirkt sich sofort auf alle Seiten aus, da diese das Layout
ja erst beim Aufruf hinzuf&uuml;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&szlig;en trennt diese Idee das Layout nicht vollst&auml;ndig vom Inhalt, da in den Seiten ja noch HTML Elemente wie &lt;h1&gt; enthalten sind, aber in Verbindung mit CSS ist diese L&ouml;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&uuml;ck:<a href="index.html"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zur&uuml;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">&#160;</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 &amp; 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>
&copy; 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>&nbsp;,&nbsp;&nbsp;<a href="http://www.selfphp.info/impressum.php">Impressum</a></td>
</tr>
</table>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink