KorniloFF-ScriptS ©

Здравствуйте, Гость!
 
Page
Menu

Смена дизайна в сайте

Уже не в первый раз слышу о желании некоторых сайтостроителей дать возможность своим пользователям выбирать дизайн сайта.

Некоторые хотят использовать возможность клиентской смены дизайна для сугубо оформительских целей, некоторые - для сезонного оформления сайта, а другие - для повышения удобства пользования сайтом людей с ограниченными возможностями.

К примеру, людям со слабым зрением было бы удобнее читать более крупный шрифт, в то время, как обыный пользователь предпочитает меньше пользоваться прокруткой. Конечно, есть встроенные возможности браузеров по увеличению шрифта, при использовании клавиши ctrl и колеса мыши, но тут тоже есть недостатки. Может нарушиться общий дизайн сайта, да и не каждый знает об этих возможностях.

Но в итоге, кто бы какие цели перед собой не ставил, все сходятся на одной проблеме: как изменять дизайн сайта с клиенской стороны?

Глобально решить эту задачу можно динамической подгузкой нужного файла стилей при выборе нужного дизайна. Именно это я и реализовал в своем скрипте.

Веб-мастер может создать несколько файлов стилей для своего сайта, а его пользователи выбрать тот из них, который им наиболее подходит. При этом броузер запоминает выбранный стиль, и при следующем входе пользователя показывает сайт уже с выбранным ранее дизайном.

На этой странице приведен пример работы скрипта. В поле под этим текстом вы можете выбрать вариант отображения прочитанного вами текста. Это лишь тестовый образец, поэтому я не вводил много различий. Скрипт подгружает любой файл стилей альтернативного дизайна, со всеми вытекающими возможностями смены не только размера, но и фона, рамок и многого другого.

Использование скрипта

  • Копируете приведенный ниже фрагмент кода в нужное место на своем сайте.
  • Создаете дополнительный файл стилей, в котором прописываете все правила изменения внешнего вида сайта (в приведенном примере - это файл Diz_alt.js.css, расположенный в каталоге css). Таких файлов может быть любое количество, но при этом не забывайте добавить для каждого в наш код новую опцию(в коде ниже она закомментирована).
  • Сохраняете созданный файл стилей по указанному пути, либо меняете путь в строке value="/out_files/css/Diz_alt.js.css"
  • Перезагружаете страницу с очисткой кеша броузера (CTRL+R)
  • Все, скрипт работает!

Пример работы скрипта:
Выберите вариант отображения сайта:
HTML + Javascript код:
Комментарии к теме (0)

Комментариев пока нет.

Дабавить комментарий