====== Wiederholungsübung zu "XHTML-Elemente gestalten": Anmeldung bei XY ====== 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 (Stichwort: ''background-image'' und ''linear-gradient'') * 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 fieldset) 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 Impressum 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 * Rechts neben der Haupt-DIV-Box soll es einen 120x480 Pixel großen vertikalen Banner geben. (Verwende den grünen Banner von unten, Tipp: float, weiteres allumfassendes DIV) {{:inf:inf7b_201011:css:banner.png|}} ==== Mögliche Lösung ==== {{:inf:css:loesung-anmeldungxy.png|}} ==== HTML-Code ==== Anmeldung bei XY

Anmeldung bei XY

Was ist XY?

XY ist die neue Lösung für die Kommunikation in Ihrer Firma.
Wir bieten Ihnen ein schnelles, sicheres und zuverlässiges Sprach- und Textkommunikationssystem,
welches über mehrere Netzwerke seine Vorteile behält.

Vorteile bei XY

Jetzt anmelden

Daten eingeben Username:
E-Mail:
Passwort:
Passwort wiederholen:

Copyright: Impressum