neue hoffnung
Your Slogan here ...

Layout.

Dieses Layout heisst "Neue Hoffnung / new hope". Das grafisch wirkende Logo oben rechts passen Sie flexibel per einfachen Text an Ihren Namen an. Ihre möglichen Bilder im Text (wie hier die Osterglocken und die Holz-Brücke) können Sie vom Text umfliessen lassen - wie hier im Beispiel die beiden Grafiken, welche jeweils einen 30 Pixel (veränderbar) Abstand in alle Richtungen 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. Natürlich dürfen Sie auch unsere Beispielgrafiken verwenden. Die Farbe oder Breite der Bilderrahmen und den Abstand zum Text nach oben, unten, links und rechts können Sie ebenfalls leicht anpassen. Nach diesem Prinzip könnten Sie auch weitere Bilder hinzufügen, welche links und rechts (left/right) wie im Beispiel oder auch zentriert (center) ausgerichtet sind.

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.

Oben rechts sehen Sie ein kleines Logo (new hope). Dieses wirkt grafisch, obwohl es nur einfacher, anpassbarer Text ist. Will heissen: Die Länge passt sich automatisch Ihrem Namen an, verändern können Sie u.a. Hintergrundfarbe, Textfarbe, Rahmenfarbe, Schriftgrösse, Breite der Rahmen. Fortgeschrittene können dort statt der Hintergrund-Farben (hier: weiss und schwarz) neben anderen Hintergrundfarben alternativ natürlich auch Hintergrundbilder einsetzen und haben somit noch mehr Gestaltungsspielraum. Zur Grundkonstrukion: Dieses Layout haben wir mit einer Pixelbreite von 900 Pixel festgesetzt. Dieser Wert ist übrigens beliebig veränderbar, wenn sie möchten. Und zwar ganz oben in der Datei "format.css" bei #main. Probieren Sie hier wenn Sie wollen doch auch mal einen Wert von z.B. 740 Pixel oder 84%.

Im Logo-Bereich tragen Sie Homepagenamen und Slogan als einfachen Text ein. Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern. Morbi vitae sem. Sed quis lorem. Curabitur suscipit vehicula est. Donec venenatis. Phasellus tincidunt odio 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. 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.

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 tincidunt odio 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. 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.

Mauris: 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.


• • • • •

Navigation.

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

Das Menü hat 100 % (100 Prozent von in diesem Fall 900 Pixel). Innerhalb dieser Breitenangabe haben wir das Menü für Sie flexibel angelegt. (hier also: 900 Pixel = 100 Prozent). 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).

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.

Es gibt hier (index2.html) anbei noch die Version mit 8 Buttons für Sie. Viel Spass damit.
Max Muster GmbH
www.ihre-beispiel-adresse.de