Tipps und Ticks für Weppages

Schöne Webpages mit (X)HTML und CSS, natürlich auch nützliche Tipps zur Verbesserung des Lesbarkeit!!

Wichtig: Dies ist kein Tutorial zum erlernen von (X)HTML/CSS, sondern nur eine Sammelung von Tipps und Tricks für Webpages. Es wird auch nicht gelehrt, wie man eine Weppage baut. Dieses Wissen wird vorrausgesetzt.

Inhalt

Allgemein:
Worauf man beim Erstellen eine Webpage achten sollte
Trennung von Struktur und Optik
Eine Page, mehrere Designs

Grafische Effekte:
Transparente Hintergründe
Blur-Effekt

Allgemein:

Worauf man beim Erstellen einer Webpage achten sollte:
Hier nun eine Liste, von Dingen, die man beachten sollte:

Halte die Page gut lesbar
Teste deine Page mit möglichst vielen Browsern
Halte dich an Webstandards! Benutze den W3C Validator, um deine Page zu checken!
Optimiere niemals für einen Bestimmten Browser oder Bildschirmauflösung
Finger weg von Flash und Konsorten.
Code selbst!!
Vermeide Javascript
Trenne Optik und Struktur
Sorge für eine möglichst kurze Ladezeit
Nicht zu viele Grafische Effekte einbauen. Diese sind zum Teil sehr Rechenintentiv.
Teste, ob man vernüntfig scrollen kann

Trennung von Struktur und Optik
Es hat schon Vorteile, Optik von Struktur zu trennen. Wenn man die ganzen optischen Eingenschaften in einer sepraten Datei sammelt, genügt es die Datei auszutauschen, um der Page eine ganz anderes Gesicht zu geben. Wie das geht, wird im nächsten Punktbeschrieben.

Eine Page, mehrere Designs
Kommen wir zur ersten Anleitung, nach dem langen Geplapper und Predigten.
Also: Als erstes schreiben wir die Page gewöhnlich. Immer, wenn ein (X)HTML-Element gestaltet werden soll geben wir diesem als Eigenschaft class=wasAuchImmer Das wasAuchImmer kann durch eine beliebige Buchstabenfolge ersetzt werden. Man kann auch die selbe Folge mehrfach verwenden.
Beispiel:

<span class=fat>Fetter Text</span> Normaler Text<br>
<span class=fat>Wieder fett</span> wieder normal<br>
<img src="bild.png" class=pic>

Hier werden "Fetter Text"und "Wieder fett" mit den gleichen Eigenschaften versehen.
Wenn die Page soweit fertig ist, erstellen wir eine Datei, in der die ganzen Eigenschaften definiert sind:

body {
    background:#ffff00;
}

.fat {
    font-weight:bold;
}

.pic {
    width:100px;
    hight:100px;
}

Nachdem wir damit fertig sind, wird die Datei gespeichert. Der Name ist egal. Zum Beispiel kann man "style.css" verwenden.
Jetzt muss die Datei noch eingebunden werden. Das geschieht im Header-Teil als link-tag.
Also so:

...
<html>
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="datei">
        ...
    </head>
    ...

Dabei muss noch datei durch den Dateinamen ersetzt werden. Es können auch relative Pfade genutz werden.
Für jedes Design erstelle wir eine eige Datei, die die Eigenschaften enthält. Dann muss man nur die angabe im link-Tag ändern, um der Page eine neue Optik zu verleihen.

Zum abschluss ein Beispiel dazu:
Beispiel

Grafische Effekte

Transparente Hintergründe
Diese Technik ist nützlich, wenn man ein Hintergrundbild verwenden will, welches die lesbarkeit extrem erschwert. Diese Technik funktioniert aber nicht mit IE6. Also sollte zum testen ein anderen Browser genommen werden.
Fangen wir an:
Zunächst schnappen wir und eine Bildbearbeitung und erstellen ein neues Bild mit der Größe: 1px x 1px.
Das scheint zwar sinnlos zu sein, solch ein kleines Bildchen zu erstellen, doch es ist diesparsamste Methode.
Falls das frisch erstellte Bild keinen Alpha Channel hat, fügen wir dem einen hinzu.
Dann Radieren wir alles weg, inklusive der Deckkraft, so dass danach ein volltransparentes Bildchen bleibt.
Nun wählen wir eine Beliebige Farbe und stellen die Zeichen-deckkraft auf einen Wert zwischen 0% und 100% ein. Der Lesbarkeit halber sollte man aber besser zwischen 50% und 100% wählen. Da man das Hintergrundbild auch noch sehen soll, emphielt sich eine Deckkraft zwischen 50% und 75%. Man sollte da ein wenig experimentieren.
Wenn das erledigt ist, speichern wir das Bild als PNG ab. Etwa unter "textbg.png".
Dann müssen wir nur noch dieses Bild als Hintergrundwählen.
Beispiel:

...
<div class=textbox>
Text Text, Text und nochmal Text
</div>
...

Wobei textbox wie folgt gestaltet ist:

...
.textbox {
background:url(textbg.png);
}
...

Das wars auch schon. Es folgt nun ein Beispiel dazu:
Beispiel

Blur-Effekte
Um Blur-Effekte zu zaubern muss ein wenig mehr getan werden.
Wir benötigen vom Hintergrundild zwei Versionen: Eine Normale und eine geblurte.
Erstellen wir zunächst das normale Hintergrundbild.
Etwa dieses:

Bei bedarf kann für das geblurte Bild das original zunächst ein wenig aufgehellt/verdunkelt werden (Je nach vorliebe). Das originale bleibt dabei unberührt.
Nach dem Aufehllen könnte es etwa so ausschauen:

Jetzt müssen wir, um scharfe Kanten bei der Darstellung zu vermeiden, die Bildgröße verdoppen, damit das Bild genau viermal reinpasst.
Dann sorgen wir auch dafür, dass das Bild viermal kommt:

Nun müssen wir einen Blurfilter (oder einen eichzeichner) darauf ansetzen. In Gimp findet man den Dialog bei "Filter"->"Weichzeichnen"->"Gaußscher-Weichzeichner" (Es kann auch ein anderer genutz werden).
Nachdem man den Filter darauf angesetzt hat könnte es etwa so ausschauen:

Wir sind aber noch nicht fertig. Jetzt müssen wir noch wieder auf die ursprüngliche Größe zurechtschneiden.
Wir erstellen ein neues Bild mit der ursprünglichen Größe.
In dem Beipsiel ist das Hintergrundbild 420x300 px groß. Also ist die Verdoppelung 840x600 groß.
Also scheiden wir folgenden Bereich aus: 210x150px - 419x299px, also einen 210x150px Bereich.
Dieser wird unten rechts(!!) im neu erstellen Bild eingefügt.
Die drei weiteren Bereiche sind: 210x300px - 419x449px nach oben rechts
420x150px - 629-299px nach unten links
und 420x300px - 629x449px nach oben links
Dann schaut das neue etwa so aus:

Jetzt können wir das original und das geblurte einsetzen.
Dazu geben wir dem HTML-Body, und den bereich der geblurt werden soll folgende eingenschaften:

body {
background:url(bg.jpg) fixed;
}

.blur {
background:url(bgBlur.jpg) fixed;
}

Abschließend ein Beispiel:
Beispiel