| "Wenn jemand spricht wird es hell".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| :Home |
|
|
 |
|
|
Das Layout
Design-Name: Brainstorming.
Ein Foto, auch Ihres, nur für den Fall, daß Sie tauschen möchten, legt sich hinter die verschiedenen Felder. Das Layout schiebt sich beim Scrollen über den feststehenden Hintergrund und gibt damit nach und nach da Foto frei. Ein Toller Effekt, wie wir finden, zumal die Felder ja noch in verschiedenen Farben transparent sind. Dieses Foto heisst" logo.jpg" und Sie können es bei Bedarf in der Datei format.css wechseln. Übrigens: Die Farben der Felder lassen sich auch untereinander tauschen.
Die Technik
Flexibles Layout: Verändern Sie die Breite des kompletten Layouts und/oder z.B. die Breite der linken Spalte. Auch die einzelnen Felder lassen sich in Breite und Höhe anpassen.
Auf der linken Seite sehen Sie die praktischen Boxen. Fortgeschrittene könnten auch weitere Boxen hinzufügen, also darunter kopieren. Eine Box erkennen Sie im Quelltext immer ganz leicht wie folgt: id="box1", id="box2" usw. (in der Datei index.html) sowie #box1, #box2 usw. (in der Datei format.css).
Genauer gesagt: Der eigentliche Code für eine Box befindet sich in der CSS-Datei und wird per "id" dann in der Html-Datei aufgerufen.
Sie können für die Boxen eine Höhe festsetzen. Alternativ lassen sie die Höhenangabe bei den Boxen ganz weg - so wie hier im Moment (height:0px) angelegt, denn dann richtet sich die Höhe der Boxen immer nach dem jeweiligen Inhalt.
Die Navigation
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Die Menüs sind beliebig erweiterbar, auch innerhalb der Gruppen.
So sehen die allgemeinen Links im Text aus.
Die Info
Seite ohne Frames. Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
Nachfolgend noch ein Beispiel für eine Liste. Solche Listen lockern den Text auf und eignen sich natürlich wunderbar für Aufzählungen.
Liste mit eigenem Aufzählungszeichen, nicht verlinkt:
- Sed
- Condimentum
- Bibendum
- Semper
Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.
Viel Spaß mit diesem Design. Scelerisque ut, pulvinar vel, sem.
|
|
