Что такое блочная верстка? Как сверстать простую страницу сайта самостоятельно?

Есть желание научиться делать самостоятельно странички сайтов? Тогда давайте освоим, что такое блочная верстка. Верстальщики-новички встречают ряд затруднений, у них появляется множество вопросов. Рассмотрим, что представляет собой блочная верстка.

Важный совет

Применяйте визуальный редактор, чтобы все было нагляднее. Те, кто хорошо знают HTML, работают в блокноте, так как им все понятно. А новички могут воспользоваться такими программами, как FrontPage или, например, Dreamweaver.

Виды верстки сайтов

Есть несколько типов верстки:

1. Табличная.
2. Блочная.
3. Смешанная.

Нас интересует блочная верстка. В чем ее отличие от табличной? У верстки блоков при помощи тега DIV есть определенные преимущества:

1. Загрузка при дизайне блоками происходит быстрее.
2. Содержимое блоков отображается (в отличие от таблиц) по мере того, как происходит загрузка. Как известно, данные таблиц появятся только после отображения всей таблицы.
3. Код с div-ами легче читается.

Это не все достоинства, которыми славится блочная верстка.

Как изменить расположением div-блоков?

В этом нам поможет float – это свойство, которое способно принимать следующие значения:

1. Выравнивание по левому краю - left.
2. Для выравнивания по правому краю – right.
3. Элемент остается там, где был, он никуда не перемещается, если задано none. Данное значение будет по умолчанию.

Другое важное свойство, которое нам понадобится – clear. У него может быть 4 значения:

1. Для установки элемента под предыдущим, перемещенным вправо, блоком – right.
2. Left устанавливает элемент ниже предыдущего, который перемещен влево.
3. Both - установка под предыдущим перемещенным блоком.
4. None говорит об отсутствии ограничений по положению блока относительно тех элементов, которые перемещены.

Пример

Рассмотрим, как будет выглядеть блочная верстка div. Пишем наш код:

Под кодом вы видите результат. Таким образом, на основе нескольких свойств можно управлять расположением блоков по своему желанию. Переходим к следующему моменту. У нас использовано text-align:center, чтобы отцентрировать каждый блок для любого браузера.

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

Еще кое-что важное

Есть одно популярное свойство, которое применяют в верстке – position, его используют для позиционирования.

Значения для свойства position:

1. Relative – устанавливает положение элементов относительно их исходных мест. Применение left, top, righ, bottom сдвигает элемент в определенном направлении.
2. Static – обычное отображение элемента. Нет смысла использовать right/left, top/bottom – это ни к чему не приведет.
3. Absolute – абсолютное позиционирование элемента.
4. Fixed – аналогично absolute. Элемент привязан к определенной точке на экране, но он не меняет свое положение даже в том случае, если страницу листать.

Многие верстальщики замечали, что при применении фиксированного, абсолютного или относительного позиционирования происходит наложение блоков. И тогда интересно знать, какой из блоков ниже, какой выше. Чтобы ответить на этот вопрос, необходимо свойство z-index. Оно вывело верстку блоками на качественно новый уровень. Это дает возможность делать позиционирование не только на плоскости, но и при помощи третьей оси Z. Значение такого свойства может быть положительным и отрицательным.

Видео: Как создать простой сайт с помощью блокнота HTML 5, CSS 3 и PHP

Создадим 3 блока. Далее поэкспериментируем с абсолютным позиционированием.

Видео: Уроки html. Как сделать сайт

Как видно из примера, несложно менять позиции блоков. На основе того, что вы теперь умеете, любой сделает элементарную блочную верстку страницы сайта. А применяя больше свойств, вы будете совершенствовать свое мастерство.