in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
Neue Codeschnipsel in Vorbereitung:

Codeschnipsel 32:
CSS3 - Box-shadows, drop-shadows, Farbverläufe (linear gradient).

Codeschnipsel 72:
HTML5 Video Player.

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 16.04.12  /  update

Codeschnipsel Einführung


Wer seine Website weiter individualisieren will, kann die Gestaltungsvorgaben (Stil-Vorgaben) im CSS anpassen oder ergänzen. Oder neue Seitenelemente einfügen, welche in Weblica (noch) nicht vorgesehen sind. Dazu wird CSS-Code, HTML-Code oder Javascript-Code - also ein Codeschnipsel - in Weblica eingefügt.

Kurzer Exkurs in CSS:
Für die individuelle Gestaltung einer Website stehen in Weblica zahlreiche Layout-Vorlagen (z. B. Argon, Silver, usw.) in 5 bis 7 Farbvarianten (blue, grey, usw.) zur Verfügung (siehe Weblica-Designs).
Für die Festlegung der Gestaltung des Seitenlayouts - die Formatierung und die Positionierung der Seitenelemente - werden CSS Cascading Style Sheets benutzt. CSS sind Formatierungsvorgaben in CSS-Code, die in separaten Dateien (z. B. center.css, lcenter.css) gespeichert werden. Die CSS-Dateien werden von Weblica in den Quell-Code jeder Webseite eingebunden und auf den Server hochgeladen. Im Weblica-Forum fand sich eine lesenswerte Einführung in HTML und CSS von Josiane.
Mit Codeschnipseln lassen sich die Layoutvorlagen an persönliche Gestaltungsvorlieben anpassen - die Zahl der Möglichkeiten ist unbegrenzt.

Beispiele für Individualisierungen mittels Codeschnipseln


Beispiele für Anpassungen und Erweiterungen mittels Codeschnipseln sind:
  • die Schriftgrösse ändern 
  • die Zeilenabstände vergrössern 
  • das Seitenhintergrundbild ausschalten 
  • ein kleines Bild als Aufzählungszeichen verwenden 
  • das Kopfbild im Seitenkopf einrahmen
  • einen Drucken-Button einfügen 
  • eine Diashow einfügen
  • einen Video-Player einfügen, der eine Video-Datei abspielt.

a. bis c.    überschreiben bestehende Stil-Vorgaben,
d. bis e.    erweitern eine Stil-Vorgabe, und
f. bis h.     kreieren neue Seitenelemente.

Was "Überschreiben" heisst, wird weiter unten im Exkurs: was heisst "Stil-Vorgaben überschreiben"? erklärt.

Die Anpassungen und Erweiterungen der Seite "Emailadresse verschlüsseln" sind in der Seite Beispiel für die Individualisierung einer Webseite / Website auszugsweise dokumentiert.


zurück   |   nach oben

Formen der Anpassungen und Erweiterungen


Die Anpassungen und Erweiterungen können in Form von
  • CSS- oder HTML-Code für statische Elemente, z. B. die Änderung des Stils (des Formats) einer Absatzüberschrift oder das Einfügen eines neuen Seitenelements, z. B. eines Gadgets
  • Javascript-Code für dynamische, ereignisgesteuerte Elemente, z. B. der "Nach oben"-Button links unten, der erst nach dem Scrollen erscheint
  • PHP-Code (PHP ist eine Scriptsprache für dynamische Webseiten) 
vorgenommen werden.

PHP wird hier nicht weiter betrachtet.

HMTL- und CSS-Code wird in Weblica immer in einen speziellen Fenster für die Eingabe von HTML- / CSS-Code erfasst. Screenshots dieser Eingabefenster finden Sie in den Einbau-Beispielen für Codeschnipsel.

Javascript-Code kann in zwei Formen eingebunden werden:
  • in Textform: der Javascript-Code wird in den speziellen Fenstern für HTML- / CSS-Code erfasst
  • als Datei (mit der Endung .js), die in die Weblica-Dateiablage importiert wird.

Um dem Weblica-Generator und dem Browser mitzuteilen, welche Art von Code eingebaut wird, wird
  • CSS-Code für Stil-Änderungen und -Erweiterungen mit den Tags <style type="text/css"> als erste Zeile und </style> als letzte Zeile eingeschlossen
  • HTML-Code für neue Seitenelemente ohne die Style-Tags erfasst
  • Javascript-Code von den Tags <script type="text/javascript"> und </script> eingeschlossen.

Wo und wie der Code in Weblica eingebaut wird, wird in Vorgehen beim Einbau von CSS-Code, HTML-Code und Javascript beschrieben.


zurück   |   nach oben

Die Typen von CSS- und HTML-Codeschnipseln


Grob kann man vier Typen von CSS- und HTML-Codeschnipseln unterscheiden:

Typ Merkmal Beispiele
T1
überschreiben oder erweitern bestehender CSS-Klassen und -Ids mit anderen oder neuen Eigenschaften
Schriftgrösse der mittleren Spalte ändern,
Breadcrumb ausblenden,
Suchfeld an anderer Position,
Hintergrundfarbe für Kapitelüberschriften
T2
erstellen eigener (neuer) CSS-Klassen oder -Ids, die in Weblica noch nicht enthalten sind und an mehreren Stellen oder in mehreren Seiten zu Einsatz kommen
Infobox mit abgerundeten Ecken,
Sprachbutton in Breadcrumb-Zeile
T3
T3 ist ein Untertyp von T1 und T2:
geänderte,  erweiterte oder neue Formatierungsvorgaben für einen bestimmten Absatz oder bestimmte Absätze bzw. Absatzelemente (Überschrift, Absatztext, Formularelement),
diese Schnipsel enthalten immer die Id des Absatzelements, z. B. Absatznummer(n) #pa123, Überschriften-Id #ha123, Formularelement #id456
Schriftgrösse eines bestimmten Absatzes ändern,
Abstand oben vor einem Absatz,
Hintergrundfarbe eines Absatzes,
Hintergrundfarbe der Absatzüberschrift, Schriftfarbe der Absatzüberschrift, Hintergrundfarbe eines Formularelements
T4 einfügen eines neuen Seitenelements, das in Weblica noch nicht enthalten ist, an einer bestimmten Position Trennlinie zwischen zwei Absätzen,
Links "zurück | nach oben",
Video-Player,
Dia-Show


zurück   |   nach oben

CSS-Klassen und -Ids bestimmen


Element-Klassen können auf einer Seite mehrmals vorkommen. Ihre Namen beginnen mit einem Punkt. Beispiele: .textparagraph = Absatz, .abstractForm = Formular und Gästebuch.

Element-Ids dürfen auf einer Seite nur einmal vorkomen, ihre Namen beginnen mit dem Nummernzeichen #.
Beispiele: #mainNavigation = Hauptnavigation, #footer = Footer (Fusszeile).

Sollen bestehende Stil-Vorgaben im CSS angepasst werden, so müssen die CSS-Klassen und -Ids in den Cascading Style Sheets identifiziert werden.
Anfänger benutzen dafür am besten ein Werkzeug, wie. z. B. Firebug oder Web Developer in Firefox. Profis analysieren direkt die CSS-Dateien.
Die Absatzklasssen sind im Weblica-Learning-Center dokumentiert.


zurück   |   nach oben

Hinweis für Anfänger


Anfänger der Weblica-Individualisierung wenden am besten zuerst einfache Anpassungen wie die Formatierung von Schriften oder die Gestaltung von Seitenelementen an.
In der Seite Vorgehen beim Einbau von Codeschnipseln und in den benachbarten Seiten finden sie Anleitungen zum Einbau von Codeschnipseln.

Funktioniert der eingebaute Code nicht und erscheint der eingebaute Code oben links auf dem Bildschirm, so wurden die <style...> bzw. <script ...> Tags vergessen, oder der Code wurde am falschen Ort eingebaut.

Links zu Einführungen in HTML und CSS finden sich in der Rubrik Codeschnipsel Informations­quellen. Besonders empfehlenswert: das HTML-Online-Seminar in Online-Kurse.
Bei Wikipedia gibt es eine Einführung in Cascading Style Sheets mit weiterführenden Links.


zurück   |   nach oben

Exkurs: was heisst "Stil-Vorgaben überschreiben"?

Dieser Absatz ist zur Zeit nur ein Platzhalter für weitere Erläuterungen.
Das "Überschreiben" von Stil-Vorgaben funktioniert technisch anders, als man sich das vorstellt. Wie es funktioniert, wird in Bälde hier dokumentiert.


zurück   |   nach oben