Sie befinden sich hier:» Projekt Beispielwebsites » Layout über CSS » Design über CSS

Beispielwebsite mit HTML und CSS

Inhalt über HTML und CSS-Design

Wir bauen am Beispiel "Säulen des 20. Jahrhunderts" eine extrem schlanke und schnelle Website mit HTML und CSS auf, die aktuellen Forderungen entspricht. Die Inhalte werden in HTML erstellt, das Design wird komplett über CSS realisiert.

Wie anfange – ist oft das Problem vom Anfänger. Sehen wir uns an der Beispielseite die Entstehungsschritte an. Die einzelnen Schritte sind mit den entsprechenden Kommentaren versehen, damit ersichtlich ist, warum dieser Weg gegangen wird.

Es gibt natürlich mehrere Wege nach Rom und zur eigenen Website – dies hier soll zum lernen dienen und nicht als Religionsfrage. Warum wir primäre CSS nehmen, können Sie an anderer Stelle im Kurs nachlesen.

Fertiges Beispiel der Trennung von Inhalt und Design mit CSS

1. Schritt – das HTML-Grundgerüst

Als erstes wird das Grundgerüst in HTML erstellt. Dies ist deshalb so wichtig, dass das Aussehen nicht abweicht. Bereits durch die erste Zeile mit der DOCTYPE-Definition wird dem Browser gesagt, wie er reagieren soll. Wichtig ist, dass die DOCTYPE-Definition in der ersten Zeile steht, ansonsten verfällt der Browser (i.d.R. der IE in den Quircks-Modus) in merkwürdige Darstellungsformen und man wundert sich. Nehmen Sie das sehr ernst, selbst eine Leerzeile vor der DOCTYPE entwertet diese!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

Es gibt bei den DOCTYPE-Definitionen 3 (eigentlich nur 2 ernstzunehmende) Möglichkeiten. Wir nutzen hier die härteste – die Strict Methode.

Zum Grundgerüst gehören natürlich der HEAD-Bereich und der BODY-Bereich. Das Ganze wird von unserem HTML-TAG umrahmt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
</head>
<body>

</body>
</html>

2. Head-Bereich

Innerhalb des Head-Bereich geben wir den Title dieser Seite mit.


<title>Design über CSS pur - Beispiel</title>

Dieser wird im Kopf des Browserfensters angezeigt, in den Lesezeichen und von Suchmaschinen dann als Link zum anklicken.

Weiterhin wird der Zeichensatz(charset) angegeben, damit dem Browser im Vorfeld bekannt ist, welcher Zeichensatz (Anmerkung öäüß) er erwarten kann.


<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

3. CSS-Definitionen

Innerhalb dieses Beispiels werden wir im Kopfbereich auch die CSS-Definitionen aufnehmen. Dies hat mehr didaktische Gründe, das man sobald es mehr als eine Seite ist, die CSS-Definitionen in eine eigene Datei auslagert. Hier ist es zum Erstellen und Lernen OK und am Ende hält Sie niemand davon ab, die CSS-Definition auszulagern.

<style type="text/css">
<!—

-->
</style>

Unser fertiger HEAD-Bereich am Stück:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Design über CSS pur - Beispiel</title>

  <style type="text/css">
  <!—

  -->
  </style>

</head>
<body>

</body>
</html>

4. der Inhaltsbereich

Der sichtbare Inhalt besteht aus 4 Bereichen:

der obere Bereich mit den Säulen für den Hintergrund und den Moto der Seite.
die Steuerung
der Übergangsbereich mit dem Schlagschatten
der Inhaltsbereich

Für diese 4 Bereiche erstellen wir jeweils einen DIV-Container. Vorerst werde ich für jeden Bereich wenig Inhalt eingeben, damit man sieht, wo welcher Bereich steckt.

<div id="kopfbereich">
<p>Säulenbauten des 20. Jahrhunderts</p>
</div>

<div id="steuerung">
Steuerung
</div>

<div id="schatten">
Hier kommt der Schatten später
</div>

<div id="inhalt">
Der eigentliche Inhaltsbereich
</div>

Diese packten wir nun in unserem Grundgerüst in den Bereich zwischen dem Anfangs-TAG <body> und dem End-TAG </body>.

Wenn wir uns nun den bisherigen HTML-Code in der Vorschau ansehen, ist das noch nicht wirklich überzeugend.

Inhalte ohne CSS-Design sehen sehr spartanisch aus

Es sieht eher aus, als wäre die Seite 1995 erstellt worden.

Das besondere bei CSS ist, das eine Trennung zwischen Inhalt und Design stattfindet. Daher werden die HTML-Seiten auch extrem schlank und schnell.

Jetzt fangen wir an, uns ans Design zu machen.

Zum Kontrolle (und zum Lernen) werden wir nun jedem DIV-Bereich eine Hintergrundfarbe mitgeben. Dadurch sehen wir nun bei der Vorschau, wo welcher Bereich anfängt und aufhört.

Dazu geben wir im CSS-Bereich nun für die einzelnen DIV-Bereiche die CSS-Definitionen ein. Eine exakte Auflistung aller CSS-Befehle finden Sie im Kapitel CSS Definitionen - Übersicht CSS Befehle.

Der obere Bereich mit dem Namen "kopfbereich" bekommt nun seine Hintergrundfarbe.

<style type="text/css">
<!--
#kopfbereich {
}
-->

Zur Erinnerung, das # sagt, dass es sich um eine ID-Bereich handelt. Zwischen die geschweiften Klammern kommen die eigentlichen CSS-Definitionen:

<style type="text/css">
<!--
#kopfbereich {
  background-color: red;
}
-->

Nutzen Sie die Einrückungen. Diese sind nur für Sie und dienen primär der Übersicht. So sehen Sie gemachte Fehler später schneller. Einer der beliebtesten Fehler in CSS sind die vergessenen Semikolons ";". Machen Sie nach jedem Befehl eines!! Sofort! Den ein vergessenes kann die ganzen späteren folgenden Definitionen ausschalten.

Geben Sie nun jedem der 4 Bereiche eine Farbe (gelb = yellow, grün = green, orange = orange) und sehen Sie sich das Ergebnis in der Vorschau an.

Hintergrundgrafik mit den Säulen

Nun wird das erste Design-Element aufgenommen – die Grafik mir den Säulen. Wenn wir die Grafik genau ansehen, fällt einem auf, das diese herzhaft breit ist. Die Grafik ist breiter als jeder normale Monitor. Warum das? Wir wissen nicht, mit was für einer Auflösung die Besucher kommt. Hat dieser 1024 Pixel in der Breite oder 1650. Die Grafik ist breiter und somit wird einfach mehr angezeigt. Den Rest sieht niemand und stört damit auch niemand.

Natürlich kann man die Frage stellen, warum wir eine Grafik für den Hintergrund brauchen und nicht einfach eine Farbe nehmen ist. In der Grafik ist der Himmel mit einem leichten Farbverlauf versehen. Das entspricht der Wirklichkeit und sieht somit besser aus (sehen Sie keinen Farbverlauf, dann wird es Zeit für einen anständigen Monitor).

Laden Sie die Grafik herunter (rechts Maustaste auf den folgenden Link und dann "Speichern unter...". Erstellen Sie ein Verzeichnis mit dem Namen "bilder" in dem Verzeichnis, in dem Ihre HTML-Datei liegt und speichern dort die Grafik mit dem Namen "hg-saeulen-img-9599.jpg" ab.

Um diese nun in den Hintergrund von unserer Seite zu packen, wird der CSS-Bereich ergänzt:

#kopfbereich {
  background:url(bilder/saeulen.jpg) no-repeat left top;
  height:150px;
}

Über die CSS-Definition "background" geben wir den Dateinamen und das Verzeichnis der Grafik mit, sagen über "no-repeat" dass die Grafik nicht wiederholt werden darf und dass diese platziert wird. Die Platzierung erfolgt oben (top) und links (left).

Zusätzlich sagen wir dem DIV-Bereich, dass dieses 150 Pixel hoch sein soll, damit die Grafik in der kompletten Höhe angezeigt wird.

Zu Schrift in diesem Bereich kommen wir später.

Steuerung – welche Hintergrundfarbe

Mit Farben tun sich viele Webseiten-Bastler schwer. Wenn wie in diesem Beispiel bereits ein Bild vorhanden ist, nehmen Sie eine Farbe aus dem Bild. Hier nehmen wir ein Beige aus den Säulen. Wenn Sie den HTML-Editor Scriptly nutzen, können Sie über die Pipette die Farbe auswählen.

Über die CSS-Definition background-color geben wir dem Bereich für die Steuerung die Farbe mit.

#steuerung {
  background-color:#ceb98e;
}

Achten Sie bei den Hintergrundfarben darauf, dass diese einen guten Kontrast zu Vordergrundfarbe (Schrift) bietet. Auf die Lesbarkeit der Schrift kommt es an. Wenn Sie die Besucher quälen wollen, nehmen Sie ein Blau als Hintergrund und ein Rot als Schriftfarbe. Das ist immer schmerzlich und garantiert unerwünscht.

Schattenwurf

Für Bereich zwischen der Steuerung und dem Inhalt gibt es einen Schattenwurf. Dieser ist auch nur eine Grafik. Das besondere an der Grafik ist, das diese Grafik nur 1 Pixel breit ist. Damit aus der 1-Pixel-breiten Grafik ein Schatten wird, lassen wir diesen einfach in der X-Richtung wiederholen.

Wie schon bei den Säulenhintergrund wird der CSS-Befehl "background" verwendet, diesmal mit "repeat-x".

#schatten {
  background:url(bilder/schatten.png) repeat-x;
}

Warum nur 1 Pxel breit? Das ergibt eine minimale Dateigröße :)

Schatten erzeugen mit CSS und einem 1-Pixel breitem Bild

Wenn die Schrift "Hier kommt später der Schatten" nun weggenommen wird, verschwindet der Schatten wieder. Warum? Der Schatten liegt im Hintergrund. Wenn das Element keinen Platz benötigt, dann bekommt es auch keine Höhe und somit wird der Schatten nicht angezeigt. Also muss für dieses Element im CSS noch eine Höhe mitgegeben werden.

#schatten {
  background:url(bilder/schatten.png) repeat-x;
  height:12px;
}

Gestaltung Schrift

Wir wollen eine saubere Schrift wie Arial – und zwar für alle Bereiche unserer Website. Daher definieren wir nun die Schrift und zwar für 2 HTML-TAGs , die auf jeden Fall vorkommen und unseren kompletten Inhalt umschließen. Dadurch, dass diese den kompletten Inhalt umschließen, gilt die Definition für alle Elemente.

Deshalb definieren wir die Schrift für die TAGs "html, body". Dabei werden verschiedene Schriften angegeben. Arial, Helvetica, sans-serif. Ist auf dem Computer des späteren Besuchers die Schriftart Arial nicht installiert, wird Helvetica genutzt. Ist diese auch nicht vorhanden, wir eine Schrift ohne Serifen genutzt (also irgendwas, was Arial ähnlich sieht).

html, body {
  font: 100% Arial, Helvetica, sans-serif;
}

Danach wird alle Schrift in Arial, bzw. einer serifenlosen Schrift angezeigt.

Schrift im Kopfbereich

Unsere oberste Schrift soll weiß werden und rechts ausgerichtet sein. Das besondere ist, das egal wie groß das Browserfenster diese rechts bleibt und gegebenenfalls umbricht.

Wir haben diese Schrift zwischen den Absatz-TAGS <p> und </p> gesetzt. Somit können wir für den HTML-TAG <p> definieren, dass die Schrift weiß ist und eine gewisse Größe haben soll.

Damit dies nur für den Kopfbereich gilt, setzen wir den CSS-Tag entsprechend:

#kopfbereich p {
  color:white;
  text-align:right;
  font-size:2em;
  padding:0.4em 0.4em 0 0;
}

color:white – irgendwie logisch

text-align:right; - die Schrift soll rechts ausgerichtet werden.

font-size: 2em; - wir geben die Schriftgröße relativ an. Das hat verschiedene Vorteile (siehe hierzu das entsprechende Kapitel).

padding: 0.4em 0.4em 0 0; - es soll Abstand zu den Rändern gehalten werden, und zwar 0.4 em von oben (das ist der erste Wert), 0.4em nach rechts (das ist der zweite Wert) und jeweils 0 nach unten und 0 nach links. (Tipp: diese Angaben sind immer wie eine Uhr im Uhrzeigersinn zu lesen und der Start ist bei 12 Uhr).

Durch diese Angaben haben wir nun eine große weiße Schrift. In der Vorschau ansehen.

Abstand innerhalb der Steuerung

In der Steuerung wollen wir auch einen Abstand zum linken Rand: wir geben dazu im DIV-Bereich "steuerung" ein:

padding-left:1em;

Abstände innerhalb des Inhaltsbereichs

Damit auch der Inhalt Abstand zu den Nachbarn hält (ist immer gut und beugt Rechtsstreitigkeiten vor), geben wir dem DIV-Bereich "inhalt" folgenden Wert mit:

padding-left:2em;

Dadurch die einzelne Angabe wird nun 2em Abstand von oben, rechts, unten und links gehalten. Vergleichen Sie dazu die Angabe bei "Schrift im Kopfbereich".

Wenn wir jetzt das Ergebnis in der Vorschau ansehen, sieht das dem gewünschten Ergebnis schon sehr ähnlich. Es fällt nun noch ein Abstand von allen Elementen zum Rand auf, indem das weiß heftig hervor blitzt.

Webseite ohne Bikini-Streifen

Um keinen Abstand um alle Elemente mehr zu haben, setzen wir die Abstände für margin und für padding kollektiv auf 0. Dies scheint jetzt erstmals verwunderlich, ist aber absolut üblich. Dadurch hat man selber in der Hand, wie groß einzelne Abstände sein sollen. Allerdings sollte man auch keine Abstände vergessen zu definieren. Schauen wir uns erstmals das Ergebnis von unserem 0-Setzen an. Durch das * definieren wir, dass es auf alle Elemente angewendet wird.

* {
  margin:0;
  padding:0;
}

Ohne Abstand zum Browserrand - bündige Elemente

Keine lästigen weißen Streifen mehr. Allerdings sind die Abstände zwischen den Überschriften und den Absätzen auch verschwunden. Sollten Sie das nicht sehen, fügen Sie ein paar Überschriften und Absätze im Inhaltsbereich ein.

Abstände zwischen Überschriften und Absätzen fehlen

Nun Definieren wir noch die Abstände und das Ergebnis entspricht der Vorlagen:

#inhalt h1, h2, h3, p, ul {
  padding-bottom:.7em;
}

Wir definieren, dass die Elemente "h1,h2,h3,p,ul" einen Abstand nach unten von 0.7em haben sollen. Dabei ist die relative Größenangabe von "em" wirklich praktisch.

Zusätzlich noch für Auflistungen Abstand von links, damit die Aufzählungspunkte sauber sitzen.

#inhalt ul {
  padding-left:2em;
}

Abstände zwischen Elementen relaitv definiert

Und nun wird die orange Hintergrundfarbe noch entfernt, und es sieht wie geplant aus.

Perfekt machen – CSS-Definitionen auslagern

Um die Sache abzurunden (bisher war es praktisch, das Design in der HTML-Datei zu entwickeln um schnell die Auswirkungen von Änderungen kontrollieren zu können), können wir den kompletten CSS-Bereich auslagern.

Anstatt der CSS-Definitionen kommt dann der Link zu der CSS-Datei in den Head-Bereich in der Form:


<link href="style.css" type="text/css" rel="stylesheet" />

Viel Spaß beim Spielen und Variieren Ab jetzt beginnt das Spielen und Variieren – probieren und testen und die Ergebnisse in verschiedenen Browsern ansehen. Das ist eine effektive Form des lernen. Viel Spaß beim Testen und CSS lernen.

Übung: Ergänzung Fußzeile

Ergänzen Sie das Beispiel um die abgebildete Fußzeile.

vorheriges Kapitel: Layout über CSS

nächstes Kapitel: fertiges Beispiel

das eBook zum HTML-Seminar.de
komplette Website als 219 Seiten eBook
zum Downloaden und Ausdrucken

© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de