Layout. ¤ ¤ ¤ ¤ ¤

Dieses Layout heisst "Upstairs". Mögliche Bilder im Text könnten Sie vom Text umfliessen lassen - wie hier im Beispiel die beiden Grafiken, welche jeweils einen 30 Pixel (veränderbar) Abstand zum Text haben - und auch einfach an jede andere Stelle des Fliesstextes positionieren.
Verschieben Sie nur im Fließtext die entsprechenden div-Bereiche, welche die Bilder einschliessen. Ach ja, sicher können sie auch die Farbe und Breite der Bilder-Rahmen anpassen. Wie immer: Wer keine Bilder im Text möchte, löscht diese einfach im HTML-Bereich.

Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In Vulputate gravida orci.Fusce bibendum pretium ante. Pellentesque sed enim nec odio laoreet congue. Nullam aliquam rhoncus libero. Morbi vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec venenatis.

Praesent nisl mi, condimentum sed, bibendum semper, fringilla a, felis. Phasellus odio Tincidunt vel nulla. Morbi vitae urna quis nulla imperdiet rhoncus. Aliquam feugiat, nulla non semper mollis, sapien velit rutrum urna, eu vehicula erat risus et leo. Praesent nisl mi, condimentum sed, bibendum semper, fringilla a, felis. Maecenas a nulla. Maecenas nisl. Cum sociis natoque penatibus et Magnis dis parturient montes, nascetur ridiculus mus. Mauris eu massa. In semper. Morbi vitae nisl at felis placerat porttitor. Morbi molestie. Cras ligula sapien, consequat sed, scelerisque ut, pulvinar vel, sem. In vulputate gravida orci.


Technik. ¤ ¤ ¤ ¤ ¤

Dieses Layout ist sehr flexibel. Wie folgt: Um die ganze Konstruktion legt sich ein Rahmen mit abgerundeten Ecken. Dieser Rahmen hat zudem einen Schatten-Effekt. Bei einer Änderung der Breite Ihrerseits passt sich dieser Rahmen automatisch an, d.h. er wandert flexibel mit.
Die Anpassung in der Höhe erfolgt dabei auch automatisch.

Die Original-Version (index.html) ist eine Pixel-Konstruktion mit zur Zeit einer Breite von 860 Pixel. Dieser Pixelwert ist veränderbar, tragen Sie ggflls. in der Datei "format.css" bei "#breite" einen anderen Wert ein, z.b. statt 860px schreiben Sie dort 900px oder andere Werte.

Außerdem: Statt des Pixelwertes bezgl. der Breite, können Sie auch leicht einen Prozentwert eintragen und haben dann eine flexible Prozent-Konstruktion. Sehen Sie dazu auch weiter unten die Bonus-Version.

Die Bonus-Version (index2.html) ist eine Prozent-Konstruktion mit zur Zeit einer Breite von 88 Prozent.

Dieser Prozentwert ist veränderbar, tragen Sie ggflls. in der Datei "format.css" bei "#breiteversion2" einen anderen Wert ein, z.b. statt 88% schreiben Sie dort 94% oder andere Werte. Die Version1 (index.html) ist eine Pixel-Konstruktion mit zur Zeit einer Breite von 820 Pixel (veränderbar). Um die ganze Konstruktion legt sich ein Schatten, welcher bei einer Änderung der Breite flexibel mitwandert. Außerdem: Statt des Pixelwertes bezgl. der Breite, können Sie auch leicht einen Prozentwert eintragen und haben dann eine flexible Prozent-Konstruktion.

Bearbeiten: Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern. Curabitur suscipit vehicula est.


Navigation. ¤ ¤ ¤ ¤ ¤

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.

Das Menü hat 100 % (100 Prozent von in diesem Fall 860 Pixel der Gesamtkonstruktion). Innerhalb dieser Breitenangabe haben wir das Menü für Sie flexibel angelegt. Jeder Button ist gleich breit, das wirkt optisch nett. Dieses Menü ist nur abhängig von der Länge der Textlinks, d.h. je kürzer die Linkwörter, desto mehr Links sind möglich. Im Moment sehen Sie also 6 Links mit der selben Breite je Link. Ein Link hat hier 16% (denn 6 x 16 = fast 100%). Somit können Sie auch für 8 Buttons einen Prozentwert von 12% oder für 5 Buttons eine Prozentwert von 20% oder für 7 Buttons 14% wählen. (Sie teilen also immer 100 durch die Anzahl der Buttons und runden nach unten ab).

Beim Zusatz-Menü darunter, welches rechtsbündig angeordnet ist, können Sie auch weitere Links hinzufügen.

Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link


Bonus.¤ ¤ ¤ ¤ ¤

Sehen Sie hier die Version2. Diese Version2 hat bezüglich der Grundkonstruktion eine Breite von 88 Prozent, während die Version 1 (index.html) ja eine Breite von 860 Pixel hat. Wie oben beschrieben können Sie auch den Pixelwert bei Version1 beliebig ändern, genauso wie den Prozentwert bei Version2. Was ist nun der Unterschied: Nun, Version2 passt sich mit einem bestimmten Prozentwert jeder Bildschirmbreite an, denn es gibt ja unterschiedlich grosse Monitore, wie z.b. 1024x768 oder 1280x900 oder weitere.

Übrigens: Beide Versionen sind gleichberechtigt, denn beide haben Ihre Vorteile, es kommt immer auf den Einsatz-Zweck, Ihrem Inhalt (viel oder wenig Text, sehr breite Bilder im Textbereich) oder Ihrem persönlichen Geschmack an. Insbesondere kommt es aber auf Ihren Kenntniss-Stand bezgl. HTML/Webdesign an, damit Sie überhaupt die Unterschiede einordnen können.
Max Muster GmbH
Fax: 49.303.7894561
www.ihre-webseiten-url.de