www.BuntesWeb.de - Computer & Internet

Das Homepage-Handbuch speziell für blutige Anfänger

Webdesign - Wir erstellen eine Beispielhomepage

Layout - Planung

1.1. Allgemeine Überlegungen zur Gesamtbildbreite

Zunächst machen wir uns ein paar Gedanken über unsere zukünftigen Leser und deren verfügbare Bildbreite. Wenn ein Webbrowser Dateien von einem Server abruft, dann sendet er auch Informationen über sich selbst und das Betriebssystem. Darunter auch die Bildschirmauflösung. Webdienste, wie z.B. Counterbetreiber führen anonymisierte Statistiken und stellen sie auch öffentlich zur Verfügung . Demnach sind folgende die am meisten genutzten Bildschirmauflösungen:

40% : 1024x768
30% : 1280x1024
25% : Andere Auflösungen über1024 Pixel Bildbreite
 5% : Auflösungen unter 1024 Pixeln Bildbreite (z.B. 800x600)

Insgesamt verwenden also 95% aller Internet-Surfer eine Auflösung von 1024x768 Pixeln und darüber.

Schaut man sich heutige Profiwebseiten (Online-Auftritte der bekannten Zeitschriften) an, dann sieht man dass diese auch noch Rücksicht auf die 3 bis 4% der Leserschaft nehmen, die noch eine Bildschirmauflösung von 800x600 Pixeln verwenden. Ich finde, das ist eine gute Idee, weil damit auch Mobilsysteme und sehbehinderte Anwender berücksichtigt werden, die gern noch Gebrauch von dieser Einstellung machen. Außerdem kann der Anwender so auch problemlos sein Browserfenster verkleinern, um nebenher noch eine andere Anwendung zu benutzen.

Für unsere Übungshomepage spricht nichts dagegen, dass wir uns auf das Format 800x600 beschränken. Ich ziehe noch 50 Pixel für Browserrahmen und Scrollbalken ab und damit steht unsere Gesamtbreite für das Homepagelayout fest: 750 Pixel.

  

1.2. Überlegungen zur Navigation und zur Anordnung der Inhalte

Ganz grob treffen wir die Entscheidung, ob wir überhaupt eine Navigationsleiste brauchen und wenn ja, wie viele Links wir in der Navigationsleiste unterbringen müssen und ob wir graphische Buttons oder Textlinks verwenden. Außerdem treffen wir die Entscheidung, ob die Navigationsleiste sich horizontal über den Inhalten befinden soll, oder vertikal am linken Bildrand. Gegebenenfalls kann eine horizontale Hauptnavigation mit einer vertikalen Navigation für die Unterseiten ergänzt werden. Das ist nicht immer nur Geschmacksache. Es hängt auch davon ab, ob man sehr viele Links/Buttons benötigt. So zwischen 6 bis 8 Links bekommt man in eine horizonlale Leiste. Ordnet man sie untereinander an, dann reicht der Platz wohl für doppelt so viele Links. Allerdings geht der Platz für die Navigation dann von der Bildbreite ab.

Damit wir abschätzen können, wieviel Platz auf den einzelnen Seiten benötigt wird und wie man den verfügbaren Platz optimal aufteilen könnte, müssen wir uns schon vorab Gedanken über möglichst alle Inhalte der Homepage machen. Je unterschiedlicher die Inhalte und deren Platzbedarf sein werden, desto flexibler müssen wir darauf reagieren können und dürfen uns nicht von Anfang an zu sehr festlegen. Dennoch müssen wir sehr genau planen, weil wir nicht mit einem Content-Management-System arbeiten und das Layout nicht auf CSS-Containern basiert, sondern auf Tabellen. Schließlich ist dies ja keine Anleitung für HTML-Profis, sondern für blutige Anfänger mit WYSIWYG-Editoren.

1.3. Wir erstellen am besten erstmal eine Übersicht - sozusagen den "Masterplan":

1. Die Eingangsseite im Stil einer Visitenkarte
   Hier sollen die Homepagebesucher in Empfang genommen werden und einen kurzen Überblick über die Inhalte bekommen. Hier sollen aber auch gleich die Kontaktinformationen stehen, damit der Besucher mit dem Homepagebetreiber Kontakt aufnehmen kann.
2. Das Kontaktformular
   Hier sollen Besucher eine kurze Nachricht an den Homepagebetreiber schreiben können. Die Formulardaten werden per Email übermittelt.
3. Die Hobbyseite - Das Fortoalbum
   Der Homepagebetreiber ist Hobbyfotograf. Hier will er einige seiner schönsten Fotos ausstellen.
1. Die Hobbyseite ist die erste
2. von insgesamt vier
3. (oder zukünftig noch mehr)
4. Seiten mit Fotos und Begleittext.
4. Die Seite "Impressum und Rechtliches" ist leider ein MUSS für jedes Internetangebot und damit reine Formsache. Warum das so ist, wird im ersten Kapitel erläutert: Datenschutz und wichtige rechtliche Hinweise

Da wir definitiv mehr als 2 Seiten haben werden und in Zukunft ja noch einiges hinzukommen soll, wird eine Navigationsleiste angelegt. Hierfür komme ich zu folgenden Überlegungen:

Die Eingangsseite soll im Stil einer Visitenkarte gehalten werden. Ein Bild und der Begleittext sollen zusammen möglichst komplett auf den Bildschirm passen. Der Text soll zumindest teilweise neben dem Bild stehen. Von der Visitenkarte kommt man zur Hobbyseite. Dort sollen Fotos ausgestellt werden. Deren Begleittext soll ebenfalls jeweils neben dem Bild stehen. Da das Gesamtlayout nur 750 Pixel breit sein soll, benötigen wir wohl die volle Breite des Layouts und habe keinen Platz mehr für eine seitliche Navigation.

Abgesehen vom Fotoalbum hat die Homepage nur wenige Seiten und bedarf daher keiner wirklich ausgeklügelten Navigation. Wir halten die Links lieber unauffällig und dezent in einer horizontalen Menüleiste. Der Einfachheit halber wählen wir keine Grafikbuttons sondern Textlinks. Für die Unterseiten des Fotoalbums blenden wir einfach eine zusätzliche horizontale Navigationsleiste ein. Wir wollen aber vielleicht später die Homepage noch erweitern. Damit wir flexibel bleiben und die Navigation später leicht erweitern können, wähle ich eine Navigation im Iframe.

1.4. Und somit komme ich zu folgendem Grundlayout:

Kopfzeile mit Bannergrafik

Navigation (Iframe)

Zusatz-Navileiste bei Bedarf (z.B.für das Fotoalbum)

Inhalte xxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxx. Bild   Text xxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx. Inhalte xxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxx.

Fußzeile (Copyright-Text, Link zum Impressum) in einem Iframe

  

1.5. HTML-Elemente zur Steuerung des Seitenlayouts

In einem anfängerfreundlichen HTML-Dokument ohne CSS stehen für die Aufteilung der Seite folgende HTML-Elemente zur Verfügung:

• Freies Layout
  Die Texte und Bilder können direkt eingefügt werden. Bilder benehmen sich dann wie übergroße Buchstaben und werden dem entsprechend in den Text eingebunden. Der Platz dafür wird automatisch in Abhängigkeit von Fenstergröße und Bildschirmauflösung vom Browser eingeteilt. Das entspricht sehr dem Spirit des Internet und dem ursprünglichen HTML-Gedanken. Als Anfänger freut man sich über die Einfachheit. Man sieht aber sehr bald, dass die Homepage auch immer sehr einfach und unspektakulär wirkt. Ein vernünftiges Layout bekommt man damit eigentlich gar nicht hin. Bei den Profis ist dieser Zustand völlig inakzeptabel. Sie sind es von den Printmedien her gewohnt, dass jedes Ding genau an seinen Platz muss. Und das muss dann auch bei jedem Betrachter genau gleich aussehen. Da darf sich nichts verschieben.
• Tabellen
  Tabellen sind dazu da, dass man Zahlen oder Worte in eine gewisse Ordnung bringt. Man kann sie aber auch verwenden, um die Inhalte einer Webseite ordentlich aufzuteilen. Namo WebEditor verwendet Tabellen zur Erzeugung der sog. Layoutboxen und Layoutzellen. Auch ein Anfänger versteht sehr schnell, wie man eine Tabelle erstellt. Manche verteufeln die Zweckentfremdung von Tabellen. Das sind aber die selben Leute, die den Anfängern den Spaß am Webdesign nehmen, weil sie auch WYSIWYG-Editoren verteufeln. Für unsere Zwecke jedenfalls sind Tabellen ideal.
• Ebenen (Layer)
  Ebenen sind wie eine kleine Webseite auf der Webseite. Sie lassen sich entweder völlig frei auf einer Seite positionieren oder sie orientieren sich an der Stelle, wo man ihren Ursprung eingefügt hat. Mittels CSS lassen sich die Eigenschaften und Positionen sogenannter DIV-Container auch aus einem zentralen Stylesheet steuern. Sie sind das Layoutinstrument der Profis. Auch www.buntesweb.de basiert inzwischen auf solchen Ebenen. Namo WebEditor unterstützt dies aber noch nicht hinreichend, so dass zumindest absolute Anfänger lieber noch auf das zentrale Stylesheet als Layoutinstrument verzichten. Namo WebEditor kann aber Ebenen mit CSS-Angaben direkt in der Webseite erzeugen und diese sind dann kinderleicht zu handhaben, wodurch sie auch für Anfänger eine sehr gute Alternative zum Tabellenlayout darstellen. Man verwendet sie gern, wenn man ein pixelgenaues Layout erstellen will. Für den Anfänger etwas verwirrend ist die Positionsberechnung der Ebenen, die immer vom Bildrand ausgeht. Ein auf dem Bildschirm zentriertes Layout lässt sich damit kaum machen. Stellt man Text oder Tabellen auf der Webseite zentriert dar, dann ist es beinahe unmöglich, eine Ebene daran anzupassen. Wichtig ist daher, dass man Ebenen konsequent einsetzt, also nicht versucht, ein Tabellenlayout und Ebenen aneinander auszurichten. Man muss sich entscheiden: Entweder Ebenenlayout oder Tabellenlayout.
• Frames
  Über die Verwendung von Frames als Layoutwerkzeug wird in den Foren immer wieder heiß diskutiert. Nein, genau genommen fragen Anfänger immer wieder, ob man das nicht mit Frames machen kann und die fortgeschrittenen Anwender verteufeln sie dann. Tatsache ist, dass Suchmaschinen nur Seiteninhalte einlesen. Layout und Frames sind dem Robot egal. So verlinken die Suchmaschinen immer direkt zu der Seite, die den zum Stichwort passenden Text enthält. Diese wird dann direkt - also ohne ihr Frame - angezeigt. Der Webdesigner muss krampfhaft Vorkehrungen treffen, damit der Leser von den Suchmaschinen in das Frame geleitet wird.
  Frames sind prima geeignet, um externe Inhalte (ein Forum oder ein Gästebuch) in die eigene Webseite einzubinden. Sie werden aber keine einzige Profi-Seite finden, die Frames für das Seitenlayout verwendet. Wie dem auch sei. Für eine erste kleine Anfängerseite wären Frames geeignet, um die Inhalte perfekt auf dem Bildschirm zu verteilen. Eine Navigationsleiste im Frame ist zudem leicht zu pflegen.
• Inline Frames
  Alternative zu Frames sind Inline Frames (Iframe). Im Unterschied zu Frames kann man damit nicht so elegant die Bildschirmaufteilung erledigen. Aber man kann z.B. Elemente, die sich auf jeder Seite wiederholen auslagern und dann im Iframe anzeigen. Änderungen an diesen Elementen müssen dann nur einmal vorgenommen werden und werden automatisch auf allen Seiten angezeigt. Navigationsleisten, Banner, Logos, bzw. ganze Kopf- und Fußzeilen kann man mittels Iframe realisieren.

Nicht ohne Grund zähle ich Tabellen zu den Grundelementen einer Webseite. Viele meiner Homepageprojekte basieren noch auf einem Tabellenlayout. Auch für unsere Übungshomepage wähle ich Tabellen als Layoutinstrument. Allerdings kann man sich durch ein gar zu starres Tabellenlayout auch selbst knebeln. Daher verwende ich nicht einfach nur eine Tabelle mit mehreren Zeilen und Spalten, sondern für jeden Abschnitt eine eigene Tabelle. Im Folgenden befassen wir uns nun also mit der Realisierung des Layouts.

 

Lesen Sie weiter >>>  Layout erstellen

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum