Aufgaben für Cit zu CSS

28.01.13

Speisekarte oder ähnliches

  • Eingangsseite
  • Drei Unterseiten: z.B. Vorspeise, Hauptspeise, Dessert
  • Die Seiten sind untereinander verlinkt
  • Die Seiten beinhalten ein Hintergrundbild
  • CSS Dateien und Bilder in eigenen Unterordnern
  • Bei Funpic hochgeladen
  • Mindestens ein Bild ist ein Link
  • Was braucht jede Seite???

—-

  • E-Mail Link
  • Schaltfläche → Hallo
  • zweite CSS Datei

Achtung: Ihr dürft nur Bilder verwenden, die frei verfügbar sind und bei denen es ausdrücklich erlaubt ist, dass sie von euch veröffentlicht werden dürfen!!!

1. Halbjahr

Block 1

  • Erstelle einen Ornder uebung_datum
  • Erstelle eine Seite, die deinen Namen trägt: z.B. sab.html
  • Erstelle zwei css Dateien, die deinen Namen tragen: sab_1.css und sab_2.css
  • Gib in beiden css Dateien eine andere Hintergrundfarbe für den body an.
  • Verlinke beide miteinander und zwar so, dass der Nutzer das Stylsheet aussuchen kann
  • Erstelle eine Speisekarte incl. Bilder und formatiere sie mit Hilfe der Stylesheets auf 2 unterschiedliche Arten.
  • Die Speisekarte muss vier verschiedene Gerichte enthalten. Jedes Gericht enthält einen kurzen beschreibenden Text.



Block 2

Entwickle Block 1 weiter, versuche so nah wie möglich an folgende Speisekarte heranzukommen.
Die Formatierung erfolgt nur über CSS.

Ohne CSSCSS 1CSS 2

Kleines Filmchen

Block 3

Schreibe folgende Formatierungen in dein Heft und sieh dir die Beispiele bei http://www.css4you.de an:
In den Lösungen taucht stellenweise die Maßeinheit em auf. Diese Einheit bezieht sich auf die Schriftgröße des Buchstabens M. Genaueres spielt für uns keine Rolle. Es besagt nur, ändert der User beim Betrachten die Schriftgröße, ändern sich mit em angegebene Werte mit. Somit bleibt das Schriftbild erhalten.

Schrift

Schriftgröße: Lösung

Schriftstil (kursiv, normal): Lösung

Schriftgewicht (normal, fett, fetter, …): Lösung



Text

Zeichenabstand: Lösung

Zeilenhöhe: Lösung

Horizontale Ausrichtung: Lösung

Textdekoration: Lösung

Texteinrückung: Lösung



Rahmen

es reicht, wenn du es für einen kompletten Rahmen notierst und weißt, dass oben, rechts, unten und links separat angesprochen werden können. Lösung



Außenränder

alles Lösung



Innenränder

alles Lösung



Farben

alles Lösung



Hintergrund

Farbe
Bild incl. repeat: Lösung




Startseite > Programmieren > CSS > Aufgaben Cit

programmieren/css/aufgaben.txt · Zuletzt geändert: 10.11.2014 16:43 (Externe Bearbeitung)
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0