5.4 Wiederholungsfragen

Werbung
dokumentation
gebrauchsanweisung
EINFÜHRUNG CSS
http://www.sudy.at.tt/css
mag. gabriele s. sudy
bhak wien 10
INHALT
1 ZIELSETZUNG ........................................................................................... 3
2 EINGANGSVORAUSSETZUNGEN ............................................................... 3
3 EINSATZ ................................................................................................... 4
4 METHODIK UND DIDAKTIK ...................................................................... 4
5 AUFBAU .................................................................................................... 5
5.1 OPTIMIERT FÜR .......................................................................................... 5
5.2 NAVIGATION .............................................................................................. 5
5.3 BEISPIELE ................................................................................................. 6
5.4 WIEDERHOLUNGSFRAGEN .......................................................................... 10
5.4.1 HOT-POTATOES ........................................................................................... 10
5.4.1.1 Lückentexte ........................................................................................... 10
5.4.1.2 Zuweisungsabfragen .............................................................................. 11
5.4.1.3 Kreuzworträtsel ..................................................................................... 11
5.4.1.4 Multiple Choice-Fragen ........................................................................... 12
5.4.2 FLASH-QUIZ ............................................................................................... 13
5.4.3 PRAKTISCHE ÜBUNGEN .................................................................................. 15
5.5 TIPPS UND HILFE...................................................................................... 16
6 GEBRAUCHSANWEISUNG ....................................................................... 17
1 Zielsetzung
CSS ist eine Ergänzungssprache von HTML und dient der Erstellung von Webseiten. Hiermit soll
garantiert werden, dass eine klare Trennung von Strukur (HTML) und Formatierung bzw. Design (CSS)
erreicht wird.
Schafft man diese Forderung hat man:
-
ein W3-konformes Webdokument erstellt,
das rasch und einfach erzeugt und
mit wenigen Handgriffen auch nachträglich verändert werden kann.
Voraussetzung für eine erfolgreiche Umsetzung ist allerdings immer eine ausführliche und detaillierte
Planung der Webumsetzung.
Mit nachfolgendem Programm können und sollen sich Schüler in eigenständiger Form alle Kenntnisse
über die Formatierungsmöglichkeiten mittels Cascading Style Sheets (CSS) aneignen.
Das Programm (die Website) wurde erstellt, da es derzeit noch kein Schulbuch gibt, dass dieses
Thema ausführlich behandelt. Diverse Internetsseiten, anhand denen Schüler dieses Thema erarbeiten
könnten, sind meist ohne Überprüfung des Wissens (Tests) und teilweise sehr nüchtern und ohne
Schulbezug aufgebaut.
Das Programm ist weiters schon „schülererprobt“, da ich es selbst schon im Unterricht eingesetzt
habe.
Das Programm ist in folgende Hauptkapitel unterteilt:
-
Einführung
Einbindung
Schrift
Listen
Hintergrund
Größe
Rahmen
Links
Position
Tipps und Hilfe
Jedes Kapitel ist in weitere Unterkapitel zerlegt worden. Die Schüler können sich Kapitel für Kapitel
leicht erarbeiten, da der Aufbau immer der selbe ist. Nach einer kurzen theoretischen Einleitung
wird anhand von Beispielen und Musterlösungen jede Formatierungsanweisung anschaulich
erklärt.
Um so viele Sinne wie möglich zu aktivieren und die Lernfähigkeit zu erhöhen wurden auch vertonte
Videos eingebaut, in denen jeder einzelne Schritt genau vorgeführt und dokumentiert wird.
Zur Überprüfung der Kenntnisse sind zum Schluss jedes Kapitels interaktive Tests (mit sofortiger
Rückmeldung) und Anweisungen für Übungsaufgaben eingebaut.
2 Eingangsvoraussetzungen
Die Schüler müssen bereits sehr gute HTML-Kenntnisse besitzen, da es sich bei CSS um eine
Ergänzungssprache von HTML handelt.
Das Programm wurde für den Internet Explorer optimiert. Auch bei niedriger Auflösung (800 x 600) ist
es noch gut lesbar und einsetzbar.
3 Einsatz
Zum Erarbeiten ist ein Internetzugang und entsprechender Browser notwendig.
Für die Übungen benötigt man einen einfachen Editor (zB. Windows-Editor unter Start – Programme
– Zubehör, der standardmäßig mit dem Betriebssystem ausgeliefert und installiert wird).
Die Videos sind als Flash-Datei abgespeichert und vertont. Man benötigt daher einen Flashplayer (ist
in den neueren Browsern schon integriert, er wird ansonsten auch gratis von Macromedia zur
Verfügung gestellt  www.macromedia.com) und Lautsprecher bzw. im Klassenverband sind
Kopfhörer zu empfehlen.
Die Referenzlisten im letzten Kapitel sind als pdf-Files abgespeichert, man benötigt daher einen
Acrobat-Reader.
In folgenden Jahrgängen bzw. Gegenständen ist das Programm einsetzbar:
II. Jahrgang Handelsakademie Digital Business im Gegenstand Telekommunikation, Multimedia
und Contentmanagement.
III. Jahrgang Handelsakademie Informationstechnologie im Gegenstand Telekommunikation,
Multimedia und Contentmanagement.
III. Jahrgang Handelsakademie im Gegenstand Wirtschaftsinformatik oder
IV. Jahrgang Handelsakademie im Gegenstand Wirtschaftsinformatik und Organisation.
I. Semester Kolleg Digital Business und Kolleg Informationstechnologie.
4 Methodik und Didaktik
Die Website ist zum Selbststudium im Rahmen eines E-Learning-Systems konzipiert.
Den Schülern sollte zu Beginn zumindest eine kurze Einführung und Erklärung zum Thema E-Learning
gegeben werden, um die Vorteile und Notwendigkeit von E-Learning aber auch die kritische Reflexion
zu fördern.
Für die gesamte Website können 10 bis 15 Unterrichtseinheiten eingeplant werden. Es können
Teile auch als Hausübung vergeben werden.
Man sollte den Schülern ein Zeitlimit geben (zB in 2 Stunden muss das erste Kapitel erarbeitet sein)
und danach sollte zur Förderung der Leistung der Schüler und zur Förderung der Motivation eine
Überprüfung der Kenntnisse stattfinden.
Es ist zu empfehlen, die Schüler darauf hinzuweisen, dass sie sich selbst Notizen machen und die
wichtigsten Formatierungsanweisungen selbst mit dokumentieren (dient auch der Festigung des
Lehrstoffs) sollten.
Außerdem sollten die einzelnen genannten Beispiele auch aktiv von den Schülern nachgebildet
werden.
Um CSS in Reinform zu erlernen wird der Einsatz des Windows-Editors empfohlen (Start – Programme
– Zubehör – Editor).
5 Aufbau
5.1 Optimiert für
Das Programm ist optimiert für den Internet Explorer 6.0 und auch bei einer Auflösung von 800 x 600
noch gut lesbar. Zur Bearbeitung ist ein Browser notwendig, Bilder und Javascript sollten nicht
unterdrückt sein. Die Referenzliste ist als pdf-file abgespeichert und zur Betrachtung ist der Acrobat
Reader notwendig. Für die Videos benötigt man einen Flashplayer und Kopfhörer.
5.2 Navigation
Der Schüler kann jedes einzelne Kapitel und die entsprechenden Unterkapitel mit Hilfe der linken
Navigationsleiste aufrufen.
Weiters werden die Schüler auch von Seite zur Seite weitergeführt. An jedem Seitenende kann man
einen Schritt vor und auch wieder einen Schritt zurück springen.
Die Theorie ist recht einfach und für Schüler verständlich formuliert.
Damit man weiß, wo man sich befindet, ist jede Seite mit einer klaren Überschrift versehen
([Kapitel] [Unterkapitel]).
Ist die Seite zum Scrollen, so befinden sich dazwischen immer wieder rote Pfeile auf der rechten
Seiten für den direkten Weg zum Seitenbeginn.
5.3 Beispiele
Für jede Formatierung wird mindestens ein Übungsbeispiel mit Quelltext (doppelt eingerahmt)
und die entsprechende Vorschau des Ergebnisses, sprich Musterlösung (Hier sehen Sie das
Ergebnis) angeboten.
Ergebnis (es öffnet sich ein kleines neues Browserfenster mit der Lösung)
Weiters werden zum besseren Verständnis dazwischen auch kleine Videosequenzen eingesetzt
(Videokamera anklicken), in denen der Schüler den gesamten Vorgang am Bildschirm beobachten und
verfolgen kann. Jeder Schritt wird außerdem von einer Frauenstimme dokumentiert.
Klickt man auf die Kamera öffnet sich ein kleines neues Browserfenster und eine „unsichtbare“
Hand schreibt den Quelltext, man ist also „live“ dabei und außerdem wird jeder Schritt genau
erklärt.
Nachdem der Quelltext geschrieben und erklärt wurde, wird er abgespeichert und der Schüler sieht
auch sofort das Ergebnis.
Zum Schluss wird im Video noch einmal in den soeben erstellten Quelltext gewechsel, der Schüler
kann sich den Code genau betrachten und erhält zusätzliche Informationen.
Der Schüler ist aufgefordert die Beispiele nachzubilden und selbst auszuprobieren.
5.4 Wiederholungsfragen
Am Ende jedes Kapitels (bzw. bei der Schriftenformatierung auch dazwischen) befinden sich
zahlreiche interaktive Wiederholungsfragen bzw. Tests. Dabei handelt es sich teilweise um „hotpotatoes“ Übungen mit sofortiger Überprüfung der Eingaben, um Flash-Quiz-Dateien mit einer
Ergebnisliste zum Schluss und um aktive eigenen Übungsaufgaben für die Schüler.
5.4.1 Hot-Potatoes
5.4.1.1
Lückentexte
Der Schüler füllt die Lücken aus und mit einen Klick auf Check, wird seine Lösung überprüft. Falls er
die Aufgabe überspringen möchte, kann er auch sofort zur nächsten Aufgabe springen.
Check:
5.4.1.2
Zuweisungsabfragen
Bei den Zuweisungsaufgaben ist einer Frage die richtige Lösung aus einer Menge von
Lösungsvarianten zuzuordnen.
5.4.1.3
Kreuzworträtsel
Mit einem Klick auf die blaue Zahl erscheint die Frage, diese wird dann in der Eingabezeile eingetippt
und automatisch in den Kästchen eingesetzt.
5.4.1.4
Multiple Choice-Fragen
5.4.2 Flash-Quiz
Es wurden zur Abwechslung auch 2 Flash-Quiz eingebaut (bei der Schriftformatierung). Hier ist die
Oberfläche etwas anders und die Ergebnisse werden anders ausgewertet.
Es werden auch hier wieder diverse Fragetechniken verwendet (Multiple-Choice-Fragen, Einsetzfragen,
richtig-falsch-Fragen).
Mit einem Click auf Check erhält man sofort die Rückmeldung ob die Antwort richtig ist und manchmal
bekommt man noch eine 2. Chance.
Zum Schluss erhält der Schüler eine Ergebnisseite:
5.4.3 Praktische Übungen
Um nicht nur Faktwissen abzuprüfen sind die Schüler auch zum Arbeiten aufgefordert. Nach den
Quizfragen ist eine zusätzliche Übungsseite mit klaren Arbeitsanweisungen.
5.5 Tipps und Hilfe
Auf dieser Seite werden den Schülern einige Hilfsmittel angeboten und weitere Links zum Üben bzw.
Vertiefen ihres Wissens.
Die Referenzlisten sind als pdf-file abgespeichert, man benötigt den Acrobat Reader zum Lesen.
1. Referenzliste mit klarer Angabe, welche Browser, welche Anweisungen unterstützen.
2. Referenzliste dient als Nachschlagewerk und diese kann man den Schülern auch als Unterstützung
bei diversen Mitarbeitskontrollen einsetzen lassen.
6 Gebrauchsanweisung
Im Menü <<home>> gibt es den Link zur Gebrauchsanweisung, in der kurz und bündig noch einmal
auf das Lehrziel, Eingangsvorraussetzungen usw. eingegangen wird.
Herunterladen
Explore flashcards