StellatestCSS und der Flügelflagel

CSS und der Flügelflagel


Webseiten mit CSS

Diese Seite ist konzipiert für den Unterricht am Technischen Gymnasium und am Berufskolleg Technik und Medien in Baden-Württemberg.

Empfehlung:

Hilfreich für die didaktische Umsetzung dieses Kurses waren viele Anregungen des weiter HTML-Seminars, einem nicht kommerziellen Forschungsprojekt des Institut für webbasierte Kommunikation und E-Learning. Zur Vertiefung der Kenntnisse ist diese Seite sehr zu empfehlen.

Content und Optik – Zukunftsfährige Gestaltung erfordert eine Trennung

Der nicht nur von Maschinen sondern auch von Menschen lesbare und verstehbare HTML-Code erleichtert die schnelle Umsetzung eigener Gestaltungsideen für die Veröffentlichung im Internet. Texte und Bilder können an Ort und Stelle im Text so dargestellt und positioniert werden, wie es dem Entwickler gefällt. Sobald Projekte komplexer werden behindert diese individuelle Gestaltung eine übergreifende und einheitliche Gestaltung. Schon der Versuch, eine Überschrift auf dreißig Seiten von der Farbe rot auf blau umzustellen oder eine andere Schriftfamilie zuzuweisen, wird zur Sklavenarbeit.

Zukunftsweisende Gestaltung kann daher nur darin bestehen, die Struktur der darzustellenden Inhalte und deren optische Gestaltung klar voneinander zu trennen.


Ein Ziel – viele Wege

Die HTML-Ausgangsversion der ersten Strophe der weiter Loreley (1. Spalte) wurde in der HTML-Version 1 (Spalte 2) und der HTML-Version 2 (Spalte 3) gestaltet. Beide HTML-Versionen führen zum selben Ergebnis (Spalte 4).

HTML-Ausgangsversion
<h1>Die Loreley</h1>
<p>Ich weiß nicht, was soll es bedeuten,<br/>
Daß ich so traurig bin,<br />
Ein Märchen aus uralten Zeiten,<br/>
Das kommt mir nicht aus dem Sinn.<br/>
Die Luft ist kühl und es dunkelt,<br/>
Und ruhig fließt der Rhein;<br/>
Der Gipfel des Berges funkelt,<br/>
Im Abendsonnenschein. </p>
<p>Heinrich Heine, 1822 (1799-1856)</p>
Gestaltung: HTML-Version 1
<h1 color:blue>Die Loreley</h1>
<p font-family: Arial>Ich weiß nicht, was soll es bedeuten,<br/>
Daß ich so traurig bin,<br />
Ein Märchen aus uralten Zeiten,<br/>
Das kommt mir nicht aus dem Sinn.<br/>
Die Luft ist kühl und es dunkelt,<br/>
Und ruhig fließt der Rhein;<br/>
Der Gipfel des Berges funkelt,<br/>
Im Abendsonnenschein. </p>
<p style="text-align:right; font-style:italic">Heinrich Heine, 1822 (1799-1856)</p>
Gestaltung: HTML-Version 2
<style>
h1 {color:blue;}
p {font-family: Arial}
p.autor {
  text-align:right;
  font-style:italic}
</style>
<h1>Die Loreley</h1>
<p>Ich weiß nicht, was soll es bedeuten,<br/>
Daß ich so traurig bin,<br/>
Ein Märchen aus uralten Zeiten,<br/>
Das kommt mir nicht aus dem Sinn.<br/>
Die Luft ist kühl und es dunkelt,<br/>
Und ruhig fließt der Rhein;<br/>
Der Gipfel des Berges funkelt,<br/>
Im Abendsonnenschein. </p>
<p class="autor">Heinrich Heine, 1822 (1799-1856)</p>

Die Loreley

Ich weiß nicht, was soll es bedeuten,
Daß ich so traurig bin,
Ein Märchen aus uralten Zeiten,
Das kommt mir nicht aus dem Sinn.
Die Luft ist kühl und es dunkelt,
Und ruhig fließt der Rhein;
Der Gipfel des Berges funkelt,
Im Abendsonnenschein.

Heinrich Heine, 1822 (1799-1856)


Eine Webseite kann man beschreiben über

Schritt für Schritt – Eine Website bekommt Flügel

Aufgabe

Gruselett
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz
Christian Morgenstern.

Erreicht werden soll folgendes Aussehen

Gruselett

Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.

Christian Morgenstern

Schritt 1a: Das Gedicht erhält eine Struktur

Der Text erhält seine Struktur durch Überschriften, Absätze und Zeilenumbrüche

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html

<h1>Gruselett</h1>
<p>Der Flügelflagel gaustert<br />
durchs Wiruwaruwolz,<br />
die rote Fingur plaustert<br />
und grausig gutzt der Golz.</p>
<p class="autorname">Christian Morgenstern</p>

Erklärung:

HTML-Elemente sind in der Anzahl begrenzt. Absätze (<p></p>) mit unterschiedlicher Funktion können nur unterschieden werden, wenn sie gesondert gekennzeichnet werden. Dafür gibt es die Möglichkeit, einem Element eine Klasse zuzuweisen. Klassennamen dürfen frei erfunden werden. Es empfiehlt sich eine einheitliche Schreibweise z.B. sprechende Begriffe in Kleinschreibung, die einen Rückschluss auf die Verwendungsstruktur zulassen. Der Absatz mit dem Autornamen erhält oben den Namen "autorname" und kann später als Klasse angesprochen und definiert werden.

Es sollte vermieden werden einen Klassennamen zu wählen, der eine Gestaltung festlegt. Ein Klassenname "kursiv", z.B. ist theoretisch möglich, wäre jedoch dann nicht mehr sinnvoll, wenn eine spätere Gestaltung geändert werden soll.

Der Text wird in eine Box gestellt:

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <div class="gedichtebox">
...
</div>

Schritt 1b: Die Seite erhält seine Struktur: Seitendefinition und Grundaufbau

Damit alle Standardbrowser HTML-Code korrekt darstellen, müssen in den erste Zeilen des Dokumentes DOCTYPE-Definitionen angegeben werden. Wenn Sie in einem HTML-Editor, wie z.B. dem kostenlosten Opensource-Programm weiter KompoZer eine neue Seite öffnen, werden diese Informationen bereits vom Programm eingetragen.

Achtung!

Achten Sie darauf, dass das Dokument mit der DOCTYPE-Definition beginnt und nicht etwa mit einer Leerzeile!

In dieser Zeile wird angegeben, welcher HTML-Version und welcher DTD (Document Type Definition) dieses HTML-Dokument folgen soll. Die Definition wurde vom W3C-Consortium festgelegt. Der Link verweist auf die entsprechende Version der DTD.
  • Öffnen Sie Ihre Datei gedichte.html und ergänzen Sie in der ersten Zeile die hier angegebene HTML-Deklaration.
Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Im Anschluss an die HTML-Definition wird die Seite zwischen den Elementen <html> und </html> beschrieben. (Das HTML-Element erhält eine Ergänzung mit Angaben zur HTML-Version und zur verwendeten Sprachversion)

Komplett ist eine HTML-Seite erst dann, wenn sie ein HTML-Element (<html>...</html>) und darin einen HEAD-Bereich (<head>...</head) gefolgt von einem BODY-Bereich (<body>...</body>) enthält.

  • Ergänzen Sie Ihr Dokument um diese Strukturelemente html, head und body.
Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>...</head>
<body>... </body>
</html>
  • Fügen Sie das Gedicht in den Bereich <body>...</body> ein. Das Element <body></body> enhält nun den HTML-Code des Gedichtes aus weiter Schritt 1 dieser Anleitung.
Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <body>
<div class="gedichtebox">
<h1 title="Fantasietitel">Gruselett</h1>
<p>Der Flügelflagel gaustert<br />
durchs Wiruwaruwolz,<br />
die rote Fingur plaustert<br />
und grausig gutzt der Golz.</p>
<p class="autorname">Christian Morgenstern</p>
</div>
</body>

Schritt 2. Das optische Gesicht erhält der Text im Style-Element.

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html<style type="text/css">...</style>

Code für die Gestaltung der Gedichtebox

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <style type="text/css"> 
*{
    padding:0;
    margin:0;
}
html {
    font-size:62.5%;
}
body {
    font-size:1.6em;
    font-family:Arial;
}
h1 {
    font-size:1.3em;
    margin-bottom: 10px;
    }
p {     
    margin-bottom:10px;
    }
.autorname {
    font-style:italic;
    text-align:right;
    }
.gedichtebox {
    width:300px;
    background-color:#FFFF66;
    }
</style>

Hinweis!

 

Im Gegensatz zu IDs (Beispiel: #navigation) dürfen Klassen (z.B. .autorname oder .gedichtebox) beliebig oft auf einer Seite verwendet werden. IDs dürfen pro Seite nur einmal genutzt werden.

Zusatzübung

Schritt 3: Head-Bereich: Title und Zeichensatz

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <title>Christian Morgenstern | Website mit CSS</title>

Title wird im Kopf des Browserfensters angezeigt. Suchmaschinen erkennen diesen Titel und verlinken damit auf die Website. Mit diesem Titel wird die Seite auch in Linklisten gespeichert.

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

Schritt 4: Seitenlayout mit CSS-Definitionen im Kopfbereich und in externen CSS-Dateien

CSS-Befehle im Kopfbereich

Der komplette Kopfbereich (zwischen <head> und </head>) mit CSS-Befehlen:

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html ...
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Christian Morgenstern | Website mit CSS</title>
<style type="text/css">
 *    {padding:0; margin:0;}
 html {font-size:62.5%;}
 body {font-size:1.6em%; font-family:Arial;}
 h1   {font-size:1.3em; margin-bottom: 10px;}
 p    {margin-bottom:10px;}
.autorname {font-style:italic; text-align:right;}
.gedichtebox {width:300px; background-color:#FFFF66;}
</style>
</head>
...

 

CSS-Befehle in externer CSS-Datei für alle Medien

Wollen Sie mehrere Seiten mit demselben Aussehen gestalten, macht es Sinn, die CSS-Befehle in eine eigene CSS-Datei auszulagern.

Externe CSS-Datei für die Bildschirmansicht (screen.css):

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html @charset "utf-8";
/* CSS Document */

* {
 font-size:16px;
 margin:0;
  }
body {
 font-size:62.5%;
 font-family:Arial;
 }
h1 {
 font-size:1.3em;
 margin-bottom: 10px;
 }
p {
 margin-bottom:10px;
 }
.autorname {
  font-style:italic;
  text-align:right;
  }
.gedichtebox {
  width:300px;
  background-color:#FFFF66;
  padding:10px;
  }

Wollen Sie, dass für den Ausdruck eine von der Darstellung am Monitor abweichende Darstellung, dann erstellen Sie zusätzlich zur Datei screen.css eine zweite Datei und nennen Sie diese z.B. print.css.

CSS-Befehle in externer CSS-Datei für alle Printmedien

CSS-Datei für den Druck (print.css):

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html @charset "utf-8";
/* CSS Document */

.gedichtebox {
  width:300px; background-color:#FFF;
  padding:10px;
  border:solid 1px #000000
  }

 

In der HTML-Datei verlinken Sie diese externen CSS-Dateien im Kopfbereich:

Alle Änderungen in der externen CSS-Datei wirken sich nun direkt auf alle Seiten aus, in denen auf diese CSS-Datei verwiesen wird. Ohne Angabe des Medientyps gilt die CSS-Datei für alle Ausgabemedien.

Legen Sie im Link den Medientyp fest (z.B. media="print"), dann werden die dort festgelegten Einstellungen im jeweiligen Ausgabemedium wirksam. Steht diese Datei in der Reihenfolge an letzter Stelle, werden alle vorher festgelegten und für dieses Medium gültigen Definitionen überschrieben.

Quellcode der kompletten bisherigen Seite; die neu eingefügten Links sind hervorgehoben.

Den Code finden Sie online unter: http://stellatest.de/css/cssMorgenstern/anleitung.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Christian Morgenstern | Website mit CSS</title>
<link href="screen.css" rel="stylesheet" type="text/css"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<div class="gedichtebox">
<h1 title="Fantasietitel">Gruselett</h1>
<p>Der Flügelflagel gaustert<br />
durchs Wiruwaruwolz,<br />
die rote Fingur plaustert<br />
und grausig gutzt der Golz.</p>
<p class="autorname">Christian Morgenstern</p>
</div>
</body>
</html>

Hinweis zu Dreamweaver:

Dreamweaver bietet in der Entwurfsansicht einen Umschalter, der die Auswirkung der Ausgabe im jeweiligen Medientyp zeigt.
(Sollten Sie den Umschalter nicht sehen, blenden Sie über Ansichten -> Symbolleisten die Symbolleiste "Stilwiedergabe" ein. Danach können Sie in der Ansicht "Entwurf" durch Klick auf das Druckersymbol die Druckansicht und durch Klick auf das Screen-Symbol die Bildschirmansicht betrachten.

Schritt 5: Der Aufbau des sichtbaren Teils der Seite (Alles zwischen <body> und </body>)

Diese Website besteht aus vier Bereichen, die untereinander angedordnet sind.

IDs für die Inhaltsbereiche in der CSS-Datei

Jeder Bereich ist durch eine eigene ID gekennzeichnet.

Der zusätzliche Code in der CSS-Datei für die vier IDs:

/* Kommentar: IDs der Inhaltsbereiche */
#header { }
#navigation { }
#trennzeile { }
#content { }

 

In der CSS-Datei angelegte IDs müssen sich im HTML-Dokument im Body wiederfinden.

Achtung!

Jede ID (z.B. #navigation) darf auf einer Seite nur einmal verwendet werden.

 

 

<div id="content">Hier alles reinkopieren, was bislang im Body steht.</div>

Zusammenfassung: Code für die DIV-Boxen im Body-Bereich:

<div id="header"><p>Christian Morgenstern</p></div>
<div id="navigation"> Seitennavigation </div>
<div id="trennzeile"> Hier kommt die Trennzeile hin. </div>
<div id="content">
<!-- Hier beginnt der eigentliche Seiteninhalt -->
<div class="gedichtebox">
<h1 title="Fantasietitel">Gruselett</h1>
<p>Der Flügelflagel gaustert<br />
durchs Wiruwaruwolz,<br />
die rote Fingur plaustert<br />
und grausig gutzt der Golz.</p>
<p class="autorname">Christian Morgenstern</p>
</div>
</div>
Am Aussehen der Seite hat sich durch die Einführung der IDs (#header, #navigation, #trennzeile und #content) jedoch nichts geändert. Dies ist auch nicht verwunderlich, denn die DIV-Boxen wurden zwar angelegt und die dazugehörigen IDs sind in der CSS-Datei enthalten. Jedoch haben Sie noch keine Gestaltungsanweisungen erhalten.

Schritt 6: Design der DIV-Boxen in der CSS-Datei

DIV-Boxen mit Hintergrundfarben zur besseren Unterscheidung

Tipp!

Benutzen Sie die Farbpalette zur Auswahl einer Farbe

@charset "utf-8";
/* CSS Document */
/* IDs der Inhaltsbereiche */
#header { background-color: blue;}
#navigation { background-color: khaki;}
#trennzeile { background-color: lime;}
#content { background-color: orange;}

Achtung!

Einer der beliebtesten Fehler in CSS-Befehlen sind vergessene Semikolons ";" und geschweifte Klammern. Machen Sie nach jedem Befehl einen Strichpunkt. Ein vergessener Strichpunkt kann die folgenden Definitionen ausschalten.

Ausbaustufe 1: Ansicht der in der CSS-Datei farbig ausgezeichneten Seitenbereiche in der Browseransicht

Raum für den Inhalt von id "header"
Raum für den Inhalt von Klasse "trennzeile" (Empfehlung: Gleich als Klasse anlegen, da mehrfach verwendet)

Gruselett

Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.

Christian Morgenstern

Header mit Hintergrundgrafik mit Turm

Folgende Grafik soll als Header verwendet werden. Die Grafik ist in einer Breite von über 1.800 px angelegt. Sie ist damit für alle gängigen Bildschirme breit genug und wird immer in voller Breite dargestellt.

Turm

Achtung!

Von einem Hintergrundbild ist immer nur so viel zu sehen, wie ihm Platz eingeräumt wird. Daher müssen wir dem DIV-Bereich eine Höhe geben.

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

Ausbaustufe 2

Christian Morgenstern


Navigation mit Hintergrundfarbe

Farben sind auch Geschmackssache. Es empfiehlt sich jedoch eine Orientierung an bereits vorhandenen Farbobjekten. Entnehmen Sie z.B. eine Farbe aus einem Bild, das Sie auf der Homepage benutzen. Wenn Sie die Firefox-Erweiterung weiter ColorZilla nutzen, können Sie über die Pipette die Farbe auswählen.

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

Tipp!

Benutzen Sie die Farbpalette zur Auswahl einer Farbe

(Auf websichere Farben achten. Siehe Erklärung im PopUpfenster)
#navigation { background-color:khaki; }

Hinweis:

Achten Sie bei den Hintergrundfarben darauf, dass diese einen genügend großen Kontrast zur Vordergrundfarbe (Schrift) bietet.

Ausbaustufe 3

Es gibt keinen gedruckten Schlagschatten – Gründe für und gegen den Einsatz von Schatteneffekten

Warum Schlagschatten im Web funktionieren aber für den Druck weniger geeignet sind

Die Erzeugung von Schlagschatten sind bei vielen Webdesignern das höchste der Gefühle. Was im Web funktioniert, sollte jedoch nicht automatisch ein Vorbild für den Druck sein.

Bei der Erzeugung von Bildern am Monitor kommt die additive Farbmischung zum Einsatz. Dabei trifft Licht aus einer Kombination der Farben Rot, Gelb und Blau direkt das Auge des Betrachters. Das Ergebnis ist eine Farbwahrnehmung, bei der Leuchtkraft und Schattenwirkungen eines Bildes relativ intensiv wahrgenommen werden können. Beim gedruckten Dokument wird das Licht nur reflektiert. Die Lichtquelle ist nur indirekt wahrnehmbar. Der Eindruck einer Schattenwirkung kann daher beim Druckdokument nur aus der Erfahrung des Betrachters heraus hergestellt werden. Es gehört viel Erfahrung dazu, im Druck ein ähnlich gutes Ergebnis zu erzielen. Was am Bildschirm gut aussieht, muss im Ausdruck noch lange nicht gut aussehen.

Zusatzübung:

Erstellen Sie eine print.css, in der Sie den Druck des Schattens unterbinden.

Einfügen eines Schlagschattens (Definition in der CSS-Datei)

Um einen Schlagschatten darzustellen, geben Sie der ID #trennzeile in der CSS-Datei den entsprechenden "Auftrag". Der Schatten wird erzeugt durch die Anzeige einer kleinen Hintergrundgrafik (Größe 1px) mit einem Farbverlauf von Grau nach Weiß, die auf der X-Achse wiederholt wird. Das Bild für diesen Hintergrund haben Sie bereits heruntergeladen und im Ordner bilder gespeichert.

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

Ausbaustufe 4

Trennzeile mit Schatten

Testen Sie:

Wenn Sie die Schrift "Trennzeile mit Schatten" löschen, verschwindet der Schatten wieder. 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.

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

Alternativ kann die Trennzeile auch als Klasse angelegt werden, wenn diese auf einer Seite mehrfach Verwendung finden soll.

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

Hinweis!

Damit die Definition wirkt, müssen Sie der DIV-Box im Body anstelle der CSS-ID #trennzeile(<div id="trennzeile"></div> die CSS-Klasse .trennzeile zuweisen (<div class="trennzeile></div>)

Ausbaustufe 5: Trennzeile mit Schatten

Schritt 7: Gestaltung der Schrift in der CSS-Datei

Zweite Grundschrift

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

Ergebnis: Nach dieser Auswahl wird die Schrift im gesamten Dokument in Arial, bzw. einer serifenlosen Schrift angezeigt.

Schrift im Kopfbereich

Die Schrift in der Kopfzeile soll weiß werden und rechts ausgerichtet sein. Damit bleibt sie mit jedem Fenster sichtbar.

Die Schrift im Kopfbereich wurde zwischen den Absatz-TAGS <p> und </p> platziert (weiter siehe Schritt 5) und somit kann man für alle <p></p> im Header eine Definition vereinbaren. Die Schrift soll weiß sein und größer sein als z.B. der Seitentitel.

Tipp!

Sortieren Sie alle CSS-Befehle in der CSS-Datei so, dass die, die zusammengehören untereinander stehen. Sie können mit /* .. */ Kommentare in der CSS-Datei unterbringen.

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

Erklärung der Befehle:

color:white: Schriftfarbe weiß

text-align:right: die Schrift wird rechtsbündig ausgerichtet.

font-size: 2em: relative Schriftgröße. weiter Vorteile der Größenangabe em

padding: 0.4em 0.4em 0 0: Abstand zu den Rändern: 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 oben).

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

Ausbaustufe 6: Anpassung der Schrift im Header

Christian Morgenstern

Schritt 8: Abstände

Abstand innerhalb der Navigation (#navigation {})

padding-left:1em;

Ausbaustufe 7: Navigation erhält einen Innenabstand zum linken Rand.


Abstände innerhalb des Content (#content {})

padding-left:1em;
.gedichtebox {padding: 1em;}

Ausbaustufe 8: Der Text in der Gedichtebox erhält auf allen Seiten einen Innenabstand

Christian Morgenstern

 

Willkommen auf der Christian Morgensternseite

Auf dieser Seite erfahren Sie einiges über Christian Morgenstern aber auch,
wie man mit CSS Webseiten gestalten kann.

Hier eine Kostprobe

Gruselett

Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.

Christian Morgenstern


Abstandskorrekturen

Im Schritt 1 wurden bereits mit dem Universalselektor * alle Abstände (margin und padding) auf 0 gesetzt. Dadurch sind auch die Abstände zwischen den Überschriften und den Absätzen verschwunden.

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

Schritt 9: Hintergrundfarbe Content anpassen

Ausbaustufe 9

Christian Morgenstern

 

Willkommen auf der Christian Morgensternseite

Auf dieser Seite erfahren Sie einiges über Christian Morgenstern aber auch,
wie man mit CSS Webseiten gestalten kann.

Hier eine Kostprobe

Gruselett

Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.

Christian Morgenstern

Übung: Ergänzen Sie das Beispiel um eine Fußzeile mit Schatten.

Tipp:

Legen Sie in der CSS-Datei eine CSS-Definition für Fußzeile an und positionieren Sie eine DIV-Box mit der Fußzeile unterhalb von <div id="content">...</div>. Fügen Sie anschließend auf die gleiche Weise eine zusätzliche Schattenzeile ein.

 


Warnung:

Sebst wenn es funktionieren würde: Benutzen Sie für die Definition der Fuß- und der Schattenzeile nicht die bereits vorhandenen IDs "#navigation" und/oder "#trennzeile". IDs sollten auf einer Seite nur einmal vorkommen.
Benutzen Sie für die Definition der Fußzeile eine neue ID, für die Definition der Schattenzeile die Klasse, (z.B. .schattenzeile {...}). Sie können die bisher als ID angelegte Trennzeile in eine Klasse verwandeln diese mehrfach, also auch unterhalb der Navigation verwenden.

Ausbaustufe 10

Christian Morgenstern

 

Willkommen auf der Christian Morgensternseite

Inhalt ...

Fußzeile mit Schatten

Schritt 10: Menü erstellen

Das Aussehen soll, wie im übrigen Content auch, ausschließlich über die CSS-Datei gesteuert werden. Ziel ist es, durch eine passende Kombination aus Strukturelementen, aktive Menülinks hervorzuheben ohne dabei individuelle Layoutinformationen in den Link einfügen zu müssen.

CSS-Datei-Befehl für aktive Links (jeweils der aktuelle Link soll bold und weiß sein)

/* alle Links (a) innerhalb der ID #navigation soll folgendes gelten */
#navigation a {text-decoration:none; color:black;}

/* alle Links innerhalb der ID Navigation (#navigation) der Klasse gedichte (a.gedichte) auf einer Seite mit der ID #gedichte sollen fett (font-weight:bold) und weiß (color:#ffffff) sein usw. */
#gedichte #navigation a.gedichte,
#links #navigation a.links,
#impressum #navigation a.impressum {
font-weight:bold;
color:#FFF;
}

Navigationseintrag im Body (Nur Links mit der übereinstimmenden ID und Klasse werden im Menü hervorgehoben)

<body id="gedichte">
...
<div id="navigation">
<a href="#" class="gedichte">Gedichte</a> | <a href="#" class="Links">Links</a> | <a href="#" class="impressum">Impressum</a>
</div>
...

Ausbaustufe 11: Navigationsleiste mit hervorgehobenem Link der aktuellen Seite

Christian Morgenstern

 

Willkommen auf der Christian Morgensternseite

Auf dieser Seite erfahren Sie einiges über Christian Morgenstern aber auch,

wie man mit CSS Webseiten gestalten kann.

Hier eine Kostprobe

Gruselett

Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.

Christian Morgenstern

Fußzeile mit Schatten