Автоматическая компоновка страницы в зависимости от разрешения экрана

Опубликовано MuHyc в Вс, 09/04/2011 - 12:27

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

Адаптация к разрешению монитора достигается за счет изменения координат абсолютно позиционированных элементов и их размеров. Программа предназначена для адаптации только к разрешениям монитора 800 х 600 и 1024 х 768. При желании можно увеличить число проверок разрешений монитора, определить дополнительные масштабирующие коэффициенты и текстовые стили, что позволит без особого труда расширить диапазон адаптации.

Пример адаптации координат и размеров объектов к разрешению монитора

<html> <head>

<title>I'l3MeHeHne pa3Mepa</title> <style type="text/css"> .risl {position: absolute; left: 0.25em; top: 0.25em; width: 6.25em; height: 4.17em;

.ris2 {position: absolute; left: 3.83em; top: 2.83em; width: 6.25em;

height: 4.17em;

}

.ris3 {position: absolute; left: 15.5em; top: 0.25em; width: 6.25em; height: 4.17em;

}

.ris4 {position: absolute; left: 11.9 бет; top: 2.83em; width: 6.25em; height: 4.17em;

}

.txt {font: 700 24px "Monotype Corsiva"; text-align: center;

}

.txtl {font: 900 31px "Monotype Corsiva"; text-align: center;

}

</style> </head> <body id=bl> <script>

if (screen.width>1000) {Ы.className="txtl"};else {Ы. с 1 a s sName= "txt" }

</script>

<div style="position: absolute; left: 6.54em; top: О.ЗЗет; width: 8.9em; height:1.7em">

Добро пожаловать в neTpoflBopeu</div>

<img src=kl.jpg class="risl">

<img src=k2.jpg class="ris2">

<img src=k3.jpg class="ris3">

<img src=k4.jpg class="ris4">

</body>

</html>

Абсолютными единицами задан только размер шрифта. Для его форматирования созданы две таблицы стилей txt и txti. Размер шрифта, заданный стилем txt, определяет внешний вид шрифта при разрешении монитора 800 х 600, а стилем txti — при разрешении монитора 1024 х 768 и вычисляется путем умножения размера, заданного в txt, на масштабирующий коэффициент. Масштабирующий коэффициент вычисляется следующим образом 1024 : 800 = 1,28.

Для абсолютного позиционирования и задания размеров рисунка созданы четыре таблицы стилей (risi,..., ris4). Все размеры заданы в относительных единицах em, это означает, что все они будут отсчитываться от размера шрифта. Так же осуществлено позиционирование и самого текстового блока.

Программа содержит только один оператор условного перехода, в котором свойство width (ширина) объекта screen (экран) сравнивается с 1000. Если значение превышено, то свойству ciassName объекта с индивидуальным именем м присваивается значение txti, в противном случае — значение txt. Индивидуальное имя ы присвоено метке <body>, поэтому этим присваиванием мы определяем стиль форматирования текста всего документа. В общем случае текст может содержать несколько фрагментов с разными стилями форматирования. Тогда следует абсолютно задать размер только одного фрагмента текста, а размеры текста остальных фрагментов должны быть заданы в относительных единицах.

Работу по компоновке страницы рекомендуется осуществлять в программе Dreamweaver, предварительно установив разрешение монитора 800 х 600). В результате компоновки координаты и размеры абсолютно позиционированных элементов будут заданы в пикселях. Оставив в пикселях только размер шрифта, необходимо остальные размеры перевести в относительные единицы путем деления абсолютной единицы размера на размер шрифта. Создав таблицу стилей с увеличенным размером текста и вставив в документ программу-сценарий, можно перейти к его просмотру в браузере. При изменении разрешения монитора на 1024 х 768 внешний вид страницы изменится, но после нажатия кнопки Обновить восстановится вновь.