Name der Homepage |
Your Slogan here
Welcome
and enjoy !! |
|
|
|
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
|
|