Digs - Персональная территория

Авторский проект Артема Глазкова
? 
        Версия для печати (цвет)  

Использование материалов
Заметка #2
03 мая 2005

Разметка


    Пролог
    Изначально сайт разрабатывался на таблицах. Это возможно и хороший стиль, но меня постепенно (особенно с увеличением записей блога) начала волновать проблема долгой загрузки. Как известно таблица в большинстве браузеров не отображается, пока HTML не загрузится до конечного тега таблицы. Параллельно с разработкой я смотрел различные сайты и на одном из них увидел следующий эффект. Сначала на всю ширину экрана появилась рамка, а потом она стала изнутри заполняться. Причем постепенно. Меня это заинтересовало, так как это было как раз то, что мне нужно. После изучения исходника сайта, я понял что там применяется тег div вместо table. Набрав соответствующую строчку в поисковой системе я узнал что есть такое понятие "слои". С этого момента я переделал структуру сайта.
    Слои дают более гибкие возможности по организации страниц, но имеют один недостаток. За счет разной интерпретации браузерами CSS разработка становится сложнее. Но это стоит того.

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

<body leftmargin=0 topmargin=0 marginheight=0 marginwidth=0>


Стиль для тела документа выглядит так:

body {width: auto;}


    Такое задание ширины важно, так как ширина элемента зависит от ширины конейнера, в который этот элемент помещен.

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

#banbar{
   position: absolute;
   top: 0px;
   left: 150px;
}


    Хитрость такого наложения состоит в том, что таблица с логотипом стоит сразу после тега <body>, а вот накладываемый слой находится практически в самом конце HTML. Это возможно, потому что стиль имеет атрибут position: absolute, который указывает на абсолютное положение слоя. Нахождение слоя с баннерами и счетчиками в конце HTML заставляет прогрузиться их картинки, а также исполниться их скрипты в последнюю очередь, давая возможность сначала прогрузиться более важным.

    Приветствие и поиск
    Тут ничего особенного. Обычная таблица. Для того чтобы у формы не было границ, которые бы сильно раздвинули раздел, был применен стиль:

.smallform {margin: 0px;padding: 0px;}


Сама форма:

<form class=smallform ...


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

#layer0 {
  margin-right: 5px;
  width: 100%;
}


    Сразу следует отметить, что из-за возможных глюков в браузере Opera все CSS описывающие слои были внесены в сам HTML.
    Далее нам следует зарезервировать место под левую колонку, где располагаются основные меню. Для этого нам нужно поместить в layer0 еще один слой, но с отступом, равным ширине колонки (ширина меню плюс собственные небольшие отступы).

#layer1{
  margin-left: 150px;
  width: auto;
}


    Теперь описываем колонку меню. Чтобы она как-то вписалась во всю эту схему, мы помещаем все меню в плавающий слой, выровненный по правому краю.

#leftbar {
  margin-left: 3px;
  float: left;
  width: 140px;
}


    Отступ в три точки подбирался экспериментальным путем. Вообще основная сложность слоев заключается в том, что разные браузеры могут по разному интерпретировать CSS. Особенно это касается отступов.
    Итак, мы получили слой, который из-за свойства float не переводит слой контента на другую строку.
    Правое меню опциональное: либо есть либо отсутствует. Здесь все просто, если меню есть, то добавляем еще пару слоев. Первый для контента с резервирующим отступом под меню, второй сама колонка меню:

#rightbar{
  float : right;
}
#layer3 {
  margin-right: ...;
  width=auto;
}


    Здесь я специально написал троеточие, так как в разных разделах ширина меню отличается, и CSS составляется в зависимости от текущего раздела. Вот в общем то и все. Осталось сказать о еще одной детали. Браузер IE не правильно рассчитывает размеры контейнера. В отличие от Opera и Mazilla он считает размеры контейнера вместе в отступами. Поэтому когда я пытаюсь вписать в слой таблицу с шириной 100%, у меня при наличии только левого столбца ширина страницы получается 100%+150px. Чтобы не происходило такого сдвига, я поместил в самый последний контейнер, еще один с нулевыми отступами. Вот от него все размеры вложенных элементов будут считаться правильно, независимо от браузера. Этот слой я даже не стал заносить в CSS, а записал сразу (будем считать моей прихотью)

<div style="width: 100%;">


   Вот и все. Теперь структура основной части документа выглядит так:

<div id=layer0>
  <div id=leftbar>
    Здесь левое меню
  </div>
  <div id=layer1>
    <div id=rightbar width=...>
      Здесь правое меню
    </div>;
    <div id=layer3>
      <div style="width: 100%;">
        Здесь основной контент
      </div>
    </div>
  </div>
</div>


    Копирайт
    Небольшая графа в конце документа. Это просто слой. Единственное на что стоит обратить внимание это на ширину. Слой копирайта всегда по ширине и горизонтальному положению равен слою основного контекста. Это связано с тем, что браузер не учитывает при расчете высоты слоя основного раздела слои, которые имеют стиль float. Поэтому, если бы строка копирайта занимала ширину браузера и высота контента была бы меньше левой либо правой колонки, то копирайт залез бы под меню.


© 2005-16, Powered By Digs (Написать письмо, vk)