Kurs:Internet- und Projektkompetenz/Leitfaden/Homepage Varianten

Hier werden einige Grundsatzfragen zum Aufbau eurer Website erläutert.
Die wesentlichsten Elemente hier sind zunächst:

Eine Titelleiste/Überschrift (evtl. noch mit Logo),
eine Navigationsleiste (vorerst aber noch ohne Funktion, nur als eigens gegliederter Bereich) und
das Textfeld, für die eigentlichen Informationen.

Welche Technik soll verwendet werden?

Zur Unterteilung einer HTML-Seite gibt es verschiedene Möglichkeiten. Ich stelle euch hier einmal die drei gängigsten vor, wobei jede ihre eigenen Vor- und Nachteile hat. Für welche ihr euch entscheidet, bleibt letztlich euch überlassen. Die Frage nach einem graphischen oder textbasierten Editor wird unter dem gegebenen Link eigens besprochen.

Tabellen

Die vermutlich bekannteste Möglichkeit (die auch gerne zur optischen Gliederung von Handouts oder Titelblättern von Hausarbeiten verwendet werden) funktioniert mit Tabellen. Auch im Internet findet man viele Websites die mit Tabellen gestaltet wurden, allerdings schöpfen sie nicht ganz das aus, was ein .html-Dokument bieten kann. Beispielsweise können einzelne Bereiche nicht gescrollt werden (das heißt, wenn ihr einen längeren Text auf der Seite habt, könnt ihr am Ende des Textes nicht mehr die Navigationsleiste sehen.) Der Vorteil dieser Variante ist natürlich, dass die Gestaltung mit Tabellen allgemein bekannt und schnell eingängig sein dürfte. Dafür sind manche Designs etwas schwierig, andere sogar unmöglich und abhängig vom Browser kann es hier leicht zu Anzeigefehlern kommen. In der Regel sehen die Seiten aber trotzdem gut aus und machen keine Schwierigkeiten. Hier findet ihr eine genaue Anleitung, wie sich eine Homepage mit Tabellen gestalten lässt.

Frames

Um nun auch in den einzelnen Bereichen scrollen zu können, bieten Frames eine Lösung. In jedes HTML-Dokument lassen sich diese Frames einbetten und funktionieren praktisch wie ein Fenster, durch das man ein anderes Dokument sehen kann. Wenn ihr also auf einer Seite mit Frames auf einen Link klickt, wird eine andere Seite in diesem "Fenster" geladen: So lässt sich das Textfeld durch anklicken verschiedener Menüpunkte in der Navigationsleiste verändern, während die Navigationsleiste unverändert an Ort und Stelle bleibt. Außerdem können alle Bereiche, die zu groß sind um vollständig im Browser angezeigt zu werden, unabhängig voneinander gescrollt werden. Der Nachteil bei dieser Methode besteht darin, dass es manche (aber wenige) Browser gibt Frames überhaupt nicht unterstützen. Außerdem funktioniert auch die "Zurück"-Taste im Browser grundsätzlich nicht wie gewohnt: Da die Navigations- und Titelleiste der Seite immer die gleichen bleiben und nur unterschiedlicher Text durch ein "Fenster" angezeigt wird, verlässt man die Seite meistens wieder ganz, statt zum letzten Punkt zurückzukehren. Gleichzeitig ist die Navigationsleiste auch etwas unflexibel, da sie immer die gleichen Links anzeigen wird und eine tiefgehende Strukturierung der Seite - mit mehreren Unterpunkten - kaum möglich ist. Für unsere Zwecke wird das aber in der Regel völlig genügen, sofern wir uns eben auf ein paar größere Gliederungspunkte beschränken. Ein Beispiel und eine Anleitung, wie Frames zum Aufbau der Seite verwendet werden, hat Birgit bereits ins Netz gestellt: Birgits Anleitung (wobei ihr vorerst vor allem die Lektionen 1 und 2 braucht, Farben, Links usw. können später eingefügt werden!)

Cascading Style Sheets - CSS

Am exaktesten funktioniert die Strukturierung von Dokumenten schließlich über CSS (Cascading Style Sheets.) Diese Variante wird am ehesten von professionellen Webdesignern verwendet. Sie mag für den Anfang etwas fremdartig wirken, aber bietet im Endeffekt die meisten Möglichkeiten und wird bei komplexeren Webseiten auch die Arbeit deutlich erleichtern. Außerdem entspricht die Homepage-Gestaltung mit CSS am ehesten den festgelegten Standards für Websites (vom W3C) Das mag vielleicht ein wenig übertrieben klingen, aber für diejenigen, die sich über ihr IPK-Projekt hinaus vielleicht noch mit Webseiten beschäftigen wollen, ist es auf jeden Fall einen Blick wert! Ich persönlich halte es für die beste Möglichkeit, aber es ist definitiv nicht die einzig brauchbare für den IPK-Kurs. Eine Beispielseite wäre dafür meine (noch nicht fertige) IPK-Projektseite: Rezeption japanischer Schriftzeichen Eine Anleitung dazu gibt es auch hierfür wieder unter: Homepage mit CSS.

Ausführung

Wenn ihr euch die Anleitung zu einer der drei gegebenen Methoden angesehen habt, sollten die oben genannten Aufgaben nicht mehr schwer fallen.

Die Titelleiste füllt ihr einfach mit einem Text in dem Format, das ihr für angemessen haltet. Dabei bietet sich natürlich die Überschrift an, die ihr bereits mit den ersten Aufgaben geschrieben habt. Wie ihr ein Bild (z.B. IPK-Logo) hinzufügen könnt, findet ihr in der HTML-Bausteinübersicht.

Die Navigationsleiste füllt ihr mit den Punkten, in die ihr euer Projekt gliedern wollt. Das muss natürlich noch nicht endgültig feststehen, aber sollte zumindest einmal ein Entwurf einer Gliederung, ähnlich wie bei einer Hausarbeit, sein.

Schließlich kann im Textfeld ein kurzer Begrüßungstext stehen, wie er später auch auf eurer Startseite zu finden sein wird.

Das klingt möglicherweise jetzt alles nach furchtbar viel, aber probiert einfach eine der vorgeschlagenen Varianten und ihr werdet sehen, dass sich hier auch wieder vieles mit Kopieren aus Vorlagen in eure HTML-Dokumente übernehmen lässt, wo ihr dann eigentlich nur noch den Text anpassen müsst.

Formatierungen, Links, etc.

Weiter geht es mit verschiedenen Formatierungen auf eurer Homepage, Links für eure Navigationsleiste, Hervorhebungen im Text und ein paar Farben für eure Seiten. Das alles wird bei der Ausgestaltung der Homepage beschrieben.