Hinweis
Am Ende dieser Seite finden Sie unsere Bonus-Version als Schwarz-Weiss-Design mit weiteren Tipps zum Anpassen. Ansehen lohnt. Don´t miss it. Beide Versionen sind aber sowieso im Download-Paket enthalten.
Unsere Layout-Idee
Eine halbtransparente Grundkonstruktion, bei dem der Hintergrund durscheint. Ausserdem sollte der Text im Inhaltsbereich trotzdem noch gut lesbar sein. Zudem wollten wir auch die beiden Menüs mit einer anderen Transparenzstufe durchsichtig schalten.
Die Halbtransparenz funktioniert auch gut, sogar bei "onmouseover (hover)", also bei Mausberührung über den Menü-Links, sehen Sie dazu das linke Menü. Beim Klapp-Menü (Gruppe 1-4) haben wir wegen der optischen Abgrenzung zum Text im Inhaltsbereich bei "onmouseover (hover)" aber bewußt auf die Transparenz verzichtet.
Wir haben mit Textschatten in den Farben Weiss und Schwarz gearbeitet. Z.B. sehen bei den Links in den Menü einen weissen Schatten sowie auch ganz oben beim Homepagenamen. Dieses benötigt nur eine Codezeile (CSS3) und man kann damit spektakuläre Effekte erzielen, ganz ohne Grafikprogramm.
Die Seite scrollt über den feststehenden Hintergrund. Am Ende der Seite, also wenn Sie ganz nach unten scrollen, sehen Sie nicht nur das Bild freistehend, sondern auch eine Art Abspann, wie Sie es aus Filmen kennen.
Dieser Abspann-Text ist normaler Text und somit gut zu ändern. Passen Sie hier den Text und die Textfarbe an Ihre Bedürfnisse bzw. Ihr Hintergrundbild (sofern sie unseres nicht verwenden) an. D.h. ändern Sie Textfarbe und/oder Textschattenfarbe des Abspann-Textes.
Die Navigation
Aufklapp-Menü
Oben haben wir für Sie ein Aufklapp-Menü eingebaut. Fahren Sie über die Links der Gruppen 01-04 und es öffnen sich die Untermenüs.
Tipps zur Transparenz
Transparenz-Grafiken
Halbdurchsichtige Felder. Anbei sind verschiedene Transparenz-Grafiken (18 Stück - je 9 in der Farbe Weiss und Schwarz) mit unterschiedlichen Transparenz-Stufen, mit denen Sie bei Bedarf epxerimentieren können. Je nachdem ob Sie das Hintergrundfoto wechseln wollen und welche Farben dieses hat.
Vielleicht wollen Sie ja auch unser Foto beibehalten und trotzdem die Dichte der Transparenz erhöhen oder erniedrigen.
Die Transparenzgrafiken heißen "schwarz_10.png" bis "schwarz_90.png", die Grafiken sind von uns so benannnt, damit wir die abgespeicherte Transparenzstufe erkennen können. Wir haben im Grafikprogramm eine Grafik in der Farbe Schwarz in verschiedenen Transparenz-Stufen abgespeichert. Aus jeder Transparenz-Stufe wurde dann eine neue Grafik.
"schwarz_10.png" bedeutet hier, das bei der Farbe Schwarz der Hintergrund nur zu 10% durscheint, wobei dieser bei "schwarz_90.png" eben zu 90% transparent ist.
Weitere Transparenzgrafiken für hellere Felder in der Farbe Weiss sind ebenfalls anbei und heißen "weiss_10.png" bis "weiss_90.png".
Diese Grafiken haben wir verwendet
So sehen Sie auf der gesamten Konstruktion eine Transparenzstufe und auf den beiden Menüs noch mal eine andere.
"schwarz_40.png" in der Datei "format.css" sowie für die Menüs "weiss_70.png" zu finden in der Datei "menue.css" sowie in der Datei "klapp_menu.css".
Der Bonus
Sie befinden sich auf der Seite index.html. Die Bonus-Version als Schwarz-Weiss-Edition finden Sie hier auf index2.html anbei.
Black and White also und somit ein Klassiker in allen Genres und damit bleibt es immer trendy. Zeitlos. Und wie wir finden: es schaut auch richtig cool aus.
P.S. Es soll Ihnen gleichzeitig als Beispiel dienen, dass Sie, falls gewollt, auf jeder Seite ein anderes Hintergrundbild einbinden könnten.
|
Gruppe 01