Das HTML-Tabellen GerüstDie HTML Grundlage für das TemplateWie auf der Zeichnung gut zu erkennen war, wird es drei Tabellen geben, die von einer alles umschließenden Tabelle umgeben sind.
Das ganze sieht dann in HTML, so aus:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<head>
<title>Designentwurf fuer ein WebsiteBaker Template</title>
</head>
<body>
<!-- ANFANG - Alles umfassende Tabelle -->
<table border="1" width="80%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#e9bdc8">
<!-- ANFANG - Tablle mit Kopfzeilen-Inhalt -->
<table border="1" width="100%" height="120">
<tr>
<td>Inhalt der Kopfzeile</td>
</tr>
</table>
<!-- ENDE - Tablle mit Kopfzeilen-Inhalt -->
</td>
</tr>
<tr>
<td bgcolor="#e9bdc8">
<!-- ANFANG - Menü-Tabelle -->
<table border="1" width="250">
<tr>
<td>Menü Inhalt</td>
</tr>
</table>
<!-- ENDE - Menü-Tabelle -->
</td>
<td width="100%">
<!-- ANFANG - Tabelle mit dem Inhalt -->
<table border="1" width="100%">
<tr>
<td>Inhalt der Seite</td>
</tr>
</table>
<!-- ENDE - Tabelle mit dem Inhalt -->
</td>
</tr>
</table>
<!-- ENDE - Alles umfassende Tabelle -->
</body>
</html>
und im Browser so:
Zur besseren Übersichtlichkeit sind alle Tabellen mit einem Rahmen von 1 umgeben (border="1").
Es gibt eine Tabelle, die eine Breite von 80% des Browser Fensters hat (width="80%"). Dieses Maß ist zugleich auch das Außenmaß unseres Designs.
Der Abstand der einzelnen Tabellenzellen und der Abstand des Inhaltes der Tabellenzellen in der alles umfassenden Tabelle sind 0 (cellpadding="0" cellspacing="0") .
Die obere Tabellenzelle (Kopf) erstreckt sich über eine Weite von zwei Spalten (colspan="2") und hat als Hintergrundfarbe, genau so wie die linke, untere Tabellenzelle, ein angenehmes helles Rot (bgcolor="#e9bdc8").
In den einzelnen Tabellenzellen (td) der äußeren Tabelle befinden sich je eine weitere Tabelle, die hier individuell formatiert werden kann.
Die Höhe der Kopfzeilen-Tabelle ist 120 Pixel (height="120") und die Breite der Menü-Tabelle 250 Pixel (width="250").
Viel mehr ist bis jetzt noch nicht passiert, aber trotzdem hat die HTML-Datei schon erhebliche Ähnlichkeit mit der gezeichneten Vorlage.
Weiter nach "Vom HTML Design zum Websitebaker-Template" >>
|
Template Tutorial 
Seitenanfang