Webdesign -
Anleitung zur Homepagegestaltung

Die erste eigene Homepage - wie fängt man an? Diese Seite hier soll helfen, den Einstieg zu erleichtern. Anhand einer Beispiel-Webseite, die man downloaden und abändern kann, werden die Grundlagen von HTML und CSS vermittelt.

Wer mehr wissen will: Auf der Seite Webdesign-Fragen werden einige Themen noch ausführlicher behandelt.

Inhalte und Struktur der Webseite festlegen

Zunächst macht man sich Gedanken darüber, wen oder was man mit der Webseite erreichen erreichen möchte. Welche Informationen, Bilder oder Downloads hat man anzubieten?

Im nächsten Schritt legt man die Seitenstruktur fest. Wieviele einzelne Seiten benötigt man, um alle Inhalte übersichtlich unterzubringen? Am Anfang sollte man sich auf wenige Seiten beschränken, erfahrungsgemäß "wächst" eine Internetseite mit der Zeit "von ganz allein". Weiterhin sollte man auf jeden Fall ein Impressum oder zumindest eine Seite, die den Kontakt zum Webmaster ermöglicht, einplanen.

Layout

Nun kann man sich grundsätzliche Gedanken zum Webdesign bzw. Layout machen. Wer viel im Internet surft hat vermutlich schon relativ klare Vorstellungen von dem, was ihm gefällt und was nicht. Wer weniger Erfahrung auf diesem Gebiet hat, sollte nach Anregungen suchen und sich andere Webseiten ansehen. Wenn man eigene Vorlieben im Auge behält, lassen sich die folgenden Fragen sicher leicht beantworten:

Über Details wie Farbgestaltung, Linien, Schriftart und -größe usw. kann man sich später Gedanken machen. Wenn man Inhalt und Layout einer Seite per CSS trennt, kann man diese Feinheiten ganz zum Schluss immer noch sehr leicht einstellen bzw. ändern.

HTML-Editor

Um die Seiten schreiben zu können benötigt man nun noch einen einfachen Texteditor, wie er auf den meisten Rechnern bereits vorhanden ist. Wer es etwas komfortabler möchte, kann sich aber auch einen HTML-Editor, wie zum Beispiel "Phase 5", downloaden. Eine ganze Liste mit HTML-Editoren findet man z.B. bei SELFHTML.

Zum Seitenanfang

Grundsätzliches - Aufbau einer Webseite

Um Anfängern den Einstieg zu erleichtern, beschränke ich mich hier ganz bewusst auf das Wesentliche zum Thema Webdesign. Wer mehr wissen möchte, dem empfehle ich, mit Hilfe von SELFHTML zu lernen.

Jede gewöhnliche HTML-Datei besteht aus 3 Teilen:

1. Doctype: Dieser gibt an, in welcher HTML-Version die Seite geschrieben ist. Diese Angabe wird vom Browser benötigt, um die Seite korrekt anzeigen zu können. Der Doctype wird ganz oben auf der Seite angegeben.
Merke: Direkt nach dem Doctype notiert man: <html>

2. Header: Hier stehen Angaben zum Seiten-Titel, Metatags (Angaben für Suchmaschinen usw.) und der Verweis zur verwendeten (externen) CSS-Datei.
Merke: Diese Angaben macht man zwischen <head> und </head>.

3. Body: Hier steht der eigentliche Inhalt der Seite: Text, Bilder, Links usw.
Merke: Der Seiteninhalt steht zwischen <body> und </body>.

Am Ende der Seite notiert man: </html>

Zum Seitenanfang

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

Seiten-Titel
Metatags
Verweis zur CSS-Datei

</head>
<body>

Hier steht der Inhalt der Seite

</body>
</html>


Natürlich gibt es viele verschiedene Doctypes, jede Menge Metatags usw. - doch darauf möchte ich hier nicht weiter eingehen. Effektiver ist es, am konkreten Beispiel zu lernen. Nebenbei kann es auch hilfreich sein, sich den Quelltext anderer Webseiten anzusehen (rechte Maustaste - Quelltext anzeigen).

Body-Bereich in einer HTML-Datei

Im Body einer HTML-Datei wird unter anderem festgelegt, was eine Überschrift, ein Absatz oder ein Link ist. Die einzelnen Bereiche werden mit sogenannten Tags markiert. Die meisten HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag ausgezeichnet. Tags notiert man in spitzen Klammern. Ausführliche Angaben dazu findet man bei SELFHTML.

Zum Seitenanfang

Die wichtigsten Auszeichnungen
(ausreichend für eine einfache Seite) sind:

Zum Seitenanfang

Lernen am konkreten Beispiel

Beispiel: Rätselmacher XYZ möchte anderen Rätslern ein Online-Rätsel zur Verfügung stellen. Das Rätsel soll Aenigma heißen. Er hat Text und Bilder für 5 Fragen vorbereitet, braucht also 5 Unterseiten. Außerdem benötigt er eine Startseite, wo er allgemeine Angaben zum Rätsel machen und seine Kontaktadresse angeben kann. Insgesamt benötigt Rätselmacher XYZ also 6 HTML-Seiten und eine CSS-Datei, um das Layout zu gestalten.

Zunächst erstellt man eine Seite, die dann als Vorlage für alle weiteren Seiten fungiert. Doctype und alle Angaben im Header sowie die Navigation im Body bleiben in allen Unterseiten gleich, lediglich der Titel und der Dateiname jeder Seite muss angepasst werden. Eine Ausnahme bildet die CSS-Datei, die nicht wie eine HTML-Datei aufgebaut ist. Sie muss nur einmal erstellt werden und steuert das Layout aller Seiten.

Beispielseite Wie so etwas aussehen könnte, zeigt dieses Beispiel mit der dazugehörigen CSS-Datei.

Das Designbeispiel hat folgenden Aufbau:

Zentriert mit einem seitlichen Rand von jeweils 100 Pixeln, horizontale Navigation oben, Kopf- und Fußzeile.

Zum Seitenanfang

Beispiel-Webseite herunterladen und den eigenen Wünschen anpassen

Download: beispiel.zip (15 KB)

Bevor man an den heruntergeladenen Dateien etwas ändert, sollte man sich eine Kopie anlegen. Nun öffnet man die Datei "index.html" und kann dort die unten genannten Änderungen vornehmen. Diese geänderte Datei dient dann als Vorlage für alle weiteren Seiten. Die Dateien "frage1.html" usw. habe ich nur der besseren Übersicht wegen angelegt. Mit ihrer Hilfe kann man z.B. sehen, wie die Verlinkung der Navigation funktioniert.

Änderungen im Head-Bereich:

Änderungen im Body-Bereich:

In dem Beispiel habe ich verschiedene Bereiche mit <div>-Tags angelegt: Kopfzeile, Navigation, Inhalt und Fußzeile. Man benötigt diese Bereiche, wenn man mit externen CSS arbeitet, siehe nächstes Kapitel.

Zum Seitenanfang

Änderungen in der CSS-Datei:

In der CSS-Datei kann man Farben, Schriftgrößen und die Darstellung von Links usw. ändern. Größenangaben sind in meinem Beispiel in px (Pixel) angegeben, Farben bezeichnet man mit Nummern, #FF0000 steht beispielsweise für die Farbe rot. Beachte die verschiedenen Bereiche wie Kopfzeile, Navigation, Inhalt und Fußzeile. Eine ausführliche Beschreibung dazu findet man bei SELFHTML.

Die wichtigsten Angaben sind:

Merke: Bei manchen Werten (border, padding, margin) kann zusätzlich noch nach -top (oben) / -right (rechts) / -bottom (unten) / -left (links) unterschieden werden.
Man kann dies auch in verkürzter Schreibweise darstellen:
"margin:20px 5px 0 5px" bedeutet "oben 20 Pixel, rechts 5 Pixel, unten 0 Pixel und links 5 Pixel.
Die Reihenfolge ist immer: oben - rechts - unten - links

Zum Seitenanfang

Links einfügen

Zum Schluss kann man noch ein paar Links einfügen. Viele Webmaster bauen an passenden Stellen im Text Verweise ein oder stellen eine Seite mit Surftipps zusammen. Links sind wichtig, um von Suchmaschinen gefunden zu werden. Besonders wichtig sind Verweise auf die eigene Seite - aber dazu später mehr.

Für mehr Übersicht: das Favicon

Favicons sind die kleinen Grafiken, die man vor manchen Webadressen in der Adresszeile des Browsers oder vor den auf dem PC abgelegten Lesezeichen (auch Favoriten oder Bookmarks genannt) sieht. Wer eine große Favoritensammlung hat oder mit Hilfe von Tabs surft, weiß diese Bildchen sehr zu schätzen - man findet einfach schneller, was man sucht. Die Erstellung und der "Einbau" von Favicons ist denkbar einfach, eine Anleitung bietet die Seite SELFHTML.


Das hört sich vielleicht alles sehr kompliziert an, ist es aber nicht. Probieren Sie es einfach mal aus! Weitere Fragen beantworte ich gern per Mail.

Zum Seitenanfang



Wie die Homepage ins Netz kommt

Wenn die neue Webseite fertig ist, sollte man zunächst noch überpüfen, ob alle Links funktionieren und alles richtig angezeigt wird. Dann testet man mit Hilfe des Validators, ob der Code gültig ist. Falls der Validator noch Fehler anzeigt, kann man diese meist leicht korrigieren.

Um die Seiten online stellen zu können, benötigt man Platz (Webspace) auf einem Webserver. Manchmal verfügt man schon über ein paar MB Webspace über den eigenen Internetzugang, am besten erkundigt man sich mal bei seinem Provider. Sehr viele Infos zu diesem Thema findet man auch bei SELFHTML oder unter www.webhostlist.de. Um die Seiten auf den Server hochladen zu können, benötigt man dann noch ein FTP-Programm, wie zum Beispiel Filezilla.

Das Projekt bekannt machen

Wenn man viel Mühe und Zeit in die Erstellung einer Webseite gesteckt hat, möchte man natürlich auch, dass sie gut besucht wird. Aber Besucher erhält man nur, wenn die Seite leicht gefunden wird. Maßgebend hierfür ist vor allem eine ausreichende Verlinkung der Seite. Man kann seine Seiten bei Webkatalogen anmelden oder sie in einschägigen Foren bekannt machen. Man kann Freunde oder Webmaster mit ähnlichen Themen bitten, die Homepage zu verlinken - und als Gegenleistung auch auf deren Seiten einen Link setzen.

Übrigens: Falls diese Anleitung zum Thema Webdesign für Sie hilfreich war, würde ich mich auch über einen Link zu dieser Webseite freuen.

Suchmaschinen

Um auch von Suchmaschinen gefunden zu werden, benötigt man ebenfalls eine gute Verlinkung. Eine Anmeldung bei Google und Co ist aber meist nicht notwendig. Suchmaschinenoptimierung ist ein heiß diskutiertes Thema unter vielen Webmastern, wer sich dafür interessiert kann sich bei Abakus oder in Webmasterforen kundig machen.

Kurz zusammengefasst sind es vor allem folgende Punkte, die für eine gute Listung in Suchmaschinen sorgen:

Zum Seitenanfang

Statistiken

Wenn die Seite online ist, möchte man natürlich auch gern wissen, wie die Seite bei den Nutzern ankommt. Welche Unterseiten werden oft angeschaut, welche weniger? Wie lange bleiben Besucher auf der Homepage? Woher kommen sie? Über welche Suchmaschine - mit welchen Suchbegriffen? Welche Browser oder Bildschirmauflösung benutzen sie?

Manchmal gibt hier der Webserver Auskunft: man kann sich dort die Statistiken der eigenen Seite ansehen. Falls das nicht der Fall sein sollte, kann man zum Beispiel einen Besucherzähler einbauen, der oft die entsprechenden Statistiken mitliefert. Im Netz finden sich zahlreiche Angebote, oft auch kostenlose. Der Einbau solcher Zähler ist einfach und auch von Anfängern leicht zu bewerkstelligen.

Die Daten, die man erhält, kann man nutzen, um seine Internetseiten weiter zu optimieren. Im Laufe der Zeit ändert sich auch vieles: Besucher benutzen neue Browser oder bevorzugten eine andere Bildschirmauflösung - solche Dinge sollte man immer etwas im Auge behalten. Vielleicht kann man auch Inhalte wenig besuchter Seiten verbessern oder das Angebot erweitern. Wer seine Internetseiten aktuell halten will, hat also immer was zu tun.

Zum Seitenanfang

Ein paar Worte zum Schluss

Diese Anleitung zum Homepagebau soll vor allem eins klar machen: Schon mit geringen HTML- und CSS-Kenntnissen ist es möglich, eine Internetseite mit validem Code zu schreiben. Das ist einfacher als man denkt und erfordert sicher kaum mehr Zeit als die Einarbeitung in so beliebte Programme wie Frontpage und Co. Hat man einmal verstanden, wie HTML und CSS funktionieren, ist es leicht, das vorhandene Wissen zu erweitern. Im Netz finden sich diesbezüglich zahlreiche Hilfen.

Sollte es jemandem gelingen, mit Hilfe dieser Anleitung eine eigene Webseite zu erstellen, würde ich mich über eine Benachrichtigung oder einen Link auf diese Webseite sehr freuen.

Einer meiner Rätselfreunde hat es bereits ausprobiert. Die Ergebnisse findet man hier:
Magellans "Habt Acht!", Magellans Ode an die Rätselfreude, Magellans RätseleXamen und Magellans Elfer raus!.

Eine weitere Umsetzung meines Templates kann man auf der Website Rätselnasen finden.

Andi hat ihre Webseite meileneilen neu gestaltet und nutzte dazu diese Anleitung. Die Seite von Psychotherapeut Klaus Mayr wurde ebenso komplett umgestaltet.

Zum Seitenanfang

Valides HTML Valides CSS
Statistik Counter