ТОР 5 статей: Методические подходы к анализу финансового состояния предприятия Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века Характеристика шлифовальных кругов и ее маркировка Служебные части речи. Предлог. Союз. Частицы КАТЕГОРИИ:
|
Понятие контейнерного дизайнаЕсли подойти методологически к вопросу о дизайне веб - страниц, то можно выделить следующие группы (школы) дизайна: · текстовый; · фреймовый; · табличный; · контейнерный. Четких границ между указанными школами, пожалуй, выделить нельзя. Подходы к дизайну, как и абсолютное большинство веб - технологий, стандартов и правил появлялись и развивались эволюционно. Текстовый подход к дизайну сайтов является первым и простейшим. Суть крайне проста: основным содержанием веб - страницы является структурированный текст, приемы оформления, зачастую, ограничиваются простым форматированием текста, изменением шрифтов, цветов текста и т.д. С учетом того, что к внешнему виду современной веб-страницы выдвигаются определенные требования (все мы привыкли к панели навигации слева, основному меню сайта в "шапке" и т.п.), обойтись только текстовой версткой крайне сложно. Фактически данным подходом в чистом виде никто не пользуется, даже несмотря на то, что время загрузки страниц при этом минимально и верстка проста. Иногда у разработчика возникает необходимость объединить несколько документов HTML в одном окне браузера. Для этого используется страница со специальной разметкой, описывающей, каким именно образом располагать документы в окне. Контейнер для каждого из объединяемых таким образом документов называется фреймом (от англ. frame - рамка, оправа). Кроме того, общие элементы для всех веб-страниц сайта не подгружаются, а прописываются для каждой страницы. Т.е. каждый раз при открытии очередной страницы подгружаются все ее элементы, даже в случае, если меняется фактически, по сравнению с предыдущей страницей, только содержательная ее часть. В качестве решения, ликвидирующего недостатки текстового подхода к дизайну сайтов, выступила идея использования фреймов – элементов веб - страниц, содержимое которых подгружается извне. Иначе говоря, фрейм отображает содержимое другой веб - страницы, адрес которой прописывался в параметрах фрейма. Таким образом, веб - страница состояла из набора фреймов, при этом подгружается только требуемое содержимое. Структуру фреймов, правда, при этом поменять нельзя. Как и текстовый дизайн, фреймовый в настоящее время практически не применяется. Идея табличной верстки сайтов лежит на поверхности. На веб - странице размещается html - таблица, в ячейки которой и помещается контент. Соответственно, визуально веб - страницу можно разделить на необходимое количество блоков ("шапка" сайта, панель навигации и т.д.). Табличный дизайн является весьма популярным и распространенным, особенно в среде начинающих разработчиков. Основным достоинством подхода является его понятность и возможность избежать проблем совместимости. С учетом того, что к каждой ячейке таблицы можно применить собственный CSS стиль, можно говорить о том, что подход до конца себя еще не изжил. Контейнерный подход при верстке и дизайне сайтов заключается в использование элементов - контейнеров для размещения контента. Контейнеры (парный тег <div>) являются блочными элементами, к каждому контейнеру может быть применен индивидуальный стиль. Также контейнер может отображать содержимое внешней, по отношению к нему веб - страницы, при этом, в отличие от фреймов, контейнеры стандартизованы консорциумом W3C. По сравнению же с табличным подходом, создаваемые страницы "легче" с точки зрения количества кода. Рассмотрим подробнее приемы работы с контейнерами и фреймами. Контейнеры Отметим, что <div> не является единственным элементом - контейнером. Но поскольку мы говорим именно о контейнерном дизайне, то и рассматривать будем только его базовый элемент – тег <div>. С другими элементами контейнера предлагается ознакомиться самостоятельно. Парный тег <div> используется для группировки элементов веб - страницы, как правило с целью управления внешним видом содержимого, при помощи CSS стилей. Не нашли, что искали? Воспользуйтесь поиском:
|