КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

Вопросы, касающиеся макетов

---

5. Создание текучих макетов при помощи таблиц CSS

Как следует из главы 4, текучие, или автоматически изменяющиеся, макеты - это макеты, которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя. Однако если в предыдущей главе рассматривались текучие макеты, созданные при помощи таблиц, то в этой главе демонстрируется, как создавать текучие макеты с использованием каскадных таблиц стилей (Cascading Style Sheets-CSS).

Совет Как и в случае с CSS-макетами с фиксированной шириной, вам нужно установить атрибуты leftmargin, topmargin, marginheight и marginwidth тега body в значение 0, чтобы математические расчеты корректно согласовывались между разными браузерами.

Начните работу с создания эскиза макета, наподобие представленного на рисунке 5.1. Для CSS-макетов не требуется использование вложенных таблиц, поэтому не беспокойтесь об этом. Просто разделите дизайн на прямоугольные области. Каждая из этих областей станет элементом раздела в HTML-коде.

На следующем шаге необходимо решить, какие разделы будут текучими. Предположим, что мы хотим, чтобы раздел Content (Содержимое) увеличивался и уменьшался, но при этом левая и правая боковые панели имели фиксированную ширину, скажем, 200 пикселов для раздела Nav (Навигация) и 150 пикселов для раздела Links (Ссылки). Очевидно, что раздел Content (Содержимое) должен быть текучим, но как насчет раздела Logo (Логотип)? Если бы этот макет строился с использованием таблиц, нам не нужно было бы обязательно устанавливать значение атрибута width верхней ячейки, равным 100%, поскольку сама таблица имела бы ширину, равную 100%, и браузер изменил бы размеры ячейки Logo (Логотип) для полного соответствия ширине таблицы.

В таблицах CSS такого сокращения нет. Если вы желаете, чтобы раздел Logo (Логотип) растянулся вдоль всей ширины окна браузера, это необходимо явно указать в CSS-коде. Поэтому добавьте раздел Logo (Логотип) к все еще небольшому списку текучих элементов и разметьте эскиз, как показано на рисунке 5.2.

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

• Если раздел растягивается вдоль всей ширины окна браузера, эффект текучести создается посредством присвоения атрибуту раздела width значения 100%.
• Если справа или слева от раздела расположены другие элементы - раздел не растягивается на все окно браузера - не присваивайте значение атрибуту раздела width.

Раздел Logo (Логотип) растягивается вдоль всей ширины браузера, от левой стороны до правой стороны, поэтому этот элемент попадает в первую категорию. Его код выглядит следующим образом:

<div id="logo" style="position:absolute; width:100%; height:100px; top:0px; left:0px;">
  Logo
</div>

Разделы для навигационной панели и ссылок являются обычными элементами с фиксированной шириной:

<div id="nav" style="position:absolute; width:200px; top:100px; left:0px;">
  Nav
</div>

<div id="links" style="position:absolute; width:150px; top:100px; right:0px;">
  Links
</div>

В значение атрибута style раздела Links (Ссылки), помимо всего прочего, включена пара right: 0px. Этот особый кусочек кода размещает элемент рядом с правой стороной экрана. Атрибут style необходимо определять именно таким способом, поскольку мы не знаем, какую ширину будет иметь область Content (Содержимое), являющаяся самой главной, в первую очередь, в текучих макетах.

Теперь код для раздела Content (Содержимое):

<div id="content" style="position:absolute; top:100px; left:200px; right:150px">
  Content
</div>

Поскольку данный раздел находится между левой и правой боковыми панелями, он попадает во вторую категорию. Мы не задаем значение атрибута width, однако располагаем его на расстоянии 200 пикселов от левой стороны окна браузера и на расстоянии 150 пикселов от правой стороны. Почему? Чтобы гарантировать, что он не перекроет области навигационной панели и ссылок.

Совет  Если вы назначаете разделам фоновые цвета, необходимо сделать так, чтобы основная область с содержимым имела такой же цвет фона, как и страница. Это предотвратит отображение браузером, так сказать, швов дизайна. Раздел Content (Содержимое) может не прилегать точно к правому столбцу в зависимости от того, что находится в основной области содержимого, и мы не хотим, чтобы цвет фона страницы проступил через пространство между разделами

Вот и он: текучий макет, созданный с использованием таблиц CSS. На рисунке 5.3 показан завершенный эскиз макета.

---