Блочная верстка сайта
Чтобы не повторяться, в сети и так много информации по блочной верстке, пробегусь только по азам и определениям, приведу несколько примеров html-кода, каким он должен быть по моему глубокому убеждению.
Несколько определений
Верстка страниц сайта — это процесс создания веб-страницы из макета дизайна, как правило, в формате PSD, с помощью кода соответствующего языка разметки (HTML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация).
Блочная верстка создается благодаря семантическим конструкциям разметки, например, . Принято считать, что разновидностей верстки три:
-
Табличная верстка — верстка, построенная на таблицах
; -
Блочная верстка — верстка в конструкции
;
- Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях.
Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS.
Различают верстку и по ширине страницы:
Фиксированная верстка — означает, что сверстанная страница имеет одну заданную ширину, как правило, расположенную по центру при большем разрешении экрана.
Резиновая верстка — когда сверстанная страница тянется по ширине окна браузера, либо в заданных приделах, например, от 1024px до 1600px, либо не имеющая конечной ширины.
Кросс-браузерность — это корректное идентичное отображение сверстанной страницы сайта в различных браузерах: Internet Explorer, FireFox, Opera, Safari, Google Chrome и другие.
HTML-верстка
Итак, верстка страницы сайта начинается с оценки макета дизайна и выбора конструкции — модульной сетки, по которой будет верстаться страница. На модульных сетках останавливаться пока не будем, рассмотрим их позже, в новых статьях.
Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты.
Готовим html-каркас или берем заранее приготовленный:
Example
...
...
...
...
Далее, там где стоит многоточие «...», верстаем необходимые элементы разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая:
Содержимое левого и правого блоков описывать не будем, дабы не тратить время на разъяснения. В них может содержаться все что угодно, начиная от меню каталога и заканчивая формами и баннерами.
В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1
, текст желательно выделять в параграфы p
, и т.д. в соответствии с семантикой.
В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы.
О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами и
:
Гм.. что еще?
Несколько преимуществ блочной верстки
- Блочная верстка имеет более логичный семантический код;
- Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы;
- Блочная верстка позволяет отделить структуру от представления.
Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться.
Спасибо за внимание.
Верстка сайта на HTML5 с примерами
Ручная верстка: преимущества и недостатки