Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.


***** Übungen: CSS - Eigene Stilklassen *****


CSS_9-1: Ungebundene Klassen definieren 1

Verwenden Sie bitte den Quellcode ganz (!) unten.

Ihre Chefin ist vom 08/15-Stil Ihrer Website genervt ("Alles nur schwarz auf weiß, Schriftart Times – wie langweilig!"). Sorgen Sie dafür, dass die Webseite etwas ansehnlicher wird, indem Sie in einem externen Stylesheet (oder im Kopf des Dokuments) Stile definieren(Achtung: Im Body sollen Sie nichts ändern!). Befolgen Sie die Ratschläge Ihres Freundes Fritz, der Ihnen u.a. gesagt hat:
• Nimm einen dunklen Hintergrund und eine helle Schriftfarbe, das sieht originell aus.
• Verwende eine Serifenschrift, das kommt aktuell wieder in Mode.
• Die Überschriften bekommen eine andere Farbe als der Fließtext, das gibt der Seite einen gewissen Pfiff. Nimm für die Überschriften am besten eine bunte Farbe.
• Listen sehen super aus, wenn du als Aufzählungszeichen Quadrate nimmst.





CSS_9-2: Ungebundene Klassen definieren 2

Verwenden Sie das Ergebnis der vorigen Aufgabe.

Leider wurde Ihrer Chefin gekündigt. Sie haben jetzt einen neuen Chef, der viel Erfahrung mit Webdesign hat. In seiner letzten E-Mail an Sie schreibt er:

"Liebe Frau N.,

inhaltlich bin ich sehr zufrieden mit unserer Website. Leider ist die gestalterische Umsetzung ziemlich misslungen. Bitte nehmen Sie folgende Änderungen vor:
• Textart: Arial oder Verdana (bitte im Web immer serifenlose Schriften verwenden).
• Als Hintergrundfarbe bitte weiß. Verwenden Sie grundsätzlich nur dunkle Schrift auf hellem Grund. Die Schriftfarbe sollte so dunkel und der Hintergrund so hell sein, dass ein ausreichender Kontrast für bequemen Lesefluss sorgt.
• Wenn Sie einen weißen Hintergrund auf einer Webseite haben, sieht eine dunkelgraue Schrift edler aus als eine schwarze. Nehmen Sie bitte die entsprechende Anpassung vor. Experimentieren Sie, welches Grau besonders edel aussieht.
• Sorgen Sie dafür, dass Überschriften und Fließtext die gleiche Farbe haben – wir sind doch nicht im Zirkus!
• Diese Quadrate und Bullets als Aufzählungszeichen bei Listen kann ich nicht mehr sehen! Bitte erstellen Sie mit einem Grafikprogramm ein kleines rotes Dreieck, dessen Spitze nach rechts zeigt und verwenden Sie es als Aufzählungszeichen.
• Für die Klasse “personeninfo” verwenden Sie bitte eine kleinere Schriftgröße.
• Texte der Klasse "fliesstext" sollen kursiv ("italic") angezeigt werden.

Beste Grüße,
Chef"





CSS_9-3: Gebundene Klassen definieren

Verwenden Sie das Ergebnis der vorigen Aufgabe.

Wie der Zufall so spielt, wird auch der neue Chef schon nach kürzester Zeit gefeuert. Sie bekommen eine Chefin, die sich sehr gut mit CSS auskennt. Ihr Briefing:

"Sehr geehrte Frau N.,

mir gefällt das aktuelle Design der Seite sehr gut, bitte ändern Sie nichts daran. Sie haben wirklich ein gutes Auge für Webdesign. Ich möchte aber, dass Sie einige Umstrukturierungen vornehmen. Achten Sie bitte darauf, dass sich am Design nichts ändert.
1. Sorgen Sie dafür, dass alle Überschriften der Klasse "informationsbereich", alle Absätze der Klasse "fliesstext" und alle Listen nun einheitlich den Klassennamen "informationsseiten" erhalten.
2. Die Liste im Bereich "Herr Maier" soll eine nummerierte Liste sein.

Mit den besten Grüßen,
Chefin."





CSS_9-4: Vorteile von gebundenen Klassen nutzen

Alles im Leben ist unwägbar. Ihre neue Chefin verlässt nach wenigen Wochen die Firma, weil sie eine besser bezahlte Stelle in Schweden bekommen hat. Die neue Chefin schreibt Ihnen eine Mail, wo sie Sie lobt:
"… perfektes Layout, außerdem eine sehr sinnige CSS-Struktur!
Wir haben letzte Woche eine Unterfirma gegründet. Dort werden die gleichen Inhalte wie auf unserer Hauptwebsite abgebildet, allerdings in anderer Farbgebung. Bitte duplizieren Sie die Seite, ändern Sie alle Klassen mit dem Namen “informationsseiten” in “unterfirma” und verändern Sie das Layout nach Ihren Vorstellungen.
Herzliche Grüße,
Chefin."





---


Quellcode für Aufgabe CSS_9-1:

HTML-Code
<html> <head> <title>Uebung: Ungebundene Klassen</title> </head> <body>   <h1 class="informationsbereich">Unsere AGB</h1> <p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>   <ul class="liste"> <li>Sie haben eine Garantie von einem Jahr.</li> <li>Wir geben drei Jahre Gewährleistung auf alle Produkte.</li> <li>Sie können alle Einkäufe innerhalb von 30 Tagen ohne die Angabe von Gründen zurückgeben und erhalten den vollen Kaufpreis erstattet.</li> </ul>   <p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>   <h1 class="informationsbereich">Kontakt</h1>   <p class="fliesstextfett">Kontaktieren Sie bitte eine der folgenden Stellen:</p>   <h2 class="informationsbereich">Frau Schmitt</h2>   <p class="personeninfo">Frau Schmitt ist verantwortlich für PR und Marketing.</p>   <p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>   <h2 class="informationsbereich">Herr Schmitt</h2>   <p class="personeninfo">Herr Schmitt ist verantwortlich für Versand und Zustellung.</p>   <p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>   <h2 class="informationsbereich">Herr Maier</h2>   <p class="personeninfo">Herr Maier ist verantwortlich für Rücksendungen.</p>   <p class="fliesstext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>   <ul class="liste"> <li>Rücksendungen müssen innerhalb von 30 Tagen nach Kaufdatum erfolgen.</li> <li>Die Ware muss originalverpackt sein.</li> </ul>   <h1 class="informationsbereich">Probleme?</h1>   <p class="fliesstextfett">Sollten bei Ihrer Bestellung Probleme auftreten, wenden Sie sich bitte an Herrn Super.</p>   </body> </html>