Wissenswertes für Webdesigner beim Gestalten und Optimieren einer Website

Monika  &  Klaus

www.klamonfra.de

  1. Zum Inhalt springen
  2. Zur Hauptnavigation springen
English

Wissenswertes bei der Optimierung für Webdesigner beim Gestalten einer Website

Auf dieser Seite zeigen wir ein paar Tipps und Tricks bei der Optimierung einer Website. Zum Teil sind die Artikel aktualisiert worden und auf der Seite Wissenswertes, Codeschnipsel, Tipps und Tricks für Webdesigner beim Optimieren Ihrer Webseite zu finden.

Optimierung

23Aug2008

Wie erzeugt man einen Bildwechsel ohne Wartezeit?


Unten können Sie so einen Bildwechsel testen. Ursprünglich waren auch die Bilder auf der Seite "Über uns" mit dieser Technik realisiert.

Monika

Um nicht mit Java-Scripts und Mouseover-Effekten zu arbeiten, haben wir diesen Effekt mit CSS-Mitteln und der dynamischen Pseudo-Klasse ":hover" realisiert. Und damit nicht ein zweites Bild geladen werden muss, und es damit zu Wartezeiten beim Bildwechsel kommt, gehen wir folgendermaßen vor.

Anstelle von zwei Bildern (eins in "Farbe" und eins in "schwarz/weiß") haben wir die Bilder zusammengefügt. Unterhalb des "schwarz/weiß-Bildes" haben wir das "farbige Bild" eingebunden und erhalten somit nur ein Bild.

In dem Moment wo nun der Mauszeiger das "schwarz/weiß-Bild" berührt, verschieben wir das Bild exakt um die Hälfte nach oben und das "farbige Bild" erscheint. Das ist schon alles.



.monika { background: url(/bilder/monika.jpg) no-repeat 0 0; color: transparent; width: 18.75em; height: 12.5em; margin: 25px 25px 10px 25px; float: left; } .monika:hover { background-position: 0 -200px; }

Das Bild selber wird mit einem div-Container in die Seite eingebunden.

<div class="monika" title="Hallo, ich bin die Monika..."> Monika </div>


01Jan2013

Langsames Einblenden


Eine weitere Technik mit dem schönen Effekt des langsamen Einblendens eines Farbbildes (siehe unten) wird wie folgt realisiert.

Farbbild von Monika Schwarz-Weißbild von Monika

Hierfür benötigen wir die beiden Einzelbilder. Also ein Bild in "Farbe" und das andere in "schwarz/weiß" und legen diese Bilder mit CSS-Mitteln übereinander. Das "farbige Bild" liegt dabei als unterstes und das "schwarz/weiß-Bild" darüber.

Wenn man nun mit der Maus das "schwarz/weiß-Bild" berührt, blenden wir das Bild mit dem Befehl "opacity" langsam aus und das "farbige Bild" erscheint. Die folgenden Zeilen in CSS und HTML sind dazu notwendig.

.monika2 { position: relative; width: 18.75em; height: 12.5em; margin: 25px 25px 10px 25px; } .monika2 img { position: absolute; box-shadow: 0 0 10px 5px rgba(0, 0, 0, .5); transition: 2s ease-in-out; } .monika2 img.oben:hover { opacity: 0; box-shadow: 0 0 1px rgba(0, 0, 0, .5); }

Die beiden Bilder werden wie im ersten Beispiel mit einem div-Container eingebunden.

<div class="monika2" title="Hallo, ich bin die Monika..."> <img src="/bilder/monika2.jpg" width="300" height="200" alt="Farbbild von Monika"> <img class="oben" src="/bilder/monika1.jpg" width="300" height="200" alt="Schwarz-Weißbild von Monika"> </div>


24Aug2008

Mit welchen Tools haben wir unsere Webseiten getestet?


Um unsere Webseiten nach möglichst vielen Kriterien zu testen, haben wir diese mit verschiedenen Tools überprüft, von denen wir hier die wichtigsten auflisten.

HTML und XHTML

CSS

RSS-Feed

P3P

Accessibility (Zugänglichkeit)

Tools die mehrere Tests beinhalten


18Mai2011

Alles für eine gute Homepage.


Diese Webseiten und Programme haben uns bei der Erstellung unserer Website geholfen.

Zum Seitenanfang springen