Grafiken vom Inhalt trennen
Nach obenHintergrund
Es gibt im Grunde nur zwei Arten von Grafiken im Internet:
- Inhaltliche Grafiken
Inhaltliche Grafiken sind Bilder, die zum Inhalt der Seite gehören. Z.B. ein Diagramm in einem Bericht über die Umsätze einer Firma oder ein Foto eines Gebäudes bei einer Imobilienanzeige.
- Präsentationsgrafiken
Mit Präsentationsgrafiken sind eigentlich alle anderen Grafiken gemeint. Sie sind für das Verständnis des Inhalts nicht notwendig und dienen zur Verschönerung bzw. zum Design der Seite.
Trennung von Inhalt und Aussehen
Da wir ja schon wissen, dass man den Inhalt vom Aussehen trennt, sollte man auch jegliche Präsentationsgrafiken aus (X)HTML Datei entfernen und diese per CSS einbinden, da diese nicht von inhaltlichem Nutze sind. Dies bringt Vorteile für Designer und Besucher der Seite und praktisch keine Nachteile mit sich.
- Bei Veränderungen im Design muss nur die CSS Datei editiert werden und nicht dutzende von (X)HTML Dateien
- Besucher, mit einem mobilen Gerät wie ein Mobiltelefon oder PDA, erfreuen sich über schnelleres Laden der Seite
- Die (X)HTML Datei wird kleiner
Mobile Geräte
Da mobile Geräte im Normalfall kein CSS unterstützen, wird nur der Inhalt ohne jegliches Design angezeigt. Wenn man die Präsentationsgrafiken per CSS einbindet, werden diese auch nicht geladen. Dies ist vorteilhaft, da die Seite auf einem dieser Geräte sehr simpel dargestellt wird. Daher ist man sich sicher, das der Besucher nur den Inhalt der Seite zu sehen bekommt und nicht etwa sinnlose Grafiken, die irgendwo mitten in der Seite auftauchen.
Nach obenText mit Bilder ersetzen
In einem Header steht oftmals der Name der Seite. Dieser Name sollte in einem <h1> Tag stehen, so wie es bei der Strukturplanung erklärt ist.
Man kann den Text im <h1> Tag per CSS mit einem Bild ersetzen:
h1 {
text-indent: -9999px;
letter-spacing: -9999px;
height: 50px;
width: 350px;
background: url(bild.gif) no-repeat;
}
Das text-indent: -9999px; und das letter-spacing: -9999px; sorgen dafür, dass der Text nicht mehr sichtbar ist. width und height müssen an die Grösse des Bildes angepasst werden. Zuletzt wird das Bild als Hintergrundbild definiert. Hierbei muss die URL des Bildes url(bild.gif) angepasst werden. Mit no-repeat wird das Bild nicht wiederholt, d.h. nur einmal dargestellt. Eigentlich ist diese Angabe nicht nötig, da das wiederholte Bild nicht sichtbar ist, weil es sich ausserhalb der width und height Angaben befindet.
Diese Methode kann man in jedem Blockelement verwenden. Wenn man dies bei einem Inline-Element ebenfalls machen möchte, sollte man das Element per display: block; auf ein Blockelement "umschalten".