Erstellung einer kleinen Homepage mit mehreren Unterseiten
III. Die Seite erweitern
11. Der linke Rand und das Menü
Wechseln Sie zu Weaverslave und ändern Sie den Inhalt der 'index.html' wie auf Abb. 14. Sie fügen als erstes einen neuen neuen Bereich mit dem id-Namen "rand" unter den Kopfbereich ein. Darunter ordnen Sie die vorhandenen Texte im Inhaltsbereich an.
Die Reihenfolge der div-Elemente im HTML ist wichtig. Achten Sie auch darauf, daß alle mittleren divs innerhalb des übergeordneten container stehen.
Abb. 14 (zum Vergrößern anklicken)
Wenn Sie sich jetzt die Seite im Browser ansehen, werden Sie eine ziemliche Unordnung feststellen. Das ist auch nicht weiter überrraschend, denn die divs wissen noch nicht, wie sie angeordnet sind. Das wird im CSS definiert:
Abb. 15 (zum Vergrößern anklicken)
Nutzen Sie zur Auswahl der Farben das rechte Menü von Weaverslave und achten Sie auf die HTML-übliche Farbdefinition (#xxxxxx).
Die beiden Elemente "inhalt" und "rand" floaten beide nach links im Bereich "container" und haben eine feste Breite:
rand:280px + content:500px = container:780px - d.h. falls einer der Bereiche z.B. noch eine border oder ein padding von 4px erhalten soll, muß auch der "container" um mindestens 8px verbreitert werden.
ganz kurz: Das "natürliche" Bestreben aller Bereiche, egal ob Überschrift (h1, h2, usw.) oder Textabsatz (p) - auch diese Bereiche können floaten - oder eines div-Bereiches ist es, in die linke obere Ecke des ihn umgebenden Elementes zu gelangen. Um sie davon abzuhalten und "kontrollierber" zu machen, gibt es die CSS-Anweisungen float-left und float-right, meistens mit einer Angabe für die Breite width oder des Randes margin des float-Elements und clear zum Aufheben des Floatens.
Das Thema Float ist, vor allem bei komplexeren Verschachtelungen, zugegeben etwas schwierig und nur mit einiger Übung zu verstehen. Ich kann daher nur empfehlen, sich damit etwas länger zu beschäftigen, zum Beispiel auf
link
dieser Seite.
Wenn alles geklappt hat, sieht Ihre Homepage jetzt so aus (Abb.16:
Abb. 16 (zum Vergrößern anklicken)
Der Abstand von 20px zwischen Kopfbereich und der Überschrift ist die "default"-Einstellung für "padding" für h1.
Daran können Sie sehen, wie Sie die Seite auch mit dem padding - Polsterung, border - Rand und margin - Rahmen gestalten können. Diese können am Anfang des Stylesheets Sie z.B. so verändern.
Abb. 16 (zum Vergrößern anklicken)
und später für einzelne Bereiche wieder ändern.
Jetzt ist auch ein guter Zeitpunkt, um die Auswirkungen der CSS-Anweisungen zu betrachten. Sichern Sie das Verzeichnis 'homepagename' und probieren Sie alle möglichen Einstellungen für "background", "padding", "border" und "margin" und schauen Sie sich die Veränderungen im Browser an. Achten Sie dabei auch auf die Maßeinheiten wie "px" und "em". "em" ist die Größe des Buchstabens "M" in verschiedenen Schriftgrößen, ist eine wichtige, weil flexible Maßeinheit und hat absolut nichts mit der HTML-Anweisung <em> für Schrägschrift zu tun.
12. Das Menü am linken Rand
Für das Menü benutzen wir eine geordnete Liste "ul", bei der jeder Listenpunkt als Menüeintrag definiert werden kann. Im HTML-Code sieht das so aus:
Abb. 17 (zum Vergrößern anklicken)
Die Links zu den einzelnen Seiten bleiben erstmal offen, weil es die Seiten noch gar nicht gibt.
Um die Seiten zu erzeugen, klicken Sie in Weaverslave, in dem nur die Datei 'index.html' im Hauptverzeichnis "Meine Homepage" geöffnet ist, auf "Datei" -> "Speichern unter..." und speichern die Datei im Unterverzeichnid seitenunter 'texte.html' und noch einmal unter 'grafiken.html'.
Ersetzen Sie jetzt den Inhalt des div-Bereiches der neuen Datein:
Abb. 18 (zum Vergrößern anklicken)
Nur den content löschen, nicht den div-Bereich.
Abb. 19 (zum Vergrößern anklicken)
Die Datei 'texte.html'.
Abb. 20 (zum Vergrößern anklicken)
Die Datei 'grafiken.html'.
13. Die Seiten verknüpfen
Um die einzelnen Seiten aufzurufen, erhält jeder li-Listeneintrag in der ul-Liste eine eindeutige Referenz.
Achten Sie dabei auf richtige Pfadangaben. Nicht nur im Menü, sondern auch bei allen anderen Verweisen auf der neuen Seite müssen ggf. die Links angepaßt werden.
Die Datei 'index.html' (Abb.21
Abb. 21_index (zum Vergrößern anklicken)
Die Datei 'grafiken.html' (Abb.22
Abb. 22(zum Vergrößern anklicken)
Die Pfade für das Stylesheet und das Verzeichnis bilder wurden hier angepaßt. Schauen Sie erst immer, in welchem Verzeichnis sich die aktuelle html-Datei befindet und auf welche Datei in welchem Verzeichnies der Link zielt, es muss natürlich bei Links zwischen den einzelnen Seiten einer Homepage immer ein Verzeichnis unterhalb der Hauptebene 'homepagename' sein.
