Design: "Amsterdam"

Die in dieser Homepagevorlage verwendeten Farben sind in der Grafik wiederzufinden. Die Vorlage kann auch bei Bedarf ganz nach Ihrem Geschmack bzgl. der Hintergrund- und Schriftfarbe sowie der Schriftart etc. verändert werden. Anpassungen jeglicher Art sind alle über die extern ausgelagerte CSS-Datei vorzunehmen.

Reine Div-Konstruktion

Die Gesamtbreite des äusseren Hauptrahmens (zentriert) liegt bei 700px. Innerhalb des Divs für den Rahmen befinden sich weitere Divs für die Grafik, Navigation, Inhalt sowie der Fußzeile. Auch wenn es auf den ersten Blick so scheint, liegt der Inhalt, in dem Sie gerade lesen, nicht in einem Iframe, sondern ebenfalls in einem Div mit einer festen Größe von 520 x 220px (B x H). Befindet sich darin mehr Text, so wird automatisch eine Scrollbar angezeigt, bei weniger Text wird diese automatisch deaktiviert. Alle Seiten der Webvorlage sind bereits angelegt, daher können Sie sich einmal durch die Navigation klicken, um zu sehen, wie eine Seite mit weniger Text dargestellt wird. Außerdem werden Sie dabei auch feststellen, dass immer der Navigationslink auf der Seite, auf der Sie sich jeweils gerade befinden, mit einer Hintergrundfarbe versehen ist. Praktisch ist das besonders für Besucher, die dadurch einen besseren Überblick bzgl. der Seitenposition erhalten.

Navigation und allgemeine Links

Das vertikale Navigationsmenü kann bei Bedarf noch um ein oder zwei Links erweitert werden, allerdings ist dann in der CSS-Datei unter #navi der px-Wert bei line-height dementsprechend zu verringern. Bei der aktiven Seite liegt der Verweis nicht in einem <a>-Tag, sondern innerhalb eines <span>-Tags.
Hier noch ein allgemeiner Link im Text ohne Ziel!

Grafik

Die hier verwendete Grafik in der Größe von 700 x 270px kann, wenn gewünscht, natürlich auch durch eine andere ersetzt werden. Allerdings sollten Sie beachten, dass der linke Teilabschnitt (Breite des Abschnitts: 180px) der Grafik mit einer 50%igen Deckkraft in weiß aufgefüllt wurde, um eine derartige Transparenz für die Navigation zu erhalten. Wenn Sie über ein dafür geeignetes Bildbearbeitungs-Programm (wie z. B. Photoshop o. ä.) verfügen, können Sie dies ebenfalls mit einem von Ihnen gewünschten Bild nachvollziehen. Verwenden Sie, wenn möglich, die selbe Breite des Teilabschnittes von 180px für die Transparenz, sofern die Grafik dieselben Maße hat, wie das hier verwendete. Weicht nur die Breite des Teilabschnittes ab, so notieren Sie das dementsprechend unter der Id (Id = #) #navi in der CSS-Datei; hat die Grafik insgesamt eine andere Breite oder Höhe als das hier verwendete Bild, so müssen in der CSS-Datei noch mehrere Einträge angepasst werden, die unter der Id #rahmen, #image und ggf. auch unter #navi zu notieren sind.

Selbstverständlich können Sie auch für jede Seite eine andere Grafik verwenden, die dann allerdings alle gleich groß sein sollten. Legen Sie dazu weitere Ids für die #image (z. B. #image2, #image3 etc.) an und hinterlegen Sie dann jeweils die gewünschte Grafik. Vergessen Sie bitte dann auch nicht in den div. Html-Dokumenten die Ids entsprechend zu hinterlegen.

Nach Anpassung des Homepagenamens, ggf. der Grafik, Verweise sowie der Fusszeile sind die bereits schon angelegten Html-Dokumente noch dementsprechend umzubenennen.

Weitere Infos

Bitte beachten Sie: Die Nutzung dieser Homepagevorlage ist nur für private Inhalte kostenlos, sofern der Backlink am unteren Ende, der auf unsere Seite (http://www.homepage-vorlagen-webdesign.de/homepagevorlagen/) verweist, erhalten bleibt. Der Backlink darf nur gegen Bezahlung entfernt werden! Für eine gewerbliche bzw. kommerzielle Nutzung ist diese Homepagevorlage ebenfalls zu erwerben. Auf nachfolgenden Links gelangen Sie zu den Nutzungsbedingungen, bzw. zum Bestellformular von homepage-vorlagen-webdesign.de!

Diese Webvorlage ist W3C-konform (valides HTML und CSS)

Valid HTML 4.01 Transitional Valid CSS!