Metainformationen zur Seite
Dies ist eine alte Version des Dokuments!
Banner
Banner sind die großen Bilder (640px * 200px), die Artikeln voran stehen. Ist für einen Artikel kein Banner vorhanden, so wird ein Standardbanner angezeigt.
Die Banner lagern sowohl auf dem Schulserver als auch auf einem externen Server. So lädt unsere Seite schneller. Leider ist es nicht einfach möglich die Bilder an diese Stellen hochzuladen, also bitte an mich (ristigl@ratsgymnasium-pe.de) senden.
Obwohl die Banner vom externen Server geladen werden, sollte die Bildgröße auf ca. 40kb beschränkt sein. Weiterhin sollte das Bild für die Homepage optimiert werden.
Werbebanner
Werbebanner sind Bilder die links und rechts neben den Hauptspalten angezeigt werden. Bei geringer Auflösung sind sie nur mit horizontalen Rollen sichtbar.
Werbebanner sind grundsätzlich unwichtiger als die Artikel. Jedoch wandern Artikel schnell von der ersten Position nach unten, sodass sie aus dem Blickfeld verschwinden. Die Werbebanner bieten also die Chance Inhalte an prominenter Stelle länger im Blick zu lassen.
Werbebanner sind natürlich auch bezüglich der Ladezeiten zu optimieren! siehe Bilder
Parallax-Effekt
Eine besondere Art von Bannern sind die, die einen Pseude-3D-Effekt hervorrufen. Mehrere teilweise durchsichtige png-Dateien werden übereinander gelegt und verschieben sich unterschiedlich stark.
Die Bilder sollten alle das Format 800×300 Pixel haben. Die oberste Ebene wird so stark verschoben, dass Elemente nicht angeschnitten sein dürfen. Siehe z. B.: http://www.ratsgymnasium-pe.de/713
Wechselnde Banner
Wenn ein Banner nicht reicht, so können die Banner auch durchwechseln: http://www.ratsgymnasium-pe.de/729
<div class="fpi lasse_slide"><img class="fpi" src="http://www.ratsgymnasiumpeine.de/img/2012/bar-aschersleben1.jpg" alt="alt" width="640" height="200" /> <img class="fpi" src="http://www.ratsgymnasiumpeine.de/img/2012/bar-aschersleben2.jpg" alt="alt" width="640" height="200" /> <img class="fpi" src="http://www.ratsgymnasiumpeine.de/img/2012/bar-aschersleben3.jpg" alt="alt" width="640" height="200" /></div>
Hierbei ist natürlich besonders auf die Bildoptimierung zu achten, da mehr Bilder geladen werden müssen!