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

При работе над Кексби мы будем использовать графический макет: получать параметры текста, цветов, измерять размеры блоков и отступов между ними, нарезать картинки. Для этого вам понадобится программа Adobe Photoshop, ознакомительную версию которой можно скачать на сайте Adobe.

Мы подготовили скринкасты, которые познакомят вас с работой в Фотошопе в процессе вёрстки макетов. Для начала скачайте Фотошоп и настройте его для работы с помощью первого скринкаста:

Теперь вы можете скачать архив с исходным макетом «Кексби» в формате.psd (файл в архиве называется keksby.psd), открыть макет в Photoshop СС и познакомиться с ним поближе.

Итак, начнём с задания глобальных параметров документа. Обычно браузеры добавляют небольшой отступ для всей страницы, чтобы контент не прилипал к краям. Этот отступ нам не нужен, так как в макете отступы будут в других контейнерах. Поэтому обнулим внешние и внутренние отступы у body.