in Weblica kann man Websites ganz einfach mit CSS, HTML und Javascript erweitern und individualisieren
In der Rubrik Tests werden verschiedene Codeschnipsel getestet.

Wie Codeschnipsel eingebaut werden, steht in Vorgehen beim Einbau.

Notationskonvention

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 18.07.11  /  update
Tipp:
Eine vollständige Liste aller Codeschnipsel findet sich im Codeschnipsel Inhaltsverzeichnis.

Codeschnipsel HTML CSS Javascript


In dieser Rubrik werden nützliche Codeschnipsel in HTML, CSS und Javascript dokumentiert. Sie dienen der individuellen Gestaltung einer Website bzw. von Webseiten und deren Elementen im Desktop-CMS Weblica.

Die Namen der Id- und Klassen-Selektoren sind diejenigen des Weblica-Designs Silver und können in anderen Weblica-Designs (z. B. Argon) verschieden sein.

Bitte die Anleitung zum Einbau von Codeschnipseln für CSS, HTML-Code und Javascript sowie die benachbarten Seiten beachten. Hinter der Inhaltsübersicht findet sich eine kurze Beschreibung der Gliederung der Codeschnipsel. Im Inhaltsverzeichnis kann auch mit der Browser-Suchfunktion (Ctrl+f) gesucht werden.

Anwender des Website-Baukastens Zeta Producer finden in Codeschnipsel für Zeta Producer weitere nützliche Codeschnipsel und Anleitungen.

Inhaltsübersicht

Codeschnipsel Einführung

Einführung in die Individualisierung einer Weblica-Website mit CSS-Code, HTML-Code oder Javascript-Code. Typen von Code-Schnipseln. mehr...


Codeschnipsel 01: Zeichen und Symbole

HTML-Code für Zeichen, Symbole und Textaufbereitung. Varianten von Listenaufzählungszeichen. mehr...


Codeschnipsel 02: Schriftformatierungen

CSS und HTML für verschiedene Formatierungen der Schrift: Grösse, Farbe, Abstände und Ausrichtung. mehr...


Codeschnipsel 03: Seitenelemente gestalten

CSS und HTML für die individuelle Gestaltung der Elemente einer Seite: Seitenelemente, Navigationselemente, Absätze, Rahmen, Bilder usw. mehr...


Codeschnipsel 04: Abstände aller Art

CSS und HTML für die Gestaltung der Abstände innerhalb und zwischen Elementen einer Seite: Innenabstand, Aussenabstand, Zeilenabstand usw. mehr...


Codeschnipsel 05: Positionierung von Elementen

CSS und HTML für die Positionierung von Seitenelementen: Positionseigenschaften, Positionsart, Versatz - für Texte, Bilder usw. mehr...


Codeschnipsel 06: Links und Navigation

HTML, Javascript und CSS - fallweise ergänzt durch Grafiken - für die Gestaltung von Links und anderen Navigationselementen. mehr...


Codeschnipsel 07: Linien, Rahmen und Farben

CSS und HTML für Linien, Rahmen, und Farben von Seitenelementen aller Art; ausserdem Trennlinien und Seitenrahmen. mehr...


Codeschnipsel 08: Bildergalerien und Bilder

CSS, HTML und Javascript für die Formatierung von Bildern und Bildergalerien und die Gestaltung von Seiten mit Bildern bzw. Grafiken. mehr...


Codeschnipsel 21: Die Struktur eines HTML-Dokuments

Beschreibung der Grundstruktur und der Elemente eines HTML-Dokuments (einer Webpage). Komponenten von head und body. mehr...


Codeschnipsel 22: Meta-Elemente im Seitenkopf

Dokumentation der wesentlichen Meta-Elemente im Head einer Webpage. HTML-Code für die Spezifikation von Meta-Elementen. mehr...


Codeschnipsel 41: Javascript, Effekte und mehr

Javascript, HTML und CSS für Eigenschaftsabfragen, Effekte und mehr. Nutzung von Funktionen der jQuery-Bibliothek. mehr...


Codeschnipsel 46: Gadgets aller Art

Javascript und HTML-Code für Gadgets aller Art: IP-Adresse, Referrer, Sprach-Übersetzer, Animationen usw. mehr...


Codeschnipsel 51: Weblica-Interna: Dateiverwaltung, Backup u.a.

Hier werden besondere Weblica-Funktionen und Interna vorgestellt: Dateiverwaltung, Sicherungsdateien, spezifische Seitenelemente, Seitenexport und mehr. mehr...


Codeschnipsel 52: Weblica-Felder

Weblica-Felder sind ein raffiniertes Konstrukt, das einfach handzuhaben und sehr mächtig in der Anwendung ist. mehr...


Codeschnipsel 53: Tipps zu Weblica

Verschiedene Tipps und Tricks zu Weblica: CSS-Code, Handhabungs-Empfehlungen, spezielle Weblica-Funktionen und Ratschläge zur Bildbearbeitung. mehr...


Codeschnipsel 54: mehrsprachige Weblica-Websites

Varianten für die Realisierung mehrsprachiger Websites mit Weblica: Translator, Verlinkung auf Startseite, seitenweise Verlinkung. mehr...


Codeschnipsel 71: Infoboxen

CSS und HTML für Infoboxen. Varianten: mit abgerundeten Ecken, mehrseitigem und einseitigem Schatten, Rahmen und aufklappbar. mehr...


Codeschnipsel 72: Player einbinden

HTML-Code für das Einbinden von Playern in Weblica für die Wiedergabe von Video- und Audio-Dateien. mehr...


Codeschnipsel 73: Fehlerseite für HTTP-Statuscode 404

Vollständiger HTML-Code und Text für eine eigene Fehlerseite für das Abfangen des HTTP-Statuscodes 404 (toter Link). mehr...


Codeschnipsel 74: Emailadresse verschlüsseln

Anleitung für das Verschlüsseln und Entschlüsseln von Mailadressen und das Einbetten einer verschlüsselten Email-Adresse. mehr...


Codeschnipsel 91: Serverkonfiguration mit .htaccess

Direktiven für die Webserver-Konfigurationsdatei .htaccess für Umleitungen, Fehlerseiten, Kompression und Zugriffsschutz. mehr...


Einbauorte für Codeschnipsel in Weblica

Beschreibung der fünf Einbauorte (Schnittstellen) und ihrer Merkmale für den Einbau von Codeschnipseln in Weblica. mehr...


Vorgehen beim Einbau von Codeschnipseln

Anleitung für den Einbau von Codeschnipsel in Weblica in vier Schritten. Tipps zur Bestimmung des Code-Typs (CSS, HTML, Javascript) eines Codeschnipsels. mehr...


Hinweise zur Anpassung von Codeschnipseln

Hinweise zu Anpassungsbedarfen und Anpassungsmöglichkeiten beim Einbau von Codeschnipseln aus anderen Quellen (Websites) in Weblica. mehr...


Codeschnipsel Einbaubeispiele

Acht Beispiele für den Einbau von Codeschnipsel mit CSS, HTML und Javascript an den verschiedenen Einbauorten in Weblica, mit Screenshots. mehr...


Webdesign Tools

Werkzeuge (Tools) für das Webdesign: Analyse und Bearbeiten von Webseiten, Werkzeuge für Farben, Buttons, Icons und mehr. mehr...


Codeschnipsel Informationsquellen

Informationsquellen zu den Code-Schnipseln und für Seitenindividualisierungen mit HTML, CSS und Javascript. mehr...


Codeschnipsel Inhaltsverzeichnis

Vollständige Übersicht über alle hier dokumentierten Codeschnipsel für die individuelle Gestaltung von Weblica-Websites und Webseiten. mehr...


Beispiel für die Individualisierung einer Webseite / Website

Demonstration der Individualisierung einer mit Weblica erstelllten Webseite mittels CSS, HTML und Javascript. mehr...

Gliederung der Codeschnipsel

Seit der Reorganisation der Codeschnipsel-Seiten im Januar 2013 sind die Codeschnipsel so aufgebaut:
  • Einführung und Typisierung der Codeschnipsel
  • viele kleine Codeschnipsel für die schnelle Individualisierung von Seitenelementen:
    • Codeschnipselseiten 0x und 1x: Codeschnipsel für die individuelle Gestaltung einer Website, gruppiert nach Typen von Seitenelementen
  • ausführlichere Artikel:
    • Codeschnipsel 2x: HTML-Code
    • Codeschnipsel 3x: CSS und CSS3
    • Codeschnipsel 4x: Javascript, jQuery und Gadgets
    • Codeschnipsel 5x: Weblica
    • Codeschnipsel 7x: umfangreiche Codeschnipsel zu Spezialthemen
  • Spezialthemen:
    • Codeschnipsel 9x: Serverkonfiguration und anderes Drumrum
  • Anleitungen und Quellen:
    • vier Seiten Anleitungen zum Einbau
    • Quellenverzeichnisse
    • Werkzeugverzeichnisse
  • Inhaltsverzeichnis
  • Individualisierungs-Beispiel


zurück   |   nach oben

Information




zurück   |   nach oben