Der Kunde ist König,
und der hat sich gerade überlegt, dass es doch ganz schön wäre, wenn eine Garantieerklärung auf seiner Seite eingefügt wird. Diese Garantie soll deutlich hervorgehoben werden. Wie gut das du bei der Konkurenz einen Spion sitzen hast, der dich mit geheimen Code versorgt. Du findest diesen im Download-Bereich.
Aufgabe 1
Lade die Datei bar-richtig-geheim.zip und entpacke den Inhalt z.B. nach /ai/html/bar-richtig-geheim.
Wichtig, die Datei kommen in ein neues Verzeichnis.
Die Dateien werden nicht zu deinen bereits erstellten Daten kopiert.
Schau dir die Bar von der Konkurenz genau im Explorer an.
Studiere den html code genau. Die meisten Veränderungen, insbesondere bzgl. der Garantiebox findest du in der css-Datei. Experimentiere mit den Einstellungen und mache dich so mit dem Boxprinzip vertraut.
Aufgabe 2
Versuche für jede Zeile eine Erklärung zu finden.
Hinweis: Öffne dazu die css-Datei mit dem Notepad und schreibe hinter jede Zeile ihre Bedeutung.
/* Diese Zeichen ermöglichen dir einen Kommentar zu setzen.
Alles was da zwischen steht wird vom Browser nicht beachtet. */
Um die Bedeutung einer Zeile herauszufinden kannst du den entsprechenden Wert verändern und dir das Ergebnis immer wieder im Brwoser anschauen.
Gehe so Zeile für Zeile vor und ergänze die Kommentare in der ccs-Datei.
Unten siehst du bei line-height:1.5em; einen ersten Kommentar/Erklärung.
#garantie{
line-height: 1.5em; /* Zeilenhöhe wird auf das 1,5-fache gesetzt. */
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;
border-color: white;
border-width: 1px;
border-style: dashed;
background-color: #a7cece;
padding: 25px;
padding-left: 80px;
margin: 30px;
margin-right: 250px;
background-image: url(bilder/hintergrund.gif);
background-repeat: no-repeat;
background-position: top left;
}
Viel Erfolg!
Schreibe einen Kommentar