.: Name der Homepage :.
 

Das Layout

Dieses Design heisst: "Seerose".

Das Layout lässt sich farblich beliebig anders anpassen - natürlich mit Ausnahme des Schattens, denn der ist grafisch angelegt. Wir haben die Farben hier aus dem Foto mit der Seerose gezogen und mit etwas Weiss kombiniert. Highlight ist bei dieser Vorlage natürlich das Aufklapp-Menü. Lesen Sie mehr dazu weiter unten.



Die Technik

Wenn Sie statt der Seerose ein anderes Foto einfügen wollen - kein Problem. Tun Sie das in der Datei "format.css" unter "#top2", dort stellen Sie bei "height" auch die Höhe des Fotos in Pixel ein (im Moment 412px). Wählen können Sie auch eine geringere Höhe, es muss nicht die exakte Höhe Ihres Fotos angegeben sein. Somit haben Sie mehr Spielraum. Experimentieren Sie ein wenig.

Ausgerichtet in horizontaler und vertikaler Ebene wird das Foto an gleicher Stelle -unter "#top2"- bei "background-position" (Position des Hintergrund-Bildes). Hier sehen Sie die Prozent-Werte: 50% 50%. Das Foto wird somit horizontal (von links nach rechts) als auch vertikal (von oben nach unten) exakt mittig angeordnet. Der erste Wert steht für die horizontale Ausrichtung , der zweite für die vertikale Ausrichtung. Probieren Sie für eine andere Ausrichtung horizontal (links-zentriert-rechts) und vertikal (oben-mitte-unten) neben dem 50%-Wert auch die Werte 0% und 100%. Die Angabe 0% steht also für "links oder oben", die Angabe 100% für "rechts oder unten", je nachdem ob man diese an erster oder zweiter Stelle schreibt.

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. Wie üblich mit ausgelagerter CSS-Datei, um den Code übersichtlicher zu gestalten.



Die Navigation

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

Das Hauptmenü ist als Aufklapp-Menü gestaltet. Fahren Sie mit der Maus über die Links der Gruppe 1-4 und Sie sehen, wie sich die untergeordneten Links aufklappen. Jede der vier Gruppen enthält 3 oder 4 Links. Das ist nur ein Beispiel. Jeder dieser Gruppen können Sie auch sehr leicht in der HTML-Datei mehr oder weniger Links als in diesem Beispiel zuordnen. Es lässt sich auch eine fünfte Gruppe einfügen, dies sollten aber nur sehr erfahrene Anwender probieren. (Hierzu könnte man die Breite der Menü-Gruppen verringern und/oder die Gesamtbreite des Layouts verbreitern.) Der Schatten ist übrigens flexibel und würde bei einer Änderung der Breite dann automatisch anpassen.

Damit Sie flexibel sein können, gibt es ganz unten noch ein zweites Menü für Sie. Das Menü unten ist um einige Links erweiterbar.

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



Der Tipp

Bei allen Vorlagen legen wir die Höhe im Inhaltsbereich/Textbereich mit einem bestimmten Wert fest. Löschen Sie mal unseren Beispiel-Text, dann sehen Sie es praktisch. Bei dieser Vorlage ist das z.B. 900 Pixel. Sollte Ihr Text oder Inhalt bezgl. der Höhe dann länger sein als im hier im Beispiel, so verlängert sich diese Höhe automatisch, das ist per HTML einfach und praktischerweise so vorgesehen.

Wenn Sie aus bestimmten Gründen diesen Höhenwert im Inhaltsbereich verändern möchten (z.b. wenn Sie vielleicht sehr wenig Text haben), so können Sie das leicht tun wie folgt:

Sie ersetzen in der Datei "format.css" unter "#inhalt" die Angabe "height:900px" durch einen anderen Wert, z.B. "height:700px".
Mike Muster GmbH & Co. KG  •  Spezialstrasse 55  •  55234 Sampletown