Layout/Design in Blockbauweise

Die Blockbauweise ist die etwas schwierigere Form ein Design/Layout für eine Homepage zu erstellen.

Bei der Blockbauweise gibt es prinzipiell 2 Formen - Fest stehende Breite und dynamische Breite, wobei erstere etwas einfacher ist und ich anhand dieser die Aufbauweise erläutern werde.

Um mit den Arbeiten beginnen zu können benötigen wir wieder die beiden wichtigsten Seiten - die "index" (.html oder .php) und die "formatierung.css", welche am Besten wieder leer sein sollten.

Der Inhalt (Quelltext) der "index" Datei wäre also nur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Meine erste Homepage</title>
<link rel="stylesheet" type="text/css" href="privates/formatierung.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="robots" content="index, follow">
<meta name="keywords" content="hier circa 10 Suchbegriffe angeben">
<meta name="description" content="Suchmaschinentext">
<meta name="date" content="JAHR-MONAT-TAG">
<meta http-equiv="Content-Language" content="de">
<meta name="author" content="DEIN NAME">
<meta name="audience" content="alle">
 
</head>
<body>
 
</body>
</html>

Der Inhalt der "formatierung.css" wäre nur:

body { background-color:#ffffff; color:#000000; }

Die Schritte der Blockbauweise sind ähnlich der Tabellenbauweise - als erstes Namen für Bereiche und die Überlegung zur Breite.

Da wir allerdings bei Blöcken keine Tabellen erstellen ist die Namensvergabe etwas einfacher - Logofeld kann man einfach "logo" benennen, genauso wie Banner (banner), Links (links), ...

Ein weiterer Vorteil ist, wir können einfach mit ID´s arbeiten. Doch auch hier ist wieder Vorsicht geboten - ID´s dürfen im Quelltext nur einmal aufgeführt werden, also im Zweifeslsfall lieber Klassen erstellen (dürfen unbegrenzt verwendet werden).

Und so könnte jetzt die "formatierung.css" abgeändert sein:

Angabe Erläuterung
body { background-color:#ffffff; color:#000000; } allgemeine Angaben zur Webseite, hier Hintergrund weiß (#ffffff) und Textfarbe Schwarz (#000000)
 
#min_breite { display:block; width:988px; height:*; border:1px solid white; background-color:#000000; } Angabe zum Haupt-Block - Anzeige als Block (also generell), Breite sowie Höhe, Rahmenangaben und Hintergrundfarbe
 
#logo { display:block; float:left; width:210px; height:120px; background-image:url(logo.gif); background-repeat:no-repeat; background-position: 50% 50%; } Angabe zum Logofeld - Anzeige als Block (also generell), Links stehend und rechts umfluss; sowie Breite und Höhe des Feldes und Angaben zum Hintergrundbild (Logo)
 
#banner { display:block; float:right; width:776px; height:120px; background-image:url(Banner04.jpg); background-repeat:no-repeat; background-position: 50% 50%; } Angabe zum Feld des Banners - Anzeige wieder als Block, rechts stehend und links umfluss, Breite und Höhe (Gesamtbreite minus (2 x border) Rahmen minus Breite Logofeld) und Angaben zum Hintergrundbild (Banner)
 
#abstand { display:block; height:20px; width:100%; } Angaben zum Abstandshalter (falls gewünscht)
 
#links { display:block; float:left; width:190px; margin-left:20px; } Angaben zum Linkfeld - Anzeige als Block, links stehend und rechts umfluss, Breite sowie Abstand nach links
 
#inhalt { display:block; float:right; width:728px; height:*; margin-right:24px; margin-top:20px; text-align:left; } Angaben zum Textfeld - Anzeige als Block, rechts stehend und links umfluss, Breite und Höhe sowie Abstand nach oben und rechts, Textausrichtung

Aufgerufen werden die Bereiche in der "index" dann wie folgt:

<body>
 
<div align="center"> (*)
  <div id="min_breite"> (**)
   <div id="logo"></div>
   <div id="banner"></div>
   <div id="abstand"></div>
   <div id="links"> (***)
     <!-- Hier folgen Deine Links -->
   </div> (***)
   <div id="inhalt"> (****)
     <!-- Hier folgt Dein Inhalt -->
   </div> (****)
  </div> (**)
</div> (*)
 
</body>

Wichtig: Beachte in den Klammern die Sternchen - Bereiche werden versetzt geschlossen!

Auch hier habe ich eine solche Seite vorbereitet, so kannst Du wieder besser vergleichen.

vorbereitete Seite in Blockbauweise - Quelltext der vorbereiteten Seite - Formatierung der vorbereiteten Seite -

Übrigens: Ein großes Problem der Blockbauweise ist die Darstellung durch die verschiedenen Browser - probiere Deine Testseite unbedingt mit unterschiedlichen Browsern!