Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

programmieren:css:aufgaben [10.11.2014 16:43] (aktuell)
Zeile 1: Zeile 1:
 +====== 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!!!
 +==== Funpic Links ====
 +  * Hussein A.: http://minelikeagenius.funpic.de/
 +  * Maximilian D.: http://maxideri.funpic.de/
 +  * Etienne D.: http://etienned.funpic.de/
 +  * David E.: http://rc-modellbau.funpic.de
 +  * Christoph G.: http://funny28.funpic.de/
 +  * Johannes K. : http://johakard.funpic.de/Startseite/START.html
 +  * Samuel K.: http://samuklar.funpic.de/
 +  * Lars L.:http://lambertlars.funpic.de/ 
 +  * Seli N.:
 +  * Nils O.:http://nilsoschee.funpic.de
 +  * Efdal Ö.: http://minelikeageniius.funpic.de/ 
 +  * Lukas R.: http://lukasrammefanger.funpic.de/
 +  * Noah S.:
 +  * William S.: http://ichwarsnicht38.de/
 +  * Michelle T.: http://michelletheuring.funpic.de/
 +  * William T.: http://willtran.funpic.de/
 +  * Pascal V.: http://modellflugzeuge.funpic.de/
 +  * Florian U.:
 +  * Sebastian W. : http://sebastianwerling.funpic.de/
 +  * Simon Z.: http://simon99za.funpic.de/
 +
 +===== 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.\\ 
 +\\ 
 +{{:programmieren:css:ohne_css.png?100|Ohne CSS}}{{:programmieren:css:mit_css1.png?100|CSS 1}}{{:programmieren:css:mit_css2.png?100|CSS 2}}\\ 
 +\\ 
 +[[http://www.nachlesen.com/bilder/cit_css1/index.html|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:** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(1)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="1">
 +</html>alle div Tags 50% größer als der normale text: div {font-size:150%;}<html><span style="font-size:150%;background-color:white;color:red;font-weight:bold;">Ich bin 50% größer.</span></html>
 +<html></div></html>
 +
 +**Schriftstil (kursiv, normal):** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(2)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="2">
 +</html> <html>alle p Tags kursiv: p {font-style:italic;} <span style="font-style:italic;background-color:white;color:red">Ich bin kursiv.</span></html>
 +<html></div></html>
 +
 +**Schriftgewicht (normal, fett, fetter, ...):** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(3)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="3">
 +</html> <html>alle span Inline-Tags fett: span {font-weight:bold;} bzw.  span {font-weight:lighter;}<span style="font-weight:bold;background-color:white;color:red">Ich bin fett.</span><span style="font-weight:lighter;background-color:white;color:red"> Ich bin leichter.</span></html>
 +<html></div></html>
 +\\
 +\\
 +===Text ===
 +**Zeichenabstand:** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(4)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="4">
 +</html> <html>alle Zeichen im span Inline-Tags größer/kleiner: span {letter-spacing: 1em;} bzw. span {letter-spacing: -0.2em;}; Ich habe einen <span style="letter-spacing: 1em;background-color:white;color:red">großen Abstand.</span> ich einen <span style="letter-spacing: -0.2em;background-color:white;color:red">kleinen Abstand.</span></html><html></div></html>
 +
 +**Zeilenhöhe:** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(5)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="5">
 +</html> <html>2,5 fache Zeilenhöhe: div {line-height: 2.5;}:<div style="margin-right:300px;">  Hier ist <br /> der Abstand <br /> normal.<div style="line-height: 2.5;background-color:white;color:red">Hier ist der <br /> Zeilenabstand <br /> größer.</div > Hier ist der <br /> Zeilenabstand <br /> wieder normal.</div></html><html></div></html>
 +
 +**Horizontale Ausrichtung:** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(6)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="6">
 +</html> <html>alle p Tags mittig: p {text-align:center;}. Mögliche Werte sind auch noch left und center. <div style="text-align:center;background-color:white;color:red">mittig</div><div style="text-align:left;background-color:white;color:red">links</div><div style="text-align:right;background-color:white;color:red">rechts</div></html><html></div></html>
 +
 +**Textdekoration:** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(7)" ><b class="wort_loesung">Lösung</b></span></html><html><div class="loesung" style="display:none" id="7">
 +</html> <html>alle span Tags unterstrichen: span {text-decoration:underline;}. Mögliche Werte sind auch noch 
 +overline,line-through und blink. Ich <span style="text-decoration:underline;background-color:white;color:red">bin unterstrichen</span>&nbsp;&nbsp;&nbsp;<span style="text-decoration:overline;background-color:white;color:red">habe einen Überstrich</span>&nbsp;&nbsp;&nbsp;<span style="text-decoration:line-through;background-color:white;color:red">bin durchgestrichen</span>&nbsp;&nbsp;&nbsp;<span style="text-decoration:blink;background-color:white;color:red">blinke</span></html><html></div></html>
 +
 +**Texteinrückung:** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(8)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="8">
 +</html> <html>Die erste Zeile aller p Tags wird eingerückt.: p {text-indent: 3em;}. <div style="text-indent: 3em;background-color:white;color:red">In diesem Absatz wir die erste Zeile<br />eingerückt. Das erhöht unter Umständen<br />die Lesbarkeit des Textes.</div></html><html></div></html>
 +\\
 +\\
 +===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.  <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(9)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="9">
 +</html> <html>alle span Tags umrahmt: span {border:5px solid #0000ff;}.Der erste Wert steht für die Rahmenstärke, der zweite für die Art und der dritte für die Farbe.<span style="border:5px solid #0000ff;">ich bin umrahmt.</span></html><html></div></html>
 +\\
 +\\
 +===Außenränder===
 +**alles**  <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(10)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="10">
 +</html> <html>alle span Tags umrahmt: span {margin:40px 60px 80px 100px;}.Der erste Wert steht für oben, der zweite rechts, der dritte für unten und der vierte für links.<div style="border:5px solid #0000ff;"><div style="margin:40px 60px 80px 100px;border:5px solid #0000ff;">ich habe Ränder.</div></div></html><html></div></html>
 +\\
 +\\
 +=== Innenränder ===
 +
 +**alles**  <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(11)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="11">
 +</html> <html>alle span Tags umrahmt: span {padding:40px;}.<div style="width:100px;padding:40px;border:5px solid #0000ff;">ich bin vom Rand entfernt.</div></html><html></div></html>
 +\\
 +\\
 +=== Farben ===
 +
 +**alles** <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(12)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="12">
 +</html> <html>alle span Tags mit einer blauen Schriftfarbe und einer Hintergrundfarbe: span {color:blue;background-color:#FFFFCC}.<div> Jetzt wird <span style="color:blue;background-color:#FFFFCC;">es bunt</span>, zumindest teilweise.</div></html><html></div></html>
 +\\
 +\\
 +=== Hintergrund===
 +
 +**Farbe**\\
 +**Bild incl. repeat:**  <html><script type="text/javascript" src="/doku.js"></script><span onClick="zeige(13)" ><b class="wort_loesung">Lösung</b></span>
 +</html><html><div class="loesung" style="display:none" id="13">
 +</html> <html>alle p Tags mit einer roten Hintergrundfarbe und einem sich nicht wiederholdendem Hintergrundbild: p {background-color: red; background-image:url(/tuts/bilder/datenbank/cdversion2a.png);background-repeat:no-repeat;}.<div style="background-color: red; background-image:url(/tuts/bilder/datenbank/cdversion2a.png);background-repeat:no-repeat;">Mit css gibt es<br />sehr sehr viele Möglichkeiten<br />Text zu gestalten. Am Anfang muss<br />man viel üben, aber<br />das zahlt sich<br />auf Dauer aus.</div></html><html></div></html>
 +
 +
 +\\
 +----
 +\\ 
 +[[:inhalt|Startseite]] > [[:programmieren:uebersicht|Programmieren]] > [[.:uebersicht|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