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

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>


10Apr2012

Anker definieren


Innerhalb einer Webseite werden Anker in der HTML-Seite platziert und, um einen Sprung an solch eine Ankerstelle zu veranlassen, Verweise zu solchen Ankern wie folgt geschrieben:

<a href="#ankername"> Verweis <a>

Der zugehörige Anker sieht dabei wie folgt aus:

<a name="ankername">...</a>

Unsere Seiten sind in XHTML geschrieben, und da benötigt man im Anker noch zusätzlich das Universalattribut "id" als eindeutige Bezeichnung. Aus diesem Grund sahen unsere Anker bisher wie folgt aus:

<a id="ankername" name="ankername" class="titel">...</a>

Mit dem "class"-Element wurde noch zusätzlich per CSS dafür gesorgt, dass kein Unterstrich beim fokussieren eines Ankers entsteht.

Diese Schreibweise war notwendig damit ältere Browser, wie zum Beispiel der Netscape, diese Anker anspringen können. Ältere Browser führen den Verweis nach HTML Logik aus und benötigen dafür das "name"-Attribut, während die neueren Browser für eine eindeutige Bezeichnung, das "id"-Attribut, benötigen.

Mittlerweile kann man aber davon ausgehen, dass die älteren Browser kaum noch benutzt werden. Und das hat uns veranlasst, uns von dem zusätzlichen Code auf unseren Seiten zu verabschieden. Außerdem darf in XHTML 1.1 das "name"-Attribut sowieso nicht mehr verwendet werden.

Damit würde ein Anker wie folgt aussehen:

<a id="ankername" class="titel">...</a>

Aber das "id"-Attribut hat noch den großen Vorteil, dass es vorhandenen Elementen, zum Beispiel Überschriften, zugewiesen werden kann. Und damit konnte auch das "class"-Element für das nicht Unterstreichen beim Fokussieren eines Ankers entfallen:

<h3 id="ankername">Überschrift</h3>

Das sieht schon wesentlich übersichtlicher aus.


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