Web-Design und -Technologien

Css Design Lab

Installieren Sie Css Design Lab als Sidebar in Opera oder Mozilla. Im InternetExplorer müssen Sie den folgenden Link Css Design Lab zu Ihren Favoriten hinzufügen.

Css Design Lab (IE-Version) ist eine Seite, auf der Sie interaktiv das Aussehen von Html-Elementen mittels Css formatieren können. Sie können somit ganz einfach verschiedene Farbkombinationen, Schriftarten, Rahmen und Abstände ausprobieren und müssen nicht für jede experimentelle Änderung mit ihrer Datei den umständlichen Zyklus "edieren - speichern - anschauen" zelebrieren. Wenn Sie ein passendes Design gefunden haben, so können Sie den Muster-Quellcode im Css Format kopieren um ihn für die Formatierung ihrer Seiten zu verwenden.

Kleine Helferlein

Bookmarklets sind einzeilige JavaScript-Programme, die als Lesezeichen (Bookmarks, Favoriten) gespeichert werden können. Karteikarten, auch Panels oder Sidebars genannt, sind schmale Seiten, die links vom Browserfenster angezeigt werden. Sie finden hier eine Übersicht der Helferlein, die ich selber erstellt habe.

Tips und Tricks - völlig legal

Hier finden Sie (noch völlig unsystematisch) einige Tips und Tricks für die Gestaltung von Internetseiten - nur mit standardkonformem Html 4.01 (Strict) und Css 2.0

WebDesign - so sollte es eigentlich sein:

Suchmaschinenoptimierung

Was nützt die schönste Seite, wenn sie keine Besucher hat? Leider reicht es meist nicht aus, gute Inhalte zu bieten, man muß diese auch bekannt machen. Heutzutage finden die meisten Besucher über eine Suchmaschine zu den Webseiten. Um von Suchmaschinen gut gelistet zu werden, sollten die Seiten einige Kriterien erfüllen: aussagekräftige Seitentitel, logisches Markup, Inhalte im Textformat, klare Seitenstruktur - detaillierte Informationen zu suchmaschinenfreundlichen Seiten gibt es bei den Suchmaschinenbetreibern. Bei wichtigen Webpräsenzen kann es auch sinnvoll sein, sich von einer Online Marketing Agentur beraten zu lassen, die neben der technischen Optimierung auch Marketingaspekte berücksichtigt.

Quelltext mit Zeilennummern und Syntaxhervorhebung

Manchmal ist es aus didaktisch-praktischen Gründen sinnvoll, Quelltextbeispiele mit Zeilennummern zu versehen und die Syntax hervorzuheben. Auf der Seite Quelltexte numerieren und formatieren finden Sie einige Tips, wie man Quelltexte mittels Html und Css formatieren kann.

Bildergalerien

Bildergalerien bestehen häufig aus einer Übersichtsseite mit kleinen Vorschaubildern und aus einer Reihe von Seiten, auf denen die großen Bilder angezeigt werden. Für jedes Bild eine Seite von Hand zu erstellen, ist relativ aufwendig. Es gibt verschiedene Möglichkeiten eine Bildergalerie zu implementieren, die jeweils ihre Vor- und Nachteile haben, z. B.:

Die Bildergalerien auf dieser Webseite werden mit der letzten Methode erzeugt. Sie finden hier das PHP-Skript sowie eine kurze Anleitung dazu.

Dynamische Css-Dateien mit PHP

Gelegentlich will oder muß man je nach Browser unterschiedliche Css-Stylesheets einbinden. Oder man will je nach Tageszeit ein unterschiedliches Layout der Seiten präsentieren. Vor allem im letzten Fall kommt man nicht an Skripten vorbei. Häufig wird mittels eines Skriptes in der Html-Datei eine Css-Datei geladen.

Beide Methoden haben den Nachteil, daß bei Änderungen die Skripte in allen Seiten geändert werden müssen. Falls der Webserver PHP unterstützt, ist die eleganteste Methode, die Skripte in das Stylesheet zu verlagern. (Natürlich kann man in Css keine PHP-Befehle aufrufen, aber man kann mit einer PHP-Datei Css-Befehle ausgeben lassen.)

Statt unterschiedliche Css-Dateien dynamisch einzubinden, wird eine dynamisch erzeugte Css-Datei eingebunden!

Man erzeugt eine PHP-Datei stil.php, die folgende Struktur hat:

<?php
header("Content-type: text/css");
[...]
if ($nacht){
 echo '
  body {background-color:black; color:white;}
 ';
}
else {
 echo '
  body {background-color:white; color:black;}
 ';
};
?>

Das PHP-Skript liefert also Css-Anweisungen zurück, die je nach Tageszeit unterschiedlich sind. Das Skript wird nun in den Html-Dateien mit < link rel="stylesheet" type="text/css" href="stil.php"> eingebunden. Will man nun, daß sonntags ein anderes Layout angezeigt wird, so muß man nur noch die Datei stil.php entsprechend ändern.

Übersicht

Neue Seiten