Создание сайта

Компановка страницы веб сайта

Современные веб страницы, как правило, имеют довольно сложную структуру и состоят из нескольких горизонтальных блоков, каждый из которых может быть поделен еще и на колонки. Если посмотреть внимательно, то большинство страничек имеют сходные компоненты. Во-первых, вверху страницы идет «шапка». В этот блок обычно входит логотип, слоган и горизонтальное меню. Здесь могут быть размещены и дополнительные элементы, например форма поиска по сайту. Средний блок будем называть основным. Он состоит из двух-трех колонок. В крайних колонках, как правило, располагаются элементы дополнительной навигации, формы входа для просителей и различные вспомогательные элементы. Крайняя нижняя часть веб страницы обычно содержит информацию об авторе сайта, но может включать и копию главного меню для удобства навигации.

Динамическая и статическая компоновка сайта

Современные видеокарты поддерживают несколько произвольно устанавливаемых видеорежимов, характеризующихся экранным разрешением и количеством цветов, используемых при отображении информации на экране компьютера. С помощью встроенных функций операционной системы пользователь может установить несколько стандартных значений экранного разрешения, например 640x480, 800x600, 1024x768, 1152x864, 1280x1024 или 1600x1200 точек. Разумеется, при открытии в одном и том же броузере какой-либо веб страницы она может отображаться не одинаковым образом в зависимости от используемого посетителем сайта экранного разрешения.

Для того чтобы избежать «съезжания» элементов html-документа друг относительно друга и, как следствие, деформации веб страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты веб страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Таким образом, появляется второй критерий, по которому можно разделить все существующие веб сайты на две условные категории. Данной таблице можно назначить строго определенную ширину в пикселах, например, 900 точек, после чего жестко позиционировать ее по центру экрана или «прижать» к любому его краю. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.

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

Статическая компоновка страницы

Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в различных браузерах.

Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.

Динамическая компоновка страницы

Достоинства. Документ растягивается по всей ширине экрана, не остается неиспользованных пустых полей.

Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в различных браузерах.

ПРИМЕЧАНИЕ Используемые в командах HTML значения пикселов (условных точек)подразумевают физические размеры точки экрана пользователя и зависят от типа его монитора.

Примеры реализации сайтов со статической и динамической компоновкой страниц приведены на рис. 4 и 5. Данные изображения сделаны с фиксированным экранным разрешением 800x600 точек. Создание сайта

Рис. 4. Пример сайта со статической компоновкой страниц Создание сайта

Рис. 5a. Пример сайта с динамической компоновкой страниц Создание сайта

Рис. 5b. Пример того-же сайта с динамической компоновкой страниц при большем горизонтальном разрешении окна