Name der Homepage

Das Layout

Dieses Design heisst: "Natural Feelings".

Ein sympathisches junges Mädchen mit roter Blume im gelben Rapsfeld. Wir haben die Farben des Layouts so gewählt, daß die Leuchtkraft des Fotos noch verstärkt wird. Ach ja, haben Sie es bemerkt? Hier wird auch mit unseren Nationalfarben Schwarz Rot Gold gespielt. Spätestens bei der nächsten Fussball-WM also wieder mächtig angesagt! Mittlerweile gilt unser Land aber ja auch fernab des Fussballs als eines der beliebtesten Ländern der Welt. Viel Spaß also mit diesem Layout.



Die Technik

Die Breite der Gesamtkonstruktion beträgt 860 Pixel. Ausgehend von diesem Wert (860 Pixel = 100 %) bekommt die Spalte mit dem Foto 66 Prozent Breite und die Spalte daneben mit der Navigation 34 Prozent Breite. Die vorstehend genannten Werte sind auch veränderbar, sowohl für die Pixelwerte der Gesamtkonstruktion als auch für die Prozentwerte des Kopf-Bereiches (hier Foto und Navi rechts). Den Werbespruch (Your Slogan Here), welcher auf dem Foto als veränderbarer Text liegt, können Sie auch an eine andere Position innerhalb des Fotos platzieren. Die Positionierung stellen Sie in der CSS-Datei ein, dort unter "#logo" ändern Sie die vertikale (oben, mitte, unten) Ausrichtung bei "vertical-align" (top/middle/bottom) sowie bei "padding" die Pixelangaben. Wer keinen Spruch möchte, löscht diesen einfach.

Bonus: Probieren Sie doch statt der grauen Hintergrund-Grafik "bg.jpg" doch auch mal die andere Hintergrund-Grafik namens "bg2.jpg" aus. Oder Sie wählen anstatt einer Hintergrund-Grafik einfach eine beliebige Hintergrund-Farbe aus.

Tipp für fortgeschrittene Anwender: Ändern Sie die Pixel-Konstruktion blitzschnell in eine Prozent-Konstruktion. In der CSS-Datei schreiben Sie bei #breite statt "width:860px" z.B. "width:82%" oder beliebig andere Prozentwerte.

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 Navigation

Textlinks. Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen. 1 Menü oben, 1 Menü oben rechts. Beide Menüs oben sind um einige Links zu erweitern bzw. natürlich auch zu verkürzen.

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



Tipp

Wie in vielen unserer Vorlagen ist der Text im Inhaltsbereich hier als Blocksatz gestaltet, d.h. gleiche Ausrichtung der Buchstaben an linker und rechter Textkante - weil es einfach schick aussieht und wir es mittlerweile nicht nur aus den Print-Medien, wie Zeitungen oder Zeitschriften, gewohnt sind. Der "Look" ist einfach "Profi-Like". Nur bei sehr langen Wörtern oder bei aufeinanderfolgenden längeren Wörtern kann es evt. nicht so schön aussehen, das liegt in der Natur der Sache.

Die Lösung ist simpel: Wählen Sie andere Wörter - meistens passt es dann auch schon. Und/oder machen Sie an bestimmten Stellen im Text einen Zeilenumbruch. Die Alternative: Sie ersetzen in der CSS-Datei unter "textbox" die Angabe "text-align:justify" durch "text-align:left", um eine linksbündige Ausrichtung des Textes, also eine Ausrichtung ohne Blocksatz zu gewährleisten.
Mike Muster GmbH & Co. KG  •  Spezialstrasse 55  •  55234 Sampletown