DIV блоки для макетирования сайта

1. Блоки как
элементы макета
сайта
Тег <DIV>

2. Блочная модель
marginPadding – «отбивка» (внутренний отступ) – принимает цвет фона
Margin – «поля» (внешний отступ) – отодвигает внешние эл-ты
Border – граница, можно указать тип, цвет, толщину …
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Aenean mollis nisl non
nisi elementum lobortis. Praesent rhoncus consectetur
facilisis. Mauris nisi felis, rutrum quis auctor nec, blandit
vulputate ante. Nam et vehicula diam. Nunc et dui
bibendum nisi egestas ultricies ut eu ligula. In auctor lectus
quis mauris congue sodales. Suspendisse ligula massa,
luctus non cursus nec, eleifend eu est.
width
height
border
padding

3. Тег <DIV>
• Создает универсальный блочный
контейнер

4. CSS для блока «vrezka»

5. Врезка в <div> - блоке

6. стилевое свойство float
• Предназначено для создания «плавающих»
элементов и изначально было задумано
для обтекания блочного элемента текстом
• Если использовать float для идущих друг за
другом блоков – их можно расположить
рядом (по горизонтали)
• При этом нужно обязательно задать
ширину каждого блока
Блок 1
Блок 2

7. Применение блоков
• Блочные элементы выступают в качестве
основного строительного материала при
верстке веб-страниц.
• Такие элементы характерны тем, что всегда
начинаются с новой строки и занимают всю
доступную ширину области, в которой
располагаются (если явно не задана их
ширина)

8. СОЗДАНИЕ ПРОСТОГО МАКЕТА
САЙТА НА DIV - БЛОКАХ
Понятия плавающих блоков, обтекания…

9. Идентификаторы («ID селектор»)
• Являются одним из типов селекторов
• Синтаксис:
• «ID селектор» используют на одной странице
только один раз
• Его применение подразумевает обращение к
нему через скрипты, но фактически, часто
используется для стилевого оформления
основных блоков макета страницы
В HTML

10. Практика
• Создайте HTML
макет такого
содержания
<div id="wrapper">
<div id="header">
<h1>Header</h1>
</div>
<div id="leftSidebar">
<h3>Левая колонка</h3>
<p>....</p>
</div>
<div id="content">
<h1>Главный контент </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
quam.Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
<h2>Подзаголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.
Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam
blandit quam ut lacus.</p>
</div>
<div id="footer">
<p><strong>Footer</strong></p>
</div>

11. Код в браузере до написания CSS

12. «Сброс» отступов в CSS
• Каждый браузер устанавливает свои значения
стилей по умолчанию для различных HTML-
элементов
• «Сброс» (обнуление) предназначено нивелировать
эту разницу для разных браузеров

13. Способы «сброса»
• Универсальный селектор –
* {
margin: 0;
padding: 0; }
• Способ линковки файла сброса стилей от yahoo!
Читать здесь (Eng):
http://developer.yahoo.com/yui/reset/
Ссылка на файл стилей (в теге head):
<!-- Source File -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-
min.css">

14. Простой «сброс»
body, html, div {
margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к.
различные браузеры их по разному воспринимают. */
padding:0px;}
Групповой селектор
Служит для группового задания одних и тех
же стилевых свойств группе селекторов

15. Оболочка и шапка
#wrapper {
width:960px; /*задаем ширину макета*/
margin:0 auto; /*выравниваем макет по центру в современных браузерах */
/*Здесь пишем стили для шапки сайта */
#header {
background-color:#63b9da;
}
#header h1 {
margin: 0; /* Обнуляем отступы для заголовка первого уровня, находящегося в
шапке. Это нужно обязательно делать, при использовании заголовков. Если используются
параграфы, то тоже нужно обнулить отступы для них. */
padding: 10px 0; /* Задаем поля */
}

16. Сайдбар и контент
/*Здесь пишем стили для левой колонки сайта */
#leftSidebar {
background-color:#a9d28c;
width:160px; /*ширина колонки */
float:left; /*обязательное выравнивание по левому краю, с включением обтекания*/
}
/*Здесь пишем стили для блока контента */
#content {
background-color:#d5d7b5;
margin:0px; /*обнуляем отступы сверху и снизу*/
margin-left:162px; /*обязательный отступ слева, должен быть немного больше
ширины левой колонки */
}
#content h1 {
margin:0px; /* Обнуляем отступы для заголовка первого уровня, находящегося в блоке
контента.*/
}
#content p {
margin:0px; /* Обнуляем отступы для параграфов я, находящегося в блоке контента.*/
padding:5px; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было
понятно, что это параграф :)*/
}

17. «Подвал»
/*Здесь пишем стили для подвала сайта */
#footer {
background-color:#d292bc;
}
#footer p {
margin:0px; /* обнуляем отступы*/
padding: 10px 0; /* задаем поля */
}

18. Когда обтекание нужно отменить
Нужно отключить обтекание для «Footer’а»

19. Способ с дополнительным DIV-ом
Перед блоком «footer» вставьте дополнительный DIV – блок с
невидимым символом
&nbsp; - неразрывный пробел

20. Отмена обтекания
• Стили для блока
#clear {
height:0;
font-size:1px;
line-height:0px;
clear:both;
}
clear отменяет обтекание с указанной стороны
(значение «both» - со всех сторон)

21. Итоговый макет

22. Добавляем правую колонку

23. Div для правой колонки
• Вставить перед div id=“content”

24. Стили для правой колонки
Установите для блока «content» значение
margin-right: 102px;
Значение на 2px больше ширины правой колонки
Продолжение следует…