Что такое блочная верстка? Как сверстать простую страницу сайта самостоятельно?
Есть желание научиться делать без помощи других страницы веб-сайтов? Тогда давайте освоим, что такое блочная верстка. Верстальщики-новички встречают ряд затруднений, у их возникает огромное количество вопросов. Разглядим, что представляет собой блочная верстка.
Принципиальный совет
Применяйте зрительный редактор, чтоб все было нагляднее. Те, кто отлично знают HTML, работают в блокноте, потому что им все понятно. А новенькие могут пользоваться такими программками, как FrontPage либо, к примеру, Dreamweaver.
Виды верстки веб-сайтов
Есть несколько типов верстки:
- Табличная.
- Блочная.
- Смешанная.
Нас интересует блочная верстка. В чем ее отличие от табличной? У верстки блоков с помощью тега DIV есть определенные достоинства:
- Загрузка при дизайне блоками происходит резвее.
- Содержимое блоков отображается (в отличие от таблиц) по мере того, как происходит загрузка. Как понятно, данные таблиц появятся только после отображения всей таблицы.
- Код с div-ами легче читается.
Это не все плюсы, которыми славится блочная верстка.
Как поменять расположением div-блоков?
В этом нам поможет float – это свойство, которое способно принимать последующие значения:
- Выравнивание по левому краю — left.
- Для выравнивания по правому краю – right.
- Элемент остается там, где был, он никуда не перемещается, если задано none. Данное значение будет по дефлоту.
Другое принципиальное свойство, которое нам пригодится – clear. У него может быть 4 значения:
- Для установки элемента под предшествующим, перемещенным на право, блоком – right.
- Left устанавливает элемент ниже предшествующего, который перемещен на лево.
- Both — установка под предшествующим перемещенным блоком.
- None гласит об отсутствии ограничений по положению блока относительно тех частей, которые перемещены.
Пример
Разглядим, как будет смотреться блочная верстка div. Пишем наш код:
Под кодом вы видите итог. Таким макаром, на базе нескольких параметров можно управлять расположением блоков по собственному желанию. Перебегаем к последующему моменту. У нас применено text-align:center, чтоб отцентрировать каждый блок для хоть какого браузера.
Видите ли, блочная верстка веб-сайта делается достаточно легко. Принципиально изучить и использовать на практике больше параметров, что позволит творить более гибкую структуру страничек.
Еще кое-что принципиальное
Есть одно пользующееся популярностью свойство, которое используют в верстке – position, его употребляют для позиционирования.
Значения для характеристики position:
- Relative – устанавливает положение частей относительно их начальных мест. Применение left, top, righ, bottom сдвигает элемент в определенном направлении.
- Static – обыденное отображение элемента. Нет смысла использовать right/left, top/bottom – это ни к чему не приведет.
- Absolute – абсолютное размещение элемента.
- Fixed – аналогично absolute. Элемент привязан к определенной точке на дисплее, но он не меняет свое положение даже в этом случае, если страничку листать.
Многие верстальщики замечали, что при применении фиксированного, абсолютного либо относительного позиционирования происходит наложение блоков. Тогда и любопытно знать, какой из блоков ниже, какой выше. Чтоб ответить на этот вопрос, нужно свойство z-index. Оно вывело верстку блоками на отменно новый уровень. Это дает возможность делать размещение не только лишь на плоскости, да и с помощью третьей оси Z. Значение такового характеристики может быть положительным и отрицательным.
Сделаем 3 блока. Дальше поэкспериментируем с абсолютным позиционированием.
Как видно из примера, нетрудно поменять позиции блоков. На базе того, что вы сейчас умеете, хоть какой сделает простую блочную верстку странички веб-сайта. А применяя больше параметров, вы будете улучшать свое мастерство.