 |
|
|
|
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 der 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 ... |
| |
Das Layout
+++ Plus +++: Die Seiten Tipps und News sind bereits verlinkt und mit Anpassungs-Tipps ausgestattet.
Sie können hier die Hintergrundfarbe oder die Hintergrundgrafik ändern, der Schatten beim Rahmen bleibt trotzdem erhalten bzw. passt sich Ihrer gewählten Hintergrundfarbe bzw. Hintergrundgrafik an, denn der weiße Rahmen besteht aus mehreren transparenten PNG-Grafiken.
Neben dem Foto ist noch ein Feld, welches Platz für Ihr evt. Logo bietet. Zwei Blanko-Grafiken in versch. Größen haben wir für Sie anbei. Unterhalb des Fotos steht der Seitentitel, also immer der Titel bwz. Link der jeweils angewählten Seite, hier im Beispiel die Startseite "Home".
Die kleinen Kalenderblätter sind ohne jede Grafik erstellt. Sie können diese daher bei Bedarf leicht farblich ändern sowie auch die Abmessungen anders einstellen.
Die Technik
Die Boxen auf der linken Seite könnten Sie für kleineren INHALT wie Bilder, Text, Links o.ä. nutzen, sie verlängern sich bei mehr Inhalt automatisch nach unten bzw. verkürzen sich bei weniger Inhalt. Die Höhe jeder einzelnen Box können Sie aber auch festlegen, falls Sie sehr wenig Inhalt in einer Box haben.
Fortgeschrittene könnten auch weitere Boxen hinzufügen, also darunter kopieren.
Design-Name: "The Blue Racer - Runden-Rekord"
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.
Die Kalenderblätter in Box 3: Wenn Sie dort klicken (Weiterlesen-Link), öffnet sich die Seite "news.html" anbei, mit Ihren Neuigkeiten; dort sehen Sie dann auch noch weitere Kalenderblätter chronologisch sortiert, welche auf dem weißen Hintergrund des Inhaltsbereiches auch recht schick aussehen.
Sowohl die Breite der Gesamtkonstruktion ist ändernbar, als auch die Breite der linken Spalte. Weiterhin sind auch alle anderen Felder in der Höhe veränderbar, so daß Sie ein komplett flexibles Template erhalten.
Die Navigation
Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Das erste Menü oben ist durchgehend nach rechts erweiterbar. Die Links haben hier eine unterschiedliche Breite, schreiben Sie einfach alle Links hintereinander - das ist praktisch. Beim zweiten Menü oben haben wir ein Prozent-Menü angelegt, dort hat jeder Link die selbe Breite.
Die beiden Menüs in der linken Spalte sind beliebig nach unten erweiterbar.
Da wir in den Boxen 2 und 3 eine kleinere Schrift und einen anderen Hintergrund als im Inhaltsfeld gewählt haben, haben wir diesbezüglich noch ein weiteres Menü definiert - denn falls Sie dort verlinken (wie hier im Beispiel die "Weiter-Links"), soll ja auch die Grösse und Farbe der Linkwörter wieder zum Boxeninhalt passen.
Nicht zu vergessen: Die Links im Inhaltsfeld erhalten ja auch eine eigene Link-Formatierung. Und das ist gut so. 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
Das Besondere: In der Box 3 sind sogenannte Sprungmarken (Anker) als Link gesetzt, die exakt das jeweilige News-Datum in der Datei "news.html" anspringen.
Mit Sprung-Links sind hier sogenannte Anker-Links gemeint. Denn diese verlinken nicht nur wie üblich auf eine Seite, sondern springen dort auch eine vorher festgelegte Position innerhalb dieser Seite an.
Die Tipps
Klicken Sie nachstehend auf die Links der Beispiel-Liste oder im zweiten Menü von oben auf die entsprechenden Links, um unsere Tipps zu lesen. Die Seite "tipps.html" ist auch für Sie anbei, genauso wie die Seite "news.html", welche außerdem in der Box 3 verlinkt ist - und zwar u.a. bei den "Weiterlesen-Links".
Liste mit eigenem Aufzählungszeichen, verlinkt:
Viel Spaß mit diesem Design. Scelerisque ut, pulvinar vel, sem.
|
|
