| |
|
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 zweite 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.
Die Links in der News-Box sind schon verlinkt. Klicken Sie mal.
* * * * *
|
|
| |
| »» HOME - Herzlich Willkommen bei uns ... |
| |
 Die Technik ¼
Bei einigen Textpassagen, wie z.B. den Überschriften im Textbereich, simulieren wir zum Teil den Stil einer alten Schreibmaschine. Verschieden fett bzw. sehr blass gedruckte Buchstaben sind hierfür typisch. Dieses ist aber alles einfacher Text ohne Grafik und dadurch für Sie leicht anpassbar.
♠ Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern. Erstellen Sie also so viele Unterseiten, wie Sie wollen.
Sowohl die Breite der Gesamtkonstruktion ist ändernbar, als auch die Breite der linken Spalte. Der Inhaltsbereich passt sich dabei immer mit 100% an. Weiterhin sind auch alle anderen Felder in der Höhe veränderbar, so daß Sie ein komplett flexibles Template erhalten.
Das Layout Ω«»Ο
Neben dem Haupt-Foto (hier: die Punkerin) ist linksseits davon noch ein offenes, flexibles Feld, welches Platz für ein weiteres LOGO bietet. Ändern Sie dort die Höhe für ein möglicherweise größeres Logo beliebig in der Datei "format.css" bei #logo_li (zur Zeit: height:100px;) einfach durch Einstellen anderer Pixelwerte (px).
Unterhalb des Fotos steht der Seitentitel, also immer der Titel bwz. Link der jeweils angewählten Seite, hier im Beispiel die Startseite "Home".
Im Inhaltsfeld werden auch Buchstaben als Text ohne Grafik höher oder -tiefgestellt, unterstrichen oder durchgestrichen sowie auch schräg oder fett dargestellt oder auch TextSonderzeichen verwendet, wie das "Ein-Viertel-Zeichen", das "E-Mail-Zeichen" oder der "Doppelpfeil" sowie einige griechische Buchstaben, welche Sie hier bitte entdecken
möchten.
Die Boxen auf der linken Seite könnten Sie für kleineren Inhalt wie Bilder, Text, Links o.ä. nutzen. Fortgeschrittene könnten auch weitere Boxen hinzufügen, also darunter kopieren.
Die kleinen Kalenderblätter auf der linken Seite in Box 2 sind ohne jede Grafik erstellt. Wenn Sie dort klicken (Weiterlesen-Link), öffnet sich die Seite "news.html" mit Ihren Neuigkeiten; dort sehen Sie dann auch noch weitere Kalenderblätter chronologisch sortiert, welche auf dem weißen Hintergrund des Inhaltsbereiches noch schicker aussehen, da hier die Rot-Weiß-Kombination besonders zum Trage kommt ...
Die Navigaton ΘΔΞφϒϖΠ
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Das Menü oben ist durchgehend nach rechts erweiterbar.
Das Menü in der linken Spalte ist beliebig erweiterbar.
Da wir in den Boxen 1 und 2 eine kleinere Schrift und einen anderen Hintergrund als im Inhaltsfeld gewählt haben, haben wir noch ein drittes Menü definiert - denn falls Sie dort verlinken (wie hier im Beispiel der "Weiter-Link"), soll ja auch die Grösse und Farbe der Linkwörter wieder zum Boxeninhalt passen.
Nicht zu vergessen: Als viertes Menü sozusagen erhalten die Links im Text auch eine eigene Link-Formatierung. Die Links im Text sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link
Die TiPPs ‡‡
Klicken Sie nachstehend auf die Links der Beispiel-Liste, um unsere Tipps zu lesen. Die Seite ("tipps.html") ist auch für Sie anbei, genauso wie die Seite "news.html", welche auch in der Box 2 verlinkt ist - und zwar bei den "Weiterlesen-Links". In der Box 2 sind sogenannte Sprungmarken (Anker) als Link gesetzt, die exakt das jeweilige News-Datum in der Datei "news.html" anspringen.
Liste mit eigenem Aufzählungszeichen, verlinkt:
Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.
Liste mit Aufzählungszeichen "circle", nicht verlinkt:
- Sed
- Condimentum
- Bibendum
- Semper
Viel Spaß mit diesem Design. Scelerisque ut, pulvinar vel, sem.
Design-Name: Unsere Gesellschaft im Wandel.
|
|
