Блоки как элементы макета сайта

Блоки как элементы макета

сайтаТег <DIV>

Блочная модель

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

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

контейнер

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

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

стилевое свойство float• Предназначено для создания «плавающих»

элементов и изначально было задумано для обтекания блочного элемента текстом

• Если использовать float для идущих друг за другом блоков – их можно расположить рядом (по горизонтали)

• При этом нужно обязательно задать ширину каждого блока

Блок 1

Блок 2

Применение блоков

• Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц.

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

СОЗДАНИЕ ПРОСТОГО МАКЕТА САЙТА НА DIV - БЛОКАХ

Понятия плавающих блоков, обтекания…

Идентификаторы («ID селектор»)

• Являются одним из типов селекторов• Синтаксис:

• «ID селектор» используют на одной странице только один раз

• Его применение подразумевает обращение к нему через скрипты, но фактически, часто используется для стилевого оформления основных блоков макета страницы

В HTML

Практика• Создайте 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></div>

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

«Сброс» отступов в CSS• Каждый браузер устанавливает свои значения

стилей по умолчанию для различных HTML-элементов

• «Сброс» (обнуление) предназначено нивелировать эту разницу для разных браузеров

Способы «сброса»• Универсальный селектор –

* {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">

Простой «сброс»

body, html, div {margin:0px; /*Это хорошая практика обнулять поля и отсупы, т.к.

различные браузеры их по разному воспринимают. */

padding:0px;}

Групповой селекторСлужит для группового задания одних и тех

же стилевых свойств группе селекторов

Оболочка и шапка#wrapper {width:960px; /*задаем ширину макета*/

margin:0 auto; /*выравниваем макет по центру в современных браузерах *//*Здесь пишем стили для шапки сайта */

#header {background-color:#63b9da;}#header h1 {

margin: 0; /* Обнуляем отступы для заголовка первого уровня, находящегося в шапке. Это нужно обязательно делать, при использовании заголовков. Если используются параграфы, то тоже нужно обнулить отступы для них. */

padding: 10px 0; /* Задаем поля */

}

Сайдбар и контент/*Здесь пишем стили для левой колонки сайта */#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; /*задаем поля, т.е. чтобы был промежуток между строками, чтобы было понятно, что это параграф :)*/}

«Подвал»

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

Когда обтекание нужно отменить

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

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

невидимым символом

&nbsp; - неразрывный пробел

Отмена обтекания

• Стили для блока

#clear {height:0;font-size:1px;line-height:0px;clear:both;}

clear отменяет обтекание с указанной стороны (значение «both» - со всех сторон)

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

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

Div для правой колонки

• Вставить перед div id=“content”

Стили для правой колонки

Установите для блока «content» значение margin-right: 102px;

Значение на 2px больше ширины правой колонки

Продолжение следует…