Курс CSS. Урок 31.
Создание простого каркаса на основе float.
Создание простого каркаса на основе float.
На прошлом уроке мы подошли вплотную к тому, чтобы создать некое подобие каркаса сайта. Сегодня мы разовьем эту тему.
Пусть на нашем сайте будут 4 блочные области:
Код HTML будет следующим:
И отобразится этот код на страничке следующим образом:
Теперь будем стараться использовать академически правильный подход по разработке сайтов, который заключается в следующем: надо стараться как можно меньше подвергать изменениям сам HTML каркас и имеющие классы, а изменения вносить путем создания и внедрения новых классов.
Давайте, весь процесс разобьем на 4 простейших шага, чтобы все было максимально интуитивно понятным.
Для начала уменьшим ширину элемента Меню в сторонке (СайдБар, sidebar):
Добавим новый класс блоку Меню в сторонке (СайдБар, sidebar).
После данного шага наш каркас станет таким:
Теперь уменьшим ширину элемента Содержание (Контент, content):
Логика наша такая: 20%(СайдБар) + 79%(Содержание) = 99% (оставим 1% для элегантого зазора между СайдБар-ом и Содержанием.
Добавим новый класс блоку Содержание (Контент, content).
После данного шага наш каркас станет таким:
Теперь добавим элементу Содержание (Контент, content) margin-left:
Логика наша такая: надо подвинуть блок Содержание вправо.
Добавим новый класс блоку Содержание (Контент, content).
После данного шага наш каркас станет таким:
Завершающий нашу оперу аккорд: делаем наш СайдБар плавающим, чтобы выбить его из основного потока.
Логика наша такая: СайдБар станет плавающим и это позволит следующим за ним контентом занять его место по ширине родителя.
Добавим новый класс блоку СайдБар.
После данного шага наш каркас станет таким:
Обратите внимание, что на данном уроке мы научились не просто создавать простейшие каркасы для сайтов, но научились это делать академически правильно, соблюдая главное золотое правило CSS дизайнера: создавайте правила так, чтобы ваша логика была легко понятна другим участникам проекта. Это особенно важно, если вы работаете в крупной корпорации над большим проектом. Сотрудники, чья логика понятна, проста, логична и предсказуема, были, есть и будут на вес золота. Станьте и вы таким сотрудником. Паркуа па?
Данные классы в файле стилей CSS будем также использовать в нашем очередном учебном тестовом примере.
css_031_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_031_001.zip ← скачайте пример, чтобы установить на свой сайт...
Пусть на нашем сайте будут 4 блочные области:
- Шапка (Хидер, header)
- Меню в сторонке (СайдБар, sidebar)
- Содержание (Контент, content)
- Низ (Футер, 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; */ }
<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)
Давайте, весь процесс разобьем на 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 *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.