Примеры блочной компоновки html страницы. Блочная верстка CSS. Отличительные черты от табличной верстки

Верстка веб сайта осуществляется с применением двух основных способов: табличной и блочной 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

Цель урока: Знакомство с блочной версткой CSS. Получение навыков использования блочной верстки сайта

При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак - это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

Фиксированный дизайн или
жесткая блочная верстка (две колонки)

Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
Основной блок с контентом размещается по центру , тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

Рис.1. Пример фиксированного дизайна

Общая ширина может выбираться дизайнером, что называется «на глаз», или после сбора каких-либо дополнительных сведений.

Пример: создать фиксированный дизайн сайта на основе представленного выше изображения

Выполнение:

«Разбиваем» все основные элементы страницы на блоки следующим образом:
- блок 1 — слой первый (id="shapka"),
- блок 2 и 3 заключаются в единый блок (id="container"),
- блок 2 — слой с меню (id="menu"),
- блок 3 — слой с контентом (id="content"),
- блок 4 — слой с id="bottom" .

Схематично изобразим расположение блоков:

1. Задаем свойства «шапки» (блок 1)

Выбираем общую ширину слоев «на глаз» — 750 пикселей.

margin-right: auto; margin-left: auto;

либо задать высоту при помощи отступа

например:

padding-top : 15px ; padding-bottom : 15px ;

padding-top: 15px; padding-bottom: 15px;

Весь код для шапки:

#shapka{ text-align: left; /* Выравнивание внутреннего контента по левому краю */ width: 750px; /* Ширина блока и общая ширина*/ background: #900000; /* Цвет фона */ height: 50px; /* Высота блока */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ padding: 10px; }

2. Создаем свойства контейнера

Задаем ширину контейнера: она должна быть 750px + 20px (общая ширина макета + внутренние отступы в общей ширине макета). Т.е. в контейнере нет внутренних отступов, поэтому увеличим его ширину на 10 пикселей слева и 10 пикселей справа
Если макет должен прилегать к левой части экрана, то браузер выполнит это автоматически. В нашем случае отцентрируем блок контейнера

#container { width: 770px; /* Ширина слоя или (ширина макета+20) */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

3. Создаем свойства для блока 2 — меню

Слой номер 2 шириной в 200 пикселей (width)
Для этого же слоя (меню) устанавливаем обтекание соседним блоком, т.е. свойство float: left
Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
Задаем цвет текста и заднего фона (background , color)

#menu { width: 200px; /* Ширина слоя */ float: left; color: white; /* Цвет текста */ background: #008080; /* Цвет фона */ padding: 10px; /* Внутренние поля вокруг содержимого */ }

4. Создаем свойства для блока 3 — контент

Задаем ширину слоя из расчета 770px — 200px = 570px, Но! так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
Задаем обтекание float: left , исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
Задаем цвет заднего фона (background) и внутренние поля (padding)

#content { /* Правая колонка*/ width: 550px; /* Ширина слоя */ float: left; /* Обтекание с соседним слоем */ padding: 10px; /* Внутренние поля вокруг содержимого */ background: #e0e0e0; /* Цвет заднего фона */ }

5. Создаем свойства для блока 4 — «подвал»

Ширину слоя устанавливаем в 750 пикселей
Для этого блока надо убрать обтекание, т.е. установить свойство clear
Устанавливаем внутренние поля padding
Задаем цвет для фона (background) и текста (color)
Центрируем блок (margin-right и margin-left)

#bottom{ width:750px; /* Ширина слоя */ clear:left; /* возвращаем блочность и располагаем слой слева */ padding: 10px; /* Внутренние поля вокруг содержимого */ background:#444; /* фон */ color:#fff; /* цвет текста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слева */ }

Итоговый код: всё вместе

Результат:

Рис.2. Жесткая блочная верстка из двух колонок

Фиксированный дизайн для трех колонок

При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

Использование свойства для расположения колонок рядом.
Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

Рассмотрим первый случай.

Использование свойства float для макета в три колонки

На рис. 3 — результат использования свойства для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

Рис. 3. Фиксированный дизайн в три колонки

Пример: создать веб-страницу с макетом из трех колонок, изображенную на рис. 3 . Использовать приемы фиксированного блочного макетирования

Выполнение:

Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
Получим схематичное изображение расположения блоков:

Получим следующую html-структуру:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<body > <div class = "container" > <div id = "header1" > Евгений Евтушенко</ div > <div id = "header2" > Валерий Брюсов</ div > <div id = "header3" > Эдуард Асадов</ div > </ div > <div class = "container" > <div id = "col1" > Мне снится старый друг,<br / > который стал врагом,<br / > но снится не врагом,<br / > а тем же самым другом.<br / > Со мною нет его,<br / > но он теперь кругом,<br / > и голова идет<br / > от сновидений кругом. </ div > <div id = "col2" > Великое вблизи неуловимо,<br / > Лишь издали торжественно оно,<br / > <br / > </ div > <div id = "col3" > <br / > <br / > <br / > </ div > </ div > </ body >

Евгений Евтушенко

Валерий Брюсов

Эдуард Асадов

Мне снится старый друг,
который стал врагом,
но снится не врагом,
а тем же самым другом.
Со мною нет его,
но он теперь кругом,
и голова идет
от сновидений кругом.

Великое вблизи неуловимо,
Лишь издали торжественно оно,
Мы все проходим пред великим мимо
И видим лишь случайное звено.

В любых делах при максимуме сложностей
Подход к проблеме все-таки один:
Желанье - это множество возможностей,
А нежеланье - множество причин.

2. Добавление стилей для заголовков (селектор header...) и колонок (селектор col...)

Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ }

Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ }

Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).

#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; }

Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family , font-weight , font-size , color).

#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Получим код:

#header1 , #header2 , #header3 , #col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 5px ; /* Поля вокруг текста */ /* Отступ сверху */ float : left ; /* Состыковка колонок по горизонтали */ /* Рамка вокруг слоя */ /* Не серифный или рубленый шрифт */ font-weight : bold ; /* Жирное начертание текста заголовка */ font-size : 80% ; /* Размер шрифта */ color : white ; /* Цвет текста заголовка */ }

#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 5px; /* Поля вокруг текста */ margin-left: 5px; /* Отступ слева */ margin-top: 2px; /* Отступ сверху */ float: left; /* Состыковка колонок по горизонтали */ border: 1px solid black; /* Рамка вокруг слоя */ font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */ font-weight: bold; /* Жирное начертание текста заголовка */ font-size: 80%; /* Размер шрифта */ color: white; /* Цвет текста заголовка */ }

Установим задний фон отдельно для каждого селектора.

#header1 { background : #B38541 ; } #header2 { background : #008159 ; } #header3 { background : #006077 ; } #col1 { background : #EBE0C5 ; } #col2 { background : #BBE1C4 ; } #col3 { background : #ADD0D9 ; }

#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

Смотрим промежуточный результат:

Рис. 4. Промежуточный результат

3. Задание стиля для контейнеров

Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)

.container { clear : both ; /* Отменяет действие обтекания float */ }

Container { clear: both; /* Отменяет действие обтекания float */ }

Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.

#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Шрифт серифный или с засечками */ font-size: 100%; /* Размер шрифта */ font-weight: normal; /* Нормальное начертание */ color: black; /* Цвет текста */ }

Итоговый код: всё вместе

Евгений Евтушенко

Валерий Брюсов

Эдуард Асадов

Результат:

Рис. 5. Результат

Использование позиционирования слоев для макета в три колонки

Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

Рис. 6. Позиционирование слоев для макета в три колонки с разделителем

Пример: создать веб-страницу с макетом из трех колонок с разделительной линией, изображенную на рис. 6 . Использовать приемы фиксированного макетирования с позиционированием слоев

Выполнение:

1. Создание структуры html-кода

Для данного макета достаточно создать три слоя div для каждой колонки.

Поэтому структура будет простой:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<body > <div id = "col1" > Иван Бунин</ br ></ br > </ br > </ br > </ br > </ div > <div id = "col2" > </ br > Золотится отблеском окно. </ br > </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > </ br > </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body >

Иван Бунин

На окне, серебряном от инея,
За ночь хризантемы расцвели.
В верхних стёклах - небо ярко-синее
И застреха в снеговой пыли.

Всходит солнце, бодрое от холода,
Золотится отблеском окно.
Утро тихо, радостно и молодо.
Белым снегом всё запушено.

И всё утро яркие и чистые
Буду видеть краски в вышине,
И до полдня будут серебристые
Хризантемы на моём окне.

1903

2. Добавление стилей для колонок

Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; }

Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float .

#col1 , #col2 , #col3 { width : 250px ; /* Ширина колонок */ padding : 0 6px ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ }

Так как разделительная граница должна присутствовать только с внутренних сторон слоев, то рамку необходимо добавить только у двух слоев с одной стороны (border).

#col1 , #col2 { border-right : 1px solid #000 ; /* Поля по вертикали и горизонтали */ float : left ; /* Обтекание слоев */ } #col1 , #col2 { border-right : 1px solid #000 ; /* Параметры линии справа от текста */ }

#col1, #col2, #col3 { width: 250px; /* Ширина колонок */ padding: 0 6px; /* Поля по вертикали и горизонтали */ float: left; /* Обтекание слоев */ } #col1, #col2 { border-right: 1px solid #000; /* Параметры линии справа от текста */ }

</ style > </ head > <body > <div id = "col1" > Иван Бунин</ br ></ br > На окне, серебряном от инея,</ br > За ночь хризантемы расцвели.</ br > В верхних стёклах - небо ярко-синее</ br > И застреха в снеговой пыли. </ div > <div id = "col2" > Всходит солнце, бодрое от холода, </ br > Золотится отблеском окно. </ br > Утро тихо, радостно и молодо. </ br > Белым снегом всё запушено. </ div > <div id = "col3" > И всё утро яркие и чистые</ br > Буду видеть краски в вышине, </ br > И до полдня будут серебристые </ br > Хризантемы на моём окне.</ br ></ br > 1903 </ div > </ body >

Дизайн в три колонки готов!

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

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

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

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

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

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

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

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

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

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

Блочная верстка позволяет строить структуру страницы при помощи отдельных блоков (контейнеров

). Они как кирпичики, из которых состоит остов сайта.

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

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

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

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

Блок

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

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

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

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

Верстка блоками div давно уже стала стандартом и имеет ряд преимуществ перед табличной версткой. Однако на деле начинающие разработчики путаются в поведении этих самых блоков.

Давайте разберем основные моменты при блочной верстке. Сейчас мы не будем брать во внимание стандарт html5, а просто рассмотрим основу основ при верстке блоками div, которая используется при создании макета или же какого то отдельного компонента страницы.

Что считать блочным элементом?

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

Итак, от простого к сложному. Посмотрим, как отобразятся блоки div по умолчанию без стилей, влияющих на их положение. Для наглядности стили к элементам будем добавлять инлайново, через атрибут style.

Блок 1

Блок 2

Блок 3

Добавим значение ширины для каждого блока:

Блок 1

Блок 2

Блок 3

Видно, что каждый блок согласно спецификации располагается с новой строки. Это их нормальное поведение.

Теперь возникает вопрос, как расположить блоки div на одной строке , друг за другом?

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

Свойство float имеет следующие значения:

left - блок выравнивается по левому краю, обтекание справа
right - блок выравнивается по правому краю, обтекание слева
none - обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

Блок 1

Блок 2

Блок 3

В результате, блоки выстроились на одной строке. Хорошо, допустим, мы захотели добавить еще один div снизу, и сделаем это без указания свойства float:

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Блок 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Блок 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Почему так вышло? Вкратце, так происходит, потому что элементы с float выпадают из потока документа. Однако, это тема отдельной статьи. Здесь же мы познакомимся с новым свойством , которое управляет поведением плавающих элементов:

left - запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
rigth - запрещает обтекание элемента с правой стороны
both - запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.