Geschrieben von Startpost-Retter am 23.01.2011 um 18:18:
Tutorial: Ein Tabellenlayout mit HTML (und PHP)
Im Folgenden möchte ich erklären, wie Du ein Tabellenlayout codest. Besonders praktisch ist, dass ein solches Layout mit jedem Browser konform ist; für Webseiten mit vielen einzelnen Inhalten dürfte es jedoch ungünstig sein. Du musst selbst entscheiden, ob sich ein Tabellenlayout für dich lohnt oder nicht.
Ich werde mit HTML arbeiten, Dir am Ende jedoch auch erklären, wie Du Dir mit ein bisschen PHP das Leben leichter machst. Vorkenntnisse sind nicht zwingend notwendig, helfen aber.
Grundlagen
Öffne den Texteditor oder einen speziellen Webeditor. Da ich ein Linux-Betriebssystem betreibe, nutze ich den Editor „Bluefish“. Spezielle Editoren haben den Vorteil, dass Teile des Codes farblich hervor gehoben werden und sich die Übersichtlichkeit erhöht.
Wir arbeiten mit 2 Dateien:
Führe Dir den Grundaufbau einer .html-Datei vor Augen. Sie beginnt mit dem DOCTYPE, dann folgen <html>, <head>, <title> und <body>.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Tabellenlayout</title>
</head>
<body>
</body>
</html> |
|
Die Tabelle
Wie soll das Layout aussehen? Ich entscheide mich für einen Header, darunter einen Content und rechts daneben eine Navigationsleiste. Die Tabelle ist schnell geschrieben.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
|
<table>
<tr>
<td colspan=“2“>HEADER</td>
</tr>
<tr>
<td>CONTENT</td>
<td>NAVIGATION</td>
</tr>
</table> |
|
Die Tabelle kommt natürlich in den <body>-Bereich.
An sich ist das Layout damit schon fertig.
Die grafische Gestaltung
In den Headerbereich kommt zumeist eine dementsprechende Grafik, in meinem Fall nenne ich sie header.png und füge sie mit <img src=“header.png“> ein.
Im Content-Bereich wird der Text angezeigt, der eben den Inhalt darstellen soll. Die Navigation wird ebenfalls im entsprechenden Bereich gecodet, beispielsweise mit <a href=“start.html“>Startseite</a>.
Wichtig!
In Gegensatz zum iframe-Layout enthält bei einem Tabellendesign jede Seite den Code. Lediglich der Inhalt der Tabelle ändert sich: das Grundgerüst muss jedoch auf jeder Seite geschrieben sein! Falls Dir das zu viel Codegewirr ist, kannst Du auf PHP zurückgreifen, wie im folgenden erklärt. Das normale HTML-Tabellenlayout ist jetzt aber fertig.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Tabellenlayout</title>
</head>
<body><table>
<tr>
<td colspan=“2“><img src=“header.png“</td>
</tr>
<tr>
<td>Lustiger Startseitentext, blabla.</td>
<td><a href=“start.html“>Startseite</a></td>
</tr>
</table>
</body>
</html> |
|
Alternative: mit PHP arbeiten
Ich vereinfache mir die Arbeit gerne mit PHP und gestalte die Seiten damit flexibler und übersichtlicher. Solltest du beispielsweise dein Layout ändern, musst du im folgenden nur zwei Dateien und nicht alle bearbeiten.
- header.png
- header.php
- footer.php
- index.php
Wir teilen den gerade geschriebenen Tabellencode jetzt einfach auf die drei Code-Dateien auf. Anders gesagt bedeutet das, dass jede Seite nun aus der Content-Spalte besteht und den PHP-Befehlen, den header.php und den footer.php zu laden – damit das Grundgerüst wieder steht. Klingt komplizierter, als es ist.
Das hier ist die Datei header.php. Sie lädt alles, was in der normalen HTML-Datei vor dem Content-Bereich stehen würde, in diesem Fall die Header-Grafik. Halte dir vor Augen, dass wir die HTML-Datei einfach auf die drei Dateien aufteilen.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Tabellenlayout</title>
</head>
<body><table>
<tr>
<td colspan=“2“><img src=“header.png“</td>
</tr>
<tr> |
|
Im Folgenden siehst du die Datei index.php mit den PHP-Befehlen, Header.php und Footer.php 'reinzuladen'. Dazwischen ist der Teil der Tabelle, in dem der Content geschrieben steht.
| php: |
1:
2:
3:
4:
5:
|
<?php include 'header.php'; ?>
<td>Lustiger Startseitentext, blabla.</td>
<?php include 'footer.php'; ?> |
|
Das hier ist die Datei footer.php. Hier steht alles drin, was in der normalen HTML-Datei nach dem Content-Bereich stehen würde: in diesem Fall die Navigation.
| code: |
1:
2:
3:
4:
|
<td><a href=“start.html“>Startseite</a></td>
</tr>
</table>
</body> |
|
