Projekt: Grunddesign

Die Aufteilung der einzelnen Elemente, wie beispielsweise Steuerleiste, Inhalt, Adresse, Logo wird im Grunddesign festgelegt. Dabei gilt es die Zielgruppe zu beachten. Je weniger Webproof (Internetunerfahren) die meisten Besucher sein werden, desto "gewohnter" sollte der Aufbau sein. Mit dem folgenden Aufbau liegen Sie normalerweise nie falsch.

Das Logo kann links oben platziert werden. Darunter die Anschrift und Telefon. Auf der linken Seite die Steuerung und rechts der Inhalt.

Wenn Sie sich für ein Design entschieden haben, sollten Sie dieses auf allen Seiten Ihrer Website verwenden. Haben Sie auf jeder Seite ein anderes Design, führt das nur zur Verunsicherung des Besuchers - wenn Sie das möchten, müssen Sie das machen.

Für diesen Aufbau benötigen wir eine Tabelle. Die linke Spalte für das Logo/Anschrift/Steuerung. Die rechte Spalte für den Inhalt.

 <table height="100%" cellpadding="10" border="1" >

   <tr>

     <td width="175" bgcolor="yellow" >

       Logo <br>
       Adresse <br>
       <br>
       Steuerung
     </td>

     <td width="*" >

       Inhalte
     </td>

   </tr>

 </table>

Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser

Die einzelnen Elemente des table-TAGs

<table bgcolor="yellow" height="100%" width="175"
cellpadding="10" border="1" >

Dabei haben die einzelnen Attribute bei der Tabelle folgende Funktion:

bgcolor="yellow"

Die Hintergrundfarbe der Tabelle - je nach Geschmack, aber immer mit der Prämisse der bestmöglichen Lesbarkeit!

height="100%"

Die Höhe der Tabelle - also den gesamten Bildschirm = 100%

width="175"

Die Breite dieser Tabelle - für das Logo und die Steuerung reichen im Normalfall 150 Punkte aus - es soll ja auch noch Platz für den eigentlichen Inhalt übrig bleiben

border="1"

Der Rand der Tabelle wird während der Entwicklungsphase der Website eingeschaltet, damit exakt ersichtlich ist, wo was anfängt und aufhört. Ist das Design dann entsprechend fertig, werden die Ränder normalerweise mit border="0" ausgeschaltet

cellpadding="10"

Um ein wenig Rand zwischen Tabelle und Tabellen-Inhalt zu schaffen, gibt es diesen Befehl

Damit die Tabelle bündig an die Seitenränder anschließt, finden Sie den entsprechenden Tipp unter Tipps und Tricks.

Weiter geht es zum Erstellen der Steuerung.