| Home - Startseite - Willkommen |
|
|
|
|
|
|
|
Ich bin eine Inhaltsbox.
Mit Platz für weiteren Inhalt wie z.b. Text oder Grafiken.
Diese Boxen erweitern sich nach unten bei mehr Inhalt automatisch bzw. verkürzen sich bei wenig Inhalt.
Die Höhe jeder einzelnen Box können Sie aber auch festlegen, falls Sie sehr wenig Inhalt in einer Box haben.
|
|
|
Ich bin eine weitere Inhaltsbox. Hier werde ich als News-Box genutzt. Übrigens: Die Kalenderblätter sind ohne jede Grafik erstellt. Sie können diese daher bei Bedarf leicht farblich ändern sowie auch die Abmessungen anders einstellen.
Der Text legt sich um das jeweilige Kalenderblatt herum, die Abstände vom Kalenderblatt zum Text hin nach rechts und nach unten lassen sich auch beliebig einstellen.
|
|
|
|
Wir haben bereits ein weiteres Menü für Sie in der Box2 eingebaut.
Sie finden es nach Klick bzw. in der Datei index2.html anbei.
|
|
|
|
|
|
|
|
|
|
| Spring Garden |
|
|
|
|
|
Das Layout
Design-Name: "Spring Garden".
Ein Foto, auch Ihres, nur für den Fall, daß Sie tauschen möchten, legt sich hinter die verschiedenen Felder. Wir haben es hier so geschickt angelegt, daß der Eindruck entsteht, es würde sich um viele zerschnittene einzelne Teile des Fotos handeln, gleichwohl ist es aber wie schon gesagt nur ein großes Foto, welches als Hintergrundgrafik eingebaut ist. Somit können Sie dieses in der Datei format.css blitzschnell (hier: logo.jpg) wechseln.
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.
Die Navigation
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Das Menü oben ist durchgehend nach rechts erweiterbar. Die Links dort haben keine feste Breite, so können Sie möglichst viele nebeneinander schreiben.
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
Übrigens finden Sie als Bonus die Datei index2.html anbei, welche zwei Menüs auf der linken Seite enthält. Unser kleines Logo ganz unten links (onmouseover) dürfen Sie gerne rausnehmen. Wer uns unterstützen möchte, läßt es drinnen.
Viel Spaß mit diesem Design.
|
|
