Der Benutzer soll sich bei „XY“ anmelden können.
- Die folgenden Angaben sind nur die grundsätzlichen Richtlinien, selbstverständlich können weitere CSS-Eigenschaften und XHTML-Elemente verwendet werden!
- Erstelle ein XHTML-Dokument und eine externes Stylesheet „style.css“
- Die Schriftart für das gesamte Dokument soll Verdana sein
- Der Hintergrund der gesamten Seite soll ein Farbverlauf von schwarz auf weiß sein
- Für alle Links gilt:
- Sie sollen nicht unterstrichen sein
- Sie sollen dunkelrot sein
- Sie sollen bei Berührung mit der Maus schwarz werden
- Während sie angeklickt (aber noch nicht losgelassen) werden, sollen sie fett sein
- Es soll eine DIV-Box geben, die
- 65% des verfügbaren Platzes in der Breite nutzt, jedoch eine passende minimale Breite (die entsprechende Eigenschaft findet sich auf css4you) hat
- die Hintergrundfarbe weiß hat
- Einen beliebigen (nicht angegeben) Platz in die Höhe nutzt
- Einen schwarzen Rahmen mit einer Strichstärke von 3px mit abgerundeten Ecken (Abrundungsgrad beliebig) hat
- Einen Innenabstand von 7px hat
- In dieser DIV-Box soll
- eine h1-Überschrift (die mit CSS passend formatiert wird, u.a. Schriftgröße 1.5em + schattiert) „Anmeldung bei XY“
- eine h2-Überschrift (die mit CSS passend formatiert wird, u.a. Schriftgröße 1.2em) „Was ist XY?“
- darunter ein Absatz sein, in dem den Nutzer in Fließtext darüber informiert wird, wozu er sich anmeldet. (Blindtext möglich!)
- unter diesem Absatz eine h2-Überschrift „Vorteile bei XY“
- zu dieser soll es eine Liste (Aufzählungszeichen Quadrat oder kleine Grafik) geben, in dem dem Nutzer Vorteile die er durch eine Mitgliedschaft hat aufgelistet werden
- darunter soll erneut eine h2-Überschrift „Jetzt anmelden“ sein
- zu dieser soll es ein ansprechend gestaltetes Anmeldeformular (mit Verwendung der neuen XHTML-Tags) geben, legend soll sein „Daten eingeben“
- Als Footer soll es eine weitere DIV-Box geben, die am unteren Rand der Seite positioniert wird.
- Hintergrund dieser Box soll weiß sein
- Außerdem soll es auf den oberen Seite der Box einen schwarzen Rahmen geben
- darin soll es einen Copyright-Vermerk und einen Link <a href=„#“>Impressum</a> geben
- Für den Fall das der der Benutzer die Seite als Anmeldeformular ausdrucken will, soll es ein entsprechendes Druck-Layout geben (medienspezifische CSS-Datei)
- Validiere die XHTML und die CSS Datei und beseitige alle Fehler
- Bonus: Rechts neben der Haupt-DIV-Box soll es einen 120×480 Pixel großen vertikalen Banner geben. (Verwende den grünen Banner von unten, Tipp: float, weiteres allumfassendes DIV)
- Bonus: Das Design soll zusätzlich zu den aktuellen Browsern mit den Browsern Internet Explorer ab Version 7, Firefox ab Version 2 und Opera ab Version 9 „grundsätzlich“ korrekt dargestellt werden, „grundsätzlich“ heißt, dass die Seite auch in den alten Versionen (v.a. IE7) gut aussehen soll, die neueren CSS3-Eigenschaften wie text-shadow können dort natürlich nicht funktionieren. Um CSS-Anpassungen für den IE zu machen, verwendet man am besten Browser-Weichen. Zur Überprüfung, wie die Seite in den alten Browsern aussieht: http://browsershots.org/
