АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

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

• Все журналы \ Номер 11/234 `2003 от 17.03.2003 \ Одежки для сайта

Алексей САЛО (Virus) alex1@lubny.net.ua

Предположим, у вас есть свой сайт с определенным дизайном. Некоторым людям ваш дизайн нравится, некоторым нет, каков бы красив он не был (и это нормальное явление, ведь на вкус и цвет товарищей нет). И было бы очень хорошо, если б у пользователя была возможность выбрать при посещении страницы такой дизайн, который ему по душе. О том, как предоставить ему такую возможность, мы и поговорим.

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

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

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

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

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

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

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

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

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

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

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

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

Теперь вы можете создавать целые гардеробы сменных одежек для сайта. При этом нужно будет немного корректировать код. Если у вас возникнут любые вопросы, пишите (мой e-mail знаете :-))…

Идёт загрузка...

Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:
Комментарий:
Введите символы или вычислите пример: * Обновить