Anleitung für Anfänger und Profis zum Erstellen einer Webseite

Grundsätzliches zum Erstellen einer Homepage

Bevor wir aber beginnen, irgendwelche Daten ins Internet zu stellen, bereiten wir alles auf der Festplatte des eigenen Rechners vor. Dazu erstellt man einen Ordner, wo alle HTML-Seiten und Dateien gespeichert werden, die zu der Homepage gehören und die später im Internet veröffentlicht werden sollen. Dieses ist sehr wichtig, denn wenn die Homepage auch später funktioniert, muss man eine exakte Kopie dieses Ordners auf den Server im World Wide Web laden. Aus diesem Grund muss man alle HTML-Seiten, Bilder oder andere Dateien, die man in die Homepage einbinden möchte, vorher in diesen erstellten Ordner speichern, um damit arbeiten zu können. Alle Dateien müssen sich in den gleichen Ordnern befinden und die gleichen Dateinamen besitzen, ansonsten kann ein Browser wie der "Internet Explorer" die Daten nicht finden, was dazu führt, dass entweder die ganze Seite oder einzelnen Bilder nicht angezeigt werden können. Dies dürfte aber alles keine Probleme darstellen, wenn man sich strikt daran hält, nur mit Daten aus dem zuvor erstellten Ordner zu arbeiten.

Arbeiten mit Bildern

Beim Einbinden von Grafiken und Bildern sollte man unbedingt darauf achten, dass die Datei nicht zu groß wird. Wenn man eine Grafik in seine HTML-Datei (= einzelne Internetseite) einbindet, so sollte sie nicht größer als 50 KB groß werden. Die Größe einer Datei kann man überprüfen, wenn man mit der rechten Maustaste auf die Datei und anschließend auf Eigenschaften klickt. Um einen besseren Bezug zu dieser Größe zu bekommen, sollte man sich bewusst sein, dass ein herkömmlicher Internet-Surfer mit einem Modem gerade einmal 5-6 KB in der Sekunde laden kann, so dass er für eine 50 KB große Bilddatei fast 8 bis 10 Sekunden benötigt. Das ist aber noch akzeptabel.

Um ein Bild so zu komprimieren, dass man auf unter 50 KB kommt, sollte man erstens das Bild im JPEG- oder GIF-Format speichern und wenn dann die Größe immer noch nicht klein genug ist, so sollte man die Bildgröße verkleinern. Dabei sollte man sich direkt daran gewöhnen, mit Pixeln anstatt mit cm zu arbeiten, denn dann wird dieses am genauesten. Ein 15x10 cm großes Bild hat eine Bildgröße von 425x283 Pixeln. Alle diese Vorgänge sind mit einem herkömmlichen Bildbearbeitungsprogramm möglich. Sollte trotz alledem die Dateigröße nicht unter 50 KB geschrumpft sein, so kann man bei Frontpage die „Automatische Miniaturansicht“ benutzen. Einfach mit der rechten Maustaste auf das Bild klicken und auf „Automatische Miniaturansicht“ klicken. Jetzt wird das Bild als kleine Vorschau angezeigt, so dass ein Leser zur Vergrößerung des Bildes darauf klicken kann. Die einzige Schwierigkeit bei der automatischen Miniaturansicht ist, dass man nach dem Speichern der HTML-Seite aufgefordert wird, dieses kleine Vorschau-Bild zu speichern. Dies sollte man unbedingt in dem Ordner speichern, wo sich die Original-Datei befindet.

Dazu klickt man einfach auf „Ordner Wechseln“ und navigiert sich anschließend zu dem Ordner, wo sich die eigentliche Grafik befindet. Nicht erschrecken, dass alle Ordner leer sind, das ist normal.

Die Bilddatei der Miniaturansicht muss in einem Ordner der
Homepage gespeichert werden.

Bilder kann man nicht nur einfach in die Mitte des Fensters einsetzen, sondern man kann sie so ausrichten, dass der Text die Bilder „umfließt“. In diesem Dokument habe ich die Bilder auch so eingesetzt, dass sie vom Text umschlossen werden. Wenn man mit der rechten Maustaste auf ein Bild und anschließend auf „Bildeigenschaften“ klickt, so erscheint das Kontextmenü zum Bearbeiten von Bildern.

Positionieren der Grafik im Text

In der Rubrik „Umbruchart“ (rot) kann man das Bild so positionieren, so dass es entweder links, rechts oder gar nicht vom Text umschlossen wird. Die Rahmenstärke (blau) gibt an, ob man einen Rahmen um das Bild setzen möchte und welche Stärke der Rahmen sein soll. Mit dem Horizontalen und vertikalen Abstand (grün) kann man das Bild von dem Text etwas absetzen, so dass der Text nicht unmittelbar an das Bild stößt.

Verlinken auf eine andere HTML-Seite

Wenn man von der einen HTML-Seite auf eine andere HTML-Seite verweisen möchte, beispielsweise macht man so etwas bei einem Menü, so verwendet man so genannte Hyperlinks, was die englische Bezeichnung für Verweistext ist. Um einen Hyperlink bzw. Verweistext anzulegen, musst Du lediglich den ausgewählten Text markieren und anschließend mit der rechten Maustaste darauf klicken. Daraufhin erscheint wieder unser bekanntes Menü und wir klicken hier auf „Hyperlink“ oder „Hyperlinkeigenschaften“.

Als nächstes erscheint nun das Kontextmenü für das Erstellen eines Hyperlinks. Möchte man einen Hyperlink zu einer eigenen HTML-Seite machen, beispielsweise man möchte in dem Menü auf die Seite „Innenausbau“ verweisen, so muss man lediglich in „Suchen in“ zu dem Ordner auf dem Rechner navigieren, wo man seine Homepage gespeichert hat.

Des Weiteren ist es aber auch möglich, auf andere Internet-Seiten zu verweisen. Dazu muss man lediglich die komplette Adresse wie www.bild.de eintippen. Dazu sollte man aber unter dem Button „Zielframe“ noch zusätzlich angeben, dass die Seite in einem „neuen Fenster“ geöffnet wird. Das bezweckt, wenn der Leser später auf den Hyperlink klickt, dass ein zusätzliches neues Explorer-Fenster geöffnet wird, wo die Seite www.bild.de geladen wird. Ansonsten würde die Seite www.bild.de in dem gleichen Fenster geöffnet, so dass unsere Seite nicht mehr da ist.

Kleine Anmerkung: Ich habe in bei der Erstellung der Homepage einmal zentral festgelegt, welche Farben die Schrift haben soll. Wenn man jetzt einen Hyperlink erstellt, so wird dieser automatisch als helles Orange angezeigt, was man so gut wie gar nicht lesen kann. Da kann man einfach eine andere Farbe festlegen. Man sollte sich aber bei der Farbwahl sich strikt an einer einzigen Farbe halten, damit der Leser sofort an der Farbe erkennen kann, dass dies ein Link zum Draufklicken ist.