Name der Homepage

Das Layout

Dieses Design heisst: "Make Love".
Zwei Insekten auf einer Pflanze. Wir haben die Farben des Layouts so gewählt, daß insbesondere Fotos sehr gut hervorgehoben werden. Nun, Bilder sehen auf einem dunkelgrauen Hintergrund in der Regel immer am Besten aus. Klar kommt es auch auf das jeweilige Foto an, sprich: ist es eher hell oder dunkel - aber in der Summe zeigt sich ein dunkler Hintergrund bei Fotos immer am vorteilhaftesten. Viel Spaß damit.



Die Technik

Zur Konstruktion: Die nachstehend genannten Werte sind auch veränderbar. 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.

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 Werte bei "vertical-align" (top/middle/bottom) sowie bei "padding" die Pixelangaben. Wer keinen Spruch möchte, löscht diesen einfach.

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



Der Bonus

Die Ausgangsversion (index.html) ist ja eine Pixelkonstruktion (hier 860 Pixel, wobei dieser Pixelwert ja veränderbar ist in einen anderen Pixelwert. Einzustellen in der CSS-Datei bei #breite {width:860px}

Als Bonus gibt es anbei noch die Version2 (index2.html). Die Version2 ist eine Prozentkonstruktion. Hier mit 82 Prozent der Breite des Bildschirms. Ebenfalls veränderbar. Und zwar in der CSS-Datei bei #breite2 {width:82%}. Spielen Sie einfach mal mit verschiedenen Prozentwerten und der Unterschied wird Ihnen deutlicher werden. Solche eine Prozentkonstruktion testen Sie am Besten bei verschiedenen Bildschirmauflösungen, da hier ja eine Anpassung per Prozent an die Breite des Monitors erfolgt. Und es gibt ja z.B. untersch. Monitorgrössen wie 1024x768 oder 1280x960 oder weitere.


Der Tipp - Bonus Version

Übrigens: Bei der Bonus-Prozentkonstruktion (index2.html) werden Sie sehen, wie sich auch das Foto mit verlängert, wir haben es diesbezüglich erstens breit genug angelegt und zweitens auch nach links hin ausgeblendet. Damit wird der Slogan-Text auch immer relativ gut zu sehen sein. Bei dieser von uns gewählten Prozentzahl von 82% zeigt sich eine Fotoverlängerung konkret erst bei einer höheren Monitoreinstellung über 1024-Breite. Also zum Thema Webdesign bezüglich Monitorauflösung heisst das: Bei einer Monitorbreite von 1280 Pixel Breite sehen Sie ein breiteres Foto als bei einer Monitorbreite von nur 1024 Pixel Breite. Oder bei einer Monitorbreite von 1600 Pixel Breite sehen Sie ein breiteres Foto als bei einer Monitorbreite von nur 1280 oder 1024 Pixel Breite. Nicht nur das Foto, sondern die ges. Konstruktion passt sich an.
Mike Muster GmbH & Co. KG  •  Spezialstrasse 55  •  55234 Sampletown