Werkstatt

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!