Planen eines Layouts

Natürlich können Sie die Produktion Ihrer Seiten damit beginnen, Bilder aufzubereiten und Text einzutippen – es ist durchaus möglich, diese Dinge erst zu einem späteren Zeitpunkt mit einem Layout zu versehen.

Günstiger ist nach meiner Erfahrung jedoch, sich möglichst früh auch Gedanken über das Layout einer Seite zu machen und ein entsprechendes „Tabellengerüst“ zu erstellen. Häufig hat das Layout Auswirkungen darauf, was in welcher Weise erstellt oder modifiziert werden muss.

Ein Beispiel

Um diesen Abschnitt nicht ausufern zu lassen, beschreibe ich im Folgenden die Umsetzung eines eher einfachen Layouts. Bei der Erstellung eigener Layouts besitzen Sie selbstverständlich alle Freiheiten, doch sollten Sie den Aufwand dafür nicht unterschätzen – vor allen Dingen empfehle ich Ihnen, Ihre Dateien lieber mit einer zu großen als zu geringen Zahl Kommentare zu versehen.

Die Vorgaben meines Layout-Beispiels sehen wie folgt aus:

• Der Inhalt der dargestellten Seite soll sowohl vom oberen als auch vom linken Rand des Browserfensters einen Abstand von etwa 60 bzw. 40 Pixeln einhalten (60 von oben, 40 von links).
• Die Textspalte soll eine feste Breite von 400 Pixeln haben.
• Links neben dem Text soll sich ein Menü befinden, das voraussichtlich mit 200 Pixeln Breite auskommt.
• Zwischen Menü- und Textspalte soll ein Abstand von wenigstens 20 Pixeln eingehalten werden.

Skizzieren Sie dieses Layout einmal als Tabelle und notieren Sie die geplanten Maße darüber bzw. daneben.

Meine Skizze sieht so aus:

Layoutskizze

Das untere Ende der Tabelle habe ich offen gelassen, da deren Höhe vom Inhalt abhängt.

Höchstwahrscheinlich sieht Ihre Skizze anders aus. Der bedeutendste Unterschied dürfte darin bestehen, dass Ihre Skizze eine Spalte weniger enthält. Ich vermute, dass Ihre Skizze vier Spalten enthält – meine Skizze enthält fünf.

Der Grund für diesen Unterschied dürfte schnell klar sein:

Aus dem bereits Gesagten ergibt sich, dass ein Browser die Darstellung einer Tabelle innerhalb gewisser Grenzen weitgehend „selbstständig“ vornimmt. Und genau diese Grenzen bzw. die zugrunde liegenden Regeln gilt es auszunutzen, um ans Ziel zu gelangen.

Bei der Umsetzung der Layoutvorgaben gehe ich nach folgenden Überlegungen vor:

• Die Breite einer Spalte wird vom breitesten, nicht teilbaren Element bestimmt, das sie enthält.
• Eine prozentuale Breitenangabe wird nach Möglichkeit befolgt – ansonsten übergangen und nur „so weit, wie möglich“ umgesetzt.

Diese beiden Gedankengänge münden in folgender „Strategie“:

Wir erreichen vorgesehene Maße, indem wir in die betreffenden Spalten entsprechend große Bilder einfügen. Eine zusätzliche Spalte, die mit einer passend gewählten Option versehen ist, bewirkt, dass die anderen Spalten in horizontaler Richtung auf ihr Mindestmaß „zusammengeschoben“ werden.

Das nach meiner Erfahrung günstigste Vorgehen sieht wie folgt aus: Anlegen einer Tabelle, deren erste Zeile dazu dient, die Vorgaben umzusetzen. Der Rest der Tabelle ist für die Inhalte vorgesehen.

Anstatt für die vorgegebenen Spalten entsprechend große Bilder anzufertigen, bedienen wir uns der Möglichkeit, Bilder durch die Angabe entsprechender Optionen im <img>-Tag zu skalieren. Wir benötigen also lediglich ein einziges Bild, um alle vorgesehenen Spaltenmaße zu erreichen.

Ich verwende zu diesem Zweck ein „spezielles Behelfsbild“. Und da dieses Bild lediglich aus einem einzigen Pixel besteht (das transparent ist), ist dieses „Layout-Helferlein“ eine Datei, die denkbar wenig Platz auf der Festplatte (oder Ihrem „Webspace“) einnimmt. Das Bild, das ich hierfür verwende, können sie hier herunterladen.

Im <table>-Tag definiere ich zu Beginn der Arbeit eine Rahmenstärke von 1 (Option border="1"), damit ich bei der Kontrolle im Browser erkennen kann, ob das Ergebnis meinen Vorstellungen bzw. den Vorgaben entspricht.

Somit sieht der Code der ersten Version der Tabelle wie folgt aus:

<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="trans.png" alt="" width="40"  height="60"></td>
    <td><img src="trans.png" alt="" width="200" height="1"></td>
    <td><img src="trans.png" alt="" width="20"  height="1"></td>
    <td><img src="trans.png" alt="" width="400" height="1"></td>
    <td width="99%"></td>
  </tr>
</table>

Die nächste Zeile der Tabelle erzeuge ich, indem ich die erste Zeile kopiere und darunter einfüge. Dann entferne ich in der Kopie die Bilder, ergänze die <td>-Tags derjenigen Zellen, die mit Inhalten gefüllt werden sollen, um die Option valign="top" und füge passende Kommentare ein.

Der Code des fertigen „Layout-Gerüstes“ sieht so aus:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="trans.png" alt="" width="40"  height="60"></td>
    <td><img src="trans.png" alt="" width="200" height="1"></td>
    <td><img src="trans.png" alt="" width="20"  height="1"></td>
    <td><img src="trans.png" alt="" width="400" height="1"></td>
    <td width="99%"></td>
  </tr>
  <tr>
    <td></td>
    <td valign="top">
      <!-- Menü Anfang -->
      <!-- Menü Ende -->
    </td>
    <td></td>
    <td valign="top">
      <!-- Inhalte Anfang -->
      <!-- Inhalte Ende -->
    </td>
    <td></td>
  </tr>
</table>

Zwischen den Kommentaren, die Anfang und Ende der vorgesehenen Inhalte kennzeichnen, kann nun nahezu beliebig programmiert werden – die einzige Einschränkung, die hierbei zu beachten ist, ist die Breite der jeweiligen Spalte.

Hinweis: Die Ergänzung bzw. Fortsetzung dieser Einführung („… und ein bisschen mehr HTML“) enthält ein weiteres Layoutbeispiel, das dort auch ausgeführt ist und dessen Dateien Sie als Vorlage für eigene Seiten nutzen können.

Wenn Sie diese Einführung bis hier bearbeitet haben, besitzen Sie das Wissen, das Sie benötigen, um eigene Seiten nicht nur denken, sondern auch umsetzen zu können.

Und dann?

Ins Netz damit!

Sofern Sie nicht schon von Ihrem Internet-Zugangsprovider mit der Möglichkeit versorgt wurden, Ihre Seiten ins Internet zu stellen, ist es spätestens jetzt an der Zeit, sich um ein solches „Plätzchen“ für Ihre HTML-Projekte zu kümmern. Ebenso wie die Preise für Telekommunikation im Allgemeinen sind in den letzten Jahren auch die Preise für „Webspace“ gefallen.

Mittlerweile bekommt man eine „Domain“ (z. B. „www.ihrname.de“) inklusive 100 oder mehr Megabyte „Webspace“ für eine Monatsgebühr von ein paar wenigen Euro. Wenn Sie Ihr Plätzchen haben, müssen Sie sich um ein Programm kümmern, mit dem Sie Ihre Seiten auf den „Server“ übertragen können. Da zur Übertragung fast ausschließlich FTP („File Transfer Protocol“) verwendet wird, benötigen Sie einen „FTP-Client“, mit dem Sie die Übertragung vornehmen können. „WS-FTP“ war eine Zeit lang sehr beliebt. Heutzutage ist es aber nichts Ungewöhnliches mehr, seinen „Webspace“ wie eine Festplatte oder einen „USB-Stick“ auf den Bildschirm zu holen und die Dateien genauso komfortabel zu kopieren, wie man es von lokalen Kopieraktionen gewohnt ist.

Sobald Sie ein entsprechendes Programm (oder System) haben, starten Sie es, „loggen“ sich auf dem Server ein und übertragen Ihre HTML-, Bild- und sonstigen Daten.

Weiter zu: Tipps und Hinweise

Nach oben