Beispielwebsite: 1-Spalten-Layout Schritt für Schritt
Inhalt über HTML und Design über CSS
Wir bauen am Beispiel „Säulenbauten des 20. Jahrhunderts“ eine extrem schlanke und schnelle Website mit HTML und CSS auf, die aktuellen Anforderungen entspricht. Die Inhalte werden in HTML erstellt, das Design wird komplett über CSS realisiert.
Wie am besten anfangen – das ist oft die Frage, die sich Anfänger stellen. Sehen wir uns anhand der Beispielseite die Entstehungsschritte an. Die einzelnen Schritte sind mit den entsprechenden Kommentaren versehen, damit ersichtlich ist, warum dieser Weg gegangen wird.
Es führen natürlich mehrere Wege nach Rom und zur eigenen Website – das Folgende soll zum Lernen dienen und nicht als Religionsfrage. Warum wir CSS für Design nehmen, können Sie an anderer Stelle im Kurs nachlesen.
1. Schritt – das HTML-Grundgerüst
Als Erstes wird das Grundgerüst in HTML erstellt. Es ist deshalb so wichtig, damit 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!
Es gibt einige veraltete DOCTYPE-Definitionen - aktuell sollten nur noch die HTML5-DOCTYPE-Variante verwendet werden.
<!DOCTYPE html>
Danach folgt der HTML-Befehl <html> , der den kompletten folgenden Inhalt umrahmt. Als Attribut bei HTML-Befehl <html> wird noch die verwendete Sprache als Attribut "lang" mitgegeben - in unserem Beispiel deutsch und das entsprechende Kürzel "de".
<!DOCTYPE html>
<html lang="de">
Zum Grundgerüst gehören natürlich der <head>-Bereich und der <body>-Bereich.
<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
</body>
</html>
2. Head-Bereich
Innerhalb des <head>-Bereiches geben wir den Title dieser Seite mit.
<title>1-Spalten Layout mit HTML und CSS</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, welchen Zeichensatz er erwarten kann.
<meta charset="UTF-8">
3. CSS-Definitionen
Innerhalb dieses Beispiels werden wir im Kopfbereich auch die CSS-Definitionen aufnehmen. Dies hat mehr didaktische Gründe, dass 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>
</style>
Unser fertiger HEAD-Bereich am Stück:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>1-Spalten Layout mit HTML und CSS</title>
<style>
</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 dem Motto 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 packen 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.
Es sieht eher aus, als wäre die Seite 1995 erstellt worden.
Das Besondere bei CSS ist, dass 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.
Zur Kontrolle (und zum Lernen) werden wir nun jedem DIV-Bereich eine Hintergrundfarbe mitgeben. Dadurch sehen wir 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>
#kopfbereich {
}
Zur Erinnerung, das # sagt, dass es sich um eine ID-Bereich handelt. Zwischen die geschweiften Klammern kommen die eigentlichen CSS-Definitionen:
<style>
#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! Denn ein vergessenes Semikolon 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 mit den Säulen. Wenn wir die Grafik genau ansehen, fällt einem auf, dass diese herzhaft breit ist. Die Grafik ist breiter als jeder normale Monitor. Warum das? Wir wissen nicht, welche Auflösung die Besucher auf deren Computer nutzen. Hat diese 1024 Pixel in der Breite oder 1920 oder mehr. 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. 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: mit der rechten Maustaste auf den folgenden Link klicken und dann „Speichern unter...“ bzw. die URL https://www.html-seminar.de/bilder/saeulen.jpg im Browser aufrufen und dann speichern. 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 „saeulen.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. Einige HTML-Editoren bieten die Möglichkeit über eine Pipettenfunktion eine Farbe aus einem Bild auszuwählen und den entsprechenden Farbcode zu erhalten.
Ü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 zur 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 den Bereich zwischen der Steuerung und dem Inhalt gibt es einen Schattenwurf. Dieser ist auch nur eine Grafik. Das Besondere an der Grafik ist, dass 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.
Diese Grafik mit dem Schatten gibt es hier als Download unter: Schattenwurf (Link mit rechten Maustaste anklicken und dann „speichern untern“) bzw. folgende URL aufrufen: https://www.html-seminar.de/bilder/schatten.png
Wie schon bei dem Säulenhintergrund wird der CSS-Befehl background verwendet, diesmal mit repeat-x.
#schatten {
background:url(bilder/schatten.png) repeat-x;
}
Warum nur 1 Pixel breit? Das ergibt eine minimale Dateigröße :)
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, wird eine Schrift ohne Serifen genutzt (also irgendwas, was der Schrift Arial ähnlich sieht).
html, body {
font: 100% Arial, Helvetica, sans-serif;
}
Danach wird jede Schrift in Arial, bzw. einer serifenlosen Schrift angezeigt.
Schrift im Kopfbereich
Unsere oberste Schrift soll weiß werden und rechts ausgerichtet sein. Das Besondere ist, dass egal wie groß das Browserfenster ist, 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.4em 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: 2em;
Durch 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 vergessen Abstände 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;
}
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.
Nun Definieren wir noch die Abstände und das Ergebnis entspricht der Vorlagen:
#inhalt h1, h2, h3, p, ul {
padding-bottom: 0.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;
}
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="design.css" rel="stylesheet">
Ab jetzt beginnt das Spielen und Variieren – probieren und testen und die Ergebnisse in verschiedenen Browsern ansehen. Das ist eine effektive Form des Lernens. Viel Spaß beim Testen und CSS lernen.
Übung: Ergänzung Fußzeile
Ergänzen Sie das Beispiel um die abgebildete Fußzeile.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
