Website-Design mit CSS -- CSS als Mittel der Website Promotion

Das Website Design und Layout mittels CSS (Cascading Style Sheets) optimieren

Um bei Suchmaschinen ein gutes Website Ranking zu erzielen ist der Aufbau der Website von entscheidender Bedeutung. So werden noch häufig Tabellen für das Website Design und zur Positionierung von Elementen benutzt.



Der Nachteil hierbei ist das man einen ziemlich aufgeblähten Quelltext erzeugt, was von Suchmaschinen negativ für die Bewertung der Website gilt.
Je weniger HTML Tags man zum Website Design benutzt umso besser ist dies für das Suchmaschinen Ranking. Der Quelltext einer Webite sollte schlank und übersichtlich sein.
Dies lässt sich mit CSS sehr gut realisieren. Sie können alle Angaben zur Positionierung von Elementen einer Website bequem in einer seperaten Datei notieren und verschwenden somit keinen Platz im eigentlichen Quellcode der Website.
Vergleichen Sie die Quelltexte der folgenden Beispiele:
Beispiel 1: Website Design mit Tabellen Quelltext anzeigen

Beispiel 2: Website Design mit CSS Quelltext anzeigen


Wie Sie sehen können stehen sich die Layouts in nichts nach wenn man Sie sich am Bildschirm betrachtet. Der Quelltext der beiden Beispiele weicht allerdings erheblich voneinander ab.
Der Quelltext im ersten Beispiel ist weitaus Voluminöser da Tabellen zur gestaltung verwendet wurden.
Im zweiten Beispiel wurden in einer seperaten CSS Datei alle Anweisungen zum Positionieren der einzelnen Elemtente notiert, somit verringert sich der Umfang an HTML-Zeichen im Quelltext enorm.



Ein weiterer Grund um die Layoutgestaltung mit CSS durchzuführen ist, das Suchmaschinen eine Website umso besser bewerten je höher die für Suchmaschinen relevanten Inhalte im Quelltext stehen.
Mit CSS ist es möglich alle Inhalte nach eigenem belieben im Quelltext zu positionieren.
Tabellen hingegen bieten diese Möglichkeit nicht.

So können Sie mit CSS z.B. Inhalte die für Suchmaschinen sehr wichtig sind ganz oben im Quelltext notieren aber trotzdem werden die Inhalte erst weit unten im Bildschirm angezeigt wenn sich ein Besucher die Website anschaut. Somit bekommt eine Suchmaschine den Quelltext in anderer Reihenfolge präsentiert als ein Besucher.

Ebenfalls können die von Suchmaschinen hoch bewerteten Überschriften Tags h1, h2, h3 usw. mittels CSS verkleinert werden. So könnte man eine ganze Website voll mit h1 Überschriften verfassen, am Bildschirm jedoch erscheint die Schrift in ganz normaler Grösse (eben die Grösse die man vorher in einer seperaten CSS Datei für h1 Überschriften definiert hat).




Wie wird Website-Layout-Design mittels CSS durchgeführt ?

Zum Design des Layouts einer Website ist es am vorteilhaftesten für Suchmaschinen, wenn Sie alle Anweisungen der Website-Elemente in einer externen, seperaten CSS Datei definieren.
Im eigentlichen HTML Quelltext der Website muss dann ein Pfad zu dieser CSS Datei angegeben werden, damit ein Browser weiss wie er die einzelnen HTML Elemente am Bildschirm anzuordnen hat.

Die Anweisungen in einer CSS Datei können z.B. wie folgt aussehen.
Quelltext einer CSS Datei:

#element1 { position:absolute; top:10px; left:0px; width:20%; height:500px; background:gold; }

#element2 { position:absolute; top:10px; left:21%px; width:79%; height:500px; background:green; }

Beispiel ansehen

Mit diesen CSS Anweisungen hat man bereits die einfachste Art eines Layout-Designs mit CSS verwirklicht. Die Anweisungen werden in einer einzelnen Textdatei notiert und dann unter beliebigem Dateinamen mit der Endung ".css" gespeichert.

Erklärung des Quelltextes:
#element1 gibt den Namen für dieses Element an.
Der Befehl position:absolute; gibt an das das Element absolut, gemessen am Rand des Elternelements, positioniert wird.
top:10px; beschreibt die Startposition vom oberen Bildschirmrand. Die Angabe im Beipiel bedeutet das das Element 10 Pixel unterhalb des oberen Bildschrimrandes beginnt.
left:0px; beschreibt die Startposition vom linken Bildschirmrand in Pixeln an.
width:20%; gibt die Breite des Elements in Prozent der Bildschirmgrösse an.
height:500px; gibt die höhe des Elements in Pixeln an.
Mit dem Befehl background:gold; lässt sich die Hintergrundfarbe bestimmen.

Damit ein Browser weiss wie diese Datei heisst und wo er diese CSS Datei abrufen kann wird im HTML Quelltext der Website ein Pfad zu dieser Datei wie folgt notiert.

Quelltext der HTML Datei:

<html>
<head>
<title>
Website Design mit CSS
</title>
<meta name="description" content="Beschreibung">
<meta name="keywords" content="Keywords">
<LINK REL="stylesheet" TYPE="text/css" HREF="css/formate.css">
</head><body bgcolor="#FFFFFF">

<div id="element1">
<h4>Inhalte für Element1 </h4>
</div>

<div id="element2">
<h4>Inhalte für Element 2</h4>
</div>

</body> </html>


Die Anweisung <LINK REL="stylesheet" TYPE="text/css" HREF="css/formate.css"> gibt dem Browser an, das im Verzeichniss "css" eine Datei Namens "formate.css" liegt. Somit weiss der Browser wo er die Informationen zur Anordnung der Elemente findet.

Die Anweisungen <div id="element1"> </div> und <div id="element2"> </div> referenzieren die Elemente die in der CSS Datei angegeben wurden. Alles was Sie innerhalb des Containers <div id="element1"> und </div> notieren wird als Inhalt des Elementes mit dem Namen "element1" angesehen und auch nur in dem Bereich angezeigt den Sie in der CSS Datei für dieses Element festgelegt haben.

Schritt für Schritt Ablauf der Website-Layout-Design Gestaltung mit CSS:

1. Notieren Sie die CSS Anweisungen mit einem HTML Editor oder einem anderen Texteditor und Speichern Sie diese Datei mit der Endung .css ab.

2. Geben Sie im Kopfbereich der HTML Datei für welche das Layout gedacht ist den Pfad zur CSS-Datei an (im Beispiel:formate.css).

3. Definieren Sie in der HTML Datei die einzelnen "div" Bereiche und füllen Sie das Attribut "id" mit dem Namen des zugehörigen Elements Ihrer CSS Datei.

4. Speichern Sie die HTML Datei und rufen Sie sie in Ihrem Browser auf.


In einer CSS Datei können Sie auch noch Angaben zu Schriftgrössen, Schriftarten, Farben und vielem mehr notieren. Eine erweiterte ausführliche Erklärung der Möglichkeiten und Handhabung von CSS finden bei Selfhtml.de




Weiterführende Links:

Inhaltsverzeichnis
Stichwortverzeichnis
Die FAQ für Website Promotion




Zur Startseite: Website Promotion für Suchmaschinen

copyright© by ranking-abc.de