Verwalten Sie Ihre Webfarben

Behalten Sie mit MyColor Studio den Überblick über Ihre Onlineprojekte

Hier klicken und mehr erfahren

Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

Dem Benutzer die Layoutwahl überlassen

Sicher haben Sie schon Webseiten gesehen, bei denen Sie aus verschiedenen Layouts wählen konnten, und bei denen Ihre Wahl dann auch auf allen Unterseiten verwendet wurde.

Dank der Möglichkeit, Parameter mit SSI weitergeben und diese mit Abfragen aufgreifen zu können, können Sie eine solche Interaktion auch auf Ihren Seiten ohne großartigen Aufwand anbieten.

In unserer Demonstration haben wir nur die Text- und Hintergrundfarben berücksichtigt. Natürlich können Sie auch komplette Stylesheets einbinden, Seitenteile auswechseln oder Inhalte variieren.

Im Bodybereich des Quelltextes werden Links dargestellt, die die aktuelle Seite aufrufen und dabei einen Parameter ("css=x") weitergeben. Dieser Parameter wird im Headbereich abgefragt und entsprechend seines Vorhandenseins verarbeitet. So wird bei der Weitergabe von css=1 der Text Rot und der Hintergrund Gelb gefärbt, bei css=2 erhält der Text eine dunkelgrüne, der Hintergrund eine khaki Färbung, und wenn kein Parameter vorhanden ist (also auch beim erstmaligen Aufruf), dann wird der Text Schwarz und der Hintergrund Weiss angezeigt.

Um die Layoutwahl auch auf den Folgeseiten beibehalten zu können, müssen Links um den gewünschten Parameter ergänzt werden. Dies geschieht mit folgendem Zusatz:

<a href="seite.shtml?<!--#echo var="QUERY_STRING" -->">Link</a>

Der Quelltext der Seite (die benötigten SSI-Elemente wurden rot gekennzeichnet):

<html><head>

<!--#if expr="$QUERY_STRING = 'css1'" -->

<STYLE TYPE="text/css">
p { font-family: Arial, Sans-Serif; font-size: 10pt; color: red }
body { background-color: yellow }
</STYLE>

<!--#elif expr="$QUERY_STRING = 'css2'" -->

<STYLE TYPE="text/css">
p { font-family: Arial, Sans-Serif; font-size: 10pt; color: darkgreen }
body { background-color: darkkhaki }
</STYLE>

<!--#else -->

<STYLE TYPE="text/css">
p { font-family: Arial, Sans-Serif; font-size: 10pt; color: black }
body { background-color: white }
</STYLE>

<!--#endif -->

</head><body>

<p>Wählen Sie eine Text- und Hintergrundfarbe:</p>

<p>
<a href="<!--#echo var="DOCUMENT_URI" -->?css1">Rot / Gelb</a><br>
<a href="<!--#echo var="DOCUMENT_URI" -->?css2">Grün / Khaki</a><br>
<a href="<!--#echo var="DOCUMENT_URI" -->">Schwarz / Weiss</a></p>

</body></html>


Zurück zum Inhaltsverzeichnis

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 20.11.2017
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt