Schwan im Wasser
Das Layout.
Ein weisser Schwan im Wasser führt zu vielfältigen Assoziationen. Was fällt Ihnen spontan gerade dazu ein? Vielleicht Musik, wie die Oper "Schwanensee" oder das Märchen, welches die Entwicklung vom hässlichen Entlein zum stolzen Schwan beschreibt oder aber auch Begriffe wie Reinheit, Frieden, Unschuldigkeit, Frische, Natürlichkeit, Gesundheit, Jungfräulichkeit - für welche die Farbe Weiss steht.
Die Technik.
Seite ohne Frames. Dies ist ein rein CSS-POSITIONIERTES-LAYOUT. Was heisst das? Die verschieden Objekte (Bereiche), wie Menü oder Inhaltsbereich, werden hier anstatt per Tabellen über sogenannte "Div-Container", auch bezeichnet als "Boxen", platziert. Über diese Boxen erfolgt auch im wesentlichen das Layout, also die Anordnung der Objekte, sprich Innenabstände (padding), Rahmen (border), Aussenabstände (margin) sowie Positionierung und Grösse. Die HTML-Datei wird damit sehr übersichtlich, denn alle Anweisungen erfolgen über die ausgelagerte CSS-Datei.
Die Schwan-Grafik ist unten links innerhalb des Monitors positioniert. Auch bei wechselnden Monitorauflösungen behält die Grafik diesen Platz bei. Ausserdem ist der "Schwan" festgesetzt, d.h. es scrollt nur der Inhalt.
Die Schrift ist im Blocksatz, d.h. gleiche Ausrichtung der Schrift an linker und rechter Kante. Das sieht schön aus, jedoch kann es mitunter bei sehr langen Wörtern den Text auseinanderziehen. Die Abhilfe ist einfach, entscheiden Sie je nach Bedarf: Ersetzen Sie "text-align:justify" durch "text-align:left". Und zwar in der Datei format.css bei:
#main p {text-align:justify;margin: 0px;}
Anlegen von Links bzw. HTML-Seiten:
Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
Die Navigation.
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. Das Menü ist beliebig erweiterbar. So sehen die allgemeinen Links (Links im Text) zur Zeit aus: Beispiel-Link