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

Принципиальный совет

Применяйте зрительный редактор, чтоб все было нагляднее. Те, кто отлично знают 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. Значение такового характеристики может быть положительным и отрицательным.

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

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