верстаем не по-детски

БОРИС ВОЛЬФСОН

Спецвыпуск: Хакер, номер #067, стр. 067-034-1

(BORISVOLFSON@GMAIL.COM; HTTP://SPLENDOT.COM)

ПРОФЕССИОНАЛЬНОЕ СОЗДАНИЕ WEB-СТРАНИЦ

О СОЗДАНИИ WEB-СТРАНИЦ СЕГОДНЯ НЕ ПИШЕТ ТОЛЬКО ЛЕНИВЫЙ. В ИНТЕРНЕТЕ КУЧА СТАТЕЙ НА ЭТУ ТЕМУ, ПОЛКИ МАГАЗИНОВ ПЕСТРЯТ КНИГАМИ ВРОДЕ «HTML ДЛЯ ЧАЙНИКОВ», «CSS ДЛЯ НЕДОРАЗВИТЫХ» И Т.П. ОДНАКО ДЛЯ СОЗДАНИЯ ХОРОШЕГО WEB-САЙТА НЕДОСТАТОЧНО ТОЛЬКО ЧТЕНИЯ КНИГ

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

Для начала — о том, что такое верстка. Это процесс создания web-страницы, размещения на ней текстового и графического материала. Так что сегодня мы сделаем хорошую и правильную страницу.

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

Стандартный способ верстки с помощью таблиц предполагает разбиение страницы на отдельные ячейки. Все ячейки таблицы должны быть одного размера, для чего нужно либо использовать вложенные таблицы, либо параметры тега td: colspan для объединения горизонтальных ячеек и rowspan — для объединения вертикальных. В результате получается огромное количество HTML-кода, который не только будет долго грузиться (Internet Explorer не показывает таблицу, пока не загрузит ее полностью), но и создаст трудности для его изменения и расширения. К тому же желательно использовать таблицы по их прямому назначению — для представления табличных данных, а не в качестве блочных контейнеров.

[cлои] Для разбиения страницы на блоки лучше использовать именно слои — обычно так называют тег div, хотя иногда этот термин переносят и на тег span. Мы будем использовать тег div в качестве строительного элемента. Чтобы задать различные параметры (расположение, цвета и проч.), для тега div необходимо использовать каскадные таблицы стилей (CSS). Благодаря такому способу создания web-страницы получается компактный код, который хорошо индексируется поисковиками, легко поддается изменению и, наконец, почти одинаково отображается в разных браузерах.

Физически слой представляет собой прямоугольник на web-странице. Для верстки активно используются два параметра этого тега. Первых из них — float, который задает то, по какой стороне будет выравниваться данный элемент. Остальные же элементы по умолчанию будут «обтекать его». Можно задать три варианта этого параметра: left (для левого выравнивания), right (для правого выравнивания) и none. Второй параметр clear отменяет обтекание данного элемента другими с определенной стороны. Для того чтобы запретить обтекание с двух сторон, можно использовать значение both.