Webdesign-Tutorial, Hilfe zur Gestaltung der eigenen Homepage

Grundgerüst bauen und Inhalte in die onlinefähige Version einfügen

Jetzt bist du also soweit und möchtest dein Layout in eine echte Webseite verwandeln. Um die Homepage zu schreiben benötigst du einen Texteditor. Dieser kann ganz einfach sein, zum Beispiel der Windows Editor, allerdings ist hier z.B. der Texteditor Proton besser geeignet. Es gibt noch viele weitere Editoren, aber jeder hat so seinen Lieblingseditor und letztlich ist es egal welchen man benutzt, die Hauptsache ist, man kann mit ihm Code verfassen.

Aber auch professionelle Editoren wie Macromedia's (jetzt Adobe) Dreamweaver, der einen komfortablen WYSIWYG-Modus (What You See Is What You Get) bietet, können problemlos verwendet werden. Ein großer Vorteil von Dreamweaver zeigt sich im integrierten FTP-Programm, sodass "LIVE-Test" schnell und unkompliziert durchgeführt werden können. Das ständige Wechseln in ein extra FTP-Programm entfällt und beschleunigt so die Entwicklungsphase.

Das Prinzip beim Verwandeln des Grafiklayouts in eine internetfähige Version besteht im Wesentlichen darin die Grafik in einzelne Teile zu zerschneiden und in einer Tabelle wieder zusammenzufügen. So wurde es seit dem man immer mehr mit Grafiken arbeitet gemacht und Tabellen wurden somit von ihrem eigentlichen Sinn befreit. Tabellen wurden und werden heute noch zum größten Teil für das Zusammenhalten von Grafiken benutzt anstatt sie nur zur tabellarischen Auflistung von Daten zu verwenden.

Im Jahr 2005 hat allerdings ein revolutionärer Wandel in der Internetgestaltung eingesetzt. Es handelt sich dabei um die Rückbesinnung auf die in der Formatierungssprache HTML verfügbaren Elemente und die Verwendung von Cascading Style Sheets (CSS) um diese Elemente grafisch anzupassen. Da moderne Browser (IE >= 6, Firefox >= 1.5, Opera >= 9.x, etc.) CSS mittlerweile ganz gut interpretieren können, lässt sich damit sehr viel so formatieren, dass die Webseite auch in allen Browsern gleich - naja, sagen wir ähnlich - aussieht.

HTML bringt die Elemente <div>, <p>, <ul> , <ol> , <li> und <span> mit, die für die Webseitenentwicklung am wichtigsten sind. Durch diese Elemente kann vollständig auf Tabellen verzichtet werden, was eine erhebliche Einsparung an Quellcode bedeutet. Dieser wird somit wesentlich übersichtlicher, leichter und wird User mit langsamen Internetverbindungen sehr erfreuen. Außerdem fällt insgesamt somit auch weniger Traffic an, was bei großen Projekten mit vielen Besuchern einiges ausmachen kann.

Allerdings birgt CSS auch einen Nachteil, der aber auf die schlecht programmierte Interpretation von CSS-Code in Microsoft's Internet Explorer zurückzuführen ist. Der im Trend liegende Freeware-Browser Firefox interpretiert diesen Code nahezu perfekt und wesentlich logischer. Es kann also oft zu Anzeigeunterschieden in beiden Browsern kommen.

Genug vom allgemeinen Kram, fangen wir einfach mal an. In diesem Teil des Tutorials gehe ich wesentlich detailierter auf die Bedienung von Fireworks ein, da die Umsetzung dann leichter verstanden und das Prinzip schnell auf andere Grafikprogramme angewendet werden kann.

Du erinnerst dich bestimmt noch an mein Beispiellayout (Download (png) als .rar) aus dem Schritt 8. Dieses werde ich jetzt umsetzen, um dir die Vorgehensweise des aktuellen Schritts näher zu bringen.

Im Hintergrund der Seite verwende ich einen Farbverlauf in y-Richtung (vertikal, von oben nach unten), den ich in Fireworks als 1 Pixel breite Grafik im JPG-Format abspeichere.

Zur Abbildung:

In Fireworks erstellst du mit dem Slice-Werkzeug einen 1 Pixel breiten und dem Verlauf entsprechend hohen Bereich, dessen Größe auch im Eigenschaften-Fenster (Strg + F3) eingegeben werden kann. Im Optimieren-Fenster (F6) sollte JPEG und Qualität 100 ausgewählt werden. Um das einzelne Slice-Element zu exportieren einmal mit der rechten Maustaste darauf klicken und "Ausgewähltes Segment exportieren" wählen. Speichere alle Grafiken, die für das Layout notwendig sind im Ordner img.

Das GIF-Format kann maximal 256 Farben speichern, weswegen der Verlauf wahrscheinlich im GIF Format nicht fließend dargestellt werden könnte. Daher verwendest du dafür am besten das Dateiformat JPEG.

Die Farbe (HEX-Code: #009966), die in der Grafik im letzten Pixel verwendet wird, soll im gesamten HTML-Dokument unsere Hintergrundfarbe werden. Um die Hintergrundgrafik und Farbe zu definieren bedienen wir uns dem BODY-Element und weisem diesem in einer neuen CSS-Datei entsprechende Formatierungen zu. Du erstellst in einer neuen Textdatei einfach folgenden Code:

body{
background-color: #096;
background-image: url(../img/hintergrund.jpg);
background-repeat: repeat-x;
}

Diesen Code speicherst du als "screen.css" im Ordner css ab. Als nächstes erstellst du die erste HTML-Datei mit dem namen index.html. In dieser steht folgender Code:

Kurze Eläuterung: Das Grundgerüst <html> ... </html> einer HTML-Datei solltest du kennen. Die XML-Angabe hat etwas mit dem verwendeten Zeichensatz zu tun. (Mehr darüber erfahren). Der Doctype ist für die Browser sehr wichtig, damit sie wissen in welchem Modus sie deine Seite interpretieren müssen. Für den Anfang empfehle ich die Verwendung von Transitional, da im Strict Modus auf viele Pingeligkeiten geachtet werden muss. Die genauen Unterschiede sind auf der Seite von Carsten Protsch sehr gut erklärt. Danke Carsten!

Damit die Hintergrundeinstellungen, die du in der CSS-Datei definiert hast auch verwendet werden, musst du die CSS-Datei mit der HTML-Datei verknüpfen. Das geht mit folgendem Code, der innerhalb des <head> ... </head>-Teils untergebracht werden muss: <link href="css/screen.css" rel="stylesheet" type="text/css" /> . Wenn du die index.html jetzt im Browser aufrufst, kannst du dir das Ergebnis anschauen.

Wenn du Änderungen an den Dateien vornimmst und diese speicherst, reicht einmal das Drücken von F5 um die Ansicht zu aktualisieren. Es sollte jetzt so (Klick!) aussehen.

Du solltest der Seite schon jetzt einen aussagekräftigen Titel verpassen, damit später nicht ausversehen wegen einer vergessenen Änderung diese Peinlichkeit (gar kein Titel oder Unbenanntes Dokument) veröffentlicht wird.

Auch die Tags für META-Angaben sollten nun schon mit eingebaut werden, damit du sie nicht vergisst. Folgende drei META-Angaben von einst doch recht vielen sind noch sinnvoll.

Die Inhalte von Description und Keywords brauchst du nicht eintragen, da sie am Ende auf jeder Seite einzelnd angepasst werden. Die übrig bleibende Angabe für die Suchmaschinenrobots bleibt jedoch immer gleich, allerdings ist nicht ganz klar, ob sie noch relevant ist. Entfernen kann man sie irgendwann immer noch.

Die HTML-Datei sollte jetzt so aussehen:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="robots" content="index,follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Feng Shui, Massagen in Bielefeld - Prof. Dr. med Musterarzt</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Jetzt geht es darum in der Vorlage zu erkennen wie man die Webseite mit Hilfe von Rechtecken aufbauen kann. Man muss sich bewusst sein, dass Grafiken immer nur rechteckig sein können, ebenso wie div-Container, p-Asätze, etc. Außerdem musst du realisieren welche Teile sich ohne Grafiken, also nur mit DIV-Containern bzw. Abständen von Div-Containern und eventuell bestimmten Hintergrundfarben realisieren lassen.

Beispiel: Hätte man einen Bereich (Box oder Ähnliches) in dem ein Farbverlauf zu sehen ist wird nicht der gesamte Verlauf als Grafik gespeichert, sondern es wird ein DIV-Container mit der gewünschten Größe versehen und ein Hintergrundbild für diesen Container definiert, wie beim Seitenhintergrund. Dazu benötigt man dann eine wesentlich kleinere Grafikdatei mit dem Verlauf, die nämlich idealerweise 1 Pixel breit ist.

Zur Abbildung (~):

Meine Arztpraxis-Seite würde ich jetzt z.B. in die in der linken Grafik gezeigten Bereiche aufteilen. Wenn es dir hilft, kannst du dir dein Layout ja ausdrucken und mit einem Lineal in sinnvolle Bereiche aufteilen, oder dies auf einer neuen Skizze tun.

Bevor du mit Grafiken hantieren kannst, muss erst einmal das "DIV-Grundgerüst" gebaut werden. Dabei solltest du versuchen so wenige Container wie möglich zu benutzen. Die Positionierung und Formatierung der Container erfolgt komplett durch Angaben im CSS-Code. Die Verknüpfung der Angaben mit den einzelnen Boxen erfolgt entweder mit Typ-, class- oder ID-Selektoren. Der Unterschied ist einfach: Typen sind direkt die HTML-Elemente, wie z.B. body (Diesem Typ haben wir bereits einige Eigenschaften zugewiesen), h1 (Überschrift) oder p (Absatz). Class-Selektoren bekommen immer einen frei wählbaren Namen und fangen immer mit einem "." an (z.B. .roter_text{ color: #FF0000; }). Id-Selektoren hingegen beginnen mit einem "#" (z.B. #fetter_text{ font-weight: bold; }).

Class-Selektoren dürfen im Gegensatz zu Id-Selektoren innerhalb eines HTML-Dokuments mehrmals auf Elemente angwendet werden.

Beispiel:

... ist erlaubt ...

<div id="fetter_text">ich bin fett</div>
<p id="fetter_text">ja, ich auch, aber eigentlich ist es falsch, nur der browser sagt nix!</p>

... ist hingegen nicht erlaubt.

Die Container aus denen das Grundgerüst entsteht können also Id-Selektoren bekommen, da die Formatierung in der Regel nur ein einziges Mal angewendet wird. Sollten allerdings, bedingt durch deinen Seitenaufbau, zwei oder mehr Container genau das gleiche Layout haben, musst du für diese natürlich Class-Selektoren verwenden.

Aus dem Beispiel kannst du auch schon die Attribute erkennen, um einem Div-Container oder auch jedem anderen beliebigen HTML-Element solche CSS-Eigenschaften zuzuweisen. Ein Class-Selektor wird einem HTML-Element so zugewiesen: <p class="test">, ein Id-Selektor so: <div id="test2">. Natürlich kann man auch beides miteinander kombinieren. Achtung: Doppelte Eigenschaften werden dabei vom zuletzt angewandten CSS-Code überschrieben.

Tipp! Alles Weitere über CSS: css4you.de

Bevor du mit dem Formatieren der DIVs beginnen kannst, gilt es noch einen sehr wesentlichen Gesichtspunkt zu diskutieren: Soll das layout statisch (pixelgenau) oder flexibel (an die Bildschirmauflösung anpassend) sein? Hier einmal tabellarisch die Vor- und Nachteile.

Statisch (pixelgenau)	Flexibel (an die Auflösung anpassend)
+ jedes denkbare Layout umsetzbar	- Layout muss bestimmte Voraussetzungen erfüllen (kachelbare Seitenelement, um die Breite flexibel gestalten zu können)
+ / - bei sehr hohen Auflösungen viel ungenutzter Weißraum (Freiraum), jedoch behalten die Textzeilen immer eine angenehm lesbare Breite	+ / - Inhalt passt sich in Breite der Auflösung an, sodass das Browserfenster ausgenutzt wird, Text kann allerdings unangenehm lesbare Breite annehmen
- die Container haben eine feste Größe und verändern diese beim Verstellen der Schriftgröße nicht	+ Bei Zoom der Schriftgröße verändert sich auch die Größe der Seitenelemente, sodass sich die Seite "insgesamt" vergrößert, nur Grafiken spielen da nicht mit (Super Beispiel: www.tagesschau.de)

Meine Meinung vorab: 2:2 für das statische Layout, das "zoombar" ist. Wie man an tagesschau.de sehen kann, ist dies auch möglich. Das ist eine Seite, die standardmäßig eine bestimmte Breite hat, aber dennoch vollkommen "zoombar" sind.

Es kursieren zu diesem Thema viele Meinungen im Internet, letztendlich komme ich zu dem Schluss, dass die Entscheidung stark von dem Inhalt der Seite und eben dem gewählten Layout abhängt. Fest steht, dass ein "zoombares" Layout viel Kenntnisse in CSS voraussetzt und oft sehr kniffelig wird.

Als Beispiel für eine gute und sinnvolle Anwendung für ein komplett flexibles Layout verweise ich auf Wikipedia.org, allerdings dürfte der Artikeltext bei Auflösungen größer als 1152x864 ziemlich breit und so das Lesen, durch einen schwierigen Zeilenumbruch, erschwert werden.

Nichts desto trotz muss man eingestehen, dass pixelgenaue Layouts schon ein Stück einfacher zu realisieren sind, zumindest habe ich so die Erfahrung gemacht. Daher ist dies für Einsteiger erst einmal die beste Wahl. Webdesigner, die beides perfekt beherrschen sind vielleicht anderer Meinung. Vielleicht kann man folgendes als eine Art kleine Faustregel betrachten:

Grafiklastiges Layout und wenig Inhalt » pixelgenaue Umsetzung
leichtes Layout ohne Schnick-Schnack / viel Inhalt (Text) » flexible Umsetzung

Fangen wir an! Ich werde diese Seite als fixes / pixelgenaues Layout umsetzen, da es nicht viel Inhalt ist und wir doch recht viele Grafikspielereien dabei haben. Abbilung (~) zeigt die Einteilung in günstige Bereiche, die ich jetzt gerne in der HTML-Datei als DIV-Container darstellen möchte. Mein HTML-Code sieht also folgendermaßen aus:

... <body>
<div id="wrapper">
<div id="header">a</div>
<div id="navi">b</div>
<div id="content">c</div>
<div id="footer" class="clear">d</div>
<br class="clear" />
</div>
</body> ...

Jedes DIV hat einen sinnvoll benannten Id-Selektor, damit man später in der CSS genau weiß, um welches Element es sich handelt. Diese Datei wird nämlich schnell sehr unübersichtlich. Der dazugehörioge CSS-Code:

...
div#wrapper{
width: 740px;
margin: 15px auto;
text-align: left;
}
div#header{
background-color: #F00;
margin: 15px 0 0 0;
width: 740px;
}
div#navi{
width: 140px;
float: left;
background-color: #00F;
}
div#content{
width: 600px;
float: right;
background-color: #FFF;
}
div#footer{
width: 600px;
float: right;
background-color: #FF0;
}
.clear{
clear: both;
}

In der HTML-Datei bekommen diese Boxen erstmal nur einen Buchstaben als Inhalt, da sie ohne Inhalt gar nicht im Browser angezeigt werden. Ich verpasse den Bereichen zu Testzwecken knallige verschiedene Hintergrundfarben, um ihre Größe und Position zu überprüfen. Zu dem bekommen die Boxen weitere Anweisungen, um sie richtig zu positionieren (z.B. margin: 15px auto;, um dem Wrapper einen Rand von 15px nach oben und unten zu geben).

Für die Positionierung der Navigation und des Contentbereichs wird der Befehl float verwendet, welcher bewirkt, dass alle folgenden Elemente das mit der Eigenschaft definierten Element, links (left) oder rechts (right) umfließen. Diese Anweisung ist elementar, um DIV-Container und andere Elemente (außer positionierte) nebeneinander platzieren zu können.

Was ist dieser mysteriöse Wrapper? Dieser DIV-Container ist wichtig, um die komplette Seite zentrieren zu können. In ihn werden jegliche andere HTML-Objekte geschrieben, die beim Bau der Seite eine Rolle spielen. Der Wrapper bekommt die Breite, die die ganze Seite haben soll und die Eigenschaft margin: 15px auto; damit der Browser je nach Bildschirmauflösung den Abstand nach links und rechts automatisch berechnet. Der IE akzeptiert es auch ohne, aber der Firefox benötigt diese Angabe zur korrekten Darstellung. Um das Zentrieren zu realisieren muss die Textausrichtung innerhalb des BODY-Elements zentriert werden body{ ... text-align: center; ... }. Wichtig: CSS-Code von Elternelementen (HTML » BODY » DIV » ...) wird an untergeordnete Kindelemente vererbt, so dass die Eigenschaft zum Zentrieren im Wrapper wieder auf left gestellt werden muss.

Nicht vergessen: Wer floatet, muss auch clearen! In unserem Fall wurde die Navigation, der Inhaltsbereich und der Footer mit der float-Eigenschaft versehen. Diese muss genau dann wieder aufgehoben werden, wenn ein Element nicht in diesen Fluss mit eingehen soll. Wäre das z.B. ein weiterer DIV-Container, bekäme dieser folgende Anweisung: <div class="clear">noch mehr inhalt</div. In unserem Fall folgt nach dem Footer allerdings kein weiteres Element mehr, also muss das Floating mit dem "Pseudo-Break" <br class="clear" /> "gelöscht" werden.

Unsere kompletten Codes sehen jetzt so aus.

HTML-Dokument:

CSS-Dokument:

body{
background-color: #096;
background-image: url(../img/hintergrund.jpg);
background-repeat: repeat-x;
margin: 0;
text-align: center;
}
div#wrapper{
width: 740px;
margin: 0 auto;
text-align: left;
}
div#header{
background-color: #F00;
margin: 15px 0 0 0;
width: 740px;
}
div#navi{
width: 140px;
float: left;
background-color: #00F;
}
div#content{
width: 600px;
float: right;
background-color: #FFF;
}
div#footer{
width: 600px;
float: right;
background-color: #FF0;
}
.clear{
clear: both;
}

Und unsere Seite sieht folgendermaßen (Klick!) aus.

Jetzt haben wir die Container so angeordnet, wie wir das gerne hätten. Du kannst nun die DIV-Container mit Inhalt füllen, z.B. die Navigation, den Header (Kopfzeile) und den Footer (Fusszeile). Der Inhaltsbereich ist noch nicht ganz so wichtig, aber in ihm sollte schon mal testweise eine <h1>Überschrift</h1> und etwas <p>Text</p> stehen.

Tipp! Textvorlagen zu Layoutzwecken gibt's bei Blindtexte.de

An diesem Punkt benötigen wir einige Grafiken, um unser Layout zu komplettieren. Dazu kannst du in den meisten Grafikprogrammen (z.B. Fireworks, Adobe Image Ready / Adobe Photoshop oder Photoimpact) ein Slice-Werkzeug benutzen, um diese Bereiche mit farbig-transparenten Rechtecken zu "markieren". Diese kannst du dann einzelnd "dateigrößenmäßig" optimieren und im geeignetsten Format (jpg oder gif) exportieren. Ansonsten kann man einfach die benötigten Teile aus dem Layout ausschneiden und als einzelne Grafik optimieren und speichern. Das sollte mit jedem Grafikprogramm möglich sein.

Zur Abbildung:

Hier ein Ausschnitt aus Fireworks, der die markierten Bereiche zeigt, die ich als einzelne Grafiken exportieren möchte. Im Header habe ich folgendes vor: Im Layout hatte ich im Kopfbereich noch eine "Überschrift", die ich nun aber ausgeblendet habe, da diese Überschrift als HTML-Text eingefügt werden soll und nicht als Bild (das ist besser für die Suchmaschinen). Also werde ich die rechte große Grafik in einem DIV als Hintergrund verwenden. Das Logo soll aber anklickbar sein, weshalb es einzelnd gespeichert und als "echte Grafik" eingebaut werden muss.

Im <div id="header>a</div> werden wir nun anstatt dem "a" zwei neue DIV-Elemente als Inhalt einfügen, die wiederum per CSS bestimmte Eigenschaften bekommen. Das linke DIV-Element beinhaltet zudem die Grafik mit dem verlinkten Logo und das rechte den Titel-Text aus der Vorlage, die ich mit <p> bzw. <span> ausrichte, bzw. formatiere.

HTML-Code:

... <div id="header">
<div id="title"><p class="title_ausrichtung"><span class="title_praxis">Praxis Prof. Dr. med Musterarzt</span><br /><span class="title_keywords">Feng Shui · Massagen · Akupunktur</span></p></div>
<div id="logo"><a href="index.html"><img src="img/logo.jpg" alt="Praxis Prof. Dr. med Musterarzt" /></a></div>
</div> ...

CSS-Code:

...
div#title{
background: url(../img/title_hg.jpg) no-repeat;
float: right;
width: 600px;
height: 130px;
}
div#logo{
float: right;
margin: 0 0 0 50px;
}
a img{
border: 0;
}
.title_ausrichtung{
margin: 25px 0 0 40px;
}
.title_praxis{
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
color: #99B3B3;
}
.title_keywords{
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 120%;
letter-spacing: 2px;
color: #FFF;
}

Als nächstes können wir die Navigation, die aus einer Liste <ul></ul> besteht, einbauen. Die Links der Navigation werden jeweils in einem Listenelement <li></li> untergebracht. Der Liste wird die Klasse navi zugewiesen. Die Navigation lässt sich allein mit folgenden CSS-Befehlen an unsere Layoutwünsche anpassen.

...
ul.navi{
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 90%;
line-height: 180%;
list-style-type: none;
margin: 0 25px 0 0;
padding: 0;
text-align: right;
}
a.navi{
color: #FFF;
text-decoration: none;
padding: 0 25px 0 0;
}
a.navi:hover{
text-decoration: underline;
background: url(../img/navi_dot_hover.gif) no-repeat right;
}
a.navi_aktiv{
color: #F60;
text-decoration: none;
padding: 0 25px 0 0;
font-weight: bold;
background: url(../img/navi_dot_aktiv.gif) no-repeat right;
}
a.navi_aktiv:hover{
text-decoration: underline;
}

Hier wurde in der CSS der Name (navi) der Klasse mit dem Element verbunden auf das diese angewendet wird. Das heißt, alles was für ul.navi definiert wird, wird auch nur auf das Element <ul></ul> dem die Klasse navi zugewisen wurde angewendet. Zum Beispiel würde <p class="navi"></p> den p-Absatz in keinster Weise verändern, da es keine passende Klasse navi gibt. Deshalb ist es möglich die Klassen für die Liste und die Links <a></a> beide navi zu nennen. Das ganze wird klar, wenn man den HTML-Code sieht:

...
<div id="navi">
<ul class="navi">
<li><a href="#" class="navi_aktiv">Startseite</a></li>
<li><a href="#" class="navi">Feng Shui</a></li>
<li><a href="#" class="navi">Massage</a></li>
<li><a href="#" class="navi">Akupunktur</a></li>
<li><a href="#" class="navi">Praxis</a></li>
<li><a href="#" class="navi">Kontakt</a></li>
<li><a href="#" class="navi">Impressum</a></li>
</ul>
</div>

Im Footer müssen wir wie folgt vorgehen, um die geplanten Inhalte unterzubringen:

...
<div id="footer">
<div id="footer_ausrichtung">
<span class="links">Praxis Dr. med Musterarzt<br />Doktorenstrasse 123<br />12345 Musterstadt</span>
<span class="rechts ta_r">Telefon: 1234 / 56789<br />Telefax: 1234 / 98765<br />E-Mail: info@praxisxyz.de</span>
<br class="clear" />
</div>
</div>

Der CSS-Code für diese Objekte ist folgender:

...
div#footer_ausrichtung{
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 80%;
color: #777;
border-top: 1px dashed #F60;
margin: 0 30px 30px 30px;
padding-top: 15px;
}
.links{
float: left;
}
.rechts{
float: right;
}
.ta_r{
text-align: right;
}

Die Klassen links und rechts sorgen einfach für die korrekte Ausrichtung der beiden span-Elemente mit Hilfe von float. Deswegen muss auch wieder mit einem Break "gecleart" werden. Die Klasse ta_r sorgt nur für die rechtsbündige Ausrichtung des Textes in diesem SPAN. Das umschließende DIV footer_ausrichtung sorgt für die richtigen Abstände, die der Footer zu allen Seiten hat und für die gestrichelte Trennlinie (border-top).

Am Ende sieht das Ganze so (Klick!) aus.

Die kompletten Codes möchte ich hier nicht mehr angeben, da sie schon so sehr gewachsen sind, dass es einfach nur Unübersichtlich würde. Das aktuelle Grundgerüst kannst du dir hier herunterladen (.rar-Archiv) und dann im Texteditor in die Quelldateien schauen.

Bis hierhin haben wir uns eine Vorlage gebaut, die wir in allen Browsern testen und optimieren können, sodass Sie überall gleich aussieht. Außerdem solltest du dich jetzt als letzten Schritt davon überzeugen, dass deine Seite validen Code besitzt (http://www.validome.org). Meine Beispielseite erfüllt alle diese Kriterien. Also können wir zum nächsten Schritt übergehen.

Würden wir jetzt anfangen Unterseiten zu erstellen liegt es nahe die Datei index.html zu kopieren, um zu benennen und im Contentbereich einen anderen Inhalt rein zu schreiben. Das kann man dann mit allen Unterseiten genauso machen. Was ist aber, wenn ein neuer Menüpunkt in die Navigation eingefügt werden soll? Dann müsstest du in jeder Datei deines Projekts die Navigation ändern. Das macht keinen Spaß und ist mal so gar nicht effektiv.

Aus diesem Grund empfehle ich euch ab diesem Arbeitsschritt die Möglichkeit der serverseitigen Programmiersprache PHP, Dateien implementieren zu können, auf jeden Fall zu nutzen. Welche Bereiche müssen ausgelagert werden? Zum einen können wir den Header in eine neue Datei auslagern, außerdem die Navigation und den Footer, da sich eigentlich immer nur im Contentbereich der Inhalt ändert. Aufgepasst: Der Titel der Seite und die beiden META-Tags keywords und description sollten für die Suchmaschinen auf jeder Seite an den Inhalt angepasst werden. Daher müssen diese auch in jeder Datei vorkommen.

Der HTML-Code lässt sich also wie folgt in "feste" und "variable" Bereiche aufteilen.

--- BEREICH 1 START ---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="robots" content="index,follow" />
--- BEREICH 1 ENDE ---

--- BEREICH 2 START ---
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="title"><p class="title_ausrichtung"><span class="title_praxis">Praxis Prof. Dr. med Musterarzt</span><br /><span class="title_keywords">Feng Shui · Massagen · Akupunktur</span></p></div>
<div id="logo"><a href="index.html"><img src="img/logo.jpg" alt="Praxis Prof. Dr. med Musterarzt" /></a></div>
</div>
<div id="navi">
<ul class="navi">
<li><a href="#" class="navi_aktiv">Startseite</a></li>
<li><a href="#" class="navi">Feng Shui</a></li>
<li><a href="#" class="navi">Massage</a></li>
<li><a href="#" class="navi">Akupunktur</a></li>
<li><a href="#" class="navi">Praxis</a></li>
<li><a href="#" class="navi">Kontakt</a></li>
<li><a href="#" class="navi">Impressum</a></li>
</ul>
</div>
<div id="content">
--- BEREICH 2 ENDE ---

<h1>Herzlich willkommen!</h1><p>Differenter. Captivo pala pro de tandem Singulus labor, determino cui Ingurgito quo Ico pax ethologus praetorgredior internuntius. Ops foveo Huius dux respublica his animadverto dolus imperterritus. Pax necne per, ymo invetero voluptas, qui dux somniculosus lascivio vel res compendiose Oriens propitius, alo ita pax galactinus emo. Lacer hos Immanitas intervigilium, abeo sub edo beo for lea per di.</p>

--- BEREICH 3 START ---</div>
<div id="footer">
<div id="footer_ausrichtung">
<span class="links">Praxis Dr. med Musterarzt<br />Doktorenstrasse 123<br />12345 Musterstadt</span>
<span class="rechts ta_r">Telefon: 1234 / 56789<br />Telefax: 1234 / 98765<br />E-Mail: info@praxisxyz.de</span>
<br class="clear" />
</div>
</div>
<br class="clear" />
</div>
</body>
</html>
--- BEREICH 3 ENDE ---

Dabei entstehen 3 Blöcke mit Code, die jetzt in 3 verschiedenen Dateien gespeichert werden. Für den ersten Bereich könnte man den Dateinamen inc.doctype.php wählen, für den Zweiten inc.header.php (hier drin befindet sich dann auch die Navigation) und für den Letzten inc.footer.php. Das "inc" in jedem Dateinamen ist kein Muss für den PHP-Befehl, sondern einfach eine Möglichkeit alle includeten Dateien im Homepage-Verzeichnis zusammenzuhalten um einen schnellen Überblick zu bekommen.

Wir benötigen also jetzt den PHP-Befehl zum inkludieren der ausgelagerten Inhalte: <? include("inc.header.php"); ?> Du brauchst keinerlei PHP-Kenntnisse zu besitzen, denn das ist der einzige Befehl, den du benötigst. <? leitet einen PHP-Code-Teil ein und mit ?> wird dieser wieder beendet. So kann der Server an dieser Stelle den PHP-Code ausführen und gibt nur das aus, was der PHP-Code "produziert". Der Code kann also nicht von Surfern der Seite gelesen werden. Die Funktion include macht nichts anderes als den Inhalt der in " angegebenen Datei an der Stelle auszugeben an der der PHP-Befehl steht. Das heißt also, dass die Inhalte der Seitenbauteile in einzelne Dateien ausgelagert wird. Konkret sieht das dann so aus:

<? include("inc.doctype.php"); ?>
<meta name="description" content="Feng Shui, Massagen und Akupunktur in Bielefeld bei Prof. Dr. med Musterarzt" />
<meta name="keywords" content="feng shui,massage,akupunktur,bielefeld,nrw,dr.,musterarzt" />
<title>Feng Shui, Massagen in Bielefeld - Prof. Dr. med Musterarzt</title>
<? include("inc.header.php"); ?>
<h1>Herzlich willkommen!</h1>
<p>Differenter. Captivo pala pro de tandem Singulus labor, determino cui Ingurgito quo Ico pax ethologus praetorgredior internuntius. Ops foveo Huius dux respublica his animadverto dolus imperterritus. Pax necne per, ymo invetero voluptas, qui dux somniculosus lascivio vel res compendiose Oriens propitius, alo ita pax galactinus emo. Lacer hos Immanitas intervigilium, abeo sub edo beo for lea per di.</p>
<? include("inc.footer.php"); ?>

Wichtig: Ab jetzt sind also alle Seiten des Projekts PHP-Dateien mit der Endung .php, auch die index.html wird zur index.php.

Jetzt wäre das Hinzufügen eines neuen Menüpunkts unproblematisch, da nur die Seite inc.header.php bearbeitet werden muss und nicht jede zum Projekt gehörende Seite.

Noch eine wichtige Sache zur Navigation: Ich habe in der fertigen Version etwas PHP-Code für das Realisieren des Aktivzustandes der Navigationslinks verwendet. Das kann man auch komplett weglassen und den Aktiv-Zustand gar nicht mit einbauen, aber ich finde es erhöht die Usability enorm. Und der PHP-Code ist mit den Kommentaren eigentlich auch einfach zu verstehen.

Nun kannst du die Datei index.php beliebig oft kopieren und mit neuen Inhalten füllen. Die META-Tags description und keywords ebenso wie den Titel der Seite solltest du auf jeden Fall immer an den Inhalt anpassen.

Die fertiggestellte Testseite sieht so aus (Klick!).

Wie ich spezielle Dinge an meiner Beispielseite gemacht habe, könnt ihr durch Ansehen der Quelldateien selbst herausfinden. Zum Beispiel könnt ihr dort nachschauen, wie man so eine Aufteilung auf der Startseite in einen Text- und News-Bereich hinbekommt. Die Ansätze dazu habe ich in diesem Abschnitt beschrieben, aber zum besseren Verständnis kannst du dir ja den Aufbau im Content-Bereich der index.php anschauen und die dort gewählten Selektoren in der CSS-Datei "nachschlagen".

Download der Beispieldateien (.rar-Archiv)

Ich hoffe, dass dieser Teil des Tutorials auf den du wirklich sehr lange warten musstest dir einleuchtet und etwas mehr Klarheit in deiner Webdesign-Erfahrung gebracht hat. Wenn man Spaß daran hat immer weiter zu lernen, um seine Internetseite immer wieder umzukrempeln ist das der beste Weg zu einer soliden Erfahrung im Bereich Webdesign.

Weiter mit "Homepage Promotion "

Partnerseiten

Webdesign

Geizkragen