Tutorial
Seit April 2004 bis ca. Ende Juni programmierte ich gemeinsam mit Schülern der Kapellenschule Augsburg im Rahmen eines von der EU geförderten Projekts eine Schulhomepage. Für HTML-Interessierte und Neulinge habe ich darum in der Subdomain los.webdaum.de eine Programmierschule zur Verfügung gestellt. Einfach mal reinschauen und testen!
Hier nun ein paar kleine Beispiele für Fortgeschrittene, die helfen, Webseiten ohne Einsatz von Grafiken ansprechend zu gestalten. Denn mit ein paar Programmier-Tricks kann man recht interessante Effekte erzeugen.
Das spart Speicherplatz und verkürzt die Ladezeiten.
Peppige Überschriften zum Beispiel können als richtiger Text, im Gegensatz zu Bildern, auch von Programmen und Suchmaschinen ausgelesen werden, von der Sprachausgabe für Blinde ganz zu schweigen.
Programmierter Text besticht durch gestochene Schärfe, denn besonders kleine Schrift hat im GIF-Format leider meist recht unscharfe Ränder.
So hier nun
Beispiel 1 Mit Hilfe von CSS lassen sich
spielend leicht schattierte Überschriften erzeugen.
Und so sieht der Quelltext aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
body { margin: 40px; background-color: #FFFFFF;}
h1 { font-family:Arial; font-size:28px; font-weight:bold; color:#000099; margin:0px; }
.schatten { color: #CCCCCC; }
.schattiert { position: relative; left: -3px; top: -35px; }
-->
</style>
</head>
<body>
<h1 class="schatten">Ich bin schattierter Text</h1>
<h1 class="schattiert">Ich bin schattierter Text</h1>
</body>
</html>
Zuerst wird im Dateikopf per CSS für eine
Überschrift erster Ordnung eine Schriftart,
Größe, Schriftschnitt, Farbe und ein Aussenrand gleich
Null festgelegt.
Sodann definieren wir zwei Unterklassen, eine für den
Schatten, ihr wird eine hellgraue Farbe (#CCCCCC)
zugewiesen.
Und eine für die eigentliche
Überschrift, mit der Bezeichnung .schattiert,
der dann eine relative Position zugewiesen wird.
Der Text der Überschrift wird im Bodybereich
zweimal nacheinander notiert, zwischen den bekannten
<h1>-Marken.
Würde man sich die Datei jetzt im Browser ansehen, so könnte man nur zweimal denselben Text untereinander lesen, was zugegebenermaßen ziemlich langweilig aussehen würde.
Deshalb kommt jetzt der Clou der ganzen
Geschichte: Die erste Überschrift bekommt die
class="schatten" zugewiesen und wird daraufhin
sofort ergrauen.
Die zweite aber wird jetzt
"schattiert" und relativ zu ihrem angestammten
Aufenthaltsort um 3 Pixel nach links und 35 Pixel nach oben
verschoben.
Fertig ist der Schatten!
Beispiel 2 Mit JavaScript(DOM) und CSS
Dynamisch Farben austauschen .
Hier zuerst der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Farbumkehr-Effekt mit JavaScript und CSS</title>
<style>
<!--
a:link, a:visited, a:active, a:hover {
text-decoration:none; font-weight:bold; font-family: Courier; font-size: 16pt;
}
a:link { color: #CCCCFF; }
a:visited { color: #CCCCFF; }
a:active { color: #000000; }
a:hover { color: #FFFFCC; }
#stellknopf {
position:absolute; left:60px; top:100px; }
-->
</style>
</head>
<body bgcolor="#FFFFCC">
<div id="stellknopf">
<a href="#" onmouseover="document.bgColor='#CCCCFF';" onmouseout=
"document.bgColor='#FFFFCC';" onclick=
"document.bgColor='#000000';">Farben austauschen</a>
</div>
</body>
</html>
Wieder wird im Dateikopf per CSS eine Formatierung, diesmal der Links, festgelegt.
Dem Link wird die Farbe helles Lila
#CCCCFF, dem Body die Farbe #FFFFCC,
helles Gelb zugewiesen.
Damit der Link beim Darüberfahren mit der
Maus Gelb wird, ist unter a:hover der Wert {
color: #FFFFCC; } notiert .
Im Link-Tag wird mit
onmouseover="document.bgColor='#CCCCFF';" die
Hintergrundfarbe Gelb gegen Lila ausgetauscht.
Damit , sobald die Maus das Link verlässt,
der Body wieder das alte Gelb annimmt, wird noch
onmouseout= "document.bgColor='#FFFFCC';"
notiert.
Jetzt tauschen Link und Body beim Darüberfahren mit der Maus immer ihre Farben1
Beispiel 3 Mit Hilfe von JavaScript
einen farbigen Sonnenuntergang zaubern .
Hier zuerst der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
var X = new Array("F","E","D","C","B","A","9","8","7","6","5","4","3","2","1","0");
var x1 = 0, x2 = 0;
function FarbSpiel() {
document.bgColor ="#" + X[x1] + X[x2] + X[x1] + X[x2] + "6" + "6" ;
x2 = x2 + 1;
if(x2 % 16 == 0) { x2 = 0; x1 = x1 + 1; }
}
for(var i = 0; i < 255; ++i) {
window.setTimeout("FarbSpiel()",1000);
}
FarbSpiel();
//-->
</script>
</head>
<body>
<p style="color: #666666; font-size: 64pt; font-family: Arial; text-align: center;">
Farbe!
</p>
</body>
</html>
Dieses Beispiel baut auf einem JavaScript von Stefan Münz, dem Autor von SelfHTML auf, mit dessen Hilfe man schwarze Hintergrundfarbe dynamisch nach weiss verändern konnte. Das funktioniert natürlich genau so gut umgekehrt - aber auch (mit gewissen Einschränkungen) in Farbe!
In diesem Script wird die Hintergrundfarbe mit
Hilfe der Funktion function FarbSpiel() aus
vordefinierten Werten konstruiert, mittels document.bgColor
="#" + X[x1] + X[x2] + X[x1] + X[x2] + "6" + "6" ; ,
beginnend bei hellem Gelb (#FFFF66). Bei den ersten
vier Stellen der hexadezimalen Farbangabe wird jetzt schrittweise
eine immer um den Wert 1 niedrigere Farbangabe erzeugt, also
#FEFE66, #FDFD66 u.s.w. Dadurch wird
das Gelb immer mehr in Richtung auf den Wert
#666666, ein dunkles Grau, abgedunkelt, um sich von
da in Richtung Dunkelblau #000066 zu bewegen. Damit
ist der Endwert erreicht, und hier endet die Funktion.
Es lassen sich so alle möglichen
Farbwertveränderungen voreinstellen, indem man nur jeweils
einen oder mehrere Werte fest setzt, also statt
X[x1] oder X[x2] einen Hexadezimalwert
(in Anführungszeichen!) hineinschreibt. Ausprobieren!
