in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Verschiedene Code­schnipsel der hier auf­geführten Beispiele wurden inzwischen geändert.

Notationskonventionen

Code ist in in Lucida Console schwarz oder in Courier schwarz notiert, anpassungs­bedürftige Teile sind farbig.

Die Namen von Weblica- und Ressourcen­feldern beginnen mit dem $-Zeichen. Dieses ist hier so hervorgehoben: $. Beim Ver­wenden von Code müssen die Ressourcenfelder ersetzt werden.

W3C-Konformität

Unser Code ist standardkonform:
XHTML 1.0 transitional ist valide - zur Prüfung bitte klicken

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):

Beispiel 1: Einbauort CSS global (Menü Projekt)

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 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 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 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 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 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 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 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
Beispiel 8: Code für ein Element der Babox: ein Weblica-Feld mit einem Absatz mit den zurück- und nach-oben-Links


zurück   |   nach oben