CSS3. Работа с контейнерами

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

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

Понятие контейнерного дизайна

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

• текстовый;
• фреймовый;
• табличный;
• контейнерный.

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

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

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

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

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

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

Как и текстовый дизайн, фреймовый в настоящее время практически не применяется.

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

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

Контейнерный подход при верстке и дизайне сайтов заключается в использование элементов - контейнеров для размещения контента. Контейнеры (парный тег <div>) являются блочными элементами, к каждому контейнеру может быть применен индивидуальный стиль.

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

Рассмотрим подробнее приемы работы с контейнерами.

Контейнеры

Отметим, что <div> не является единственным элементом - контейнером. Но поскольку, в контексте данной лекции, мы говорим именно о контейнерном дизайне, то и рассматривать будем только его базовый элемент – тег <div>. С другими элементами контейнера предлагается ознакомиться самостоятельно.

Парный тег <div> используется для группировки элементов веб - страницы, как правило с целью управления внешним видом содержимого, при помощи CSS стилей.

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

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

Управление размерами контейнеров

<div> – контейнер представляет собой прямоугольную область. Значения высоты и ширины данной области определяются такими стандартными атрибутами стилей, как:

• высота
  • min-height – задает минимальную высоту элемента;
  • height – задает высоту элемента;
  • max-height – задает максимально возможную высоту элемента;
• ширина
  • min-width – задает минимальную ширину элемента;
  • width – задает ширину элемента;
  • max-width – задает максимально возможную ширину элемента.

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

width: 200px (в пикселях)
width: 2in (в дюймах)
width: 20% (в зависимости от значения аналогичного атрибута родителя)

Также допустимо использование следующих значений атрибутов управления размерами:

• auto – размер устанавливается в зависимости от размеров контента;
• inherit – значение наследуется от родителя.