Meine Private Website

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.
Machek Ronald  •  Novaragasse 33  •  1020 Wien