Правильное “ошкуривание” блога, часть 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. “Музыка”, “книги” и “события” расположены по левому краю.

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

Пожалуйста, оцените статью: 
No votes yet

Добавить комментарий

Не нашли ответ на свой вопрос? Возможно, вы найдете решение проблемы на нашем канале в Youtube! Здесь мы собрали небольшие, но эффективные инструкции. Смотрите и подписывайтесь на наш youtube-канал!

Смотреть на Youtube

Помощь: задайте вопрос

Вы робот? Оставьте это поле пустым, если вы не робот, а человек

Руководства и обзоры

1 Что нужно восстановить?

Видео

MP4, AVI и HD видео хранятся на телефоне и / или по ошибке удаляются вместе с фотографиями и другими медиафайлами.

Контакты

Номера телефонов друзей и знакомых из приложения «Контакты Android», журналы вызовов; Восстановление SIM-карты.

Фото

Удалены файлы JPG / PNG из Галереи Android; фото, загруженные на мобильный, файлы повреждены после восстановления.

Смс и сообщения

Чаты WhatsApp и Facebook, текстовые сообщения в соцсетях, информация на сим-карте

2 Где пропали файлы?

На sd-карте

Фотографии и документы хранятся на SD-картах. Часто на них случайно удаляются файлы

На телефоне

Программы для восстановления не распознают внутреннее хранилище телефона как диск, но есть другие решения.

На USB флешке

Эти небольшие устройства хранения данных часто выходят из строя или на них появляются ошибки чтения.

На HDD или SSD

Несмотря на то, что настольные платформы становятся все менее популярными, проблема потери файлов всегда оставалась.