Панель Управления





Курс CSS. Урок 31. Создание простого каркаса на основе float.
Стиль сайта. Онлайновый курс по теме CSS. Сделано в kocby.ru Курс CSS. Урок 31. Создание простого каркаса на основе float. Пусть на нашем сайте будут 4 блочные области: Шапка (Хидер, header), Меню в сторонке (СайдБар, sidebar), Содержание (Контент, content), Низ (Футер, footer). Будем стараться использовать академически правильный подход по разработке сайтов, который заключается в следующем: надо стараться как можно меньше подвергать изменениям сам HTML каркас и имеющие классы, а изменения вносить путем создания и внедрения новых классов.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Курс CSS. Урок 31.
Создание простого каркаса на основе float.
На прошлом уроке мы подошли вплотную к тому, чтобы создать некое подобие каркаса сайта. Сегодня мы разовьем эту тему.

Пусть на нашем сайте будут 4 блочные области:
  1. Шапка (Хидер, header)
  2. Меню в сторонке (СайдБар, sidebar)
  3. Содержание (Контент, content)
  4. Низ (Футер, footer)
Создадим для этих блоков первоначальные стили-правила-классы следующим образом:
.wrapper_css_031 {
	width:80%; /*	width:800px; */
	font: 10px Verdana, sans-serif;
	text-align:center;
	color: #000000;
	background-color: #F9F9F9;
	outline: 1px solid #CCCCCC;
	padding: 10px;
	margin: 0 auto;
}

.header_css_031 {
	height:77px;
	background-color: #F8AC18;
	margin-bottom: 12px;
}

.sidebar_css_031 {
	height:77px;
	background-color: #EBEBEB;
	margin-bottom: 12px;
}


.content_css_031 {
	height:77px;
	background-color: #C5161D;
	margin-bottom: 12px;
}


.footer_css_031 {
	height:77px;
	background-color: #777777;
/*	margin-bottom: 12px; */
}
Код HTML будет следующим:
<div id="wrapper_css_031" class="wrapper_css_031" style="">
	<div id="header_css_031" class="header_css_031">Шапка (Хидер, header)</div>
	<div id="sidebar_css_031" class="sidebar_css_031">Меню в сторонке (СайдБар, sidebar)</div>
	<div id="content_css_031" class="content_css_031">Содержание (Контент, content)</div>
	<div id="footer_css_031" class="footer_css_031">Низ (Футер, footer)</div>
</div>
И отобразится этот код на страничке следующим образом:
Шапка (Хидер, header)
Содержание (Контент, content)
Теперь будем стараться использовать академически правильный подход по разработке сайтов, который заключается в следующем: надо стараться как можно меньше подвергать изменениям сам HTML каркас и имеющие классы, а изменения вносить путем создания и внедрения новых классов.

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

Для начала уменьшим ширину элемента Меню в сторонке (СайдБар, sidebar):
.sidebar_css_031_width_20p {
	width:20%;	/*	width:150px; */
}

Добавим новый класс блоку Меню в сторонке (СайдБар, sidebar).

После данного шага наш каркас станет таким:
Шапка (Хидер, header)
Содержание (Контент, content)


Теперь уменьшим ширину элемента Содержание (Контент, content):
.content_css_031_width_79p {
	width:79%; /*	width:640px; */
}

Логика наша такая: 20%(СайдБар) + 79%(Содержание) = 99% (оставим 1% для элегантого зазора между СайдБар-ом и Содержанием.

Добавим новый класс блоку Содержание (Контент, content).

После данного шага наш каркас станет таким:
Шапка (Хидер, header)
Содержание (Контент, content)


Теперь добавим элементу Содержание (Контент, content) margin-left:
.content_css_031_margin_left_21p {
	margin-left: 21%; /*	margin-left: 160px; */
}

Логика наша такая: надо подвинуть блок Содержание вправо.

Добавим новый класс блоку Содержание (Контент, content).

После данного шага наш каркас станет таким:
Шапка (Хидер, header)
Содержание (Контент, content)


Завершающий нашу оперу аккорд: делаем наш СайдБар плавающим, чтобы выбить его из основного потока.
.sidebar_css_031_float_left {
	float: left;
}

Логика наша такая: СайдБар станет плавающим и это позволит следующим за ним контентом занять его место по ширине родителя.

Добавим новый класс блоку СайдБар.

После данного шага наш каркас станет таким:
Шапка (Хидер, header)
Содержание (Контент, content)


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

Данные классы в файле стилей CSS будем также использовать в нашем очередном учебном тестовом примере.
css_031_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_031_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
:: :: /


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

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.


Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/css/p031.html
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
***** Реклама *****
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа
Красивая девушка блондинка слева Красивая девушка брюнетка справа
Наверх ↑