Блог Блочная верстка CSS

В прошлом месяце проводился конкурс на лучший дизайн для блочной верстки сайта. Прислано 28 макетов, из которых я выбрал один наиболее интересный, подходящий под мои требования. На примере этого макета, довольно простого, но «приятного на ощупь», мы разберем основы правильной css верстки сайта.

Увеличить

Можно сразу увидеть результат верстки сайта.

Будем верстать наш дизайн по плану.

План блочной CSS верстки сайта

  1. Техническое задание по верстке
  2. Изучение макета
  3. Верстка CSS. Подготовка
  4. Верстка CSS. Структура сайта
  5. Верстка CSS. Шапка сайта
  6. Верстка CSS. Контент сайта
  7. Верстка CSS. Подвал сайта
  8. Динамика страницы
  9. Тестирование
  10. Заключение

1. Техническое задание (ТЗ) по верстке

Этому пункту уделим особое внимание. Когда заказчик присылает ТЗ по верстке сайта, необходимо очень внимательно его изучить и, если есть вопросы, разобрать их до начала верстки, чтобы потом не возникло недоразумений.
В нашем случае я сам составил ТЗ, и непонимание исключено :)

  1. Верстка блочная
  2. Минимальное разрешение, при котором не появится горизонтального скроллера – 1024px * 768px
  3. Футер всегда прижат к низу страницы
  4. Основной контент (центральная колонка) всегда сверху страницы, начинается с заголовка
  5. Верстка резиновая, все 3 колонки тянутся пропорционально
  6. При отключении графики страница сохраняет свою функциональность и внешний вид
  7. Кроссбраузерность (Internet Explorer 6.0 +, Mozilla Firefox 1.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +)
  8. Валидность HTML и CSS
  9. Семантика кода

2. Изучение макета

Внимательно анализируем макет с учетом предъявленных требований к верстке

  1. Выделяем основные блоки
    - header
    - content
    - footer
  2. Проводим направляющие
    - левая колонка
    - центральная колонка
    - правая колонка
  3. Определяем область реагирования ссылок
    - логотип
    - ссылки в шапке
    - ссылки в меню
    - ссылки на фото
    - ссылки в футере

3. Верстка CSS. Подготовка.

Создаем папку element по названию сайта. В ней создаем стартовую гипертекстовую страницу index.html и подключаем таблицы стилей all.css и ie.css (для Internet Explorer 6). В all.css обнуляем значения по умолчанию для всех элементов, которые будут использоваться на странице.

Создаем папку для картинок и называем ее i. Файлы, папки и картинки стараемся называть коротко, это сэкономит размер кода и ускорит его написание. Уровни вложенности тегов выделяем при помощи табуляции.

Код css мне удобнее писать в компактном виде, без перевода строк и без пробелов. Определения, задающие позиционирование, размеры и отображение элементов я пишу в начале, оформление элементов и текста – в конце.

4. Верстка CSS. Структура сайта

Делаем разметку страницы согласно пунктам 1.1 – 1.4 ТЗ и пункту 2.1 изучения макета. На данном этапе мы готовим каркас страницы. Пишем HTML код основных блоков. В CSS прижимаем футер к низу страницы и указываем минимальную ширину страницы. Одно из требований ТЗ – HTML код должен начинаться с блока content, это поможет поднять сайт в первые позиции поисковиков по ключевым запросам, т.к. основной контент будет вверху страницы.

Смотрим верстку структуры сайта

5. Верстка CSS. Шапка сайта

Согласно пункту 1.5 ТЗ и пунктам 2.2 – 2.3 изучения макета пишем HTML и CSS код для блока header.
Как можно заметить, ссылки в шапке тянутся по одним и тем же направляющим, что и колонки основного блока content. Составляем пропорцию и высчитываем ширину колонок в процентах. Получаем следующие значения:

  • Левая колонка – 26%
  • Центральная колонка – 51%
  • Правая колонка – 23%

Разделим шапку сайта на два блока: блок с логотипом и блок со ссылками. Последний, в свою очередь, на блок над центральной колонкой и блок над правой колонкой.
Ссылки в шапке не имеют фиксированной ширины, т.к. текст в них может меняться на различных страницах сайта. HTML код ссылок идентичный. Прописываем в стилях внешний вид активных ссылок и ссылок при наведении курсора на область реагирования.
В шапке используем плавающую модель блоков float:left, поэтому для правильного поведения внешних блоков создаем класс clear.

Смотрим верстку шапки сайта

6. Верстка CSS. Контент сайта

Позиционируем колонки таким образом, чтобы центральная из них была в самом верху HTML кода и начиналась с тега H1.
«Хлебные крошки» позиционируем вверх относительно блока center.
Меню и фото делаем маркированными списками, область реагирования ссылок — как обозначено в пункте 2.3.
Для фото (тег img) прописываем рамку и внутренний отступ.
Получается довольно компактный, простой и понятный код HTML.

Смотрим верстку контента сайта

7. Верстка CSS. Подвал сайта

Подвал сайта состоит из двух частей: списка ссылок и копирайтов. Ссылки делаем маркированным списком, пункты которого пропорционально растягиваются по ширине. В таблице стилей задаем вид ссылки при наведении и вид активной ссылки.

Смотрим верстку подвала сайта

8. Динамика страницы

При помощи jQuery придадим динамику нашей странице. Назначим активную ссылку по клику в шапке сайта, в меню и для списка ссылок в подвале сайта.

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

9. Тестирование

Проверяем сверстанную страницу на соответствие требованиям пунктов 1.6 – 1.9 ТЗ.

  1. При отключенной графике страница полностью сохраняет свою функциональность и визуально хорошо читается
  2. Страница одинаково хорошо отображается в Internet Explorer 6.0 +, Mozilla Firefox 1.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +
  3. HTML и CSS код успешно прошли проверку на валидность. Результат можно посмотреть соответственно здесь и здесь
  4. Чтобы проверить семантику кода необходимо отключить стили CSS и посмотреть, как будет выглядеть страница в браузере. При отключении стилей наглядно демонстрируется логическое представление документа, правильность использования тегов. К этому пункту необходимо относиться достаточно серьезно, ведь именно в таком представлении видят нашу страницу компьютер, поисковые машины и боты.

Верстка готова, она соответствует всем требованиям ТЗ, а это значит, что заказчик будет доволен :)
Результат нашей работы можно скачать в архиве по следующей ссылке.

10. Заключение

В статье я постарался продемонстрировать правильный подход к блочной CSS верстке сайтов. Как видим, внешне довольно простой макет таит в себе много интересных приемов верстки. В ходе работы мы применили два различных способа растяжки трехколоночного дизайна (для шапки и для контента); показали как, можно поднять основной контент вверх страницы; прижали футер к низу страницы; создали универсальные ссылки в шапке страницы без задания ширины и многое другое.

P.S. Если после прочтения статьи у Вас появились вопросы по верстке этой страницы или замечания ко мне, пишите в комментариях, будем разбираться вместе.

-->

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com