ДИЗАЙН САЙТА
Предположим, у вас есть свой сайт с определенным дизайном. Некоторым людям ваш дизайн нравится, некоторым нет, каков бы красив он не был (и это нормальное явление, ведь на вкус и цвет товарищей нет). И было бы очень хорошо, если б у пользователя была возможность выбрать при посещении страницы такой дизайн, который ему по душе. О том, как предоставить ему такую возможность, мы и поговорим.
Можно просто сделать кучу одинаковых сайтов с разным дизайном, но это нам не подходит в любом случае. Ведь место под сайт у нас не резиновое, да и работы слишком много, особенно если сайт достаточно велик. Я предлагаю другой вариант — использование связки CSS, JavaScript и Cookie.
Для начала нам придется написать два .css-файла (можно сделать и больше, но в этой статье мы ограничимся двумя разными дизайнами). Откроем блокнот и наберем следующий код:
body {background-color:#0093AE; font-family:
Verdana; font-size: 10pt;}
a {color:#104EAA; text-decoration:none;}
a:hover {color:#104EAA; text-decoration: underline;}
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;}
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;}
Теперь сохраним наш файл под именем style1.css.
To же проделаем и с другим файлом (только имя ему дадим style2.css). Вот его код:
body {background-color:#F6FFEF; font-family: Verdana; font-size: 10pt; }
a {color:#104EAA; text-decoration:none;}
a:hover {color:#104EAA; text-decoration:underline;}
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;}
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;}
Сейчас немного объяснений. Мы создали два разных стиля, то есть две разных внешности нашего сайта. Задали цвет фона, размер шрифта (10pt), его тип (Verdana), определили внешний вид тэга <div>. Более подробно о CSS можно почитать, заказав о нем информацию в нашем платном компьютерном разделе.
Со стилями закончили, теперь переходим к скриптам. С помощью JS (JavaScript) мы напишем два скрипта — один для установки значения Cookie, другой для чтения Cookie и вставки нового дизайна (файла стилей, которых мы сделали два). Кстати, некоторые, возможно, задавались вопросом, зачем использовать Cookie. Дело в том - что человеку неинтересно каждый раз при посещении вашего сайта выбирать дизайн, который ему нравится. Намного удобней (для ваших посетителей) сделать так, чтобы, выбрав всего один раз подходящий дизайн, он загружался каждый раз по умолчанию (эту возможность как раз и предоставляет нам печенье, то есть cookie). Вот код первого скрипта:
< script>
function SetCookie(value)
{
var expdate = new Date () ;
expdate.setTimetexpdate.getTime() + (3650 * 24 * 60 * 60 * 1000));
document.cookie = "mkstyle=" + escape (value) +"; expires=" + expdate.toGMTString() +"; path=/";
}
< /script>
Теперь нам нужно будет создать другой скрипт. Для удобства давайте его сохраним в виде отдельного файла с названием mycomp.js (.js — это стандартное расширение для файлов, содержащих Java-скрипты).
А к странице мы его подключим с помощью тэга < script src=mycomp. js> < /script>. Итак, откройте блокнот, напишите нижеследующий код и сохраните его в файле mycomp.js:
var prefix = "mkstyle=";
var cookieStartIndex = document.cookie.index0f(prefix);
var cookieEndlndex = document.cookie.index0(";", cookieStartlndex + prefix.length);
if (cookieEndlndex ==-1) cookieEndlndex = document.cookie.length;
var value=unescape(document.cookie.substring(cookie Startlndex + prefix.length, cookieEndlndex));
if ((value ! = 'l') & (value! = '2'))
document. write ('< LINK REL=STYLESHEET TYPE=text/css HREF=stylel.css> ') ; if (value=='l')
document. write ('< LINK REL=STYLESHEET TYPE=text/css HREF=stylel.css> '); if (value=='2')
document. write ('< LINK REL=STYLESHEET TYPE=text/css HREF=style2.css> ');
На этом скрипте немного остановимся. До строки if ((value i = 'l')...) мы считываем значение Cookie. Дальше идет код, который служит для вставки (подключения) нужного стиля. Если человек не выбрал еще дизайн (то есть он первый раз зашел на ваш сайт), будет подключен файл style1.сss (первый стиль). Если же значение value равно 1, тогда грузим первый стиль, если value равно 2 — второй. Строка < LINK REL=STYLESHEET TYPE=text/css HREF=stylel.css> является стандартным тэгом для подключения файла стилей. Для выбора самого стиля сделаем простые две ссылки на страничке: < a href=index.html onClick="SetCookie('1') ;" > Стиль 1< /а>
< а href=index.html onClick="SetCookie('2') ;" > Стиль 2< /а>
Теперь соберем все это в одну кучу. До этого у вас уже должны быть готовые такие файлы:
- два файла со стилями (style1.css и style2.css);
- один файл со скриптом (mycomp.js);
- сама страничка (index.html).
Ниже вы можете посмотреть пример файла index.html:
< html>
< head>
< script>
function SetCookie(value)
{
var expdate = new Date () ;
expdate.setTime(expdate.getTime() + (3650 * 24 * 60 * 60*1000));
document.cookie = "mkstyle=" + escape (value) +";
expires=" + expdate.toGMTStringО + "; path=/";
}
< /script>
< script src="mycomp. js"< /script>
< /head>
< table width=185 align=center border=0>
< tr>
< tdwidth=185 valign=top>
< div class=one> < small> < b> Выбор стиля< /b> < /small> < /div>
< div class=two> < small>
< a href=index.html onClick="SetCookie( '1');" > По умолчаниях< /a> < br>
< a href=index.html onClick="SetCookie( '1');" > Стиль l< /a> < br>
< a href=index.html onClick="SetCookie (' 2 '); "> Стиль 2< /a> < /div>
< /td> < /small>
< /tr>
< /table>
< /html>
Теперь вы можете создавать целые гардеробы сменных одежек для сайта. При этом нужно будет немного корректировать код...
Сайт компьютерного и сладкого
