Willi und das DSB Anleitung für einen möglichen Export aus Willi
Werbung
T. Schuster, MRS St. Ursula Donauwörth
Willi und das DSB
Anleitung für einen möglichen Export aus Willi und die Gestaltung der Seiten
mittels css-Dateien und Javascript
Als ich die ersten Exportversuch aus Willi heraus gemacht hatte, war ich vom Ergebnis der
Darstellung enttäuscht. Nach vielen Stunden ist es mir nun gelungen, die Seiten optisch und
vor allem automatisiert so darstellen zu lassen, wie es meinen Vorstellungen entspricht. Damit
sich nicht jeder die gleiche Arbeit machen muss, habe ich eine kurze Anleitung zusammengefasst, die jeder gerne nach seinen Bedürfnissen abändern kann.
Zunächst einmal der Unterschied im Bild:
a) Schülerplan aus Willi original (natürlich ohne Schmetterling :-):
b) Gleicher Schülerplan aus Willi bei mir:
c) Lehrerplan aus Willi original:
d) Gleicher Lehrerplan aus Willi bei mir:
Ich wollte eine kontrastreiche Gestaltung, bei der durch verschiedene Farben und Hintergründe die verschiedenen Wochentage sofort deutlich werden.
Problematik 1:
Willi gibt ein HTML-Format aus, bei dem ein direktes Eingreifen nicht vorgesehen ist. Aber
Willi bietet innerhalb des Head-Tags die Möglichkeit, Gestaltungsmöglichkeiten in einer cssDatei (willi.css) zu verwirklichen. Möchte man alle Seiten gleich gestaltet, so ist das dann mit
dieser einen Datei auch schon ausreichend.
Für verschiedene Tagesgestaltung (Hintergrund mit MO, DI, … bzw. versch. Farben im
linken Bereich für jeden Wochentag) benötigt man aber verschiedene css-Dateien (bei mir:
mo.css, di.css, …) und das geht nur über Umwege, sprich die Druckformate. Man hat die
Möglichkeit, eigene Druckformate zu erstellen bzw. fertige abzuändern:
Über Drucken Druckformatassistent Datei Druckformat öffnen
lassen sich Druckformate öffnen und bearbeiten.
Eine fertiges Druckformat wird so angezeigt.
Die rechts auf den Reitern ausgewählte Sektion wird links
durch einen roten Rahmen angezeigt.
Über Sektion Danach Anhängen / Davor Einfügen lassen sich "Köpfe" einfügen, die
für Textausgaben gedacht sind. Gibt man als Text jedoch hier HTML-Befehle ein, so
interpretiert dies der Browser dementsprechend als HTML-Code.
Jeder neu erstellte "Kopf" erscheint rechts oben als "Seitenüberschrift"-Registerkarte. Für die
Texteingabe / -änderung muss in der zweiten Zeile die Registerkarte "Sektionsüberschrift"
ausgewählt werden (Vorsicht: Die Zeichenmenge ist jedoch ziemlich begrenzt!).
In meinen 6 Seitenüberschriften sind folgende Inhalte enthalten (sie unterscheiden sich
zwischen Lehrer- und Schülerdruckformat eigentlich nicht, Unterschiede in der Darstellung
werden in den unterschiedlichen css-Dateien eingestellt, die zwar in verschiedenen Ordnern
gleich heißen, jedoch andere Inhalte haben):
Seitenüberschrift 1:
Problematik 2:
Lässt man die Vertretungsplandateien mittels DSB-Service (empfohlen) hochladen, so muss
"Anderes HTML-Format" gewählt werden, da beim Hochladen über die Einstellung "Willi"
die Darstellung anders ist (als im Browser z.B. Internet Explorer). Will man unterschiedlich
gestaltete Tage, so müssen auch Einzeldateien aus Willi exportiert werden. Bei der Anzeige
im DSB muss man sich dann für "Seiten blättern" entscheiden, da für das "Scrollen" die
Seiten zu einer zusammengefügt werden und dabei die Formatierungen verloren gehen. Wenn
nun jedoch eine Seite zu lang ist, wird sie nicht vollständig dargestellt. Aus diesem Grund
wird nun hier ein Java-Script verlinkt (das z.B. auf der Schulhomepage liegen muss, da auch
diese Dateien nicht beim DSB hochgeladen werden können), das einen automatischen
Seitenscroll nach einer bestimmten Zeit startet. Die Einstellungen lassen sich im Script
vornehmen.
Da es mit Laden der Seite automatisch starten soll, muss der Link in den Body-Tag. Da dieser
aus Willi heraus jedoch nicht zu bearbeiten ist, wird hier einfach ein Zweiter gesetzt (HTMLtechnisch unschön, aber funktioniert!) Der Wert 8000 ist in Millisekunden die Zeit bis zum
Beginn des Scrollens nach Laden der Seite.
<body onload=setTimeout("AutomatischScrollen()",8000);><script
src="http://www.url/willi.js" type="text/javascript"></script>
Link zur ausgelagerten Javascript-Datei
Aufruf der Scroll-Funktion in der Javascript-Datei
Seitenüberschrift 2:
Er stammt aus einem Willi-eigenen Druckformat, es wird Tag, Datum usw. erstellt:
<h2>Vertretungsplan für {System:Vertr.Datum:Wochentag:lang},
{System:Vertr.Datum:Tag}.{System:Vertr.Datum:Monat}.{System:Vertr.Datum:Jahr}</
h2>erstellt: {System:Datum:Tag}.{System:Datum:Monat}.
{System:Uhrzeit:Standarduhrzeit}<p>&nbsp;</p>
Seitenüberschrift 3:
Hier wird (nachdem Willi dies zwar automatisch bereits in der ersten Zeile auf willi.css tut)
erneut ein Link auf eine css-Datei gesetzt. Die Wenn-Bedingung (ähnlich Excel) prüft den
Wochentag und gibt je nach Wochentag eine andere css-Datei aus (mo.css, di.css, …).
Eine zweite css-Datei ist HTML-technisch zwar nicht schön, stört den Browser aber nicht
weiter und funktioniert. Es werden dann nur die neuen "Styles" angewendet.
<link rel="stylesheet"
type="text/css"{Wenn:Gleich:}{System:Vertr.Datum:Wochentag:lang}{2.Term}Mo{Bed
.Ende}href="mo.css">{Sonst}{Wenn:Gleich:}{System:Vertr.Datum:Wochentag:lang}{2
.Term}Di{Bed.Ende}href="di.css">{Sonst}{Ende}
{Wenn:Gleich:}{System:Vertr.Datum:Wochentag:lang}{2.Term}Mi{Bed.Ende}href="mi.
css">{Sonst}{Ende}
{Wenn:Gleich:}{System:Vertr.Datum:Wochentag:lang}{2.Term}Do{Bed.Ende}href="do
.css">{Sonst}{Ende}{Wenn:Gleich:}{System:Vertr.Datum:Wochentag:lang}{2.Term}Fr
{Bed.Ende}href="fr.css">{Sonst}{Ende}</link>
Seitenüberschrift 4:
Dies ist lediglich eine Ebene für das eigene copyright.
<div id="copyright" style="width:137px; height:27px; position:absolute; left:10px;
top:0px; z-index:1;"><p><span style="font-size:10pt;"><font color="#999999">(c) &
design by scu</font></span></p></div>
Seitenüberschrift 5 und 6:
Hier kommen noch zwei Ebenen für Schullogo und eine horizontale Linie hinzu. Die
eigentlichen Einstellungen (z.B. Position der Ebene) sind in die css-Dateien ausgelagert. Als
Linie habe ich eine animierte Linie (linie-0131.gif) von irgendeiner "free gifs" Seite geholt.
Die Bilder müssen jedoch z.B. auf die eigene Schulhomepage gelegt und dorthin verlinkt
werden, da Bilder beim DSB nicht hochgeladen werden können.
<div id="Wappen"><img id="Wappenstyle" src="http://www.url/Wappen.jpg"></div>
Ebeneneigenschaften Logo / Logoeigenschaften in css-Datei
<div id="linie"><img id="linienstyle" src="http://www.url/linie.gif"></div>
Ebeneneigenschaften Linie / Linieneigenschaften in css-Datei
Restliche Registerkarten:
Um bei den anderen Sektionen / Registerkarten (Abw. Lehrkräfte, Abw. Klassen, …) die
Spaltenbreite zu bearbeiten, einfach die Registerkarte auswählen und in der zweiten Reihe die
Registerkarte "Liste" wählen und durch Vorwärts / Rückwärts die Breiten der versch. Spalten
einstellen.
Nach Änderung eines
Druckformats das
Speichern nicht vergessen!
TIPs
• Ich habe die css-Dateien jeweils in einem Unterordner "css" zu dem Ordner, in dem die
HTML-Dateien liegen (wegen der besseren Übersicht). Beim Hochladen über den DSBService (Dateien in Unterordnern mitberücksichtigen) wird die Ordnerstruktur verworfen
und die css-Dateien wandern auf die gleiche Ebene wie die HTML-Dokumente (so ist auch
die Pfadangabe in den Druckformaten gewählt).
Zum Testen der HTML-Dateien im Internet-Explorer lokal zuhause sollten die css-Dateien
noch im gleichen Ordner liegen, da die Pfadangabe sonst nicht stimmt.
• Wenn man auch das DSB Light für die Anzeige auf der Schulhomepage verwendet,
benötigt man nochmals andere css-Dateien (da andere Auflösung / Größenverhältnisse).
Um hierzu die HTML-Seiten nicht doppelt aus Willi ausdrucken zu müssen, verwende ich
ein Synchronisierungsprogramm (z.B. Allway Sync), das den einen Ordner überwacht und
bei Änderungen diese in den anderen überträgt (oder zeitgesteuert alle 10 Minuten).
• Für den Export aus Willi.
Drucken Druckausgabe in Datei Druckformat wählen (falls vorher bereits im
Druckmenü eingestellt) Dateityp "HTML" wählen und DSB-Ordner öffnen
• Zum Bearbeiten von HTML-Seiten (ebenso wie für css-Dateien bzw. js-Dateien) eigenet
sich der Windows – Editor (Programme – Zubehör) am besten, da dieser HTML-Code als
reinen Text behandelt. Word erkennt den Text als Website und macht unter Umständen
ungewollte Änderungen.
• Wenn man die Vorgehensweise nachvollziehen kann, kann man bel. viele Bilder und
Ebenen einbauen und natürlich eigene Farbvorstellungen verwirklichen.
• Ich verwende 2 verschiedene Javascript-Dateien (willi_fast.js / willi_slow.js) da der 22''Bildschirm im Lehrerzimmer schneller scrollt als der 40''-Bildschirm in der Aula.
Zum Aufbau der externen Dateien:
css-Dateien:
Schriftart
Zeilenhöhe und Schriftgröße
Pfad zum Hintergrundbild
Tabelle außen (farb. Bereich)
Tabelle innen (grauer Bereich)
Ebeneneigenschaften Logo
Logoeigenschaften
Ebeneneigenschaften Linie
Linieneigenschaften
js-Datei(en):
Hier kann die Scrollgeschwindigkeit
eingestellt werden. Kleinere Zahl
bedeutet schnelleres Scrollen.
Diese Funktion wird nicht verwendet.
Damit wollte ich ursprünglich die
Pause bis Scrollbeginn
verwirklichen, jedoch hält die
Funktion alle Vorgänge, auch das
Laden der Seite / Bilder an.
Nachträge / Änderungen:
1. Ab der neuesten WilliVer2 Version funktioniert die Darstellung im Browser nur richtig,
wenn unter "Extras > Einstellungen" auf dem Reiter "Drucken" die Voreinstellung im ersten
Fenster (HTML-Doctype) gelöscht wird!
Unter diesen Links finden Sie Beispielseiten eines Schülerplans in versch. Tagesansicht:
www.st-ursula-donauwoerth.de/dsb/mo.html
www.st-ursula-donauwoerth.de/dsb/di.html
www.st-ursula-donauwoerth.de/dsb/mi.html
www.st-ursula-donauwoerth.de/dsb/do.html
www.st-ursula-donauwoerth.de/dsb/fr.html
Falls Sie eine gezippte Datei mit meinen css-/js-Dateien und Hintergrundbildern
herunterladen möchten, dann folgen Sie bitte diesem Link:
www.st-ursula-donauwoerth.de/dsb/dsb-willi-material.zip
Weitere evtl. nützliche Downloads für die Schule finden Sie auf meiner Seite unter:
http://www.st-ursula-donauwoerth.de/Schuster/Thomas/downloads.htm
Ich hoffe, dass meine Tips Ihnen weiterhelfen können. Über postive Rückmeldungen würde
ich mich freuen unter:
[email protected]
Thomas Schuster (MRS St. Ursula, DON)