HTML-Workshop: Let's go public...

Aufbau einer vollständigen Web-Seite mit CSS

Nachdem wir nun die wichtigsten Grundbausteine einer Web-Seite kennen, werden wir diese jetzt nutzen, um damit eine Seite mit dem typischen Aufbau
und Erscheinungsbild vieler Web-Seiten im WWW zu erstellen.


Ziel:
Erstellen einer Seitenvorlage mit Titelzeile, zweispaltigem Mittelteil mit Navigation links und Inhaltsbereich rechts sowie einer Fußzeile (also einem Seitenaufbau, wie ihr ihn hier gerade vor euch habt...).
Diese Seitenvorlage könnt ihr direkt als Basis eurer eigenen Homepage verwenden!

Dabei soll eine Trennung zwischen der Struktur und dem Design der Seite vor­genommen werden. Dies wird erreicht durch die Auslagerung des Designs aus dem HTML-Quelltext in eine externe CSS-Datei (Cascading Style Sheets). CSS-Attribute haben wir ja bereits bei der Formatierung von Texten kennen­gelernt (style="..."). Das Erstellen der Seitenvorlage erfolgt in vier Schritten.

1. Schritt: Festlegung der Bereiche auf der HTML-Seite

Erstellt in eurem Projektverzeichnis eine neue HTML-Datei mit dem Namen
"seitenvorlage.htm",
die, wie unten dargestellt, das Grundgerüst einer HTML-Seite beinhaltet und später als Vorlage für ALLE Seiten eurer Webseite dienen wird.
 
<!DOCTYPE html> 
<html lang="de">
 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>HTML-Grundkurs</title >       
 </head>

 <body>
 <div id="seite">
 
   <div id="titel">
     Titel der Seite...
   </div>

   <ul id="navigation">
     <li><a href="datei1.htm">Seite 1</a></li>
     <li><a href="datei2.htm">Seite 2</a></li>
     Verweise anpassen / ergänzen...
                                                                  
   </ul>
   
   <div id="inhalt">
   
     Inhalt der Seite...  
          
   </div> 
   
   <div id="fusszeile"> 
     Inhalt der Fußzeile...
   </div>
   
 </div>      
 </body>
  
</html>    

Ergänzt die Grundstruktur dann von oben nach unten im body-Bereich um durch div-Tags eingeklammerte Bereiche für den gesamten Seitenbereich, den Titel­bereich, den Inhaltsbereich sowie den Bereich der Fußzeile. Weiterhin muss zwischen Titel und Inhalt der Navigationsbereich in Form einer Liste von Ver­weisen hinzugefügt werden, die zunächst natürlich nur einen fiktiven Inhalt haben, der später angepasst und erweitern werden muß.

Da alle diese Bereiche nur ein einziges Mal pro Seite existieren, werden zur Kennzeichnung entsprechende ID's in die div-Tags bzw. das ul-Tag geschrieben (siehe farbig markierte Zeilen oben). Damit können die Bereiche eindeutig angesprochen / identifiziert werden und die Struktur der Seite ist vollständig.

Speichert die obige Datei und schaut euch das Ergebnis im Browser an.

2. Schritt: Titelbereich und allgemeine Einstellungen

Wir werden jetzt schrittweise das Design der einzelnen Bereiche festlegen. Dies wird jedoch nicht, wie bisher, mit Hilfe des style-Attributes in einzelnen Tags an­gegeben, sondern zentral in einer externen css-Datei mit dem Dateinamen
"design.css"
definiert. Diese Datei muß im head-Bereich der HTML-Seite mit folgender Anweisung eingebunden werden, um automatisch geladen zu werden:
<head>
  ....  
  <link href="design.css" type="text/css" rel="stylesheet"/>    
</head>     
Ergänzt die Datei "seitenvorlage.htm" entsprechend und legt dann eine solche css-Datei im gleichen Verzeichnis an. Der Inhalt sollte die folgende Form haben (copy&paste möglich :)
body {  /* Voreinstellung für alle Inhalte im body-Bereich */
  margin: 0 auto;                
  background-color: darkblue; /* Hintergrund neben der Seite */     
  font-size: 1em; 
  font-family: Arial, sans-serif;    /* Schriftart Arial */
  color: black;
  font-weight: normal;         

}

div#seite {           /* Einstellungen für die gesamte Seite */
  width: 800px;       /* Breite des Seitenbereiches */
  height: auto;     
  text-align: left;   /* Inhalte links ausrichten */
  margin: 0 auto;     /* standardkonforme horizontale Zentrierung */
  background-color: white;
}

div#titel {   /* alle Einstellungen für den Titelbereich */
  height: 70px; 
  background-color: yellow;
  text-align: center; 
  font-size: 2.7em; 
  font-family: Comic Sans MS; 
  font-weight: bold;
  letter-spacing: 0.2em;
  color: blue;
  border-bottom: 1px solid darkgrey;
}        
Hierin werden zunächst allgemeine Festlegungen für den gesamten body-Bereich und den darin befindlichen Seitenbereich getroffen. Dies sind die jeweilige Hintergrundfarbe (blau / weiss), die Schriftgröße und Ausrichtung etc. sowie eine Breite von 800px (passt auf's Smartphone).

Die einzelnen Bereiche können direkt über die in den entsprechenden div-Tags vergebenen ID's angesprochen bzw. zugeordnet werden (z.B. "div#titel").

Für den Titelbereich wird festgelegt, dass dieser eine Höhe von 70 Pixeln, einen gelben Hintergrund, 2.7-fach vergrößerte Schrift vom Typ Comic Sans MS in blau und fett sowie eine 1px dicke, dunkelgraue untere Randlinie haben soll.

Speichert die Datei(en) und schaut euch das Ergebnis im Browser an.

3. Schritt: Navigation und Inhaltsbereich

Der Navigationsbereich soll sich links auf der Seite befinden und rechts vom Inhalt "umflossen" werden. Dies wird erreicht durch die css-Anweisung
"float: left;"
für den gesamten Navigations­bereich (s.u.). Gleichzeitig wird eine feste Breite von 10em vorgesehen, damit diese unabhängig vom Inhalt der Liste immer gleich ist. Der Navigationsbereich wird mit einem Rahmen (border) umgeben sowie die gewünschten Abstände eingestellt.

Nachfolgend wird der Listenstil so eingestellt, dass keine Aufzählungspunkte der unordered list angezeigt werden sowie Links unabhängig vom angezeigten Text Listelemente vollständig füllen, damit bei Selektion mit der Maus immer ein gleich großer farbiger Hintergrundbereich angezeigt wird.

 
/*--------------------   Navigationsbereich  ---------------*/      
ul#navigation {    
  float: left;   /* Liste für die Navigation links am Seitenrand */
  width: 10em;   /* die Breite des Navigationsbereiches ist 10em */
  height: auto;  /* Höhe automatisch bestimmen lassen            */    
      
  border: 1px solid darkgrey; /* Rahmen um die Navigationsliste  */
  border-radius: 5px;         /* abgerundete Ecken               */
  margin: 20px 10px 6px 6px;  /* Außenabstände der Liste         */
  padding: 12px 3px 12px 6px; /* Innenabstand vom Rahmen         */
}
  
ul#navigation li {
  list-style: none;   /* keine Listenpunkte (bullets) anzeigen   */
  padding: 0.2em;     /* Innenabstände im List-Item              */
}
  
ul#navigation a {
  display: block;  /* unabhängig von der Textlänge den */ 
                   /* umgebenden li-Block füllen       */
}  

ul#navigation a:link, 
ul#navigation a:visited {
  text-decoration: none;   /* links ohne Unterstrich    */
  color: #0000CD;          /* links immer in Mittelblau */
}

ul#navigation a:hover,      /* Aussehen für mouse-over und */ 
ul#navigation a:focus,      /* ausgewählten link           */ 
ul#navigation a:active {        
  color: white;            /* weisse Schrift            */
  background-color: red;   /* dunkelroter Hintergrund   */ 
  border: none;            /* kein Rand                 */              
  border-radius: 2px;      /* abgerundete Ecken         */
} 

Abschliessend wird festgelegt, dass Links immer im gleichen Mittelblau und ohne Unterstrich angezeigt werden (Pseudoklassen link und visited) sowie beim Überfahren oder Selektieren mit der Maus mit rotem Hintergrund und weisser Schrift erscheinen (Pseudoklassen hover, focus und active).

/*-------------------   Inhaltsbereich   -------------------*/ 
div#inhalt {
  margin-top: 3px;
  margin-bottom: 3px;
  padding: 0 0.4em 0 0.4em;  /* Innenabstände rechts und links   */
    
  min-height: 300px;         /* Minimalhöhe des Inhaltsbereiches */
  height: auto !important;
  height: 300px;    
  max-height: 600px; /* Maximalhöhe, für Scrollbalken erforderlich */
  overflow: auto;    /* automatisch Scrollbalken einblenden        */
}       

Zum Schluss wird neben Randvorgaben für den Inhaltsbereich eine Minimalhöhe von 300px vor­gegeben, damit Seiten mit wenig Inhalt nicht beliebig klein werden können. Ebenso wird eine Maximalhöhe von 600px eingestellt, die in Verbindung mit der Anweisung "overflow: auto;" dazu führt, dass der Inhaltsbereich bei Bedarf automatisch Scrollbalken erhält und dadurch Navigation und Fußzeile immer sichtbar bleiben (probiert mit einer Seite mit viel Inhalt einmal aus, wie diese dargestellt wird, wenn die beiden Anweisungen weggelassen werden...)

4. Schritt: Formatieren der Fußzeile

Im Bereich der Fußzeile müssen jetzt die "floatenden" Bereiche wieder zusammen­geführt werden, um eine Zeile zu erhalten. Hierzu dient die css-Anweisung
"clear: both;"
Nachfolgend werden die Festlegungen für die Schriftgröße und -farbe sowie einen 1px-starken, dunkelgrauen Rand als optische Abgrenzung zum Inhaltsbereich vorgenommen.
/*---------------  Fußzeile  --------------*/
div#fusszeile {
  clear: both;  /*  floats wieder zusammenführen */    
    
  font-size: 1.4em; 
  color: red;    
  border-top: 1px solid darkgrey;
  padding: 3px 0 3px 0;    
}            

 

Vervollständigt die Datei "design.css" um alle zuvor aufgeführten Bereiche, speichert sie und schaut euch das Ergebnis der Seitenvorlage im Browser an.

Verwenden der Seitenvorlage / Erstellen einer Kursseite

Damit ist die Seitenvorlage für eine Kursseite fertig. Um hiermit eine vollständige Webseite mit einer Seite für jedes Kapitel bzw. Thema zu erstellen, müssen
entweder die entsprechenden Bereichsdefinition und die Navigation in die bestehenden HTML-Dateien, z.B. "textformatierung.htm",
oder die in den einzelnen Dateien zwischen den body-Tags befindlichen Inhalte in eine leere Seitenvorlage
kopiert werden. Natürlich sind am Ende auch die Verweise im Navigationsbereich entsprechend zu erweitern und inhaltlich anzupassen.

 

  © K. Milzner, 2013 Let's float again  -  Struktur und Design mit HTML und CSS trennen...