В состав веб-страницы входит множество различных элементов, имеющих разную степень сложной структуры. Это приводит к необходимости в процессе создания веб-страницы нужным образом позиционировать эти элементы, стилизовать их так, чтобы они расположились на странице требуемым образом. Как следствие, возникает необходимость в создании макета страницы, ее верстки.
Табличная и блочная верстки
Имеются разные способы стратегии и виды верстки. Первоначально была распространена верстка, созданная на основе таблиц, поскольку с помощью таблиц можно легко и просто разделить все пространство веб-страницы на строки и столбцы, которыми, в свою очередь, можно легко управлять, а также позиционировать в них содержимое. Этим была определена популярность табличной верстки.
Несмотря на все, данным видом верстки создаются не гибкие относительно дизайна страницы. Гибкость является особенно актуальной в наши дни, поскольку в мире используется огромное количество разнообразных в отношении разрешения экранов: от самых маленьких до очень больших. Данное многообразие экранов табличная верстка удовлетворить не смогла. В связи с этим постепенно на смену ей пришла блочная верстка, которая включает в себя способы и приемы верстки, в которых для разметки веб-страниц используется CSS-свойство float, а в качестве основного строительного элемента используется элемент , который и представляет собой блок. Используя вышеуказанные свойство и элемент, а также другие элементы, создается структура страницы, состоящая из нескольких столбцов, как при табличной верстке, однако она является более гибкой, чем ее предшественница.
Создание блоков-контейнеров
Рассмотрим пример размещения элементов на веб-странице. В ходе построения страницы вначале размещаются элементы, которые определяют места, на которых в дальнейшем разместятся контент, ссылки, картинки и пр. Начать нужно сверху и определить место для заголовка.
Горизонтальное меню можно расположить в заголовке сайта. Для этого необходимо разрезать картинку шапки сайта чуть выше верхней границы элементов горизонтального меню. В результате получатся два изображения (верхнее и нижнее), поверх которых будет размещено меню. Эти 2 изображения в последствии установим в качестве фона для двух блочных элементов, которые определят расположение шапки сайта.
Затем нужно открыть веб-документ и добавить в область, которая предназначена для описания элементов, следующие строки:
В первом блоке будут содержаться логотип сайта и установленная в качестве фона верхняя часть шапки. Во втором будут содержаться все элементы, которые связаны с горизонтальным меню. Это все можно было бы разместить и без разделения шапки на отдельные части, но тогда позиционирование горизонтального меню выполнить было бы гораздо труднее.
Теперь разберемся с таблицей стилей. При ее создании важно помнить, что вначале записываются правила для всей страницы, далее для общих элементов и блоков, которые определяют позиции разделов документа, а уже потом записываются правила для конкретных элементов. В случае несоблюдения этой последовательности каскадность не даст элементам занять свои места.
В файл стилей добавим следующие правила:
#header {
width: 780px;
height: 76px;
background-repeat: no-repeat;
background-image: url(‘flower_top.jpg’);
}
#hmenu-container {
height: 50px;
background-image: url(‘flower_btm.jpg’);
background-repeat: no-repeat;
}
Приведенными правилами описываются свойства блоков, которые относятся к шапке сайта. Первый блок описан шириной (width) и высотой (height), равными размеру фонового изображения, а также устанавливается само фоновое изображение. При указании адреса фонового рисунка используется только имя файла. Подобная запись значит, что изображение находится в одной папке с документом. Если изображение находится в другой папке, то необходимо будет указать полный URL-адрес или путь к папке, в которой содержится файл CSS. Путь к файлу заключается в одинарные кавычки. Данное условие не является обязательным, однако кавычки помогают избежать ошибки при наличии в записи пути какого-либо специального символа, например пробела. В кавычки можно заключать не только путь, но и любые значения, например названия шрифтов.
Свойство background-repeat будет определять, как заполнится фон блока указанным изображением. В приведенном примере установлено значение no-repeat, которое указывает на то, что фоновое изображение не должно повторяться при превышении размерами блока размеров изображения.
В описании стиля второго блока указаны те же свойства, кроме ширины. Отсюда следует, что блоком занято все доступное ему по ширине пространство.
Далее таблица стилей сохраняется в файле, например с названием screen.css, поскольку правила данного листа стилей будут использоваться при выводе страницы на экран монитора. Добавим в веб-документ теги блоков, содержащих контент и вертикальное меню:
В данной записи задан глобальный центральный блок, относительно которого будут позиционироваться внутренние блоки под меню и контент.
В лист стилей screen.css добавляем следующие правила:
#vmenu-container {
width:115px;
height: 170px;
background-image: url(‘sidemenu.jpg’);
background-repeat: no-repeat;
padding: 1em;
}
#content {
float: right;
width: 610px;
margin-bottom: 1 em;
font-family: Verdana, Arial, Hevletica;
font-size: 80%
}
В приведенной записи для контейнера под меню задается ширина, высота, фон и внутренние отступы для того, чтобы элементы, содержащиеся в этом блоке не соприкасались с его границами. Блок для контента сделан плавающим относительно правой стороны (float: rigth). Эта запись говорит о том, что другие элементы должны будут обтекать его с левой стороны. Ему задана вся доступная ширина за исключением ширины блока, отведенной под правое меню, это дает возможность блоку с меню подняться вверх и разместиться рядом с контейнером для контента.
Помимо этого, для этого блока заданы свойства, которыми определяются параметры шрифта содержимого. Т.е. контент будет выведен шрифтом, который определят этими свойствами. Кроме того, задается внешнее нижнее поле для визуального отделения контента от подвала страницы на ширину символа (1 em).
Далее добавим в веб-документ строки, которые относятся к подвалу страницы:
Затем добавим правило в лист стилей.
footer {
color: gray;
height: 3 em;
font-family: Arial;
forn-size: 10px;
}
Обратим внимание на то, что при добавлении контента во все блоки подвал страницы окажется несколько смещенным. Это произойдет в следствии того, что ранее было задано значение, которое определяло обтекание одного из блоков.
Для избавления от этого обтекание необходимо запретить. Для этого добавим перед блоком, который определяет место под подвал, строку:
После чего в листе стилей запишем правило для данного исправляющего блока, в котором запретим обтекание со всех сторон.
.lastik { clear:booth }
В завершении размечается меню, вписываются ссылки и контент.
Достоинства блочной верстки
Начиная с момента зарождения понятия сайта, значимость скорости загрузки веб-страницы возрастала с каждым днем. В наши дни это понятие играет первостепенную роль при создании сайтов, состоящих из более, чем 10 страниц.
При создании веб-страницы сайта необходимо:
- соблюдать закономерность разделения содержимого сайта и его оформления;
- придерживаться принципа компактности веб-страницы;
- страница должна иметь минимальное время загрузки в браузере;
- чтобы поисковыми системами лучше и быстрее проводилось индексирование html-страницы;
- чтобы была минимальная нагрузка на сервер;
- наличие возможности легкого изменения стиля и оформления сайта.
Именно для достижения выполнения этих пунктов и используется HTML-верстка слоями (блоками). Подобное создание страниц возможно лишь при использовании специального тега. В процессе использования блочной верстки веб-страниц создаются определенное количество html-страниц и связанный с ними файл стилей (CSS). При этом, html-страницы содержат сами блоки и информацию, имеющуюся в них, а в файл стилей содержит все остальное: размеры блоков, размещение их на странице, цвет фона, цвет шрифта, атрибуты рамок, атрибуты картинок, используемый шрифт и пр.
Таким образом, при блочной верстке происходит разделение наполнения и оформления сайта, созданные страницы имеют минимальный размер, скорость загрузки страниц максимальная, минимальная нагрузка на сервер, простота изменения оформления всего сайта.
