Одежки для сайта

Можно просто сделать кучу одинаковых сайтов с разным дизайном, но это нам не подходит в любом случае. Ведь место под сайт у нас не резиновое, да и работы слишком много, особенно если сайт достаточно велик. Я предлагаю другой вариант — использование связки CSS, JavaScript и Cookie. О том, что это за звери, было много написано в МК (тем, кто первый раз слышит эти слова, советую обратиться к предыдущим номерам журнала).

Для начала нам придется написать два .css-файла (можно сделать и больше, но в этой статье мы ограничимся двумя разными дизайнами). Откроем блокнот и наберем следующий код:

body {background-color:#0093AE; font-family: Verdana; font-size: 10pt;}<br /> <br /> a {color:#104EAA; text-decoration:none;}<br /> a:hover {color:#104EAA; text-decoration:underline;}<br /> <br /> div.one {background-color:#007BAE; color:#ffffff; border-style:solid; border-color:#2F4F4F; border-right-width:1px; border-bottom-width:0px; border-left-width:1px; border-top-width:1px; text-align:left;}<br /> <br /> div.two {background-color:#00A3CB; border-style:solid; border-color:#000000; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-width:1px; text-align:left;}<br />

Теперь сохраним наш файл под именем style1.css. То же проделаем и с другим файлом (только имя ему дадим style2.css). Вот его код:

body {background-color:#F6FFEF; font-family: Verdana; font-size: 10pt; }<br /> <br /> a {color:#104EAA; text-decoration:none;}<br /> a:hover {color:#104EAA; text-decoration:underline;}<br /> <br /> div.one {background-color:#C8D4Bf; border-style:solid; border-color:#2F4F4F; border-right-width:1px; border-bottom-width:0px; border-left-width:1px; border-top-width:1px; text-align:left;}<br /> <br /> div.two {background-color:#FFF5D2; border-style:solid; border-color:#000000; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-width:1px; text-align:left;}<br />

Сейчас немного объяснений. Мы создали два разных стиля, то есть две разных внешности нашего сайта. Задали цвет фона, размер шрифта (10pt), его тип (Verdana), определили внешний вид тэга <div>. Более подробно о CSS можно почитать в предыдущих журналах МК (в частности, см. цикл Никиты Сенченко «Устрой себе легкую жизнь»).

Со стилями закончили, теперь переходим к скриптам. С помощью JS (JavaScript) мы напишем два скрипта — один для установки значения Cookie, другой для чтения Cookie и вставки нового дизайна (файла стилей, которых мы сделали два). Кстати, некоторые, возможно, задавались вопросом, зачем использовать Cookie. Дело в том, что человеку неинтересно каждый раз при посещении вашего сайта выбирать дизайн, который ему нравится. Намного удобней (для ваших посетителей) сделать так, чтобы, выбрав всего один раз подходящий дизайн, он загружался каждый раз по умолчанию (эту возможность как раз и предоставляет нам печенье, то есть cookie). Вот код первого скрипта:

<script><br /> function SetCookie(value)<br /> {<br /> var expdate = new Date ();<br /> expdate.setTime(expdate.getTime() + (3650 * 24 * 60 * 60 * 1000));<br /> document.cookie = "mkstyle=" + escape (value) + "; expires=" + expdate.toGMTString() + "; path=/";<br /> }<br /> </script><br />

Объяснять этот скрипт не буду, так как он уже объяснен в статье «Коварное печенье» (см. МК №№12, 14 и 17 (183, 185 и 188)). Теперь нам нужно будет создать другой скрипт. Для удобства давайте его сохраним в виде отдельного файла с названием mycomp.js (.js — это стандартное расширение для файлов, содержащих Java-скрипты). А к странице мы его подключим с помощью тэга <script src=mycomp.js> </script>. Итак, откройте блокнот, напишите нижеследующий код и сохраните его в файле mycomp.js:

var prefix = "mkstyle=";<br /> var cookieStartIndex = document.cookie.indexOf(prefix);<br /> var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);<br /> if (cookieEndIndex == -1)<br /> cookieEndIndex = document.cookie.length;<br /> var value=unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));<br /> if ((value !='1') & (value!='2'))<br /> document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=style1.css>');<br /> if (value=='1')<br /> document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=style1.css>');<br /> if (value=='2')<br /> document.write('<LINK REL=STYLESHEET TYPE=text/css HREF=style2.css>');<br />

На этом скрипте немного остановимся. До строки if((value!=’1’)…), мы считываем значение Cookie. Эта часть скрипта рассмотрена в статье «Коварное печенье». Дальше идет код, который служит для вставки (подключения) нужного стиля. Если человек не выбрал еще дизайн (то есть, он первый раз зашел на ваш сайт), будет подключен файл style1.css (первый стиль). Если же значение value равно 1, тогда грузим первый стиль, если value равно 2 — второй. Строка <LINK REL=STYLESHEET TYPE=text/css HREF=style1.css> является стандартным тэгом для подключения файла стилей. Для выбора самого стиля сделаем простые две ссылки на страничке:

<a href=index.html onClick="SetCookie('1');">Стиль 1</a><br /> <a href=index.html onClick="SetCookie('2');">Стиль 2</a><br />

Теперь соберем все это в одну кучу. До этого у вас уже должны быть готовые такие файлы:

два файла со стилями (style1.css и style2.css);

один файл со скриптом (mycomp.js);

сама страничка (index.html)

Ниже вы можете посмотреть пример файла index.html (пример взят из одного моего сайта):

<html><br /> <head><br /> <script><br /> function SetCookie(value)<br /> {<br /> var expdate = new Date ();<br /> expdate.setTime(expdate.getTime() + (3650 * 24 * 60 * 60 * 1000));<br /> document.cookie = "mkstyle=" + escape (value) + "; expires=" + expdate.toGMTString() + "; path=/";<br /> }<br /> </script><br /> <script src="mycomp.js"></script><br /> </head><br /> <br /> <table width=185 align=center border=0><br /> <tr><br /> <td width=185 valign=top><br /> <div class=one><small><b>Выбор стиля</b></small></div><br /> <div class=two><small><br /> &nbsp;<a href=index.html onClick="SetCookie('1');">По умолчанию</a><br><br /> &nbsp;<a href=index.html onClick="SetCookie('1');">Стиль 1</a><br><br /> &nbsp;<a href=index.html onClick="SetCookie('2');">Стиль 2</a></div><br /> </td></small><br /> </tr><br /> </table><br /> </html><br />

Теперь вы можете создавать целые гардеробы
сменных одежек для сайта. При этом нужно будет немного
корректировать код.