07.11.2008
CSS-Style-Switcher:
Unterschiedliche Designs für eine Seite
Mittels unterschiedlicher CSS-Dateien lässt sich das Layout einer Homepage unterschiedlich gestalten. Der HTML-Code bleibt dabei unverändert; es werden lediglich verschiedene CSS-Formatierungen in Form unterschiedlicher CSS-Dateien hinterlegt. So könnte man z.B. für die ältere Generation die Homepage mit einer größeren Schriftgröße zur besseren Lesbarkeit anbieten oder je nach Geschmack unterschiedliche Farbgestaltungen zur Auswahl stellen. Veranschaulicht wird dieser Effekt durch die bekannte Seite Zen Garden.
Die verschiedenen CSS-Dateien lassen sich mit einem "Styleswitcher" laden.
Grundlagen hierzu können Java- oder PHP-Scripte sein. Nachfolgend soll ein Styleswitcher mit einem PHP-Script entwickelt werden.
Voraussetzungen
- Das Webpaket des Hosters muss PHP-fähig sein.
- Sämtliche Homepage-Dateien müssen anstelle der üblichen Dateiendung "html" oder "htm" mit der Dateiendung php abgespeichert werden.
- Die Wirkungsweise dieser Anleitung ist nur online anhand der hochgeladenen Dateien erkennbar. Offline können PHP-Scripte nur umgesetzt werden, wenn auf dem PC z.B. XAMPP installiert ist.
Ein Cookie für die Haltbarkeit
Ein Cookie dient dazu, dass der gewählte Style beim nächsten Öffnen der Seite erhalten bleibt. In diesem Fall hat es eine Gültigkeitsdauer von einem Jahr (3.600 sec. x 24 h x 365 Tage).
Zu diesem Zweck wird der nachfolgende Code in einer Datei "cookie.php" gespeichert:
<?php
if(isset($_GET['style']))
{
setcookie("stylekeks", $_GET['style'], time()+3600*24*365, "/");
$style = $_GET['style'];
}
else
{
if(isset($_COOKIE['stylekeks']))
{
$style = $_COOKIE['stylekeks'];
}
else
{
$style = 'standard';
}
}
?>
Die "cookie.php" wird in das gleiche Verzeichnis gespeichert, in dem sich auch die "index.php" und die weiteren Seiten befinden.
Auf jeder Homepage-Datei wird nun vor dem Doctype folgendes Include gesetzt:
<?php include('cookie.php'); ?>
Auswahlstyles
Im nachfolgenden Beispiel sollen vier verschiedene CSS-Styles zum Einsatz kommen. Ihr habt also für eine Seite vier (ggf. auch weniger oder mehr) verschiedene CSS-Dateien gestaltet: Eine "standard.css" sowie die Dateien "style1.css", "style2.css" usw. Diese CSS-Dateien werden alle in einem Ordner "css" abgespeichert und auf den Webspace hochgeladen.
Der nachfolgende Code wird in einer Datei "styles.php" abgespeichert und in das Verzeichnis geladen, in dem sich die "index.php" und die anderen Seiten befinden:
<link rel="stylesheet" type="text/css" href="css/
Warning: Undefined variable $style in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0048.php on line 111
.css">
<link rel="alternate stylesheet" href="/css/standard.css" type="text/css" title="Standard">
<link rel="alternate stylesheet" href="/css/style1.css" type="text/css" title="Style 1">
<link rel="alternate stylesheet" href="/css/style2.css" type="text/css" title="Style 2">
<link rel="alternate stylesheet" href="/css/style3.css" type="text/css" title="Style 3">
Nun müssen diese alternativen Stylesheets noch eingebunden werden.
Zu diesem Zweck fügen wir innerhalb des Headbereichs jeder Homepagedatei folgenden Include-Code ein:
<?php include('styles.php'); ?>
Auswahlmenue erstellen
Damit der Besucher nun die Möglichkeit hat, zwischen verschiedenen Styles zu wählen, wird ihm diese Auswahl am besten in Form eines Menues angeboten. Hierzu wird an geeigneter Stelle der Homepage folgendes Menue eingefügt:
<h3>Styleauswahl</h3>
<ul>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=standard">Standard</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=style1">Style 1</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=style2">Style 2</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=style3">Style 3</a></li>
</ul>
Die einzelnen Links können nun wiederum individuell formatiert werden.