Правильное “ошкуривание” блога, часть 1

Перевод статьи Вирл Питерс (Veerle Pieters)

Когда вы создаете свои страницы с использованием CSS, всегда необходимо отключать slice-mode (режим использования слоев). Если вы профессионал в области Веб хотя бы в некотором смысле этого слова, слои и таблицы для вас – технологии прошлого дня. Думаю, не нужно объяснять, почему. Поэтому мы сразу и приступим к вопросу: как преобразовать дизайн блога? Во-первых, нужно спроектировать будущую структуру страниц и определить области, которые будут конвертированы в div с помощью ID или классов.

Определение контейнеров основных div’ов

Нужно выделить в странице основную область, с которой она будет начинаться. Для своей страницы я выделила две сравнительно большие области: footer (подвал), и все, что находится выше footer’а. Эти два div-контейнера называются: #footer и #wrap соответственно (см. скриншот ниже). Последний содержит множество других контейнеров. Вот почему я и назвала контейнер как “wrap” (маска): данный контейнер является “оберткой” для других. То бишь, он нужен для объединения всех контейнеров.

Если бы я реализовала все это из таблиц, моя конструкция бы расползлась в разные стороны, измени я размер окна. В другом случае, обертка контейнера необходима, если вы хотите сделать центрирование какого-либо блока. И когда вы измените размер окна, данный блок остается в центре.

Как я разделила wrap-контейнер

Давайте посмотрим, как я разделила wrap-область. Во-первых, сюда входят заголовок окна с навигацией, которая накладывается на него посредством абсолютного позиции. Заголовок использует технику замены изображений. В навигации применена техника navigation matrix.

Схема главного контейнера:
 

 

Ниже располагается content-область (основное содержание), которая, опять же, делится primary- и secondary- содержание. Оба контейнера выровнены по float:left. Внизу мы покинули два выровненных по левому краю контейнера. Почему я не сделала три отдельных области? — потому что надпись “Upcoming events” расположена по всей ширине этого блока. Во-вторых, это будет полезным для просмотра сайта на небольших экранах.

Как вы уже заметили, я использую 2 вида форм: это “previously”, “search” и “what’s cookin”; и вторая область, которая сдвинута вправо. Я создала два класса, которые будут использоваться в теле элемента: small и wide. Эти 2 класса отличаются – что понятно из содержания CSS.

Определение внутренних div’ов

Теперь, когда мы проанализировали и определили наиболее важные “внешние” контейнеры, давайте обратим внимание на внутренние блоки. Во-первых, это поле, где у нас будет идти текст статьи. Данное поле использует отдельный класс потому, что я использую его более одного раза, в других статьях: в странице архива, где отображаются статьи определенной категории или месяца. Ниже категории находится прямоугольная область, которая содержит два выровненных по левому краю списка. Справа находятся уже упомянутые разделы “previously”, “search” и “what’s cookin”.

Внутренние div-контейнеры:
 

С правой стороны страницы — бокс для отображения картинок с сервиса Flickr. Ниже этой рубрики – надписи “Veerle’s art” и “Art eleswhere”. Последнее: боксы с музыкой, книгами и событиями выровнены с помощью #wrap-alt. “Музыка”, “книги” и “события” расположены по левому краю.

В следующей части статьи я расскажу о том, как я сверстала некоторые регионы шаблона (имеется в виду главная страница).