Leistungsnachweis Homepage Daniel Spiri

Transkript

1 Leistungsnachweis Homepage Daniel Spiri Idee Die Idee meiner Homepage beruht auf dem Thema Chamäleon. Diese exotischen Reptilien gehören zu meinen Lieblingstieren und deshalb ideal für die Homepage. Die Seite ist so aufgebaut, dass der Besucher in ein Terrarium schaut. Dabei sieht er zuerst das Chamäleon, dann die anderen exotischen Mitbewohner. Vorgehensweise 1. Ich überlegte mir das Thema und wie ich es umsetzen konnte. 2. Auf Photoshop baute ich mir eine Musterseite in Originalgrösse. 3. Ich überlegte mir anhand dieses Muster, wie ich was umsetzen konnte. Welche Teile ich als Grafik einbinden musste, und welche ich mit CSS gestalten konnte. Die Rundungen unten könnte man theoretisch mit CSS machen, da ich aber bei meinen Nachforschungen auf Anzeigefehler hingewiesen wurde, entschied ich mich diesen Teil aus der Musterseite auszuschneiden und als Grafik einzufügen. Dateiname Rundungen: Rahmen unten.jpg Der Rest, habe ich mit CSS gestaltet und zusammengefügt: 4. Menü-Rahmen Rahmen aussen.rahmentop { width:994px; padding:10px 0 10px 0; margin:auto auto; border:none; color:#c9031b; background:#2eaf00; vertical-align:middle; text-align:center; font-family:arial; font-style:normal; font-size:30px; } #rahmenhome { width:994px; height:885px; border-left-width:3px; border-left-color:#fff; border-left-style:solid; border-right-width:3px; border-right-color:#fff; border-right-style:solid; border-bottom-width:3px; border-bottom-color:#000; border-top-style:solid; border-top-width:0px; border-top-color:#000; border-top-style:solid; margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; color:#e9ffe2; background:#000; vertical-align:top; position:relative; }

2 5. Ich fügte der Bilder auf der Home Seite ein und das platzierte das Chamäleons auf der rechten Seite. Dabei mussten die einzelnen Rahmen auf den Inhalt abgestimmt werden, damit das Chamäleon schön eingefasst werden konnte. 6. Die Inhalte werden platzieren und mit CSS gestaltet. Als Hilfestellung unterstützte mich folgende Seite: Ich suchte passende Anwendungen und passte diese auf meine Seite an. 7. Ich fügte die Fotogalerie ein. Hier kopierte ich den Code von dieser Seite: Es ist eine auf den ersten Blick sehr komplizierte CSS und HTML Verbindung. Ich kreierte zu diesem Zweck eine Testpage, auf der ich lernte wie dieser Code aufgebaut ist, und wie ich Ihn auf meine Bedürfnisse anpassen konnte. 8. Als Abschluss Validierte ich die Homepage auf folgender Seite: Ich konnte aber nicht bei allen Fehlermeldungen einen Fehler finden. 9. Testlauf Firefox und Windows Explorer 9.0 Farbkonzept Das Farbkonzept stüzt sich auf den natürlichen Lebensraum der Chamäleons.. Für die Feinabstimmung der Farben habe ich Hilfe von folgender Page erhalten: Hier konnte ich die Grundfarbe Grün eingeben und die Page berechnete mögliche Varianten. Farbpalette #E9FFE2 #79FF49 #A4A4A4 #2EAF00 # #333333

3 Positionierung

4 Fazit Das Programmieren der Page war für mich als Anfänger mit viel Zeit verbunden. Ich musste jeden Schritt überprüfen, anschauen und eventuell korrigieren. Bei einigen Problemen kam ich selber nicht mehr weiter und konnte dann auf die Unterstützung der Dozenten zählen. An dieser Stelle herzlichen Dank an Sonja Öttl. Mit Hilfe von verschiedenen Internetseiten konnte ich ein gutes Ergebniss erzielen. Mein persönliches Highlight dieser Homepage ist die Fotogallery mit Hovereffekt. In Anlehnung an den Farbenwechsel der Chamäleons, wechseln die Bilder. Alle Bilder habe ich selber im Tierraum der Kantonsschule Frauenfeld, im Zoo Zürich und zu Hauseaufgenommen. Das Kontaktformular funktioniert, leider kann es es nicht real verschickt werden. Um eine saubere Gliederung zu erhalten, habe ich mit Tabellen innerhalb der Rahmen gearbeitet. Dies garantiert mir eine gleichbleibende Formatierung auf allen Seiten.

5 Leistungsnachweis Bildbearbeitung Daniel Spiri Allgemein Alle Fotos finden sich unter Imtec/Bilder. Die Bilder in der Gallery wurden früher schon einer Farb- und Belichtungskorrektur unterzogen. Ich habe lediglich die Grösse angepasst. Quelle: Daniel Spiri Cham1.psd Dieses Foto ist das Startfoto auf der Homepage. Das Chamäleon war inmitten eines Urwaldes, diesen habe ich mit der Pfadfunktion ausgeschnitten und transparent gemacht. Quelle: Daniel Spiri, Masoala Regenwald Zoo Zürich 2007 Chamäleon Ast.psd Hier ist der Wiedererkennungswert wichtig. Speziell an diesem Foto ist, dass der Ast, an dem das Chamäleon hinaufklettert, in Wirklichkeit viel kürzer ist. Ich habe den Ast nach dem Ausschneiden merfach kopiert und dann mit Weichzeichnen angepasst. Quelle: Daniel Spiri, Masoala Regenwald Zoo Zürich 2007 Schweiz.psd Dieses Foto Sybolisiert in der Homepage den Herkunftsort. Ich habe eine Schweizerkarte genommen, diese eingescannt, und den Kanton Grabünden ausgeschnitten. Dann habe ich mein Foto eingepasst. Quelle: Daniel Spiri, Tanja Thoma 2008