Блочная верстка пример. Блочная верстка: что это и зачем она нужна? Пример блочной вёрстки
Верстка веб сайта осуществляется с применением двух основных способов: табличной и блочной div верстки. Блочная верстка более функциональна и предоставляет больше возможностей благодаря использованию CSS.
Как работает блок?
Для выполнения данного типа верстки используются два файла (index.html и style.css ) содержащие код HTML и стилевое оформление сайта соответственно.
В первом файле прописываются непосредственно div -контейнеры, которые являются своеобразным фундаментом для макета, а во втором - описываются стилевые особенности и положение наших div -контейнеров.
Чтобы наблюдать результат совершаемых манипуляций в реальном времени, необходимо ввести в адресной строке браузера: http://URL/test.
Основы верстки
Двухколоночный макет, который мы попытаемся создать, можно схематически отобразить так:
Все элементы нашего макета необходимо поместить в один общий, чтобы иметь возможность задавать параметры всего макеты в целом. Содержимым общего контейнера будут div -ы, которые формируют отдельный блоки. С помощью CSS мы можем настроить следующий параметры: размер, расположение на странице, стили и цвет.
Блочная верстка сайта
Каждый элемент макета необходимо поместить в отдельный «контейнер», с помощью тега div . В файле CSS необходимо добавить свойства элементов, определив параметры внешнего вида и размещения элементов (ширина, высота, шрифт, кегль и так далее).
Для того, чтобы не путаться, необходимо в каждый контейнер вписать название данного блока, выглядеть это будет приблизительно так:
"http://www.w3.org/TR/html4/loose.dtd">Блочная верстка - дубль 2 ШапкаЛевая колонкаСодержимое страницы
После выполненных манипуляций необходимо открыть файл Style.css и описать стили для данных контейнеров. В первую очередь необходимо описать стили для основных тегов Body и Html , обнулив отступы от края страницы, чтобы обеспечить кроссбраузерную совместимость:
body, html {
margin:0px;
padding:0px;
}
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
}
Чтобы получить более подробный мастер-класс на тему того, как сверстать сайт на основе div , вы можете просмотреть следующие видео:
https://www.youtube.com/watch?v=omyeH5h1lqA
https://www.youtube.com/watch?v=SQ7cWIy63yI
Верстка блоками DIV
имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV
обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV
отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться), код страницы удобочитаем. Но и блочная верстка не идеальна, есть и недостатки. Так нельзя получить представление данных как это делает таблица. То есть таблицы нужно использовать для отображения табличных данных. Табличную верстку также можно использовать и для задания структуры страницы, но злоупотреблять все, же не стоит. Давайте посмотрим, как можно управлять положением блока DIV
на странице сайта.
Для начала рассмотрим стилевое свойство float
, которое управляет позиционированием перемещаемого блока. Свойство float
может принимать значения
- left - элемент страницы принудительно выравнивается по левому краю;
- right - элемент страницы принудительно выравнивается по правому краю;
- none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).
- left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;
- right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;
- both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока;
- none - ограничений на положение блока относительно перемещаемых блоков не накладывается.
text
text
текст
В браузере отобразиться этот HTML-код следующим образом
2
text
text
Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV .
text
text
текст
Отобразится в браузере этот код следующим образом
2
text
text
Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left :
text
text
текст
Получим следующее представление
2
text
text
Ширина у блоков осталась такая же, как и в предыдущем примере, но свое положение они изменили: выстроились в один горизонтальный ряд. Если добавить еще один блок, то он отобразится не под записанными ранее блоками, а по-другому. В общем случае определить, как отобразится его содержимое, нет возможности.
text
text
текст
контент
контент
контент
Но в нашем случае он отобразится следующим образом
2
text
text
4
контент
контент
контент
Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear , с соответствующим значением, в нашем случае можно задать значение либо both , либо left :
text
text
текст
контент
контент
контент
Полученный код отобразится следующим образом (причем в разных браузерах, таких как IE, Opera и Firefox, пример будет отображаться с отличиями)
2
text
text
4
контент
контент
контент
С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto , например
содержимое блока DIV
Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV , в котором будет стилевое свойство text-align со значением center . Например
Содержимое блока DIV
То есть в браузере IE6 можно управлять положением блока DIV свойством text-align , используя значения left , center , right . В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin .
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах
Содержимое блока DIV
Верстка блоками DIV не обходится без управления положением HTML-элементов с помощью стилевого свойства position , которое определяет схему позиционирования блока. Свойство position может принимать значения
- static - задает обычный блок, который не позиционируется индивидуально, а позиционируется в обычном потоке. Свойства top , left , bottom и right не учитываются. Является значением по умолчанию;
- relative - задает относительное позиционирование блока. Заключается в следующем. Сначала положение блока рассчитывается как при обычном потоке (то есть не берется во внимание относительное позиционирование). Затем блок смещается относительно своего нормального положения в соответствии со значениями свойств top , left , bottom и right . Последующее содержимое выводится в поток так, как будто блок, относительно позиционированный, не был смещен;
- absolute - задает абсолютное позиционирование блока. Абсолютно позиционируемые блоки изымаются из общего потока и не влияют на выводимое последующее содержимое. Положение абсолютно позиционируемого блока задается свойствами top , left , bottom и right относительно родительского элемента (блока);
- fixed - задает фиксированное позиционирование блока. При фиксированном позиционировании положение блока рассчитывается, как и при абсолютном позиционировании, но в дальнейшем блок фиксируется и относительно окна браузера и не прокручивается вместе с остальным содержимым страницы. Данное свойство поддерживается браузерами Opera и Firefox.
- top - задает смещение верхней границы позиционируемого блока вниз относительно верхней границы родительского элемента;
- left - задает смещение левой границы позиционируемого блока вправо относительно левой границы родительского элемента;
- bottom - задает смещение нижней границы позиционируемого блока вверх относительно нижней границы родительского элемента;
- right - задает смещение правой границы позиционируемого блока влево относительно правой границы родительского элемента.
При абсолютном, относительном и фиксированном позиционировании блоки могут накладываться друг на друга, и в этом случае может появиться вопрос, какой из них окажется "выше"? То есть, какой элемент будет отображаться, а какой будет перекрываться находящимся "выше" блоком. Решить этот вопрос поможет свойство z-index . Оно определяет позицию уровня, которую будет занимать блок. Его значением может быть любое положительное или отрицательное целое число. При этом элементы с большим значением z-index будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.
text
текст
содержимое
Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования
text
текст
содержимое
Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере
text
текст
содержимое
В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками DIV", приведу шаблон, который позволяет получить очень распространенную схему верстки: вверху страницы заголовок, далее три колонки с основным содержимым страницы и внизу страницы блок, обычно содержащий информацию о копирайте. Причем нижний блок будет находиться внизу страницы даже при малом количестве содержимого на странице. Также две колонки (левая и правая) из трех с основным содержимым будут с фиксированными размерами, а средняя будет "резиновая", то есть она будет менять ширину в зависимости от разрешения экрана монитора. Пример можно посмотреть на странице .
Верстка блоками DIV позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!
Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Мы не будем использовать элемент
Элементы