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. |
Rob Berenschot * 34131 Kassel
|
|