Техника Web-дизайна для студента
Автоматическая компоновка страницы в зависимости от разрешения экрана
Ранее уже рассматривались различные способы компоновки уеЬ-страницы, в частности упоминалось о возможности гибкой компоновки, когда размер страницы и ее элементов задается в процентах от размеров окна браузера. Здесь мы рассмотрим возможность жесткой компоновки, при которой размеры элементов страницы и их координаты вычисляются относительно размера шрифта, заданного абсолютно. С целью адаптации внешнего вида страницы к различным разрешениям экрана размер шрифта будет изменен программой-сценарием после определения разрешения экрана. Рассмотрим возможный вариант такой программы на простом примере. Страница содержит пять элементов: текстовый блок и четыре рисунка. Компоновка элементов показана на рис. 8.18.
Адаптация к разрешению монитора достигается за счет изменения координат абсолютно позиционированных элементов и их размеров. Программа предназначена для адаптации только к разрешениям монитора 800 х 600 и 1024 х 768. При желании можно уве
личить число проверок разрешений монитора, определить дополнительные масштабирующие коэффициенты и текстовые стили, что позволит без особого труда расширить диапазон адаптации. Полный текст документа приведен в листинге 8.27.
|
Рис. 8.18. Результат компоновки элементов страницы с использованием абсолютного позиционирования |
 |
Листинг 8.27. Пример адаптации координат и размеров объектов к разрешению монитора
<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> cbody id=bl>
<script>
If (screen. width>1000) {Ы. className="txtl"};else {Ы. className="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 и txtl. Размер шрифта, заданный стилем txt, определяет внешний вид шрифта при разрешении монитора 800 х 600, а стилем txtl — при разрешении монитора 1024 х 768 и вычисляется путем умножения размера, заданного в txt, на масштабирующий коэффициент. Масштабирующий коэффициент вычисляется следующим образом 1024 : 800 = 1,28.
Для абсолютного позиционирования и задания размеров рисунка созданы четыре таблицы стилей (risi,..., ris4). Все размеры заданы в относительных единицах ет, это означает, что все они будут отсчитываться от размера шрифта. Так же осуществлено позиционирование и самого текстового блока.
Программа содержит только один оператор условного перехода, в котором свойство width (ширина) объекта screen (экран) сравнивается с 1000. Если значение превышено, то свойству className объекта с индивидуальным именем м присваивается значение txtl, в противном случае — значение txt. Индивидуальное имя м присвоено метке <body>, поэтому этим присваиванием мы определяем стиль форматирования текста всего документа. В общем случае текст может содержать несколько фрагментов с разными стилями форматирования. Тогда следует абсолютно задать размер только одного фрагмента текста, а размеры текста остальных фрагментов должны быть заданы в относительных единицах.
Работу по компоновке страницы рекомендуется осуществлять в программе Dreamweaver, предварительно установив разрешение монитора 800 х 600 (см. раздел 7.8.2 "Пример компоновки страницы с использованием слоев'). В результате компоновки координаты и размеры абсолютно позиционированных элементов будут заданы в пикселях. Оставив в пикселях только размер шрифта, необходимо остальные размеры перевести в относительные единицы путем деления абсолютной единицы размера на размер шрифта. Создав таблицу стилей с увеличенным размером текста и вставив в документ программу-сценарий, можно перейти к его просмотру в браузере. При изменении разрешения монитора на 1024 х 768 внешний вид страницы изменится, но после нажатия кнопки Обновить восстановится вновь.
