Блочная верстка: PHP include — применение в HTML верстке сайта

Блочная вёрстка | htmlbook.ru

Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке
сайта, расшифровке этого понятия в литературе по сайтостроению практически не
уделяется внимание. В дальнейшем я буду активно использовать термин «слой»,
поэтому вначале необходимо определить, что же под ним подразумевается.

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку
тега <layer>. Этот тег позволял прятать/показывать
текущее содержимое, устанавливать положение относительно окна браузера, накладывать
один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности
по созданию действительно динамического контента на странице. Несмотря на столь
впечатляющий набор возможностей, тег <layer>
не был включён в спецификацию HTML и остался лишь расширением браузера
Netscape.

Однако необходимость в указанных возможностях уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан
и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная
нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента,
в том числе менять значения динамически через JavaScript. К сожалению, объектные
модели браузеров для доступа к элементам различались, поэтому приходилось писать
достаточно сложный код, который бы учитывал эти особенности.

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

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

Хак — это набор приемов, когда определённому браузеру
«подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря
на то, что браузеры не в полной мере сами её поддерживают, они прогрессируют
именно в направлении полной поддержки различных спецификаций
(HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут
унифицированы и один и тот же сайт станут отображать корректно.

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями.
Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются
стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную
путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому
договоримся относить этот термин только к тегам <div>.

В HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью
тега <div>,
к которому применяется стилевое оформление.

Таким образом, выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании
тегов <div> и стилей. При этом придерживаются
следующих принципов.

Разделение содержимого и оформления

Код HTML должен содержать только теги разметки и теги логического форматирования,
а любое оформление выносится за пределы кода в стили. Такой подход позволяет
независимо управлять видом элементов страницы и её содержимым. Благодаря этому
над сайтом может работать несколько человек, при этом каждый выполняет свою
функцию самостоятельно от других. Дизайнер, верстальщик и программист работают
над своими задачами автономно, снижая время на разработку сайта.

Активное применение тега <div>

При блочной вёрстке существенное значение уделяется универсальному тегу
<div>, который выполняет множество функций.
Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку,
то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно
ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег
<div> является кирпичиком вёрстки, её базовым
фундаментом.

Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому
же поисковые системы его лучше индексируют.

Таблицы применяются только для представления табличных данных

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

Подведу итоги. В HTML4 и XHTML слой это базовый элемент вёрстки веб-страниц, при которой активно применяются
стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль
уделяется тегу <div>, с которым у большинства
людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся
в дальнейшем употреблять термин «слой» к тегу <div>
для которого указан стилевой идентификатор
или класс. Таким образом, выражение «слой с именем content» подразумевает, что
используется тег <div> или <div
>.

В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру, <header> и <footer> используются для создания «шапки» и «подвала», <nav> для навигации, <aside> для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега <div> и придать больше смысла разметке. Поэтому в вёрстке на HTML5 активно применяется термин «элемент», под которым подразумевается соответствующий тег и элемент который он создаёт.

Изложенные выше принципы блочной вёрстки при этом сохраняются за исключением того момента, что <div> в некоторых случаях заменяется более осмысленными тегами.

Блочные элементы | htmlbook.ru

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h2>,…,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

• Блоки располагаются по вертикали друг под другом.
• На прилегающих сторонах элементов действует эффект схлопывания отступов.
• Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h2>Заголовок</h2></a> не пройдёт валидацию, правильно вложить теги наоборот — <h2><a>Заголовок</a></h2>.
• По ширине блочные элементы занимают всё допустимое пространство.
• Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
• Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
• Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
• На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
• Текст по умолчанию выравнивается по левому краю.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет <div> как универсальный кирпичик вёрстки. Тег <div> допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь <div>. В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега <div>

<div>
  <div>
    <div>
      <h2><span>css Zen Garden</span></h2>
      <h3><span>The Beauty of <acronym 
         title="Cascading Style  Sheets">CSS</acronym> Design</span></h3>
    </div>
    <div>
      <p><span>A demonstration of what can be accomplished 
      visually through <acronym title="Cascading Style Sheets">CSS</acronym>
      - based design.  Select any style sheet from the list to load it into 
      this page.</span></p>
    </div>
  </div>
</div>

Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри <div> располагается два тега <p> и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Анонимный блок</title>
 </head>
 <body>
  <div>
   <p>Первый абзац</p>
   Анонимный блок
   <p>Второй абзац</p>
  </div>
 </body>
</html>

Схематично блоки в данном примере показаны на рис.  3.23. Серым цветом выделены блочные теги <p>, а пунктиром — анонимный блок.

Рис. 3.23. Блоки в документе

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height. В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

Пример 3.15. Меню

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Меню</title>
  <style type="text/css">
   .menu {
    width: 220px; /* Ширина меню */
    padding: 5px; /* Отступы от рамки до пунктов меню */
    border: 1px solid #000; /* Рамка вокруг меню */
   } 
   . menu P { margin: 0 0 2px; }
   .menu A {
    padding: 2px; /* Отступ от рамки вокруг ссылки до текста */
    display: block; /* Ссылка как блочный элемент */
    border: 1px solid #fff; /* Маскируем рамку вокруг ссылки */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   .menu A:hover {
    background: #faf3d2; /* Цвет фона под ссылкой */
    color: #800000; /* Новый цвет ссылки */
    border: 1px dashed #634f36 /* Рамка вокруг ссылки */
   }
  </style>
 </head>
 <body>
  <div>
   <p><a href="l.html">Метод простых итераций</a></p>
   <p><a href="2.html">Метод случайных чисел</a></p>
   <p><a href="3.html">Метод дихотомии</a></p>
   <p><a href="4.html">Метод золотого сечения</a></p>
  </div> 
 </body>
</html>

Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24).

Рис. 3.24. Ссылка как блочный элемент

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

Блочная верстка для резинового дизайна сайта

Цель урока: Знакомство с принципами блочной верстки для резинового дизайна сайта. Изучение основных свойств для построения резинового макета

Резиновый дизайн и необходимые свойства CSS

Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора.

«Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера.

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

Две колонки в резиновой дизайне

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

Свойство float для создания эффекта плавающего элемента

Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый).

Рис. 1. Резиновый дизайн сайта в две колонки

Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна.

Основные свойства

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

<div>Заголовок сайта</div>
  <div>
   Ссылка 1<br>
   Ссылка 2<br>
   Ссылка 3<br>
   Ссылка 4<br>
  </div>
  <div>
   <h2>Заголовок</h2>
   <p>Контент.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad 
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
ea commodo consequat. Duis te feugifacilisi.
  </p>
  </div>
  <div>
   Подвал
  </div>

<div>Заголовок сайта</div>
<div>
Ссылка 1<br>
Ссылка 2<br>
Ссылка 3<br>
Ссылка 4<br>
</div>
<div>
<h2>Заголовок</h2>
<p>Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis te feugifacilisi.
</p>
</div>
<div>
Подвал
</div>

2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

#menu{
    float: left; 
    width: 20%;
}

#menu{
float: left;
width: 20%;
}

2 вариант:

#menu{
    float: left; 
    width: 200px;
}

#menu{
float: left;
width: 200px;
}

3. Для правой колонки обязательным является свойство, определяющее внешний отступ от левого края окна браузера (margin-left). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

#content{
    margin-left: 21%;
}

#content{
margin-left: 21%;
}

2 вариант:

#content{
    margin-left: 210px;
}

#content{
margin-left: 210px;
}

Все остальные свойства зависят от оформления сайта.

Весь код CSS будет выглядеть так:

#top { /* Шапка с заголовком страницы */
    background: #e3e8cc; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки  */
    padding: 10px 0 10px 10px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Расстояние между шапкой и колонками */
    font-size: 24px; /* Размер шрифта */
    font-weight: bold; /* Жирное начертание */
}
#menu { /* Меню сайта */
    width: 200px; /* Ширина меню */
    background: #e3e8cc; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки */
    float: left; /* Состыковка со слоем контента по горизонтали */
    padding: 3px; /* Внутренние поля */
}
#content { /* Основное содержание */
    background: #e3e8cc; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки */
    margin-left: 210px; /* Отступ слева с учетом ширины левой колонки */
    margin-bottom: 5px /* Отступ снизу */
}
#content p{
	padding: 3px; /* Внутренние поля контента*/
}
#bottom { /* Подвал */
    background: #e3e8cc; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки */
    padding: 3px; /* Поля вокруг текста */
}

#top { /* Шапка с заголовком страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 10px 0 10px 10px; /* Поля вокруг текста */
margin-bottom: 5px; /* Расстояние между шапкой и колонками */
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
}
#menu { /* Меню сайта */
width: 200px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
float: left; /* Состыковка со слоем контента по горизонтали */
padding: 3px; /* Внутренние поля */
}
#content { /* Основное содержание */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-left: 210px; /* Отступ слева с учетом ширины левой колонки */
margin-bottom: 5px /* Отступ снизу */
}
#content p{
padding: 3px; /* Внутренние поля контента*/
}
#bottom { /* Подвал */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 3px; /* Поля вокруг текста */
}

Результат:

Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне

Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка.

Правая колонка с фиксированной шириной: основные свойства

Код html-структуры остается прежним, меняются лишь CSS-свойства.

1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
1 вариант:

#menu{
    float: right; 
    width: 20%;
}

#menu{
float: right;
width: 20%;
}

2 вариант:

#menu{
    float: right; 
    width: 200px;
}

#menu{
float: right;
width: 200px;
}

2. Для правой колонки задаем свойство, определяющее внешний отступ от правого края окна браузера (margin-right). Этот отступ должен соответствовать ширине левой колонки + 1px или 1%:
1 вариант:

#content{
    margin-right: 21%;
}

#content{
margin-right: 21%;
}

2 вариант:

#content{
    margin-right: 210px;
}

#content{
margin-right: 210px;
}

Результат:

Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне

Применение позиционирования в резиновом дизайне

При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат.
Например:
Левая колонка:

position:absolute;
width: ...px;
left: ...px; 
top: ...px;

position:absolute;
width: …px;
left: …px;
top: …px;

Правая колонка:

margin-left: ...px; /* отступ слева, равный ширине первой колонки */

margin-left: …px; /* отступ слева, равный ширине первой колонки */

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

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

Выполнение:

1. Расположим основные html-элементы страницы следующим образом:

 <div>
  <p>
   Ссылка 1<br>
   Ссылка 2<br>
   Ссылка 3<br>
   Ссылка 4<br>
   </p>
  </div>
  <div>
   <p>Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </p>
  </div>

<div>
<p>
Ссылка 1<br>
Ссылка 2<br>
Ссылка 3<br>
Ссылка 4<br>
</p>
</div>
<div>
<p>Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
</p>
</div>

2. Для левой колонки задаем свойства, обязательные при использовании позиционирования в резиновом дизайне — position, width, left и top:

#col1 { /* Левая колонка */ 
    position: absolute; /* Абсолютное позиционирование */
    width: 190px; /* Ширина блока*/
    left: 0px; /* Координата от левого края окна */ 
    top: 0px; /* Координата от верхнего края окна */ 
    background: #800000; /* Цвет фона левой колонки */
    padding: 5px; /* Поля вокруг текста */ 
}

#col1 { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 190px; /* Ширина блока*/
left: 0px; /* Координата от левого края окна */
top: 0px; /* Координата от верхнего края окна */
background: #800000; /* Цвет фона левой колонки */
padding: 5px; /* Поля вокруг текста */
}

3. Задаем свойства для правой колонки, обязательные при использовании позиционирования в резиновом дизайне — margin-left:

#col2 { /* Правая колонка */ 
    margin-left: 200px; /* Отступ слева=ширине левой колонки + padding */ 
    background: #e0e0e0; /* Цвет фона правой колонки */
    padding: 5px; /* Поля вокруг текста */
}

#col2 { /* Правая колонка */
margin-left: 200px; /* Отступ слева=ширине левой колонки + padding */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 5px; /* Поля вокруг текста */
}

4. Удаляем лишние отступы браузера по умолчанию:

body {
    padding: 0; /* Отступы для браузера Opera */ 
    margin: 0; /* Обнуляем значения отступов на веб-странице */ 
   }

body {
padding: 0; /* Отступы для браузера Opera */
margin: 0; /* Обнуляем значения отступов на веб-странице */
}

Результат:

Рис. 4. Резиновый дизайн сайта с позиционированием

Одинаковая высота колонок

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

1. Обе колонки заключаются в слой-контейнер:

<div>
  <div>
  <p>
   Ссылка 1<br>
   Ссылка 2<br>
   Ссылка 3<br>
   </p>
  </div>
  <div>
   <p>Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
  </p>
  </div>
</div>

<div>
<div>
<p>
Ссылка 1<br>
Ссылка 2<br>
Ссылка 3<br>
</p>
</div>
<div>
<p>Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
</p>
</div>
</div>

2. Для левой колонки устанавливаем ширину, абсолютное позиционирование, координаты от верхнего левого угла браузера, внешний отступ слева отрицательного значения (!), равный ширине блока, и внутреннее поле слева, равное также ширине блока:

#col1 { /* Левая колонка */ 
    position: absolute; /* Абсолютное позиционирование */
    width: 200px; /* Ширина слоя */
    left: 0px; /* Положение от левого края окна */ 
    top: 0px; /* Положение от верхнего края окна */
    margin-left: -200px; /* внешний левый отступ отрицательного значения */
    padding-left: 200px; /* внутренне левое поле */
    background: #800000; /* Цвет фона левой колонки */
}

#col1 { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
left: 0px; /* Положение от левого края окна */
top: 0px; /* Положение от верхнего края окна */
margin-left: -200px; /* внешний левый отступ отрицательного значения */
padding-left: 200px; /* внутренне левое поле */
background: #800000; /* Цвет фона левой колонки */
}

3. Для правой колонки никакие свойства позиционирования не устанавливаются, но можно задать свойства для оформления колонки:

#col2 { /* Правая колонка */ 
 
    background: #e0e0e0; /* Цвет фона правой колонки */
    padding: 5px; /* Поля вокруг текста */
}

#col2 { /* Правая колонка */

background: #e0e0e0; /* Цвет фона правой колонки */
padding: 5px; /* Поля вокруг текста */
}

4. Для слоя контейнера необходимо задать границу, ширина которой должна совпадать с шириной левой колонки, а цвет — с цветом левой колонки:

#container {
    border-left: 200px solid #800000;
}

#container {
border-left: 200px solid #800000;
}

Результат:

Рис. 6. Колонки одинаковой высоты

Блочная верстка с абсолютным и относительным позиционированием

Цель урока: Знакомство с принципами относительного и абсолютного позиционирования блочной верстки css

Абсолютное позиционирование CSS в фиксированном дизайне

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

Таким образом, недостатки верстки с фиксированным абсолютным позиционированием:

• сложность последующих модификаций дизайна;
• жесткая привязка к координатной сетке.

Необходимые свойства

position

1. Для всех основных слоев устанавливается абсолютное позиционирование:

position: absolute

width (height)

2. Для всех слоев необходимо задать ширину (иногда и высоту)

top и left (right)

3. Необходимо задать координаты слоев по горизонтали и вертикали. Достаточно двух координат, например, расстояние от левого края браузера до левого края слоя — left (иногда легче задать расстояние от правого края — right) и расстояние от верхнего края браузера до слоя — top

Пример: Создать дизайн страницы, изображенной на рис. 1. Выполнить блочную верстку с абсолютным позиционированием слоев

Рис. 1. Пример абсолютного позиционирования слоев в блочной верстке

Выполнение:

1. «Разбиваем» все основные элементы страницы на блоки следующим образом:

• Отдельные слои для заголовков с id: header1, header2, header3
• Отдельные слои для основных колонок с контентом: col1, col2, col3
• Схематично получаем следующее размещение блоков:

<body>
    <div>Евгений Евтушенко</div>
    <div>Валерий Брюсов</div>
    <div>Эдуард Асадов</div>
    <div>
		Мне снится старый друг,<br/>
		который стал врагом,<br/>
		но снится не врагом,<br/>
		а тем же самым другом.<br/>
		Со мною нет его,<br/>
		но он теперь кругом,<br/>
		и голова идет<br/>
		от сновидений кругом.
    </div>
    <div>
	Великое вблизи неуловимо,<br/>
	Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>
	И видим лишь случайное звено.
	</div>
    <div>
	В любых делах при максимуме сложностей<br/>
	Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>
	А нежеланье - множество причин.
    </div>
</body>

<body>
<div>Евгений Евтушенко</div>
<div>Валерий Брюсов</div>
<div>Эдуард Асадов</div>
<div>
Мне снится старый друг,<br/>
который стал врагом,<br/>
но снится не врагом,<br/>
а тем же самым другом.<br/>
Со мною нет его,<br/>
но он теперь кругом,<br/>
и голова идет<br/>
от сновидений кругом.
</div>
<div>
Великое вблизи неуловимо,<br/>
Лишь издали торжественно оно,<br/>
Мы все проходим пред великим мимо<br/>
И видим лишь случайное звено.
</div>
<div>
В любых делах при максимуме сложностей<br/>
Подход к проблеме все-таки один:<br/>
Желанье — это множество возможностей,<br/>
А нежеланье — множество причин.
</div>
</body>

2. Задаем общие свойства для колонок и заголовков, касающиеся оформления шрифта, ширины, границ и внутренних отступов:

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

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

3. Добавляем для тех же селекторов свойства абсолютного позиционирования:

...
    position: absolute; /* Абсолютное позиционируем */
    top: 30px; /* Расстояние от верхнего края */
...

…
position: absolute; /* Абсолютное позиционируем */
top: 30px; /* Расстояние от верхнего края */
…

4. Отдельно создаем свойства для колонок. Для позиционирования устанавливаем расстояние от верха (top):

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

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

5. Для каждого слоя необходимо отдельно задать координату расстояния от левого края (left):

   #header1 { left: 20px; }
   #header2 { left: 280px; } /* 20 + 250 + 5 + 5 */
   #header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */
   #col1 { left: 20px; }
   #col2 { left: 280px; }
   #col3 { left: 540px; }

#header1 { left: 20px; }
#header2 { left: 280px; } /* 20 + 250 + 5 + 5 */
#header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */
#col1 { left: 20px; }
#col2 { left: 280px; }
#col3 { left: 540px; }

6. Для каждого слоя отдельно задаем фон:

   #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; }

Резюме по абсолютному позиционированию

Самыми главными свойствами, необходимыми для абсолютного позиционирования слоев являются:

1. Ширина всех слоев — свойство width:

• для всех слоев width: 250px;

2. Установка абсолютного позиционирования для всех слоев:

• для всех слоев position: absolute;

3. Установка двух координат (одной — по вертикали, другой — по горизонтали) для каждого слоя:

• Координаты по вертикали (от верхнего края) для всех слоев заголовков header: top: 30px;
• Координаты по вертикали (от верхнего края) для всех слоев колонок col: top: 60px;
• Координаты по горизонтали (от левого края) для всех слоев заголовков:
• #header1{ left: 20px; }
• #header2{ left: 280px; } (20 + 250 + 5 + 5)
• #header3{ left: 540px; } (20 + 250 + 250 + 5 + 5 + 5 + 5)

Весь код стиля будет выглядеть следующим образом:

/* для колонок и их заголовков */
#header1, #header2, #header3, #col1, #col2, #col3 { 
    font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
    width: 250px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
	/* позиционируем */
    position: absolute; /* Абсолютное позиционируем */
    top: 30px; /* Расстояние от верхнего края */
}
   /* для колонок */
#col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
    top: 60px; /* Расстояние от верхнего края */
} 
 
   /* Расстояние от левого края отдельно каждого слоя */
   #header1 { left: 20px; }
   #header2 { left: 280px; } /* 20 + 250 + 5 + 5 */
   #header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */
   #col1 { left: 20px; }
   #col2 { left: 280px; }
   #col3 { left: 540px; }
 
   /* Цвет фона каждого слоя */
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

/* для колонок и их заголовков */
#header1, #header2, #header3, #col1, #col2, #col3 {
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание текста заголовка */
font-size: 80%; /* Размер шрифта */
color: white; /* Цвет текста заголовка */
width: 250px; /* Ширина колонок */
border: 1px solid black; /* Рамка вокруг слоя */
padding: 5px; /* Поля вокруг текста */
/* позиционируем */
position: absolute; /* Абсолютное позиционируем */
top: 30px; /* Расстояние от верхнего края */
}
/* для колонок */
#col1, #col2, #col3 {
font-family: «Times New Roman», Times, serif; /* Шрифт с засечками */
font-size: 100%; /* Размер шрифта */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
top: 60px; /* Расстояние от верхнего края */
}

/* Расстояние от левого края отдельно каждого слоя */
#header1 { left: 20px; }
#header2 { left: 280px; } /* 20 + 250 + 5 + 5 */
#header3 { left: 540px; } /* 20 + 250 + 250 + 5 + 5 + 5 + 5 */
#col1 { left: 20px; }
#col2 { left: 280px; }
#col3 { left: 540px; }

/* Цвет фона каждого слоя */
#header1 { background: #B38541; }
#header2 { background: #008159; }
#header3 { background: #006077; }
#col1 { background: #EBE0C5; }
#col2 { background: #BBE1C4; }
#col3 { background: #ADD0D9; }

В результате получаем веб-страницу, как на рис. 1 задания.

Относительное позиционирование CSS в фиксированном дизайне

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

Необходимые свойства

Для двух колонок

При наличии двух колонок, для того чтобы располагать их в любом местоположении горизонтальной плоскости (по центру, слева, справа), необходимо помещение их в общий контейнер:

<div>
    <div>
	колонка 1
    </div>
    <div>
	колонка 2	
    </div>
</div>

<div>
<div>
колонка 1
</div>
<div>
колонка 2
</div>
</div>

Тогда необходимы следующие свойства:

width

Ширина задается как контейнеру, так и обеим колонкам. Для контейнера она рассчитывается как сумма ширины двух колонок (при отсутствии иных отступов).

.container{
	width:700px;
}

.container{
width:700px;
}

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

#col1, #col2{
        border: 1px solid black; /* Рамка вокруг слоя */
	padding: 5px; /* Поля вокруг текста */
	width: 338px; /* Ширина колонок */
}

#col1, #col2{
border: 1px solid black; /* Рамка вокруг слоя */
padding: 5px; /* Поля вокруг текста */
width: 338px; /* Ширина колонок */
}

В данном примере ширина колонок рассчитана, как ширина контейнера 700px - внутренние отступы padding 5+5+5+5px - ширина рамки 1+1+1+1 px = 676px на обе колонки. Для одной колонки получаем ширину 338px. (На рамку на самом деле при заданном 1px отводится 0.8px, поэтому чтобы расположить колонки стык в стык, лучше задать ширину 338.5px)

float

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

#col1 {float:left}
#col2 {float:left}

#col1 {float:left}
#col2 {float:left}

Результат:

Рис. 2. Две колонки рядом при относительном позиционировании

Рис. 3. Две колонки с зазором при относительном позиционировании

margin-left и margin-right

Для того, чтобы расположить колонки по центру, необходимо отцентрировать сам контейнер:

.container{
        margin-left:auto; 
	margin-right:auto;
	width:700px;
}

.container{
margin-left:auto;
margin-right:auto;
width:700px;
}

Весь код стилей:

.container{
	margin-left:auto; 
	margin-right:auto; 
	width:700px;
}
/* Общее для колонок */
#col1, #col2{ 
    width: 335px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
} 
/* Отдельно для колонок */
   #col1 {float:left }
   #col2 {float:right }
/* Цвет фона каждого слоя */
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }

.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
/* Общее для колонок */
#col1, #col2{
width: 335px; /* Ширина колонок */
border: 1px solid black; /* Рамка вокруг слоя */
padding: 5px; /* Поля вокруг текста */
}
/* Отдельно для колонок */
#col1 {float:left }
#col2 {float:right }
/* Цвет фона каждого слоя */
#col1 { background: #EBE0C5; }
#col2 { background: #BBE1C4; }

Для трех колонок

Расположить три колонки рядом не получится, произойдет смещение. Поэтому необходимо два слоя также оставить в контейнере:

Рис. 4. Три колонки при относительном позиционировании

<div>
    <div>
		Колонка 1
	</div>
    <div>
		Колонка 2
    </div>
</div>
    <div>
		Колонка 3
    </div>

<div>
<div>
Колонка 1
</div>
<div>
Колонка 2
</div>
</div>
<div>
Колонка 3
</div>

position

Для контейнера можно установить абсолютное позиционирование, а для третьей колонки — относительное позиционирование CSS. Для двух других колонок — в зависимости от макета и взаиморасположения слоев.

   .container{
	position:absolute; 
}
   #col1 {position: absolute}
   #col2 {position: relative}
   #col3 {position: relative}

.container{
position:absolute;
}
#col1 {position: absolute}
#col2 {position: relative}
#col3 {position: relative}

width

Необходимо задать ширину для всех трех колонок. Для контейнера ширина не нужна.

#col1, #col2, #col3 { 
    width: 200px;
}

#col1, #col2, #col3 {
width: 200px;
}

left

Для второй третьей колонок необходимо задать расстояние от левого края браузера или контейнера:

   #col2 {
		position: relative;
		left:205px;
   }
   #col3 {
		position: relative;
		left: 410px;
   }

#col2 {
position: relative;
left:205px;
}
#col3 {
position: relative;
left: 410px;
}

Весь код стилей:

  .container{
	position:absolute; 
}
/* Общее для колонок */
#col1, #col2, #col3 { 
    width: 200px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
} 
/* Отдельно для колонок */
   #col1 {position: absolute}
   #col2 {
		position: relative;
		left:205px;
   }
   #col3 {
		position: relative;
		left: 410px;
   }
/* Цвет фона каждого слоя */
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

.container{
position:absolute;
}
/* Общее для колонок */
#col1, #col2, #col3 {
width: 200px; /* Ширина колонок */
border: 1px solid black; /* Рамка вокруг слоя */
padding: 5px; /* Поля вокруг текста */
}
/* Отдельно для колонок */
#col1 {position: absolute}
#col2 {
position: relative;
left:205px;
}
#col3 {
position: relative;
left: 410px;
}
/* Цвет фона каждого слоя */
#col1 { background: #EBE0C5; }
#col2 { background: #BBE1C4; }
#col3 { background: #ADD0D9; }

Результат:

Рис. 5. Три колонки при относительном позиционировании

Блочная верстка или основы анатомии скелета сайтов

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.

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

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

Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

• Отделение стиля элементов от кода html;
• Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
• Лучшая индексация поисковиками;
• Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
• Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

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

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

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

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Перед началом верстки готовый psd макет сайта в графическом редакторе разрезают на блоки (слои). В отдельную папку помещают вырезанные фоновые картинки, которые будут прикрепляться отдельно к каждому слою:

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:

Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

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

Полный код примера index.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div>
	<div>
	<h3>Шапка</h3>
	</div>
		 
	<div>
	<h3>Блок навигации</h3>
	</div>
		 
	<div>
	<h3>Меню</h3>
	</div>
		 
	<div>
	<h3>Контент</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>Подвал сайта</h3>
	</div>
</div>
		 
</body>
</html>

Содержимое файла style.css:

body {
            background: #f3f2f3;
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            background:#99CC99;
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            background: #66CCCC;
            height: 100px;
            width: 900px;
}
 
#navigation {
            background: #FF9999;
            width: 900px;
            height: 20px;
}
 
#menu {
            background: #99CC99;
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            background: #d2d0d2;
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            background: #0066FF;
            height: 80px;
            width: 900px;
}

Вот так наш пример блочной верстки сайта выглядит в окне браузера:

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

Для редактирования кода страниц сайта используются специальные редакторы html. Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме «дизайн». Но такой код не является валидным, и чаще всего нуждается в «ручной» доводке:

С помощью рассмотренных здесь основ блочной верстки можно легко сверстать свой сайт самостоятельно. Тогда будущий ресурс будет более родным и знакомым. Ведь в его скелете все косточки вы «перемоете» собственными руками.

Блочная верстка сайта – как она делается

От автора: блочная верстка сайта сегодня по-прежнему остается самым популярным способом верстки шаблона. Почему она так популярна и как она делается?

Блочная революция

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

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

div и span — это пустые контейнеры, в которые можно поместить что угодно. Первый является блоком, а второй – строкой. Каждому элементу можно было задавать ширину, высоту, границу, внешние и внутренние отступы и много чего другого. И кому теперь нужны были таблицы, когда сетку сайта можно было построить, написав в 3-5 раз меньше кода?

Потом пришел HTML5

Но на этом мы не будем останавливаться. Верстка сайта блоками надолго стала стандартом веб-разработчиков, но ее нужно было улучшать. Все потому, что эти самые div-ы были пустыми. Нет, ему можно было задать класс, идентификатор, заполнить информацией, вставить дочерние элементы и их тоже наполнить, но по смыслу в языке html div – это просто пустой контейнер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Так вот и получилось, что с точки зрения смысла, сайт верстается как набор контейнеров. Веб-разработчики решили добавить больше смысла. Так появился HTML5. Язык, в котором была масса новых тегов. Например, header, article, footer и т.д. Тут уже даже человек с ограниченными знаниями английского понимает, что header – это шапка сайта или статьи, а article – сама статья.

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

Рис. 1. Разметка на HTML5 сильно отличается из-за обилия новых тегов.

Вернемся к началу

Все-таки я постарался описать процесс эволюции, но совсем мало сказал о том, как же сделать блочную верстку. Собственно, на примере все будет понятно. Возьмем простейший макет сайта, где есть шапка, основная часть, одна боковая колонка и футер (низ). Как все это сделать на блоках?

Создаются четыре контейнера (оставим пока в покое теги HTML5, потому что там много нюансов). Разметка выглядит примерно так:

<div id = «header»></div>
<div id = «content»></div>
<div id = «sidebar»></div>
<div id = «footer»></div>

То есть создали контейнеры и дали им понятные идентификаторы, чтобы потом стилизовать в таблице стилей. Все, что будет между открывающим и закрывающим тегом, будет содержимым контейнера. Например, у вас по макету в шапке есть элемента, которые независимы друг от друга (допустим, логотип, название сайта и небольшое меню).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<div id = «header»>
<div id = «logo»></div>
<div id = «sitename»></div>
<div id = «topmenu»></div>
</div>

Примерно так будет выглядеть структура вашей шапки. Дальше основная работа будет в CSS. Вам нужно будет правильно расставить все три блока, прописать путь до картинки с логотипом, поставить отступы и т.д. Естественно, в первую очередь нужно прописывать свойства для родительского блока с id =»header».

Таким образом верстаются и все остальные структурные части сайта. Естественно, в контенте будет больше каких-то элементов. Если все это прописывать на HTML5, то меняются только названия тегов. Например, не <div id = «header»>, а <header id = «header»>. Идентификатор, как правило, оставляют, потому что на странице могут быть и другие шапки (например, шапка статьи). Подробнее со всеми html5-элементами можно ознакомиться в любом нормальном справочнике.

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

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

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

Рис. 2. Таблица – единственное, что не очень удобно верстать блоками.

Преимущества блоков

В целом, верстка сайта div-блоками является достаточно простым делом. Код не загромождается, особых проблем с поведением и стилизацией нет, тег div поддерживается даже очень старыми браузерами. Если верстать с использованием HTML5 тегов, то да, проблемы могут возникнуть в старых браузерах. Но они, опять же, легко исправляются различными файлами, написанными другими разработчиками.

Блочную сетку очень легко адаптировать. Можно ли утверждать, что блочная верстка сайта проживет еще достаточно долго? Думаю, можно. Это удобный и достаточно простой способ верстки, так чего же от него отказываться?

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

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

Заключение

Смотря на новые CSS3-свойства, я могу смело заявить, что сегодня с блоками можно творить все, что душе угодно. Хотите все это изучить? Пользуйтесь информацией на нашем блоге (как в бесплатных, так и в платном разделе). И конечно не пропускайте новые статьи, чтобы постоянно улучшать свою квалификацию.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Блочная и встроенная верстка в обычном потоке — веб-технологии для разработчиков

В этом руководстве мы исследуем основы того, как ведут себя блочные и встроенные элементы, когда они являются частью обычного потока.

Нормальный поток определен в спецификации CSS 2.1, которая объясняет, что любые блоки в нормальном потоке будут частью контекста форматирования . Они могут быть как блочными, так и встроенными, но не одновременно. Мы описываем блоки уровня блока как участвующие в контексте форматирования блока , а блоки встроенного уровня как участвующие во встроенном контексте форматирования .

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

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

В контексте форматирования блока левый внешний край каждого блока касается левого края содержащего блока (при форматировании справа налево правые края касаются) ». — 9.4.1

Для элементов со встроенным контекстом форматирования:

«В контексте встроенного форматирования блоки располагаются по горизонтали один за другим, начиная с верхней части содержащего блока. Между этими полями соблюдаются горизонтальные поля, границы и отступы. Блоки могут быть выровнены по вертикали по-разному: их нижняя или верхняя часть может быть выровнена, или базовые линии текста внутри них могут быть выровнены.Прямоугольная область, содержащая прямоугольники, образующие линию, называется линейным прямоугольником ». — 9.4.2

Обратите внимание, что спецификация CSS 2.1 описывает документы как находящиеся в горизонтальном режиме записи сверху вниз. Например, описывая вертикальное расстояние между блоками. Поведение блочных и встроенных элементов одинаково при работе в режиме вертикального письма, и мы рассмотрим это в будущем руководстве по режимам Flow Layout и Writing.

Элементы, участвующие в контексте форматирования блока

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

В режиме вертикального письма тогда бы раскладывал по горизонтали.

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

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

Если мы установим поля для элемента абзаца на 0 , то границы будут соприкасаться.

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

Падение маржи

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

В приведенном ниже примере верхнее поле абзацев составляет 20 пикселей , а нижнее поле — 40 пикселей . Размер поля между абзацами составляет 40 пикселей , так как меньшее верхнее поле второго абзаца сжимается с большим нижним полем первого.

Вы можете узнать больше о сжатии маржи в нашей статье Освоение свертывания маржи.

Примечание. Если вы не уверены, сжимаются ли поля, проверьте значения Box Model в DevTools вашего браузера.Это даст вам фактический размер поля, который поможет вам определить, что происходит.

Элементы, участвующие во встроенном контексте форматирования

Встроенные элементы отображаются один за другим в том направлении, в котором предложения работают в этом конкретном режиме письма. Хотя мы не склонны думать о встроенных элементах как о блоке, как это бывает со всем в CSS. Эти встроенные блоки расположены один за другим. Если в содержащем блоке недостаточно места для всех блоков, блок может разбиться на новую строку.Созданные строки называются строчными блоками.

В следующем примере у нас есть три встроенных блока, созданных абзацем с элементом внутри него.

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

Размер линейного бокса в направлении блока (т.е. высота при работе на английском языке) определяется самым высоким прямоугольником внутри него.В следующем примере я сделал элемент 300%; это содержимое теперь определяет высоту линейного поля на этой строке.

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

Свойство отображения и макет потока

В дополнение к правилам, существующим в CSS2.1, новые уровни CSS дополнительно описывают поведение блочных и встроенных блоков. Свойство display определяет, как будет вести себя блок и все блоки внутри него.На уровне модели отображения CSS 3 мы можем узнать больше о том, как свойство display изменяет поведение блоков и блоков, которые они создают.

Тип отображения элемента определяет тип внешнего отображения; это определяет, как блок отображается рядом с другими элементами в том же контексте форматирования. Он также определяет тип внутреннего отображения, который определяет поведение боксов внутри этого элемента. Это очень ясно видно при рассмотрении гибкого макета. В приведенном ниже примере у меня есть