| Уважаемые посетители сайта, если Вы заметили ошибку в тексте или опечатку, просто выделите этот фрагмент мышкой и нажмите Ctrl+Enter |
Д.О.Сазонов
ДИНАМИЧЕСКИЙ ДИЗАЙН СРЕДСТВАМИ JAVASCRIPT
Очень часто на домашних страничках пользователей можно встретить надпись "страница оптимизирована под разрешение 800х600" и действительно данное расширение экрана согласно статистике hotlog.com является сейчас наиболее распространенным среди пользователей, особенно в учебных заведениях. Как правило, такие странички плохо просматриваются в других режимах.
Например, при разрешении 640x480 картинки будут слишком большими, а текст не будет помещаться на экране. Наоборот, при высоком разрешении картинки и текст будет слишком маленькими и их будет трудно читать. Наилучший результат в этом случае можно получить создав для каждого разрешения экрана отдельную страницу, но данное решение является очень громоздким так как предполагает изготовление стольких копий сайта, сколько разрешений экрана собирается поддерживать разработчик.
Масштабирование всех изображений уже после загрузки в соответствии разрешения экрана также не решает проблему поскольку при сильном уменьшении или увеличении изображение теряет качество. Наиболее простым решением проблемы является сохранение для каждого разрешения экрана своих изображений.
Так, например, для разрешения 640x480 логотип будет сохранен под именем logo480.jpg, для разрешения 800x600 - logo600.jpg и так далее. Но при смене разрешения меняются не только изображения, а еще текст. По этому необходимо для каждого типа разрешения сохранять отдельную таблицу стилей CSS по тому же принципу, как сохранялись изображения. Теперь чтобы дизайн страницы смог "подстроиться" под разрешение экрана необходимо добавить немного кода в саму HTML страницу. Для примера разместим все изображения в каталоге PIC, а таблицы стилей в каталоге ST. Структура сайта в этом случае будет выглядеть как показано на рисунке 1.
Далее необходимо подключить таблицу стилей, которая будет использоваться по умолчанию. Дли примера это будет режим 800х600.
<link href="st/s600.css" rel="stylesheet" type="text/css" id="cs">
Следующая функция позволяет загружать изображения. Первый параметр определяет позицию тега IMG, загружающего
изображения. Тогда самому первому изображению будет соответствовать нулевой номер, второму второй и так далее.
Параметр Name и type указывают имя и расширение изображения, а последний параметр передает высоту экрана, по которой будет определяться разрешение экрана.
function im(pos,name,type,res)
{document.images[pos].src="pic/"+name+res+"."+type;}
Функция l() является главной функцией, производящей смену дизайна. Ее следует вызывать в качестве параметра onload="l()" тега BODY.
function l()
{
// определяется высота экрана и помещается в переменную h1
var h1=0; if (self.screen) {
h1 = screen.height;
}else if (self.java) {var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();h1 = scrsize.height;}
// Далее загружается таблица стилей, соответствующая разрешению
document.styleSheets["cs"].href = "st/st"+h1+".css";
// после чего загружаются сами изображения
im(0,"logo","jpg",h1);
im(1,"banner","gif",h1);
im(2,"ico","gif",h1);
im(3,"photo","jpg",h1);
}
Таким образом, используя на Web-страницах данный Java-скрипт можно достаточно легко охватить все возможные разрешения экрана пользователей, сохранив качество изображений и масштаб текста.
  9 рейтинг 1 голосов |
Нет комментариев
