====== 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.

{{http://www.ratsgymnasium-pe.de/img/2014/bar-default.jpg}}

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 [[Bilder|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 [[computer:homepage:bilder|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 800x300 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

<code>
<div class="fpi parallax">
<div><img src="http://www.ratsgymnasiumpeine.de/img/2012/bar-fasching--5.png" alt="alt" width="800" height="300" /></div>
<div><img src="http://www.ratsgymnasiumpeine.de/img/2012/bar-fasching--4.png" alt="alt" width="800" height="300" /></div>
<div><img src="http://www.ratsgymnasiumpeine.de/img/2012/bar-fasching--3.png" alt="alt" width="800" height="300" /></div>
<div><img src="http://www.ratsgymnasiumpeine.de/img/2012/bar-fasching--2.png" alt="alt" width="800" height="300" /></div>
<div><img src="http://www.ratsgymnasiumpeine.de/img/2012/bar-fasching--1.png" alt="alt" width="800" height="300" /></div>
</div>
</code>
====== Wechselnde Banner ======
Wenn ein Banner nicht reicht, so können die Banner auch durchwechseln: http://www.ratsgymnasium-pe.de/729

<code>
GB:2012/bar-aschersleben1.jpg
GB:2012/bar-aschersleben2.jpg
</code>

Hierbei ist natürlich besonders auf die Bildoptimierung zu achten, da mehr Bilder geladen werden müssen!

Die Bilder müssen sich im Verzeichnis /var/www/img... befinden hieraufhaben nur Administratoren Zugriff.