Блочная верстка сайта. Урок 1

Блочная верстка. Урок 1

Здравствуйте, друзья!

Мы продолжаем с Вами изучать верстку и сегодня мы переходим уже к самому интересному.

Наверняка Вы уже слышали понятие «блочная верстка». Но человеку неосведомленному это понятие ни о чем не говорит. Поэтому: кто знает — молодец! А кто не знает — читаем внимательнее.

Блочная верстка — это верстка html-кода web-страницы при помощи тегов универсальных контейнеров <div>.

Об этом я немного писал в статье «Блочные элементы веб-страницы». Здесь же мы поговорим более детально и конкретно.

1. Почему блочная верстка?

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

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

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

Не будем ворошить старое. Давайте перейдем к блочной верстке.

Блочная верстка позволяет строить структуру страницы при помощи отдельных блоков (контейнеров <div>). Они как кирпичики, из которых состоит остов сайта.

Преимущества блочной верстки перед табличной:

  • Каждый блок описывается одним тегом;
  • Удобно отслеживается структура вложенности контейнеров;
  • Контейнеры <div> можно позиционировать не только внутри родительских, но и другими способами (например абсолютное позиционирование) — об этом поговорим позже;
  • Значительно увеличивается скорость загрузки страниц сайта. По некоторым оценкам, скорость увеличивается где-то в три — четыре раза по сравнению с табличной;
  • Блочная верстка имеет значительно меньший объем кода по сравнению с табличной. А значит, нагрузка на сервер также уменьшается;
  • сайты с блочной версткой достаточно корректно отображаются во всех браузерах, при любом разрешении экрана;
  • легко интегрируется в любые CMS, не вызывая проблем.

2. Основа блочной верстки — контейнер <div>

При блочной верстке все элементы страницы состоят из блоков (логично, не правда ли?).

Блок <div> представляет собой прямоугольную область. По умолчанию блок занимает всю ширину родительского элемента, высота блока зависит от его содержимого. Блоки располагаются вертикально, то есть если в коде страницы записаны несколько блоков подряд, то отобразятся они в браузере один под другим.

Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся параметр “обтекание” (float). Но об этом чуть позже.

Основными свойствами любого блока являются: отступы, граница и поля.

Свойства блока

Задаются они при помощи css инструкций. Например:

div{
    margin: 10px;
    border: 3px #000000 solid;
    padding: 5px 0 20px 10px; }

Разберем этот фрагмент файла css-стилей. Для всех блоков <div> на странице (потому что не указан никакой селектор) будут применены следующие свойства:

  • Внешние отступы — 10 пикселей со всех сторон;
  • Граница со всех сторон шириной 3 пикселя, черного цвета, сплошной линией;
  • Поля: сверху — 5 пикселей, справа — нет поля, снизу — 20 пикселей, слева — 10 пикселей.

Содержимым блока может быть что угодно — текст, картинка, список, форма для заполнения, меню навигации, другой блок и т.п. В общем — любые блочные и строчные элементы.

3. Важно при блочной верстке.

Чтобы все блоки не сливались у Вас в коде страницы, а также для того, чтобы можно было легко прописать стили для каждого блока — нужно присваивать каждому блоку идентификаторы. Это делается при помощи атрибутов тега <div>:

  • id="название идентификатора" — применяется в том случае, если на странице всего один блок с таким названием (например блок шапки — header);
  • class="название класса" — применяется, если на странице может быть несколько таких блоков (например пункты меню)

Подробнее об этом написано в статье, посвященной селекторам.

Желаю Вам успехов в освоении навыков веб-мастера!

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии к статье:
"Блочная верстка сайта. Урок 1"

  1. Блочная верстка отличается от табличной несколько сложнее в усвоении.

  2. Жесть, как это все освоить...