Design: "Amsterdam"

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

Reine Div-Konstruktion

Die Gesamtbreite des äußeren 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 Du gerade liest, 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 Vorlage sind bereits angelegt, daher kannst Du Dich einmal durch die Navigation klicken, um zu sehen, wie eine Seite mit weniger Text dargestellt wird. Außerdem wirst Du dabei auch feststellen, dass immer der Navigationslink auf der Seite, auf der Du Dich jeweils gerade befindest, 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 bzw. die Links auf der aktiven Seite sind deaktiviert.

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 solltest Du 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 Du über ein dafür geeignetes Bildbearbeitungs-Programm (wie z. B. Photoshop o. ä.) verfügst, so kannst Du dies ebenfalls mit einem von Dir gewünschten Bild nachvollziehen. Verwende möglichst 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 notiere das dementsprechend unter der Id (Id = #) #navi in der CSS-Datei; hat die Grafik insgesamt eine andere Breite oder Höhe als die hier verwendete Grafik, so müssen in der CSS-Datei noch weitere Einträge angepasst werden, die unter der Id #rahmen, #image und ggf. auch unter #navi zu notieren sind.

Selbstverständlich kannst Du auch für jede Seite eine andere Grafik verwenden, die dann allerdings alle gleich groß sein sollten. Lege dazu weitere Ids für die #image (z. B. #image2, #image3 etc.) an und hinterlege dann jeweils die gewünschte Grafik. Vergiß dann bitte nicht in allen Html-Dokumenten die Ids entsprechend zu hinterlegen.

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

Bitte beachte!

Die Nutzung unserer Homepagevorlagen ist für jedermann ( auch für gewerbliche / kommerzielle Zwecke ) kostenlos!
Einzigste Voraussetzung: Der Backlink am Fußende des Templates darf nicht entfernt werden! Siehe weitere Informationen hierzu in unseren Nutzungsbedingungen!