Отзывчивый веб-дизайн - [6]
>24 – кегль заголовка, наш новый контекст:>11: 24 = 0,458333333333333
Мы получили какое-то совсем некрасивое число. Может быть, самое некрасивое, которые вы сегодня видели. (Но подождите, эта глава еще не окончена.)
Вам захочется округлить его до более-менее приемлемого числа – скажем, >0,46 em. Даже не думайте! Может, ваши глаза и устанут смотреть на >0,458333333333333, но именно это число идеально представляет желаемый кегль в пропорциональном отношении. К тому же браузеры мастерски владеют искусством округления лишних десятичных знаков, когда преобразовывают значения в пиксели. Поэтому нужно дать им больше, а не меньше, и в конце вас будет ожидать отличный результат.
Теперь просто скопируйте это непритязательное число в CSS:
>h1 a {
>font: bold 0.458333333333333em Calibri, Optima, >Arial, sans-serif; /* 11px / 24px */
>color:#747474;
>letter-spacing: 0.15em;
>text-transform: uppercase;
>text-decoration: none;
>}
Посмотрим на результат. Наша страничка закончена, она полностью соответствует желаемому дизайну, а текст задан в масштабируемых единицах >em (рис. 2.8).
>Рис. 2.8. С помощью простой математики мы создали более красивый дизайн – и без всяких пикселей
От гибких шрифтов к гибкой сетке
Вы, наверное, сейчас зеваете со скуки. Здесь ведь должна была быть глава про гибкие макеты, а этот тип Итан все талдычит про математику и размеры шрифтов. Надоело!
Но когда я впервые делал гибкую сетку, я понятия не имел, с чего начинать. Поэтому, столкнувшись с неразрешимой проблемой, я сделал то, что у меня получается лучше всего: полностью ее проигнорировал и начал работать над тем, что знаю.
Когда я понял, как устанавливать размеры текста в единицах >em, на меня снизошло прозрение: ведь мы можем применять тот же принцип пропорционального мышления и в отношении самих макетов. Другими словами, все элементы нашей сетки – строки, колонки и накладываемые на них модули – могут быть выражены как пропорция содержащихся в них элементов, а не в неизменных, жестких пикселях.
И в этом нам снова поможет наша формула >target ÷ context = result. Идем дальше.
Создание гибкой сетки
Представьте, что дизайнер настолько впечатлен вашей быстрой и качественной работой над заголовком, что прислал вам другой макет, и теперь вам нужно написать код для блога сайта Robot or Not (рис. 2.9).
>Рис. 2.9. Новое задание – превращение эскиза в гибкий макет
Плюс ко всему дизайнеру настолько понравилась работа, что он прислал краткую схему содержания страницы (рис. 2.10), благодаря чему мы можем не тратить время на планирование. Нужно как-то его отблагодарить.
>Рис. 2.10. Схема расположения элементов для нашего блога
Мы можем быстро и ловко перевести его схему в базовую структуру верстки:
>>>
Наша разметка получилась простой и аккуратной, семантически верной и превосходно подходит для контента. Мы создали основной контейнер для всей страницы (>#page), который, в свою очередь, содержит модуль >.>blog. Внутрь него мы поместили еще два блока: один с классом >.>main для главного содержания статьи, а второй с классом >.>other для всего остального. Звучит, конечно, не слишком поэтично, но, с другой стороны, это и не сборник стихов.
А теперь пропустим несколько этапов – как это делается на кулинарных шоу, где повар кладет в кастрюлю сырые продукты, а через минуту вынимает из духовки полностью готовую индейку. (Эта метафора прекрасно демонстрирует то, как часто я смотрю кулинарные шоу… или готовлю индейку.)
И все же предположим, что мы уже создали все CSS, связанные со шрифтами, фоновыми изображениями и всеми элементами нашего дизайна, не имеющими отношения к макету (рис. 2.11). Теперь мы можем сосредоточиться исключительно на создании «резиновой» сетки.
>Рис. 2.11. Работа над шаблоном закончена! Если, конечно, не принимать во внимание то, как он должен выглядеть в самом конце
Так как же нам превратить эти блоки >.>main и >.>other в нужные колонки? У нас уже есть схема контента и основная разметка, теперь давайте внимательнее взглянем на физические параметры сетки в оригинальном дизайне (рис. 2.12).
>Рис. 2.12. Теперь наша страница основана на сетке!
Сама сетка разделена на 12 колонок по 69 пикселей каждая, отделенных друг от друга промежутками шириной в 12 пикселей (>12px). В сумме колонки и промежутки дают нам полную ширину в >960px. Сам же блог шириной 900 пикселей отцентрирован по горизонтали в пределах холста.
Вот они, детали высокого уровня. И если мы внимательно рассмотрим две колонки в блоге (рис. 2.13), то увидим, что ширина левой основной колонки (>.main в нашей разметке) составляет 566 пикселей, в то время как ширина правой вспомогательной (>.other) – только 331 пиксель.
>Рис. 2.13. Давайте-ка изучим детали и измерим ширину внутренних колонок
Что-то слишком много пикселей вокруг, да? И если бы пиксели нас устраивали, мы могли бы просто перенести их в CSS. (Эй! Это очень важно!)
