CSS-Stile und das Zusatzfenster Elementeigenschaften im Layouteditor Shopsoftware Webshop Software Web Business Shop

CSS (Cascading Style Sheets) ist eine Ergänzung zur Webseiten-Beschreibungsprache HTML. Diese Erweiterung ist - da sie inzwischen auch in allen modernen Internet-Browsern umgesetzt wird (wenn auch nicht immer in gleicher Weise) - zum unverzichtbaren Instrument einer professionellen Webseiten-Gestaltung geworden.

Bei eCommerce Projekten, die häufig eine Vielzahl an Seitenvorlagen (Templates) und Webseiten beinhalten, vereinfacht CSS die durchgängige Gestaltung enorm. Web Business Shop sieht für jede Grundlayoutvorlage eine CSS-Datei mit gleichem Dateinamen (jedoch mit der Endung .css) vor. Durch die Zuordnung von Seitenvorlagen zu einer Grundlayoutvorlage, werden die Formatierungen oder Stildefinitionen in einer CSS-Datei automatisch für mehrere Seitenvorlagen verwendbar.

Gleichzeitig befreit CSS die Seitenvorlagen von unnötigen HTML Text, der früher (ohne CSS) nur aus gestalterischen Gründen eingefügt wurde. In älteren Webseiten finden sich z.B. oft mehrfach verschachtelte Tabellen oder transparente Ein-Pixel-Bilder, um optisch einen bestimmten Abstand bei Seitenelementen zu erreichen. In CSS gibt es dafür einfache Rand- bzw. Positionseinstellungen, so dass mit der Umgestaltung mancher alten Webseiten auf CSS-konforme Darstellung bis über 80% des ursprünglichen HTML-Kodes wegfällt. Webseiten lassen sich damit wesentlich einfacher warten und werden in Internet Browsern auch schneller dargestellt. Es wird sogar gemutmaßt, dass solche Webseiten - mit einem erheblich geringerem Anteil von HTML Quelltext am Gesamtinhalt - durch Internet Suchmaschinen besser bewertet werden.

Im wesentlichen basiert CSS auf der Definition von Attributen, die eine Formatierung bzw. das Aussehen eines HTML Elements für den Browser vorschreiben. Diese Attribute werden meist zu Stil-Klassen unter einem Namen zusammengefaßt und dann über das HTML-Attribut class="stilname" einem Webseiten-Element zugewiesen. Die Vielzahl dieser CSS-Attribute hat generell auch die Gestaltungsmöglichkeiten einer Webseite deutlich erhöht.

Die Formatierungsbefehle von CSS werden normiert durch das W3C-Konsortium, aktuell in der Version 2. Die Spezifikation dazu findet sich auf der Internetseite:

http://www.edition-w3c.de/TR/REC-CSS2

Eine sehr gute (deutschsprachige) Einführung in das Thema CSS-Attribute, dem sich unsere Web Business Shop Dokumentation hier nicht widmen kann, finden Sie unter http://de.selfhtml.org/css/eigenschaften/index.htm

Die CSS-Stile der Web Business Shop Seitenvorlagen können einerseits direkt in der zugrunde liegenden CSS-Datei bearbeitet werden - entweder mit einem externen Editor oder in der Ansicht CSS-Quelltext des Layouteditors von Web Business Shop. Andererseits läßt sich hierfür auch das Zusatzfenster Elementeigenschaften verwenden, das immer eingeblendet wird, wenn Sie im Layouteditor von Web Business Shop eine Vorlage in der Ansicht Layout öffnen.

Klicken Sie mit der Maus auf einen Bereich in der geöffneten Vorlage oder bewegen Sie sich mit den Pfeiltasten innerhalb der Vorlage wechselt die Ansicht in diesem Fenster, je nachdem welches HTML-Element in der Vorlage selektiert ist. In der Auflistung Elemente erscheinen dann alle HTML-Elemente die von der aktuellen Selektion betroffen sind.

An der ersten Stelle steht dabei das aktive Element, danach alle Elemente, in die das selektierte Element eingebettet ist.

Wenn Sie z.B. einen Absatz (<p>) anklicken, der in eine Tabelle eingebettet ist, so wird nach dem Absatzelement auch die Tabellenzelle(<td>), das Zeilenelement (<tr>) und die Tabelle (<table>) angezeigt. Da alle HTML-Elemente einer Webseite immer in einem Dokumentbereich (<body>) integriert sind, wird dieses Element immer an unterster Stelle aufgeführt.

Unterhalb der Elemente-Auflistung befindet sich die Auswahlliste CSS-Stil.

Ist dem aktiven bzw. markierten Element eine Stilklasse zugeordnet, wird diese in der Auflistung selektiert. Die Auflistung enthält alle CSS-Stilklassen, die in der - einer Vorlagendatei zugeordneten - CSS-Datei gespeichert sind. Bei Seitenvorlagen ist das immer auch die CSS-Datei der Grundlayoutvorlage. Wenn der Seitenvorlage keine eigene CSS-Datei zugewiesen wurde, können Sie direkt die Stildefinitionen der Grundlayoutvorlage bearbeiten.

Rechts neben der CSS-Stil Auflistung befinden sich die Buttons zur Bearbeitung der CSS-Stilliste.
Wählen Sie aus der Auflistung einen Klassennamen und klicken dann auf den Button werden die Attribute der Klasse in der Tabelle darunter aufgelistet. Änderungen oder Eingaben, die Sie in der unteren Attributtabelle tätigen, beziehen sich immer auf den in der CSS-Stil Auflistung angezeigten Klassennamen.

Zur Anlage einer neuen Klasse geben Sie vorher bei CSS-Stil den gewünschten Klassennamen ein und klicken dann auf .

Gemäß dem oberen Muster-Schaubild steht folgender Eintrag in der Stilliste:

.headline_1 {
margin-top: 10px;
font-weight: 300;
font-size: 12pt;
margin-bottom: 10px;
padding-bottom: 3px;
margin-left: 0px;
color: #ff9900;
border-bottom: #ffcc00 2px solid;
font-style: italic;
font-family: Arial, Helvetica, Univers, sans serif;
letter-spacing: 0.2pt}

Zur Neuanlage einer Formatierungsdefinition für einen allgemeinen HTML Elementtyp markieren Sie das Element, leeren das Feld CSS-Stil und klicken dann auf den Neuanlage Button:

In diesem Bildschirmausschnitt würde bei Klick auf Neuanlage eine Stildefinition für den HTML Elementtyp <p> (=Absatz) angelegt:

P {
color: #000000}

Gemäß den CSS-Spezifikationen gibt es eine Fülle von Möglichkeiten eine CSS-Klasse bzw. einen Stil zu definieren. Web Business Shop beschränkt sich auf diese beiden Arten (Allgemeines Klassenformat und Klasse für HTML-Elementtyp ) . Unterstützt werden gemäß den vorherigen Definitionen auch die Anlage und Bearbeitung von Unterklassen, jedoch nur in gleicher Art und Weise.

Also z.B. zur Anlage einer Formatvorgabe für die Hyperlinks innerhalb Klasse .headline_1:

oder als Unterklasse mit späterer Zuweisung zu einem HTML Element:

Bei CSS-Unterklassen muß der Punkt (.) mit angegeben werden!

Hinweis:
CSS-Stil Klassennamen dürfen keine Leerzeichen, Sonderzeichen und/oder Umlaute enthalten, sowie nicht mit einer Zahl beginnen!

Um eine CSS-Stilklasse aus der Stildefinition zu entfernen, wählen Sie den jeweiligen Stilnamen zunächst aus der Auswahlliste und klicken dann auf den rechten Button

Neben den Schaltflächen zur Bearbeitung der CSS-Klassen, befinden sich rechts neben der Elemente Liste auch noch Buttons zur Modifizierung der Vorlageninhalte:

Bei manchen Elementen, z.B. Tabellenzellen oder Tabellen (z.B. width, cellspacing oder align), werden zusätzlich am Anfang HTML-Attribute bei der Tabelle der Stil-Attributen aufgeführt. Wie bei den CSS-Stilattributen können Sie diese durch Klick auf die Werte-Spalte ändern. Diese Angaben werden jedoch direkt im HTML-Quelltext der Vorlage bei den betroffenen Elementen hinterlegt.

In der Elemente-Auflistung des Zusatzfensters finden sich auch Web Business Shop spezifische Eintragungen:

[INHALTSBEREICH SEITENVORLAGE]

Kennzeichnet die Grenze zwischen Grundlayoutvorlage und Seitenvorlage bzw. editierbaren und nicht editierbaren Bereich.

[ANZEIGEELEMENT]

Ein Anzeigeelement ist ein Shopelement, dass in Seitenvorlagen eingebettet ist um Onlineshopinformationen aus den Projektdaten zum Zeitpunkt des Abrufs im Onlineshop einzufügen. Das kann z.B. eine Liste mit Produktinformationen sein oder die Auflistung einer Linkgruppe.
Markieren Sie ein Anzeigeelement in der Elementeliste, wird der Name des Shopelements angezeigt und die Attribute des Elements können bearbeitet werden, sofern es sich nicht um einen geschützten Bereich handelt.

[ANZEIGEFILTER]

Anzeigefilter sind mächtige Instrumente, die in HTML-Quellkode eingefügt werden um die Ausgabe von Datenbankinhalten an Bedingungen zu knüpfen. Damit wird z.B. in einer Seitenvorlage dynamisch geprüft, ob einem Produkt ein Bild zugeordnet ist, ob es einen Preis hat oder ob der Shopbesucher sich eingeloggt hat. Markieren Sie einen Anzeigefilter in der Elementeliste, werden die Bedingungsattribute aufgelistet und können bearbeitet werden, sofern es sich nicht um einen geschützten Bereich handelt.

[LAYOUTBAUSTEIN]

Kennzeichnet einen geschützten Bereich in der Vorlage, dessen Inhalt im Ansichtsmodus Layout nicht editiert werden kann. Layoutbausteine haben keine Attribute.

(rev. 05.06.2006)