Eure Aufgabe:
In 20 Schritten zum neuen Layout

1.
Erstellt euch einen neuen Ordner für unsere Abschlussarbeit.
Verwendet den unter "Vorbereitende Maßnahmen" dargestellten Quelltext, ändert den Title in "Abschlussarbeit", entfernt den Text im body und speichert das Ganze wieder als "abschluss.html" ab.
Erstellt eine (noch leere) CSS-Datei und speichert diese als "abschluss.css" ab.

2.
Stellt eine Verbindung zwischen beiden Dateien her, indem ihr die "abschluss.css" in die "abschluss.html" als Stylesheet einbindet.

3.
Weist dem "body" folgende Angaben zu:
Hintergrundfarbe: #F0F8FF
die Schriftart Verdana
die Schriftgröße von 100,01 %
eine Breite von 100 %
eine Höhe von 100 %
einen Außenabstand von 0
einen Innenabstand von 0

4.
Fügt in eure "abschluss.html" einen Container mit der Bezeichnung "wrapper" ein.
Schreibt darein "Ich bin der wrapper"

Der wrapper soll folgende Eigenschaften haben:
Breite: 750 Pixel
einfacher Rahmen mit 1 Pixel Rahmenstärke und der Farbe #8A2BE2

5.
Zentriert den wrapper horizontal.
Da wir das noch nicht behandelt haben hierzu folgende Hilfestellung:
Eine horizontale Zentrierung erreicht ihr über margin: 0 auto;

6.
Schiebt den wrapper noch etwas nach unten indem ihr ihm einen oberen Abstand von 20 Pixeln zuweist.

7.
Packt in den wrapper eine weitere Box für den Header und gebt ihr die Bezeichnung "kopf"

8.
Verseht den "kopf" mit der Hintergrundfarbe #A1F2A1
Schreibt in den "kopf" eine Überschrift h1 mit dem Text "Abschlussarbeit".
Zentriert die Überschrift,
gebt ihr die Farbe #FF80FF
und eine Schriftgröße von 2,1 em sowie
den Außenabstand: 0 Pixel

9.
Fügt unterhalb des "kopf" aber innerhalb des "wrapper" eine weitere Box für die Navi mit der Bezeichnung "menue" ein.

Hinterlegt für das menue folgende Angaben:
Breite: 140 Pixel
Außenabstände: links: 10 Pixel, sonst überall 0
Hintergrundfarbe: nach eurer Wahl
es soll links stehen und rechts umflossen werden

10.
Fügt in das menue eine Überschrift h4 mit dem Text "Mein Menue" ein und
ordnet dieser Überschrift folgende Werte zu:
Hintergrundfarbe: #FF80FF
Schriftfarbe: #FFF
Außenabstand oben: 20 Pixel
Außenabstand unten: 0 Pixel
Innenabstände: 5 Pixel

11.
Fügt in das Menue (unterhalb der Überschrift) eine "unordered list" mit insgesamt fünf Links ein. Verwendet dabei als Bezeichnung Link 1, Link 2 .....

12.
Sorgt dafür, dass in der Liste die Aufzählungspunkte verschwinden.
Setzt die Außen- und Innenabstände der Liste auf 0.

13.
Sämtliche a-Tags innerhalb des menues sollen
nicht unterstrichen sein,
einen Innenabstand von 5 Pixeln haben
eine Schriftgröße von 0,9 em haben
als Blockelement definiert werden

14.
Denkt auch daran, dass die Benutzer des Internet-Explores 6 ein ordentliches Menue sehen möchten.

15.
Im Normalzustand und im besuchten Zustand
soll der Link
die Hintergrundfarbe #CEBCE7
die Schriftfarbe #553186
einen unteren Rahmen mit 1 Pixel Stärke und der Farbe #FFF
haben.
Hilfestellung:
Ihr könnt das zusammenfassen mit dem CSS-Aufruf:
#menue a:link, a:visited

16.
Im Hover-Zustand soll der Link
die Hintergrundfarbe #553186
die Schriftfarbe #FFF
fette Schrift
einen linken Rahmen mit 10 Pixeln Stärke und der Farbe #FF00FF
einen unteren Rahmen mit 1 Pixel Stärke und der Farbe #FF00FF
einen rechtsbündigen Text
haben.
Stellt bitte noch sicher, dass beim Hovern die Linkbreite nicht über die Navibox hinausragt.

17.
Fügt im Anschluss an das Menue und noch innerhalb des wrappers einen weiteren Container mit der Bezeichnung "inhalt" ein.
Gebt ihm eine Hintergrundfarbe eurer Wahl und einen Innenabstand von 10 Pixeln.
Er soll rechts stehen und links umflossen werden und eine Breite von 550 Pixeln haben.

Schreibt in die Inhaltsbox einen beliebigen Text und formatiert ihn nach eurer Wahl

18.
Fügt nach dem Inhalt noch einen Footer mit der Bezeichnung "fuss" ein.

19.
Schreibt in den "fuss" das copy-right mit eurem Namen.
Setzt diesen Text rechtsbündig
mit einem rechten Innenabstand von 20 Pixeln,
verwendet die Hintergrundfarbe #FF00FF
und gebt dem "fuss" eine Höhe von 20 Pixeln

20.
Achtung!
Ihr seid mittlerweile Fortgeschrittene und dürft euch deshalb an den letzten Merkspruch aus Kapitel "Float" erinnern. ("Wer floatet, muss auch clearen!")
Hilfestellung:
Damit der Footer auch unten ankommt (wo er hingehört) müsst ihr ihn aus dem float von menue und inhalt nehmen. Weist ihm deshalb noch ein clear: both; zu.

Eine kleine Zugabe hätte ich noch!


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: