Metainformationen zur Seite
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
|
computer:homepage:banner [2012/06/09 11:09] ristigl [Parallax-Effekt] |
computer:homepage:banner [2018/03/16 21:11] (aktuell) |
||
|---|---|---|---|
| Zeile 3: | Zeile 3: | ||
| 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. | 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.ratsgymnasiumpeine.de/img/bar-default.jpg}} | + | {{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. | 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. | ||
| Zeile 19: | Zeile 19: | ||
| 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. | 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 verschobem, dass Elemente nicht angeschnitten sein dürfen. Siehe z. B.: http://www.ratsgymnasium-pe.de/713 | + | 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 ====== | ====== Wechselnde Banner ====== | ||
| Wenn ein Banner nicht reicht, so können die Banner auch durchwechseln: http://www.ratsgymnasium-pe.de/729 | Wenn ein Banner nicht reicht, so können die Banner auch durchwechseln: http://www.ratsgymnasium-pe.de/729 | ||
| <code> | <code> | ||
| - | <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> | + | GB:2012/bar-aschersleben1.jpg |
| + | GB:2012/bar-aschersleben2.jpg | ||
| </code> | </code> | ||
| Hierbei ist natürlich besonders auf die Bildoptimierung zu achten, da mehr Bilder geladen werden müssen! | 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. | ||