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

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

---

2. Создание макетов с фиксированной шириной при помощи таблиц CSS

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

Если прочитать любой раздел, посвященную макетам, основанным на таблицах, вы снова и снова будете читать о том, как следует всегда создавать дизайн с использованием вложенных таблиц. В этом разделе вы не найдете таких советов, поскольку при использовании таблиц CSS необходимость во вложенных таблицах отпадает. Вместо этого макет делится на ряд прямоугольных областей, называемых разделителями (divs), или разделами. Каждая область дизайна разрабатывается по отдельности с использованием тегов div языка HTML, а затем эти элементы выкладываются на Web-странице, как части мозаики. В этом смысле таблицы CSS более ориентированы на графику, чем таблицы языка HTML. Мыслить в понятиях прямоугольников является абсолютно естественным для людей со зрительными способностями, которые в любом случае стремятся видеть мир в фигурах.

Определение Тег div языка HTML обозначает раздел (division). Он размечает область или раздел Web-страницы. Каждый раздел может иметь свои собственные свойства CSS-стиля.

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

Для создания этого макета потребуется три прямоугольника:

1. Один для области Logo (Логотип) шириной 760 пикселов;
2. Один для области Nav (Навигация) шириной 200 пикселов;
3. Один для области Content (Содержимое) шириной 560 пикселов.

Три прямоугольника подразумевают три элемента раздела. Вот они:

  <div id="logo" style="position:absolute; width:760px;">
    Logo
  </div>
  
  <div id="nav" style="position:absolute; width:200px;">
    Nav
  </div>
  
  <div id="content" style="position:absolute; width:560px; ">
    Content
  </div>

Значения атрибута style данных тегов задают ширину в CSS-формате, а не в виде width="760", который можно было бы использовать при построении таблицы. Важно помнить о необходимости использования CSS-формата, вместо HTML-формата, для всего, что находится внутри атрибута style. Это означает следующее:

• Используйте символ двоеточия (:), а не знак равно (=), для задания пар атрибут/значение;
• Разделяйте составные имена атрибутов дефисом, например, background-color, а не backgroundcolor или background_color;
• Всегда указывайте единицу измерения после числового значения и не вставляйте пробел между числом и единицей измерения, например, 56Орх, а не 560 или 560 рх;
• Разделяйте пары атрибут/значение символом точки с запятой (;).

Совет Перед вычислением смещений сверху и слева для ваших разделов, окажите себе любезность и установите значения атрибутов leftmargin, topmargin, marginwidth и marginheight в 0. Эти атрибуты принадлежат тегу body. Внесение данных изменений улучшает согласованность вашего дизайна в различных браузерах, которые по умолчанию устайавливают различные значения для пространств полей страницы.

Если помните, теги div представляют разделы или области страницы. Следующим шагом является их размещение на странице. Для этого расположение элементов выражается через смещение от левой и верхней сторон окна браузера. Разместить первый элемент раздела не составит труда: он начинается в левом верхнем углу, поэтому у него нет смещения сверху или слева:

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

Второй элемент раздела начинается слева, поэтому у него нет смещения слева, но как насчет смещения сверху? Здесь необходимо что-то указать. Иначе второй раздел частично перекроет первый раздел, что не предусмотрено вашим дизайном. Предположим, что вы планируете вставить графический логотип в первый раздел, и вы знаете, что высота изображения составляет 100 пикселов. Если второй раздел начинается прямо под логотипом, смещение будет составлять 100 пикселов, как показано на рисунке 2.2. Следовательно, код выглядит так:

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

Для обеспечения согласованности и очень четкого разъяснения всего для браузеров, критично относящихся к таблицам CSS, следует вернуться обратно к разделу Logo (Логотип) и жестко закодировать значение атрибута height:

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

Для третьего элемента раздела необходимо смещение сверху, равное 100 пикселам, чтобы не закрывать область Logo (Логотип), и смещение слева, равное 200 пикселам, чтобы не закрывать область Nav (Навигация):

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

---