KASKADIERENDE STYLE-SHEETS UND HEADERS

Webdesign ist für ein online Geschäft von großer Wichtigkeit. Für die Glaubwürdigkeit ist es von Bedeutung, dass die Site professionell dargestellt und einfach zu benutzen ist. Nicht nur Besucher werden das Aussehen der Site in Betracht ziehen, sondern auch die Suchmaschinen werden das tun.

Kaskadierende Style Sheets (kurz CSS) und Headers (d.h. Kopfdaten) sind ein wichtiger Aspekt des Webdesign und sollten bei der Planung einer Website sorgfältig überlegt sein.

Was ist ein Kaskadierendes Style Sheet?

Ein Style Sheet (engl., sprich "stail schiet", "Stil-Blatt") enthält über die darzustellende Seite für den Broswer eine Anzahl von Auszeichnungen mit Formatierungs-Anweisungen zu Text, Einzügen, Position, Farbe usw.. Diese Auszeichnungen sind den Auszeichnungen im html ähnlich. Sie sind so ähnlich wie die Stylesheets von Textverarbeitungs-Programmen.

Ein CSS hat drei Parameter:

Style: Damit wird Position, Randabstand, Type, Farbe, Größe und Hintergrund von Text festgelegt.
Position: Ein Stylesheet kann entweder innerhalb des Seiten Kopfes (<HEAD> ... </HEAD>) oder in einer externen Datei, oder aber innerhalb einer normalen html-Auszeichnung platziert sein.
Kaskadiert: Damit können verschiedene Stylesheets in einer Rangfolge angeordnet werden.

Wie wendet man CSS an?

Man kann einen Editor wie z.B. DreamWeaver oder FrontPage nutzen, um den korrekten Code für eine CSS-Seite zu erzeugen. Nachfolgend sind grundlegende Instruktionen für FrontPage, um eine externe CSS-Datei zu erzeugen:

Im Menu "Datei" wählt man "Neu" und danach "Seite oder Web".
Im Dialog für "Neue Seite oder Web" wählt man aus "Neu von Vorlage" den Punkt "Vorlage-Seiten".
Dann klickt man den Reiter "Style Sheets", wählte die gewünschte Art, und klickt den Schalter "OK".

FrontPage erzeugt eine neue Seite mit der Erweiterung ".css" und öffnet diese in der Seitenansicht zum Editieren. Diese Seite muss gespeichert werden, um sie später einzubinden.

Anmerkung: Die Werkzeugleiste "Style" erscheint, wenn man eine CSS-Datei erzeugt. Man kann dann die Werkzeugleiste anklicken, um den Dialog für Style zu aktivieren.

CSS-Dateien sind mit einem HTML-Editor recht einfach zu machen, jedoch sie von Null an zu erstellen erfordert gute HTML-Kenntnisse von Erfahrung im Design.

Welche Vorteile bringt der Einsatz von CSS?

Aktualisierungen werden recht einfach und schnell, weil die Information für eine ganze Website an einem Ort zusammen gelegt sein kann.
Verschiedenen Anwender können unterschiedliche Seitendarstellungen angeboten werden. So zum Beispiel großer Text für visuell Behinderte und normaler Text für alle anderen.
Der Code (Text) für das Dokument wird kürzer und einfacher.
Mit nur einem CSS können alle Seiten uniform gestaltet werden.
CSS und XHTML-Code ermöglichen es Behinderten, die Seitendarstellung zum leichteren Lesen zu verändern.
Man hat es leichter, die Seiten auf mobilen Geräten zu lesen, wenn sie mit CSS gestaltet wurden.
Die Seiten laden rascher.

Welche Nachteile hat der Einsatz von CSS?

Wenn eine Style-Auszeichnung innerhalb einer html-Auszeichnung angeordnet wird, ist nur der von der html-Auszeichnungen definierte Teil betroffen. Das macht Revisionen problematisch und schwer zu finden, wenn man eine Seite verändert.
CSS-Seiten können von verschiedenen Browsern unterschieldich dargestellt werden.

Was sind Header?

Das ist eine Bilddatei, die das Logo des Site-Betreibers und den Titel der Site zeigt. Er ist relativ einfach zu erzeugen - doch sollten nachfolgende Tips beachtet werden, um aus diesem Konzept den vollen Nutzen zu ziehen:

Ein Header sollte immer HTML-Text sein, weil er sonst die Erscheinung der Website mindert und sie un-professionell erscheinen lässt.
Es sollte eine dezente Grafik sein, die korrekt und schnell geladen wird.
Man kann sie animiert gestalten, doch sollte man darauf achten, dass sie sauber arbeitet und einfach gehalten ist.
Man kann Flash einsetzen, das wird aber das Laden Site verlangsamen - was den Besuchern nicht gefallen wird und es besonders Leuten mit Einwahlzugang (Modem) schwer macht, in annehmbarer Zeit zuzugreifen.
Wenn man Flash einsetzt, soll man auf keinen Fall die Naviation im Header anordnen, weil auf den Rest der Site gar nicht zugegriffen werden kann, wenn dieser langsam lädt. Außerdem gibt es Leute, die Nur-Text-Browser benutzen.

Der Header kann Teil einer Vorlage sind und somit recht professionell ausschauen. Header zusammen mit einer Vorlage einzusetzen ist der einfachste Weg, eine Website zu erstellen. Wer bei geringer Erfahrung seine eigene Site selbst designen will, wird wahrscheinlich eine einfache, aber dennoch professionell erscheinende Site erstellen - und eine Vorlage mit einen einfachen HTML-Header benutzen.

Was ist die bessere Option?

Ein großer Teil des online-Erolgs ergibt sich aus der Fähigkeit des Unternehmens, die Suchmaschinene-Optimierung zu meistern. Kaskadierende Style Sheets sind aus einigen Gründen freundlicher für die Suchmaschinen-Robots.

Der erste Grund ist Einfachheit. CSS vereinfacht die Auszeichnungen, die ja von den Bots und Spidern neben dem eigentlichen Inhalt der Site gelesen werden. Je einfacher die Auszeichnungen, desto besser versteht der Spider den Zweck der Site und kann sie richtig indizieren.

Zudem sehen sie viel besser aus als gewöhnlich Header - und sowohl Google als auch weniger starke Suchmaschinen legen gewissen Wert auf die ästhetische Erscheinung einer Site.

Beim Einsatz von CSS steht der Text besser heraus, und Spider können ihn rascher erfassen und die relevanten Schlüsselwörter herauspicken, was zu einer besseren Ausgabeposition führen wird.

Man kann unterschiedliche Meinung drüber hören, ob Header oder CSS besser sei. Doch die letzte Entscheidung trifft man selbst und sollte deshalb nie außer Acht lassen, dass man nicht entweder für die Suchmaschinen oder für die Besucher gestaltet, sondern eben immer für beide.

Im Grunde sind sich alle einig, dass Einfachheit am Besten ist - und leichte Navigation; eine klare, saubere Site mit relevantem Inhalt trägt mit dazu bei, dass man sogar den größten Konkurrenten überholt.

vorige Seite nächste Seite Index