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:

• Absolut fehlerfreier und standardkonformer Html-Code
• Formatierung nur mittels Css
• Inhalt auch mit einem Text-Browser lesbar (Lynx-kompatibel)
• Keine Frames!
• Möglichst keine Tabellen für Formatierung mißbrauchen.
• Kein automatisch ausgeführter JavaScript-Code, nur durch Benutzer explizit gesetzte Cookies.
• Keine Grafiken für Navigationselemente
• Relative Größenangaben für Schriften, Bereiche etc.
• Klare, nachvollziehbare Seitenstruktur, Navigationselemente auf jeder Seite.

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 Links auf der Übersichtseite weisen direkt auf die Bilddateien
• Verwenden von je einem Frame für die Navigation / Übersicht und das eigentliche Bild
• Navigation und Anzeigen der Bilder mit Javascript (in Kombination mit DOM oder Frames)
• Dateien lokal generieren (z. B. mit XML+XSLT) und anschließend auf den Webserver übertragen
• Skripte, die die Dateien auf dem Server generieren, z. B. mit PHP

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

Unabhängig davon, wie die Bildergalerien erzeugt und dargestellt werden, ist eine schnelle Internetverbindung immer von Vorteil. Dabei ist nicht nur die Downloadgeschwindigkeit relevant, sondern auch die Geschwindigkeit, mit der die Daten hochgeladen werden. Wenn man endlos auf das Hochladen der Bilder warten muß, dann wird das Galerie-Erstellen zum Geduldspiel. Daher ist es wichtig, sich vor der Auswahl eines Internetanbieters zu informieren (beispielsweise bei www.dslweb.de) und dabei auch auf die Upstream-Geschwindigkeit zu achten.

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.

• Auswahl mit Javascript - Dies ist die einzige Möglichkeit, wenn der Server keine Skripte unterstützt. Allerdings funktioniert es nicht, wenn der Benutzer Javascript ausgeschaltet hat.
• Auswahl mit PHP - Dies funktioniert unabhängig von den Benutzereinstellungen. Allerdings muß der Server PHP unterstützen. Nachteilig ist auch, daß dann alle Seiten in PHP erstellt werden müssen.

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.

Wer eine dynamisch generierte Webseite betreiben möchte, diese aber nicht selber programmieren will oder kann, der findet heutzutage eine Vielzahl an fertigen, kostenlosen Content-Management-Systemen. Die Palette reicht von Fotogalerien, Terminkalender, Wiki-Systemen, Online-Shops, Blogs bis zu allgemeinen, erweiterbaren Systemen wie z.B. Typo3.