Пуленепробиваемый веб-дизайн. Библиотека специалиста, 3-е издание

Пуленепробиваемый веб-дизайн. Библиотека специалиста, 3-е издание
Автор: Дэн Седерхольм
Год: 2012
ISBN: 978-5-459-01271-2
Страниц: 304
Язык: Русский
Формат: PDF
Размер: 10 Мб

Download

Эта книга, выходящая уже в третьем издании, посвящена концепции “пуленепробиваемого” веб-дизайна. Она научит вас применять HTML и CSS для разработки современных веб-сайтов, доступных во всех браузерах и устройствах и отличающихся гибкостью и устойчивостью к любым ситуациям.
В каждой главе книги рассматривается определенный принцип пуленепробиваемого дизайна и описывается, какие именно преимущества дает его использование. В последней главе все ранее изученные методики сводятся воедино для разработки готового макета “пуленепробиваемой” веб-страницы. Все примеры рассматриваются на базе современных веб-стандартов HTML5 и CSS3.
Книга предназначена для веб-дизайнеров, стремящихся освоить современные технологии веб-разработки на базе актуальных стандартов и методик. На практических примерах Дэн Седерхольм, автор нескольких бестселлеров по веб-программированию и дизайну, предлагает новый перспективный подход к созданию гибких и адаптируемых интернет-проектов.

+

Уязвимые места
Одна из основных проблем табличного макета — это смешение в единое целое контента и оформления. Рамки, GIF-разделители и изображения встраиваются непосредственно в разметку, то есть прячутся между фрагментами значимого контента. Это приводит к тому, что не все браузеры могут отображать такие страницы корректно. У пользователей приложений для чтения с экрана, текстовых браузеров и устройств с небольшими экранами возникнут проблемы.
Избыточность Кода
Такое смешение предполагает большой объем кода. Количество разметки, необходимой для создания привлекательного макета с помощью вложенных таблиц, просто потрясает. Лишние ячейки таблицы используются для задания средников, рамок и других элементов оформления страницы. CSS позволяет сделать разметку минимальной, а правила отображения контента переместить в таблицы стилей. Такая страница сразу становится доступной для нетрадиционных устройств и приложений, а сам сайт станет более дружественным по отношению к поисковым системам (и это еще один плюс CSS).
Кошмарный сон техподдержки
Весь этот сложный код, о котором я говорил, только добавляет проблем для службы поддержки. Изменение дизайна страницы, построенной на базе таблиц, потребует много дополнительной работы, связанной с поиском нужного кода среди огромного количества ячеек таблицы и избыточной разметки. Это раздражает или и вовсе делает работу бессмысленной, поскольку иногда бывает проще создать страницу заново.
Неоптимальный порядок размещения Контента
Другим недостатком макетов на базе таблиц является порядок, в котором контент отображается в текстовых браузерах и приложениях для чтения с экрана. Давайте рассмотрим трехколоночный макет. Мы знаем, что порядок разметки всегда будет следующим: левая колонка, средняя колонка, а затем правая колонка. Так работают таблицы.
Пользователи текстовых браузеров или приложений для чтения с экрана увидят контент только в таком порядке. Однако важная информация может находиться не в первой (левой) колонке, а, например, в средней, которая окажется где-то далеко внизу. При использовании макета на базе таблиц невозможно расставить приоритеты отображения контента, которые позволят сразу увидеть самый важный контент в альтернативных браузерах и приложениях. Существует только один порядок отображения для всех устройств, что заставляет пользователей текстовых браузеров и приложений для чтения с экрана добираться до сути сквозь дебри менее важной информации.
К счастью, верстка на базе CSS позволяет создавать оптимальную структуру контента, размещая в исходном коде документа информацию в одном порядке, а отображая в другом. Кроме того, разделив контент и визуализацию, мы используем гораздо меньше кода. Так что давайте перейдем к резиновой многоколоночной верстке на базе CSS.
Пуленепробиваемый подход
Хотя в качестве пуленепробиваемого примера мы займемся гибкой резиновой версткой, не могу не отметить, что фиксированные макеты на базе CSS имеют не меньше достоинств, чем их нефиксированные «коллеги». Основное различие в том, что резиновые макеты могут расширяться или сжиматься в соответствии с размерами окна браузера, подчиняясь желаниям пользователя. Это особенно удобно, если размеры экранов значительно различаются (например, в мобильных устройствах).
Давайте проделаем все необходимые шаги, чтобы создать резиновый макет на базе CSS и разобраться, почему мы поступаем именно так, а не иначе. И начнем с разработки простого двухколоночного дизайна с заголовком и нижним колонтитулом.
Структура разметки
Вместо использования таблицы для разработки макета многоколоночной страницы, мы использует контейнеры

и другие семантические элементы HTML5, позволяющие разделить контент на фрагменты. Давайте при разработке учтем оптимальный порядок отображения контента (это будет еще важнее, когда мы приступим к трехколоночному дизайну).
В основе простого макета из двух колонок может лежать следующая разметка:

Вот и все. Вряд ли вы сможете сделать проще. Порядок имеет смысл: заголовок, контент, боковая панель и нижний колонтитул. Мы мыслим в понятиях страницы без учета CSS. Пока все идет нормально.
Я добавил окружение, в будущем оно нам еще пригодится. Каждый раз, когда я верстаю макет на основе CSS, я начинаются с контейнера <div>.
Колонки: плавающие против фиксированных
Одним из способов создания колонок с помощью CSS является абсолютное позиционирование, то есть использование координат x и y для размещения
элементов в конкретных местах экрана. Главный недостаток абсолютного позиционирования — невозможность очистки нижнего колонтитула от нижней
части всех колонок.
Две колонки (основная колонка контента и боковая панель) можно создать с указанием точных размеров, задав контейнеру контента <div> отступы слева и справа, чтобы оставить достаточно места для боковой панели. При абсолютном позиционировании можно организовать боковую панель, задав ширину, приблизительно равную отступу колонки контента и разместив ее вверху справа.
Например, для этого мы можем задать следующие правила CSS:

Код задает внешнее поле, равное ширине боковой колонки, и позиционирует ее с помощью свойства position: absolute;. Данный подход достаточно
логичен и понятен, особенно для тех, кто только учится верстать с помощью CSS. Однако при использовании этого метода возникает одна проблема: невозможно очистить элементы, размещенные с использованием абсолютного позиционирования.
Если боковая панель окажется длиннее колонки контента, она перекроет все расположенные ниже элементы страницы (в нашем случае, нижний колонтитул).
Это связано с тем, что свойство position: absolute; извлекает элемент из системы выравнивания и обтекания. Расположение и размеры данного элемента перестают оказывать влияние на соседние элементы, что мешает корректной очистке нижнего колонтитула, расположенного под нашими колонками.
Такое отсутствие гибкости при создании многоколоночных макетов заставляет хитрых дизайнеров использовать свойство float. Так как плавающие элементы можно очистить (как мы узнали в главе 4 «Креативное перетекание»), они становятся лучшим инструментом, позволяющим управлять макетом с колонками. Стандарт CSS3 предлагает и другие способы создания модульных макетов с помощью нового синтаксиса, но, к несчастью, они пока не поддерживаются большинством браузеров в полном объеме. А такая поддержка критически важна для макета. Поэтому мы и будем использовать float.

Применяем стили
Так как для создания колонок мы решили использовать плавающие элементы, нам нужно разделить страницу на две части: колонку контента и боковую панель, указав процентное соотношение размеров. В нашем случае 70% займет колонка контента и 30% — боковая панель.
Давайте на начальном этапе добавим фоновую заливку для заголовка, боковой колонки и нижнего колонтитула. Это немного упростит визуальное разделение компонентов при дальнейшей работе.