Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungsbedürftige Teile sind farbig.
Die Namen von Weblica- und Ressourcenfeldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Verwenden von Code müssen die Ressourcenfelder ersetzt werden.
W3C-Konformität
Unser Code ist standardkonform:
Seite erstellt / geändert
e 14.10.12 / update
Codeschnipsel Einbaubeispiele
Acht Beispiele für den Einbau von CSS, HTML und Javascript an den verschiedenen Einbauorten in Weblica (in die Screenshots kann mit Klick gezoomt werden):
Hier wird die Formatierung der Seitenüberschriften und der Shortcuts überschrieben, ein Seitenhintergrundbild wird eingefügt, die Lightbox erhält abgerundete Ecken, und die neue Klasse sprachButton1 sowie die Element-Id zzNachoben werden definiert. Diese Änderungen und Ergänzungen wirken auf allen Seiten.
Beispiel 1: HTML-Code im CSS Global, wirkt auf allen Seiten
Beispiel 2: Einbauort Seiteneigenschaften
Die Formatierung der Überschrift h2 wird auf der Seite Webdesign und ihren untergeordneten Seiten angepasst. Ausserdem wird hier die (eigene) Element-Klasse backgroundGrey definiert, die einigen Absätzen der Rubrik Webdesign zugewiesen wird.
Zwischenzeitlich wurde dieser Code weiter verfeinert: Hintergrundfarben werden nur noch mittels Weblica-Feldern vorgegeben, z. B. ... background-color: $(grau1); ...
Beispiel 2: Code in den Seiteneigenschaften der Seite Webdesign, wirkt hier und in allen untergeordneten Seiten
Beispiel 3: Einbauort HTML-Absatz - Wirkungsort Seite
Auf der Startseite (nur da) wird in der mittleren Spalte eine Grafik als Aufzählungszeichen verwendet. Der Code steht in einem HTML-Absatz und wirkt nur auf dieser Seite.
Der Code wird von Weblica automatisch am richtigen Ort - im Seiten-Head - eingebaut.
Beispiel 3: Code in einem HTML-Absatz auf der Startseite, wirkt nur hier
Beispiel 4: Einbauort HTML-Absatz - Wirkungsort Absatz
Hier wird das gleiche Aufzählungszeichen wie im Beispiel 3 dem Absatz mit der Absatz-Id 465 zugewiesen. Der Code im HTML-Absatz wirkt nur auf den Absatz 465.
Der Code wird von Weblica automatisch am richtigen Ort - im Seiten-Head - eingebaut.
Beispiel 4: Code in einem HTML-Absatz auf der Seite Aufzählungszeichen Varianten, wirkt nur im Absatz mit der Absatz-Id 465
Beispiel 5: Einbauort HTML-Absatz - Einbau Seitenelement
Mit einem Audio-Player, der mit einer Javascript-Datei gesteuert wird, soll eine Audio-Datei wiedergegeben werden. Dieses neue und einmalige (nur einmal verwendete) Seitenelement wird mittels HTML-Codes in einem HTML-Absatz auf der Seite "Weg von Montespluga ..." nach dem Absatz "Bild 1" eingefügt. Der Code enthält auch den Script-Tag für das Einfügen des Javascripts in den Seitenhead. Das Javascript (wie auch der Player und die Audio-Datei) befinden sich in der Weblica-Dateiablage und damit unter der Kontrolle von Weblica. Ich muss mich also ums Hochladen auf den Server nicht mehr kümmern, das erledigt Weblica automatisch für mich.
Beispiel 5: Code in einem HTML-Absatz der Seite Weg von Montespluga ..., fügt Audio-Wiedergabe-Elemente ein
Beispiel 6: Einbauort Seiteneigenschaften - Definition Klasse
Im Head der Seite Codeschnipsel wird eine neue Klasse infoBoxCs definiert, das ist die Infobox, die oben rechts auf allen Codeschnipselseiten erscheint (und nach 20 Sekunden wieder ausgeblendet wird). Die Infobox hatte früher einen rosafarbenen Hintergrund und wird fix positioniert.
(Hintergrundfarbe zwischenzeitlich geändert)
Beispiel 6: Code in den Seiteneigenschaften der Seite Codeschnipsel: Definition der Element-Klasse infoBoxCs
Beispiel 7: Einbauort Absatzeigenschaften - Klassenzuweisung
Die Klasse infoBoxCs wird dem Absatz "Infobox Codeschnipsel" in der linken Spalte der Codeschnipsel-Seite zugewiesen.
Beispiel 7: Zuweisung der Element-Klasse infoBoxCs (aus Beispiel 6) zu einem Absatz
Beispiel 8: Einbauort Weblica-Feld
An Hunderten von Orten im Text finden sich in der BaBox die beiden Links "zurück | nach oben" in kleiner Schrift, gefolgt von einem Zeilenumbruch. Also ein typisches, unzählige Male wiederkehrendes Seiten-Element. Der HTML-Code (ein Absatz = paragraph) für dieses Seiten-Element wird in ein Weblica-Feld eingefügt. Wo die Links erscheinen sollen, muss nun nur der Feldname im Text eingegeben werden.
Wollte ich "nach oben" durch "top" ersetzen, so müsste ich den Code nur an einem Ort ändern.
Beispiel 8: Code für ein Element der Babox: ein Weblica-Feld mit einem Absatz mit den zurück- und nach-oben-Links