Hi,
Tutorial zur Image-Replacement-Technik nach Gilder/Levin:
Ein header inklusive Hauptüberschrift einfach nur in den Quelltext schreiben und per CSS ein bißchen farblich und größenmäßig gestalten ist nicht schlecht, aber auch ziemlich langweilig.
Ein schönes Foto/Grafik mit einer gut gestylten Schrift als header, macht da doch viel mehr her.
Das Problem ist nur, das Suchmaschinen mit Bildern nix anfangen können und unsere Hauptüberschrift sollte natürlich auch vom "Sumabot" indexiert werden können.
Mit Gilder/Levin bekommen wir beides hin:
einen schönen header haben und den Überschriftentext als "Futter" für die "Sumabots" im Quelltext.
Erstellt euch zunächst mit einem Grafikprogramm eurer Wahl eine schöne Header-grafik/foto mit den Ausmassen 800x150px.
Den nachfolgenden Code einfach in einen HTML-Editor kopieren und als htm/html-Datei im gleichen Ordner wie die erstellte Grafik abspeichern.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Replacement nach Gilder/Levin</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:#696969;
font:100.01%/1.5 verdana, arial, helvetica, sans-serif;
}
#wrapper {
width:800px;
background-color:#dcdcdc;
margin:2em auto;
}
#green {
width:800px;
color:#f5f5f5;
background-color:green;
}
p {
width:770px;
color:#000;
background-color:#dcdcdc;
padding:15px;
margin:2em auto;
}
.aenderungen {
color:#c20810;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="green"><h1>Kleine Kisten</h1></div>
</div><!--Ende #wrapper-->
<p>Die Überschrift in der Box soll aus optischen Gründen durch ein Bild ersetzt werden.<br />
Da Suchmaschinen aber nicht in Bildern lesen können, wollen wir den Text der Überschrift
durch eine HG-Grafik verdecken.<br /> Durch eine sogenannte <i>Image Replacement Technik</i>,
hier nach <i>Gilder/Levin</i> wird die Grafik einfach über den Text geschoben.<br />
Um das zu erreichen brauchen wir ein absolut positioniertes und ein relativ positioniertes Element.
Das absolut posit. Element wird von den anderen Elementen ignoriert und kann deshalb
über diese geschoben werden.<br /> Damit es sich nicht auf dem
Bildschirm oben links hinstellt, braucht es ein relativ positioniertes Elternelement, damit es sich daran
orientieren kann.<br />
Bitte im Quelltext zwischen <h1> und <i>Kleine Kisten</i> ein leeres <span> notieren:<br />
<strong class="aenderungen"><h1><span></span>Kleine Kisten</h1></strong><br />
Das leere <span> wird nun absolut positioniert und bekommt die HG-Grafik zugewiesen.<br />
Das Elternelement <h1> bekommt <i>position:relative;</i> damit sich das absolute Element
daran orientieren kann.<br />
Die Grafik hat die Größe 800px x 150px.<br />
Bitte tragen sie in die CSS-Anweisungen im Kopf dieses Dokumentes direkt unterhalb der Gestaltungsanweisungen von body folgendes
zusätzlich ein:<br /><strong class="aenderungen">h1 { position:relative; width:800px; height:150px; }</strong><br />
<strong class="aenderungen">h1 span { position:absolute; width:100%; height:100%;<br />
background:url(kopp.jpg) no-repeat left top; }</strong><br />
Speichern und im FF und im IE betrachten.<br />
Im IE ist oben eine kleine Lücke, um die zu schließen ergänzen wir die CSS-Anweisungen wie folgt:<br />
<strong class="aenderungen">* html h1 { line-height:1.2; }<br /> * + html h1 { line-height:1.2; }</strong><br />
Das ist der sogenannte Sternchenhack für den IE.<br />
<strong class="aenderungen">* html h1</strong> wird nur vom IE6 interpretiert,<br />
<strong class="aenderungen">* + html h1</strong> wird nur vom IE7 interpretiert,<br />
Alle anderen Browser ignorieren diese Deklarationen!<br />
Jetzt müßte die Lücke oben verschwunden sein.<br />
</p>
</body>
</html>Im Browser aufrufen und den Anweisungen auf dem Bildschirm folgen.
koslowski