Современные стандарты веб-дизайна отошли от создания макетов с использованием тегов <TABLE>. Лучше использовать гораздо более гибкий и полезный тег <DIV>. Вот несколько основных рекомендаций, которые вы можете сразу же использовать на своем сайте.
DIV и властвуй
Лучший способ думать о DIV — это коробка. Это контейнер информации, не более того. Самое замечательное в этом то, что это коробка, которая может вместить что угодно и может изменить внешний вид содержимого внутри нее. Он используется для содержимого «блочного уровня» (например, большие фрагменты текста, группы изображений или наборы кнопок навигации), чтобы вы могли установить правила представления этого содержимого. Существует также тег SPAN, который является младшим братом DIV и используется для изменения внешнего вида встроенного содержимого. Хотя это полезно, SPAN не имеет ничего общего с множеством различных применений хорошо продуманного DIV.
Как DIV со стилем (листы)
Если вы откроете таблицу стилей, скорее всего, вы найдете на странице несколько классов, предназначенных для работы с DIV. Существует несколько различных типов, но наиболее распространены четыре из них: «Заголовок», «Содержание», «Боковая панель» и «Нижний колонтитул». Названия этих DIV дают вам хорошее представление об их назначении. Ниже приведены некоторые примеры того, как их можно использовать в существующей структуре CSS.
Возможно, вы хотите настроить раздел HEADER. Во-первых, настройте класс HEADER, который можно использовать только с DIV. Затем начните формировать свойства текста, границ и фона, которые вы надеетесь использовать:
DIV.header{FONT-WEIGHT: самый жирный;FONT-SIZE: большой;PADDING-BOTTOM: 5px;TEXT-TRANSFORM: none;BORDER-LEFT: #990033 3px сплошной;BORDER-RIGHT: #990033 3px сплошной;ЦВЕТ: #CCFFFF ;Верхняя граница: 5px;ГРАНИЦА-ВЕРХ: #990033 тире 3px;ГРАНИЦА-НИЖНЯЯ: #990033 тире 3px;СТИЛЬ ШРИФТА: обычный;СЕМЕЙСТВО ШРИФТОВ: Verdana, Arial;ЦВЕТ ФОНА: #cc3300;ВЫРАВНИВАНИЕ ТЕКСТА: справа;ВАРИАНТ ШРИФТА: маленькие заглавные;ОТДЕЛКА ТЕКСТА: нет}
Это создаст часть страницы со светло-лиловым фоном, темно-красными границами (с пунктирными линиями сверху и снизу) и светло-серыми буквами шрифтом без засечек с маленькими заглавными буквами. Обычно этот код помещается в основной документ таблицы стилей («yourDoc.css»), который связывается с веб-страницей с помощью следующего кода в разделе HTML HEAD:
<link rel="stylesheet" type="text/css" href="yourDoc.css" />
Очевидно, это пример имени, и вам нужно убедиться, что путь к вашему файлу CSS указан правильно. Реальная сила CSS, однако, заключается в том, что если вы решите после создания сотен страниц с этим заголовком, что вам лучше иметь красные буквы на сером фоне в пользовательском шрифте , вам просто нужно изменить код в этом. CSS-лист, и он пропитает весь ваш сайт.
После того, как вы поиграете с различными типами свойств для различных элементов в DIV, вы сможете полностью формировать и изменять весь свой сайт просто из самого листа CSS. Лучше всего то, что внутри DIV могут быть DIV, вложенные настолько, насколько вам нравится, и каждый «контейнер» может иметь свои собственные свойства, а также свойства большего DIV. Например, в DIV.body вы можете решить, что весь текст должен быть выровнен по левому краю. Однако вы также можете создать меньшие DIV.redText и DIV.whiteText, которые просто изменят цвета последующих абзацев, сохраняя при этом их аккуратное выравнивание по левому краю.
Странное и удивительное свойство FLOAT
Еще одно очень важное качество вложенных элементов DIV в таблицу стилей — это идея «плавающего». Это позволяет вам точно определить, где на странице появляется DIV. Свойство FLOAT помогает определить, где будет находиться содержимое SPAN или DIV по отношению к большему контейнеру. Если вы хотите иметь два столбца внутри основного тела, один для «боковой панели» и один для «контента», вы должны настроить два класса: #sidebar и #content. Вы можете стилизовать текст, фон и границы так же, как в примере с HEADER выше, но вы также должны добавить еще одно свойство: FLOAT: LEFT. При добавлении этого свойства сначала боковая панель перемещается в левую часть большего контейнера, а затем — область содержимого рядом с ней, создавая более гибкую структуру, чем таблицы, со всеми преимуществами чистого макета.
Если вы хотите иметь еще один DIV под плавающими разделами (например, DIV нижнего колонтитула), необходимо вставить свойство FLOAT:CLEAR в DIV под ним, чтобы «коробка» не наследовала свойство FLOAT: left. Противоположностью «плавающего» DIV является элемент со свойством POSITION, установленным на «absolute». В этом случае вы можете точно определить положение поля на основе координат пикселей или процентных значений окна браузера .
Освоение DIV
Это очень простой обзор того, как можно использовать DIV на вашем сайте. Для полной мощности DIV требуется гораздо больше страниц и концепций. Вы можете узнать для себя на таких сайтах, как DevArticles , DesignPlace и Juixe . Каждый день в CSS Zen Garden появляются новые примеры удивительных возможностей , или вы можете попробовать свой собственный код в песочнице CSS Desk . Потратьте время, чтобы сделать DIV полезной и гибкой основой для вашего собственного веб-дизайна, и вы не пожалеете об этом.