1.1 Grundlagen von Webseiten Design

Webseiten Design als SEO Maßnahme.

Ihren XING-Kontakten zeigen

Der schlanke Code in Grundlagen

Der Vormarsch des schlanken Codes ist nicht mehr aufzuhalten.

Immer mehr Seitenbetreiber und Designer nutzen heut zu Tage XHTML und CSS (Cascading Stylesheets) für Webseiten Design.
Die Webseiten mit den aufgebauschten Tabellenkonstrukten, in denen Unmengen an Tags und Elementen genutzt wurden, sind vorbei. Keine „Spacer“- gif’s mehr die einem das Leben schwer machen.

Natürlich gibt es immer noch Webseiten auf denen Tabellenkonstrukte eingesetzt werden. Aber und vor allem hier sollte ein Umdenken statt finden.
Wer sich für dieses Thema mehr erwärmen kann und die Grundlagen des Webseiten Designs verstehen will, sollte nach dem Begriff Webstandards suchen und sich ruhig ein wenig intensiver damit beschäftigen.

Welche Vorteile bringen uns XHTML und CSS (Cascading Stylesheets) bei der Homepage Erstellung und Webseiten Design?

Zum einen werden heute zwei Dateien erstellt, z.B. eine index.html und eine style.css.
Vorteil dieser Variante ist, dass Sie sich einen guten Überblick verschaffen und eine gute Strukturierung des Grundaufbaus Ihrer Webseite erhalten.

Weiterer Vorteil von XHTML und CSS, der Code ist um einiges schlanker und Sie verbrauchen weniger „Platz“ auf Ihrem Webspace. Schlussfolgerung daraus, Sie haben weniger Kosten durch Traffic bei Ihrem Provider.

Es gibt aber noch einen entscheidenden Vorteil zur Nutzung des schlanken Codes, Suchmaschinen können diese Webseiten leichter indexieren!

Allein durch XHTML und CSS und der Einhaltung des richtigen Markups schaffen Sie es also, den Wert Ihrer Seite zu steigern.

Grundaufbau einer XHTML Webseite

<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Strict//EN"
SYSTEM "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Der Name Ihrer Seite</title>
<meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
... hier kommt der Inhalt der Seite
</body>
</html>

Im oberen Kasten sehen Sie den Grundaufbau einer XHTML Webseite.

Die Grundlagen für Ihr Webseiten Design und den Aufbau ist gelegt. Als nächstes richten wir Bereiche ein, in die später Ihre Inhalte eingefügt werden und die Webseite ihr Design erhält.

Sie haben jetzt den ganz groben Aufbau und die wichtigsten Grundlagen einer Webseite kennen gelernt.
Wie geht es weiter?
Um der Webseite auch Inhalt und Aussehen ( Design ) geben zu können, müssen wir noch ein wenig Vorarbeit leisten.
Zum Einen müssen Sie sich überlegen, wie Ihre zukünftige Webseite dargestellt und welches Webseiten Design sie erhalten soll.
Welche Bereiche soll Ihre Webseite enthalten?
Das Layout wird in verschiedenen Bereichen (DIV’s) dargestellt.
Ich habe mich für verschiedene DIV’s entschieden.
Einen Kopf-Bereich (#header), Navigation (#navigation), Inhalt (#content) und einen Seiten – Teil (#sidebar).

Grundaufbau einer XHTML Webseite mit Div’s

<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Strict//EN"
SYSTEM "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Der Name Ihrer Seite</title>
<meta http-equiv="Content-type" content="text/html; CHARSET=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<div id="wrap">
<div id="header">
       <!--Hier ist der Bereich für eine Grafik, Logo oder einen Text.-->
</div>
<div id="navigation">
       <!--Der Bereich für die Navigation-->
</div>
<div id="content">
        <!--In diesen Bereich kommt der Inhalt der Seite.-->
</div>
<div id="sidebar">
        <!--Sonstige Inhalte oder z.B. Subnavigation.-->
</div>
</div><!--wrap Ende-->
</body>
</html>

Nun haben Sie die verschiedenen Bereiche DIV’s fest gelegt.
Bisher würden Sie auf Ihrer Homepage noch nichts sehen, das Grundgerüßt haben Sie jedoch schon erstellt.

Nun kommt die Erstellung der CSS – Datei ( Cascading Stylesheets ), um der Homepage ganz langsam Gestallt zu geben und das Design der Webseite an zu passen.
Die Erstellung Ihrer Webseite mit CSS ( Cascading Stylesheets ) und XHTML bringt Ihnen vor allem den Vorteil der Übersicht und erleichtert später die weitere Gestaltung und das Design.

Grundaufbau der CSS ( Cascading Stylesheets ) – Datei zum oberen Beispiel.

body {
font-size: 85%;
font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
text-align: center;           /*Damit der IE die Seite zentriert*/
}
#wrap {
width: 800px;
margin: 0 auto;
text-align: left;
}
#header {
float: left;
width: 800px;
height: 150px;
text-align: right;
border-top: 1px solid #666;
}
#navigation {
float: left;
width: 800px;
height: 35px;
border-bottom: 1px solid #666;
border-top: 1px solid #666;
}
#content {
float: left;
height: 600px;        /*Der Bereich ist leer*/
width: 599px;
border-right: 1px solid #666;
}
#sidebar {
float : left;
height: 600px;        /*Der Bereich ist leer*/
width: 200px;
top: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 20px;
}
p {
margin: 15px 20px;
}

Alle Voraussetzungen und damit die Grundlage für eine Suchmaschinen optimierte Webseite sind geschaffen. Nun können auch Sie zu einem Suchmaschinenoptimierer/in werden, steigern gleichzeitig den Mehrwert Ihrer Webseite und bereiten ihre Homepage schon optimal auf Ihre Leserschaft vor.
Auch das Design der Webseite können Sie mit CSS frei gestalten.
Im Vorherigen Kasten mit dem CSS – Code haben Sie schon ein paar Besonderheiten bemerkt. Diese Besonderheiten sind beim Webseiten Design und der Webseiten Optimierung besonders wichtig.
Warum und was es damit auf sich hat erfahren Sie auf der SeiteGrundlagen von Webseiten Design und Aufbau.



Tags: , , , , , ,