Что значит сверстать текст
Блог издательства Delibri
Для чего нужна вёрстка
Все издательства говорят, что книгу надо верстать, но не всем авторам понятно — зачем. Разбираемся, почему нельзя документ «Ворд» просто превратить в книгу.
Текст в «Ворде» — это просто текст, набор слов. Его можно распечатать на принтере, но книгой он от этого не станет.
Что такое вёрстка и зачем она нужна
Вёрстка — это оформление текста, иллюстраций, таблиц и других визуальных элементов в связанный формат. Без вёрстки книга будет выглядеть неаккуратно, и это повлияет как на её продажи, так и на имидж издательства.
Читать текст, набранный разными шрифтами или супермелким кеглем, очень тяжело, а некрасивые картинки вызывают негативные эмоции. О такой книге вряд ли расскажешь друзьям, напишешь положительный отзыв или снова возьмёшь её в руки, даже несмотря на великолепное содержимое.
Требования к вёрстке
Чтобы вся работа вышла красивой и аккуратной, нужно соблюдать требования к вёрстке. Они делятся на композиционные, гигиенические и стилистические.
Композиционные — техническая и информационная совместимость. Нужны для того, чтобы все элементы хорошо читались. Например, у всех заголовков должна быть одинаковая высота, они не могут быть меньше основного текста. Переносы не должны висеть, полосы имеют только прямоугольную форму.
Стилистические. Это вопрос гармоничного образа и художественной завершённости — одинаковые или в похожем стиле компоненты, наличие дополнительных, поясняющих сносок, иллюстрации и подписи к ним.
Гигиенические — защита зрения. Применение шрифтов, которые легко читаются, соблюдение интервалов между частями текста, нужная ширина полей. При чтении хорошо сверстанной книги глаза не должны уставать.
Основная терминология
Кегль — размер шрифта.
Авторский лист — единица измерения объема рукописи, 40 000 знаков с пробелами. Опираясь на эту величину, издатель рассчитывает параметры книги и её стоимость. Это примерно 24 печатных страницы 10 кеглем с интервалом 1,5.
Полоса — одна страница в блоке книги. Например, фраза «брошюра блок 48 полос + обложка 4 полосы» будет означать, что в брошюре есть блок, состоящий из 48 страниц (24 листа) и двусторонняя обложка спереди и сзади.
Макет — набор определённых правил, согласно которым текст и остальные элементы будут располагаться на странице.
Колонтитул — повторяющийся на каждой странице документа текст. Обычно содержит заголовок, имя автора, название произведения, части, главы, параграфа и т. д. Колонцифра — номер страницы.
Мастер-страницы — веб-шаблоны, которые содержат общие для всех форм элементы и специальные элементы (хотя бы один).
Что надо знать
Вёрстка бывает разных видов.
По виду издания: акцидентная (афиши, объявления, листовки), газетная и книжно-журнальная. Нас интересует сейчас только последняя.
По конфигурации: ломаная — когда все колонки разные по высоте и всё выглядит ступенчатым (используется в неделовых газетах и журналах). И прямая, когда колонки одинаковые и каждая из них — прямоугольник. Она используется в журналах, учебниках, художественной литературе.
По расположению относительно центра полосы: симметричная, когда части логически уравниваются по смыслу, и асимметричная — тут графически выявляется главный элемент.
По ширине колонок: постоянная, когда колонок одинаковое количество, и переменная, когда оно разное.
По способу размещения объектов:
Самостоятельная вёрстка и программы
Итак, вёрстка в «ворде» — не вёрстка, потому что это текстовый редактор, а не специализированная программа.
Например, при внесении исправлений в документ может слететь значительная часть макета: появятся огромные пробелы, переносы возникнут посреди строки, собьётся нумерация страниц, нарушится последовательность колонтитулов, переедут иллюстрации. Ухудшается качество последних — оно будет терпимое, но не лучшее, не используются цвета, которые необходимы для качественной печати. Часто типографиям приходится доделывать макет, так как красные щёки Снегурочки становятся ядрёно-малиновыми или фиолетовыми.
Сверстать книгу самостоятельно можно в одной из специальных программ.
Как формируется цена
Чтобы сберечь нервы и время, вёрстку всё же стоит доверить профессионалам. На неё у каждого издательства и фрилансера свои расценки. Одни назначают начальную цену за полосу, другие — за авторские листы. Всё зависит от целей, которые преследует клиент, а также от объёма работ и степеней сложности. В среднем это выглядит так:
Первая степень — самая простая и дешёвая, пятая — сложная и дорогая. Также надо учитывать разные мелочи: например, понадобится ли подготовка указателей? Подойдёт ли здесь классическое решение или верстальщику придётся покреативить?
Диапазон цен можно назвать только приблизительный, так как каждый случай индивидуален. Обычно это 20–50 ₽ за страницу. Но за вёрстку страницы альманаха, энциклопедии, подарочного или корпоративного издания могут запросить и все 500 ₽.
Перед вёрсткой
Но определиться с ценой — не самое главное. Рассказываем, что нужно сделать.
Чек-лист «Перед вёрсткой»:
После этого нужно отдать верстальщику исходники текста и статей, описаний и характеристик, графических элементов, иллюстрации и рисунки, схемы и таблицы, чтобы он посмотрел и прикинул макет.
Сначала он сделает предварительные наброски в электронном виде: определит формат издания, ориентировочное количество полос, оформит выбранные виды шрифтов для текста и заголовков. От того, как именно будут размещены текст, заголовки, сноски, таблицы, формулы, иллюстрации зависит качество оформления книги. Перед этим нужно определить её структуру и содержание, затем подготовить и выверить все тексты, подобрать иллюстрации, фотографии и остальные элементы.
Верстальщик построит макет на основе дизайн-концепции, предполагая, что определённые блоки будут повторяться на всех страницах. Тогда верстальщик создаст единый шаблон (или шаблоны), который заполнит текстом или иллюстрациями.
Вёрстка иногда даже важнее разработки дизайн-макета, потому что может оттолкнуть потенциального читателя. В реальный оригинал-макет войдут дизайнерские и художественные разработки, но верстать можно и без дизайнера-разработчика.
Помимо текста верстальщик разместит иллюстрации так, чтобы облегчить восприятие книги как единого целого. Здесь потребуются насмотренность и художественный вкус — нужно не допустить стилистического разнобоя и сделать грамотную цветокоррекцию, чтобы изображения были в одной цветовой гамме и качестве и соблюдались нормы качественной офсетной печати.
Что в итоге
Результат вёрстки — макет книги: электронный образ будущего печатного издания, полностью подготовленного для печати. Как правило, это PDF-файл. Перед типографией макет обязательно вычитывает корректор, проверяя правку, оглавление, подписи под иллюстрациями, правильность переносов, отсутствие висячих строк — техническую грамотность сверстанного макета. Кроме макета книги необходим ещё и макет обложки.
В заключение при верстке книги проводится окончательная вычитка текстов и проверка каждой из полос книги с редактором и корректором, чтобы найти ошибки и недочеты. Когда вёрстка книги закончена и проведена её корректура, файлы готовятся к офсетной печати.
Как сделать текст читабельнее за 5 минут
Мало просто написать хороший материал — его ещё нужно сверстать так, чтобы его читали. В этом материале поговорим о значимости вёрстки и за 5 минут переделаем сложный профессиональный текст во что-то красивое и приятное.
Современный читатель не изучает всё, что пишут в интернете. Он пробегает по диагонали и вычленяет интересные подзаголовки, контекстные элементы: таблицы, картинки, выделения. Если неинтересно — идёт дальше. Если совсем не интересно — уходит.
Вёрстка нужна для того, чтобы привлечь внимание читателя: смотри, вот тут у нас интересно, и тут, и вон там.
Без хорошей вёрстки читатель уйдёт сразу.
С хорошей вёрсткой и бесполезным содержанием он чуть-чуть задержится.
С хорошей вёрсткой и хорошим содержанием — вычленит нужное и прочитает.
Вёрстка — это красивая упаковка. Плохое содержание она не спасёт
Давайте рассмотрим текст и попытаемся пошагово его сверстать за 5 минут:
Оцените своё первое впечатление от текста. Неструктурированность материала создаёт впечатление потока сознания. Автор не делит мысли и не развлекает нас картинками, курсивами и списками. Кажется, что на такой текст требуются серьёзные мыслительные усилия.
И этот текст еще неплохой на уровне слов. А представьте, что будет, если написать что-то в стиле:
«Инвестиции — денежные средства, ценные бумаги, иное имущество, в том числе имущественные права, иные права, имеющие денежную оценку, вкладываемые в объекты предпринимательской и (или) иной деятельности в целях получения прибыли и (или) достижения иного полезного эффекта».
Абзац — единица мысли. Если есть несколько предложений, связанных друг с другом по смыслу — это абзац.
Когда читатель видит абзацно-расчленённый текст, ему становится спокойно: «фух, это не поток сознания, а структурированный материал».
Когда абзацного членения нет, не ясно, где заканчивается мысль и начинается другая. Это пугает.
Отсюда первый способ быстро увеличить читаемость текста — дробим его по абзацам:
Теперь последите за своими ощущениями, заметьте разницу: от этого текста не веет «полотном». Кажется, что всё нормально: «автор как-то выстраивает повествование и заботится о нас, надо заценить».
А сделали-то мы всего ничего: отделили введение про кино от основного материала, развели трейдеров и инвесторов — каждого в свой угол, раздробили мысли на законченные умозаключения.
Какие могут быть проблемы
«Ну как, это же всё одна большая мысль!». Если не дробятся абзацы, скорее всего, текст — поток сознания. Тут проблема уже не на уровне вёрстки, а на уровне смысла. То, что автор пытается сказать, пока не достаточно структурировано у него в голове, чтобы преподнести это читателю.
Вёрстка не поможет — надо идти почитать материалов по теме.
Если абзац — единица мысли, то подзаголовок — единица смысла. Когда маленьких «абзацных» умозаключений набирается достаточно, чтобы привести читателя к какой-то идее или догадке, отбиваем подзаголовок.
При этом даже внутри подзаголовка бывает достаточно отдельных мыслей, чтобы их вынести в подзаголовок поменьше.
Например, в тексте, который мы сейчас верстаем, слишком мало слов для того, чтобы вставлять большие подзаголовки. Поэтому мы отделаемся жирными буквами и курсивом — этого хватит, чтобы зацепить внимание читателя.
Снова сравниваем ощущения. Теперь от текста ещё больше веет структурностью. О нас позаботились, и даже выделили части про трейдеров и инвесторов — теперь можно проскочить текст по диагонали и выцепить то, что нужно. Финальную и самую главную мысль написали курсивом — она тоже выделяется. Можно сразу понять, о чём написано выше, даже не читая
Какие могут быть проблемы
«Я не знаю где поставить заголовки!». Если автор не знает, где поставить подзаголовки, не чувствует, где одно умозаключение соседствует с другим, это снова поток сознания. Надо идти читать больше по теме.
Пока автор не структурирует текст нормально у себя в голове — на бумаге он тоже структурированным не будет.
Списки, картинки, цитаты, видео — это всё очень здорово, читатели такое любят. Кроме того, «веселуха» привлекает внимание: можно выцепить что-нибудь интересное и прочитать побольше.
Картинки манят: на них хочется смотреть, их хочется изучать. А потом, если подобрать достаточно красивые и содержательные иллюстрации, хочется ещё и прочитать, зачем эти картинки появились в тексте.
Самая большая сложность редакторской работы — подбор примеров и иллюстраций. Остальное — детали
Какие могут быть проблемы
«У меня нет «веселухи», чтобы добавить!». Если автор не может вставить пример, видео или иллюстрацию к своему тезису, то и тезис его не услышат. Одно дело послушать, чем занимаются инвесторы, а другое дело — увидеть своими глазами, что в долгосрочной перспективе рынок инвестиций реально растёт.
Может показаться, что, раз люди так любят видео, жирный текст и подзаголовки, то можно бы и весь материал ими заставить.
Суть всех этих элементов — подзаголовков, списков, картинок — привлечь внимание пользователя, дать ему возможность выбрать что-нибудь интересное. Если воспользоваться всеми инструментами сразу, они потеряют свою силу, а сайт станет похожим на какой-то адок из 2000-х.
Простите за картинки. Дизайнер из меня на троечку😢
Без плохой вёрстки читатель уйдёт сразу.
Смелое утверждение!
Это, конечно, до некоторой степени преувеличение. Если мы читаем научную статью или книжку, то да — там и без верстки всё будет нормально, потому что читатель изначально приходит подготовленный. Но это скорее исключение, чем правило.
Я говорил о текстах, которым нужно привлекать внимание, подготовить читателя к прочтению, заинтересовать. А таких текстов в интернете большинство. И без вёрстки они не заработают.
Спасибо за содержательный комментарий!
Это, конечно, до некоторой степени преувеличение.
Нет, Вы не уловили смысла моего комментария. Прочтите ещё раз свою цитату, задумайтесь, что она значит. Это не преувеличение, Вы просто описались.
Чёрт, надо побольше спать
«Мужчина, проснитесь, вы описались»
Одно но.
То о чем вы пишете в русском языке называется стилистикой, а не версткой.
Верстка это изготовление макета печатной (электронной) страницы.
Ну так на этапе верстки статью на сайтах и доводят до такого состояния — вставляют картинки, выделяют что-то жирным. Не с Гугл-дока же людям читать.
Но вообще это всё незначительно, жонглирование словами.
Дробите тексты на абзацы и добавляйте заголовки. Смотрите, я сократил эту статью до уровня твита.
Не используя заголовки и абзацы )
Кажется, целью этого материала было — показать на практике, как работает редактура и привести аргументированные доводы, зачем структурировать материал.
Если не будет примеров и рассуждений, мне никто не поверит.
«Жри богатых!»
Смотрите, я сократил «Капитал» до двух слов. Фантастика!
Прочитал по диагонали
Так и было запланировано)
Хотелось, конечно, каких-то фишек. Плюнуть через правое плечо желчью от протухшей колбасы, не знаю.
А пересказывать то, что понимает любой здравый и думающий человек, который не первый год в этих ваших интернетах.
Ну такое.
Именно поэтому на публикации 50 апвоутов.
И именно поэтому я регулярно наблюдаю у авторов, людей, которые этим зарабатывают на жизнь, — нарушения элементарных правил вёрстки.
И именно поэтому — от того, что про законы вёрстки знает «любой здравый и думающий человек» — я часами это исправляю и пишу пометки на полях.
Если какие-то вещи понимаете и осознаёте именно вы, это не значит, что об этом знают все. Да и не должны, в общем-то: редактура — это отдельная профессия, куда нужно входить.
Например, если сейчас кто-то напишет статью про сварку, для меня как для читателя автору нужно будет всё объяснять с самых основ. И, конечно, в комментариях появятся эксперты, которые захотят блеснуть своим невероятным знанием и рассказать, насколько это всё очевидно и понятно. Вот мне — не очевидно и не понятно.
Но всегда же проще написать что-нибудь желчное и заодно похвалиться.
Ну такое.
Если хотите каких-то секретов, открою страшную тайну: их нет и никогда не было. Если писать нормально и по-человечески, то и тексты будут получаться нормальными и человеческими.
Где было написано желчное? Была констатация факта: это известно всем нормальным авторам. Это находится в ТОПе выдачи гугла. Это пишет Ильяхов (которого все ненавидят и рекомендуют читать одновременно). Да даже у Шардакова можно найти что-то на эту тему. Остальных я просто перечислять не буду.
Если вы работаете с авторами, которые не знают таких вещей, то попробуйте поднять оплату. Говорят, что исполнители, которым платят чуть больше, чем на хлеб и воду, работают лучше и имеют более обширные знания.
Как вижу статью я: надо написать что-то, чтобы было якобы полезным, но идей нет. Поэтому высосем тему из пальца. Сорре, конечно. Это мое ИМХО. Дальше можете не отвечать мне — диалога не будет.
Если бы вы хотели диалог, вы бы написали в лс. Но сейчас мы делаем это в комментариях, и я поясняю вопрос для всех, кто будет их читать — не для вас.
Теперь по пунктам:
1) Говорят, что авторы, которые получают далеко не на хлеб и на воду, тоже нарушают элементарные правила гигиены текста. Да и не надо делать поспешных выводов: вы меня не знаете, я вас тоже, и места, где я трудоустроен, вам неизвестны. Можете уточнить в лс, если интересно, я расскажу.
2) Эта статья была написана не для авторов, а для людей, которым просто регулярно приходится что-то пописывать: маркетологи, дизайнеры и все люди, которые хоть раз в неделю пишут на почту коллегам.
Как сверстать веб-страницу. Часть 1
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
Макет
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
Логотип
Вставляем логотип в тег header:
Дополнительных стилей не требуется.
Поиск
Вставляем форму поиска в тег header:
И стили выравнивания по правому краю для нее:
Для отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницы
Заголовок страницы помещается в div с идентификатором heading
Заголовок имеет следующие стили:
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
И применяем к подменю следующие стили:
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так:
В стилях укажем шрифты, цвета и отступы:
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Цитата
Вёрстку контента начнём с добавления цитаты.
Добавим код цитаты в раздел section
И применим для него стили:
Здесь нет ничего нового, так же — шрифты, фоны и отступы.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :
, которому зададим следующие стили:
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
А затем два блока-строки с карточками сотрудников
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
И применим к нему оформление:
Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
Социальные ссылки
Вставляем набор ссылок в контейнер
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
На этом наши работы закончены. Готовый проект можно скачать здесь.