Веб-дизайн с нуля: HTML + CSS на практике - Макфедрис П.

Автор: Макфедрис П.
Теги: взаимодействие сетей межсетевой обмен оргсвязь программирование информационные технологии интернет html веб дизайн
ISBN: 978-5-4461-4128-9
Год: 2025
Похожие
Самоучитель Joomla!
РНР 5
Веб-Самоделкин. Как самому создать сайт быстро и профессионально
Корпоративный веб сайт на 100%
Текст
                    С НУЛЯ
HTML + CSS
НА ПРАКТИКЕ
Пол Макфедрис
/И MANNING
ОТЗЫВЫ О ПЕРВОМ ИЗДАНИИ
Благодаря этой замечательной книге вы сможете не только изучить HTML и CSS, но и со временем стать отличным веб-дизайнером.
Шон Эйон Смит, директор по разработке ПО. Университет штата Пенсильвания
У вас в руках превосходное руководство по современному вебдизайну и отличный ресурс для новичков и специалистов, оттачивающих свои навыки Книга содержит множество актуальных реалистичных примеров
Конор Редмонд, технический менеджер по программной инфраструк гуре, InComm Product Control
Я вновь поверил в мощь CSS, обнаружив в книге ответы на некоторые вопросы, с которыми долгое .ремя не мог разобраться
Хосе Сан-Леандро, разработчик, OSOCO
Отличный источник информации Охватывает все аспекты от дизайна до разработки и публикации веб-страниц.
Прабхути Пракаш, архитектор решений,
Atos India Pvt Ltd
Бесценная книга, совмещающая веб-дизайн и разработку, причем она будет полезна и начинающим дизайнерам/разработчикам
Сачин Кумар, ведущий программист/ разработчик, Capgemini America
WEB DESIGN PLAYGROUND
SECOND EDITION
Paul McFedries
II
MANNING
Shelter Island
ВЕБ-ДИЗАЙН С НУЛЯ
ВТОРОЕ ИЗДАНИЕ
Пол Макфедрис
ПИТЕР
Санкт-Петербург * Москва * Минск
2025
ББК 32 988 02-018
УДК 004 758 5
М1/
Макфедрис Пол
М17 Веб-дизайн с нуля: HTML + CSS на практике 2-е изд — СПб Питер, 2025. — 416 с. ил. — (Серия «Библио!ека npoi раммиста»)
ISBN 9/8-5-4461-4128-9
Если вы умеете пользоваться браузером, то сможете создать и сайт! Второе издание книги «Веб дизайн с нуля» представляет собой наглядное пошаговое руководство с описанием простых и увлекательных проектов Благодаря ему вы освоите Ш ML, CSS и другие важные веб-технологии С помощью уникальной онлайн-песоиницы, созданной специально для книги вы с нуля создадите лендинг, фотогалерею сайт-портфолио и многое другое, даже если у вас совсем нет опыта веб-дизайна
В книге используется творческий визуальный подход и понятно объясняются компоненты концепции и действия, необходимые для создания вебстраниц. Оттачивая каждый новый навык в онлайн-песочнице, вы станете уверенным веб-дизайнером Проработав множество небольших проектов, вы на практике изучите все возможные темы веб -дизайна, начиная с основ верстки веб-страниц и заканчивая новыми тегами и функциями, такими как Flexbox и CSS Grip — и все это с уверенной поддержкой автора книги Пола Макфедриса
16+ (В соответствии с Федеральным законом от 29 декабря 2010 г № 436-ФЗ.)
ББК 32 988.02-018
УДК 004.758 5
ISBN 978-1633438323 англ
ISBN 978-5-4461-4128 9
Authorized translation of the English edition © 2023 Manning Publications Tbs translation is published and sold by permission of Manning Publications, the owner of all rights to publish and sell the same © Перевод на русский язык ООО «Проресс книга#, 2025
© Издание на русском язь1ке оформление ООО «Прогресс книга» 2025 © Серия «Библиотека программиста» 2025
Оглавление
Предисловие	12
Благодарности	..13
О книге	 14
Структура издания.............................14
О коде........................................17
От издательства ..............................17
Об авторе	18
Часть I. Основы работы с HTML и CSS
Глава 1. Знакомство с HTML и CSS	  20
Что такое HTML	21
Что такое CSS.................................24
Чего нельзя делать с помощью HTML и CSS . .	27
Как HTML и CSS создают исемионую паутину. ..	28
Знакомство с песочницей Web Design Playground	29
Резюме . .	 32
Глава 2. Создание вашей первой веб-страницы	. 33
Использование атрибутов Н"1 ML-тегов	 35
Начало работы над веб-страницей	39
Популярные текстовые элементы.................43
Резюме	...	.53
5
Глава 3. Добавление структуры на страницу	. 54
HTML-элементы для структурирования содержимого страницы .................................... 55
Нумерованные и маркированные списки	. 61
Резюме.......	.65
Глава 4. Форматирование веб-страницы	66
Работа со шрифтами........................... 67
Форматирование текста. .......................72
Оформление абзацев. ......................... 75
Управление цветом ............................79
Резюме................................... .	. 83
Глава 5. Проект: создание персональной главной страницы	. .. 84
Что вы будете создавать...................... 85
Эскиз веб-страницы..........................  85
Выбор шрифтов .	86
Выбор цветовой схемы ......................   86
Верстка страницы............................. 87
Продолжение банкета  ..................... .96
Резюме................................. .. 98
Часть II. Добавление и оформление изображений
Глава 6. Добавление изображений и медиафайлов..100
О форматах графических файлов... ............103
Создание графики	... ... 104
Добавление изображений по правилам HTML5... .105
Использование изображений-ссылок........  ...106
Пользовательские маркеры списков	.107
6
Зыравнивание изображений и текста . ..	108
Мощение фона............................... ill
Позиционирование фона	112
Добавление изображения-бренда ..	 ИЗ
Краткая нотация свойства background	115
Оптимизация изображений.................... 115
Добавление видео и аудио на страницу	116
Резюме	123
Глава 7. Дополнительно о стилях	125
Добавление стилей на страницу.............. 126
Единицы измерения в CSS.................... 135
Резюме.................................... .	136
Глава 8. Выравнивание и позиционирование элементов	 137
Стандартный поток страницы................. 138
Сброс обтекания выровненных элементов...... 140
Предотвращение схлопывания контейнера ..	141
Буквица.....................................144
Цитаты......................................145
Относительное позиционирование......	.. . 148
Абсолютное позиционирование	  149
Фиксированное позиционирование..............151
«Липкое» позиционирование ................. 152
Резюме	154
Глава 9. Управление размерами, границами и полями элементов	  155
Концепция блочной модели....................156
Осторожно, схлопывающиеся поля1 ........... 168
Резюме......................................169
7
Глава 10. Проект создание лендинга	. 170
Начало работы.................................171
Эскиз макета.................................171
Выбор шрифтов................................173
Выбор цветовой схемы	173
Создание страницы  .......................   174
Продолжение работы...........................194
Резюме.	196
Часть IIL Компоновка веб-страниц
Глава 11. Основы компоновки веб-страниц ........198
Макет «Святой Грааль»......................... 199
Методы компоновки веб-страниц	200
Семантические НТМЬ5-элементы .	.201
Резюме..................................... .212
Глава 12. Создание flex-макетов иеб-страниц	... 213
Обзор flex-верстки ...	 214
Управление flex-контейнерами............ . 216
Работа с flex-элементами	.224
Резюме.......................................236
Глава 13 Создание grid-макетов веб-страниц	237
Основы grid-верстки CSS	. 238
Резюме..................................... .255
Глава 14. Приемы отзывчивого веб-дизайна	.256
Создание отзывчивого макета	260
Подготовка отзывчивых изображений	270
Приемы отзывчивой типографики	276
Резюме.	281
8
Глава 15. Проект: создание фотогалереи	282
Начало работы............................   283
Подготовка фотографий	.	283
Создание эскиза макета...................   283
Выбор шрифтов	...	. . .284
Выбор цветов ....	285
Создание страницы.........................  286
Полезные приемы............................ 295
Продолжение банкета	.................   300
Резюме	301
Часть IV. Безупречные веб-страницы
Глава 16 Дополнительные HTML-элементы для неб-верстки	 304
Дополнительно о ссылках ................... 313
Вставка специальных символов.	317
Инструмент HTML5 Entity Browser	318
Комментирование кода ...................... 319
Резюме..................................... 320
Глава 17. Буйство красок ч зеб-дизайне	321
Теория цвета	322
Окрашивание с помощью CSS ................. 325
Выбор гармоничных цветов. ...	........333
Вычисление цветовых схем .	 335
Применение цветовых градиентов.	337
Резюме .....................................343
Глава 18. Улучшение веб-текста с помощью типографики	344
Управление шрифтами.......................  345
Форматирование текста	353
Резюме......................................358
9
Глава 19. Профессиональные приемы работы с CSS-селекторами...............................359
Идентификаторы...............................360
Веб-генеалогия: родители, потомки и братья...362
Контекстные селекторы........................363
Комбинирование селекторов....................369
Сброс CSS-стилей с помощью универсального селектора....................................372
Стили: расплетаем паутину....................372
Резюме.....................................  378
Глава 20. Проект: подготовка веб-портфолио.. ...379
Начало работы................................380
Эскиз макета.................................380
Выбор шрифтов................................382
Выбор цветовой схемы.........................384
Создание страницы............................385
Продолжение работы...........................400
Резюме.......................................401
Приложение. От песочницы к реальным проектам: создание веб-страниц	 402
Сохранение проектов из песочницы.............403
Выбор редактора кода.........................405
Настройка папок..............................406
Проверка кода................................407
Выбор хостинг-провайдера.....................410
Выгрузка файлов..............................412
Карен и Чейзу
Предисловие
Сегодня многие люди стремятся самовыразиться в Интернете Это можно сделать с помощью различных соцсетей, однако нередко формат этих платформ слишком ограничивающий, поэтому пользователи предпочи гают создавать собственное присутствие в Сети. А проявить максимальную свободу и креативность при этом позволяет знание языков HTML и CSS
Большинство программистов считают, что учиться программировать лучше всего, практикуясь писать код Читать о языке, конечно, необходимо, но если вы действительно хотите его выучить, его нужно использовать. По моему мнению, чтобы научиться программировать, следует еще экспериментировать с кодом В случае HTML и CSS это означает две вещи
•	В ходе стандартного процесса обучения HTML/CSS вам показывают некий код например тег или шаблон, и рассказывают, как он работает. В ходе экспериментальною игрового процесса обучения вам дают код и 11рсдлагают поэкспериментировать с ним изменить размер шрифта, увеличить отступ, применить цвета и т д
•	В ходе стандартного процесса обучения HTML/CSS вы имеете дело с простыми или стандартными примерами вроде классической программы Hello World' В ходе экспериментального процесса обучения HTML/CSS вам предлагаются содержательные и полезные проекты, которые вы можете реализовать с нуля и адаптировать под свои нужды
Подобный дух игры и экспериментирования пронизывает всю книгу, и я призываю вас рассматривать языки НТ ML и CSS в качестве инструментов для творчества и самовыражения.
Благо дар н о сти
Английский эссеист Джозеф Аддисон однажды описал редакто-оа как человека, который «движется в вихре и управляет бурей». Не знаю, справедливо ли это для людей, занимающихся редактурой художественных романов, кулинарных книг и т п., но, по-моему, это прекрасно отражает суровые условия редактирования компьютерной литературы. Почему? Дело в том, что компьютерная индустрия (и Интернет в частности) настолько требовательна, что даже самая маленькая авторская (или редакторская) оплошность может привести к тому, что книга вызовет у читателя скорее замешательство, нежели понимание и восторг.
Замечательные сотрудники издательст ;а Manning сводят количество ошибок к минимуму, подвергая каждую рукопись множеству проверок, которыми занимаются не только специалисты редакции, но и целая команда сторонних энтузиастов (в ходе процесса, который я называю «групповым рецензированием») Таким образом, рукописи просматривают не пара человек, а десятки компетентнейших людей, благодаря чему книги издательства Manning содержат максимально точную и актуальную информацию. Хотя на обложке указано лишь мое имя. над этой книгой работало множество людей Ее редактировали Адам Ван, Андрес Сакко. Борис Егоров, Эдер Андрес Авила Ниньо. Жан-Ьатист Банг Нтеме, Маттео Баттиста, Митчелл Фокс, Шрикар Ведантам. Стив Прайор и Тони Холдройд Я хотел бы выразить сердечную благодарность издателю Марьян Бейс, директору по развитию Карен Миллер, техническому редактору Брайану Дейли и всем остальным сотрудникам издательства Manning, способствовавшим выходу этой книги.
Члены редакционной команды не единственные люди, приложившие руку к реализации этого проекта. Над созданием книги работало множество других профессионалов, перед которыми я снимаю свою авторскую шляпу Я также хотел бы поблагодарить всех тех людей, которые нашли воемя на то, чтобы просмотреть ранние варианты оукописи и высказать свои замечания и предложения Ваш вклад оказался очень ценным
Спасибо также моему агенту Кэрол Джелен, благодаря упорной работе которой публикация этой книги стала возможной и чьи потрясающие знания е сфере издания технической литературы вызывают у меня восхищение и благодарность за возможность сотрудничать с ней.
О книге
В этой книге я научу tac быстро создавать красивые веб-страницы. Я понимаю, что вас пугает даже мысль о попытке создать такой же красивый сайт, какие встречаются в Интернете Моя цель — показать нам, что создать сложную и привлекательную веб-страницу довольно легко и по силам каждому К тому же по ходу дела я буду вас под-бадривать и развлекать
Многие выдохнут, узнав, что эта книга рассчитана в том числе на читателей, не имеющих опыта в веб-дизайне, не знающих HTML или CSS Вы начнете с нуля и постепенно будете расширять свои знания и навыки пока не окажетесь владельцем собственного участка киберпространства Весь материал представлен в виде лаконичных, понятных блоке»: В них легко ориентироваться, чтобы найти нужную информацию Песочница Web Design Playground (https:// webdesignplayground.ю/2) содержит инструкции и упражнения, выполняя которые вы усовершенствуете свои знания
Наверняка, помимо работы, у вас есть и личная жизнь, поэтому я структурировал книгу так, чтобы ее не нужно было читать от корки до корки. Например если вы хотите узнать, как добавить фотографию на веб-страницу, то обратитесь к главе 6, посвященной работе с изображениями Новичкам же рекомендую прочитать как минимум главы 1-4. прежде чем углубляться в детали Чтобы вам было легче ориентироваться, в следующем разделе я привел краткое описание 20 глав книги (и одного приложения).
СТРУКТУРА ИЗДАНИЯ
Глава 1 знакомит вас с азами HTML и CSS Вы узнаете о преимуществах и ограничениях этих важнейших технологий веб-дизайна, а также о том, как устроены HTML-элементы и CSS-свойства. '-.добавок вы получите краткое представление о сайте-песочнице этой книги — Web Design Playground
3 глапе 2 вы приступите к созданию своей первой веб-страницы. Вы узнаете, как сфоьмировать базовую структуру страницы, а затем добавите название и текст Далее вы узнаете, как выделять важный текст, чтобы акцентировать на нем внимание посетителей, цитировать известных людей, добавлять заголовки и создавать ссылки
14
Структура издания
В главе 3 показано, как структурировать веб-страницу. С помощью HTML-элементов вы разделите текст страницы на абзацы, добавите разрывы строк, разобьете текст на отдельные фрагменты и воспользуетесь строчными контейнерами для оформления конкретных слов и фраз Мы также поговооим о создании нумерованных и маркированных списков
В глане 4 вы снова вернетесь к CSS и узнаете, как форматировать текст, меняя семейство шрифта, его размер и начертания Кроме того, вы узнаете, как выравнивать текст, настраивать отступы между абзацами и окрашивать текст и фон страницы
Глава 5 посвящена созданию первого проекта в этой книге Используя полученные в главах 1-4 знания по HTML и CSS. вы создадите персональную домашнюю ст раницу
В главе 6 объясняется, как дополнить веб-страницы нетекстовыми элементами. Львиная доля главы посвящена изображениям, таким как фото1 рафии и рисунки, вы также узнаете, как добавлять видео- и аудиофайлы.
В главе 7 вы сможете углубить свои знания в области CSS, опробовав три способа добавления стилей на страницу. Кроме того, “ы узнаете, как использовать селекторы классов — одну из caMoix полезных и мощных техник CSS А еще я познакомлю вас с различными единицами измерения, которые можно использовать в синтаксисе CSS
В глане £ описываются инструменты для управления элементами, извлеченными из потока (flow) страницы, используемого браузером по умолчанию Вы узнаете, как перемещать элементы по странице и позиционировать относительно других элементов или окна браузера
В главе 9 вы познакомитесь с одной из самых мощных концепций CSS: блочной моделью. Вы узнаете, что она собой представляет и как с ее помощью изменять ширину и высоту элемента, а также отступы, границы и поля вокруг его содержимого
Гласа 10 посвящена второму проекту книги, в котором вы займетесь созданием целевой страницы (лендинга) для продукта или услуги. Весь процесс создания страницы — от подготовки эскиза дизайна, выбора шрифтов и цветов до создания структуры и содержимого страницы — вы освоите самостоятельно.
В гла ie 11 вы приступите к очень важной теме — верстке вебстраниц Я познакомлю вас с семантическими HTMLS-элементами для разметки страниц, в том числе header, article и footer и покажу, как с их помощью создавать современные макеты страниц.
В главе 12 вы найдете полное руководство по использованию мощной и популярной технологии flex-верстки. Вы узнаете, что она
15
О книге
собой представляет и в чем ее преимущества, а затем создадите flex-макет стандартной веб-страницы.
Благодаря главе 13 ваше мастерство веб-дизайна поднимется на новый уровень' вы познакомитесь с передовой технологией дпО-верстки страниц Вы узнаете о преимуществах этого метода, а затем изучите основы настройки сетки и способы ее использования в процессе верстки grid макета страницы
Глава 14 посвящена отзывчивым веб-страницам — одной из злободневных тем в современном веб-дизайне. Вы узнаете о приемах, позволяющих структурировать веб-страницы таким образом, чтобы они адаптировались к разным размерам устройств, от огромных мониторов настольных компьютеров до маленьких экранов смартфонов
В гла' .е 15 вам предстоит заняться третьим проектом современной фотогалереей Вы создадите эскиз макета, подберете шрифты и цвета, а затем шаг за шагом создадите страницу
В главе 16 вы познакомитесь с дополнительными HTML-элементами. которые пригодятся вам н работе веб-дизайнера Вдобавок вы научитесь создавать более сложные ссылки, добавлять специальные символы, недоступные с клавиатуры, и комментировать исходный код веб-страниц.
Глав а 17 полностью посвящена цвету Вы познакомитесь с теорией, способами обработки цвета в CSS и различными техниками окрашивания содержимого Вы также научитесь подбирать гармоничные цветое ые схемы для своих страниц. Наконец, узнаете, как применить цветовой градиент к содержимому страницы.
Глава 18 посвящена типографике в веб дизайне Вы узнаете, как настраивать оформление текста, как использовать нестандартные шрифты (например из коллекции Google Fonts) и собственные Кроме того мы поговорим о том, как использовать малые прописные буквы (капитель) и регулировать высоту строк, чтобы их было удобнее читать
В главе 19 представлено несколько расширенных, но жизненно важных концепций CSS Вы узнаете много нового о селекторах CSS, а также познакомитесь с тремя важнейшими приемами CSS: наследованием, каскадированием и специфичностью
В главе 2С представлен четвертый и заключительный проект книги сайт для демонстрации вашего портфолио Создав базовую структуру сайта, вы добавите в портфолио навигацию, изображения, контактную информацию и многое другое.
В приложении рассказывается как разместить веб-код в Интернете. Вы узнаете о различных способах переноса кода из песочницы на ..аш компьютер Далее я расскажу о том, как выбрать хостинг-провайдера и зарегистрировать доменное имя В завершение продемонстрирую, как загружать и проверять файлы.
16
От издательства
О КОДЕ
Поддержать ваше стремление к экспериментам, помимо книги, вам поможет сайт-песочница Web Design Playground (https.// webdesignplayground.ю/2). На нем в специальном окне можно набирать HTML- и CSS-код, а в соседнем окне браузер будет отображать получившийся результат
Кроме того, песочница содержит ссылки на все примеры из книги. которые можно настраивать и запускать по своему усмотрению Чтобы упростить процесс и придать обучению игровую форму, я создал множество упражнений, позволяющих попрактиковаться в изменении представленного кода различными способами Так вы сможете не только усвоить материал, но и увидеть рамки возможного Если вы хотите скачать все файлы примеров из книги, то перейдите в репозиторий на сайте GitHub по адресу https://github.com/paulmcfe/ wdpg2-example-files, нажмите зеленую кнопку Code (Код), а затем выберите пункт Download ZIP (Скачать ZIP-архив).
Разобраться в устройстве сайта-песочницы поможет обширная справочная система, которая описывается в главе 1. Инструкции по переносу кода из песочницы на компьютер приведены в приложении
Полный код примеров из книги можно скачать из репозитория GitHub по адресу https://github.com/paulmcfe/wdpg2-example-files
ОТ ИЗДАТЕЛЬСТВА
Ваши замечания, предложения, вопросы отправляйте по адресу comp(3)piter.com (издательство «Питер», компьютерная редакция)
Мы будем рады узнать заше мнение1
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах
Об авторе
Пол Макфедрис — профессиональный технический писатель За 30 с лишним лет он написал более 100 книг, изданных тиражом свыше А миллионов экземпляров по всему миру Начиная с 1996 года в свободное время Пол верстает веб-страницы Он создал множество сайтов, в том числе персональный (https://paulmcfedries.comj. Word Spy (https://wordspy.com), WeoDev Workshop (https://webdevworkshop.io) и сайт-песочницу для этой книги — Web Design Playground (https:// webdesignplayground.io/2).
Часть I
Основы работы с HTML и CSS
Мы начнем с теории HTML и CSS. В этой части вы познакомитесь с элементами и свойствами данных языков, а также увидите, что можно (и нельзя) делать с помощью этих технологий веб-дизайна Прочитайте главу 1 — небольшую, но крайне важную Затем уже в главе 2 вы создадите свою первую веб-страницу, содержащую отформатированный текст, заголовки и ссылки Далее вы научитесь структурировать страницы (в главе 3) и настраивать шрифты, абзацы и цвета (в главе 4) Наконец, в главе 5 вы обьедините полученные знания, создав проект в виде персональной домашней страницы, которую можно показать всему миру.
Глава 1
Знакомство с HTML и CSS
Щ]
В этой главе
	Основы HTML.
	Основы CSS.
	Комбинирование HTML и CSS в целях создания веб-страниц.
	Знакомство с песочницей Web Design Playground.
Независимо от сложности произведения музыкант, играя, использует комбинации из 12 нот (от «до» до «си» и пять попутоноз между ними). Художник, работая над шедевром, независимо от количества оттенков использует комбинации трех основных цветов (красного, желтого и синего) Поэты, создавая из слов самые проникновенные стихи, используют комбинации доступных букв алфавита. Эти примеры показывают, что для творчества и игр не нужны сложные ресурсы или исходные материалы. Воображение и любопытство в сочетании с несколькими строительными блоками — это все, что вам нужно, чтобы выразите себя практически в любом искусстве, в том числе в дизайне веб-страниц Как вы узнаете из данной главы, да и, впрочем, из зсей книги, HTML и CSS являются такими блоками И хотя этих строительных блоков больше, чем музыкальных нот, основных цветов или даже букв алфавита, их количест во oi раничено. но его более чем достаточно, чтобы позволить вам выразить себя на захватывающем современном холсте - з Интернете.
20
Что такое HTML
ЧТО ТАКОЕ HTML
Самое сложное в HTML. — это его название. HTML расшифровывается как Hypertext Markup Language (язык разметки гипертекста), что звучит примерно так же пугающе, как налоговая проверка Но вы успокоитесь, когда поймете значение всех терминов.
Начну с гипертекста Как вы наверняка знаете, ссылка — это специальное слово либо фраза (или даже изображение) на веб-странице которое «ссылается» на другую веб страницу Когда вы щелкаете кнопкой мыши на такой ссылке или касаетесь ее пальцем, ваш браузер сразу же открывает другую страницу. Люди, которые изобрели Интернет, использовали для обозначения такого специального текста длиннющий термин «гипертекстовая ссылка» (Приставка «гипер» означает «за пределами».) Гипертекстовые ссылки — отличительная черта Всемирной паутины, поэтому страницы часто называют гипертекстовыми документами. Итак, в HTML есть некий гипертекст, и вы используете его для создания гипеотекстовых документов (Хм. этот язык можно было бы назвать WPMl, Web Page Markup Language — язык разметки веб-страниц)
В словаре я нашел следующее определение разметки «подробные стилистические инструкции по оформлению рукописи, которая подлежит верстке» (среди прочею). Исходя из целей текущей главы, я могу перефразировать это определение так- «подробные стилистические инструкции по оформлению текстового документа, который должен быть опубликован во Всемирной паутине». Это и есть краткое описание языка HTML В нем используется несколько простых текстовых кодов — так называемых тегов — для подробного описания таких инструкций, как разделение текста на абзацы создание маркированных списков добавление изображений и (конечно же) оформление ссылок ьы добавляете эти теги в определенных местах обычного текстовою документа, а браузер выполняет всю остальную работу по преобразованию — или отображению - разметки в абзацы, списки, ссылки и т. д. Что происходит, когда вы загружаете текстовый документ в браузере7 Он не показывает теги, а вместо этого оформляет содержимое страницы в соответствии с добавленными вами тегами
Слово «язык» тоже может напугать, поскольку сразу возникает мысль, что HTML — это язык программирования К счастью, HTML не имеет ничего общего с компьютерным программированием Скорее, это «язык» в том смысле, что в нем есть небольшая коллекция «слов», то есть тегов, с помощью которых вы указываете, как должен выглядеть текст, — например, в виде заголовка или нумерованного списка
21
Знакомство с HTML и CSS
Короче говоря, размечать содержимое с помощью Н1М1_-тегов — значит вставлять их в стратегически важные места между фрагментами обычного текста таким образом, чтобы в итоге получилась самая настоящая веб-страница Как бы неожиданно это ни звучало для вас сейчас, к концу работы над книгой вы создадите несколько интересных HTML-проектов.
Возможности HTML
Добавляя HIML-разметку документ, вы, по сути, даете браузеру инструкции как страница должна выглядеть в его окне С помощью HTML-разметки формируется общая структура страницы, и браузер понимает, какой должна быть каждая ее часть. В HTML вы задаете, к примеру, такие инструкции
•	использовать указанную строку текста в качестве основного заголовка страницы.
•	оформить указанные строки текста как подзаголовки,
•	выделить указанный фрагмент текста в отдельный абзац,
•	превратить указанные пять последовательных пунктов з маркированный список;
•	преобразовать указанные шесть последовательных шагов в нумерованный список;
•	превратить указанную фразу в ссылку.
Эти инструкции могут казаться немного абстрактными, поэтому я покажу конкретный пример HTML-разметки.
От обычного текста к HTML: пример
На рис. 11 показан обычный текстовый документ, отображаемый ’ браузере Как видите, за исключением нескольких разрывов строк, браузер выводит массив неотформатированного, неразмеченного текста Его трудно читать и из него очень сложно извлечь смысл, поскольку он никак не дифференцирован
Язык HTML предоставляет средства, позволяющие сделать обычный сплошной текст более читабельным и отобразить его так, чтобы его было легче понять. На рис. 1 2 показан текст с рис. 1.1, но уже с HTML-разметкой
Здесь я использовал заголовки для оформления названия статьи • верхней части и раздела в нижней части Обратите внимание, что
22
Что такое HTML
заголовок раздела отображается шрифтом чуть меньшего размера чем название, благодаря чему понятна структура текста. Кроме того, с помощью HTML я добавил изображение, помогающее привлечь внимание. Чтобы вы поняли, как устроен гипертекст, скрывающийся под буквой Н в названии HTML я оформил два слова в виде ссылок на другие сайты В этой главе вы узнаете, что обычно текст форматируется с помощью CSS, но для простого форматирования можно использовать и HTML, например выделяя текст курсивом, как показано в примере Еще я оформил цитату, которую браузер отображает с отступом от обычного текста, и выделил ее курсивом Наконец, с помощью HTML-разметки я создал маркированный список. Теперь, когда вы увидели возможности HTML, пришло время поговорить об инструкциях для браузера, содержащих указание о том. как должна зыглядеть ваша страница
<-	-> С й webde3ignplayground.io/2/neoiogi3rri3 txt	Ф "fr Л
Row Now Words Are Crested
where do new words come from? sometimes we re lucky enough to know the answer. For example, the word scofflaw originated as a contest winner and Frankenfood cane from a letter to the editor of a newspaper. But for every word with a definite origin, there are hundreds, nay thousands whose beginnings are unknown and probably unknowable. That's because, according to the linguist Victoria Neufeldt, most word invention goes on as a matter of course:
Neology, far from being a separable linguistic phenomenon that manifests itself periodically or sporadically in response to social stimuli, in fact rises out of ordinary linguistic competence, what might be called the linguistic collective unconscious of the speech community.—victoria Neufeldt, linguist
This “ordinary linguistic competence- manifests as various mechanisms that people use to forge new words: Combining, Shortening, Shifting, Borrowing, Onomatopoeia, Mistakes, Retronyms
* я look at these in a hit more detail?
Combining
This process marries a word either with one or sore affixes (a prefix, infix, or suffix) or with another word. Bolting on a prefix or suffix (or both) to an existing word is probably the easiest and most соииоп method for making new words. English has dozens of affixes—anti-, pre-, un-, -able, -ing, -ness, and so on--and most of us know how to wield these to give an existing word a makeover. Getting two existing words to shack up together to croato a compound is also a prolific source of now terms. For example, handshake, is a compound of tha words hand and shake. Finally there's the process called blending, which usually combines the first part of one word with the last part of another word. For example* brunch is a blend of breakfast and lunch.
ShortenIng
Thia process is based sx>atly on a kind of linguistic lasinass called clipping that causes us to lop off great chunks of words. Usually the victims are unstressed syllables or non-primary stress syllables For example, we end up with fridge from refrigerator and flu from Influenza. More commonly, we clip everything after the first syllable: aba, dis, xad, exam, gym, lab, prof, condo, and so un. A relatively new futm of shortening is to clip stressed syllables. For example, phone from telephone, za from pizza, rente from parents, and burger from hamburger.
A related process Is the creation of acronyms, which create a pronounceable word using the first one (or sometimes two) letters of each word in a phrase. For example, UNICEF from United Nations International Children's Emergency Fund, and NATO from North Atlantic Treaty Organization.
If the first letters of the phrase can t be pronounced as a word, then the result is an initialism, such as NHL from National dockey League and NYPD from New York Police Department.
Shifting
One of the things that most vexes language purists and other professional tsk-tskers la when the meaning of a word changes over tiae. For example, it appears that the traditional sense of the word nonplussed, "bewildered and at a loss as to what to think,** is slowly giving way to a new (and opposite) sense: “unfazed." Even experienced writers are using the new sense. For example, here's a snippet from the February 20, 2000 edition
► Рис. 1.1. Браузер может отображать обычные текстовые файлы, но их очень трудно читать
23
Знакомство с HTML и CSS
<- -> С (чР https/iwebdesignpiayground.lo/2/neoiogismsOlhtmi
) О » □ Э 5
How New Words Are Created
Заголовок
КУРСИВ- onRin,,c<*as * contest winner '*_	deiinite origin, there are hundreds.u«
НЫИ ~ because.aeLording to the linguist Victoria
Ссылка	/- Ссылка
—Where do new words come froml^ometitnes we're lucky enough io know the answer. For example, the word >,огПау>-<-' апЛ-raitkenfood came from a letter to the editor of a newspaper But for every word with a 'lousands, whose beginnings are unknown and probably unknowable That’s linguist Victoria Neufeidt (writing in her book A Civil But Unirammeled Tongue) most word
TBKCT Invention goes on as a matter of course:
Neology, far from being a separable linguistic phenomenon that manifests itself periodically or sporadically in response to social stimuli, in fact rises out of ordinary linguistic competence, what might be called the linguistic collective unconscious of the speech community.
This “ordinary linguistic competence" manifests as various mechanisms that people use to forge new words:
Цитата
•	Combining
•	Shortening
•	Shifting
• Borrowing
•	Onomatopoeia
•	Mistakes
*	Retronyms
•	Ex Nihilo
Маркированный список
Let s look at these in a bil more detail.
— Заголовок
Combining
► Рис, 1.2. Благодаря определенным HTML-элементам текст с рис. 11 легче читать и понимать и ь нем проще ориентироваться
ЧТО ТАКОЕ CSS
Одним из первых этапов работ при строительстве дома является возведение фундамента — базовой структуры для пола, стен и крыши. Именно такие основные элементы вы создаете, добавляя HTML-разметку на свою страницу вы указываете, что должно появиться на ней, какими должны быть ее различные элементы (например. заголовок, абзац или список) и в каком порядке их следует отображать
Дом без отделки непригоден для жилья Точно так же и ваш документ не будет современной веб-страницей, если не использовать CSS н качестве такой финишной отделки CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей, и, как и в случае
24
Что такое CSS
с HTML, его название сложнее, чем предназначение. Проясню для вас значение каждого слова хотя в данном случае в целях упрощения буду обращаться к ним не по порядку
Начнем с того, что стиль — это инструкция, выдающая браузеру указание изменить способ отображения какого-либо элемента на странице например слова абзаца или всех экземпляров определенного HTML-элемента. Обычно такие изменения касаются форматиро-рания, например изменения шрифта или цвета текста Но с помощью стилей можно управлять и макетом страницы и даже добавлять анимированные эффекты. Если вы когда -нибудь использовали стили з текстовых редакторах, то уже имеете представление о том каковы 'озможности стилей веб-страниц.
А что такое таблица7 На заре издательского бизнеса компании выпускали руководства, е которых определяли предпочтительное форматирование шрифтов, заголовков, цитат и т д Это форматирование было известно как фирменный стиль, а руководство называлось таблицей стилей. В веб-дизайне таблица стилей выполняет, по сути, те же функции — это набор стилей, которые применяются к конкретной веб-странице.
Теперь перейдем к слову «каскадные» в названии CSS Существуют разные источники стилей. Одни стили поступают от браузера, другие — от пользователя (например, если пользователь настроил свой браузер на использование другого размера шрифта по умолчанию), а третьи — из ваших таблиц стилей Когда эти стили накладываются друг на друга, браузер использует сложный алгоритм, чтобы решить, какой стиль будет применен Этот алгоритм называется каскадом
Таким образом. CSS используется для определения внешнего вида страницы. Вам кажется, что CSS предназначен только для того, чтобы страница выглядела привлекательно7 Это действительно так CSS предлагает инструменты для внесения только стандартных и несущественных изменений. Однако то, как выглядит ваша страница, не менее важно, чем то. что она содержит, поскольку мало кто станет читать текст который отформатирован плохо или бессистемно
Разделение структуры и представления
Пока вы пытаетесь разобраться в различиях между HTML и CSS обращу ваше внимание на ключевую разницу Я немного обобщил, но основная разница в том, что
•	HTML определяет общую структуру i-еб-страницы;
•	CSS определяет ее :изуальное представление.
ВНИМАНИЕ
Принцип каскад-ности, безусловно, самый сложный и запутанный аспект CSS. Я расскажу о нем позже (в главе 19).
25
Знакомство с HTML и CSS
Частично они перекрываются (например. HT ML может влиять на вид страницы, a CSS — на структуру макета), но в целом отвечают каждый за свое HTML — за структуру, CSS — за представление. Это различие нажно учитывать, поскольку, разделяя эти два момента при верстке веб-страницы, легче ее создавать, поддерживать и настраивать
Возможности CSS
Добавляя CSS-сгили в документ, вы сообщаете браузеру, как должны выглядеть определенные элементы. Каждый стиль — своего рода инструкция по форматированию Такие инструкции можно использовать самыми разными способами, как показано в следующих примерах
•	отобразить все ссылки красным текстом,
•	использовать определенный шрифт для всех заголовков
•	добавить дополнительное пространство вокруг абзаца
•	добавить тень к фотографии,
•	использовать строчные римские цифры для всех нумерованных списков;
•	закрепить указанный раздел текста в правой крайней части окна. • повернуть указанный рисунок на 45 градусов.
Приведу наглядный пример, чтобы конкретизирова гь этот список
От структуры к представлению: пример CSS
Ранее в этой главе я взял обычный текстовый документ (см. рис. 1.1) и добавил немного НТML-тегов, чтобы структурировать его и облегчить восприятие информации (см. рис. 1.2). На рис. 13 я применил несколько стилей, чтобы страница выглядела получше.
Приведу краткое описание основных изменений в стиле, которые я внес
•	основной заголовок отображен увеличенным шрифтом, дан малыми прописными буквами и выровнен по центру;
•	к фотографии добавлена тень,
•	обычный текст немного уменьшился;
•	убрано подчеркивание из ссылок,
•	цитата в тексте оформлена более светлым цветом;
•	маркированный список разделен на два столбца;
•	увеличены боковые поля.
26
Чего нельзя делать с помощью HTML и CSS
► Рис. 1-3- Пример веб-страницы с несколькими примененными стилями
ЧЕГО НЕЛЬЗЯ ДЕЛАТЬ
С ПОМОЩЬЮ HTML И CSS
Ранее я упоминал, что HTML не язык программирования. Его довольно просто выучить и использовать на своих веб-страницах, и это хорошая новость Есть и плохая именно потому, что он не является языком программирования, HTML не может выполнять многие операции более высокого уровня. Список таких операций внушителен. Приведу несколько распространенных примеров, с которыми вы вполне можете столкнуться в своей практике’
•	извлекать данные из базы данных на сервере или ином удаленном компьютере,
•	обрабатывать данные, отправленные с помощью веб-формы,
•	управлять учетными записями пользователей, их логинами и паролями;
•	динамически добавлять, скрывать или удалять элементы вебстраницы
27
Знакомство с HTML и CSS
Для выполнения подобных задач требуется язык программирования, такой как JavaScript или РНР, которые не рассматриваются в этой книге
КАК HTML И CSS СОЗДАЮТ ВСЕМИРНУЮ ПАУТИНУ
С Интернетом связано множество удивительных фактов. Приведу один из них. за исключением дополнительных элементов, таких как изображения, видео и звуки, страницы Интернета состоят только из текста Именно так почти все. что вы видите в Сети, было создано из совокупностей букв, цифр и символов, набранных на клавиатуре
Этот Факт вызывает много вопросов, поэтому я немного углублюсь е детали Процесс состоит из следующих этапол (рис. 14).
1 Создание
файлов HTML и CSS
6. Браузер отображает страницу для посетителя
3. Посетитель заходит на вашу страницу
Посе1итель сайта
► Рис. 1м Чтобы превратить HTML- и CSS-код в веб-страницу, вы отправляете его на веб-сервер, а посетители используют свои браузеры для получения и отображения вашего кода на странице
28
Знакомство с песочницей Web Design Playground
ЗНАКОМСТВО С ПЕСОЧНИЦЕЙ WEB DESIGN PLAYGROUND
Думаю, вам не терпится начать экспериментировать с HTML и CSS и увидеть возможности этих удивительных технологий. И это хорошо Одна из основных идей книги заключается в том, что лучший способ выучить HTML и CSS — это весело провести время, экспериментируя с полученными знаниями, пробуя в деле различные теги, свойства и их значения Чтобы помочь вам легко влиться ? процесс, я создал онлайн-песочницу под названием Web Design Playground, показанную на рис 1.5 и доступную по адресу https:// webdesignplayg round, ю/2
С помощью этого сайта можно опробовать HTML-теги и CSS-свойства, загрузить файлы примеров из книги, решить задачи, помогающие изучить тему, получить доступ к различным «наборам» для экспериментов с функциями, сохранить свою работу и даже скачать получившиеся HTML- и CSS-файлы на свой компьютер. Теперь рассмотрим все эти возможности более подробно.
► Рис. 1.5. Песочница позволяет экспериментировать с HTML- и CSS-кодом прямо в браузере
29
Знакомство с HTML и CSS
ПАМЯТКА
Скачать файлы уроков книги по отдельности или целиком можно из репозитория книги на сайте GitHub. https://github.corn/ paulmcfe/wdpg2-example-files
Эксперименты с HTML и CSS
Основная цель песочницы Web Design Playground — предоставить простой в использовании инструмент для экспериментов с HTML-тегами и CSS-свойствами Схема работы выглядит так
1	В песочнице используйте HTML-редактор для ввода HTML-гегон которые хотите опробовать. Если для тега нужно указать атрибуты, не забудьте добавить и их.
2	В редакторе CSS введите определения CSS-свойсти, которые хотите использовать
3	. В окне результатов г.аши HTML и CSS будут отображаться так же, как они выглядели бы в браузере посетителя вашей страницы
4	Повторите шаги 1-3, чтобы исправить нозникшие проблемы или провести дальнейшие эксперименты.
Загрузка файлов урока
В этой книге очень много HTML- и CSS-кода Опыт показывает, что тема усваивается лучше, если набирать примеры вручную (это позволит вам, как я выражаюсь, «пощупать код руками»). Однако я понимаю, что у зас может не хватать времени на набор каждого примера В песочнице Web Design Playground ест ь меню со ссылками на все уроки из книги. Выбрав любой из них. вы увидите введение, дополненное примерами, а затем задания, призванные помочь вам закрепить материал урока. В каждом уроке код загружается автоматически работать с ним вы можете по своему усмотрению
Чтобы загрузить урок выполните следующие действия
1.	В песочнице нажмите кнопку Menu (Меню) в правом верхнем углу сайта Появится меню со ссылками на разделы сайта.
Раздел Book Lessons (Уроки из книги) содержит ссылки на все главы книги
2.	Выберите главу, содержащую нужный урок
3	В появившемся подменю выберите нужный урок Откроется введение к уроку
4	Нажмите кнопку Next page (Следующая страница). HTML-теги и текст примера урока появятся в окне HTML, а CSS-код — в окне CSS.
5.	Нажмите кнопку Next page (Следующая страница) и выполните задания этого урока
6.	Чтобы перейти к другому уроку в той же главе, откройте меню над кнопками Previous page (Предыдущая страница) и Next page (Следующая страница) и выберите нужный урок
30
Знакомство с песочницей Web Design Playground
Сохранение работы
Большую часть времени в песочнице вы будете выполнять упражнения из этой книги и экспериментировать. Время от времени вы будете создавать код, который захотите сохранить. В песочнице вы можете сделать это двумя способами.
•	Скопировать код. Чтобы использог.ать код в другой программе, в окне HTML или CSS выделите код, который хотите скопировать, откройте меню окна (три горизонтальные линии в левом верхнем углу окна редактора), а затем выберите команду Copy to clipboard (Копировать в буфер обмена).
•	Скачать код. На панели инструментов песочницы нажмите кнопку Menu (Меню) и в разделе Playground (Песочница) выберите пункт Download code (Скачать код). Эта команда сохраняет HTML и CSS в виде отдельных файлов, которые в ZIP-архиве загружаются в папку, указанную в настройках браузера
Теперь вы знаете возможности и сферу применения HTML и CSS и способы использования песочницы Web Design Playground. А значит, вы готовы применять ее на практике и разобраться, как работать с HTML-тегами и CSS-свойствами,
Некоторые полезные функции песочницы
Теперь, выяснив, как выглядят HTML-теги и CSS-свойства, нернемся в песочницу и научимся правильно внодить теги и свойства, освоив несколько функций,
•	HTML-теги, а также имена и значения CSS-свойств отображаются другим цветом. Благодаря этому код отличается от обычного текста.
•	Когда в редакторе HTML указатель мыши находится поверх тега, редактор автоматически выделяет и этот тег, и его пару. На рис 1.6 показано, что если навести указатель мыши на открывающий тег <р> элемента абзаца (см. глаау 2), то редактор выделяет данный тег, а также его пару — закрывающий тег </р> Благодаря этому гыделению вы сможете усидеть, что теги закрыты корректно
Меню
HTML
1	В
2	Welcome to the Weo Design Playground
3	/p?
► Рис. 1.6.
В редакторе
HTML песочницы открывающий и закрывающий теги выделяются когда указатель мыши находится поверх одного из них
31
Знакомство с HTML и CSS
•	Аналогичная функция есть и з редакторе CSS когда указатель мыши находится непосредственно слева или справа от скобки, редактор подсвечивает ее, а также связанную с ней скобку Это подсвечивание мгновенно показывает вам, что вы ввели открывающую и закрывающую скобки при определении стиля.
•	Вы можете настроить относительные размеры окон редакторов, перетащив вертикальную границу, разделяющую их
•	Песочница Web Design Playground может выполнять ограниченную проверку ошибок, если вы откроете меню редактора (см рис. 1.6), а затем выберете пункт Display Errors (Показать ошибки). Если редактор обнаружит ошибку, то вы увидите красный индика гор на поле слева от ст роки, в которой возникла проблема Наведя указатель мыши на этот значок, ны увидите сообщение об ошибке Например, если вы забыли указать косую черту (слеш) в закрывающем теге, то увидите сообщение Tag must be paired (рис 1 7).
► Рис, 1.7. Если песочница Web Design Playground обнаруживает проблему, то в поле слева от кода появляется значок ошибки, а пои наведении на него указателя мыши отображается сообщение об ошибке
HTML
1	<р>|	1
2	Welcome to the Weo Design Playground
T_________________________________________
GTag must be paired, missing: [ </p></p> ], oper, tag match failed [	] on line 1.
В закрывающем теге отсутствует слеш
РЕЗЮМЕ
•	HTML расшифровывается как Hypertext Markup Language — язык разметки гипертекста.
•	HTML определяет структуру веб-страницы.
•	CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей.
•	CSS определяет представление веб-страницы.
•	Чтобы ознакомиться с уроками из этой книги и поэкспериментировать с кодом HTML и CSS, вы можете воспользоваться песочницей Web Design Playground https://webdesignplayground.io/2
Глава 2
Создание вашей первой веб-страницы

В этой главе
	Базовая структура и элементы страницы.
	Распространенные элементы и оформление текста.
	Повышение читабельности страницы с помощью заголовков.
	Создание ссылок на другие веб-страницы.
Многие современные технологии, с которыми нам приходится иметь дело, — будь то создание электронных таблиц в Microsoft Excel, ретушь изображений в Adobe Photoshop или сортировка музыкальной коллекции 1 Apple Music — требуют от нас освоения сложных функций, изобилующих настройками и неинтуитивными интерфейсами Поэтому мы с большим удовольствием встречаем такие технологии, как HTML и CSS, не имеющие сложных инструментов, настроек или интерфейсов в которых нужно разбираться По сути, у них вообще нет интерфейсов. Это просто текст — симфония букв, цифр и специальных символов. Они просты, да, но не безыскусны С помощью HTML-тегов и CSS-свойств можно создать веб-страницу, которая будет отражать вашу сущность, демонстрировать ваши творческие способности и позволит вам заявлять всему миру «Да, это сделал яЬ
33
Создание вашей первой веб-страницы
Именно поэтому в главе 1 Est>i изучили основы HTML и CSS а в гла* ве 2 продолжите обучение, создавая свою первую веб-страницу Вы познакомитесь с базовой структурой, общей для всех страниц, а также со всеми стандартными текстовыми элементами, научитесь добавлять заголовки и ссылки Если вам есть что сказать аудитории, то вы узнаете, как это сделать с помощью HTML и CSS.
Урок 2.1. Знакомство с HTML-тегами
Тема: HTML-теги
!=J> Ссылка: wdpg.io/2/2-l-O
ПРАКТИКУМ
Адреса, которые встречаются здесь и на других страницах этой главы, относятся к песочнице Web Design Playground, доступной на сайте данной книги. См. раз дел «Знакомство с песочницей Web Design Playground» главы 1.
профи
В книге я использую слово «элемент» для обозначения HTML-элемента, например р или ет. а слово «тег» — для обозначения элемента и окружающих его у г.з.о -вых скобок, например <р> или <ет>. Большинство HTML-элементов состоят из двух тегов: открываю щего и закрываю щего. Например, элемент р состоит из открывающего тега <р> и закрывающего тега </р>
Разметка HTML, осуществляется с помощью коротких кодов, называемых тегами Каждый тег состоит из таких трех частей, как:
•	открывающая тег левая угловая скобка (<), также известная как знак «меньше»;
•	имя элемента, который необходимо использовать Имена элементов — это копоткие буквенно-цифровые коды например р для абзаца, ет для привлечения внимания к тексту и hl для заюловка первого уровня;
•	закрывающая тег правая угловая скобка (>), также известная как знак «больше»
На рис. 2.1 показан открывающий тег элемента hl
В большинстве случаев Н1 ML-тег сообщает браузеру. что нужно начать компоновку страницы тем или иным образом. Например, если вы добавляете открывающий тег <ет> (от emphasis — «выделение»), то даете браузеру указание выделить следующий за тепом текст курсивом Кроме того, вы должны сообщить браузеру, когда он должен прекратить отображать выделенный текст, поэтому в пару к открывающему вам нужно добавить закрывающий тег. Он выглядит так же. как и открывающий, за исключением того, что перед именем элемента ставится слеш. Закрывающий тег состоит из таких четырех частей, как:
•	открывающая тег левая угловая скобка (<);
•	слеш (/);
•	имя элемента;
•	закрывающая тег правая угловая скобка (>).
На рис. 2.2 показан закрывающий тег элемента hl. Вместе открывающий и закрывающий теги создают элемент — своего рода контейнер, в который вы добавляете текст (или даже другие элементы), браузер отображает текст в соответствии с элементом, который вы указали в тегах На рис 11 в верхней части файла отображается текст How New Words Are Created Чтобы превратить этот текст в название статьи (как показано на рис 1.2), я заключил его в элемент hl,
Угловые скобки д
Имя элемента
► Рис. 2.1.
Структура открывающего iei а HTML-элемента hl
Угловые скобки
</hl>
Z
Слеш
► Рис. 2.2.
Структура закрывающего тега для элемента hl
34
Использование атрибутов HTML-тегов
который отображает текст как заголовок первого уровня. В следующем примере показано как я это сделал
►Пример
(zj> Ссылка: wdpg.io/2/2-l-l
В этом примере элемент hl используется для создания заголовка первого уровня из текста How New Words Are Created.
How New Words Are Created
Текст, преобразованный в загонгок первого уровня с помощью элемента hl
* <hl>How New Words Are Created</hl> *	" Закрывающий тег
Открывающий тег Одрадатываемый текст
Добавив несколько символов, вы даете браузеру указание выполнить с текстом ряд действий
•	заметно выделить текст на фоне остального содержимого,
*	добавить немного пространства над и под текстом:
•	выделить текст полужирным шрифтом
•	увеличить размер шрифта текста, отделив его визуально от обычного текста на странице, чтобы было понятно что это заголовок.
Подробнее о заголовках вы узнаете позже в текущей главе, а пока осознайте как этот обманчиво простой код позволяет совершить с текстом множество действий, не прикладывая особых усилий В этом и заключается магия HTML
ИСПОЛЬЗОВАНИЕ АТРИБУТОВ HTML-ТЕГОВ
Многие HTML-элементы не требуют от вас дополнительных действий: вы добавляете их на страницу, а браузер делает все остальное Однако при работе с некоторыми тегами нужно указать дополнительную информацию, прежде чем браузер сможет правильно их обработать Например, вы используете тег <img>, чтобы вставить изображение на веб-страницу, но при этом вам нужно указать браузеру, где находится сам графический файл Аналогично, чтобы создать ссылку, зы используете тег <а>, и браузеру снова требуется дополнительная информация В этом случае ему нужно знать, на какой файл или ресурс вы хотите сослаться (например, адрес другого сайта)
ПРОФИ
Открывающий и закрывающий теги есть у большинства HTML-элементов, но не у всех. Например, элемент, который используется для добавления на страницу изображения (см. главу 6), не сопровождается закрывающим тегом. Такие теги называются самозакрывающи-мися, а элементы — пустыми, поскольку в некотором смысле они ничего не содержат.
35
Создание вашей первой веб-страницы
ПРАКТИКУМ
В тексте на рис. 1.1 есть не сколько абзацев, состоящих из одного слова, кото рые должны быть заголовками. На пример, строка 13 состоит из слова Combining. Учитывая то, что вы узнали о применении заголовка первого уровня к названию статьи, примените заголовок второго уровня к слову Combining.
сф> Ссылка wdpg.io/2/2-1-4
ПАМЯТКА
Смешивать строчные и про писные буквы в именах элементов и атрибутов HTML допустимо, но я настоятельно советую использовать только строчные буквы. В вебдизайне это река мендуемая практика, поскольку их легче набирать и читать. Кроме того, строчные буквы следует использовать для значений атрибутов, за исключением случаев, когда для конкретного значения требуется прописная буква, например в имени файла или адреса.
Bbi предоставляете эти и другие дополнительные данные браузеру, добавляя к тегу атрибуты Атрибут — это пара «имя — значение», где имя указывает на конкретный атрибут, а значение — на параметр, который вы хотите использовать
Например, когда вы пишете ссылку, вы указываете ее адрес, добавляя атрибут href и устанавливая в его значении адрес, который хотите использовать. На рис 2 3 показан пример
<	a href="https:I/webdesignplayground.io"> ______________________________________>
Значение атрибута	Имя атрибута
►	Рис. 2.3. Можно использовать атрибуты чтобы передать дополнительные данные некоторым HTML-элементам, например атрибут name с адресом ссылки в теге <а>
Здесь атрибуту href (сокращение от hypertext reference — «гипертекстовая ссылка») присвоено значение https://webdesignplayground, io/ — это адрес, по которому перейдет пользователь, если щелкнет на этой ссылке Обратите внимание, что значение атрибута заключено в двойные кавычки Они необязательны, но упрощают чтение и поддержку кода
В сочетании с атрибутами HTML-элементы могут выполнять некоторые полезные действия Но HTML не единственный инструмент для веб-страниц, с которым можно работать. CSS во многом куда эффективнее и интереснее, чем HTML, и вы начнете изучать работу каскадных таблиц стилей в следующем уроке.
Урок 2.2. Знакомство с CSS-свойствами
Тема: CSS-свойства
гф- Ссылка: wdpg.io/2/2-2 О/
CSS состоит из большой коллекции элементен, называемых свойствами Они управляют такими аспектами веб-страницы, как цвет текста, размер шрифта и поля, окружающие объект Каждому свойству вы присваиваете значение, и эта пара «свойство — значение» (также известная как объявление или декларация} является инструкцией. которую выполняет браузер
Определить стиль можно по-разному, о чем мы еще поговорим в главе 7 Пока же я рассмотрю два наиболее распространенных метода На рис. 2 4 показан общий синтаксис первого метода.
Из рис 2.4 видно, что определение стиля состоит из пяти частей. Рассмотрим их по порядку.
•	Ссылка на элемент (-ы) веб-страницы, к которому (-ым) необходимо применить стиль. Такая ссылка называется селектором, поскольку с ее помощью вы выбираете, какие элементы страницы должен стилизовать браузер.
•	Открывающаяся левая фигурная скобка ({).
36
Использование атрибутов HTML-тегов
Элемент веб-страницы, который необходимо стилизовать
Пары «свойство — значение» заключаются в фигурные скобки
selector {
- property!: value!; property2: value2;
}Пэры
«свойство — значение»
► Рис. 2.4. Синтаксис, используемый для определения CSS-свойств
•	Имя свойства, которое необходимо применить Имена свойств представляют собой короткие буквенные коды, например, color — цвет текста font-size — размер текста, margin — размер полей. За именем свойства всегда следует двоеточие (:), а затем пробел, улучшающий читабельность
•	Значение, которое требуется задать свойству, а также единицы измерения, если необходимо. Например, чтобы указать размер шрифта в пикселах добавьте рх к значению За значением всегда следует точка с запятой (;), за исключением последнего значения, где этот знак препинания можно опустить.
•	Закрывающая правая фигурная скобка (}),
Вместе эти пять частей составляют правило стиля. Если вам понадобится обратиться только к набору деклараций внутри фигурных скобок, то можно называть их блоком деклараций. В следующем примере демонстрируется правило стиля, которое я использовал, чтобы настроить размер шрифта основного заголовка (hl), показанного на рис. 1 2 (см главу 1)
^Пример Ссылка: wdpg.io/2/2-2-1
В этом примере каскадные таблицы стилей используются для применения свойства font - size к элементу h 1.
How New Words Are Created
Текст и г поражается шрифтом размером 36 пикселов
Закрывающая скобка
Элемент, который нужно стилизовать, а открывающая сковка
font-size: Зьрх;
Свойство стиля и его значение
<hl>How New Words Are Created</hl>
<
X
37
Создание вашей первой веб-страницы
ПРАКТИКУМ
Как отформатировать заголовки второго уровня веб-ст рани цы, используя размер шрифта 30 пикселов?
Ссылка: wdpg io/2/2-2-2
Правило стиля начинается со ссылки на HTML-элемент hl которая сообщает браузеру, что нужно применить указанное далее форматирование к каждому тегу <hi> на текущей веб странице. После открывающей скобки ({) на следующей строке указывается декларация: -font-size: Збрх;. Эта строка предписывает браузеру отображать все фрагменты текста hl шрифтом размером 36 пикселов. Наконец закрывающая скобка (}) завершает правило стиля
В этом состоит одно из главных преимуществ использования стилей Если на вашей странице множество заголовков hl то данное правило применимо к ним всем, что придает странице единообразный вид А еще если вдруг вы оешите, что заголовки с размером шрифта 48 пикселов будут выглядеть лучше, то вам нужно изменить значение только в одной позиции в правиле стиля, и это изменение автоматически отразится во всех заголовках hl
Обратите внимание, что Bdi не ограничены одним объявлением в правилах стиля. Как видно из следующего примера, при необходимости можно добавить несколько деклараций.
^Пример	Ссылка: wdpg.io/2/2-2-3
В этом примере используется несколько деклараций в одном правиле CSS,
Текст отображается со шрифтом размером 36 пикселов, выравнивается по центру и выводится малыми прописными буквами
LU
СП
Introducing CSS Properties
Эило свойство выравнивает hl	заголовок по центру страницы
font-size: Збрх;
text-align: center; - font-variant: small-caps;
Это свойство отображает заголо-Закрыванзьцая сковка	® малыми пролисними буквами
<hl>How New Words Are Created</hl>
В примере я добавил декларации text-align: center; для выравнивания заголовка по центру и font-variant: small-caps; для отображения заголовка малыми прописными буквами
38
Начало работы над веб-страницей
Ранее я упоминал, что задать стиль вы можете разными способами Например, вставив декларацию непосредственно в HTML-тег с помощью атрибута style.
олемент style=" свойство!: значение!; свойство2: значение2; итд">
Поиведу пример
<hl style="forrt-size: Збрх; tcxt-align: center">
Такой метод позволяет применить стили только к тому HTML-элементу, в котором они объявлены. Подробнее об этом методе я рассказываю в главе 7
Синтаксис CSS немного сложнее HTML, но за этой сложностью кроется огромная мощь и выразительность Как вы увидите по ходу чтения книги использование CSS — самый простой способ создания необычных и интересных веб-страниц. Когда структура HTML дополнена CSS-форматированием, можно создавать прекрасные веб-страницы, которые
приятно читать и по которым приятно перемещаться.
НАЧАЛО РАБОТЫ
НАД ВЕБ-СТРАНИЦЕЙ
Цель книги — научить вас создавать собственные веб-страницы и таким образом помочь получить во владение небольшую недвижимость в киберпространстве главную страницу Однако прежде, чем поселиться в этой скромной обители, необходимо «залить бетон», который послужит фундаментом для остальной части вашего цифрового жилища В текущем разделе я расскажу об элементах HTML, которые составляют базовую структуру всех веб-страниц
Урок 2.3. Создание базовой структуры страницы
Тема: элементы структуры страницы
сф Ссылка: wdpg.io/2/2-З-О
Все ваши проекты веб-страниц, от самой простой страницы до самого сложною корпоративного сайга, начинаются с одной и той же базовой структуры
<!DOCTYPE html>	#1
<html lang="en">	#2
<hcad>	#3
<meta charset-"utf-8">	#4
<titlex/title>	#5
<stylex/style>	#6
</head>	#3
<body>	#7
</body>	#7
</html>	#2
ПРОФИ
В примерах данного раздела я использую четыре пробела для обо значения отступа в декларациях. Этот отступ необязателен, но значительно об легчает чтение CSS-кода, так что стоит взять за привычку делать отступы в декларациях.
ПРАКТИКУМ
Как бы вы отформатировали заголовки второго уровня размером шрифта 30 пикселов и выравниванием по правому краю?
сф Ссылка wdpg.io/2/2-2-4
ПРОФИ
В HTML-коде я ис пользую четыре пробела для обозначения отступа тегов, вклады ваемых в другие теги. Отступы необязательны, но упрощают чтение кода и устранение неполадок, поскольку вы быстро определяете каждую пару открывающих и закрывающих тегов.
39
Создание вашей первой веб-страницы
ПРАКТИКУМ
Можно скопировать и вставить базовую структуру веб-страницы из песочницы Web Design Playground trj> Ссылка: wdpg.io/2/2-3-0
ПАМЯТКА
В песочнице я намеренно скрыл такие элементы, как ! DOC TYPE, html, head, style и body, поскольку (no крайней мере в песочнице) вы не работаете с ними самостоятельно. Когда вы вводите код в окне редактора HTML, песочница добавляет их между тегами <body> и </body> автоматически. Аналогично, когда вы вводите стили в окне редактора CSS, песочница добавляет ил между тегами <style> и </style> самостоятельно.
Данный код может выглядеть непонятно и пугающе Тем не менее этот фундамент необходим и заложен в основу всех веб-стоаниц К счастью, я могу помочь вам, сообщив две хорошие новости
•	Этот код. безусловно, самый сложный из всех, которые вы увидите в текущей главе Так что если вы сможете одолеть следующие несколько абзацев, го понять остальной материал вам будет намного проще.
•	Работая в песочнице Web Design Playground, вы не видите код базовой структуры, показанный выше, поскольку песочница скрывает его и добавляет автоматически.
Структура начинается с тега <! DOCTYPE html> в самом верху (#1). и эта строка имеет техническое предназначение, которое можно смело проигнорировать. Достаточно сказать, что вы должны добавить эту строку, чтобы веб-страница точно отображалась правильно в браузерах посетителей. Следующая часть структуры состоит из открывающег о тега <html> и закрывающего тега </html> (#2). которые вместе составляют общий контейнер html для остальной части страницы с кодом HTML и CSS Тег <htm]> содержит атрибут lang="en", который сообщает браузеру, что основной язык страницы — английский.
Остальная часть структуры разделена на две части' заголовок и тело
Раздел заголовка определяется открывающим тегом <head> и закрывающим тегом </head> (#3) Данный раздел служит вступлением к странице, поскольку браузеры используютегодля получения различней информации о странице. Один из гажных фрагментов данных — набор символов используемый на странице, за что от вечает элемент meta (#4) Кроме того раздел заголовка используется для определения названия страницы (#5), о котором я расскажу чуть позже Самый важный для этой книги открывающий тег <style> и закрывающий тег </style> (#6) — локация, в которой вы вводите определения стилей.
Раздел тела страницы определяется открывающим тегом <body> и закрывающим тегом </body> (#7). и именно в нем вы будете вводить большинство HTML-тегоп Текст и теги, которые вы вводите в теле, отображаются в браузере
Урок 2.4. Добавление заголовка
Тема: тег <title>
Ссылка: wdpg.io/2/2-4-0
Можно подумать, что название страницы — это текст, который появляется в верхней части страницы Но нет в HTML название страницы отображается на вкладке браузера для данной страницы, как показано в следующем примере
Придумывая название для страницы, нужно иметь в виду несколько моментов.
•	Заш HTML-документ должен иметь название, чтобы считаться корректной веб-страницей (см приложение, чтобы узнать, как проверить HTML-код)
40
Начало работы над веб-страницей
•	Убедитесь, что название отражает суть содержимого страницы.
•	Название каждой страницы должно быть уникальным.
•	Длинное название часто обрезается при отображении на небольших вкладках браузера, поэтому поместите в начале названия пару слов, наиболее точно описывающих суть содержимого страницы.
•	Используйте название, которое будет иметь смысл при просмотре страницы вне контекста Пользователь, которому очень понравилась ьаша страница, может добавить ее в закладки То1да браузер будет отображать название страницы в списке закладок, поэтому важно, чтобы оно имело смысл, когда посетитель будет просматривать свои закладки
► Пример IZ> Ссылка: wdpg,iO/2/2-4-0
Текст, который "ы добавляете между тегами <t itle> и </title> раздела заголовка, отображается либо на вкладке браузера, как показано в зтом примере, либо в строке заголовка окна браузера.
ВЕБ-СТРАНИЦА
Заголовок веб-страницы
ту- Neologisms	X +
<- -> С ст hnps://webdesignpiaygroundjo/2/neologisms01 html
How New Words Are Created
c'DOCTYPF html>
<html lang="en">
<head>
<meta charset="utf-8”>
<title>Neologisms</title>
<stylex/sryJe>
</head>
<body>
</body>
</html>
Поместите название страницы между мегами и
41
Создание вашей первой веб-страницы
ВЕБ-СТРАНИЦА
Урок 2.5. Добавление текста
Тема: добавление текста на веб-страницу
Ссылка: vvdpg io/2/2-5 О
Если вы попытаетесь загрузить страницу, содержащую только код базовой структуры, показанный ранее в уроке 2 3, то ничего не увидите в браузере Браузер интерпретирует теги в разделе заголовка страницы, в том числе вывод названия страницы в текущей ^кладке браузера, однако в области содержимого браузера будет пусто там отображаются только элементы и текст, которые вы помещаете между тегами <bcdy> и </body>
В следующем примере я добавил текст Hello HTML World! в тело страницы.
► Пример О Ссылка: wdpg.io/2/2-5-1
Текст, добавленный между тегами (body > и </body >, отображается в окне браузера.
•	Lesson 2.5: Adding Some Text x +
-> c ft webdesignplayground.io/2/lessons/2-5-1/
—-p WEB DESIGN PLAYGROUND
Hello HTML World!
Текст между тегами <body> и </body^>
отображается в области содержимого браузера
<!DOCTYPE html>
<html lang="en">
<head>
cmeta charset="utf-8">
<title>The Web Design Playground</title>
<stylex/style>
</head>
<boay>
Hello HTML World!
</body>
</html>
ГТоМеСИлиитс птексит страница между тегами <body> и </body>
42
Популярные текстовые элементы
АЛ В конце концов, пользователи посеща-' ' ют ваш сайт ради его содержимого. Все остальное — фон.
Якоб Нильсен
Перечислю несколько моментов, касающихся добавления текста на веб-страницу, которые ьы должны знать.
•	Если вы работаете в песочнице Web Design Playground, то помните, что HTML-редактор предполагает, что вводимый вами код должен быть размещен между тегами <body> и </body>, поэтому вводить их не нужно
•	Вы можете подумать, что два пробела или более помогут вам выровнять текст и создать интересные эффекты. Увы, нет, это не сработает Браузеры избавляются от всех лишних пробелов. Почему? Философия Всемирной паутины такова, что для структурирования документа можно использовать только HTML-теги, а для его стилизации — CSS Поэтому ряды из пробелов или пробельных символов, как их еще называют, игнорируются (за некоторыми исключениями; например, см элемент pre в главе 16).
•	Символы табуляции тоже относятся к пробельным символам Можно нажимать клавишу Tab хоть целыми днями, но браузер проигнорирует введенные отступы.
•	А еще браузеры предпочитают игнорировать символы перевода (разрыва) строки. Может показаться интуитивно понятным, что нажатие клавиши Enter/Return начинает новый абзац, но в мире HTML это не так. Подробнее об этом я расскажу чуть позже.
•	Ранее я упоминал что веб-страницы состоят только из тех символов, которые можно набрать на клавиатуре. Значит ли это, что невозможно использовать символы, которых на клавиатуре нет, например символ авторских праг или тире7 К счастью, это не так В HTML есть специальные коды для таких символов, и я рассказываю о них в главе 16
ПОПУЛЯРНЫЕ ТЕКСТОВЫЕ
ЭЛЕМЕНТЫ
Для любой веб-страницы важно отличное содержимое, и, как вы уже видели в этой главе, вы можете начать работу над веб-страницей, набрав небольшой текст. Но содержимое — лишь начало. На рис. 2 5 показан пример веб-страницы, содержащей только текст.
How New Worts Are Created Where do new words come from? Sometimes we’re lucky enough to know the answer. For example, the word scofflaw originated as a contest winner and Frankenfood came from a letter to the editor of a newspaper. But for every word with a definite origin, there are hundreds, nay tnousands whose beginnings are unknown and probably unknowable. Thai's because, according to the linguist Viciona Neufcldt (writing in her book A Civil But Untrammelled Tongue), most word invention goes on as a matter of course Neology, tar from being a separable linguistic phenomenon that manifests itsell penodically or spotadicajy in response to social stimuli, in fact rises out of ordinary linguistic competence. what might be calleo the linguistic collective unconscious of the speech community. This ‘ordinary linguistic competence' manifests as various mechanisms that people use to forge new words.
► Рис. 2.5. E еб-страница, на которой нет ничего, кроме текста
43
Создание вашей первой веб-страницы
Содержимое предшествует дизайну. Ди-' ' зайн без содержимого не дизайн, а художественное оформление.
Джеффри Зелъдман
На рис. 2 5 показана страница, текст которой не украшен HTML-элементами. Да, ее можно прочитать, но принесет ли это удовольствие? Не думаю. Страница в ее нынешнем зиде непривлекательна, поскольку поедставляет собой неструктурированный текст, который трудно читается и выглядит скучно Для сравнения посмотрите на доработанную версию страницы показанную на рис. 2.6.
How New Words Are Created
Where do new words come from? Sometimes we re lucky enough to know the answer. For example, the word suofflaw originated as a contest winner and prarkenfi -id came from a letter to the editor cf a newspaper But for every word with a definite origin, there are hundreds, nay thousands, whose beginnings arc unknown and probably unknowable That's because according to the lingjisi Victoria Neufeldt twining in her book A Civil but Untrammelled Tongue), most word invention goes on as a matter of course
Neology, far from being a separable linguistic phenomenon that manifests itself pcnodically or sporadically in response to social stimuli, in tact rises out of ordinary linguistic competence, what might be called the linguistic collective unconscious ol the speech community.
This "ordinary linguistic competence* manifests as various mechanisms that pcop.e use to forge new words
► Рис. 2.6. -зеб-страница с рис 2.5, на которой добавлены некоторые основные текстовые HTML-элементы
ПРОФИ
Все браузеры сами определяют стили по умолчанию для каждого текстового эле мента, например полужирный для текста, выбеленного элементом strong Однако вам не обязатель но придерживаться только стилей браузера: вы можете дополнить или переопределить стили по умолчанию, используя собственные Эта тема будет подробно рассмотрена в алыее 4.
Так гораздо лучше1 Теперь страница легко чи тается и достаточно приятна на вид. Разница в том, что в этой версии я использовал некоторые базовые текстовые HTML-элементы, чтобы перевести текст в удобочитаемую и понятную форму. Как это сделать, вы узнаете по ходу чтения текущей главы. В следующем уроке вы узнаете, как с помощью HTML-кода пометить важный текст.
Урок 2.6. Выделение важного текста
Тема: элемент strong
izj> Ссылка: wdpg -о/2/2-б-О
На вашей веб-странице может быть слово, фраза или даже целый абзац на которые необходимо обратить внимание посетителя так как они очень важны. Этот текст может содержать важную инструкцию, решающее условие или быть другим важным фрагментом, который должен выделяться из обычного текста, и вам не хочется, чтобы посетитель его пропустил. В HTML вы выделяете текст как важный с помощью элемента strong
<strong?da«HWu meKcm</strong>
Текст между тегами <strong> и </strong> все браузеры отображают полужирным шрифтом В следующем примере показан текст вебстраницы с важным фрагментом выделенным полужирным шрифтом, и HTML-разметка, используемая е- тексте.
44
Популярные текстовые элементы
 (рЫЛСер с^> Ссылка: wdpg.io/2/2-6-1
В этом примере тег <strong> используется для выделения важною фрагмента текста полужирным шрифтом.
Thai's because, according to the linguist Victoria Neufeldt (writing in her book A Civil But Umrammelled Tongue), most word invention goes on as a matter of course
Текст, выделенный с помощью элемента strong
That's because, according to the linguist Victoria Neufeldt (writing in her book Д Civil But Untrammelled Tongue), <strong>most word invention goes on as a matter of course</str>ng>
Тексм, обозначенной с ломощаю мега <strong> как важной
Урок 2.7. Выделение ключевых слов
Тема: элемент b
|_ф Ссылка: wdpg.iO/'2/2-7-(
В некоторых случаях необходимо привлечь внимание к слову или фразе не из-за их важности, а потому, что данный фрагмент отличается от обычного текста Это может быть название продукта, компании или элемент интерфейса, скажем текстовое описание флажка или кнопки Повтооюсь такой текст не несет важную информацию, а просто чем-то отличается, поэтому необходимо выделить его на фоне обычного текста на странице
Описываемым далее элементом выделяется ключевое слово (или фраза). которое следует как-то особо выделить в тексте страницы В HTML5 этот семантический элемент обозначается буквой b кЬжлючевое слово</Ь>
Браузеры отображают текст, указанный между тегами <Ь> и </Ь>. полужирным шрифтом Представляю, как вы сейчас чешете макушку и гадаете  чем разница между элементами strong и Ь, если они оба отооражаются как полужирный текст Хм, справедливое замечание, и я признаю, что разница очень мала Нужно сказать, что она семантическая, поскольку HTML5 использует эти два отдельных элемента для различения важного текста и ключевых слов Надеюсь, в будущем программы экранного доступа и подобные вспомогательные технологии для людей с ограниченными возможностями будут учитывать эту семантическую разницу, чтобы неким образом предупредить посетителя о том что один текст содержит важную информацию, а другой является ключевым словом
ПРАКТИКУМ
Чтобы узнать больше об элелген те strong, выполните упражнения в песочнице Web Design Playground.
Ссылка: wdpgjo/2/2-6-2
45
Создание вашей первой веб-страницы
Далее показан текст веб-страницы с ключевым словом, выделенным полужирным шрифтом а также HTML-разметка используемая в тексте
^Пример с=> Ссылка wdpg.io/2/2-7-1
В этом примере показан текст веб-страницы с несколькими ключевыми словами, выделенными полужирным шрифтом с помощью элемента Ь
<	Текст, выделенный с помощью тега <Ь>
i \
1 he combining process marries a word either with one or more ail ixes m (a prefix, infix, or suffix) or w ith another word.
The <b>combining</b> process marries a word either with one or more affixes (a prefix, infix, or suffix) or with another word.
Ключевое слово, выделенное в тексте с помощью мега <Ь>
ПРАКТИКУМ
Как бы вы разметили текст, чтобы, отформатировать его первое предло жение полужирным шрифтом?
Ссылка;
wdpg.io/2/2-7-2
ЧАВО
В чем разница между элементами strong и ет?
Элелгентом strong выделяется важный Оля посетителя текст, а элементом ет — текст, содержа  щий суть.
Урок 2.8. Акцентирование текста
Тема: элемент ет
Ссылка: wdpg.io/2/2-F' О
Зачастую важно сделать акцент на определенных словах или фразах на странице Так вы сообщаете посетителю, что читать или пооизно-сить выделенный текст нужно, делая на нем дополнительный акцент Рассмотрим следующее предложение.
verdana is a sans-serif type-face.
Теперь прочитайте то же предложение, выделив слово sans (курсивом)
Verdana is a sans-serif typeface.
Суть предложения и манера его произнесения меняются при добавлении курсива (в данном случае с его помощью подчеркивается тот факт, что Verdana - шрифт без засечек).
В HTML5 данный тип семантической разметки осуществляется благодаря использованию элемента ет (для выделения курсивом) <ет>текст</ет>
46
Популярные текстовые элементы
Текст между тегами <ет> и </ет> браузеры отображают курсивом В следующем примере показана веб-страница с таким текстом, а также HTML-разметка, реализующая этот эффект
► Пример 1=> Ссылка wdpg.io/2/2-8-1
В этом примере показан текст веб-страницы, в котором несколько слов выделены с помощью элемента ет.
LO
UJ
But for every word with a definite origin, there are hundreds, nay thousands, whose beginnings are unknown and probably unknowable.
Текст, выделенный с помощью элемента ет
But tor every word with a definite origin, there are hundreds, nay <em>thousands</em>, whose beginnings are unknown and probably unknowable.
Текст, Меленный
с помощью элемента ет
Урок 2.9, Выделение отличающегося текста
Тема: элемент i
сф Ссылка: wdpg.io/2/2-9-0
В публикациях часто требуется размечать слова или фразы таким образом, чтобы передать, что они имеют особое звучание настроение или роль. В качестве примеров такого текста можно привести названия книг и фильмов В HTML5 за этот тип семантической разметки отвечает элемент i (выделение курсиЕ ом):
<1>текст</1>
Браузеры отображают такой текст курсивом. Может показаться, что элемент i — то же самое, что и элемент ет но есть существенная семантическая разница элемент ет добавляет акцент усиливая выразительность текста, тогда как i сообщает посетителю, что текст должен интерпретироваться иначе, чем обычный. Опять же это тонкое различие потенциально полезно с точки зрения доступности: программы экранного доступа (по крайней мере теоретически) выделят в тексте элемент ет и иначе интерпретируют отличающийся текст, оформленный с помощью элемента i В следующем примере показана веб-страница с отличающимся текстом, отображаемым курсивом, а также соответствующая HTML-разметка
ПРАКТИКУМ
Для усиления эффекта можно вложить одни текстовые элементы в другие. Можно выделить предложение как важное с помощью элемента strong, а вну три этого предложения акцентировать внимание на слове с помощью элемента ет.
ez^> Ссылка wdpg.io/2/2-З-З
47
Создание вашей первой веб-страницы
► Пример l_J> Ссылка wdpg.ie/2/2-9-1
, этом примере показан текст веб-страницы, в котором несколько слов выделены с помощью элемента i.
That's because, according to the linguist Victoria Neufeldt Текст,
(writing in her book A Civil But Untrammeled Tongue), / most word invention goes on as a matter of course: * ••
выделенный с помощью элемента i
That's because, according to the linguist Victoria Neufeldt (writing in her book <i>A Civil But Untrammeled Tongue</i>), most word invention goes on as a matter of course:
Тексид, выделенный как омличаннцийся с помощою элемента i
ПРАКТИКУМ
Чтобы познакомиться с элементом i, выполни те упражнения в песочнице Web Design Playground.
Ссылка wdpg.io/2/2-9-2
ПРАКТИКУМ
Чтобы по знакомиться с элементами q и blockquote, выполните упражнения в песочнице Web Design Playground.
Ссылка: wdpg.io/2/2-10-2
Урок 2.10. Оформление цитат
Тема: элементы q и blockquote
Ссылка: wdpg ю/2/2-10-0
Многие веб-страницы содержат цитаты из других источников вебстраниц, книг статей, журналов и т. п. Чтобы посетители отличали цитаты от ваших размышлений, можно поместить текст цитат в двойные кавычки Или как вариант — пометить текст как цитату. Способ разметки зависит от длины цитаты
Короткая цитата может располагаться в строке с обычным текстом страницы Вы можете выделить текст цитаты с помошью элемента q,
<q cite="url">цитатаq>
Большинство браузеров отображают текст, размеченный элементом q, так же. как и обычный текст страницы, но помещенный в двойные кавычки Если цитаза взята с другой веб-страницы, то можно добавить необязательный атрибут cite и в качестве значения присвоить ему URL веб-страницы источника
Для удобства чтения длинные цитазы следует размещать отдельно. Чтобы выделить длинную цитату, используйте элемент blockquote <blockquotc> Длинная цитата </blockquote>
Браузер отображает текст, выделенный элементом blockquote, как отдельный абзац с небольшими полями слева и справа внутри содержащего его элемента, В следующем примере показан текст веб-страницы, содержащий короткую цитату, расположенную в строке с обычным текстом и длинную цитату, размещенную отдельно от обычного текста, а также HTML-разметку.
48
Популярные текстовые элементы
► Пример
i_£> Ссылка, wdpg.io/2/2-10-1
В этом примере показан текст веб-страницы, в котором нескольк, слов выделены с помощью элемента 1.
That's because, according Io the linguist Victoria Neufeldt
(writing in her book A Civil But Untrammelled Tongue),
>кст, размеченный most wor(j invention goes on as a matter of course:
с помощью \ элемента strong
Neology, far from being a separable linguistic
Более длинная цитата, размеченная с помощью элемента blockquote
phenomenon that manifests itself periodically or sporadically in response to social stimuli, in fact rises out of ordinary linguistic competence, what might be called the linguistic collective unconscious of the speech community.
This "ordinary linguistic competence’^ manifests as various mechanisms that people use to forge new words:
Короткая встроенная цитата, размеченная с помощью элемента q
That's because, according to the linguist Victoria Neufeldt (writing in her book <i>A Civil But Untrammelled Tongue</i>), <strong>most word invention goes on as a matter of course</strong>: <blockquote>
Neology, far from being a separable linguistic phenomenon that manifests itself periodically or sporadically in response to social stimuli, in fact rises out >f ordinary linguistic competence, what might be called the linguistic collective unconscious of the speech community. </blockquote>
This <q>ordinary linguistic competence</q> manifests as various mechanisms that people use to forge new words Г
Текст размеченный Текст. размеченный с помощью элемента	как короткая цитата
blockquote как длинная цитата	с помощью элемента q
Урок 2.11. Работа с заголовками
Тема: элементы hl-h6
г^> Ссылка: wdpg.io/2/2-П-О
Заголовок — это слово или фраза, которые отображаются непосредственно перед абзацем текста и используются в качестве его названия или краткого описания содержимого Многие веб-страницы содержат в верхней части основной заголовок или нечто, служащее названием. (Не путайте заголовок с названием страницы, размещаемым между тегами
49
Создание вашей первой веб-страницы
<title> и </title> в теле страницы Заголовки отображаются на самой странице, в то время как название, размеченное с помощью элемента title видно только на вкладке браузера )
Помимо основного заголовка, содержимое многих >-еб-страниц делится на несколько разделов, каждый из которых имеет собственный заголовок. Далее эти разделы могут быть разбиты на подразделы каждый из которых тоже имеет свой заголовок, ит д В совокупности основной заголовок, заголовки разделов и подразделов образуют четкую структуру, в которой прослеживается иерархия содержимого веб-страницы.
Хорошо составленные, продуманные заголовки, расставленные по тексту, играют роль неформального конспекта или содержания страницы.
Стив Круг
В HTML заголовки страницы размечаются с помощью нескольких элементов, начиная с hl для самого высокого уровня иерархии (обычно это основной заголовок или заголоьок первого уровня). h2 — для заголовков разделов, из — для заголовков подразделов и т д вплоть до h6 для заголовков самого низкого уровня Браузер отображает каждый заголовок в отдельной строке, выделяя ею полужирным шрифтом, и (как показано в следующем примере) изменяет размер шрифта в зависимости от используемого элемента: hl — самый крупный a h6 — самый мелкий.
► Пример
ВЕБ-СТРАНИЦА
О Ссылка, wdpg ю/2/2-11-1
В этом примере браузер  ггображает шесть видов заголовка.
Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
<hl>Level 1
<h2>Level 2
<h3>Level 3
<h4>Level 4
<h5>Level 5
<h6>Level 6
Heading</hl> Heading</li2> Heading</h3> Headings/h4>
Heading</h5> Heading</hb>
50
Популярные текстовые элементы
Хотя HTML5 допускает и другие способы семантического разделения содержимого страниц (см главу 11), использование элементов заголовков — простой и распространенный способ сообщить браузеру и посетителю, как организован текст вашей веб-страницы В следующем примере показан заголовок с веб-страницы, которую мы использовали ранее
ПРАКТИКУМ
Допустим, у вас есть статья с названием, основными разделами (Раздел 1, Раздел 2 и т. д.), подразделами (Раздел 1.1, Раздел 1.2 и т. д.) и вложенными подразделами (Раздел 1.1а, Раздел 1.16 и т. д.). Разработай те схему заголовков для такой структуры.
Ссылка: wdpg.iO/2/2-11-3
^Пример Ссылка-wdpg.io/2/2-11-2
В этом примере браузер отображает загол >вок, заданный элементом hl.
How New Words Are Created
Заголовок hl
<hl>How New Words Are Created</hl>
Урок 2.12. Создание ссылок
Тема: элемент а
с^> Ссылка: wdpg.io/2/2-12-0
В главе 1 я упоминал, что одна из определяющих характеристик HTML (скрывающаяся под буквой Н е слове HTML) — гипертекст: ссылки на страницы вашего или любого другого сайта е Интернете На самом деле мало какая страница не содержит хотя бы парочку ссылок поэтому вам нужно знать, как создавать их с помощью HTML.
HTML-теги, которые используются для создания ссылки, — это <а> и соответствующий закрывающий тег </а> Элемент а немного отличается от многих других элементов, с которыми вы познакомились к этой главе. — он используется с атрибутом С его помощью вы указываете адрес вашей ссылки, обычно называемый URL (от Uniform Resource Locator, унифицированный указатель ресурсов) На рис. 2.7 показано как работает элемент а
Атрибут href Текст, который нажимает пользователь
Адрес ссылки Закрывающий тег
I НИМАННЕ!
При вводе URL следует различать приписные и строчные буквы. На большинстве сайтов (но не на всех), введя хотя бы одну букву имени каталога или файла в неправильном регистре, вы, скорее всего, не попасете на желаемый ресурс (то есть получите ошибку 404 Not Found),
► Рис. 2.7. Синтаксис, используемый для ieia <а>
51
Создание вашей первой веб-страницы
ЧАВО
Что означает буква а в имени элемента?
Это сокращение от слова anchor («якорь»}. Суть в там, что молено создавать специ -альные ссылки, называемые якорями, которые отсылают ваших посетителей к другим. раз делам той же веб-страницы, а не к другой странице. Какра ботает эта функция. вы узнаете в главе 16.
Тег <а> принимает атрибут href, содержащий гипертекстовую ссылку Присвойте этому атрибуту URL веб-страницы, на которую вы хотите сослаться, заключив его в двойные (или одинарные) кавычки. Большинство ссылок относятся к одному из двух ^арианто^
• Локальная — ссылка на другую страницу на вашем сайте. Для упрощения я предположу, что все файлы страниц вашего сайта расположены в одном каталоге. (Более сложный случай, когда файлы страниц находятся в разных каталогах, описан в главе 16.) В этом случае значение атрибута href тега <а> — это имя файла страницы, на которую вы ссылаетесь. Например:
<а href="wordplay.html">
* Удаленная — ссылка на страницу на другом сайте В этом случае значение атрибута href тега <а> представляет собой полный URL страницы на другом сайте Например:
<а href="https://webdesignplayground.1о/2/index.php">
Далее вы указываете замещающий описательный текст ссылки по которому пользователь будет переходить, а затем ь конце добавляете закрывающий тег </а>. По умолчанию большинство браузеров ото бражают ссылку в уиде синего подчеркнутого текста, как показано в следующем примере
^Пример гф Ссылка: wdpg.io/2/2-11-2
В этом примере п .казан фрагмент текста веб-страницы с двумя ссылками, созданными с помощью элемента а.
LQ
СП
Where do new words come from? Sometimes we're lucky enough io know the answer. For example, the word scofflaw originated as a contest winner and F rankenfood came from a letter tofthe editor of a newspaper.
Ссылки отображаются в виде синего подчеркнутого текста
Where do new words come from? Sometimes we're lucky enough to know the answer. For example, the word
Тег <д> содержим адрес ссылки
<а href="htrp://www.etymonline.com/index.jjhppterm=scofflaw">scofflaw</a> originated as a contest winner and
Тексм, коморый браузер	Закрывающий мег
омодражаем 6 виде ссылки
<а href="https://wordspy.сот/index.php?word=frankenfood">Frankenfood</a>
came from a letter to the editor of a newspaper.
52
Резюме
РЕЗЮМЕ
•	HTML-тег — это короткий код, окруженный угловыми скобками, например <hl> или <р>, который реализует некий эффект или вставляет объект Болышинстао тегои сопровождаются парой — закрывающим тегом, например </hl> или </р> Вместе два тега, открывающий и закрывающий, образуют элемент, например hl или р.
•	В СSS декларация — это пара «с войство — значение», блок деклараций — это набор деклараций, окруженных фигурными скобками, а правило стиля — это блок деклараций, применяемый к одному или нескольким элементам веб-страницы (например, к имени HTML-элемента)
•	В базовой структуре HTML-страницы раздел заголовка определяется теоми <head> и </head> и содержит название страницы (помещаемое между тегами <title> и </t it 1е>) и ее CSS-код (помещаемый между тегами <style> и </style>)
•	В базовой структуре страницы HTML-элементы и текст добавляются между тегами <body> и </body>
•	Элемент strong используется для выделения важного текста, а элемент b — для обозначения ключевых слов
•	Элемент ет используется для выделения текста курсивом, а элемент i — для форматирования отличающегося текста
•	На странице можно выстроить четкую визуальную иерархию содержимого, воспользовавшись элементами заголовков hl-h6
•	Ссылка из текста создается путем окружения его тегами <а> и </а> В теге <э> указывается атрибут href с именем локального файла или URL удаленного файла.
Глава 3
Добавление структуры на страницу
В этой главе
	Разделение текста страницы па абзацы и разделы.
	Добавление нумерованных списков.
	Создание маркированных списков.
В главе 2 вы узнали, что можно создать эффектную веб-страницу, набрав текст а затем оформив заголовки и добавив такие элементы, как strong и ет, чтобы повысить читабельность текста и улучшить его восприятие Заголовки - важнейшие элементы веб-страницы: они не только помогают посетителю определить, где заканчивается одна часть страницы и начинается друоя, но и формируют общее представление об иерархии страницы Все это относится к теме структуры страницы, о чем мы и поговорим в текущей главе
54
HTML-элементы для структурирования содержимого
Продумывать структуру веб страницы крайне важно, поскольку поток неструктурированного текста трудно не только анализировать и читать, но и оформлять Спроектировав структуру (например, добавив заголовки, как описано п главе 2 а также абзацы, разделы, контейнеры и списки, о которых вы узнаете в этой главе), вы поможете браузеру воспринимать каждую из таких подструктур как отдельный объект, к которому можно применить множество правил стилей. Обычно чем лучше структурирована ваша страница, тем больше вы можете контролировать ее внешний вид Из этой главы вы узнаете, что в HTML есть несколько полезных и простых инструментов структурирования содержимого страницы.
HTML-ЭЛЕМЕНТЫ
ДЛЯ СТРУКТУРИРОВАНИЯ СОДЕРЖИМОГО СТРАНИЦЫ
Работая в текстовом процессоре, почти во всех документах вы видите определенную структуру название, подзаголовок (например), пару заголовков разделов и несколько абзацев текста в каждом из них. Благодаря этому документ легко просматривать и удобно читать, поскольку структура помогает посетителю ориентироваться в содержимом и позволяет сосредоточиться на тексте. Можно получить те же преимущества и на веб-страницах, используя различные структурные HTML-элементы. Начну с одного из самых распространенных из них — абзаца.
Урок 3.1. Работа с абзацами
Тема: элемент р
сф Ссылка: wdpg.io/2/3-l О
В главе 2 я упоминал, что браузеры обычно игнорируют пробельные символы, в том числе символы перевода строки которые создаются путем нажатия клавиши Enter/Return и обычно используются для разделения текста на абзацы в текстовом редакторе/процессоре Наиболее распространенный способ создания абзаца в HTML — поместить тег <р> (от paragraph — «абзац») в начало текста и закрывающий тег </р> в конец. (Технически закрывающий тег </р> необязателен, но рекомендуется ею использовать.) В следующем примере показаны неправильный и правильный способы создания абзацев.
ПРАКТИКУМ
В песочнице измените первые пять строк кода в этим примере так, чтобы фрагменты текста Line 1, Line 2, Line 3 и Line 4 отображались каждый в от дель ном абзаце.
Г=£> Ссылка wdpg.io/2/3-1-2
55
Добавление структуры на страницу
* Пример Ссылка: wdpg.io/2/34-l
В этом примере браузер игнорирует пробельные символы перевод строк, — но с удовольствием преобразует текст в абзацы, когда вы используете элемент р.
Line 1 Line 3 Line 3 Line 4
— Браузер игнорирует
символы перевода строк
ВЕБ-СТРАНИЦА
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Line 1
Line 2
Line 3
Line 4
делит текст на отдельные абзацы
Неправильно: создание отдельных строк путем нажатия клавиши Enter/Return
<p>Paragraph 1</р>
<p>Paragraph 2</р>	Правильно: создание абзацев
<p>Paragraph 3</р>	с помощоН) элемента р
<p>Paragraph 4</р>
Урок 3.2. Добавление разрывов строк
Тема: элемент Ьг
Ссылка: wdpg o/2/3-2-0
Деля текст страницы на абзацы, браузер отображает текст, добавляя (помимо прочего) небольшое пустое пространство между абзацами Обычно оно приемлемо, поскольку вертикальный промежуток наглядно показывает посетителю, где заканчивается один абзац и начинается следующий, а также позволяет отделить один раздел текста от другого Однако этот промежуток иногда не нужен. Например, если на вашей странице опубликовано стихотворение, листинги программ или тексты песен, то вам почти наверняка не нужны абзацы между строками
56
HTML-элементы для структурирования содержимого
Если необходимо начать текст с новой строки не добавляя промежуток между двумя строками, то вам нужен элемент Ьг (от line break — «разрыв строки»), (Если вам нужно добавить вертикалоный промежуток между строками, то используйте элемент р для создания нового абзаца, см. урок 3 1.) Рассмотрим пример
ПРАКТИКУМ
Правильно отформатируйте стихотво рение лорда Альфреда Теннисона Break, break, break, добавив разрывы строк во все строки, не являющиеся концом строфы с^> Ссылка wdpg.io/2/3-2-2
► Пример
сф> Ссылка: wdpg.io/2/3-2-1
В этом примере браузер отображает элемент Ьг, вставляя перевод строки и начиная следующую строку сразу под предыдущей.
Contact Info
Manning Publications Co. 1233 Heartwood Drive Cheny Hill. NJ 08003 support@mannmg.com 203-626-1510
<h3>Contact Info</h3> Manning Publications Co.<br> 1233 Heartwood Drive<br> Cherry Hill, N1 H80(33<br> supportfaimanni ng. com<br> 203-626-151Й
Тег <br> Заеил браузеру указание начато следующий текст с новой строки
Урок 3.3. Разделение текста веб-страницы Тема: элемент div гф> Ссылка: wdpg.io/2/З-З-О
В главе И я познакомлю вас с секционирующими элементами HTML 5, такими как section и article Они позволяют семантически структурировать страницу, помещая в контейнеры разделы и текст в них, а также заголовки, колонтитулы, навигацию и многое другое. Однако в какую-либо из семантических категорий HTML 5 попадает не все содержимое страницы. Для текста, который требуется поместить в контейнер, но для которого не подходит ни один из семантических элементов (в том числе р), з HTML доступен элемент div (от division — «разделение»). Открывающий тег <div> и соответствующий ему закрывающий тег </div> создают простой контейнер для обертывания текста. Браузер не применяет к тексту в контейнере специальное форматирование, в том числе не добавляет промежутки между соседними контейнерами div, как показано в следующем примере.
ПРАКТИКУМ
Элемент Ьг часто используется не правильно для структурирова ния текста стра ницы, поскольку он не формирует контейнер для содержимого и вы не можете назначать ему правила стилей. В песочнице замените элементы Ьг на div.
izj> Ссылка wdpg.io/2/3-3-2
57
Добавление структуры на страницу
► Пример Ссылка wdpg io/2/3-3-1
В этим примере элемент di v используется для разделения веб-страницы на два блока текста.
Shortening
Г The shuntrung process is based mostly on a k nd of lir.giuscc laziness called clipping that causes us to 	J lop oil great chunks of words. For example, we end up witn fridge hum refrigerator and flu from 1	\ influenza. Often we chp everything after the first syllabic: dis (from disrespect) and gym (from
Блоки <div> I
< A related process is the creation of acronyms, which form u pronounceable wonl using, the first letters
1	< of each wore in a phrase for example, UNICET from United Nanons International Childrens
< Emergency Fund, and NATO from Nona Atlantic Treaty Oiganuavon.
<h2>Shortening< /h2>
<div>
The <b>shortening</b> process is based mostly on a kind of linguistic laziness called <b>clipping</b> that causes us to lop off great chunks of words. For example, we end up with <i>fridge</i> from <i>refrigerator</i> and <em>flu</em> from <i>influenza</i>. Often we clip everything after the first syllable: <i>disc/i> (from <i>disrespect</i>) and <i>gym</i> (from <i>gymnasium</i>).
</div>
<div>
A related process is the creation of <b>aci onyms</b’>, which fopm a pronounceable word using the first letters of each word in a phrase. For example, <i>UN!CEF</i> from United Nations International Children's Emergency Fund, and <i>NATO</i> from No^th Atlantic Treaty Organization. </div>
Теги <-div> u <-/div> делят текст
ёеб -страницы на блоки
ПАМЯТКА
Элементы div и р — блочные, поскольку создают контейнер в виде блока, который начинается с новой строки и внутри которого располагается поток со держимого. Л такие элементы, как span, — строч ные, поскольку форми руют контейнер внутри внешнего элемента в потоке остального содержимого этого элемента.
Урок 3.4. Создание строчных контейнеров
Тема: элемент span
Ссылка: wdpg.ii/2/3-4-0
Такие элементы как div и р очень важны они представляют сооой контейнеры, в коюрые можно добавлять текст, а затем форматиро'ать его Но иногда требуется отформатировать лишь фрагмент текста в таком контейнере. Например, изменить шрифт или окрасить несколько слов или предложение В этом случае можно создать строчный контейнер окружив нужный фрагмент тегами <span> и «/span?. Рассмотрим пример
58
HTML-элементы для структурирования содержимого
► Пример Ссылка; wdpgjo/2/3-4-1
В этом примере создается несколько строчных контейнеров, а к элементу span применяется CSS-свойство, добавляющее желтый фон к каждому контейнеру.
Throughoul this document, screen items that you click and text that you type appear with a yellow background. Here arc some examples;
•	Click the File menu and then click Save.
•	Set the number of copies and then click Print.
•	Click Search, type blockquote, and then press Enter.
span {
background-color: yellow; }
Дает браузеру указание применить желилый цвет фона ко всем элементам span
<Р>
Throughout this document, screen items that you click and text that you type appear with a <span>yellow background</span>. Here are some examples:
</p>
<ul>
<li>Click the <span>File</span> menu and then click
<span>Save</span>.</li>
<li>Set the number of copies and then click
<span>Print«/span>.</li>
<li>Click <span>Search</span>, type <span>blockquote</span>, and then press <span>Enterc/span>.</li>
</ul>
Теги <span> и </span> формируют
строчные контейнеры
Урок 3.5. Добавление визуального разрыва между блоками
Тема: элемент hr
с£> Ссылка: wdpg.io/2/3-5-0
Как я уже говорил, элемент р автоматически добавляет промежутки между абзацами, а в случае других блочных элементов типа div можно использовать CSS для создания отдельного вертикального промежутка между блоками. Но иногда нужен более надежный или ярко выраженный способ
59
Добавление структуры на страницу
ПРАКТИКУМ
Чтобы попрактиковаться с элементом span, выполните упражнения в песочнице Web Design Playground.
Ссылка: wdpg.io/2/3-4-2
визуального разрыва между блоками. В этом случае можно использовать элемент hr (от horizontal rule — «горизонтальная линия») Как видно из следующего примера, браузер отображает горизонтальную линию по всей ширине страницы. Если вы не хотите, чтобы линия занимала всю ширину контейнера, можно использовать CSS-свойство wi dth и указать желаемую ширину (скажем в пикселах или процентах).
► Пример О Ссылка: wdpg.io/2/3-5-1
При добавлении элемента hr браузер отображает горизонтальную линию по всей ширине страницы.
Word Origins: Introduction
In a cynical world where attention spans arc 110 character? long and where much of the populace is obsessed with the low-brow goings-on of Kim or Miley or Kylie, one amazing fact rises above the muck, it's rare to meet someone who isn’t m some way interested in words and language From slang-slinging youngsters to crossword-solving oldsters, from inveterate punsters to intrepid neoiogists. some aspect ot language appeals to everyone.
-------►
'	Is mcic one slice of the language pic that every one tikes? Probably not. People air just too
Ter <hr> создает complex to tike any one thing unisctsally. However, m my own admittedly limited горизонтальную experience (I haven't met every person in the world), I have yet to come across a person who пинию	docsn i appreciate a good story about the origins of a word or phrase
<h2>Word Origins: Introduction</h2>
<div>
In a cynical world where attention spans are 14D-characters long and where much of the populace is obsessed with the lowbrow goings-rn of Kim or Miley or Kylie, one amazing fact rises above the muck: it's rare to meet someone who isn't in some way interested in words and language. From slang-slinging youngsters to crossword-solving oldsters, from inveterate punsters to intrepid neologists, some aspect of language appeals to everyone.
</div>	Тег <hr> добавляет горизонтальную
<hr>	линию между двумя блоками текста
<div>
Is there one slice of the language pie that everyone likes? Probably not. People are just too complex to like any one thing universally. However, in my own admittedly limited experience (1 haven't met every person in the world), I have yet to come across a person who doesn't appreciate a good story about the origins of a word or phrase. </div>
60
Нумерованные и маркированные списки
Многие гуру веб-дизайна рекомендуют иначе добавлять горизонтальную линию между двумя блоками не использовать элемент hr а добавить нижнюю границу к верхнему блоку содержимого или, наоборот, верхнюю границу к нижнему блоку. Подробнее такой метод форматирования границ описан в главе 9
НУМЕРОВАННЫЕ
И МАРКИРОВАННЫЕ СПИСКИ
В наши дни. бороздя просторы Интернета, сложно не наткнуться на список. Это может быть топ-10 хитов, список лучших фильмов, краткое описание концерта и многое другое Список зачастую идеальный вариант для отображения определенных типов информации, например последовательности шагов или неупорядоченной коллекции элементов.
С помощью HTML можно создать списки двух типов
•	Нумерованный (или упорядоченный) — в нем элементы приведены по очереди, с порядковым номером каждого элемента слева и текстом элемента с отступом справа.
•	Маркированный (или неупорядоченный) — содержит элементы в указанном порядке, при этом каждый элемент предваряется маркером (обычно маленький кружок), а текст элемента дается с отступом справа
ПАМЯТКА
Такой вариант списка используется гораздо реже, чем нумерованные и маркированные списки, но вы должны уметь создавать список терминов и описаний. Весь список заключается в теги <dl> и </dl> контейнера; затем вы оборачиваете каждый термин тегами <dt> и </dt>. а каждое описание — тегами <dd> и</dd>
Урок 3.6. Добавление нумерованного списка
Тема: элемент о!
I—J> Ссылка: wdpg Ю/2/3-6-0
Если список, который необходимо отобразить на странице, можно пронумеровать, как, например шаги решения задачи или последовательность действий, то вам подойдет нумерованный список. При этом вам не нужно Е'нодить числа самостоятельно поскольку браузер отобразит их автоматически Первому элементу списка присваивается номер 1, второму — 2 и т д Если вы в дальнейшем добавите или удалите элементы, то браузер автоматически скорректирует числа всех элементов списка, чтобы сохранить нумерацию
Разметка нумерованного списка начинается с создания контейнера состоящего из открывающего тега <о1 > (от ordered list — «упорядоченный список») и закрывающего тега </о1> Между ними добавляется элемент 11 (один или несколько), начинающийся с тега <И> (от list item — «элемент списка»), за которым следует текст элемента и (необязательный, но рекомендуемый) закрывающий тег </li>
<11 >Текст элемениа</И>
61
Добавление структуры на страницу
ПРАКТИКУМ
Чтобы попрактиковаться с элементами о1 и 11, выполните упражнения в пе сочнице.
Ссылка.
wdpg.io/2/3-6-2
Браузер отображает номер элемента списка слева (значение которого определяется позицией элемента в списке), затем следует текст элемента с отступом от номера, а сам пункт списка с номером отступает от левого поля элемента, в котором содержится. В следующем примере показан базовый нумерованный список а также HTML-разметка, и текст, используемые для его создания
По умолчанию в списке используются обычные десятичные числа (1, 2, 3 и т д) Тип нумерации можно изменить, настроив CSS-свойство lisc-style-type. В табл 31 перечислены наиболее распространенные значения этою свойства для изменения типа нумерации
► Прилсер Ссылка-Wdpg.io/2/3-6-1
В этом примере показано, как использовать нумерованный список для создания списка из десяти самых популярных слов.
Тор 10 Modern Words of Unknow n Origin
I .Jazz (1909)
2. jive (1928)
3.bozu(1920j
4	dorl-(1964)
5	pizzazz (19.37)
6	humungous (1970)
7.	gismo (1943)
8.	zi! (19661
9.	reggue (1968)
10.	mosh (1987)
<h3>Top 10 Modern Words of Unknown Origin</h3>
<ol>
<lixem>3azz</em> (1909)</li>
<lixem>jive</em> (1928)</li>
<lixem>bozo</em> (1920)</li>
<lixem>dork</em> (1964)</li>
<lixem>pizzazz</em> (1937)</li>
<lixem>humongous</em> (1970)</li>
<lixem>gismo</em> (1943)</li>
<lixem>zit</em> (1966)</li>
<lixem>reggae<./em> (1968)</li>
<lixem>nosh</em> (1987)</li>
</ol>
3 конмейнере укажите текст каждого пункта списка между мегами <Н> и </li>
Исмлозуйме меги <ol> и </ol> для добавления нумерованного списка 6 конмейнер
62
Нумерованные и маркированные списки
к Таблица 3.1. Распространенные значения CSS-свойства Ust-style-type для оформления нумерованных списков			ИНФОРМАЦИЯ Многие значения свойства list-style-type используют
Значение	Описание	Примеры чисел	
decimal	Десятичные числа	1,2,3,4...	СИМвОЛЫ НуМС рации из других
decimal-leading-zero	Десятичные числа с предшествующим 0	01 02,03,04	языков, таких как китайский,
lower-alpha	Строчные латинские буквы	а, Ь, с, d	иврит и японский. Полный список
upper-alpha	Прописные латинские буквы	А,В,С, D.	см. на сайте https ://developer
lower-roman	Строчные римские цифры	i, ii,iii, iv...	mozilla.org/en-US/ docs/Web/CSS/list-
upper-roman	Прописные римские цифры	1,11,111, IV..	style-type
lower-greek	Строчные греческие буквы	а. р,у,6...	
upper-greek	Прописные греческие буквы	А, В, Г, А..	
Урок 3. Добавление маркированного списка
Тема: элемент ul
сф Ссылка: wapg.19/2/3-7-0
Если элементы, которые необходимо отобразить в виде списка, не имеют нумерации например пункты в списке задач или подборке характеристик, то вам подойдет маркированный список Каждый элемент отображается на новой строке, и ему предшествует маркер (обычно это черный кружок (•)). Вам не нужно вводить маркеры вручную, поскольку браузер добавляет их автоматически
Разметка маркированного списка начинается с создания контейнера, состоящего из открывающего тега <ul> (от unordered list — «неупорядоченный список») и закрывающего </ul> Между ними, как и t нумерованном списке, вы добавляете нужное количество тегов <11>, затем текст элементов и (необязательный, но рекомендуемый) закрывающий тег </li>
<11>Текст элементен/11 >
Браузер отображает элемент с маркером слева, за которым после отступа следует текст элемента, а весь элемент списка отступает от левого поля элемента, в котором он содержится В следующем примере показаны базовый маркированный список и лежащие в его основе HTML-разметка и текст.
63
Добавление структуры на страницу
► Пример
Ссылка; wdpc ю/2/3-7'1
В этом примере показано, как создать маркированный список.
This "oidinary linguistic competence" manifests as various mechanisms that people use to forge new words:
•	Combining
•	Shoncnmg
•	Shifting
•	Burrow ing
•	Onomatopoeia
•	Mistakes
•	Retronjms
•	Ex Nihilo
<p>This <q>ordinary linguistic competence</q> manifests as various mechanisms that people use to forge new words:</p> <ul?
<li>Combining</li>
<li>Shortening</li>
<li>Shifting</li>
<li>Borrowing<./li>
<li>Onomatopoeia</li>
<li>Mistakes</li>
<li>Retronyms</li>
<li>Ex Nihilo</li>
0 контейнере заключите текст каждого элемента в теги <И> и </Н>
</и!>
Используйте теги <и(> и </и!> для создания контейнера, 6 котором будет находиться маркированный список
По умолчанию маркеры неупорядоченного списка выглядят так’ • Вы можете изменить тип маркера с помощью CSS-свойства list-styletype В табл. 3.2 перечислены доступные значения этого свойства для оформления маркированною списка
ПРАКТИКУМ
Чтобы попрактиковаться с элементами ul и 11, выполните упражнения в песочнице Web Design Playground. с£> Ссылка: wdpg.io/2/3-7-2
► Таблица 3.2. Значения свойства list-styie-type для маркированных списков
Значение	Описание	Вид маркера
disc	Закрашенный кружок	•
circle	Незакрашенный кружок	С
square	Закрашенный квадрат	
64
Резюме
РЕЗЮМЕ
•	Чтобы структурировать текст страницы и разделить его на абзацы, используется элемент р.
•	Чтобы отделить одну строку от другой, используется элемент Ьг добавляющий разрыв строки
•	С помощью элемента div можно разделить содержимое страницы на текстовые блоки
•	Строчный контейнер для текста создается с помощью тегов <$рап> и </span>.
•	Элемент hr используется для разделения блоков текста с помощью горизонтальной линии
•	Элемент о! используется для создания нумерованного списка, а элемент ul — для маркированного Н обоих случаях для разметки каждого элемента списка предназначен тег <li>
Глава 4
Форматирование веб-страницы
©
В этой главе
	Настройка шрифта, размера и оформления текста.
	Выравнивание и отступы абзацев.
	Окрашивание текста и фона.
Теперь вы умеете выделять важный и ключевой текст, создана гь ссылки и заголовки, собирать элементы в маркированные и нумерованные списки И хотя эти важные приемы позволяют придать вашей вебстранице визуально интересный ?ид, они вряд ли привлекут посетителей на ваш сайт Чтобы люди обратили внимание на ^ашу страницу, вам нужно сосредоточиться на каскадных таблицах стилей, чем _ы и займетесь в этой главе
66
Работа со шрифтами
Пер 'ым делом вы узнаете о нескольких способах форматирования текста на веб-странице, в том числе о выборе шрифтов и настройке их размеров. Вы научитесь применять полужирное и курсивное начертание к любому тексту. От форматирования слов и предложений вы перейдете к абзацам — узнаете, как выравнивать текст по горизонтали и делать отступы в абзацах В конце главы вы прочтете, как с помощью CSS окрашивать в разные цвета текст и фон страницы.
Такие базовые техники управления CSS просты в изучении и применении, но не недооценивайте их. Это мощные инструменты, которые вы будете использовать снова и снова, чтобы придать вашим страницам великолепный вид и индивидуальность А бонусом будет множество посетителей вашего сайта.
РАБОТА СО ШРИФТАМИ
В каждом браузере используются собственные настройки стилей текста по умолчанию, например заголовков и абзацев За исключением некоторых различий, в целом эти стили отображаются одинаково в Google Chrome, Mozilla Firefox, Apple Safari и прочих браузерах. Стили по умолчанию прекрасны, но если вы не настроите их под себя, то игаша веб-страница потеряет уникальность. С точки зрения дизайнера веб-страниц, одна из важнейших задач — переопределить такие стили по умолчанию и задать собственное форматирование текста
Веб-типографика — обширная увлекательная тема, которую я подробно рассматриваю в главе 18 Пока же упростим задачу и сосредоточимся на четырех наиболее важных аспектах форматирования текста, гарнитуре и размере шрифта, полужирном и курсивном начертании.
Гарнитуры шрифтов
Гарнитуры — это наборы шрифтов схожих по виду оформлений букв, цифр и символов F чем разница между гарнитурой и шрифтом? Б большинстве случаев эти два термина взаимозаменяемы. Если углубляться в терминологию, то шрифт — это конкретная реализация гарнитуры, то есть гарнитура с определенным размером, весом и стилем К примеру, Helvetica — это гарнитура, a Helvetica 16 bold — шрифт.
Дизайн гарнитуры определяет форму и толщину линий каждого символа, которые уникальны для данного шрифта и трудно поддаются классификации. Различать большинство гарнитур, с которыми вы столкнетесь в своей карьере веб-дизайнера, вам помогут пять основных категорий.
67
Форматирование веб-страницы
Гарнитуры с засечками (р том числе брусковые) (serif) Имеют тонкие tioi юречные штрихи (так называемые ножки) на концах каждого символа Эти штрихи (засечки) придают тексту традиционный вид, но могут быть не видны при отображении на экране небольшого размера
Гарнитуры без засечек также называемые рублеными (sans-serif). Не содержат поперечных штрихов на концах символов Текст, набранный таким шрифтом, обыч1 ю имеет современный вид, который хорошо подходит для экоанов устройств, особенно малых размеров
Моноширинные гарнитуры (также называемые непропорциональными) (monospace) Каждый символ в них имеет одинаковую ширину, поэтому гонкие буквы, такие как i и /, занимают столько же места, сколько и более широкие, такие как т и w
Рукописные гарнитуры (cursive) созданы для имитации рукописного текста, начертанного пером или кистью
Фэнтезийные гарнитуры (fantasy) обычно содержат при чудливые шрифты с искаженными элементами символов (например, чрезвычайно толстыми)
Playground
Playground
Playground
Playground
Playground
В CSS с помощью свойства font-family вы даете браузеру указание, какую гарнитуру следует применить к элементу. Существует несколько способов задать значение font-family, и для начала мы рассмотрим наипростейший метод
Урок 4.1. Выбор основного шрифта
Тема: свойство font-family и основные шрифты сф Ссылка: wdpq.io/2/4 1-0
Распространенный способ применения свойства font-family — выбор основного шрифта, который стандартно используется всеми совоеменными браузерами Существует пять семейств основных шрифтов, названия которых соответствуют пяти категориям гарнитур, рассмотренным в предыдущем оазделе serif, sans-serif, monospace cursive и fantasy. В следующем примере показана настройка свойства font-family
68
Работа со шрифтами
I» Пример 1=> Ссылка: wdpg 10/2/4-1-1
В этом примере показано, как с помощью свойства f ont -f amily применить основной шрифт sans-serif к элементу ИЗ и основной шрифт serif к элементу р.
Элемент h3
The Web Design Playground
Элемент p
Why work towards weh design proficiency when you can play your way there?
h3 {
f ont-f ami]y: sans-serif; }
.——Элементу йз назначается основной шрифт дез засечек
Р {
font-family: serif;
}
—	" Элементу р назначается основной
шрифт с засечками
<h3>The Ueb Design Playground</h3>
<p>Why work towards web design proficiency when you can play your way there?</p>
Поеимущество основных шрифтов в том. что их поддерживают все современные браузеры, но пять семейств шрифтов дают лишь небольшое разнообразие Если необходимо варьировать вид текста на веб-странице, то нужно обратиться к друг им методам выбора шрифтов
Урок 4.2. Настройка системного шрифта
Тема: свойство font-family и системные шрифт!я
Ссылка: wdpg.Ю/2/4-2-С
Помимо основных шрифтов, по умолчанию поддерживаемых всеми браузерами, можно задействовать шрифты, установленные на компьютерах посетителей сайта Например, на большинстве компьютеров установлен шрифт с засечками Times New Roman, поэтому вы можете отформатировать текст на своей веб-странице, используя его вместо стандартного шрифта с засечками. Такие предустановленные шрифты называются системными
ПАМЯТКА
Заключать имена системных шриф тов в кавычки и выделять прописной первую букву каждого слова не обязательно, но рекомендуется, так как повышается читабельность кода.
69
Форматирование веб-страницы
ИНФОРМАЦИЯ
Статистику использования большинства популярных системных шрифтов можно узнать на сайте www.cssfontstack.com.
ПАМЯТКА
Некоторые системные шрифты установлены не менее чем на 90 % компьютеров nod управлением операционных систем macOS и Windows. Что касается шрифтов без засечек, то это Arial, Arial Black, Tahoma. Trebuchet MS и Verdana. Среди шрифтов с засечками стоит выделить Georgia и Times New Roman. Распространен и моноширинный шрифт Courier New
Используя системный шрифт, следует помнить о двух моментах
•	Если в имени шрифта есть пробелы, цифры или знаки препинания, кроме дефиса (-), заключите имя н кавычки
font-family: "Times New Roman";
•	Чтобы улучшить читабельность кода, начинайте каждое слово в имени шрифта с прописной буквы
font-family: Georgia;
Обратите внимание, что можно — и рекомендуется — указывать несколько имен шрифта, разделяя их запятыми. В таком случае браузер ищет шрифты в порядке их указания и использует первый найденный на компьютере пользователя Такой метод рекомендуем, поскольку вы не знаете, какие системные шрифт ы установлены у каждого посетителя ^.ашей страницы Б частности, рекомендуется после системного шрифта указывать схожее по ииду стандартное семейство шрифтов Так, если вы хотите использовать системный шрифт с засечками, например Times New Roman или Georgia (или оба), то добавьте стандартный шрифт с засечками в конец значения свойства font-family font-family: "Times New Roman", Georgia, serif;
В приведенном ниже примере системный шрифт Verdana применяется к элементу div, который (как мы выяснили в главе 2) используется для разбиения содержимого веб-страницы на разделы
^Пример
Ссылка, wdpg.io/2/4-2-1
В этом примере к элементу div применены системный шрифт Verdana и стандартный шрифт без засечек в качестве резервного.
The clean, modern look of a sans serif typeface makes it ideal for web page text.
Элемент div
div {
font-family: Verdana, sans-serif; }
Элемент div форматируется с немощью системного шрифта Verdana
<div>
The clean, modern look of a sans serif typeface makes it ideal for web page text.
</div>
70
Работа со шрифтами
Урок 4.3. Изменение размера шрифта
Тема: свойство font-size
cj> Ссылка: wdpg.io/2/4-З О
Браузер определяет по умолчанию для каждого элемента не только гарнитуру. но и размеры шрифта например для элементов заголовков hl (самый крупный) — h6 (самый мелкий). Конечно, настройки по умолчанию будут вполне уместны в большинстве случаев, но я прошу вас не ограничивать себя в творчестве и настроить собственные размеры шрифта Зачем’ Один из секретов хорошего веб-дизайна — контроль каждого аспекта. Только благодаря этому можно с уверенностью сказать, что вебстраница выглядит ожидаемым для вас или вашего клиента образом Одна из главных задач дизайнера веб-страниц — настраивать размер шрифта не только заголовков, но и всех прочих текстовых элементов страницы, в том числе основного текста, подрисуночных подписей, боковых панелей и навигационных меток.
Размер шрифта элемента настраивается с помощью свойства fontsize, принимающего значение f пикселах, которое обозначается единицей рх 3 приведенном ниже примере браузеру предписывается отобразить текст внутри элемента div шрифтом размером 24 пиксела Для сравнения в примере также показан текст и элементе р с размером шрифта по умолчанию который во всех современных браузерах составляет 16 пикселов
ПАМЯТКА
Размеры шрифтов можно задавать не только в пикселах. В главе 7 я расскажу обо всех возмож ных еоиниуах измерения CSS.
^Пример l=t> Ссылка: wdpg.io/2/4-3-1
В этом примере к элементу div применяется стиль, задающий тексту размер шрифта 24 пиксела.
Элементы
From Milan to Markup <
<
< The strange-but-true story of one woman's epic journey from fashion designer to web geek.
из	c	*“	~ Элемент div
LU
ZU
Hyperia Marcupala always loved design, but one day she discovered she <1 rather work with pixels than pleats.	4-,.
Элемент p
div {
font-size: 24px;
Элементу dt'v назначен размер шрисрта 24px
71
Форматирование веб-страницы
<hl>From Milan to Markup</hl>
<div>
The strange-but-true story of one woman's epic journey from fashion designer to web geek.
</div>
<P>
Hyperia Marcupala always loved design, but one day she discovered she'd rather work with pixels than pleats. </p>
РЕКОМЕНДАЦИЯ
ФОРМАТИРОВАНИЕ ТЕКСТА
Определившись с гарнитурой и настроив размеры шрифтов текстовых элементов страницы, вы прочно встали на путь создания веб-страниц, типографически приятных глазу Но, чтобы ваши страницы выделялись из миллионов других, вам нужно узнать о еще двух CSS-свойствах, касающихся форматирования текста В ближайших двух уроках мы их и рассмотрим
ВНИМАНИЕ’
Значения из табл. 4 1 применимы не ко всем шрифтам и не во всех системах. Если выбранный шрифт не поддерживает указанное вами значение веса, то эффект не будет заметен на странице.
Урок 4-4. Изменение толщины (веса) шрифта
Тема: свойство font-weight
Ссылка: wdpg.io/2/4-4-0
В главе 2 вы научились оформлять текст полужирным шрифтом с помощью элементов strong и b Вы используете их для «смыслового» форматирования' strung выделяет важный текст а b — ключевые слова Если же ваш текст не подходит ни под одну из этих семантических категорий, но вы все равно хотите изменить начертание его шрифта, например на полужирное, то можно обратиться к CSS-свойству font-weight В табл. 4.1 перечислены значения (и ключевые слова), которые можно задать этому свойству
► Таблица 4.1. Допустимые значения свойства font-weight
Вес	Ключевое слово	Описание
100		Тонкое начертание
200		Сверхсветлое начертание
72
Форматирование текста
Вес	Ключевое слово	Описание
30И		Светлое начертание
40Р	normal	Нормальное начертание
500		Среднее начертание
600		Полужирное начертание
700	bold	Жирное начертание
800		Скерхжирное начертание
900		Черное начертание
В следующем примере показан отформатированный текст нескольких элементов span с весом шрифта 100 асу и 700 (Как мы изучили в главе 2. элемент span используется для создания строчных контейнеров применяемых к одному/нескольким словам)
ЧАВО
Когда используется значение normal (400)?
Допустим, при форматировании элемента, кото рый по умолчанию отображается с полужирным начертанием, на-пример заголовка. Чтобы отменить полужирное начертание такого элемента, задайте его свойству font* weight значение normal (или40(р
► Пример
Ссылка: wdpg.io/2/4-4-1
Г этом примере демонстрируется эффект изменения веса (100,400 и 700) шрифта Calibn нескольких элементов span.
=г
ААА
\ \ \
ТОО 400 700
span {
font-family: Calibri, sans-serif; font-size: 5em;
}
<span style="font-weight: 100">A</span>
<span style="font-weight: 400">A</span> sspan style="font-weight: 70e">A</span>
С ммощою элемента span к букве A применены различные веса мрифта
73
Форматирование веб-страницы
Урок 4.5. Форматирование текста курсивом
Тема: свойство font-style
Ссылка: wdpg.io/2/4-5f'
Как говорилось в главе 2, текст можно отформатировать курсивом семантически, используя элемент ет, когда нужно акцентировать внимание на тексте, или элемент i, чтобы отформатировать отличающийся текст Если же текст не следует выделять семантически, но нужно отобразить курсивом, используйте CSS-свойство font-style со значением italic Рассмотрим пример
► Пример
zzj> Ссылка wdpg ю/2/4-5-1
В этом примере к элементу span применено курсивное начертание шрифта.
В примере их два: span, вложенный .. элемент hl, и span в начале элемента div.
БЕБ-СТРАНИЦА
Italic Text: A History
The first use of italics came in 1500 when Aldus Manutius of the Aldine Press wanted a typeface that resembled the handwritten humanist script that was then in common use He asked his typecutter Francesco Griflo to make the typeface, which Manutius first used in the frontispiece of a book of the letters of Catherine of Siena. He produced the first book set enrireb in italics the next year.
body {
font-family: Georgia, serif;
}
span {
font-style: italic; } div {
font-size: 1.25em;
Эле/иенм span отформатирован с помощью курсивного начертания
<hl>Italic Text: cspan^A History</spanx/hl> —-------------------------------------- z элгменилд span
<div>	' Второй экземпляр элемента span
<span>The first use of italics came in 1500</span> when Aldus Manutius of the Aldine Press wanted a typeface that resembled the handwritten humanist script that was then in common use. He asked his typecutter Francesco Griffo to make the typeface, which Manutius first used in the frontispiece of a beak of the letters of Catherine of Siena. He produced the first book set entirely in italics the next year.
</div>
74
Оформление абзацев
ОФОРМЛЕНИЕ АБЗАЦЕВ
Когда речь заходит о типографике обычно на ум приходят отдельные буквы или их сочетания Чтобы веб-страницы выглядели наилучшим образом, необходимо учитывать «поверхностный» взгляд, охватывая текстовые блоки целиком, в том числе заголовки, подзаголовки, названия и — это особенно важно — абзацы. Как вы увидите в следующих разделах внимание к таким важным компонентам форматирования, как выравнивание и отступы может значительно (в положительном смысле) повлиять на внешний вид ваших страниц.
Урок 4.6. Выравнивание абзацев по горизонтали
Тема: свойство text-align
п^> Ссылка: wdpg.io/2/4-б-О
ПАМЯТКА
Используя эле мент, который по умолчанию накладывает курсивное начертание, например cite или vаг (см. главу 16), можно переопределить его, указав свойство font-style: normal.
Для настройки выравнивания абзаца или блока текста по горизонтали — то есть от носительно левого и правого полей страницы — используется CSS-свойство text-align. поддерживающее значения, перечисленные в табл. 4.2
► Таблица 4.2. Допустимые значения свойства text-align
Значение	Описание
left	Левый край текстовою блока выравнивается полевому краю; правый не выравнивается (и, как говорится, остается рваным). Такой способ выравнивания используегся по умолчанию в языках, в которых тексты читаются слева направо
right	Правый край текс юного блока выравнивается по правому краю; левый не выравнивается (остается рваным). Этот вариант используется по умолча нию в языках, в которых тексты читаются справа налево
center	Каждая строка текстового блока выравнивается по центру между его левым и правым краями; в свою очередь, левый и правый края блока — рваные
justify	Левый край текстовые блика выравнивается по левому краю, а правый — по правому
Четыре варианта выравнивания (по центру, по ширине, по левому краю и по правому краю) — основа типографской композиции.
Эллен Лаптон
В следующем примере показаны все четыре варианта выравнивания текста
ВНИМАНИЕ!
Браузер вырав нивает текст по ширине, увеличивая пробелы между словами в строке. Если она небольшая или содержит длинные слова, то промежутки могут выглядеть излишне большими и некрасивыми.
75
Форматирование веб-страницы
► Пример
С^> Ссылка, wdpg.10/2/4-6-1
В этим примере показаны четыре варианта выравнивания: заголовка и подзаголовка по центру, а также абзацев по левому краю, по правому краю и по ширине.
Выровнен по центру
Aligning Web Page Text
—► Notes. From the Field
ВЕБ-СТРАНИЦА
Выровнен по левому краю
We read rexi (in Enghili. anyway) from left to right Thu mean» that when we get .o the end of rarli line tn ronlniiu- ur iiuisl jiuirp ilnun oiir line anti llien waw tn the bevnniing пГthat fine That leap-and-scan e> most easily made when we 'know where the next Imc begin?
That’s why left-jutfified text 1» the easiest alignment to read
Compare Ле left-justified text block above with this right-justified paragraph In this case when you icach the end of each line tumping down to the next mi't a problem but because the left side of the text block is set ragged the beginning of each line isn't in a piedictable place which makes right-justified text a tad more difficult to read
Mans books are set tilth lustihed paragraph» because it look» more elegant without the right tagged edges Howeier pro book designers use sophisticated layout software to manage thing, like hi*phenation ^particularly if the text includes a long word such as Jiono’ificabihnidintrtinbiis) These aren't available for the v eb so it's often best not ro justify
Выровнен по правому краю
Выровнен по ширине
hlj h2 {
text-align: center;
}
Элеменмы hl u hz выравниваемся no ценмру
<hl?Aligning Web Page Text<./hl>
<h2>Notes Fmm the Field</h2>
Z <div style="text-align: left;">
Первый дйзац We read text (in English, anyway) from left to right. This выравниваемся means that when we get to the end of each line, to continue we no лебсм/ь	must jump down one Hne and then scan to the beginning of that
краю	line. That leap-ana-scan is most easily made when we "know"
where the next line begins. That's why left-justified text is the easiest alignment to read. </div>
Z <div style="text-align: right;">
Вморой адзаи Compare the left-justified text block above with this right-выравниваемся justified paragraph. In this case, when you reach the end no правому	of each line, jumping down to the next isn't a p'-oblem, but
крае	because the left side of the text block is set ragged, the
beginning of each line isn't in a predictable place, which
Тремий абзац makes right-justified text a tad more difficult to read. выравниваемся </div> no ширине <div style="text-align: justify;">
* Many books are set with justified paragraphs because it looks more elegant without the right-ragged edges. However, pro book
Оформление абзацев
designers use sophisticated layout software to manage things like hyphenation (particularly if the text includes a long word such as <i>honorjficabilitudinitatibus</i>). These aren't available for the web, so it's often best not to justify.
</div>
Урок 4.7. Красная строка абзаца
Тема: свойство text-indent
cj> Ссылка: wdpg.io/2/4-7-0
Можно настроить отступ первой строки абзаца с помощью CSS-свойства text-indent принимающего одно из значений из числа показанных в табл 4 3 Обратите внимание, что отступ применяется только в начале первой строки текстового блока
к Таблица 4.3. Значения, поддерживаемые свойством text-indent
Значение	Описание
length	Числовое значение, введенное с единицей измерения, например рх
percentage	Процентное значение. Вычисленный отступ равен ширине текстового олока, умноженной на процент
В сфере издательского дела и веб-дизайна ведутся споры о том, добавлять ли отступы в текстовые блоки Одни специалисты считают, что текст без отступов выглядит более эстетично друг ие же наоборот, утверждают, что отступы облегчают чтение текста. Какими бы ни были ваши предпочтения, имейте в виду следующие моменты.
•	Никогда не делайте отступ в первом абзаце на странице или в первом абзаце после заголовка. Цель отступа — отделить абзац от предыдущего, но это не относится к первому абзацу.
•	Если вы используете свойство text-indent, то вам не нужно добавлять промежуток между абзацами
•	Если е ы не используете свойство text-indent, то в целях удобочитаемости следует добавить к абзацам поля или отступы Об этом читайте в главе 9
Одновременное использование интервалов между абзацами и отступов первых строк съедает пространство на странице и придает текстовому блоку дряблый, аморфный вид.
Эллен Лаптон
ИНФОРМАЦИЯ
Некоторые браузеры поддержи-вают свойство text-align-last, определяющее выравнивание последней строки в абзаце, если свойству rext-align задано значение justify. Допустимые зна чения:left,right, center и justify Информация о поддержке браузерами это го свойства доступна по ссылке https://caniuse.com/ #feat=css-text-aiign-last
ПАМЯТКА
Обычно отступ первой строки абзаца равен 16 пикселам.
.ВНИМАНИЕ!
Если необходимо создать отступ для текстового блока, то убедитесь, что его левое поле достаточно широкое и может вместить отступ. О том, как задать левое поле для текстового блока, читайте в главе 9.
77
Форматирование веб-страницы
► Пример О Ссылка: wdpg.io/2/4-7-1
В этом примере показаны три возможные величины отступа вровень (первый абзац), положительный отступ (второй абзац) и отрицательный отступ (третий абзац), который обычно называют висячим
ВЕБ-СТРАНИЦА
-► The first word of rhe first line is the critical word Вровень - of that particular body of text. Let it start flush, at least. —William Addison Dwiggins
—► Typographers generally take pleasure in the ОтсгУп	unpredictable length of the paragraph while
accepting the simple and reassuring consistency of the paragraph indent. —Robert Bringhurst rOtTDENTS work well when dramatic effect is desired. They sometimes have a second emphasis factor, such as a style or case change, that contrasts with the
Bbl< lyn	body text. —Kristin Cullen
__ Свойство text-indent не определено, поэтому первая
<div> * Строил дбзлцЛ рАСполдглетСЯ вровень с остальными The first word of the first line is the critical word uf that
particular body of text. Let it start flush, at least. -William Addison Dwiggins
</div>	---• Отступ первой
<div style="text-indent: 16px;">* строки абзаца
Typographers generally take pleasure in the unpredictable length of the paragraph while accepting the simple and reassuring consistency of the paragraph indent. - Robert Bringhurst
</div>	—~~ Выступающая первая
<div style="text-indent2_ -64px;"> * строка абзаца
<span style="font-variant: small-caps;”>Outdents</span> work well when dramatic effect is desired. They sometimes have a second emphasis factor, such as a style or case change, that contrasts with the body text. -Kristin Cullen </div>
78
Управление цветом
УПРАВЛЕНИЕ ЦВЕТОМ
По умолчанию р большинстве браузеров на странице отображается черный текст на белом фоне Это сочетание, конечно читабельное, но скучное. Человеческий глаз способен различать миллионы цветов. поэтому черно-белая палитра кажется излишне аскетичной. К счастью, CSS позволяет задействовать эту способность по максимуму допуская в цифровой среде отображение любых из примерно 16 млн цветов К сожалению, большинство таких методов довольно сложные, поэтому я расскажу о них позже (см. главу 17).
Пока же вы научитесь окрашивать текст с помощью ключевых слов, предусмотренных в CSS В табл. 4 4 перечислены имена нескольких распространенных цветов.
ПАМЯТКА
В ключевых словах (именах цветов) допустимы разные варианты написания, поддерживаемые всеми браузерами: как gray, так и grey. К примеру, ключевые слова darKgray и darkgrey ото сразят один и тот же цвет.
► Таблица 4.4. Имена девяти распространенных цветов в CSS
Всего существует свыше 140 предопределенных ключевых слов (имен цветов), так что вряд ли у вас возникнут проблемы с поиском нужного цвета для вашего веб-проекта Полный список имен цветов я разместил на сайте Web Design Playground по адресу wdpg.io/2/ color keywords На рис 4 1 показан фрагмент списка
79
Форматирование веб-страницы
Color	Keyword	RGB Value		ligbtpiak				pink	•ffcOcb
	СХХМОП	НоШс		1«т«пмгЫиап	««fOf5			palaviolrtrea	Mb’093
				deappTnk	«ff!493			*><Hlunvi a latred	•«71515
	orcdud	id«7M4		UlftU	•dlbfal			р!<ж	IddaOdd
				agccta	«ДО Off			fusheia	IffOOff
	carnage ora	•ewosb		purple	«800080			reeercapurpla	• Ш399
	MdiOKichU	*b«5&43		daskvialat	«940МЭ			dark»rahid	«l»12eo
	Xnoigo	•«boots		b-uievlclet	tfcalbe/			sedluapurple	
	Latablue	|7kC!ee		•latebloe	|€a5acd			darkelattblua	#<8M8b
	lavanear	la«a«fa			«£«£«££			blue	«OOOOff
	nedxuablua	toooocd		idai^hcblua	«191870			darkblaa	•OOOOlb
	navy	•OQQOIO		cayalblua	Hlihl			cornflowasblua	fH»5ed
	Ughtsteelblue	•b0c4de		lightelat egray	«778889			slategray	•T080W
а	dcdgacblwa	ll«80£f		alxceblwe	•£C£8£f			•tvalblua	«не 2b 4
	lightak/blue	•87eef«		•kyblve	«87се«Ь			deepak/bxua	•OObfff
	ligatblce	•*dd«e«		povdezblue	«ЬСеОеС			cadetblue	•SfieaO
		♦fOffff		lightcyan	•«Offff			palaturguciae	•afeaee
► Рис. 4.1. Полный список имен цветов в CSS опубликован на сайте wdpg.io/2/colorkeywords
Урок 4.8. Окрашивание текста
Тема: свойство color
i_^> Ссылка: wdpg.io/2/4-Я-О
Некоторые CSS-свойства допускают применение цвета, в том числе окрашивание границ, фона и теней. В этой книге вы узнаете обо всех таких свойствах (например, в следующем уроке мы поговорим об окрашивании фона страницы), а пока разберемся с изменением цвета текста. Ниже показан общий синтаксис CSS для окрашивания текстового элемента.
селектор
— Окрашиваемой текстовой элемент
color: ключевое-слово; }
Свойство color со значением
В качестве селектора может выступать HTML-элемент, например, заголовка hl или абзаца р а также любой из CSS-селекторов, с которыми вы познакомитесь в главе 7. Окрашивание осуществляется путем указания свойства color и соответствующего значения, которое может быть представлено одним из имен цвета из числа предустановленных в CSS (или любым иным обозначением цвета, поддерживаемым CSS, о которых вы узнаете в главе 17). В следующем примере показано окрашивание заголовка hi в фиолетовый цвет
80
Управление цветом
► Пример
1=£> Ссылка: wdpc .io/2/4-8-1
В этим примере для скрашивания элемента hl в фиолетовый цвет используется ключевое слово
LU
СО
Royalty: A History
Элемент hl
 - форматируем элемент hl
hl { *
color: purple;
}	0 качестве значения свойства color-
указано ключевое слово purple
<hl>Royalty: A History</hl>
Урок 4.9. Окрашивание фона
Тема: свойство background-color
гф Ссылка: wdpg.io/2/4-9-0
До сих пор я рассматривал только изменение цвета элементов переднего плана — текста веб-страницы, но CSS можно использовать и для окрашивания фона элементов Цвет может заливать фон как всей страницы (то есть элемента body), так и заголовка, абзаца, ссылки или фрагмента страницы например элемента div или span
Ниже показан общий синтаксис CSS для окрашивания фона элемента веб-страницы:
селектор {
— ЭлеМеым с окрашиваемым Фоном
background-color: ключевое-слово; }
Свойство background-color со значением
В качестве селектора может выступать HTML-элемент или любой из CSS-селекторов, о которых вы узнаете в главе 7 Для форматирования используется свойство background-color и связанное с ним значение, в качестве которою можно указать любое из значений цвета, о которых вы узнали ранее. Рассмотрим пример
ПРАКТИКУМ
Огл форматируйте элемент а таким образом, чтобы текст ссылки отображался желтым цветом Затем добавьте второе правило, благода ря которому тот же текст имеет красный цвет и подчеркивается при наведении указателя мыши на ссылку.
сф Ссылка: wdpg Ю/2/4-8-4
81
Форматирование веб-страницы
► Приме р	ф Ссыл ка, wdpg ю/2/4-9-1
В этом примере показана веб-страница с боковой панелью Table of Contents, фон коюрой залит черным цвегом, а текст окрашен белым. Кроме того, в примере показаны фрагменты HTML- и CSS-кода этой страницы
Элемент div
ВЕБ-СТРАНИЦА
Using Colors Effectively
“There arc only 3 colors, 10 digits, and 7 notes; its what wc do with them that's impoitant.” — Jim Rohm
“Some colors reconcile themselves to one another, others just clash.”
—Edvard Munch
“AU colors are ihc friends ol their neighbois and the lovcis of their
opposites.” — Marc Chagall
Color Psychology
Thble of Contents
Color Psychology Color Schemes Color Caveats A Few Rumples Best Practices CSS and Color
When selecting colors, think about the psychological impact that your scheme will have on your users. Studies have shown that “cool" colors »uch as blue and gray evoke a sense of dependability and trust. Use these colors foi a more busmcss-likc appearance. Foi pages that require a little more excitement, “warm ’ colors such as red, yellow, and oiangc can ci okc a festive, fun atmosphere For a safe, comfortable ambiance, try using brown and yellow. For an environmental touch, use green and brown.
Color Schemes
div {
background-color: black; color: white;
float: right;
font-size: 16px;
font-weight: bold; margin-left' 0.5em;
padding: 0 10px 5px 10px; text-align: left;
}
Свойство background-color скрашивает фон элемента div в черный цвет
Эти свойства задают различное форматирование элементу div
Свойство color окрашивает текст в элементе div 6 белый цвет
<div>
<h3>Table of Contents</h3>
Color Psychology<br>
Color Schemes<br> Color Caveats<br> A Few Examples<br> Rest Practices<br> CSS and Color </div>
Элемент div с вложенными HTML-тегами и текстом
82
Резюме
РЕЗЮМЕ
•	С помощью свойства font-family можно указать гарнитуру шрифта элемента страницы Доступны пять универсальных гарнитур шрифтов serif, sans-serif monospace,cursive и fantasy, среди которых можно выбрать одну Либо можно указать системный шрифт, предустановленный на компьютеое пользователя.
•	Свойство font-size используется для управления размером текстовых элементов.
•	Свойство font - weight служит для несемантическо! о выделения элементов полужирным начертанием.
•	Свойство font-style используется для несемантического выделения элементов курсивным начертанием
•	С помощью свойства text-align можно задать горизонтальное выравнивание, например выровнять заголовки по центру или основной текст по левому краю
•	Свойство text-indent позволяет добавить положительный/от-рицательный отступ в первую строку текстового блока
•	Для окрашивания текста элемента используется свойство color
•	Для окрашивания фона элемента служит свойство backgroundcolor'
ПРАКТИКУМ
Как бы вы. изменили CSS-код в этом упражнении, нто-бы отобразить боковую панель оглавления со светло-серым текстом на фи о летовом фоне?
(Zj> Ссылка: wdpg.io/2/4-9-2
ПРАКТИКУМ
Напишите правило CSS, благодаря которому ссылки оформляются синим текстом и желтым, фоном. сф Ссылка wdpg ю/2/4-9-4
Глава 5
Проект: создание персональной
главной страницы
В этой главе
	Проектирование и создание эскиза персональной главной страницы.
	Выбор шрифтов для страницы.
	Добавление заголовка и навигационных ссылок.
	Добавление основного текста.
Итак, вы прочитали четыре главы. Теперь вы можете применить полученные знания о языках HTML и CSS на практике, создав собственный проект Б этой главе мы рассмотрим процесс подготовки простой персональной главной страницы «Простой» — ключевое слово, поскольку вы еще не освоили такое количество HTML-тегов и CSS-свойств. которое позволило бы создать что-то сложное. К счастью, вы знаете более чем достаточно, чтобы создать великолепную главную страницу. Вы знакомы с заголовками и абзацами; научились размечать разделы с помощью элементов div и span; освоили маркированные и нумерованные списки; умеете создавать ссылки; познакомились с типографскими приемами, такими как полужирное и курсивное форматирование; а также научились окрашивать фон и текст элементов Вы убедитесь, что всего этого более чем достаточно, чтобы создать гласную страницу, которую с гордостью можно продемонстрировать общественности
84
Эскиз веб-страницы
ЧТО ВЫ БУДЕТЕ СОЗДАВАТЬ
Этот проект представляет собой базовую главную страницу а-ля «Смотрите, я в Интернете1». Вы примените инструменты и приемы, изученные в первых четырех главах этой книги в виртуальном мире Всемирной паутины. В результате получится простая но красивая страница, которая позволит вам застолбить небольшой кусок онлайн-территории С какой целью7 Это зависит от вас, но большинство персональных главных страниц служат для знакомства с посетителями такие сайты представляют своих владельцев, их вкусы (и даже то что не нравится), опыт, привычки и мечты По ходу дела я покажу вам собственный пример текст в котором вы наверняка захотите заменить собственным Ваша веб-страница — это ваш дом, и вы можете наполнить его всем, чем захотите.
ЭСКИЗ ВЕБ-СТРАНИЦЫ
Все неб-проекты начинаются с ручки или карандаша и салфетки или иного клочка бумаги Создание веб-страницы — это прежде всего процесс проектирования, поэтому прежде чем приступать к набору кода, необходимо иметь полное представление о своем детище Конечно, можно продумать образ страницы но лучше начать с осязаемо! о листа бумаги и ручки.
Как видно на рис. 5 1, эскиз не обязательно должен быть подробным. Набросайте основные разделы страницы, кратко описав содержимое каждого из них.
НАЗВАНИЕ СТРАНИЦЫ Краткая вводная часть
ССЫЛКИ НА СОЦИАЛЬНЫЕ СЕТИ
Пара предложений о том, чем вы зарабатываете на хлеб насущный и почему.
Маркированный список интересов:
Авторские права и контактная информация
► Рис. 5.1. Прежде чем приступить к набору HTML- и CSS-кода возьмите ручку или карандаш и быстро набросайте макет и содержимое страницы
85
Проект: создание главной страницы
Следующая задача при планиооаании страницы - определиться, какие шрифты будут на ней использогаться
ВЫБОР ШРИФТОВ
Поскольку мы еще не обсуждали изображения, в первой версии нашей персональной главной страницы будет преобладать так называемый основной текст — объемные блоки текста без заголовков. которые составляют большую часть содержимого страницы. МнО1ие люди будут читать вашу страницу с таких устройств, как ноутбуки, планшеты и смартфоны, поэтому важно уделить время .'ыбору шрифтов, которые будут хорошо читаться на небольших экранах.
Вы можете создать страницу, используя всего одну гарнитуру, но два шрифта — один для заголовков, второй для основного текста — сделают страницу более динамичной и контрастной. Я предпочитаю использовать шрифты без засечек для заголовков и шрифт с засечками для основного текста, вы можете действовать наоборот или использовать оба шрифта с засечками или без таковых. Единственный критерий, на который стоит обратить внимание, — это гармоничное сочетание обеих гарнитур
Для этого проекта я использовал два безусловных фаворита в мире типографики шрифт без засечек Verdana для заголовков и шрифт с засечками Georgia для основного текста. В контексте CSS, чтобы задать эти гарнитуры, я применил следующие поле ила
font-family: Georgia, serif;
font-family: Verdana, sans-serif;
Определившись с макетом страницы и шрифтами, займемся подбором цветовой схемы
ВЫБОР ЦВЕТОВОЙ СХЕМЫ
На этой простой странице цвета не играют значимой роли, но можно добавить немного цвета, чтобы избежать унылого черного текста на белом фоне Можно окрасить фон в определенный цвет или даже использовать градиент (см wdpg.io/2/kits/gradient) Для этого проекта я предпочел простой белый фон. чтобы сфокусироваться на цветном тексте С помощью калькулятора цветовых схем RGB на сайте Web Design Playground (wdpg.io/2/colorcalc) я подобрал цвета
86
Верстка страницы
на основе значения #ffc20O как показано на рис 5.2 Вы. конечно можете выбрать другую цветовую схему, отвечающую вашим потребностям.
RGB Color Scheme Calculator
Use the controls below to calculate the RGB colors you need for a given color scheme Select the radio button for the type of scheme you want, then use the color chooser to select your initial color. The color scheme’s swatches as well as their corresponding RGB hex cooes appea' in the Results box
Cclor ScnerreType
Complementary
Analogous
Triadic
О Split Complementary
► Рис. 5.2. Разделенная комплементарная цветовая схема, основанная на шестнадцатеричном значении #ffc?OO
Разобравшись с макетом страницы и выбрав цвета, вы можете переходить к воплощению наброска в жизнь с помощью HTML-и CSS-кода
ВЕРСТКА СТРАНИЦЫ
Создавать персональную главную страницу вы начнете с каркасного кода, с которым я познакомил вас в главе 2 Затем вы будете детализировать его, поэтапно добавляя содержимое, HTML-элементы и CSS-свойства.
Базовая, структура
Для начала возьмите базовую структуру страницы из главы 2 и добавьте элементы и тексты-заполнители для всех шести разделов страницы. Приведу краткое описание этих элементов
•	Название страницы оформляется элементом заголовка hl
•	Вводная часть страницы оформляется элементом заголовка h2
87
Проект: создание главной страницы
•	Ссылки на социальные сети окружаются тегами элемента заголовка h3.
•	Первый текстовый блок — это элемент div
•	Второй текстовый блок — еще один элемент div, за которым следует элемент ul, предназначенный для оформления маркированного списка.
•	Подвал страницы — еще один элемент div
^Пример i=J> Ссылка: wdpg.io/2/projects/home-page/l
Перечисляем элементы, составляющие базовую структуру персональной главной страницы.
ВЕБ-СТРАНИЦА
Заголовок — элемент div
Основное содержимое— элемент div
Подвал — элемент div
body {
width: 550рх;
color: #444;
font-size: 16px;
text-align: left;
Базовый CSS-код для форматирования элемента body
88
Верстка страницы
<!-- НАЧАЛО ШАПКИ -->
<di v>
— Начало и конец каждого раздела оммечены комментариями
<hl>Page Title</hl>
<h2>Very short page introduction</h2>
<hr>
<h3>Social media links</h3>
<hr>
</div>
<! - - КОНЕЦ ШАПКИ -->
<!-- НАЧАЛО ОСНОВНОГО СОДЕРЖИМОГО -->
<div>
<Р>
First text block
</p>
<P>
Second text block
</p>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Etc.</li>
</ul>
</div>
<!-- КОНЕЦ ОСНОВНОГО СОДЕРЖИМОГО -->
<!-- НАЧАЛО ПОДВАЛА -->
<div>
<hr>
<Р>
Copyright and contact info
</p>
</div>
<!-- КОНЕЦ ПОДВАЛА -->
Обратите внимание, что базовая структура содержит также несколько CSS-свойств, применяемых к элементу body Эти глобальные свойства задают ширину страницы и значения по умолчанию цвета текста, размера шрифта и выравнивания. Наибольшее удивление может вызвать значение ширины, равное 550 пикселам Зачем вообще ограничивать ширину и тем более использовать такое относительно небольшое значение7 Один из ключевых аспектов хорошей веб-типографики — длина строки Если строки слишком длинные, то их тяжело читать, а если
Шднка
Основное содержимое (два абзаца к маркированный список)
Подвал
ПРАКТИКУМ
Я выровнял все содержимое по левому краю, чтобы оно красиво легло по левой стороне страницы. Однако вымажете изменить выравнивание по своему усмотрению Попробуйте выровнять по центру три элемента заголовка (название, вводную часть и ссыл ки на социальные сети).
гф Ссылка:
wdpg.io/2/projects/home-page/2
89
Проект: создание главной страницы
ЧАВО
Почему не использо вался традиционный черный l#00Q) цвет текста?
На белом фоне страницы черный текст бывает трудно прочитать из-за сильного контраста между этими двумя цветами. Если осветлить цвет текста до #444 или #333, то читать его будет легче.
ПРАКТИКУМ
Чтобы помочь вам подобрать идеальную для чтения длину строк, я подготовил упражнение на сайте Web Design Playground. Форматируя абзац текста, измените свойство width, примененное к элементу body, так, чтобы привести длину строк к идеальному диапазону 65-75 символов Попробуйте изменить значение свойства font-size и посмотрите, как это повлияет на длину строки.
CL” Ссылка:
wdpg.io/2/projects/home-раде/3
ПАМЯТКА
Не забывайте добав лятъ к своему коду комментарии. Они по могают отслеживать структуру страницы и незаменимы, когда сторонний разработ чик читает ваш код или вы сами открываете его спустя несколько месяцев
слишком короткие, то текст выглядит «рваным» В обоих случаях читабельность текста низкая Для текста, отображаемого на экране, оптимальная длина строки составляет от 65 до 75 символом. поэтому вам нужно установитьтакую ширину, чтобы все или болошинство строк основного текста укладывались в этот диапазон
При выполнении HTML-разметки в базовой структуре следует учитывать еще несколько моментов
•	Страница разделена на три части' шапка, основное содержимое и подвал.
•	Каждый раздел окружается тегами <div> и </div> Блок div структурирует содержимое и позволяет легко форматировать (например, менять гарнитуру) все содержимое в определенном разделе
•	Каждый раздел страницы окружен специальными тегами, называемыми комментариями, которые отмечают начало (например, <!-- НАЧАЛО ШАПКИ -->) и конец (например, < ! - - КОНЕЦ ШАПКИ -->) раздела Комментарии набраны прописными буквами, чтобы они отделялись от остального кода, но это не обязательно Более подробная информация об использовании комментариев в коде приводится в главе 16.
Название страницы
Оно. конечно же, должно быть более заметным, чем остальной текст Разметка названия с помощью элемента hl — прекрасная идея, но для достижения нужного эффекта нам, скорее всего, придется дополнительно форматировать текст. Приведу несколько идей.
•	Использовать различные цвета. Если вы выберете уникальный цвет, то заголовок будет выделяться на фоне остального текста
•	Увеличить размер шрифта. Название вашей страницы может быть простым поэтому более крупный размер шрифта придаст выразительности
В следующем примере в качест зе заголовка я указал собственное имя, а вы можете использовать любой текст, который вам больше нравится Я применил системный шриф г без засечек Verdana к элементу div раздела шапки (то есть этот шрифт будет применен и к остальным элементам заголовког1 на стоанице). Кроме того, я применил к названию страницы (элемент hl) один из цветов из моей цветовой схемы (#1800ff) и указал размер шрифта, равный 52 пикселам
90
Верстка страницы
^Пример сф> Ссылка: wdpg.io/2/projects/home-page/4
В этом примере мы меняем цвет, гарнитуру и размер шрифта названия персональной главной страницы.
LO UU со
PAUL MCFEDRIES
Элемент Ы
hl {
color: #1800ff;
font-size: 52px; }
,—s CSS-правила для элемента hl
<div style="font-family: Verdana, sans-serif;">
<hl>PAUL MCFEDRIES</hl>
Элемент div шапки
Элемент hl с названием страницы с измененным страницы	шрифтом
Вводный текст страницы
Такой текст служит своего рода подзаголовком Обычно это краткий фрагмент, с помощью которого аудитория может познакомиться с вами Данный текст считается подзаголовком, поэтому размер шрифта должен быть меньше, чем у названия, но больше, чем у основного текста Размещение текста внутри элемента h2 должно решить эту задачу, но в зависимости от названия страницы, возможно, вам понадобится задать размер самостоятельно.
В следующем примере я отформатировал вводный текст страницы, задав серый цвет (#666) и размер шрифта, равный 22 пикселам [вдобавок я использовал строчный элемент span, чтобы окрасить ключевую фразу technical writer в цвет из моей схемы (#ff с200). Обратите внимание, что описываемый элемент h2 наследует шрифт, который я применил к элементу div шапки страницы предыдущем примере
ПРАКТИКУМ
Если название вашей страницы длинное, то, скорее всего, оно будет перенесено на вторую строку Это допустимо, но в таком случае вам нужно уменьшить межстрочный интервал, чтобы сблизить две строки. Попробуйте применить к элементу hl свойство line-height со значением меньше 1 (например. 0.8 или 0.9;.
с^> Ссылка.
wdpg, ю/2/projects/ home-page/5
91
Проект: создание главной страницы
► Пример сф> Ссылка: wdpg.io/2/projects/home-page/6
Н эъ)м примере для оформления вводного текста персональной главной страницы используются иной цвет и увеличенный размер шрифта. Внутри текста элемент span меняет цвет ключевой фразы technical writer.
I'm a	specializing in HTML,
CSS, web design, and web typography	элементна
h2 {
color: #666;
font-size: 22px; }
CSS-разметка для элемента h.2.
<h2>I‘m a <span style="color: #ffc200">technical writer</span> specializing in HTML, CSS, web design, and web typography</h2>
_ pny</nz> V
Строчный элемент span окрашивает ) фразу, которую содержит
ПРАКТИКУМ
Вводная часть страницы должна быть короткой — в идеале не более двух строк. В то же время она должна быть визуально сбалансирована на экране, а каждая строка должна располагаться как мож но ближе к правому краю текстового блока. На сай те Weh Design Playground я подготовил упражнение, чтобы вы попрактиковались.
сф Ссылка
wdpg.io/2/projects/nome-page/7
Ссылки на социальные сети
Последний элемент шапки страницы — группа ссылок на социальные сети Она играет важную роль, поэтому ссылки следует выделить на фоне обычного текста, увеличив размер шрифта или окрасив их в уникальный цвет (или и то и другое)
Как показано в следующем примере, для своей страницы я отформатировал ссылки на социальные сети, используя шрифт без засечек размером 16 пикселов, а сам текст набрал прописными буквами. К ссылкам я применил третий цвет из моей цветовой схемы (#0092ff) и убрал подчеркивание При наведении указателя мыши на ссылку текст меняет цвет на #ffc200 и отображает подчеркивание Обратите г-нимание на символы вертикальной полосы (|) для разделения элементов
92
Верстка страницы
Пример сф> Ссылка: wdpg.io/2/projects/home-page/8
В этом примере для оформления ссылок на социальные сети используются прописные буквы, указызаются гарнитура, размер и цвет шрифта, а также настраивается подчеркивание, которое проявляется при наведении указателя мыши на каждую ссылку.
Элемент h3
FACEBOOK | TWITTER | PINTEREST | CODEPEN | LINKEDIN
h3 { font-size: 16px;
} a {
color: #0092ff;
text-decoration: none;
}
a:hover {
color. #ffc200;
text-decoration: underline;
}
CSS-код для оформления элемента Из
CSS -код для оформления ссылки, когда указатель мыши не наведен на нее
CSS -код для оформления ссылки при наведенном на нее указателе мыши
<h3> <а href="http://www.facebook.com/PaulMcFedries">FACEBOOK</a> |
<a href="https://twitter.com/paulmcf">TWITTFR</a> |
<a href="https://www.pinterest.com/mcfedries/">PINTEREST</a> |
<a href="http://codepen.io/paulmcf/">CODEPFN</a> |
<a href=“https://www.linked!n.com/in/paulmcfedries">LINKEDIN</ax/h3>
В CSS-коде обратите внимание на следующее правило
a:hover {
color: #ffc200,
text-decoration: underline;
}
: hover — это псевдокласс, который дает браузеру указание применить правила стилей только в том случае, когда пользователь наводит указатель мыши на сЬормати-руемый элемент В этом примере браузер изменяет цвет ссылки и добавляет подчеркивание, когда пользователь
ЧАВО
Куда делись теги <hr>?
В базовой структуре страницы я использовал их над и под ссылками на социальные сети, чтобы отделить иг от остального текста страницы. Отформатированные с помощью CSS ссыпки и так выглядят полностью отделенными от остального текста, поэтому горизонтальные линии стали избыточными и были удалены.
93
Проект: создание главной страницы
наводит указатель мыши на элемент а Когда же он убирает указатель с данного элемента, браузер возвращает ссылке ее первоначальный цвет и удаляет подчеркивание.
Основной, текст
Большую часть персональной главной страницы занимает текст, описывающий кто вы, чем зарабатываете на жизнь чем увлекав тесь и т. д. Эю основной текст страницы, и ei о содержимое зависит исключительно от вас
Вы уже настроили цвет размер и выравнивание текста по умолчанию для элемента body и эти значения наследуются элементом div, которым размечен раздел содержимого страницы Осталось только указать шрифт для основного текста; в моем примере это будет шрифт с засечками Georgia Чтобы применить его ко всему разделу содержимого, я настраиваю шрифт с помощью свойства font-fami ly, примененного к элементу div
Пример сф> Ссылка: wdpg.io/2/projects/home-page/10
В этом примере текст домашней страницы отформатирован < помощью шрифта Georgia. Кроме того, маркеры в списке заменены незакрашенными кружками.
ВЕБ-СТРАНИЦА
1 ve been a professional technical writer for more than 30 years. I have over 100 books to my credit, which have sold more than four million copies worldwide. I've been building websites since 1996. so I have intimate knowledge of HTML. CSS, and web design. My passion is to write books and articles to pass along that knowledge and to create tools that help people build awesome web pages.
>- Элемент р
That's my work side, so what about my personal side? That is, what do I do in my spare time? I'm glad you asked! Here s a partial (and alphabetical) list of things and activities that interest me:
Элемент p
О о о о о о
Chariot racing Dog polishing Duck herding Extreme ironing Navel fluff sculpture Staycat ioning
Элемент ul
94
Верстка страницы
о
U1 {
list-style-type- circle;
Значение circle меняем маркеры списка на незакрашенные кружки
Каждой ддзац икр ужен	Элемент div раздела основного
тегами <р> и < р	содержимого с примененном
<div style="font-family: Georgia, serif;"> системном шрифтом Georgia <р>
I've been a professional technical writer for more than 25 years. I have over 90 books to my credit, which have sold more than four million copies worldwide. I've been building websites since 1996, so have intimate knowledge of HTML, CSS, and web design. My passion is to write books and articles to pass along that knowledge and to create tools that help people build awesome web pages.
' </p>
<P>
That's my work side, so what about my personal side? That is, what do I do in my spare time? I'm glad you asked! Here's a partial (and alphabetical) list of things and activities that interest me:
</p>
<ul>
<li>Chariot racing</li>
<li>Dog polishing</li>
<li>Duck herding</li>
<li>Extreme ironing</li>
<li>Navel fluff sculpture</li>
<li>Staycationing</li>
</ul>
</div>
В этом примере обратите внимание на два момента
•	Я окружил каждый из двух абзацев тегами <р> и </р>, чтобы соблюсти семантическую роль текста
•	Я хотел сделать маркированный список более изящным, поэтому применил к элементу ulсвойство list-style-type со значением circle, чтобы изменить стандартные маркеры
Подвал страницы
Последний элемент персональной главной страницы — подвал (или футер) Как видно из приведенного ниже примера, я разместил там уведомление об авторских правах и свою контактную информацию (в данном случае адрес
ПРОФИ
Основной текст помогает определить оптимальную ширину страницы. При выравнивании текста по левому краю правая часть каждого текстового блока •рвется», то есть каждая строка заканчивается на разном расстоянии от правого края. В идеале нужно настроить ширину так, чтобы текстовые блоки не выглядели слишком рваными (то есть в конце строк не было слишком много свободного пространства).
95
Проект: создание главной страницы
электронной почты). Вы можете добавлять в подвал любую другую информацию, которую посчитаете нужной, например благодарность за посещение страницы, слоган или любимую цитату, ну и, конечно, дополнительную контактную информацию.
^Пример сф> Ссылка: wdpg.io/2/projects/home-page/12
В этом примере мы отделяем текст в подвале от основного текста, добавив горизонтальную линию и отформатировав текст подвала: осветлив цвет, уменьшив размер и изменив начертание шрифта на курсив.
© 2022 Paul MaFednes
Contact: mail at my-last-namt dot com
hr {
color: #666;
}
цвет текста
в элементе hr осветлен
<div style="font-family:Georgia, serif; color: #666; font-size:
14px; font-style: italic;"» ------------
<hr>
&copy; 2023 Paul McFedries<br>
Contact: mail at my-last>name dot com
</div>
Адрес электронной почты замаскирован
Цвет текста в элементе div осветлен, размер шрифта уменьшен, и применено курсивное начертание
ПРАКТИКУМ
Темно-серый /#333 или #444; текст чаще всего используется с белым фоном, другие ивета позволяют привнести интересные эффекты. Например, темно-коричневый цвет текста воспринимается как теплый. На сайте Web Design Playground я привел пример.
Ссылка: wdpg.io/2/projeccs/home-page /11
ПРОДОЛЖЕНИЕ
БАНКЕТА
Финальная версия персональной главной страницы (показана на рис. 5.3) соответствует нашим ожиданиям: простая, лаконичная страница, ваш первый «клочок земли» в Интернете (Если кам не терпится выложить страничку на всеобщее обозрение, загляните в приложение к книге, чтобы узнать, как это сделать.)
96
Продолжение банкета
PAUL MCFEDRIES
I'm a technical writer specializing in HTML, CSS, web design, and web typography
EACEBOOK | 1WHTER | PINIERES1 | CODEPEN | LINKEDIN
I’ve been a professional technical writer for more than 30 years. I have over too books to my credit, which have sold more than four million copies worldwide. I’ve been building websites since 1996, so 1 have intimate knowledge of HTML, CSS, and web design. My passion is to write books and articles to pass along that knowledge and to create tools that help people build awesome web pages.
That’s my work side, so what about my personal side? That is, vhat do I do in my spare time? I’m glad you asked! Here’s a partial (and alphabetical) list of things and activities that interest me:
° Chariot racing о Dug polishing о Duck herding c Extreme ironing о Navel fluff sculpture о Staycationing
© 2023 Paul McFedries
Contact; mail at my last-name dot com
► Рис. 5.3. Персональная главная страница, готовая к публикации в Интернете
Даже будучи новичком в освоении HTML и CSS. вы можете придать своей скромной главной странице особый нид, используя множество способов. Конечно, вы всегда можете написать больше текста, добавить нумерованный список (например, указать свои любимые книги или музыкальные группы). Кроме того, вы можете поэкспериментировать с цветами и гарнитурами, опробовать действие типографических тонкостей, например изменить размер шрифта и выравнивание текста, и добавить дополнительные ссылки
Вполне возможно, что результат вас слегка разочарует. В конце концов, на раннем этапе обучения веб-дизайну у вас мало навыков работы с элементами на странице и не хватает таких ключевых компонентов дизайна, как изображения, поля и макет страницы Не расстраивайтесь — всему этому и многому другому вы научитесь во второй части книги
ЧАВО
Почему адрес электронной почты так странна выглядит?
Никогда не пишите на странице свой адрес электронной почты открытым текстом его просканируют сканеры спамеров и добавят в свои списки рассылок. Вместо этого замаскируйте адрес таким образом, чтобы его не прочитали боты-спамеры, но при этом легко поняли люди.
ВНИМАНИЕ'
При добавлении уведомления об авторских пра вах у вас может возникнуть соблазн привести и словосочетание ‘Авторские правей, и символ авторского права (<Q), но это избыточно. Укажите или словосочетание, или символ, но никак не оба элемента.
97
Проект: создание главной страницы
РЕЗЮМЕ
•	Сначала набрасывается эскиз страницы, которую планируется создать
•	Затем выбирается шрифт для заголовков и основного текста
•	Выбирается цветовая гамма
•	Формируется базовая структура страницы основные HTML-элементы и глобальные CSS-свойства, применяемые к элементу body
•	Каждый раздел наполняется содержимым и форматируется по очереди название, вводный текст, ссылки на социальные сети, основной текст и подвал страницы.
Часть II
Добавление и оформление изображений
НтМ1_-элементы — важнейшая часть инструментария любого веб-дизайнера. Чтобы создать высококачественную страницу, следует познакомиться со всеми основными HTML-элементами от а до var. Но даже если вы выучите всю эту сотню или около того элементов, приведенных в спецификации HTML5, любая ваша страница, состоящая только из HTML-элементов и текста, будет выглядеть.. крайне уныло Кроме того, она будет совершенно шаблонной, ведь по умолчанию такие элементы, как обычный текст, заголовки и списки, во всех современных браузерах примерно одинаковы.
Я знаю, что вы читаете эту книгу не потому, что хотите создавать скучные и обыденные веб-страницы! Поэтому во второй части вы расширите свои навыки веб-дизайна, освоив сложные инструменты и приемы В главе 6 ры узнаете об изображениях, видео- и аудиоконтенте, а в главе 7 изучите расширенные, но практичные приемы работы с таблицами стилей В главе 8 вы научитесь профессионально позиционировать элементы веб-страниц, а в главе 9 познакомитесь с важной блочной моделью CSS, позволяющей изменять размеры элементов и добавлять границы и поля вокруг этих элементов
Наконец, в главе 10 вы соберете все полученные знания о HTML и CSS ноедино и с их помощью создадите привлекательную целевую страницу
Глава 6
Добавление изображений и медиафайлов
0J
В этой главе
	Встраивание изображения в веб-страницу.
	Управление фоновыми изображениями.
	Оптимизация изображений для веб-страниц.
	Добавление видео, музыки и других меди афайлов.
Что ’ы чувствуете, увидев страницу, на которой нет ничего, кроме текста? Скорее всего, разочарование или даже грусть. Если текст не затягивает, а оформление не привлекает взгляд, то вам. скорее всего, захочется нажать кнопку Назад и поискать на другом сайте отраду для своих уставших глаз Вы же не хотите, чтобы посети гели вашего сайта так же чувствовали разочарование, грусть или желание выключить компьютер, не правда ли? Поэтому вам нужно внести несколько визуальных улучшений, украсив страницы изображениями и, например, видеороликами В этой главе я покажу вам, как это сделать
100
Добавление изображений и медиафайлов
Урок 6.1. Добавление изображения на страницу
Тема: элемент img
Ссылка: wdpg.io/2/6-l С
До сих пор в книге все примеры веб-страниц содержали текст с несколькими HTML-тегами и правилами CSS, стратегически встроенными в нужных местах Поэтому вам наверняка интересно, как изображения вставляются в такой сплошьтекстсвый ландшафт. Если кратко — никак! В отличие от текстового документа или презентации вы не вставляете изображения непосредственно в веб-страницу. Вместо этою иы загружаете изображение в виде отдельного файла на свой сайт, а затем помещаете в исходный код страницы специальный НI Мс-тег, который указывает браузеру, где оно находится Тот, в свою очередь, запрашивает файл на сервере и отображает изображение в месте страницы, указанном в коде.
Специальный элемент с помощью которого браузер добавляет изображение на веб-страницу, называется img Частично его синтаксис показан на рис. 6.1.
Расположение Описание изображения	изображения
<img src="0au/7" alt="описание" title="подсказка">
Текст всплывающей подсказки для изображения
► Рис, 6.1, Изображение на веб- страницу добавляется с помошыо тега <img>
В примере выше показаны три атрибута.
•	src (от source — «источник») определяет, где находится i ра фический файл. Если он на удаленном сервере, то укажите полный URL файла, если в том же каталоге, что и HTML-файл. укажите только имя графического файла либо путь к изображению и имя файла Если вы создали в главной папке сайта подпапку images, а графический файл носит имя Togo.png то атрибуту src нужно присвоить значение /images/logi-.png
•	alt (от alternative — «замещающий») содержит слово или короткую фразу, которая описывает изображение и может быть показана, если графический файл по каким-то причинам не загружен. Например, для логотипа компании может быть использован замещающий текст "лого-поп", которому предшествует название компании Кроме того замещающий текст используется программами экранного доступа
ЧАВО
Обязательно ли указы есть атрибут alt ?
Да Код вашей вебстраницы не пройдет проверку, если хотя бы один тег <img> на ней не будет содержать атрибут alt. Если на странице используются декоративные, или иные несущественные изображения, то присвойте атрибуту alt пустую строку ("") Благодаря этому код пройдет проверку, и страница не будет раздражать людей, использующих вспомо гательные технологии, такие как программы экранного доступа, которые в противном случае считывали бы описания декоративных изображений.
ПАМЯТКА
Если у вас еще нет желаемого изображения, но вам известны его размеры, то можно вставить изобра ж ение-заместитель, которое временно займет пространство на странице, пока вы не подготовите нужное изобра жение Это можно еде лать несколькими способами, и самый простой из них — использовать специальный сервер, например https://placeholder.com В тег <img> добавьте атрибут src = "https:// via.placeholder.сот/ wxh”, гое ш и h — ширина, и высота изображения соответственно.
с4> Ссылка wdpg.iO/2/6-1-2
101
Добавление изображений и медиафайлов
и приложениями со шрифтом Брайля, чтобы пользователи с ограниченными возможностями имели некоторое представление о том что демонстрирует изображение
• title — необязательный атрибут Используется для вывода текста подсказки, которая появляется при наведении указателя мыши на изображение, как показано в примере ниже
В следующем примере показано, как работает элемент img.
^Пример ==> Ссылка, wdpg. io/2/6-l-l
В этом примере показано, как тег < img > позволяет добавить изображение на веб-страницу.
ЗЕБ-СТРАНИЦА
ее На сайте важно соблюсти правильный баланс между текстовым и визуальным содержимым. Великолепные изображения и видеоролики без текста не предоставят посетителю практически никакой полезной информации, при этом и массивы простого текста не слишком привлекают пользователей.
Хелен Старк
102
О форматах графических файлов
О ФОРМАТАХ ГРАФИЧЕСКИХ ФАЙЛОВ
Как вы могли заметить, в предыдущем примере графический файл носит имя atomic-logo, png, то есть сохранен в графическом формате PNG. Этот формат часто встречается в Интернете, но можно использовать не только его На самом деле в Сети стандартизированы четыре формата1, в которых представлены почти все веб-изображения, как показано в табл 6.1.
► Таблица 6.1. Форматы графических файлов
Имя	Расширение	Описание	Область применения
GIF	•gif	Исходный формат графических файлов для Интернета (название происходит от Graphics Interchange Foimat — «формат для обмена изображениями»), GIF-файлы поддерживают не более 256 цветов, приданный фон и объединение последователь ности файлов в копоткие анимации	Используйте GIF, если хотите объединить несколько изображений в одну анимированную картинку
JPEG	•jpg •jpeg	Этот формат (пплучивший свое название от компании разработчика Jc mt Photographic Experts Groupj поддерживает сложные изооражения. состоящие из миллионов цветов. Основное преимущество JPEG-файлг к заключается в том, что они сжаты, поэтому даже оцифрованные фотографии и другие высококачественные изображения могут быть достаточно небольшого размера, что позволяет быстро их скачивать. Ни следует учитывать, что сжатие JPEG происходит (потерями, то есть файл становится меньше за счет отсечения лишних пикселов изображения. Чем выше степень сжатия, тем больше пикселов j ссекается и тем менее четким получается изображение	Если у вас есть фотография или подобное сложное изображение, то в большинстве случаев подойдет JPEG, позволяющий использовать файл наименьшего размера Каким должен быть размер файла для размещения в Интернете? Об этом читайте в разделе «Оптимизация изображений» далее в этой главе
Продолжение
1 В настоящее время на смену JPEG, PNG и GIF приходит стандарт WebP, объединяющий все достоинства перечисленных форматов: сжатие с потерями и без них. поддержку прозрачности и анимации Еще один новый формат для изображений во Всемирной паутине — AVIF Это свободный формат сжатия с потерями, позволяющий значительно уменьшить размер файла при сохранении качества изображения вдобавок поддерживающий прозрачность и анимацию. Чтобы подробнее ознакомиться с WebP и AVIF и сравнить их с другими известными фооматами изображений, рекомендуется прочитать исследование на сайте httpsV/genius.courses/avif-nnn-webp/. — Примеч пер
103
Добавление изображений и медиафайлов
► Таблица 6.1 (продолжение)
Имя	Расширение	Описание	Область применения
PNG	рп&	Этот формат (название происходит от Portable Network Graphics — «портативная сетевая графика») поддерживает миллионы цветов и сжатие, но, в отличие от JPEG, без потерь. Изображения сохраняют четкость, но размер файлов может быть довольно большим. Вдобавок PNG поддерживает прозрачность	Если у вас есть иллюстрация или значок из сплошных цветов (без переходов), или фотография, содержащая крупные области практически одного цвета, то лучше всего использовать PNG, чтобы создать файл небольшого размера, сохраняя при лом отличное качество изображения. Вы можете использовать PNG и для изображений с прозрачными областями
SVG	• SVg	В дом формате (название образовано от Scalable Vector Graphics — «масштабируемая векторная ।рафика») для построения изображения используются не пикселы, а векторы. Они представлены в виде набооа XML-инструкций, позтому изображение можно изменять в текстовом редакюре и превращать в анимацию	Если у вас есть логотип или значок, а графическая программа позволяет сохранять файлы в формате SVG (например, Ado6e Illustrator или Inkscape), то данный формат — отличный выбор, так как получаемые небольшие файлы можно масштабировать до любого размера без искажений
ИНФОРМАЦИЯ
Если для вашего сайта необходимо создать забавные анимированные GIF-изображения, то вам помогут многочисленные сайты в Интернете. Проще всего воспользова ться онлайн-сервисами типа GIPHY(h№p:// giphy.com/create/ gifmakej или •Соз дать GIF онлайн» (https://gifius.ru/).
СОЗДАНИЕ ГРАФИКИ
Текстовая часть веб-страницы, по крайней мере с точки зрения создания, для большинства людей дело простое. Чего не скажешь о графике Создание эффектного логотипа или привлекательной иллюстоации требует определенной доли художественного таланта, обрести который несколько сложнее, чем базовые навыки набора текста.
Обладатели таланта, читая предыдущий абзац, могут рассмеяться- им просто нужно создать подходящее изображение в своей любимой графической программе и сохранить е- формате JPEG или PNG Людям без творческого потенциала приходится брать графику из других источников Помимо загрузки собственных фотографии и сканирования изображений, оы можете найти множество разных изображений Приведу несколько идей.
104
Добавление изображений по правилам HTML5
•	Многие программы (а том числе Microsoft Office и большинство программ для рисования и создания иллюстраций) поставляются с библиотеками клипарта Клипар7 — это иллюстрации профессионального качества, которые вы можете использовать в собственных проектах Почти во всех случаях клипарт можно свободно использовать в своих проектах, не беспокоясь об ар-торских правах
•	Воспользуйтесь бесчисленными архивами изображений в Интернете. На разнообразных сайтах хранятся сотни и даже тысячи изображений: стоковые фотографии, иллюстрации, значки и многое другое Многие из этих изображений бесплатны, но в любом случае ознакомьтесь с условиями использования, указанными на сайте, с которого вы планируете скачивать файлы.
•	Захват изображения с веб-страницы Когда браузер отображает веб-страницу с изображением, соответствующий графический файл Еременно сохраняется на жестком диске компьютера. В большинстве браузеров можно щелкнуть правой кнопкой мыши на изображении чтобы сохранить этот файл на свой жесткий диск. Однако учтите, что могут возникнуть проблемы с авторскими правами, если изображения, которые вам не принадлежат использовать без разрешения и/или оплаты. Об этом я подробнее рассказываю в соседней чрезке
ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ
ПО ПРАВИЛАМ HTML5
ВНИМАНИЕ!
Не забывайте, что многие изображения являются собственностью людей или компаний, которые их соз дали. Если вы не уверены в том, что изображение относится к общественному достоянию (например, на него распространяется лицензия Creative Commons, позволяющая использовать его без ограничений), то перед использованием следует получить разрешение от владельца. В любом случае не забудьте указать владельца изображения на своем сайте.
Наряду с чисто декоративными и привлекающими внимание посетителей сайта изображениями можно использовать графические элементы, связанные с текстом вашей страницы Такие встроенные в текст изображения в HTML5 считаются семантическими компонентами страницы, размечаемыми с помощью элемента figure Если рисунок сопровождается подписью, то она тоже является семантическим элементом — figcaption. Ниже показана базовая структура, которую следует использовать
<figure>
<img згс="файл" alt="описание" title=”подсказка">
<figcaption?nodnucb</figcaptian?
</figure>
105
Добавление изображений и медиафайлов
Рассмотрим пример
^Пример Ссылка wdpg.io/2/6-1-4
В этом примере элементы figure и figcaption используются для разметки изображения.
ЗЕБ-СТРАНИНА
During our recent rebranding, we came up with a snazzy new logo, shown m Figure 8.3.
Figure 8 J; The new Atomic Web Design logo
<P>
During our recent rebranding, we came up with a snazzy new logo, shown in Figure 8.3.
</p>
<figure>
<img
src="/Lmages/atomi c-logo.png"
alt="Atomic Web Design logo"
tltle."Logo.for Atomic	Web pesign">	Заключаем
Figure 3.3: The new Atomic Web Design logo
</figcaption> ,	J
</fieure>	frapti™
Заключаем изображение в элемент figure
ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ-ССЫЛОК
Вы уже научились использовать и качестве ссылки слово или фразу, но то же самое можно сделать и с изображениями. Задача решается аналогичным образом: нужно окружить элемент img тегами <а> и </а>, как показано ниже
<а href="ur£"ximg згс="файл" alt="описание" ></а>
106
Пользовательские маркеры списков
Перейдем к примеру
► Пример (=> Ссылка: wdpg.io/2/6-1-6
В этом примере с помощью элементов а и img мы превращаем изображение в ссылку.
Atomic Web Design
atomiewebaesign io
<а href="http://atomicwebdesign.io/">
<img src="/images/atomic-iogo.png" alt»"Atomic Web Design logo title»"Logo -for Atomic Web Design"></a>
<span>Atomic Web Design</span>
Заключаем изображение в элемент а
ПОЛЬЗОВАТЕЛЬСКИЕ МАРКЕРЫ СПИСКОВ
В главе 2 я рассказал, что в CSS есть свойство list-style-type, позволяющее сменить тип маркера в неупорядоченном списке Вы можете придать своим спискам уникальный вид. применив свойство list-style-image и указав изображение, которое будет выступать в роли пользовательского маркера
и1 {
list-style-image: игТ(файл);
}
Как и в случае с элементом img вместо слова файл укажите местоположение графического файла Обратите внимание, что значение не обязательно заключать в кавычки. Рассмотрим пример
ВНИМАНИЕ!
Я специально разместил код изображения-ссылки в одной строке. Если вы укажете такие теги на отдельных строках, в частности закрывающий тег </а>, то в тексте возникнут странные артефакты (по сути, подчеркнутые символы перевода строки).
107
Добавление изображений и медиафайлов
ВЕБ-СТРАНИЦА
► UpiLMe/i Ссылка'wdpy ih/2/6-1-7
В этом примере свойство list-style-image используется для применения изображения в качестве пользовательского маркера списка.
Prepare Images fur the Web:
Remove unnecessary images
J Choose the correct image format
Size the images appropriately
•» Compress JPEGs as needed
-* Optimi ze PNGs
ul {
list-style-image: url(/images/checkmark.png); }
Указываем в свойстве list-style-image —-местоположение графического файла
<h3>
Prepare Images for the Web:
</h3>
<ul>
<li>Remove unnecessary images</li>
<li>Chuose the correct image formatc/lis
<li>Size the images appropriately</li>
<li>Compress JPEGs as needed</li>
<li>Optimize PNGs</li>
</ul>
ВЫРАВНИВАНИЕ ИЗОБРАЖЕНИЙ
И ТЕКСТА
Элемент img — строчный, поэтому вы можете встроить его, например, в абзац или аналогичный блочный элемент, и он будет отображаться вместе с остальным содержимым По умолчанию нижний край изображения выравнивается по базовой линии текущей строки, но можно настроить выравнивание по вертикали с помощью свойства vertical-align
элемент {
vertical-align: baseline | bottom | middle | top;
}
108
Выравнивание изображений и текста
•	baseline — нижняя часть изображения выравнивается по базовой линии текущей строки (по умолчанию),
•	bottom — нижняя часть изображения выравнивается по нижней границе текущей строки (то есть по нижней границе самых низких букв, таких как «у» и «р»).
•	middle — середина изображения выравнивается по базовой линии текущей строки плюс половина высоты текущего шрифта
•	top — верхняя часть изображения выравнивается по верхней границе текущей строки.
В следующем примере показано, как работает свойство vertical-align
ПРОФИ
Если вам нужен более точный контроль над вертикальным позиционированием изображения, то можете указать для свойства vertical-align нужное значение в пикселах (рх). Чтобы сместить изображение вверх, укажите отрицательное значение.
► [Гример с^> Ссылка: wdpg.io/2/6-l-10
В этом примере с помощью свойства vertical - align изображение выравнивается по вертикали относительно окружающего текста.
ВЕБ-СТРАНИЦА
Animal path
Базовая линия
Нижняя граница
по базовой линия
<div>
<img src="/images/animalpath.jpg" style="vertical-align: baseline"» Animal path </div> <div>
<img src="/images/bridleway.jpg
style="vertical-align: bottom"» Bridleway
<	— Выравниваем
<	dlv>	no нижнеи границе
<img src="/images/coffintrail.jpg" style=“vertical-align: middle"» Coffin trail </div>
<	div»	Выравниваем no ценмру
<img src="/images/desireline.jpg"
style=“vertical-align: top"» Desire line
<	/div>	Выравниваем no верхней
границе
109
Добавление изображений и медиафайлов
Урок 6.2. Управление фоновыми изображениями
Тема: background-image и связанные свойства
Ссылка: wdpg.io/2/6-2-u
Чтобы визуально выделить элемент, можно использовать свойство background-image и указать графический файл, который будет использоваться в качестве фона
элемент {
background-image: иг!(файл);
}
Вместо слова файл указывается местоположение графического файла Если он находится на удаленном сервере, то указывается полный URL Файла, если в том же каталоге, что и HTML-файл, то указывается только имя графического файла либо путь к изображению и имя файла
В следующем примере показано, как работает это свойство
^Пример сф> Ссылка wdpg.io/2/6-2-1
ь этом примере показано, как с помощью свойства background - image применить изображение в качестве фона элемента.
ВЕБ-СТРАНИЦА
Исходное изображение Замощенное Фоновое изображение
АЛЪеп you add a background image, the browser doesn’t just add the image once and move on to the next task. Instead, it takes the image and repeats it until it fills the entire parent block element, a process known as tiling.
div {
background-image: url(/images/bg.png);
width: 500px;
height: 200рх;	Элемент div декорируемся
у	фоновым изображением
110
Мощение фона
Исходное изодрлжение показано для сравнения
<img src="/images/bg.png" alt='Page background image’>
<div>
<hl>Tiling</hl>
<p>
When you add a background image, the browser doesn't just add the image once and move on to the next task. Instead, it takes the image and repeats it until it fills the entire parent block element, a process known as <i>tiling</i>.
</p>
</div>
При использовании фоновых изображений следует учитывать, что по не зависящим от вас причинам изображение может не загрузиться Поэтому рекомендуется использовать свойство background-color со значением соответствующим основному цвету изображения Рассмотрим пример
div {
background-color: #fec72f;
background-image: url(/images/bg.png);
}
МОЩЕНИЕ ФОНА
В предыдущем примере по умолчанию браузер повторяет фоновое изображение по горизонтали и вертикали до тех пор пока элемент (при условии, что он больше изображения) не будет заполнен Такое поведение называется мощением и обычно не требует изменения Тем не менее с помощью свойства background-repeat можно управлять мощением фона по горизонтали и е ертикали или вовсе его отключить.
элемент {
background-image: иг1(файл);
background-repeat: repeat | repeat-x | repeat-y | round | space | no-repeat;
)
•	repeat — мостит изображение по горизонтали и вертикали (по умолчанию)
•	repeat-x — мостит изображение только по горизонтали (рис 6 2).
•	repeat-y — мостит изображение только по вертикали (рис 6 3).
•	round — растягивает каждое повторяющееся изображение, пока контейнер не будет заполнен
ВНИМАНИЕ!
Фоновое изображение может украсить страницу, но будет раздражать, если затрудняет чтение текста на странице Всегда следите за кон трастностью текста и фона.
ПРАКТИКУМ
Вье можете опробовать все зна чения свойства background-repeat в интерактивном режиме в песочнице веб-дизайна.
Ссылка: wdpq io/2/6-2-2
ПАМЯТКА
Значение repeat используется по умолчанию, поэтому объявление background -repeat: repeat указывать не обязательно
111
Добавление изображений и медиафайлов
•	space — мостит изображение максимальное количестве- раз, не обрезая его
•	no-repeat - отображает изображение однократно
►	Рис. 6.2.
Благодаря свойству background-repeat, repeat-x фоновое изображение повторяется по горизонтали
►	Рис. 6.3.
Благодаря свойству background-repeat: repeat-у фоновое изображение повторяется по вертикали
Tiling
Whc □ уич иЯ * Ъ*сkjpvund unhgE, ttr hv'KT doesn’t just add the image once and move on to the next task. Instead, it takes the image and repeats it until it fills the entire parent block element, a process known as tiling.
Tiling
он add a background image, the browser just add the image once and move on to > sext task. Instead, it takes the image and repeats it until it fills ±e entire parent block clement, a process known as riling.
ПРАКТИКУМ
Вы можете опробовать все значения свойства background-position в интерактивном режиме в песочнице веб-дизайна.
cj> Ссылка, wdpg.ю/2/6-2-3
ПАМЯТКА
Значение left top используется по умолчанию, поэтому объявление background-position: left top указывать не обязательно. Обратите внимание, что оно эквивалентно свойствам background - position: 0% 0% и backgroundposition: ирх 0рх.
ПОЗИЦИОНИРОВАНИЕ ФОНА
По умолчанию фоновое изображение мостится от левого верхнего угла родительского элемента Можно изменить эту настройку, применив свойство background-position: элемент {
background-image: иг1(файл);
background-position: horizontal vertical;
}
•	horizontal определяет начальную i оризон гальную позицию фонового изображения Можно использовать ключевые слова left, center и right, значение в процентах или пикселах (или любые другие единицы длины CSS, о которых вы узнаете в главе 7).
•	vertical определяет начальную вертикальную позицию фонового изображения Можно использовать ключевые слова top. center4 или bottom, значение в процентах или пикселах (или любые единицы длины CSS, о которых вы узнаете в главе 7).
112
Добавление изображения-бренда
На рис. 6.4 показаны девять возможных позиций изображения при использовании сочетаний ключевых ело» по горизонтали (left, center и right) и вертикали (top, center и bottom) Обратите внимание, что во всех случаях свойству background-repeat присвоено значение no-repeat
По центру вверху
► Рис, 6.4. Девять возможных позиций изображения согласно значениям свойства background-position
ДОБАВЛЕНИЕ
ИЗОБРАЖЕНИЯ -БРЕНДА
Одна из популярнейших тенденций веб-дизайна последних лет — изображение-бренд (hero), фотография/иллюстрация го есю ширину (и. как правило, высоту) окна браузера, привлекающая внимание пользователей при первом посещении сайта
Чтобы создать изображение-бренд выполните следующие действия
1.	В начале страницы добавьте блочный элемент (например, div), охватывающий все окно браузера
width: 100vw;
height: 100vh;
2	К этому блочному элементу добавьте фоновое изображение и позиционируйте его с помощью свойства background- position: center center
3.	Добавьте объявление background-size: cover, чтобы браузер полностью покрывал изображением фон блочного элемента.
ПРАКТИКУМ
Еще один способ использовать изображение в качестве пользовательского маркера списка — установить его в качестве фона элемента, а затем с помощью свойства background-position выровнять его в сочетании со списком
с£> Ссылка: wdpy.io/2/6-2-4
ПАМЯТКА
Единицы vw и vh представляют собой одну сотую ширины и высоты окна браузера соответ ственно. Подробнее об этих единицах мы поговорим в главе 7.
113
Добавление изображений и медиафайлов
► Пример еЦ> Ссылка: wdpg.io/2/6-2-5
ьэтом примере показано, как добавить на страницу изображение-бренд
ВЕБ-СТРАНИЦА
 « а » □ 9 ।
Размер элемента соответствует размеру окна браузера
.hero-image { width: 100vw; height: 300vh;
background-image: url(/images/toronto.jpg);
background-position: center center; background-size: cover; -
}	\ Указанное изображение
Изображение покрывает отображается и выравнивается веса элемент	по центру
Элемент-контейнер > для изображения-бренда
<div class=’’hero-image’'>
<hl>Welcome!</hl>
<h2>Are you ready to see Toronto in an entirely new way?</h2>
</div>
<div class="main">
The main page content goes here.
</div>
114
Оптимизация изображений
КРАТКАЯ НОТАЦИЯ СВОЙСТВА BACKGROUND
С помощью CSS настраивается пять основных характеристик фона, цвет, изображение, повтор (мощение), фиксация и позиционирование Они представлены соответствующими CSS-свойствами background-color, background-image, background-repeat, backgroundattachment и background-position. (B CSS есть еще три свойства, касающиеся управления фоном background-size, backgroundorigin и background-clip в этой книге их я не рассматриваю.) Для удобства можно применить любые или даже все эти свойства в краткой нотации свойства background Для этого используется упрощенный синтаксис, показанный на рис 6 5
ПРАКТИКУМ
Можно фиксировать фон на одном месте, пока вы прокручиваете остальную часть страницы, добавив объявление oackground-attachment: fixed.
Ссылка wdpg.io/2/6-2-6
Цвет	Графический файл Мощение
Фиксация
background: background-coLor Background-image background-repeat background-attachment background-position;
Начальная позиция
► Рис. 6.5. С помощью краткой нотации свойства background можно одновременно настраивать до пяти характеристик фона
ПРАКТИКУМ
Этот синтаксис — краткая интерпретация всего, чему вы научились причем можно указывать значения свойств в любом порядке.
ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЙ
Среди веб-дизайнеров бытует выражение «цвет в Интернете бесплатный», то есть можно окрашивать текст, фон. границы и прочие элементы, не расплачиваясь потерей пооизводительности Однако данное выражение совершенно неприменимо к изображениям, которые могут достигать огромных размеров (особенно это касается уже упомянутых изображений-брендов) и существенно повлиять на производительность. Зам нужно сделать так, чтобы ваши страницы не загружались целую вечность В этом вам могут помочь мои несколько советов по оптимизации изображений
• Не используйте лишние изображения Прежде чем добавить изображение на страницу спросите себя нужно ли оно для передачи вашей идеи Если да, то добавьте его Если нет, удалите Ваши пользователи будут вам благодарны
Один из самых удивительных аспектов работы с фоновыми изо брожениями — возмож} юстъ использовать несколько фонов для одного и того же элемента. Можно замостить одно и то же фоновое изображение в двух или более местах или использовать несколько фоновых изображений (или даже сочетать оба способа!).
сф> Ссылка wdpg.io/2/6-2-7
115
Добавление изображений и медиафайлов
ВНИМАНИЕ'
Планируя наложить текст на изображение-бренд, убедитесь, что на изображении есть подходящая не слишком пестрая область, пригод ноя для чтения наложенного текста. Кроме того, убедитесь, что цвета изобра жения и текста достаточно контрастны.
ИНФОРМАЦИЯ
Если вы за дума ли использовать 24 битные PNG-файлы, то возь ми те на вооружение программные инструменты, которые по могут уменьшить размер таких файлов. В macOS попробуйте программу ImayeAlpha (https:// pngmmi.comj; а в Windows обратите внимание на приложение PNGoo (https:// pngquant.org).
•	Следите за размерами изображений. Браузеры при необходимости могут изменять размеры изображений, но не должны этого делать. Если в левом верхнем углу страницы вам нужен логотип размером 100 х 100 пикселов, то не стоит загружать графический файл с разрешением 2048 х 2048 и делегировать браузеру задачу изменения размера (например указывая меньшую ширину/высоту в CSS). Загрузка подобного файла займет много времени и приведет к нерациональному использованию полосы пропускания
•	Выбирайте подходящий формат графического файла. Как правило, следует использовать тот формат, который обеспечивает наименьший размер файла при сохранении удовлетворительного качества изображения в каждом конкретном случае Изображение-бренд должно выглядеть прекрасно, а крошечному значку не обязательно иметь высокое разрешение
•	Управляйте уровнем сжатия JPEG. При сохранении изображения в формате JPEG графический редактор позволяет выбрать степень сжатия (компрессии) файла. Вам придется немного поэкспериментировать, чтобы подобрать оптимальный уровень, но для большинства случаев стоит начать с диапазона 60-75 % Большее сжатие обычно приводит к ухудшению качества изображения, а меньшее — к увеличению размера файла.
•	Оптимизируйте изображения PNG Если вы работаете с таким изображением, то посмотрите, можно ли обойтись 8-битной цветопередачей, то есть 256 цветами Для простого логотипа или значка 256 цветов может быть более чем достаточно, и в итоге вы получите довольно маленький файл. Для более сложных изображений вам. вероятно, понадобится полная 24-битная палитра
ДОБАВЛЕНИЕ ВИДЕО
И АУДИО НА СТРАНИЦУ
Посетители обожают видеоролики и подкасты о кошках. Вы это знаете и хотите добавить аналогичное видео- или аудиосодержимое на свои реб-страницы. Шикарная идея! Начну с хорошей новости в HTML5 доступны элементы video и audio, которые предлагают простой способ добавления мультимедийного содержимого на страницу Обратите внимание, что я сказал «начну с хорошей новости».
116
Добавление видео и аудио на страницу
Почему? Потому что есть и плохая Сейчас мультимедийное содержимое в Интернете — это безумный винегрет из стандартов, алгоритмов сжатия и форматов файлов И если вы хотите что-то показать или дать послушать посетителям, то вам придется разобраться с этим винегретом. Я начну с определения двух аспектов форматов мультимедийного содержимого.
•	Контейнер — файл, который действует как мультимедийный эквивалент архива и содержит множество элементов в частности мультимедийные кодеки (о них речь пойдет дальше) и мультимедийные метаданные
•	Кодек - алгоритм, используемый для кодирования и сжатия видео/аудио в цифровой формат, а также для декодирования/ декомпрессии мультимедийного содержимого, которое будет воспроизводиться (Слово «кодек» — это сочетание слов «коди-ровать/декодирс-вать» и «компрессия/декомпрессия».)
Итак, мультимедийный файл, который вы добавляете на страницу. имеет определенный мультимедийный формат, использующий определенный контейнер, внутри которого хранятся кодеки, необходимые для воспроизведения данных в этом формате Звучит просто не так ли? Тем не менее абсурдность ситуации заключается в том. что не существует стандартного/унинереального мультимедийного формата.
Видеоформаты в Интернете
Для кодирования видео, по большому счету, используются три основных формата
•	WebM — используется контейнер WebM с видеокодеком VP8 или VP9 и аудиокодеком Vorbis или Opus внутри У формата открытый исходный код, и он полностью бесплатный. Расширение файла .webm
•	099 — используется контейнер Ogg с видеокодеком Theora и аудиокодеком Vorbis или Opus внутри У формата открытый исходный код и он полностью бесплатный. Расширение файла .ogg или .ogv
•	MPEG-4 — используется контейнер МРЬС -4 с видеокодеком Н ,264 и аудиокодеком ЛАС внутри. Этот формат запатентован но бесплатен для частных пользователей, Расширение файла . mp4
ИНФОРМАЦИЯ
Существует множество инструментов для прсобразования видеофайлов в форматы, под держиваемые HTML5. Два он-лайн-инструмен-та. на которые стоит обратить внимание, — это Zamzar (WwW. zamzar.com) и Online-Convert (www.onhnecon-vert.com/).
117
Добавление изображений и медиафайлов
ИНФОРМАЦИЯ
Два онлайн-инструмента, о которых я упоминал ранее, поддерживают и преобразование аудиофайлов. Кроме того, попробуйте инстру мент Media.)о (hftps//media, icij.
Какой выбрать7 В большинстве случаев можно обойтись форматом MPEG-4, который поддерживается всеми основными браузерами Однако поддеожка может быть проблематичной. Во-первых, Firefox не поддерживает MPEG-4 самостоятельно, вместо этого браузер использует встроенную в операционную систему поддержку MPEG-4 Во-вторых, сотрудники корпорации Google намекнули на прекращение поддержки MPEG-4 в будущих версиях браузера Chrome Поэтому целесообразно предоставлять посетителям видео как в версии MDEG-4, так и WcbM (более новой и с лучшей поддержкой чем Ogg)
Аудиоформаты е Интернете
Для хранения аудио доступно еще больше форматов
•	MP3 — это одновременно и контейнер, и аудиокодек. Этот формат запатентован, но бесплатен для частных пользователей Расширение файла: .mp3
•	WAV —это одновременно и контейнер, и аудиокодек Расширение файла, .wav
•	WebM — используется контейнер WebM с аудиокодеком Vorbis или Opus внутри У формата открытый исходный код, и он полностью бесплатный. Расширение файла .webm
•	Ogg — используется контейнер Ogg с аудиокодеком Vorbis или Opus внутри У фоомата открытый исходный код, и он полностью бесплатный. Расширение файла .oggnnn .oga
•	MPEG-4 — используется контейнер MPEG-4 с аудиокодеком ААС внутри Этот формат запатентован, но бесплатен для частных пользователей Расширение файла: .т4а
В мире аудио все намного спокойнее все браузеры поддерживают формат MP3, поэтому можно обойтись одним типом файлов.
У	рок. 6.3< Встраивание видеоролика в веб-страницу
Тема: элемент video
ez£> Ссылка: wdpg.io/2/б-З-О
Элемент video в HTML5 предлагает простой способ встраивания нидео-контента в веб-страницу. Впрочем, «простой» — возможно, не совсем корректное утверждение Можно использовать два синтаксиса, в зависимости от количества форматок видеофайлов, которые необходимо добавить.
Для начала рассмотрим синтаксис добавления видеоролика одного формата
<video згс="файл"
poster="файл"
width="значение"
118
Добавление видео и аудио на страницу
height-"значение"
controls
autoplay
loop>
</video>
•	src — указывает местоположение видеофайла, так что это почти то же самое, что и атрибут src в теге <img>
•	postei— указывает местоположение изображения-постера, например афиши или стоп кадра из видео, которое должно отображаться перед воспроизведением видео
•	width и height — определяют размеры окна воспроизведения видео
•	controls — если указано, то браузер отображает в окне проигрывателя элементы управления воспроизведением
•	autoplay — если указано, то браузер автоматически начинает воспроизведение видео как только загрузит количество видеоданных, достаточное для непрерывного воспроизведения
•	loop — если указано, то браузер повторяет воспроизведение файла с начала после завершения
Рассмотрим пример
► Пример
|=1> Ссылка: wdpg.io/2/6-3-1
В этом примере показано как встроить видеофайл одного формата в веб-страницу.
ВЕБ-СТРАНИЦА
II (Н5/5ХЮ	♦-	4) ----------• ♦
119
Добавление изображений и медиафайлов
«video src="/videos/movie.mp4" poster="/images/movie-poster.jpg" width="625" heignt="480"
controls
autoplay loop>
«/video?
Чтобы использовать видеоролики двух или более форматов нужно удалить атрибут src из тега <video> и добавить несколько элементов source по одному для видеоролика каждого формата.
«video poster="файл"
width="значение"
height="значение"
controls
autoplay
loop>
«source згс="файл" type*‘тип; codecs="Kode«u"'>
</video>
•	Атрибут src традиционно для каждого тега <source> содержит имя и/или местоположение видеофайла.
•	Строка type (заключенная . одинарные кавычки) определяет тип видеоформата (как показано в предыдущем подразделе этой главы), список видео- и аудиокодеков разделенный запятыми и заключенный в двойные кавычки
•	MPEG-4 — указывайте следующее
type='video/mp4; codecs="avcl.4D40iЕд тр4а.4й.2"'
♦	WebM — указывайте один из следующих вариантов
type='video/webm; codecs="vp8, vorbis'" type='video/webm; codecs="vp9, vorbis"' type='video/webm; codecs="vp9, opus'"
•	Ogg — указывайте один из следующих вариантов
type='video/ogg; «odecs="theura, vorbis’" type='video/ogg; codecs="theoraj pus"'
120
Добавление видео и аудио на страницу
► Пример Ссылка; wdpg.io/2/6-3-2
В этом примере показано, как встроить в веб- страницу видеофайлы нескольких форматов
ВЕБ-СТРАНИЦА
<video poster="/images/movie-poster.jpg"
width="625"
height="480"
controls
autoplay loop>
<source src="/videos/movie.mp4" type='video/mp4; codecs="avcl.4D401EJ mp4a.40.2"'>
<source src="/videos/movie.webm" type='video/webm; codecs="vp8, vorbis'">
<source src="/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis“'>
</video?
121
Добавление изображений и медиафайлов
Урок 6.4. Встраивание аудиофайла в веб-страницу
Тема: элемент audio
с^> Ссылка: wdpg.io/2/6-4-0
Добавить аудиофайл на веб-страницу практически так же легко, как видео поскольку многие атрибуты тегов <audio> и <video> схожи. Для начала рассмотрим синтаксис, который следует использовать с аудиофайлом одного формата:
<audio 5гс="файл"
controls
autoplay loop>
</video>
•	src — определяет местоположение аудиофайла
•	control s — если указано, то браузер отображает в окне проигрывателя элементы управления воспроизведением
•	autoplay - если указано то браузер автоматически начинает воспроизведение аудиофайла, как только загрузит количество аудиоданных, достаточное для непрерывного воспроизведения.
•	loop — если указано, то браузер повторяет воспроизведение файла с начала после завершения
Рассмотрим пример
^Пример ф Ссылка wdpg.io/2/6-4-1
В этом примере показано, как встроить в веб-страницу аудиофайл одного формата.
ВЕБ-СТРАНИЦА
II----------------------•---------- 1
<audio src="/audio/music.mp3" controls
autoplay loop>
</audlo>
122
Резюме
Чтобы использовать аудиофайлы двух или более форматов, удалите из тега <audio> атрибут src и добавьте несколько тегов <source>, по одному для каждого Формата
«audio controls
autoplay
]оор>
«source src="файл" type="mun">
</audio>
• src — как и в других случаях, атрибут src каждого тега <source> содержит имя и/или местоположение аудиофайла.
* type — определяет тип аудиоформата (как рассказывалось ранее в этом подразделе).
Рассмотрим пример
► Пример
е^> Ссылка: wdpg.io/2/6-4-2
В этом примере показано, как встроить в веЬ-страницу аудиофайлы нескольких форматов
<audio controls
autoplay
loop>
«source src='7audio/music.mp3" type="audio/mp3">
«source src="/audio/music.wav" type="audio/wav">
«source src="/audio/music.webm" type="audio/webm">
«source src="/audio/music.ogg" type="audio/ogg">
«source src='7audlo/music.m4a" type="audio/mp4">
</audio>
РЕЗЮМЕ
• Во Всемирной паутине распространены изображения четырех основных форматов GIF, JPEG, PNG и SvG (им на смену приходят стандарты WebP и AVIF). На большинстве страниц используется формат JPEG — для фотографий и многоцветных изооражений, а также формат PNG - для иллюстраций, логотипов и значков с преимущественно однотонными цветами и/или прозрачностью
123
Добавление изображений и медиафайлов
•	Чтобы добавить изображение на страницу используйте тег <img>
<img src="0au/7" аИ="описание" title="nodcKa3Ka">
•	Чтобы разметить изображения семантически в духе HTML5, поместите элемент img в элемент figure и по желанию добавьте элемент figcaptione
•	Чтобы изображение ссылалось на другой сайт, страницу или файл, окружите элемент img тегами элемента а
•	Изображение можно установить в качестве фона элемента, добавив показанное ниже свойство в CSS-код:
background-image: иг1(файл);
•	Можно управлять отображением фонового изображения, добавив любые из следующих свойств, background-repeat backgroundposition и background-attachment
•	Можно кратко указать значения этих трех свойств, а также свойств background-color и background-image с помощью краткой нотации свойства background
•	Для добавления видеоролика на веб-страницу используйте тег <video>. а аудиофайла — тег <audio>
•	С помощью тегов <video> и <audio> можно перечислить несколько форматов, добавив для каждого из них отдельный тег <source>
Глава 7
Дополнительно о стилях
В этой главе
	Три метода добавления стилей на веб-странипу.
	Управление стилями с помощью классов.
	Единицы измерения, поддерживаемые в CSS.
Как создавать уникальные страницы, которые выходят за оамки привычного и блещут новизной7 Ответ один использовать стили. Если работы веб-дизайнера вызывают у вас восхищение, значит, он глубоко освоил стили CSS. и в этом секрет его шедевров В первой части книги вы уже познакомились с несколькими полезными стилями, но это лишь малая толика всего доступного вам Эта глава поднимет ваши знания о CSS на новый уровень.
125
Дополнительно о стилях
ПАМЯТКА
Стиль — это инструкция, сообщающая браузеру о том, как изменить вид некоего элемента на странице, а таблица стилей (CSS) — это набор стилей. 13 книге я использую эти термины как взаимо-заменяемые.
ЧАВО
Нужен ли пробел после двоеточия?
Строго говоря, нет. Но я рекомендую добавлять его чтобы код стилей было удобнее читать
ДОБАВЛЕНИЕ СТИЛЕЙ
НА СТРАНИЦУ
В главе 1 я упоминал, что веб-страница — это текстовый файл, заполненный обычным текстом и стратегически расположенными НТ ML-тегами, предназначенными для его структуризации К счастью, таблицы CSS — тоже текстовый документ, поэтому вам не понадобится сложное ПО Начать работу со стилями поможет простой текстовый редактор (или уже неоднократно упоминавшаяся песочница Web Design Playground).
Несмотря на кажущуюся простоту стилей, добавление их на вебстраницу - более сложный процесс Начнем с того, что (см. главу 1) одно объявление стиля состоит из пары «свойство — значение», в которой используется определенный синтаксис (рис. 71).
Имена свойств обычно пишутся строчными буквами (хотя это и не обязательно). Если значение содержит пробелы. цифры или знаки препинания, кроме дефиса (-), то его следует взять в кавычки.
Сложность использования CSS связана с тем, что указать браузеру, какие декларации стилей необходимо применить, можно, используя целых три способа
• строчные стили;
Имя	Значение
CSS-свсиства	свойства
свойство: значение;
Свойство и значение разделяются двоеточием (:) с пробелом
► Рис. 7.1. Синтаксис пары «свойство — значение»
•	внутренние стили;
•	г-нешние стили.
В следующих трех уроках вы познакомитесь с этими методами
Урок 7.1. Добавление строчных стилей
Тема: атрибут style
сф- Ссылка: wdpg.io/2/7-l-O
На мой взгляд, самый простой способ добавить стили на веб-страницу — i-недрить их непосредственно в элемент который необходимо изменить Эта техника называется строчной (встроенной) стилизацией, осуществляемой путем добавления атрибута style в HTML-элемент, который следует изменить. На рис 72 показан универсальный синтаксис данного способа.
126
Добавление стилей на страницу
Элемент веб-страницы,
который необходимо
стилизовать	Пары «свойство — значение»
^элемент sty1е="свойство!: значение!; свойство2: значение2; ...">
Атрибут стиля
► Рис. 7.2. Синтаксис строчных CSS
При использовании строчных стилей следует иметь в виду несколько моментов
•	Если необходимо добавить несколько пар «свойство — значение» в одном строчном стиле, то обязательно отделяйте каждую из них точкой с запятой (;)
•	Если значение необходимо заключить в кавычки, то используйте одинарные О-
•	Строчный стиль оказывает влияние только на тот элемент в котором размешен атрибут стиля.
Ниже приведено несколько примеров, р которых используются строчные стили.
ВНИМАНИЕ!
Поскольку значение атрибута style взято в двойные кавычки. то будьте внимательны, если пару •свойство — значение» нужно заключить в кавычки отдельно. В этом случае окружите значение одинарными кавычками, например, так: style= "font-family; 'PT Sans';"
► Пример
c£> Ссылка: wdpg.io/2/7-1-1
В этом примере показаны дьа ст рочных стиля: один, примененный к злементу р.
и второй, с несколькими парами «свойство—значение», примененный к элементу ul
The snowclone is a kind of phrasal template since it comes with one or more empty "slots" that get filled with words to create a new phrase. Some examples:
} Содержимое элемента p
•	I m not an X, but I play one on TV
•	In X, no one can hear you Y
•	X and Y and Z, oh my!
Содержимое элемента ul
127
Дополнительно о стилях
Строчный стило элемента p настраивает размер шрифта
<р style="font-size: 1.5em">
The <i>snowclone</i> is a kind of <i>phrasal template</i> since it comes with one or more empty "slots" that get filled with words to create a new phrase. Some examples: </p>
<ul style="color: darkgreen; font-family: 'Trebuchet MS', sans-serif; font-size: 1.25em;">
<li>l‘m not an X, but 1 play one on TV</li>
<li>In X, no one can hear you Y</li>
<li>X and Y and Z, oh my!</li>
</ul>
Строчные стили элемента ul определяют цвет, семейство и размер шрифта текста
ПРАКТИКУМ
Сможете ли вы найти оишб ку в атрибуте стиля в этом теге <а>?
<а href="https:// www.wB.org/TR/ css-style-attr/" style="color: indianred; fontweight: bold, text-decoration: none;“>
Ссылка wdpg.ю/2/7-1-3
С помощью строчных стилей проще всего добавить CSS-код на страницу. Тем не менее этот способ подходит не для всех случаев подряд, а только для наипростейших страниц, поскольку атрибут style нужно добавлять непосредственно к каждому стилизуемому элементу. Если ваша страница содержит, скажем, десяток элементов h2 и все они должны быть оформлены одинаково, то вам придется добавить и десяток атрибутов стиля Хуже того, если позднее вы решите изменить оформление заголовков h2, то вам придется изменить каждый экземпляр стиля Это очень трудоемко, поэтому большинство веб-дизайнерон не используют строчные стили или применяют их только в исключительных случаях.
Как же поступают эти дизайнеры7 Используют внутренние стили
Урок 7.2. Добавление внутренней таблицы стилей
Тема: элемент style
Ссылка: wdpg.io/2/7-2-0
Второй способ внедрения стилей в веб-страницу заключается в добавлении пары тегов <stylex/style> в раздел заголовка страницы (то есть между тегами <head> и </head>) и последующем определении стилей между указанными тегами Этот метод называется внутренней таблицей стилей (иногда встроенной таблицей стилей) и основан на следующем общем синтаксисе
128
Добавление стилей на страницу
<style>
Элементы веб-страницы, которые необходимо стилизовать
селекторА { -4—-свойстбоА!: значенаеА1'> свойствоА2: значениеА2'}
Декларация (-и)
} *
селекпорБ {
Декларации заключены в открывающую и закрывающую фигурные скобки
свойствоБ!: значениеБ1} свойствоБ2: значениеБ21,
Правило стиля
</style>
Из синтаксиса видно, что внутренняя таблица стилей состоит из правил (-а) стиля, каждое из которых определяет одну или несколько лар «свойство — значение», которые будут применяться к указанным элементам веб-страницы. Каждое правило имеет следующие характеристики
•	Селектор, определяющий элементы веб-страницы, к которым нужно применить стиль Часто этот селектор содержит имя тега, но может указывать на любой другой тип CSS-селектора (например селектор класса, описанный в уроке 74)
•	Открывающая левая скобка ({)
•	Пара (-ы) «свойство — значение» разделенная (-ые) точкой с запятой.
•	Закрывающая правая скобка (})
На языке CSS пара «свойство — значение» называется декларацией, а набор деклараций, применяемых к селектору, то есть скобки и пары «свойство — значение» между ними, называется блоком декларации Комбинация селектора и его блока декларации называется правилом стиля В следующем примере внутренняя таблица стилей используется для форматирования элемента dt
к Пример Ссылка: wdpg.io/2/7-2-1
В этом примере внутренняя таблица стилей используется для изменения размера шрифта и полужирною начертания всех элементов dt.
Some movie jobs to commit io memory:
► Gaffer
/	The head electrician.
Содержимое	- - ► Best Boy
элемента dt	The gaffer's assistant.
"—► Grip
A person who moves equipment.
129
Дополнительно о стилях
<style> dt {
font-size: 18рх; I Правило CSS font-weight: bold; для элемента dt
}
c/style*
<p>Some movie jobs to commit to memory:</p>
<dl>
dt >Gaffer</dt> *	- Теги u содержимое
<dd>The head electrician.</dd>	? элементов dt
<dt>Best Boy<./dt> w
<dd>The gaffer's assistant.</dd>
<dt>Grip</dt> -*
<dd>A person who moves equipment.</dd>
</dl>
ПРОФИ
Блоки деклараций могут быть довольно длинными и содержать десять и более пар «свойство — значение». Один из способов облегчить чтение и работу с такими большими блоками — сортировать содержимое декларации в алфавитном порядке по именам свойств.
Итак, вы увидели одно из главных преимуществ использования внутренних стилей Если на вашей странице есть десять элементов dt, то указанный одинаковый стиль применяется ко всем, что придает странице единообразный вид И что самое прекрасное — если вы решите, что размер шрифта 20 пикселов у элементов dt будет смотреться лучше, то понадобится изменить значение только один раз в объявлении стиля и это изменение будет автоматически применено ко всем вашим элементам dt
Внутренние стили прекрасно подойдут, если ваш сайт состоит из одной веб-страницы. Такие сайты не редкость, но гораздо более вероятно, что наш или клиентский сайт будет содержать несколько страниц, возможно, даже несколько десятков. Если страницам, необходимо придать единообразие (а вам следует это делать, так как единообразие — одна из отличительных черт хорошего веб дизайна), то под использованием внутренних таблиц стилей подразумевается копирование/вставка одною и того же тега <style> на каждую страницу Кроме того, чтобы изменить хотя бы один аспект любого правила стиля вы должны внести изменения на каждой странице Чем больше у сайта страниц, тем более трудоемким окажется их сопровождение и тем больше вероятность перехода на внешние таблицы стилей.
130
Добавление стилей на страницу
Урок 7.3. Отсылка на внешнюю таблицу стилей Тема: элемент link
Ссылка: wdpg.io/2/7-З-О
Третий (последний) метод добан ления стилей на страницу подразумевает создание второго текстового файла, который используется для хранения правил стиля. Этот метод называется внешней таблицей стилей, и в имени файла традиционно используется расширение .css (например styles, css) В этом файле используется тот же синтаксис, что и для внутренней таблицы стилей, но без элемента style
Элементы бед-страницы, которые необходимо стилизовать .________—
селекторА { * свойствоА!: значениеА!; _________
ПАМЯТКА
Традиционно текстовый файл внешней таблицы стилей имеет расширение . css (например, styles.css/
селекторБ {
свойствоБ1: значениеБ!;
свойствоБ2: значениеБ2;
Декларации окружены открывающими и закрывающими фигурными скобками
Правило стиля
}
Чтобы браузер смог обнаружить внешнюю таблицу стилей, следует добавить тег <link> в раздел заголовка веб-страницы. На рис 7.3 показан синтаксис.
Расположение внешней таблицы стилей
Сообщает браузеру, что файл таблицы находится в связанном файле таблицы стилей
clink href="расположение/имя-файла.css" rel="stylesheet">
Имя внешнего файла таблицы стилей
► Рис. 7.3.
Синтаксис гега <link> для прикрепления внешней таблицы стилей к веб-странице
В описываемом синтаксисе значение location — пожалуй, самое сложное Поддерживаются четыре варианта
•	Ссылка на CSS-файл в том же каталоге Вы не указываете путь и ссылаетесь только на имя файла, например, так
clink href="styles.css" rel="stylesheet">
131
Дополнительно о стилях
•	Ссылка на CSS-файл в подкаталоге каталога с веб-страницей. Дополнительно указывается имя подкаталога Например, если подкаталог называется css, то можно сослаться на файл так.
clink href="css/styles.css" rel=‘stylesheet">
•	Ссылка на CSS-файл в подкаталоге основного подкаталога сайта Локацией служит корневой каталог (/), за которым следует имя подкаталога. Например, если подкаталог называется css, то можно сослаться на файл так’
clink href="/css/styles.css" rel="stylesheet">
•	Ссылка на CSS-файл на удаленном сервере Указывается полный URL CSS-файла Например:
clink href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet'l>
ПАМЯТКА
Как и в случае с тегом <style>, некоторые теги clink> со ссылками на внешние CSS-файлы могут содержать атрибут type="text/ css". Он требо вался для прохождения про верки кода в версии HTML 4.01 и в HTML5 не нужен.
Внешние таблицы стилей обладают тремя основными преимуществами
•	Если вы привяжете одну и ту же внешнюю таблицу стилей к нескольким страницам и оформите, скажем все элементы hl то эти заголовки будут выглядеть одинаково на всех страницах
•	Обновлять и поддерживать оформление страниц гораздо проще если вы внесете изменения во внешнюю таблицу стилей CSS, то они автоматически отразятся на всех веб-страницах, которые содержа! ссылку на этот CSS-файл
*	Усиливается разделение между структурой и представлением Используя внешнюю таблицу стилей, вы разделяете свой проект на два разных слоя, структурный файловый слой, касающийся только HTML-разметки, и слой представления файлов, отвечающий только за правила CSS Безупречно
Это не значит, что вы должны использовать только внешние таблицы стилей и забыть о строчных стилях и внутренних таблицах стилей Существует множество веских причин для использования элемента style, и некоторые задачи дизайна веб-страниц проще всего решить, используя атрибут style в HTML-коде Нет необходимости придерживаться строго до1 матического подхода к CSS. работайте так, как вам удобно
Урок 7.4. Использование селекторов классов
Тема: селектор класса
Ссылка: wdpg io/2/7-4-0
Ранее вы узнали, что при определении правила стиля первым указывается объект веб-страницы, который нужно стилизовать, а затем следует блок объявления
селектор {
свойство!: значение!;
свойство2: значение2;
}
132
Добавление стилей на страницу
Описываемый объект называется селектором, и до сих пор в этой книге он использовался в контексте HTML-элементов, таких как hl и div Это так называемый селектор типа поскольку он нацелен на HTML -элемент определенного типа
Селекторы типов очень удобны, и вы будете часто использовать их в своей карьере веб-дизайнера, но не сразу столкнетесь с проблемой как поступить, если есть несколько разных элементов одного типа, которые нужно оформить по-разному7 На веб-странице может быть несколько десятков элементов div, так что же делать если одни из этих контейнеров, требуется, скажем, выровнять по правому краю отформатировать курсивным светло-серым текстом размером 20 пикселов, а другие — выровнять по центру и отформатировать полужирным темносерым текстом размером 24 пиксела7 Конечно, можно реализовать все форматирование с помощью строчных стилей, но вы быстро устанете и запутаетесь если работаете с десятками элементов
Чтобы решить эту и подобные проблемы, можно воспользоваться множеством других разновидностей селекторов CSS Благодаря им каскадные таблицы стилей стали такими гибкими и мощными Думаю, я ничуть не преувеличу, если скажу, что достижение уровня гуру CSS или (что. в обшем-то, одно и то же) большой востребованности в качестве веб-дизайнера требует освоения селекторов — это самый легкий путь к желаемой цели. Чтобы начать его ознакомьтесь с пожалуй, самым мощным селектором CSS — селектором классов
Один из самых распространенных сценариев веб-дизайна — наличие нескольких объектов страницы, которым требуется одинаковый стиль. Если у вас есть набор элементов, требующих одинакового оформления, то можно сгруппировать их с помощью атрибута class, синтаксис которого показан на рис. 7.4.
Элемент веб-страницы
Имя класса
олемент class-"имя-класса"'>
Атрибут class
► Рис. 7.4. Используйте атрибут class, чтобы присвоить HTML-элементу имя класса
Следующий код присваивает элементу span имя класса custombullet-text
<span class="custom-bullet-text">
Ключевой момент использования классов (и источник их эффективности) — возможность присвоения с помощью атрибута class одного и того же класса нескольким элементам. После этого можно задействовать внутреннюю или внешнюю таблицу стилей, чтобы определить стили
ПАМЯТКА
Бывают исключения, но в этой книге имена классов начинаются с латинской буквы; остальная часть имени может содержать любую комбина цию букв, цифр, дефисов (-) и под черкиваний (_).
Ссылка: wdpg io/2/7-4-3
ВНИМАНИЕ!
Имена классов чувствительны к регистру, то есть для браузера классы myClassName иmyclassname — совершенно разные.
133
Дополнительно о стилях
для этого класса, указав имя класса, которому предшествует точка (.), в качестве селектора
.имя-класса {
свойство!: значение!;
свойство2: значение2;
}
В следующем примере показано, как использовать селектор класса
> Промер О Ссылка wdpg ю/2/7-4 1
i. этом примере каждому элементу span присваивается имя класса, а затем для их оформления используется селектор классов CSS.
Cube, Dice, or Mince? What's the Diff?
ВЕБ-СТРАНИЦА
•	Chop: To cui into small pieces.
*	Cube: To cur into cubcshaped pieces.
•	Dice: To cut into small, cube-shaped pieces. 2“ dass-'custom-bullet-text"
•	Mince: To cut into very small pieces.
•	Shred: To cut or tear into long, thin irregular strips. ,
Стили не применяются к маркерам
.custom-bullet-text { color: brown;
font-size: 18px, line-height: 1.5;
}
Правило стиля для класса custom-bullet-text
<h3>Cube, Dice, or Mince? What's the Diff?</h3> <ul>
r clixspan class="custom-bullet-text">Chop: To cut into small pieces.</spanx/li>
r clixspan class="custom-bullet-text">Cube: To cut into cubeshaped pieces. </spanx/li>
clixspan class="custom- bullet-text">Dice: To cut into small, cube-shaped pieces.</spanx/li>
к clixspan class="custom-bullet^text'^Mince: To cut into very small pieces..</spanx/li>
► <lixspan_class="cus^om-bullet-text">Shred; To cut or tear '	into long, thin irregular strips.</spanx/li>
i	</ul>
Класс custom -bullet -text назначен
всем элементам span
134
Единицы измерения в CSS
ЕДИНИЦЫ ИЗМЕРЕНИЯ В CSS
При работе с многими стилями веб-страниц требуется указывать единицы измерения, например размер шрифтов, ширину границ и полей. До этого момента е данной книге для указания размеров я использовал пикселы (рх), но можно использовать и другие единицы измерения, которые перечислены в табл 7.1
► Таблица 7.1 Единицы измерения, поддерживаемые CSS-свойствами
Единица измерения	Название	Описание
рх	Пиксел	Абсолютная единица измерения, равная 1/96 дюйма
pt	Пункт	Абсолютная единица измерения, равная 1/72 дюйма
ет	Относительная единица	Относительная единица измерения, равная размеру шрифта элемента по умолчанию, унаследованному или определенному
гет	Главная относительная единица	Относительная единица измерения, равная размеру шрифта корневого элемента веб-страницы
VW	Ширина области просмотра	Относительная единица измерения, равная 1/100 текущей ширины окна браузера
vh	Высота области просмотра	Относительная единица измерения, равная 1/100 текущей высоты окна браузера
В табл 7.1 перечислены два типа единиц измерения абсолютные и относительные. Абсолютные единицы имеют фиксированный размер, поэтому можно быть уверенными, что элемент, размер которого задан с помощью такой единицы, всегда будет выглядеть одинаково С точки зрения дизайнера, можно считать этот факт положительным, но это не всегда так — особенно н Интернете, пользователи которого иногда меняют размер текста по умолчанию в настройках браузера Ваша задача как дизайнера — учитывать эти изменения, а не замещать их Абсолютные значения не рекомендуются поскольку они переопределяют настройки размера шрифта, установленные пользователем, а в области дизайна это табу Кроме того, как вы увидите в главе 14, абсолютные значения делают дизайн страницы слишком
ПРОФИ
Почему бы не применить оформление к элементу 11 в этом упражнении? Такое CSS-правило стилизо вала бы маркер. Обернув каждый элемент списка в теги <span>, можно форматировать только текст списка.
ВНИМАНИЕ1
Не путайте еди ницу измерения ет с элементом ет, который используется для выделения текста в HTML.
ПАМЯТКА
Корневой элемент ееб-страницы — html Ему авто матически присваивается либо размер шрифта, установленный браузером по у молчанию (обычно 16 пикселов), либо размер шрифта, заданный пользователем в настройках браузера
135
Дополнительно о стилях
ПРАКТИКУМ
Классы могут гораздо больше, чем я показал здесь Можно применить несколько классов к одному элементу, раз деляя имена классов пробела.» в значении атрибута class. Например, код <span class="red-text big-text"> применяет к элементу span два класса: red-text и bigtext.
Ссылка. wdpg.io/2/7-4-2
ограниченным, поэтому он не будет хорошо отображаться как на больших, так и на маленьких экранах
Поэтому современные передовые методы веб-дизайна касаются отказа от абсолютных единиц в пользу относительных, обычно rem или процентов Относительные единицы не имеют фиксированного размера Вместо этого они основываются на размере, предоставленном элементу. Этот размер может быть унаследован от родительского элемента или задан пользователем по умолчанию Если в настройках браузера пользователь задал для обычного текста размер 16 пикселов, а вы отформатировали <р> стилем размера 1.5 rem, то обычный текст будет отображаться как имеющий размер 24 пиксела Если пользователь увеличит размер обычного текста до 20 пикселов то на ваших страницах он будет отображаться как имеющий размер 30 пикселов с учетом относительного размера текста Кроме того, относительные размеры хорошо масштабируются на разных устройствах, поэтому дизайн, который хорошо смотрится на экране настольного компьютера, можно сделать таким же приятным на вид и для экрана смартфона (Подробности — в главе 14 )
РЕЗЮМЕ
•	Строчные стили встраиваются непосредственно в тег с помощью атрибута style
•	Внутренняя таблица стилей формируется с помощью празил, описанных в элементе style
•	Внешняя таблица стилей сохраняется в виде отдельного файла с расширением . css и добавляется ссылкой в теге <link>
•	Селектор класса применяет правила CSS к любым элементам с указанным именем класса
•	Для CSS-свойств, требующих указания единиц измерения, рекомендуется использовать одну из следующих единиц рх pt em rem vw или vh
Глава 8
Выравнивание
и позиционирование элементов
В этой главе
	Основы размещения элементов на странице
•	Изменение стандартного потока путем выравнивания элементов.
	Создание буквицы и цитат с помощью выровненных элементов.
	Изменение стандартного потока путем позиционирования элементов.
Без контроля с вашей стороны браузер отображает скучные (по крайней мере с точки зрения дизайна) неструктурированные страницы Чтобы избежать массового ухода посетителей со своего сайта, вам нужно взять под контроль элементы страницы, измениз стандартные настройки браузера Для достижения цели потоебуекя два самых мощных инстоумента CSS из арсенала веб-дизайнера, выравнивание и позиционирование элементов С их помощью вы сможете выйти за пределы стандартного потока браузера и создать креативные страницы, которые людям будет интересно посещать. В этой главе вы узнаете о том, как это сделать
137
Выравнивание и позиционирование
СТАНДАРТНЫЙ ПОТОК СТРАНИЦЫ
Браузер выстраивает добавленные на вебстраницу элементы в том порядке, в котором они указаны з HTML-файле, в соот ьетствии со следующими правилами:
•	блочные элементы располагаются по вертикали, первый элемент сверху, второй под ним и т. д.;
•	строчные элементы отображаются слева направо (по крайней мере в английском, русском и многих других языках) внутри своего родительского блочного элемента
На рис 8.1 приводится схема нескольких блочных элементов, расположенных так, как их отображает браузер На рис 8 2 показана соответствующая веб-страница с добавленными на нее элементами.
<hl>
<div class-"toc">
<р class="quotation">
<р class="quotation">
<р class="quotation">
<h2>
<p>
<h2>
► Рис. 8.1. Браузер укладывает элементы блочного уровня один на другой
<hl> Using Colors Effectively
<div class="toc">
Table of Contents
Color Psycbvlogy Color Schemes
Color Caveats \ be* Lxiiinplev
Best Practices CSS and Colot
<p class="quotation">
"There arc only 3 colors, 10 digits, and 7 notes; itswhar we do with them that s important."  Jim Rutin
'	"Some colors reconcile (Ьешм.-!ves to иос uoober. Jthers just clash” — Edvaid Munch
•‘All colors are the friends of their neighbors and the lovers of their opposites." —Mare < Chagall
<h2>
<P>
<h2>
Color Psychology
When sclccnng colors, think about the psychological impact that your scheme will have on your users Studies have shown that "cool" colon such as blue and gray evoke a sense or dependability and trust. Use these colon for a more business-like appearance For pages that require a little mure excitement, "warm” colon such as red, yellow, and orange can evoke a festive, fun atmosphere. For a safe, comfortable ambiance, try using brown and yellow. For an environmental touch, use green and brown
Color Schemes
► Рис. 8.2. Блочные элементы с рис 8.1. заполненные строчными элементами
138
Стандартный поток страницы
Урок 8.1. Выравнивание элементов
Тема: свойство f loat
сф Ссылка: wdpg.io/2/8-1-0
Вы можете изменить стандартный нисходящий поток элементов, выровняв элемент (-ы) по левому или правому краю. Выравнивание элемента означает, что браузер извлекает элемент из стандартного потока и помещает его как можно правее или левее (в зависимости от указанного значения) и как можно выше (в зависимости от другого содержимого) в его родительском элементе. Затем остальное содержимое страницы обтекает выровненный элемент. Для выравнивания используется настройка свойства float:
элемент {
float: left | right | попе;
}
Так, изображенная на рис. 8 2 страница выглядела бы красивее и компактнее, если бы содержимое можно было сдвинуть вправо, а цитаты обтекали бы его Это легко сделать с помощью с войства float, как показано в следующем примере.
ПРОФИ
Соседние невыровненные элементы страницы обтекают выровненный элемент, поэтому вы должны создать достаточное свободное пространство между ними, увеличив отступ пи периметру плавающего элемента.
ПАМЯТКА
В отличие от невыровненных элементов верхнее и нижнее поля выровненных элементов не схлопываются. Подробнее о схлопывании полей читайте в главе 9.
^Пример Ссылка: wdpg 10/2/8-1-1
В этом примере с помощью свойства float мы выравниваем содержимое по правому краю.
Using Colors Effectively
"There are only 3 colors, 10 digits, and 7 notes; it's what we do with them that's important.'’ — Jim Rnhn
“Some colors reconcile themselves to one another, others just clash ” —Edvard Munch
"All colors arc the friends of their neighbors and the lovers
x	of their opposites." - Marc Chagall
o_
9 Color Psychology LU
“	When selecting colors. think abour the psychological impact that
your scheme will have on your users. Studies have shown that "cool'* colors such as blue and gray evoke a sense of dependability and trust. L'sc these colors for a more business-like appearance. For pages that require a little more excitement, “warm'' colors such as red, yellow, and orange can evoke a festive, fun atmosphere. For a safe, comfortable ambiance, try using brown and yellow. For an environmental touch, use green and brown.
Color Schemes
Table of Contents
Color Psychology Color Schemes Color Caveats A Few Examples Best Practices CSS and Color Color Resources
139
Выравнивание и позиционирование
•toe {	' Свойство float.
float: right;	применяемое к классу toe
margin-left: 2em;
margin-bottom: 2em;
<hl>Using Colors Effectively</hl>
<div class="toc">
<h3>Table of Contents</h3>	Эилому элементу div
<div>Co!or Psychology</div>	назначен класс toe
<div>Color Schemes</div>
<div>Culor Caveats</div>
<div>A Few Examples</div>
<div>Best Practices</div>
<div>CSS and Color</div>
<div>Color Resources</div>
</div>
<p class="quotation">
"There are only 3 colors, 10 digits, and 7 notes; it's what we do with them that's important." -Jim Rohn
</p>
ВНИМАНИЕ!
Выравнивал строчный элемент, не забудьте настроить его ширину, чтобы браузер отвел под него корректное простра нет во.
ЧАВО
Можно выравни ватъ только блочные элементы?
Нет. Можно применить свойство float и к строчному элементу, например span. Одна ко в этом случае браузер извлекает элемент из стандартного потока, превращает элемент в блочный и только потом выравнивает.
СБРОС ОБТЕКАНИЯ ВЫРОВНЕННЫХ ЭЛЕМЕНТОВ
В предыдущем примере выровненное содержимое обтекают не только три цитаты, но и первый заголовок h2 (Color Psychology) и часть следующего за ним абзаца обычного текста. Обычно такое поведение приемлемо. Но как быть, если по эстетическим или иным причинам элемент h2 и его содержимое не должны обтекать содержимое?
Вы можете сбросить обтекание элемента h2 В этом случае браузер отобразит сброшенный элемент ниже выровненного элемента. Сброс обтекания осуществляется путем настройки свойства clear: элемент { clear: left | right | both | попе;
}
Значение left запрещает обтекание элементов, выровненных по левому краю, right - выровненных по правому краю a both - выровненных как по правому, так и по левому краю. Чтобы очистить элемент 1т2 в примере, я бы использовал следующий код h2 { clear: right;
}
140
Предотвращение схлопывания контейнера
На рис. 8.3 показана страница с элементом h2 (Color Psychology), для которого сброшено обтекание содержания
Using Colors Effectively
'There are only 3 colors, 10 digits, and 7 notes; it's what we do witn them that's important." —Jim Rohn
"Some colors reconcile themselves to one another, others just clash ” —Edvard Munch
"All colors are the mends of their neighbors and the lovers of their opposites.” - Mare Chagall
Table of Contents
Color Psychology Color Schemes
Color Caveats A Few Examples Best Practices CSS and Color Color Resources
Color Psychology
When selecting colors, think about the psychological impact that your scheme will have on your users. Studies have shown thai "cool" colors such as blue and gray evoke a sense of dependability and mist. Use these colors for a more business-like appearance. For pages that require a little more excitement, "warm” colors such as red, yellow, and orange can evoke a festive, fun atmosphere. Fora safe, comfortable ambiance, try using brown and yellow. For an environmental touch, use green and brown.
► Рис. 8.3. Обтекание содержания элементом h2 Color Psychology запрещено
ПРЕДОТВРАЩЕНИЕ СХЛОПЫВАНИЯ КОНТЕЙНЕРА
У выровненных элементов есть несколько проблем, за которыми нужно следить Основная из них заключается в том, что при определенных обстоятельствах выровненный элемент может переполниться и/или выпасть из своего родительского контейнера. Чтобы понять, что я имею в 1иду. взгляните на следующий код (и на рис 8 4), в котором два элемента р находятся в контейнере div, в оформлении которого были указаны светло-голубой фон и красная рамка
CSS
ПРАКТИКУМ
Можно вырав ниватъ сразу несколько элементов.
Ссылка.
wdpg.ю/2/8-1-3
div {
bender: Ipx solid red;
background-color: lightcyan;
}
HTML:
<div>
<p>If you float two consecutive elements, the secund floated element will always either beside the first floated element or below it.</p>
<p>For example, if you float the elements left, the second will appear to the of the first. If there isn't enough room to the right, it will appear below the first element.</p> </div>
141
Выравнивание и позиционирование
► Рис. 8.4. Даа элемента р в контейнере div
If you float two consecutive elements, the second floated element will always appear either beside the first floated element or below it.
For example, if you float the elements left, the second will appear to the right of the first. If there isn't enough room to the right, it will appear below the first element.
На рис. 8 5 показан результат ограничения ширины и выравнивания по левому краю элементов р
CSS
.col {
•float: left;
width: 300px;
}
HTML:
<p class="col">
Контейнер div схлопнулся
► Рис. 8.5. Когда я перемещаю элементы р. контейнер div схлопывается
If you float two consecutive elements, the second floated element will always appear either pesiae the first floated element or below it
For example, if you float the elements left, the second will appear ro the right of the first. If there isn't enough room to the right, it will appear below the first element.
Странно, но контейнер div практически исчез! Красная линия сверху — это все, что от него осталось. Что случилось? Когда я выровнял элементы р, браузер извлек их из стандартного потока страницы Контейнер div обнаружил, что больше ничего не содержит, и схлопнулся Так всегда происходит, когда родительский элемент содержит только выровненные дочерние элементы.
Чтобы решить эту проблему, можно сбросить обтекание дочерних элементов родительского контейнера, тем самым предотвратив его схлопывание На рис 8 6 показан подходящий код класса
Внутри родительского элемента..
► Рис. 8.6. Класс, отвечающий за сброс обтекания дочерних элементов родительского контейнера
.self-clear::after { content: display: block; clear: both;
...добавляем пустую строку...
превращаем в блочный элемент
...и сбрасываем обтекание как по левому так и по правому краю
142
Предотвращение схлопывания контейнера
Этот класс дает браузеру указание вставить пустую строку, отображаемую как блочный элемент, и сбрасывает обтекание выровненных элементом как по левому, так и по правому краю 13 следующем примере данный прием показан на практике и содержит полный код.
ПАМЯТКА
Этот прием иногда называют методом ciearfix.
► Пример сф Ссылка: wdpg ю/2/8-1-5
В этом примере мы решаем проблему схлопывания родительского элемента, настраивая в нем сброс обтекания выровненных дочерних элементов.
If you float two consecutive elements, rhe second floated element will always appear either beside the first floated element or below it.
For example, if you float the elements left, the second will appear to the right of the first. If there isn't enough room to the right, it will appear below the first element.
div {
border: lpx solid red; background-color: lightcyan; width: 675px;
}
—> 3iwo правило форматируем элемент div
.col {
float: left;
width: 300px;
}
.self-clear::after { content: display: block; clear: both;
Этом класс ограничиваем ширину и выравниваем элемент
Эмом класс предотвращает схлопывание родительского элемента
<div class-"self-clear">
<p class="col">
If you float two consecutive elements, the second floated element will always appear either beside the first floated element or below it.
</p>
<p class="col">
F-or example, if you float the elements left, the second will appear to the right of the first. If there isn’t enough room to the right, it will appear below the first element.
</p>
</div>
143
Выравнивание и позиционирование
Схлопывание контейнера выглядит странно, но не стоит из-за этого отказываться от уравнивания элементов Существует много полезных вариантов применения выровненных элементов, в том числе создание не теряющей популярности буквицы, о которой вы узнаете далее
БУКВИЦА
[Зыравнивание элементов позволяет решить много задач дизайна, и одна из моих любимых - создание буквицы, то есть увеличенной первой буквы абзаца, которая располагается ниже базовой линии и «опускается» на несколько строк. Решение заключается в разметке первой буквы с помощью псевдоэлемента : :first-letter и ее выравнивании по левому краю абзаца Затем, чтобы добиться нужного эффекта, изменяются размер шрифта, высота строки и отступ, как показано в следующем примере.
► Пример
ВЕБСТРАНИЦА
се/ Ссылка wdpg ю/2/8-1-6
В этом примере свойство float и псевдоэлемент :: first-letter используются для создания эффекта буквицы
Буквица
Starting an article doesn’t have to be boring! Get your text off to a great beginning by rocking the opening paragraph with a giant first letter. You can use either
a raised cap (also called a stick-up cap or simply an initial) that sits on the baseline, or you can use a drop cap that sits below the baseline and nestles into the text.
1, Размечаем первую букву
.first-paragraph::first-letter { float: left; -*-------------—
padding-top: .lem;
padding-right: Лет;
color: darkred;
font-size: Sem; line-height: .бет;
}
2 Заравниваем ее по левому краю
3 форматируем, исходя из наших предпочтений
144
Цитаты
<р class="first-paragraph'^
Starting an article doesn't have to be boring I Get your text off to a great beginning by rocking the opening paragraph with a giant first letter. You can use either a <i>raised cap</i> (also called a <i>stick-up caps/i> or simply an <i>initial</i>) that sits on the baseline, or you can use a <i>drop capc/i> that sits below the baseline and nestles into the text. </p>
Буквицы добавляют веб-страницам изюминку и служат лишь небольшим примером возможностей выравнивания элементов В следующем разделе вы узнаете, как создать один из самых распространенных эффектов на крупных сайтах — обтекаемую цитату.
ЦИТАТЫ
Еще одно отличное применение выровненных элементов - добавление на страницу обтекаемой цитаты. Это лаконичный, но важный или выразительный фрагмент, выделенный из обычного текста Хорошо подобранная и оформленная цитата способна привлечь посетителя сайта, который в противном случае не стал бы читать статью
Обтекаемая цитата создается путем заключения фрагмента текста в контейнер, например span, и дальнейшего его выравнивания, обычно по правому краю Затем элементу придается необходимый стиль, чтобы он выделялся на фоне обычного текста настраиваются верхнее и/или нижнее поле, размер, начертание цвет шрифта и т. д. Рассмотрим пример.
► Пример
ПРОФИ
Если вы хотите создать приподнятую, а не опускающуюся буквицу, то попробуйте изменить код соответствующим образом. Для этого нужно удалить декларации float, padding-top и padding-right
i=J> Ссылка: wdpg.io/2/8-1-7
В этом примере свойство float используется для создания обтекаемой цитаты.
A pull quote is a short excerpt or an important phrase or
quotation that haslieeu copied (‘‘puller]’'} from a piece of I ext and displayed as a separate element between or, more often,
to • me side of the regular text. It’s important that the pull quote be styled in a way that not only makes it stand apart from the regular text (with, for example, a different font
66 It’s the job of the. pull quote to entice the would-be reader.
Обтекаемая цитата
size, style, or color), but also makes it stand out for the
reader After all, it’s the job of the pull quote to entice the would-be reader and create a desire to read the article.
145
Выравнивание и позиционирование
Этот код выравнивает .pullquote { X элемент по правому краю •float: right; width: 50%;
margin: 1.25em 0 lem .25em;
padding-top: .5em;
border-top: Ipx solid black; border-bottom: lpx solid black; font-size: 1.05em; font-style: italic; color: #666;
Эмоил код форматирует цитату
.pullquote::before { content: "\0201c“; float: left;
padding: .lem .2em .4em 0; font-size: 5em;
line-height: .45em;
}
Создание крупной кавычки (опционально)
<Р>
A <i>pull quote</i> is a short excerpt or an important phrase or quotation that has been copied ("pulled") from a piece of text and displayed as a separate element between or, more often, to one side of the regular text.
<span class="pullquote">
It's the job of the pull quote to entice the would-be reader.
</span>
It’s important that the pull quote be styled in a way that not nnly makes it stand apart from the regular text (with, for example, a different font size, style, or color), but also makes it stand out for the reader. After all, it's the job of the pull quote to entice the would-be reader and create a desire to read the article.
</p>
Элемент с цитатой
Несмотря на такие вызывающие недоумение артефакты, как схлопывание родительского контейнера, выравнивание поможет извлечь элементы из стандартного потока содержимого и получить интересные эффекты и макеты За размещение выровненных элементов г основном отвечает браузео поэтому при необходимости более полно упоаьлять внешним видом веб-страниц стоит обратить внимание на метод позиционирования элементов
146
Цитаты
Урок 8.2. Позиционирование элементов
Тема: свойство position
Ссылка: wdpg.ю/2/8-2-0
Ранее в этой главе я уже упоминал, что по умолчанию браузер отображает элементы в том порядке, в котором они указаны в HTML-коде складывая блочные элементы стопкой и заполняя родительские контейнеры строчными элементами слева направо Такая методология редко делает макет привлекательным поэтому выйти за пределы стандартного потока можно путем использования еще одного приема (помимо выравнивания элементов). Он заключается в ручном позиционировании элементов с помощью CSS-свойства position и одного/нескольких значений смещения элемент {
position: static I relative | absolute | fixed | sticky;
top: точное_значение | процентное_значение | auto;
right: точное_значение | процентное_зничение | auto;
bottom: точное_значение | проиентное_значение | auto;
left: точное_значение | процентное_значение | auto;
z-index: целое_значение | auro;
}
Для значений первых четырех свойств смещения — top, right, bottom и left — можно использовать любые единицы измерения CSS, о которых мы говорили в главе 7: рх, em rem, vw и vh Кроме того, можно применять процентное значение или ключевое слово auto (применяемое по умолчанию) Свойство z-index определяет позицию элемента в контексте «стопки», управляя тем, как элементы располагаются «поверх»/«позади», то есть перекрывая друг друга Элемент с большим значением свойства z-index отображается поверх элемента с меньшим значением.
Приведу краткое описание пяти значений свойства position:
•	static — игнорирует свойства смещения (поведение по умолчанию, используемое браузером);
•	rel ative — смещает позиционируемый элемент от его стандартной позиции, сохраняя ее в потоке страницы.
•	absolute — помещает элемент _ указанную позицию в ближайшем родительском, контейнере, который имеет нестатичную позицию, при этом удаляя элемент из потока страницы,
•	fixed — помещает элемент в указанную позицию в области просмотра браузера, при этом удаляя элемент из потока страницы
*	sticky - элемент располагается относительно до тех пор, пока содержащий его блок не пересечет (например, вследствие прокрутки страницы пользователем) указанный порог, после чего элемент останется «прилепленным».
В следующих нескольких разделах мы рассмотрим относительное, абсолютное, фиксированное и «липкое» позиционирование.
147
Выравнивание и позиционирование
ПАМЯТКА
Описываемые смещения предполагают, что вы используете положительные зна -чения свойств. Отри-цате п.ьные значения тоже допускаются (и часто используют ся веб дизайнерами) и приводят к сме щению в противоположном направлении. Например, отрица тельное значение, свойства top счеща ет элемент вверх.
ОТНОСИТЕЛЬНОЕ ПОЗИЦИОНИРОВАНИ Е
При относительном позиционировании элемент остается в обычном потоке страницы и при этом смещается на указанные значения
•	Если указать значение top, то элемент будет смещен вниз
•	Если указать значение right, то элемент будет смещен вправо
•	Если указать значение bottom, то элемент будет смещен вверх
•	Если указать значение left, то элемент будет смещен влево
В некоторых случаях смещение позиционируемых элементе-может привести к их необычному отображению в браузерах как показано ниже
► Пример
с^> Ссылка, wdpg ю/2/8-2-1
Ь этом примере элементу span задается относительное позиционирование путем смещения его вверх.
Relative positioning shifts an element out of its default position while preserving the element's original space in tne page flow. This can cause page weirdness. For example, if you set the top property, the element	. This leaves
a gap where the elen/ent would have been, which can look odd. [shifts down
„	------Смещенный
Пространство, в котором должен
J r	г	элемент span
был находиться элемен! span
span {
position, relative;
top: Зет;
border: 2px solid blue;
}
Применяем относительное позиционирование к элементу span и смещаем его вверх
148
Абсолютное позиционирование
<div>
Relative positioning shifts an element out if its default position while preserving the element's original space in the page flow. This can cause page weirdness. For example, if you set the top property, the element <span>shifts down</span>. This leaves a gap where the element would have been, which can look odd. </div>
Элемент span
Вояд ли вы будете часто поименять относительное позициони рование для непосредственной компоновки элементов страницы, но. как вы увидите в следующем разделе, этот метод пригодится при абсолютном позиционировании
АБСОЛЮТНОЕ
ПОЗИЦИОНИРОВАНИЕ
При абсолютном позиционировании браузер выполняет следующие действия извлекает элемент из стандартною потока страницы и позиционирует его относительно ближайшего нестатичного (то есть позиционированного) предка Верно определить предка крайне важно, если необходимо правильно позиционировать элемент абсолютно:
•	двигайтесь вверх по иерархии к родителям элемента, прародителям и т. д . по возрастающей по старшинству. Пеовый элемент, свойству position которого присвоено значение, отличающееся от static, и есть искомый предок,
•	если такой предок не найден, то браузер учитывает область просмотра, то есть абсолютная позиция элемента устанавливается относительно области просмотра браузера
ПРАКТИКУМ
Используя метод относительного позиционирова ния, добавьте в абзац водяной знак.
|_р Ссылка wdpg.io/2/8-2-2
ПРАКТИКУМ
Используя метод абсолютного позиционирования, можно добавить всплывающие подсказки (описания) к ссылкам.
|=1> Ссылка wdpg.io/2/8-2-4
Когда предок обнаружен, браузер устанавливает абсолютную позицию элемента по отношению к этому предку следующим образом.
•	если указать значение свойства top, то элемент перемещается вниз от верхнего края предка;
•	если указать значение свойства right то элемент перемещается влево от правого края предка
•	если указать значение свойства bottom, то элемент перемещается вверх от нижнего края предка;
•	если указать значение свойства left, то элемент перемещается вправо от левого края предка.
149
Выравнивание и позиционирование
^Пример с£> Ссылка: wdpg.ia/2/8-2-3
р этом примере мы относительно позиционируем и сместим вверх элемент span.
ВЕБСТРАНИЦА
Элемент span
Элемент strong
Область просмотра браузера	Элемент div
Lesson 8.2	\
Absolute Positioning
LfW<'	*
~ Авди* potjrwiing moves an element from в of huh acuwen, but doesn't preserve its original space In the page flow. The element's new position is set with respect to the nearest ancestor in the hierarchy that has a nonstatic position, or the browser window if no such ancestor exists.
Элемент div не статичен
Элементе» span и strong позиционируются абсолютно
hl, div {	з
position: relative, z-index: 2;
}
span { position, absolute; top: 0;
left: 0;
z-index: 1;
padding: 0..25em 6em 3em ^.25em; background-color; yellow;
color: blue;
}
strong { position: absolute; top: 0;
left: 0;
z-index: -1;
padding: 0.25em 5em 2.5em 0; background-color: orange; color: purple;
}
150
Фиксированное позиционирование
<hl>
Absolute Positioning
</hl>
<div>
Absolute positioning moves an element from its default position, but doesn't preserve its original space in the page flow. The element's new position is set with respect to the nearest ancestor in the hierarchy that has a nonstatic position, or the browser window if no such ancestor exists. <strong>Intro</sxrong> </div>
<span>Lesson 8.2</sPan> * Элементspan
' Элемент strong
В этом примере два элемента позиционируются абсолютно.
•	У элемента span нет не статически позиционированного предка, поэтому он позиционируется относительно области просмотра браузера. Присваивая свойствам top и left значение 0 вы перемещаете элемент span в левый верхний угол окна.
•	Элемент strong вложен в контейнер div, позиционируемый относительно. Поэтому абсолютная позиция элемента strong определяется относительно контейнера div В данном случае, присваивая свойствам top и left значение 0 вы перемещаете элемент strong в левый верхний угол контейнера div
Вы часто будете использовать абсолютное позиционирование для размещения определенных элементов на странице согласно своим потребностям
Есть еще два способа позиционирования, которые следует рассмотреть, в частности фиксированное позиционирование
ФИКСИРОВАННОЕ
ПОЗИЦИОНИРОВАНИЕ
Следующее значение свойства position, о котором я расскажу. — fixed Оно применяется так же, как и абсолютное, за исключением двух моментов
•	браузер определяет позицию элемента исключительно относительно области просмотра браузера,
•	позиционированный браузером элемент не перемещается, даже если вы прокручиваете содержимое страницы.
Как можно догадаться, фиксированное позиционирование может пригодиться для закрепления навигационной панели в верхней части экрана или подвала в нижней части страницы Последний пример рассматривается в главе 15
НАГЛЯДНОСТЬ Чтобы просмотреть анимацию позиционирования элементов из этого упражнения браузером, откройте пример в песочнице и нажмите кнопку See It (Посмотреть).
Ссылка wdpg.io/2/8-2-3
ПРОФИ
В этом примере, помимо прочих, используется свойство z-index Элементам hl и div присвоено значение z-index: 2. Элементу span присвоено значе ние z-index: 1, поэтому он отображается «позади» элемента hl. Элементу strong присвоено значение z-index: -1; поэтому он отображается «позади» элемента div
151
Выравнивание и позиционирование
«ЛИПКОЕ» ПОЗИЦИОНИРОВАНИЕ
Последнее значение свойства position, о котором стоит упомянуть, — sticky. Это значение представляет собой некую комбинацию относительного и фиксированного позиционирования. То есть элемент начинает позиционироваться относительно, пока его положение не ограничит заданный порог (обычно из-за того что пользователь прокручивает страницу), после чего элемент позиционируется фиксированно. Если после этого граница родительского блока элемента прокручивается до того места, где размещен элемент, то элемент вновь позиционируется относительно и прокручивается вместе с родительским
Предположим, на вашей странице есть элемент div, в который вложен «липко» позиционированный элемент h2 Когда пользователь прокручивает страницу вверх, элементы div и h2 прокручиваются имеете с остальным содержимым до тех пор, пока h2 не достигнет указанного порогового значения, после чего заголовок h2 перестает прокручиваться и «прилипает» к области просмотра При этом элемент div продолжает прокручиваться вверх. А что произойдет, когда нижняя часть элемента div достигнет «прилипшего» элемента h2? В этот момент заголовок h2 «отлипает» (то есть возвращается к относительному позиционированию) и вновь прокручивается вверх имеете с div
Что служит порогом согласно которому элемент «прилипает»? За него отвечают CSS-свойст ва смещения top right, bottom и left В качестве примера рассмотрим следующее правило CSS
•nav-links {
position: sticky;
top; 5px;
}
В данном примере элемент с классом nav-links будет прокручиваться вверх вместе с остальным содержимым страницы, пока его верхняя часть не окажется на расстоянии 5 пикселов от верхней границы области просмотра В этот момент элемент прекращает прокрутку и «прилипает» f 5 пикселах от верхней границы области просмотра.
Один из распространенных вариантов использования «липкого» позиционирования — это страница, в верхней части которой находится шапка с названием и изображением, а также ряд навигационных ссылок Вполне нормально если при прокрутке страницы вниз элементы шапки скрываются за верхней границей области просмотра, но было бы неплохо, если бы ряд навигационных ссылок при этом оставался в ее верхней части. Пример показан в главе 15
Важно отметить, что элемент «прилипает» не навсегда. Если у элемента есть родительский контейнер, то. как только его граница
152
«Липкое» позиционирование
достигнет «прилипшего» элемента, тот «отлипает» и прокручивается вместе с родительским контейнером. Таким образом можно фиксировать заголовки в верхней части страницы, содержимое раздела под заголовком прокручивается, а затем следующий заголовок «прилипает», пока содержимое соответствующего раздела прокручивается, и т д. как показано в следующем примере
► Пример и^> Ссылка, wdpg.io/2/8-2-7
В этом примере рассмотрим «липкое» позиционирование элементов И2.
«Прилипший» элемент h2
Your internet service provider (ISP)
features such as bandwidth and disk space at the lower end of the
scale.
х
A free web hosting provider
Many services will host your web pages without charge. The catch is that you usually have fairly severe restrictions on most hosting features, particularly bandwidth and disk space, and you almost always get only a single website. Some free web hosts also display ads, although that ’s becoming rare these days.
A commercial web hosting provider
If you want to get a reasonable set of features for your web presence, you need to shell out money to rent space with a
Элементы позиционируются «липко»
h2 {	>
position: sticky;
top: 0;	-	Каждый элемент h2
background-color: lightblue;	достижении верхней
}	границы области
просмотра «прилипает»
153
Выравнивание и позиционирование
<ы>
Getting a Web Host
</hl >
<р>
When you're looking for a web host, you have three main choices:
</p>
<div>
<h2>
Your internet service provider (ISP)
</h2>
Элементы fcz The company or institution you use to access the internet may also offer a web hosting service. Many ISPs offer free web hosting for simple personal websites, and some organization networks include a web server that you can use. </div> \ <div>
<h2>
A free web hosting provider
</h2>
Many services will host your web pages without charge. The catch is that you usually have fairly severe restrictions on most hosting features, particularly bandwidth and disk space, and you almost always get only a single website.
</div>
<div>
<h2>
A commercial web hosting provider </h2>
If you want to get a reasonable set of features for your web
presence, you need to shell out money to rent space with a commercial web hosting provider. Popular hosts such as BJuehost and HostGator offer feature-packed hosting usually for less than $5 per month. </div>
ЧАВО
Почему свойству z-inaex элемента strong было присвоено значение -1?
Элемент strong — потомок элемента div, а в CSS единственный способ отобразить потомка позади предка — это при. своить свойству z-inaex потомка отрицательно» значение.
РЕЗЮМЕ
•	В стандартном потоке страницы блочные элементы отображаются по вертикали, а строчные в соответствующих родительских блоках - по гооизонтали. слева направо
•	Чтобы извлечь элемент из стандартного потока страницы, следует присвоить его свойству float значение left или right
•	Чтобы позиционировать элемент, следует присвоить его свойству position значение relative, absolute или fixed; а затем указать новую позицию с помощью свойств смещений top, right, bottom и/или left
•	Элемент позиционируется поверх/позади остальных с помощью свойства z-index. В этом случае элементы с большим значением свойства z-index отображаются поверх элементов с меньшим значением
Глава 9
Управление размерами, границами и полями элементов
В этой главе
|  Принципы блочной модели CSS.
	Определение ширины и высоты элемента.
	Добавление отступа вокруг содержимого элемента.
	Управление границами элемента.
	Изменение поля элемента.
При изучении дизайна первоочередным можно назвать принцип близости' связанные элементы должны располагаться рядом друг с другом, а несвязанные следует разделить. Такой подход придает дизайну четкую визуальную организацию, повышая читабельность и удобство навигации для клиента Принцип близости применим и к дизайну веб-страниц, но есть одна проблема Если вы используете настройки форматирования, встроенные в браузер, то элементы вашей веб страницы не учитывают аспекты принципа близости: они не группируются и не разделяются так что речь о какой-либо организации даже не идет. Для решения этой проблемы в CSS реализован набор мощных свойств, касающихся применения принципа близости в рамках изменения размера элементов коррекции расстояния между ними и отделения их друг от друга на странице Подробнее о секретах верстки эффектных '<еб-страниц вы узнаете в части III, а в этой главе познакомитесь с некоторыми важными базовыми концепциями
155
Управление размерами, границами и полями
КОНЦЕПЦИЯ БЛОЧНОЙ МОДЕЛИ
Ключ к управлению содержимым веб-страницы — невидимый блок, который содержит любой элемент, который вы добавляете на страницу, — div. р. span и даже strong и ет. Почему это так важно9 Потому что с помощью CSS можно управлять многими аспектами этого блока, в том числе высотой, шириной, расстоянием между блоками, границами и положением на странице. Но сначала нужно познакомиться с различными частями блока
На рис. 91 показаны основные части блока, а на рис. 9.2 — как они влияют на внешний вид страницы
Поле
► Рис. 9.1.
Основные части блочного элемента
Граница
Отступ
Did у ou know that the tragus I TRAY gus, noun) is the little flap of cartilage that extends just above the earlobe and partially covers the entrance to the inner car? This entrance, by the way, is an example of a meatus (meeAY tus, noun), an opening into the body.
(одержимое
Note: Tragus comes from the Greek word tragos, “a male goat," which is a bn of a brow furrowcr. The explanation is that the tragus area is also where ear hairs sprout, so this combination must have reminded the Greeks of a billy goat and the beard' of hair that hangs under bis chin.
Поле
Отауп
The nasal columella (NAY zul koi urn EL uh, noun) is the ridge of cartilage that lies at the bottom of the nose and that separates the two nostrils. (Columella is Latin for little column.") Right below is the philtrum (FH.trum, noun), the central part of the upper lip.
► Рис. 9.2. Части блочного элемента на примере реальною содержимого страницы
156
Концепция блочной модели
ff Не побоюсь повториться и скажу: любой ' ' элемент в веб-дизайне — это прямоугольный блок. Когда я это понял, на меня снизошло озарение и я реально разобрался в веб-дизайне, CSS и научился верстать желаемые макеты.
Крис Койер
Любой блочный элемент состоит из четырех частей.
•	Содержимое — прямоугольник, состоящий из содержимого (текста или изображения) внутри блока
•	Отступ — пространство между содержимым и границей, отсчитываемое от верхнего, правого, нижнего и левого краев области содержимого
•	Граница — проходит по внешним краям области отступа и окружает содержимое с отступом линиями
•	Поле — внешнее прямоугольное пространство за пределами верхней, праной, нижней и левой границ.
Совокупность областей содержимого, отступа, границ и полей известна в кругах CSS-дизайнеров как блочная модель Удивительно, но она применима не только к блочным элементам (таким как div. hl и р) но и ко всем строчным элементам (например, span, ет и а). Почему блочная модель гак важна7 На это есть две основные причины внешний вид и позициониоование
Внешний вид очень важен, так как блочная модель позволяет управлять «воздухом» — простоанством, сочетающим отступы и поля, которые окружают содержимое Любой дизайнер скажет, что правильное использование «воздуха» — ключевая часть любого эффектного макета.
Позиционирование тоже важно, поскольку каскадные таблицы стилей предоставляют возможность управлять расположением элементов на странице Вместо обыденной и скучной компоновки, когда один элемент следует за другим по всей странице, в CSS доступны свойства настройки блочной модели, которые позволяют разместить каждый блок в соответствии с пожеланиями клиента.
Подводя итоги, скажу, что пришло время обратить внимание на полезные и мощные CSS-свойства, которые позволяют управлять блоками элементов Начнем с изменения размеров блока.
ПАМЯТКА
Следует уточнить, что описываемые вычисления применимы только к блочным элементам, таким как div и р. Строчные элементы, например span и а, перетекают вместе с текстом, поэтому настройки их ширины/высоты игнорируются.
157
Управление размерами, границами и полями
ПРОФИ
Если необходимо изменить ширину, высоту и прочие свойства в рамках блочной модели у строчного элемента, не меняя его на блочный, то используйте CSS-свойство display: inline-block А чтобы по-настоящему превратить элемент в блочный, добавьте инструкцию display: block.
ВНИМАНИЕ*
За редкими исключениями свойство height элемента не указывается Настройка высоты применима к изображениям, а в случае с текстом слишком сложно угадать корректную высоту содержимого. Пусть высота элемента меняется естественным образом.
ПРОФИ
Имеете того чтобы настраивать зна чение свойства Ьох-sizing отдельных элементов, настройте его однократно с помощью универсального селекто ра (*), применив ко всем элементам.
Если же вы захотите сбросить размеры элементов до стандартных, то можете использовать декларацию oox-sizing: content-box.
Урок 9.1, Определение ширины и высоты элемента
Тема: свойства width и height
Ссылка: wdpg.io/2/9-l-O
Браузеры выполняют множество автоматизированных вычислений при отображении страницы. Это может быть определение ширины/ высоты каждого блочного элемента на странице, осуществляемое в соответствии со следующими директивами
•	ширина блочного элемента устанавливается равной ширине ею контейнера и по умолчанию равна ширине области просмотра браузера,
•	высота блочного элемента устанавливается в соответствии с размещением всего его содержимого.
Один из главных постулатов прекрасного веб-дизайна заключается в том, что вы должны переопределить подобные настройки браузера, чтобы максимально полно управлять внешним видом и компоновкой своей страницы Изменить размеры любого блочною элемента позволяют CSS-свойства width и height Они принимают значение в любых единицах измерения CSS, о которых говорилось в главе 7, в том числе рх em rem vw и vh вдобавок вы можете указать ширину/ высоту в процентах или использовать значение auto (применяется по умолчанию, позволяя делегировать установку размеров браузеру).
На данном этапе возникает важный вопрос: какая из четырех частей прямоугольного блока элемента — содержимое, отступ, граница или поле — изменяется при настройке ширины/высоты? Интуитивно можно предположить, что граница, поскольку она содержит контент и отступ, то есть так называемое «внутреннее» содержимое блока элемента, Вы удивитесь, но это не так По умолчанию свойства width и height определяют размер только области содержимого. Это печально, поскольку для определения истинного размера элемента, отображаемою на странице необходимо учитывать и размеры его отступов и границ. Да, я с вами соглашусь, звучит сложно. Чтобы избавить себя от возможных проблем, присвоим свойству box-sizing элемента значение border-box
элемент {
box-sizing: border-box;
}
Согласно этому коду браузер при вычислении значений ширины и высоты элемента учитывает его границы Обратите внимание, что поля г.ри этом не учитываются.
Свойство widtn позволяет ограничить длину строки текста и повышает читабельность Чюбы чтение с экрана было комфортным, блоки основного текста должны содержать 50-80 символов в строке (учитывая пробелы и знаки препинания) В большинстве случаев оптимальны строки длиной около 65 символов но это значение можно увеличить если вы используете шрифт большего размера, или уменьшить в случае шрифта меньшего размера Длина строки
158
Концепция блочной модели
определяется с помощью свойства width блока текста Рассмотрим следующий пример (рис 9 3)
При длине строки более 150 символов текст трудно воспринимать Эту проблему можно решить изменил ширину элемента, содержащего текст, как показано в следующем примере
ПРАКТИКУМ
При изменении высоты элемента его содержимое может, выйти за границы элемента. Чтобы решить проблему, можно использовать свойство overflow.
Ссылка; wdpg ю/2/9-1-4
► J TjpUAtep t=> Ссылка wdpy ю/2/9-1-1
В этом примере мы уменьшаем ширину контейнера div, чтобы длина строк была белее удобной для чтения.
On March ig, 19R8, a man named Robert Muller .Jr was a passenger in a car driving along US Route 441 in Florida. At some point in the journey, the cai was cut off (or, at least, it appeared that way), enraging the car's occupants. Unfortunately, Mr. Muller had access to a gun, which he subsequently used to shoot out the back window of the other car, wounding 20-ycar-old Cassandra Stewart in the neck. Police described the shooting as an incident of "road rage,” and a name tor an all-too-common form of motorist madness was born.
630 px
div {
box-sizing: border-box;
Применяемся значение berder-box
width: 630px; }
___Указанная ширина определяем идеальную длину смроки
<div>
On March 19, 1988, a man named Robert Muller 3r. was a passenger in a car driving along US Route 441 in Florida. At some point in the journey, the car was cut off (or, at least, it appeared that way), enraging the car's occupants. Unfortunately, Mr. Muller had access to a gun, which he subsequently used to shoot out the back window of the other car, wounding 20-year-old Cassandra Stewart in the neck. Police described the sheeting as an incident of "road rage," and a name for an all-too-common form of motorist madness was born. </div>
On March 19,19X8, a man named Robert Muller Jr. was a passenger in a car driving along US Route 441 in Florida. At some point in the journey, the car was cut off (or, at least, it appeared that way), enraging the car’s occupants. Unfortunately. Mr. Muller had access to a gun, which he subsequently used to shoot out the back window of the other car, wounding 20-year-old Cassandra Stewart in the neck Police described the shooting as an incident of "road rage,” and a name for an all-too-common form of motorist madness was bom.
► Рис. 9.3. При стандартной ширине на большом экране строки этого текста слишком длинные, и это снижает комфортность чтения
159
Управление размерами, границами и полями
Настроив шиоину (и при необходимости высоту) блока, вы можете сосредоточиться на различных частях блочной модели, начиная с отступа.
Урок 9.2. Управление отступами
Тема: свойства padding-*
сф Ссылка: wdpg'O/2/9-2-r
ПРАКТИКУМ
Максимальная ширина элемента ограничивается свойством тах-width, амина мольная — свойством min-width. сф Ссылка: wdpg. ю/2/9-1-3
В блочном элементе отступ — эго пространство добавляемое над и под содержимым, а также слева и справа от него Если добавить в элемент । раницу. как будет описано в уроке 9 3 то отступом станет пространство между содержимым и границей Отступ дает элементу немного места, чтобы у него было достаточно поосгранства в пределах его области а содержимое не было вплотную окружено г раницами само, о элемента или соседними элементами Отступы можно настроить, указав соответствующие значения для одной или нескольких сторон элемент {
padding-top: отступ-сверху;
padding-rignt: отступ-справа;
padding-oottom: отступ-снизу;
paddingleft: отступ-слева;
}
Значение можно указать в любых стандартных единицах измерения CSS, в том числе рх, em rem vw и vh а также процентах. Рассмотрим пример
.pullquote {
padding-top: lem;
padding-right: l.Sem;
padding-aottom: .75em;
padding-left: 1.25em;
Кроме того, вы можете воспользоваться сокращенной нотацией свойства padding, определяя все отступы ь одном обьявлении В этом случае можно использовать четыре варианта синтаксиса, показанные на рис 9 4
Применяет отступ ко всем--—
четырем сторонам	элемент {
-► padding: отступ;
Применяет отступ! сверху -—'	‘— ► padding: omcmynl
и снизу и отступ2 справа и слева	padding: omcmynl
Применяет отступ! сверху, огступ2 справа и слева, а отступЗ — снизу
Применяет отступ! сверху, огступ2 справа, отступЗ снизу и отступ4 слева
отступ2;
отступ2 отступЗ;
отступ2 отступЗ отступ4;
padding: omcmynl }
► Рис. 9.4. Сокращенная нотация свойства padding
160
Концепция блочной модели
Правило из приведенного выше примера можно записать так
.pullquute {
padding: lem 1.5em .75em 1.25em;
}
Чтобы попрактиковаться с отступами и узнать, как с их помощью изменять дизайн веб-страницы, рассмотрим простую навигационную панель, показанную на рис 9 5
HOME RESEARCH PAPERS BLOG CONTACT INFO
► Рис. 9.5. Навигационная панель без горизонтальных отступов
Основная проблема заключается в том, что визуально невозможно определить количество элементов навигации Их может быть как шесть (Home. Research Papers. Blog. Contact и Info), так и три (Home. Research Papers Blog и Contact Info) Чтобы решить эту проблему, можно настроить отступы, увеличив горизонтальное пространство между элементами, как показано в следующем примере
ПРОФИ
F3 этом упражнении неупорядоченный список превращается в навигационную панель благодаря двум этапам; присвоению свойства list-style-type : попе элементам ul с целью скрыть маркеры списка и присвоению свойства display: inlineblock элементам li, чтобы браузер определил их как блоки, но отобразил как строчные.
^Пример t=> Ссылка: wdpg.io/2/9-2-1
В этом примере с помощью свойства padding- right увеличивается промежуток между элементами на навигационной панели.
HOME RESEARCH pApERS BlOG CONTACT INFO
Промежуток 1 ет
ul
iist-style-type: none; text-transform: uppercase;
display: inline-block; padding-right: lem;
С помощью свойства padding-right добавляется правый отступ к элементам 1<
<ul>
<li>Home</li>
<li>Research Papers</li>
<li>Blogc/li>
<li>Contact lnfo</li>
</ul>
Элементы li
161
Управление размерами, границами и полями
ПАМЯТКА
Чтобы установить границу только на определенных сторонах элемента, воспользуйтесь свойствами border-top. boraer-bottom, borderleft. border-right соответственно.
Горизонтальная навигация с узкими ин-' ' тервалами между элементами — распространенная проблема, с которой я часто сталкиваюсь даже на хорошо спроектированных сайтах. Не имея достаточного расстояния между собой, элементы навигации сливаются друг с другом, и их сложно быстро различить.
Иеремия Шоаф
Итак, содержимое скомпоновано Мы можем двигаться далоше Далее мы поговорим о границе, окружающей отступы.
НАГЛЯДНОСТЬ
Урок 9.3. Управление границами Тема: свойство border
Ссылка: wdpg io/2/9-3-0
жмите кнопку See It [Посмотреть).
Ссылка
wdpg.ю/2/9-2-1
и блочных элементах граница — это линия окантовывающая внешний край отступа с четырех сторон: сверху, справа, снизу и слева Таким образом. । раница располагается между отступами и полями элемента. Граница необязательна, но часто отображается, зрительно разделяя содержимое
Создать простую границу по периметру элемента позволяет свойство border 1рис 9.6).
Форматируемый элемент
Ширина границы
РЕКОМЕНДАЦИЯ
► Рис 9.6. Синтаксис свойства border
элемент { border: ширина стиль цвет-, > *
Стиль границы
Цвет границы
Значение ширины границы можно указать в любой стандартной единице измерения CSS в том числе рх cm rem vwnvh Кроме того, в качестве значения .ы можете использовать одно из следующих ключевых слов thin, medium или thick — для создания тонкой, средней или толстой границы соответственно Настроить стиль можно с помощью следующих значений dotted dashed, solid, double groove, ridge, inset, outset, hidden и none. Для окрашивания i раницы можно использовать любые допустимые имена цвета о которых рассказывается в главе 4
162
Концепция блочной модели
Рассмотрим пример
.pullquote {
border: lpx solid black;
}
Это правило определяет класс pul]quote со сплошной черной границей шириной 1 пиксел
► Пример
ВЕБ-СТРАНИЦА
с^> Ссылка: wdpg.io/2/9-3-1
В этом примере мы добавим границу вокруг навигационной панели из урока 9.2.
Граница ____________________________
HOME RESEARCH PAPERS BlOG CONTACT INFO
ul {	*
border: lpx solid black; padding-top: .75em; padding-bottom: .75em; list-style-type: none; text-align: center; ' text-transform; uppercase;
}
И {
display: inline-block; padding-right: lem;
}
Граница
__ч Сверху и снизу Подавляются отступы
Элементы выравниваются по центру
li:first-child { padding-left: lem;
}
Добавляется дополнительный отступ слева
<и1>
<li>Home</li>
<li>Research Papers</li>
<1i>BLng</1i>
<li>Contact Info</li>
</ul>
163
Управление размерами, границами и полями
ПРАКТИКУМ
Поначалу блоч нал модель CSS может казаться запутанной, поскольку трудно представить блок, который содержит каждый элемент. Чтобы помочь себе, настройте свойство outline, которое добавляет контур к внешним краям блока. У свойства outline тот же синтаксис, что и у свойства border.
с^> Ссылка wdpg ю/2/9-3-3
ПРОФИ
Положительные значения полей служат для отдаления блока от окружающих элементов (или краев области просмотра браузера/. А если возникает необходимость разместить элементы компакт нее, то можно задать отрицательные значения полей.
сХ> Ссылка wdpg. io/2/9-4-5
У вас может вызвать недоумение одна странная деталь элемент li:first-child форматируется с помощью свойства padding-left: lem Для чего7 Вспомните пример из урока 9 2: вам нужно было добавить промежуток lem между пунктами панели, чтобы визуально разделит ь их. Вы добавили его с помощью свойства padding-right, но гак отступ lem создается и справа от пункта Contact Info. Чтобы компенсировать этот избыточный промежуток справа, нужно добавить такой же промежуток слева, чтобы текст панели центрировался верно Правило li:first-child как раз и добавляеттребуемый отступ к первому элементу li.
ГС С помощью границ разделяйте содержимое на логические фрагменты, если такого требует ваш дизайн, иначе страница будет выглядеть перегруженной.
Эндрю Стокер
Ваши блоки прекрасны в них есть содержимое, отступы и границы Теперь нужно позаботиться о сочетании с другими элементами страницы и для этого увеличить пространство вокруг блоков, изменив поля
Урок 9.4. Управление полями
Тема: свойства margin-*
гф- Ссылка: wdpg.io/2/9-4-0
В контексте блочной модели поля - это промежутки, добавляемые сверху, снизу, слева и справа от границ элемента. Поля влияют на пространство между элементами. Так, положительные значения полей не позволяют элементам страницы накладываться друг на друга, а также не дают им упираться в края области просмотра браузера С другой стороны, если дизайн того требует, то элементы могут и накладываться — такого обратного эффекта можно добиться указав отрицательные значения полей.
Поля настраиваются как с одной, так и с нескольких сторон элемента: элемент { margin-top: поле-сверху;
margin-right: поле-справа;
margin-bottom: поле-снизу; margin-left: поле-слева;
}
В качестве значения размера поля можно использовать любую из стандартных единиц измерения CSS, в том числе рх. em, rem vw и vh Кроме того, вы можете использовать процентное значение или ключевое слово auto (чтобы браузер автоматически настроил поля в соответствии с доступным пространством). Рассмотрим пример
164
Концепция блочной модели
.pullquote {
margin-top: 1.5em;
margin-right: 2.5em;
margin-bottom: 2em;
margin-left: 3em;
}
Как и в случае со свойством padding краткая нотация margin позволяет настроить поля с помощью одного объявления. На рис. 9.7 показаны четыре варианта синтаксиса, которые можно использовать вместе с этим свойством
Показанное выше правило можно переписать следующим образом используя сокращенный синтаксис
.pullquote {
margin: 1.5em 2.5em 2em Зет;
}
Применяет поле ко всем четырем сторонам
Применяет поле! сверху иснизуиполе2 справа и слева
Применяет поле! сверху, поле2 справа и слева, а полеЗ — снизу
Применяет поле! сверху,
элемент {
margin: margin: margin: margin:
поле;
поле1 поле2;
поле1 поле2 полеЗ;
поле! поле2 полеЗ поле4;
поле2 справа, полеЗ снизу и поле4 слева
Важно помнить, что браузер настраивает поля по умолчанию для всех элементов согласно правилам собственной встроенной таблицы стилей На первый взгляд, это удобно, но один из ключевых принципов веб-дизайна состоит в максимальном контроле разработчика над внешним видом страницы, в самостоятельном форматировании всех элементов дизайна. Поэтому важным шагом в этом направлении станет добавление в верхнюю часть таблицы стилей следующего кода htmlj oody, abbr, article, aside, audio, blockquote, Dutton, canvas, code, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, hl, h2, h.3, h4, h5, h6, header, iframe, img, input, label, legend, li, nav, object, wl, option, p, pre, q, section, select, table, tbody, td, tf or, th, thead, tr, ul, video {
margin: 0;
padding: 0;
box-sizing: border-oox;
}
► Рис 9.7.
Сокращенная нотация свойства margin
ПРОФИ
Если вы серьезно занимаетесь веб-дизайном, то вам следует добавлять во все свои проекты профессиональный CSS-нормализатор для сброса стилей, например Normalize, css (доступен на странице https://github. сот/ necolas/ normalize.css/). Он поможет вам начинать свои проекты наилучшим образом.
165
Управление размерами, границами и полями
Данный код сбрасывает устаногленные браузером поля, отступы и размеры блоке в, позволяя вам самостоятельно настраивать эти характеристики по мере необходимости Если ваша страница небольшая, то можете использовать следующую упрощенную версию
* {
margin: 0;
padding: 0,
box-sizing border-box;
}
Обратите внимание, что после сброса настроек вам обязательно нужно настроить поля Чтобы понять, для чего это делать, взгляните на рис 9.8. На нем показана простая навигационная панель со сброшенными полями
•	ТГ Lesson 9.4 Controlling the К- X +
<- Сл webdesignplayground.io/2/Iessons/S-4-1/
WEB DESIGN PLAYGROUND
► Рис. 9.8.
Навигационная панель без полей
HOME RESEARCH PAPERS BLOG CONTACT INFO
Welcome! You've landed at the web home of Monday Morning Ideas, the inventors of the Helium Paperweight, the Water-Resistant Sponge, the Teflon Bath Mat, and the world-famous inflatable Dartboard.
ПРАКТИКУМ
Вы также можете поэкспериментировать с полями, чтобы центрировать дочерний. элемент по вертикали внутри его родительского контейнера.
сф- Ссылка.
wdpg.io/2/9-4-4
Мы думаем, что наш CSS изменяет внешний вид документа по умолчанию, но с помощью «сброса» таблицы стилей мы можем сделать этот стандартный вид более единообразным для всех браузеров и, следовательно, тратить меньше времени на борьбу с настройками браузера по умолчанию.
Эрик Мейер
Как видно из рисунка, навигационная панель отображается вплотную к верхнему, правому и левому краям окна браузера, при этом между нижней частью навигационной панели и текстом остается совсем мало места Чтобы решить эту проблему, вы можете настроить поля навигационной панели, добавив по ее периметру свободное пространство, как показано в следующем примере
166
Концепция блочной модели
► Пример
Ссылка: wdpg.io/2/9-4-1
В этом примере с помощью свойства margin мы увеличим пространство вокруг навигационной панели.
ВЕБ-СТРАНИЦА
Промежуток размером 2 ет
Промежуток
размером 1 ет
Промежуток размером 0,75 ет
Промежуток размером 2 ет
НОМЬ RESEARCH PAPERS irJLOG СОК'АСГИМНЭ
Welcome! You've landed at the web home of Monday Morning Ideas, the inventors of the Helium Paperweight, the Water-Resistant Sponge, the Teflon Bath Mat, and the world-famous Inflaraole Dartboard.
ul {
border: Ipx solid black;
margin-top: .7Sem; margin-right: 2em; margin-bottom: lem; margin-left: 2em; padding-top: .75em; padding-bottom: .75em; list-style-type: none; text-align: center;
text-transform: uppercase; }
div {
margin-right: 2em;
margin-left: 2em;
}
Настройки полей, применяемые к элементу ul
Настройки полей, применяемые к элементу div
<ul>
<li>Home</li>
<li>Research Papers</li>
<li>Blog«/li>
<li>Contact Info</li>
</ul>
<div>
welcome! You've landed at the web home of Monday Morning Ideas, the inventors of the Helium Paperweight, the Water-Resistant Sponge, the Teflon Bath Mat, and the world-famous Inflatable Dartboard.
</div>
167
Управление размерами, границами и полями
ПРАКТИКУМ
Настроив ширину элемента, можно быстро выровнять его по горизонтали с помощью объ явления margin: сверху/снизу auto, где сверху/снизу — это размеры полей сверху и снизу.
сг£ Ссылка: wdpg.io/2/9-4-3
Поля - важнейшая концепция блочной модели, а создаваемое ими свободное пространство — значимая часть веб-дизайна. Но научиться правильно работать с полями бывает непросто, и могут возникать неожиданные, а то и неприятные эффекты, напримео схлопывание полей, о котором я расскажу далее
ОСТОРОЖНО, СХЛОПЫВАЮЩИЕСЯ ПОЛЯ!
В предыдущем примере я добавил правило margin-bottom: lem к элементу ul, чтобы отделить его от текста, содержащегося в контейнере div Предположим, мне нужно пространство 2ет между этими элементами, поэтому я настраиваю правило для стилизации элемента div следующим образом (на рис. 9 9 показан результат):
div {
margin-top lem; * margin-right: 2em; margin-left: 2em;
}
Верхнее иоле додавлено к элементу div
ПРОФИ
Если всем нужно увеличить вертикальное простра нет во между двумя элементами, то можно увеличить большее из двух полей (напри-мер, установить margin-bottom: 2em для элемента и]). Или же можно решить проблему схлопывающихся полей, сменив свойство margin на padding (например, замените свойство margin-tup на padding-top: lem для элемента div/.
Нет ваши глаза не врут: пространство между навигационной панелью и текстом, содержащимся в контейнере div, осталось точно таким же. что и раньше! Все дело в хитроумном явлении CSS, известном как схлопывание полей. Когда нижнее поле одного элемента пересекается с верхним полем другого, браузер не суммирует эти деэ значения, как вы ожидаете. Вместе этого он определяет, какое из двух полей больше, и использует его размер в качестве вертикального промежутка между двумя элементами Меньшее поле он в расчет не берет, таким образом схлопывая два поля в одно.
Если верхние или нижние поля элементов на ваших страницах больше или меньше, чем должны быть, тс велика вероятность, что причина в схлопывании полей.
HOME RESEARCH PAPERS BlOG CONTACT INFO
Welcome' You've landed at the wer home cf Monday Morning Ideas, the inventors of the Helium Paperweight, the Water-Resistant Sponge, the Tefon Bath Mat, ano the wold famous Inflatable Dartboard.
Промежуток размером 1 em
► Рис. 9.9, Текст dive добавленным верхним полем lem
168
Резюме
РЕЗЮМЕ
•	Четыре основные части блочной модели CSS — это содержимое, отступы вокруг него, границы -округ отступов и поля вокруг границ.
•	Размеры элемента задаются с помощью свойств width и height
•	Отступы по периметру содержимого элемента настраиваются с помощью следующих четыоех свойств padding-top paddingright, padding-bottom и padding-left Как вариант, можно использовать краткое свойство padding, например, так: padding: отступ-сверху отступ-справа отступ-снизу отступ-слева
•	Упрощенный синтаксис свойства для настройки границ выглядит так border: ширина стиль цвет
•	Поля по периметру содержимого элемента с отступами и границами настраиваются с помощью следующих четырех свойств margin-top. margin-right, margin-bottom и margin-left Как вариант, можно использовать краткое свойство margin например, так margin: поле-сверху поле-справа поле-снизу поле-слева
ПАМЯТКА
Левые и правые поля не схлопываются. Кроме того, поля не схлопываются у тех элементов, которые выровнены и к которым применено абсолютное позиционирование (см. главу 8).
Глава 10
Проект: создание
лендинга

В этой главе
	Планирование и создание эскиза лендинга.
	Выбор шрифтов и цветов для страницы.
	Суть и реализация полос содержимого.
•	Добавление изображений и текста.
Итак, девять глав позади, и вы прошли долгий путь. Во второй части вы научились добавлять на страницу изображения и мультимедиа, создавать каскадные таблицы стилей, использовать классы, выравнивать элементы, позиционировать объекты абсолютно и относительно, а также у г. рая л ять размерами, границами и полями блокол Это большой объем знаний и умений, и (что самое главное) его достаточно, чтобы начать создавать великолепные страницы. Б качестве доказательства вы в данной главе сможете применить все приобретенные навыки HTML и CSS в рамках создания профессиональной страницы для кампании по продвижению продукта/услуги. Этот проект может показаться вам слишком сложным. Но не волнуйтесь, вы знаете более чем достаточно, чтобы справиться с этим заданием, а я параллельно создам собственную (довольно странную, как вы увидите) целевую страницу (лендинг). Если вы запутаетесь, то я (по крайней мере мой код) буду рядом, чтобы протянуть руку помощи и подтолкнуть вас в правильном направлении. Начнем!
170
Эскиз макета
НАЧАЛО РАБОТЫ
В общем смысле целевая страница (ее еще называют посадочной страницей или лендингом) первой предстает перед глазами посетителей вашего сайта Чаще всего это его главная страница, но может быть и любая другая, на которую человек попадает, переходя по ссылкам, выданным поисковой системой или опубликованным в социальных сетях.
В рамках текущего проекта подходит уточненное значение данного термина В этом смысле целевая — это отдельная страница, которую люди видят, когда переходят по ссылке в рекламе, записи в блоге или социальных сетях, относящаяся к маркетинговой или информационной кампании для конкретного продукта/услуги Задача лендинга — рассказать о продукте или услуге и побудить пользователя совершить какое-либо действие, например купить товар, подписаться на услугу или оформить подписку на рассылку.
В рамках реализации данного проекта сы будете применять навыки HTML и CSS. полученные в предыдущих девяти главах. Вы узнаете, как с их помощью создать базовую целевую страницу для тонара/услуги Она будет содержать изображения, описательный текст и кнопки, которые побуждают посетителя выполнить некое действие (например оформить подписку или покупку) Общая структура страницы использует популярный современный полосный макет, в котором текст и изображения отображаются в виде горизонтальных полос во всю ширину окна браузера. По ходу дела я создам пример лендинга для продажи вымышленной книги, а вы. разумеется, можете создать собственную страницу с уникальным текстом и изображениями.
ЭСКИЗ МАКЕТА
Поскольку бы наверняка видели хотя бы пару лендингов, то имеете представление о том, как должен выглядеть ваш проект Я прав? Отлично! На этой стадии проекта ьы серьезно опережаете большинство конкурентов Но согласитесь, дизайн, который вы представляете, трудно воплотить в HTML- и CSS-код. Чтобы существенно облегчить переход от дизайна к колу, нам нужно трансформировать свой представляемый дизайн в некую конкретную форму. Для этого можно использовать графические редакторы, такие как Adobe Photoshop или Illustrator, или. как я. рисовать основные компоненты страницы карандашом на листе бумаги.
171
Проект: создание лендинга
Как показано на рис. 10.1 ваш эскиз не обязательно должен быть произведением искусства или крайне детализированным Набросайте основные разделы страницы и подпишите, что будет содержаться в каждом из них
Изображение продукта
Подзаголовок продукта
Название продукта
Подзаголовок продукта
Лаконичное описание продукта
Кнопка «Купить»
Развернутое описание продукта
Пара отзывов
Раскладка цен (тарифные планы)
Вариант А	Вариант Б	ВариантВ
1000 руб.	2000 руб	3000 руб
к Рис. 10.1.
Прежде чем приступить к верстке кода, ьозьмите карандаш с листом бумаги и набросайте макет и содержимое будущей страницы
Кнопка «Купить»
Кнопка «Купить»
Кнопка «Купить»
Ссылки на социальные сети
Навигация и копирайт
Шапка
Цены
Подвал
172
Выбор цветовой схемы
Следующая задача на пути подготовки проекта — выбрать шрифты для лендинга
ВЫБОР ШРИФТОВ
Как правило, лендинги не должны быть перегружены большим объемом текста, Необходимо подчеркнуть ключевые особенности продукта/услуги, мотивировать посетителя его приобрести, а затем предоставить ему такую юзможность. Вы создаете страницу, на которой не слишком много обычного текста, поэтому ваш шрифт должен быть читаемым и не должен привлекать к себе лишнее внимание (тем самым отвлекая от продукта).
В подобных случаях зачастую лучше вс его подходят шрифты без засечек Они выглядят более современно чем шрифты с засечками, давая вашему продукту дополнительное преимущество — возможность выглядеть новым и свежим.
Один из моих любимых системных шрифтов — Optima, великолепный шрифт с засечками, разработанный Германом Цапфом (которого вы, возможно, знаете по знаменитому шрифту Zapf Dingbats, установленному на большинстве ПК) и имеющий версии с поддержкой кириллицы, Optima установлен на всех компьютерах Мас, но, увы, редко встречается на ПК под управлением операционной системы Windows. Поэтому в качестве резервного шрифта для пользователей Windows я также указываю шрифт Calibn, который имеет схожие характеристики В CSS я укажу следующее правило, чтобы применить данные семейства шрифтов ко всему тексту на странице body {
Font-family: Optima, Calibri, sans-serif; }
После того как вы набросали макет страницы и выбрали шрифт следующий шаг — определение цветовой схемы.
ВЫБОР ЦВЕТОВОЙ СХЕМЫ
На целевой странице используется всего один шрифт, поэтому следует обратить внимание на другие аспекты страницы, чтобы добавить динамичности и контраста. Здесь приюдится продуманная цветовая схема
• Первичный (основной) цвет используется з качестве фона элементе з страницы, таких как кнопки действия и текст, на котором
ПАМЯТКА
Анализируя несколько шрифтов, перечисленных в свойстве font-family, браузер проверяет, установлены пи они на компьютере каж дого пользовате ля, причем в том порядке, в кото ром они указаны, и использует первый обнаруженный шрифт.
ИНФОРМАЦИЯ
Если вы не умеете подбирать цвета, вам по может замечательный онлайн-инструмент Color Scheme (https:// colorscheme, ги/). Выберите первичный цвет, и инструмент предложит совме стимые цвета.
173
Проект: создание лендинга
следует акцентировать внимание посетителя Поэтому цвет должен выделяться на общем фоне
•	Вторичный цвет чаще всего используется в качестве фона для некоторых полос содержимого Он должен быть похож на первичный' быть достаточно ярким, чтобы сообщить посетителю о важности содержимого, но не конкурировать с первичным цветом и не затмевать его
•	Третичный цвет используется в качестве фона для менее важною содержимого.
На рис 10 2 показаны цвета, выбранные мной для лендинга Вы, разумеется, можете выбрать цветовую схему, которая соответствует нашему проекту. Теперь, нарисовав макет страницы и выбрав шрифты и цвета, вы можете собрать все воедино, добавив HTML- и CSS-код.
Вторичный цвет
darkorchid
► Рис. 10.2.
Цветовая схема	\	*
для моей целевой	’	'
страницы	Первичный цвет	Третичный цвет
СОЗДАНИЕ СТРАНИЦЫ
Чтобы создать лендинг, начните с каркаса кода, который я показывал в главе 1 Затем читайте разделы и добавляйте текст, HTML-теги и CSS-свойства.
Базовая структура
Для начала возьмите базовую структуру страницы из главы 1 и добавите теги, а также временные изображения и текст (заполнители) для каждого из основных разделов страницы.
174
Создание страницы
^Пример с^> Ссылка: wdpg.io/2/projects/landing-page/l
Здесь мы составим из компонентов первоначальную структуру целевой страницы.
ВЕБ-СТРАНИЦА
Прочие полосы содержимого
Product title, subtitle, intro, etc.
Product description
Product testimonials
Pricing table for the different versions of the product
Social media links
Site links and copyright notice
<div class="header">
cdiv class="header-image">
<img src=,,http://placehold.it/100xl50" alt=
</div>
cdiv class-"header-info">
Product title, subtitle, intro, etc.
</div>
Полоса utanku
</div>
<div class="description">
Product description
</div>
<div class="testimonials">
Product testimonials
Полоса с описанием
Полоса с отзывами
Полоса с ценйили
</div>
<div class="product-versions">
Pricing table for the different versions of the
product
</div>
<div class="social">
Social media links
.--- Полоса с социальными сетями
</div>
cdiv class="footer">
Site links and copyright notice
</div>
Полоса подвала
175
Проект: создание лендинга
При использовании в базовой структуре HTML-элементов следует учесть несколько моментов.
•	Страница разбита на шесть разделов, шапка, описание, отзывы, цены, социальные сети и подвал
•	Каждый раздел встраивается в контейнер с помощью тегов <div> и </div>
•	Каждому элементу div присваивается соответствующий класс, позволяющий применять CSS-свойства ко всему содержимому в этом разделе
Шапка
Шапка, пожалуй, самый важный раздел целевой страницы, поскольку это первый раздел, который видят посетители, перешедшие на сайт. Необходимо, чтобы шапка не только произвела фурор, но и способствовала продаже вашего продукта. Шапка сайта достигает этих целей благодаря следующим особенностям
•	Фоновое изображение-бренд должно быть визуально ярким или рассказывать историю, связанную с вашим продуктом В любом случае это изображение не должно мешать чтению текста, приведенного шапке.
•	Изображение продукта должно быть простой иллюстрацией или фотографией, которая позволит потенциальному покупателю понять, как выглядит продукт
•	Информация о продукте должна содержать как минимум название продукта, краткое (два-три предложения) описание и цену Кроме того, я добавил надзаголовок (мот ивирующее слово или фраза над заголовком что-то вроде «Наконец-то в продаже!» или «Специальное предложение1») и подзаголовок.
•	Кнопка действия которую пользователь нажимает, чтобы выполнить нужное (вам) действие, например купить, подписаться или скачать продукт
Результативность лендинга почти полностью зависит от шапки, поэтому не торопитесь и создавайте ее элементы по очереди, начиная с фонового изображения-бренда
Фоновое изображение-бренд
В главе б говорилось, что изображение бренд — это привлекающая внимание фотография или иллюстрация, которая занимает всю ширину, а часто и всю высоту окна браузера при первом посещении страницы Рассмотрим пример
176
Создание страницы
► Пример czj> Ссылка: wdpg.io/2/projects/landing-page/2
Здесь мы составим из компонентов первоначальную структуру целевой страницы.
.header {
background: url(/images/landing-page-header-bg.jpg); background-attachment: fixed; -« background-position: right center;
background-size: cover;
padding-bottom: lem;
width: 100vw;
height: 100vh;
}
Предотвращает прокрутку изображения-бренда в отличие от прочего содержимого
<div class="header">
</div>
Эта фотография (на которой можете разглядеть размытое изображение ночного городского пейзажа) оформляется с помощью стандартного кода для изображений-брендов, рассмотренного в главе 6 Я добавил свойст во background-attachment: fixed, чтобы изображение не прокручивалось вместе с остальной частью страницы, что оказывает на посетителя положительный эффект.
ПАМЯТКА
Я добавил правило height: lS0vh. чтобы зафиксировать высоту шапки, так как в чей пока нет содержимого. Позже, когда я его добавлю, это определение можно будет удалить.
177
Проект: создание лендинга
Изображение продукта
Далее добавьте фотографию или иллюстрацию, демонстрирующую посетителю товар Это изображение должно быть достаточно большим, чтобы посетитель смог получить представление о том, как выглядит товар. При этом изображение не должно перекрывать фоновое изображение-бренд Рассмотрим пример
► Пример iz£> Ссылка: wdpg.io/2/projects/landing-page/3
В этом примере мы добавляем в шапку целевой страницы изображение товара.
ВЕБ-СТРАНИЦА
.header-image { float: left; width: 33%; margin-top: Зет; padding-right: Зет; text-align: right;
}
CSS-правила для форматирования изображения
<div class="header">
<div class="header-image">
<img src="/images/landing-page-book-cover.png" alt="Front cover">
</div>	Изображение добавляется с помощью
v>	стандартного HTML-элемента img
178
Создание страницы
Изображение размещается слева, некоторые его поля и отступы увеличены, чтобы отделить снимок от остального содержимого
Информация о продукте
Теперь пришло время добавить в шапку информацию о продукте Повторюсь шапка должна содержать как минимум название продукта и краткое описание, можно добавить и такие элементы, как над- и подзаголовок, как показано в следующем примере.
^Пример Ссылка: wdpg.io/2/projects/landing-page/4
В этом примере в шапку целевой страницы мы добавим информацию о продукте.
mom
Cowm; Soo«r»>!
The Web Designer
A story of HTML, CSS, and the big city
She knew HTML She knew CSS But did she know love? Read this destined-to-be-remaindered novel that The New York Times Book Review described as -reasonably grammatical* and the Timei Literary Supplement called 'bathroom worthy.* Pre-order your paperback copy now for just S14 99.
.header-info { float: right; width: 67%; margin-top: 4em; padding-left: lem; color: white;
}
CSS-код для форматирования элемента div с информацией о продукте
179
Проект: создание лендинга
<div class="header">
Информация добавляемся в элемент div
<div class="header-image">
<img src="/images/landing-page-book-cover. png" alt="Front cover">
</div>
<div class="header-info">
<div class="surtitle">Coming Soonish1</div> <hl class="title">The Web Designer</hl> <h3 class="subtitle">
A story of HTML, CSS, and the big city </h3>
<p class="intro">
She knew HTML. She knew CSS. But did she know love? Read this destined-to-be-remaindered novel that <em>The New York Times n->ok Review</errt> described as "reasonably grammatical" and the <em>Times Literary Supplement</em> called "bathroom-worthy." Pre-order your paperback copy now for just $14.99.
</p>
</div>
</div>
Элемент div, содержащий информацию о продукте, выровнен по правому краю и имеет увеличенные отступ слева и поле сверху Разные фрагменты информации о продукте — надзаголовок, название, подзаголовок и описание — отображаются в собственных блочных элементах Для экономии места я не привожу CSS-свойства применяемые к этим блочным элементам Они касаются таких настроек, как поля и размер шрифта. (Полный код см в песочнице.)
Кнопка действия.
Последний элемент в шапке целевой страницы — кнопка действия, которую посетитель может нажать, чтобы заказать, подписаться, скачать или выполнить какое-либо еще нужное вам действие Эта кнопка должна быть заметной, поэтому выделите ее на фоне и примените к ней полужирный шрифт, как показано в следующем примере.
С помощью элемента button я создал кнопку а затем применил различные стили, чтобы выделить ее, в том числе окрасить в первичный цвет (darkorchid) фон и задать полужирный белый шрифт для текстовой метки.
180
Создание страницы
^Пример Е^> Ссылка: wdpg.io/2/projects/landing-page/5
В этом примере в шапку целевой страницы мы добавляем кнопку действия.
"bathroom-worthy.* Pre order your paperhack copy now for just $14.99.
J! I Want It!
Si
.btn {
border: none;
padding: .75em 1.25em;
font-family: inherit;
font-size: lem;
font-weight: bold;
color: white;
background-color: darkorchid;
}
CSS-код
для форматирования кнопки
«button class="btn" type="button">I want It!</button>
Элемент button
Описание продукта
Следующий элемент лендинга — краткое описание продукта, ваш первый шанс попытаться продать пользователю свой товар или услугу. Как вы будете это делать, зависит от продукта и уровня вашей настойчивости, но несколько идей я все же приведу
•	абзац простого текста, в котором объясняется предназначение продукта;
•	краткий список основных характеристик продукта;
•	абзац или список, в котором излагается, почему продукт вам необходим,
•	абзац или список, в котором описывается ряд проблем, которые (и как) продукт решает.
181
Проект: создание лендинга
Для своего лендинга я выбрал краткий пересказ сюжета книги, как показано в следующем примере
► Пример сф> Ссылка: wdpg.io/2/projects/landing-page/6
В этом пример? на страницу мы добавим описание товара,
5ЕБ-СТРАНИЦА
A story of HTML, CSS, and the big city
She knew- HTML. She knew CSS But did she know love? Read this destined-tube-remaindered novel that The New York Times Book Review described as “reasonably grammatical* and the Times literary Supplement called 'bathroom-worthy* Pre-order your paperback copy now for just $14.99,
I Want nt
At High Falutin High, the arts high school in her hometown, Daisy Fontana fell in love. Not with a boy, or even with a girl, for that matter, but with something altogether more interesting, web design. Instead of a BFF, she had CSS. Instead of singing and dancing with the other kids, she spent her time coding alone But when she graduated and moved to the city to find a job. she knew everything about HTML. but nothing about life Will the town eat her alive, or will she survive and rise to the top of the cutthroat world of coding websites? Daisy Fontana is a nerd heroine lor our times, and The web Designer tells her gripping tale
.description {
width: 100%;
padding: lem 0;
font-size: 1.25em;
background-color: white;
}
CSS-код с правилами для класса description
<div class="description">
At High Falutin High, the arts high school in her home town, Daisy Fontana fell in love. Not with a boy, or even with a girl, for that matter, but with something altogether more interesting: web design. Instead of a BFF, she had CSS. Instead of singing and... c/div>
Подготовив описание продукта, можно ненадолго отвлечься от добавления содержимого и настроить полосы
182
Создание страницы
Настройка полос содержимого
На данном этапе подготовки лендинга возникла первая проблема В предыдущем примере текст описания растянулся на нею ширину окна браузера, строки стали слишком длинными, и теперь их некомфортно читать Решение заключается в структурировании лендинга с помощью горизонтальных полос содержимого, которые имеют две характеристики
•	фоновый цвет или изображение, которое занимает все окно браузера.
•	основное содержимое (на переднем плане), ширина которого ограничена в целях повышения удобочитаемости, а текст выровнен по центру окна браузера
Однако в зависимости от ширины окна браузера и указанного ограничения ширины этот блок содержимого может занимать лишь часто ширины окна Проблема заключается в том, как сделать так. чтобы фон занимал всю ширину области просмотра а ширина основного содержимого была ограничена. Ответ заключается в разметке указанных полос содержимого с помощью двух элементов div
•	внешний элемент div охватывает ширину окна браузера и отформатирован под цвет фона или изображение, которое необходимо использовать в полосе.
•	вложенный элемент div, который содержит основной контент, имеет ограниченную ширину и центрируется по горизонтали в окне браузера
В следующем примере я добавил во ьложенный элемент div (используя класс container) и шапку, и описание продукта.
Класс container решает три задачи
•	Свойство max -width ограничивает ширину содержимого 800 пикселами
•	Краткая нотация margin: 0 auto центрирует элемент по горизонтали Это объявление сбрасывает верхнее и нижнее поля на 0, а левое и правое оставляет на усмотрение браузера Тот автоматически настраивает поля в зависимости от ширины элемента. Левое и правое поля заданы одновременно, поэтому браузер отображает их одинаког!ыми, тем самым центрируя элемент.
•	Свойство clear: both помещает элемент после всех выровненных элементов, располагаемых ранее в потоке документа
183
Проект: создание лендинга
^Пример О Ссылка wdpg.io/2/projects/landing-page/7
В этом примере мы настроим вложенный элемент div, содержащий полосы контента.
ВЕБСТРАНИЦА
She knew HTML. She knew CSS Rut did she know love? Read this desuned-to be-remsindered novel that The New York Times Book Review described as "reasonably grammatical* and the Times Literary Supplement sailed "bathroom worthy.* Pre order your paperback copy now tor just Я 4.99
I Wint Itl
Al High Falutm High, the arts high school in her hometown, Daisy Fontana fell In love. Not with a boy, or even with a girl, for that matter, but with something altogether more interesting: web design. Instead of a В IF, she had CSS. Instead of singing and dancing with the other kids, she spent her time coding alone. Bur when she graduated and moved to the city to find a job, she knew everything about HTML, but nothing about life. Will the town eat her alive, or will she survive and rise to the top of the cutthroat world of coding websites? Daisy Fontana is a nerd heroine for out times, and The Web Designer tells her gripping tale
.container { max-width- 8й0рх; margin: 0 auto; clear: both;
}
-—' CSS-код для контейнера с содержимом
.container::after { content: display: block; clear: both;
}
Благодаря этому CSS-коду сбрасывается выравнивание элементов в контейнере
<div class="header">
<div class="container">
</div>
</div>
<div class="description">
<div class="container">
</div>
</div>
Вложенные элементы div, содержащие полосы
Псевдоэлемент container::after реализует метод clearfix (см. главу 8), который сбрасывает обтекание содержимого элемента, тем самым предотвращая схлопывание контейнера.
184
Создание страницы
Отзывы о продукте
Рекомендуется добавить на целевую страницу хорошие отзывы о своем продукте, например обзоры из СМИ, положительные оценки пользователей с других сайтов, а также мнения, полученные непосредственно от тестеров и клиентов В следующем примере показана моя целевая страница с несколькими отзывами и соответствующей иллюстрацией
^Пример
с£> Ссылка: wdpg.io/2/projects/landing-page/8
В этом примере на целевую страницу мы добавим раздел с отзывами
Daisy Fontana is a nerd heroine for our times, and The Web Designer tells her gripping tale.
'I’ve never seen a novel with so much HTML and CSS code. I mean there is a fol of code tn this book/ So much code Code, code, code *
—T. J. Muiphy, Nowhere, OK
'I particularly loved the scenes where Daisy is by herself in her room writing HTML and CSS. It's hard to make writing tags and properties interesting, and the author almost does it." —M. Dash, Fghtwad MO
"I couldn't put It down No, really, I could not physically put this book down. Thanks to the cheap cover stock, the book was literally Sued to my hands, I had to go to the emergency room to get the
Ing off me*—A Pendergast Walla Walla WA
.testimonials {
width: 100%;
padding: lem 0;
font-size: 1.25em;
background-color: plum;
}
.testlmonials-text {
float: left;
width: 75%;
}
.testimonial {
margin-bottom: .75em;
}
.testimonials-image { float: right;
}
CSS-код для оформления полосы содержимого с отзывами
CSS -код для оформления контейнера с отзывами
—ч CSS-код для оформления отдельного отзыва
CSS -код для оформления изображения с отзывами
185
Проект: создание лендинга
<div class="testimonials"> * '' Элемент полосы с отзывами
<div class="container">
<div class-"testimonials-text")
<p class=”testimonial">
---контейнер с текстом отзывов
"I've never seen a novel with so much HTML ana CSS code. 1
Отдельный отзыв
mean there is a <em>lot</em) of code in this bcmk! So much code. Code, code, code." -T. 3. Murphy, Nowhere, OK </p>
<p class="testimonial'’>
"I particularly loved the scenes where Daisy is by herself in her room writing HTML ana CSS. It's hard to make writing tags and properties interesting, and the author almost does
</div>
it." —M. Dash, Tightwad, MO
</p>
<p class-"testiBonial">
"I couldn't put it down. No, really, I could <em>not</em> physically put this book down. Thanks to the cheap cover stock, the book was literally glued to my hands. I had to go to the emergency room to get the thing off me." -A. Pendergast, Walla Walla, WA </p>
<div class="testirnonials-image">
<img src="/images/testimonials.png"
alt="Illustration of people talking")
</div>
</div>
</div>
Изображение для полосы с отзывами
В этом примере полоса содержимого представляет собой элемент div с классом testimonials, оформленный под цвет фона, plum В контейнере элемент testimonials-text располагается слепа, а элемент testimonial-image — справа.
Раскладка цен
В идеальном мире посетитель вашей целевой страницы будет настолько очарован вашим товаром или услугой, что не раздумывая нажмет кнопку действия в шапке страницы. Чтобы удержать клиента, вам нужно предоставить ему второй шанс совершить покупку или подписаться на рассылку. Один из лучших способов побудить совершить покупку — сформулироватьраскладку с ценами, в которой указаны версии вашего продукта и цены на каждую из них. Если у вашего продукта нет версий (и даже если есть), то можно создать пакеты (наборы), содержащие другие позиции, например тематические электронные книги, подписку на рассылку, купон на скидку для будущих покупок и т. д.
186
Создание страницы
В раскладке следует перечислить не менее двух и (обычно) не более четырех версий/паке^ов Одна из версий должна быть предпочтительной — той, которую вы в идеале хотите продать Эта версия может быть наиболее выгодной для вас или клиента либо иметь какие-то другие преимущества перед остальными Она должна выделяться на фоне остальных Например можно добавить надэаголоьок «Самое выгодное предложение!» или использовать один из смелых первичных цветов вашей цветовой схемы.
На моей целевой странице я предваряю раскладку цен полосой содержимого, которая выступает в качестве своеобразного заголовка и на самом деле призынает пользователя выбрать один из вариантов, как можно видеть в следующем примере.
^Пример с^> Ссылка: wdpg. io/2/projects/landing-page/9
В этом примере мы цоЬавим полосу содержимого над раскладкой цен

Select the version that's right for you!
.product-versions-title { padding: lem u; font-size: 2em; text-align: center;
CSS-Код для полосы содержимого
<div class="container">
<h2 class="product-versions-title">Se]ect the version that's right for you!</h2>
</div>
HTML-код полосы
содержимого
Стандартный формат раскладки цен — размещение каждой вео сии/пакета/плана в вертикальном столбце, в котором посетителю сообщается все, что ему нужно знать: название, цена (если есть) и особенности Затем в нижней части столбца добавляется кнопка действия В следующем примере показан один столбец из раскладки цен на моей вымышленной целевой странице.
187
Проект: создание лендинга
► Пример Ссылка wdpg.io/2/projects/landing-page/lO
В этом примере мы создадим первый столбец в раскладке цен.
Select the version that's right for you!
ВЕБ-СТРАНИЦА
.product-versions {
padding; lem 0;
background-color: plum;}
.product-version {
float: left;
width: 33.33%;
border: ipx solid gray;
text-align: center;
background-color: white;}
.version-title {
padding; .75em 6;
font-size: l.Sem;}
.version-price {
padding- .75em 0;
font-size: 2em;
background-color: ligntgray;}
.version-item {
border-bottom: lpx solid gray;
width: 100%;
padding: .75em 0;
font-size: 1.25em;)
188
Создание страницы
.version-item:last-child { border-bottom: 0;}
{л	.btn-plain {
t-)	font-weight: normal;
color: black;
background-color: lightgray;}
Контейнер с версией продукта
Название версии
Полоса содержимого
<div class=l,product-versions"> „	,
<div class="container">	контейнер с содержимым
<div class="product-version">
-------- <h3 class="version-title">eE<0ok Version</h3>
<h4 class=“version-price">$9.99</h4>
<div class="version-item"> 300-page PDF
</div>
Цена версии
<div class-"version-item">
Free ebook
</div>
<div class=“version-item“>
Free newsletter subscription
</div>
<div class="version-item">
10% off your next purchase
</div>
<div class-“version-item">
cbutton class=-"btn btn-plain" type="button"> Order Now!
</button>
</div>
</div>
</div>
</div>
Особенности версии
В примере используется семь классов
•	product-versions — этот внешний контейнер div создает полосу содержимого. Его фон окрашен в цвет plum
•	containei— это контейнер div с содержимым,
•	product-version — этот контейнер div формирует столбец для одной зерсии/пакета Он выровнен полевому краю и, поскольку в примере используется три столбца имеет ширину 33.33 %,
•	version-title — этот контейнер div содержит название версии/ пакета;
ПАМЯТКА
Если в элементе указать два класса — как onio делаю я в следующем упражнении во втором элементе h4, — браузер применяет к элементу правила обоих классов.
189
Проект: создание лендинга
•	version-price - этот контейнер div содержит цену версии/ пакета Для большинства версий цена выделена серым фоном.
•	version-item — этот класс содержит прочие элементы версии/ пакета, по одному контейнеру div для каждой особенности и еще один в нижней части для кнопки действия.
•	btn-plain — этот класс используется для оформления кнопок действия, на которых внимание посетителя не акцентируется Текст набран обычным черным шрифтом, а фон окрашен в светло-серый цвет.
В завершение добавьте в раскладку цен другие версии/пакеты, используя те же стили, что и выше, но оформляя оптимальную версию так, чтобы привлечь к ней внимание посетителя, как показано в следующем примере
► Пример с£> Ссылка: wdpg.io/2/projects/landing-page/ll
В этом примере мы допелним таблицу, акцентировав внимание посетителя на одной и эверсий.
ВЕБ-СТРАНИЦА
.version-price-featured {
color: white;
background-color: darkorchid;
}
CSS -код для выделения цены товара
190
Создание страницы
<div class="preduct-version">
<h3 class="version’title">Print Version</h3>
<h4 class="versTon-price”>$14.99</h4>
<div class="version-item">
300-page paperback
</div>
<div class="version-item"> Free ebook
</div>
<div class="version-item">
Free newsletter subscription
</div>
<div class="version-item"> 10% off your next purchase
</div>
<div class="version-item'‘>
cbutton class="btn btn-plain" type=”button">Order Now!</button>
</div>
</div>
<div class-"product-version">
<h3 class="version-title">eh юк+Print Bundie</h3>
<h4 class="version-price version-price-featured">S19.99</h4>
<div class="version-item">	ж
PDF <em>and</em> paperback versions
</div>
<div class="version-item"> Free ebook
</div>
<div class="version-item"> Free newsletter subscription
</div>
<div class="version-item"> 15% off your next purchase
</div>
<div class="versiL>n-item"> cbutton class="btn" type="button">Onder Now!</button>
</div>
</div>
HTML-код для выделения цены среди остальных
Почти готово: Теперь пришло время добавить ссылки на социальные сети
Ссылки на социальные сети
Теперь на целевой странице нужно добавить подборку ссылок на социальные сети Пусть они отображаются по центру страницы, а в качестве ссылок используются значки соответствующих соци-злоных сетей. Б следующем примере показан код для добас-ления ссылок на моей целевой странице
ПРОФИ
Если в CSS для элемента заданы два класса и в них содержатся оди паковые свойства, то приоритет имеют свойства второго класса (то есть класса, указанного ниже в CSS-файле).
191
Проект: создание лендинга
► Пример rzj> Ссылка: wdpg.io/2/projects/landing-page/12
В этом примере мы добавим на целевую страницу полосу со ссылками на социальные сети.
/.ЕБ-СТРАНИЦА
Follow Logophilia Books on social media: Q Q (э) ЕЯ
.social {
padding: lem 0;
font-size: 1.5em; text-align: center;
} #A
.social-links { margin-top: .75em;
}
.social-link { margin: 0 .25em;
}
CSS-код для оформления ссылок на социальные се или
<div class="social">
<div>
Follow Logophilia Books on social media:
•—- HTML-код ссылок
</div>	на социальные "
<div class="social-links">	секли
<a href=H#" class="social-link">
<img src="/images/facebook.png" alt="Facebook icon"x/a>
<a href="#" class="soclal-link">
<img src="/images/twitter.png" alt="Twitter icon"x/a>
<a href="#" class="social-link">
<img src="/images/instagram.png" alt="Instagram icon"x/a>
<a href="#“ class="social-link">
<img src="/images/linkedin.png" alt="Linked!n icon"x/a>
</div>
</div>
В коде используется три класса
•	social — внешний контейнер div, создающий полосу содержимого У него белый фон, а свойству text-align присвоено значение center
•	social-links — контейнер div для всех ссылок;
•	social-link — класс для оформления отдельных ссылок
192
Создание страницы
Обратите внимание, что для этой полосы содержимого не требуется элемент container, поскольку текст и ссылки ..ыравниваются по центру страницы.
Подвал страницы
Последняя часть лендинга — подвал. Как показано в следующем примере, в подвале я указал информацию об авторских правах и несколько ссылок, в том числе на контактную информацию (адрес электронной почты). Вы же можете добавлять в подвал любую дополнительную информацию, например сообщения наподобие «Спасибо за посещение сайта», слоганы, любимые эпиграммы и подробные контактные данные
► Пример Ссылка wdpg.io/projects/2/landing-page/13
В этом примере мы отделим подвал от основного содержимого, добавив светлосерый фон, уменьшив размер шрифта и применив к нему курсив.
About Contact Sm Map Privacy
COFVWGHT №2) IGGOWIIA Boon
.•footer {
padding: lem 0; font-variant: small-caps;
text-align: center; background-color: lightgray;
}
.fcoter-links {
margin-bottom: .75em;
font-size: 1.5em;
}
.foote r-link { margin: О . 5em;
}
.copyright { font-style: italic; font-size: lem;
CSS-мд для оформления подвала
193
Проект: создание лендинга
<div class="footer">
<.div class=”footer-links">
<a href="#" class=“footer-link">About</a>
<a href="#” class=”footer-link">Contact</a>
<a href="#" class="footer-link">Site Map</a>
<a href="#" class="footer-link">Privacy</a>
HTML-код	</div>
подвала	<div class="copyright">
Copyright 2023 logophilia Books
</div>
</div>
3 коде используется четыре класса:
•	footer — внешний контейнер div создающий полосу содержимого Используется светло-серый фон, а свойству text-align присвоено значение center,
•	footer-links — контейнер div для всех ссылок в подвале. Обратите внимание, что URL каждой ссылки указывает на # — это заполнитель, При переходе по такой ссылке содержимое браузера прокручивается на верхнюю часть страницы В рабочем проекте замените заполнители # соответствующими URL;
•	footer-link — класс, отвечающий за оформление некоторых ссылок ь подвале;
•	Copyright — этот класс оформляет уведомление об авторских правах.
В этой группе нам опять-таки не нужен элемент container, поскольку содержимое и так выровнено по центру страницы.
ПРОДОЛЖЕНИЕ РАБОТЫ
Учитывая, что ры прочитали лишь половину книги, должен сказать, что готовая версия лендинга (мой показан на рис 10 3) — просто прекрасна. Текст легко читается, понятен, и вам не скучно (Если вы довольны своим лендингом и вам не терпится выложить код в Интернет, то загляните в приложение, чтобы получить подробную информацию о том, как эго сделать.)
194
Продолжение работы
Сомме Scxxwd
The Web Designer
A story of HTMI, CSS, and lhe big citv
She knew HTML She knew CSS But did she know love? Read 'his destined-to-be-remaindered novel that The New tori Timed Book Review described as 'reasonably grammatical* and the I/тез L terarySuppierrenl called "bathroom-worthy .* Pre order your рареГОкл cooy now for Just $14 99
Al High Falutin High, the arts nigh school In her hometown, Daisy Fontana hr I in love Not with a boy ot even with a girl for that matter but with something altogether more interesting web design. Instead of a BFF, she had CSS Instead of singing and dancing with the other kids, she spent her lime coding alone. But when she graduated and moved to the city to find a |0b, sne knew everything about HI ML but nothing about life. Will me town eat her alive, or will she survive ano rise to the top of lhe cutlhmar world ot coding websites? Daisy Fontana is a nerd heroine for our times, and The Web Designer tolls her gripping tale.
Tve never seen a novel with so much HTML and CSS code. I mean there is a lol of code in this bonkl Sn much code Code, code, rnd* "
—T.! Murphy. Nowhere OK
*1 particularly loved lhe scenes where Daisy Is by herself in her room wrlt’ng HTML and CSS. its hard io make writing tags and properties interesting. and lhe author almost dots it* -M. Dash. Tightwad, mO
*1 couldn't put it down. No, really, I could not physically put this book down. Thanks to ne cheap cover stock the book was literally glued to my hands. I had u go to the emergency room to get the Mng off me.' —A Pendergast Walla Walla, WA
Select the version thaVs right for you!
Follow Logophflla Books on social media:
Q □ Q
About Contact Site Map Privacy
Cowusht ХОЗ имогнил toots
► Рис. 10.3.
Лендинг для моей книги
195
Проект: создание лендинга
Если с Лендингом и были какие то проблемы, то они заключались в необходимости применения множества трюков с отступами и полями (среди прочих CSS-методов) для того, чтобы правильно выстроить все содержимое Эти сложности возникли потому, что мы не скомпоновали макет страницы должным образом Хаотично разбросанные элементы мало напоминают упорядоченный макет. Но не расстраивайтесь. Макеты страниц — тема третьей части, в которой ны узнаете все необходимое, чтобы научиться создавать отличные макеты не только ле>щингов но и любых других сайтов
РЕЗЮМЕ
•	Создание страницы начинается с эскиза.
•	Затем выбирается шрифт для текста.
•	Далее следует выбрать цветовую схему
•	На следующем этапе формируется базовая структура страницы пишутся основные HTML-теги и глобальные CSS-свойства.
•	Наконец, по очереди наполняются содержимым и оформляются разделы страницы: шапка, описание, отзывы, цены, ссылки на социальные сети и подвал.
Часть III
Компоновка веб-страниц
Неотъемлемым аспектом веб-дизайна можно назвать умение расположить элементы страницы так, чтобы они не только радовали глаз, но и были интуитивно понятны и удобны для навигации. Предыдущее предложение могло показаться сложным, но главы в части III помогут вам разобраться. В главе 11 вы изучите основы верстки страниц, в том числе важные семантические НТМ1_5-элементы, такие как header и article В главе 12 вы познакомитесь с одной из самых популярных и мощных современных технологий верстки страниц — flex-макетами Глава 13 посвящена grid-макетам — технологии разметки страниц в сетке, которую так долго ждали веб-дизайнеры.
Современный веб-дизайн ориентирован в первую очередь на отзывчивость (адаптивность), благодаря которой страницы отлично функционируют и выглядят привлекательно на экранах любого размера Этому посвящена глава 14. Наконец, в главе 15 вы примените все полученные знания о компоновке веб-страниц на практике, создав сложную веб-фотогалерею
Глава 11
Основы компоновки веб-страниц
И]
В этой главе
	Способы, технологии и стратегии верстки веб-страниц.
	Знакомство с семантическими НТМЬ5-элементами разметки веб-страниц.
	Верстка современных рабочих макетов веб-страниц.
Первая половина книги была посвящена фундаментальным понятиям из области создания веб-страниц Затем мы перешли к основам HTML и CSS вы узнали о текстовых тегах, шрифтах, цветах, классах CSS, блочной модели, выраЕшивании и позиционировании элементов. добавлении изображений и прочего мультимедийного контента Можно вас поздравить вы перешли от умения просто создавать вебстраницы к умению их оформлять.
198
Макет «Святой Грааль»
В этой главе вы перейдете к следующему этапу веб-дизайна Здесь вы отвлечетесь от отдельных «деревьев» HTML-тегов и CSS-свойств и рассмотрите «лес» макета страницы Это касается общей структуры и организации веб-страницы и может показаться банальным или неважным Но задумайтесь вот о чем любой человек, который заходит на вашу страницу, осознанно или нет задает множество вопросов «О чем написано на этой странице7 Интересна ли мне она7 Есть ли здесь сведения, которые я ищу7 Если да. то где их найти?»
На все эти вопросы можно — или по крайней мере нужно — ответить, взглянув на макет. Если структура страницы хаотична, то я гарантирую нам, что большинство людей покинут сайт через несколько секунд Чтобы этого избежать, нужно потратить немного времени на планирование и создание макета, который отобразит ваш контент в лучшем и удобном для посетителей виде.
МАКЕТ «СВЯТОЙ ГРААЛЬ»
Чтобы было проще освоить различные техники верстки веб-страниц, я воспользуюсь макетом, который условно называется «Святой Грааль» и состоит из таких частей, как
•	шапка в верхней части страницы
•	навигационная панель под шапкой;
•	два полноразмерных столбца, состоящие из основного содержимого страницы слева и боковой панели связанного с ним содержимого справа (ино(да наоборот},
•	подвал в нижней части страницы.
Существует несколько вариаций такого макета в зависимости от того, насколько строю необходимо его определить, Например. между навигационной панелью и подвалом может быть три столбца, а не два. Еще одна распространенная версия — подвал отображается в нижней части окна браузера, пока пользователь прокручивает содержимое страницы. На рис. 11.1 показана схема макета, который мы создадим
Чтобы создать такой макет, необходимо разобраться в существующих методах компоновки страниц.
199
Основы компоновки веб-страниц
► Рис. 11.1.
Вариант веб макета «Святой Грааль»
ПАМЯТКА
Старая и уже практически заброшенная система разметки страниц основана на выравнивании элементов (см. главу 8) в целях организации содержимого страницы. Если хотите узнато, как она работает, то посмотрите мой учебник в песочнице Web Design Playground: wdpg.io/2/11-2-0
МЕТОДЫ КОМПОНОВКИ ВЕБ-СТРАНИЦ
Как я уже упоминал в главе 7, по умолчанию браузер отображает HTML-блоки в том порядке, в котором они указаны в исходном коде, в каждом блоке текст выводится слева направо (для языков с таким способом чтения) Для простейших веб-страниц (таких как персональная главная страница, которую вы создали в главе 5) стандартный макет вполне подходит, но на данном этапе своей карьеры веб-дизайнера вы куда более опытны На этом уровне вам нужно выйти за рамки стандартного макета и получить контроль над выводом веб-содержимого на странице Решить задачу можно с помощью множества методов, но сконцентрироваться следует на двух основных.
•	CSS-модуль Flexbox позволяет организовать содержимое страницы во flex-контейнеры, которые могут гибко сворачиваться, увеличиваться и уменьшаться О том, как он работает, читайте в главе 12
•	CSS-модуль CSS Grid дает возможность организовать содержимое страницы так, будто вы размещаете и выравниваете grid-элементы на невидимой сетке Все подробности см в главе 13.
Какой из них следует использовать7 Ключевое различие — flex-верстка в контексте компоновки элементов страницы одномерна
200
Семантические НТМЬ5-элементы
А вот grid' верстка двумерна р том смысле, что вы размещаете элементы страницы как по горизонтали, так и по вертикали одновременно Поэтому если в проекте требуется, чтобы элементы страницы были извлечены из стандартного потока содержимого то стоит использовать gnd-верстку для компоновки общего макета страницы, а затем дополнять эту систему flex-контейнерами, чтобы выровнять несколько элементов или горизонтально, или вертикально
гг Grid-верстка предназначена для использования с flex-версткой, а не вместо нее.
Олли Уильямс
Последний кусочек головоломки, который необходимо учесть, прежде чем приступить к работе, — это набор НТМ1_5-элементов, позволяющих собирать семантические макеты.
СЕМАНТИЧЕСКИЕ НТМЬ5-ЭЛЕМЕНТЫ
Очень важно, чтобы макеты ваших веб-страниц были семантическими, поскольку каждая страница, публикуемая в Интернете, будет неким образом прочитана и проанализирована автоматизированными процессами, такими как роботы поисковых систем и алгоритмы программ экранного доступа для людей с ограниченными возможностями Если ваша страница представляет собой лишь набор безымянных тегов <div> и <span>, то у такого ПО при анализе ваших страниц будет меньше шансов вычленить наиболее важный контент
Решить эту проблему поможет группа семантических элементов HTML5, которые можно использовать для разметки типа содержимого в каждой области вашей страницы Таких элементов довольно много, и наиболее важными из них можно назвать следующие семь <header> <nav> <maln> <article> <section> <aside> <footer>
В следующих нескольких уроках я расскажу о каждом из этих элементов.
ПАМЯТКА
Еще одна устаревшая технология разметки страниц — строчная блочная верстка; она до сих пор встречается в Интернете. Чтобы понять, как она работает, посмотрите мой учебник на сайте Web Design Playground: wdpg.io/2/ll-3-G
201
Основы компоновки веб-страниц
Правильная семантика... повышает до-' ' ступность, поскольку вспомогательные технологии, например программы экранного доступа, могут лучше интерпретировать смысл опубликованного содержимого.
Анна Мону с
Урок 11.1. Добавление семантического элемента шапки
Тема: элемент header
с£> Ссылка: wdpg.io/2/l 1-1-1
Элемент header используется для разметки шапки страницы, которая содержит зводное содержимое Чаще всего это название сайта (которое должно быть размечено элементом заголовка, например hl), но шапка может содержать и такие элементы, как логотип сайта. Рассмотрим пример
th Пример Ссылка, wdpg.ю/2/11-1-1
В этом примере мы добавим на страницу семантический элемент header.
ВЕБСТРАНИЦА
етс
header {
background-color: #6fa8dc;
Правило для изменения цвета фона элемента header
<header>
<img src="/images/SD-logo.png" alt="Semantics Depot logo">
<hl>Semantics :»epot</hl>
</header>
Элемент header
202
Семантические НТМЬ5-элементы
Когда шапка на страницу добавлена, чаще всего переходят к семантической разметке раздела навигации
Урок 11.2. Добавление семантического элемента навигации
Тема: элемент nav
Ссылка: wdpg ю/2/11-1-2
Элемент nav используется для разметки области страницы, содержащей навигационный контент, например ссылки на другие разделы сайта или поле поиска Этот элемент может располагаться в любом месте страницы, но обычно указывается сразу после элемента шапки страницы, как показано ниже.
^Пример Ссылка;wdpg.10/2/11-1-2
В этом примере мы добавим на страницу семантический элемент nav.
etc.
nav {
background-color: #eb9f9f; text-transform: uppercase;
padding: .25em;
}
Правило для изменения цвета фона элемента nav
<header>
<img src="/images/SD-Iogo.png" alt="Semantics Depot logo">
<hl>Semantics Depotc/hl>
</header>
<nav>
<a href="#“>Home</a>
<a href="#">Blogc/a>
<a href="#">Contact</a>
<a href="#">About Us</a>
</nav>
Элемент nav
203
Основы компоновки веб-страниц
Разметив шапку и навигацию, можно приступать к разметке основного содержимого страницы, которая обычно начинается с семантического элемента main.
Урок 11.3. Добавление семантического элемента основного содержимого Тема: элемент main izj> Ссылка: wdpq.io/2/11-1-3
Элемент main используется в качестве контейнера для содержимого, уникального для данной страницы. Элементы header, nav, aside и footer часто общие для всех или многих страниц сайта, а вот элемент main предназначен для разметки уникального содержимого. На каждой странице может быть только один такой элемент. Обычно main указывается после элементов header и nav, как показано в следующем примере.
^Пример ф Ссылка: wdpg, ю/2/11-1-3
R этом примере мы добавим на страницу семантический элемент main.
ВЕБ-СТРАНИЦА
Unique content goes here
<header>
cimg src="/images/SD-logo.png"
<hl>Semantics Depot</hl>
</header> cnav>
<a href="#" >Home</a>
ca href=,'#">L’iog</a>
<a href="#”>Contact</a>
<a href="#">About Us</a>
</nav>
<main>
Unique content goes here
</main>
alt=-"Semantics Depot logo">
Элемент main
204
Семантические НТМЬ5-элементы
Итак, добавив на страницу элемент main, можно добавлять в нее контент, как правило начав с семантического элемента article
Урок 11.4. Добавление семантического элемента публикации
Тема: элемент article
Ссылка: wdpg ю/2/11-1-4
Элемент article используется для обозначения законченной, самодостаточной композиции В качестве примера можно привести газетную или журнальную статью но данный элемент может применяться и при разметке записи в блоге, сообщения на форуме или эссе Большинство веб-страниц содержат один элемент article, вложенный в элемент main, как показано ниже
^Пример Ссылка: wdpg.ю/2/11-1-4
В этом примере мы добавим на страницу семантический элемент article.
ш LU OQ
Semantics Depot
1К‘Ш. BLOG CONTACT ABOUT L»S Article contem goes here.
<header>
<img src="/images/SD-logo.png"
<hl>Semantics Depot</hl>
</header>
<nav>
<a href="#">Home</a>
<a href-"#">Blog</a>
<a href="#">Contact</a>
<a href="#">Aoout Us</a>
</nav>
<main>
<article>
Article content goes here
</article>
</main?
alt="Semantics Depot logo">
Элемент article
205
Основы компоновки веб-страниц
Вполне допустимо использовать несколько элементов article в одном элементе main Кроме тою. обратите внимание, что можно вложить элемент header в элемент article, если это семантически целесообразно. <article>
<header?
<h2>Isn't It Semantic?</h2>
<p?By Paul McFedries</p>
</header>
А здесь приводится текст публикации </article>
Если ваша публикация содержит несколько разделов, то следующая семантическая задача - разметить эти части страницы с помощью элементов section.
Урок 11.5. Добавление семантического элемента раздела
Тема: элемент section
г~> Ссылка: wdpg ю/2/11-1-5
Элемент section используется для разметки части содержимого, которую необходимо вывести в составе страницы То есть если часть страницы состоит из элемента заголовка \hl-h6). за которым следует обычный текст, то заключите заголовок и последующий текст в теги элемента section. Обычно такая разметка выполняется внутри элемента article, как показано ниже
^Пример czj> Ссылка: wdpg.io/2/ll-1-5
В Э1ом примере мы добавим на страницу несколько семантических элементов section.
Introduction
Introduction text
Argument
AryutiK.n: tcxi
Summary
Summary text
206
Семантические НТМЬ5-элементы
<header>
<img src="/images/SD-logo.png" alt="Semantics Depot logo">
<hl>Semantics Depot</hl>
</header>
<nav>
<a href="ft">Home</a>
<a href="w">Blog</a>
<a href="#">Contact</a>
<a href="#“>About Us</a>
</nav>
<main>
<article>
p. <section>
<h3>Introduction</h3> Introduction text
>	</section>
>	<section>
<h3>Argument</h3>
Argument text
. —-*	</section>
<section>
<h3>Summary</h3> Summary text
/ '	</section>
1	</article>
I	</main>
Элел4енмр|
section
Если веб-страница содержит некий дополнительный контент, который следует отделить от основного то следующим в списке ваших задач семантической разметки будет помещение такого дополнительно! о содержимого в элемент aside
Урок 11.6. Добавление семантического элемента дополнительного содержимого
Тема: элемент aside
i_J> Ссылка: wdpg '0/2/11-1-6
Элемент aside используется для разметки части содержимого, которая не имеет прямого отношения к уникальному содержимому страницы. Типичный пример — боковая панель, содержащая ленту новостей, последние комментарии и т д Элемент aside может размещаться в любом месте элемента main (и более того, несколько раз на странице), но лучше всего указывать его после элемента article как показано ниже
207
Основы компоновки веб-страниц
Пример (=> Ссылка: wdpg.ю/2/11-1-6
В этом примере мы добавим на страницу несколько семантических элементов section.
Semantics Depot
ВЕБ- СТРАНИЦА
Hufcu wwutf iMI US
Introduction
Introduction text
Argument
Argument text
Summart
Summary text
Jside	Правило для изменения цвема
background-color: #Ma7d6;	‘	'
}
<header>
<img src='7images/SD-logo.png1' alt="Semantics Depot logo“>
<hl>Semantics Depot</hl>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">About Us</a>
</nav>
<main>
<artlcle>
<section>
<h3>lntroduction</h3>
Introduction text
</section?
<section>
<h3 Argument </h3>
Argument text
</section>
<section>
<h3>Summary<./h3>
Summary text
</section?
208
Семантические НТМЬ5-элементы
</article>
<aside?
<h3>Sidebar Title</h3>
<P>
Sidebar paragraph
</p>
</aside>
</main>
Элеллении aside
Теперь, когда на страницу добавлены шапка, навигация и основное содержимое, можно приступить к решению последней семантической задачи — к добавлению элемента подвала.
Урок 11.7. Добавление семантического элемента подвала
Тема: элемент footer
сф> Ссылка: wdpg ю/2/11-1-7
Элемент footer используется для разметки области страницы, которая содержит финальный контент, например уведомление об авторских правах, адрес и контактную информацию Рассмотрим пример, в котором показан семантический макет НТМ1_5-страницы.
► Пример Ссылка: wdpg.io/2/11-1 7
В этом примере мы добавим на страницу семантический элемент footer.
Semantics Depot
Introduction Introduction text Aigumrnt Argument text Summaiy
209
Основы компоновки веб-страниц
footer {	X
background-color: #b6d7a8;
}
Правило для изменения цвета фона элемента footer
<header>
<ling src="/images/SD-logo.png" alt="Semantics Depot logo">
<hl>Semantics Depot</hl>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">About Usc/a>
</nav>
<main>
<article>
<section>
<h3>Introduction</h3> Introduction text </section> <section>
<h3>Argumentc/h3> Argument text </section> csectionx
<h3>Summary</h3>
Summary text
</section>
</article>
<aside>
<h3>Sidebar Title</h3>
<P>
Sidebar paragraph
</p>
</asiae>
</main>
<footer>
<p>Copyright Semantic Dep?t</p>
</footer>
Элемент footer
Теперь, создав полноценную страницу со всеми необходимыми семантическими элементами, самое время вернуться к макету «Святой Грааль» и посмотреть как они вписываются в общую картину
210
Семантические НТМЬ5-элементы
Семантическая разметка макета «Святой Грааль»
Ранее вы узнали о макете «Святой Грааль», который я теперь могу представить в контексте семантической разметки по правилам HTML5. На рис 11.2 показана та же схема, что и на рис. 11.1, но с семантическими НТМЬ5-тегами, размечающими каждую часть.
Приведу каркас HTML-кода этого макета
► Рис. 11.2.
Переразмеченный макет «Святой Грааль» с семантическими
HTML 5-элементами
«header?
<img src«"logo.png" аИ="Логотип"? «Ь1?Название сайта«/Ь1?
</header>
<nav?
<ul>
<11>Элемент l</li> и т. д.
</ul>
</nav>
<main>
«article?
<section>
<1т2?Название публикации</112?
<р?Текст публикации</р> и т. д.
</section> «aside?
<р?Боковая панель«/р? и т. д. «/aside?
«/article?
«/main?
«footer?
<р?Подвал«/р?
и т. д.
«/footer?
211
Основы компоновки веб-страниц
Наверняка вы обратили внимание, что страница-пример которую я создал в этой главе не очень похожа на макет «Святой Грааль» с рис 11.2 Это потому, что я позволил браузеру использовать стандартный поток для каждою семантического элемента. Выход за пределы этого потока — тема следующих двух глав
РЕЗЮМЕ
•	Семантическая разметка страниц выполняется с помощью HTML5-элементов header, nav, main article, section, aside и footer
•	С помощью элемента header размечается шапка страницы.
•	Элемент nav используется для разметки навигационных ссылок
•	На странице может быть только один элемент main который используется в качестве контейнера для содержимого, уникального для данной страницы
•	С помощью элемента article размечается законченная, самодостаточная композиция.
•	Элемент section используется для разметки области, содержащей часть композиции
•	Если на странице опубликовано содержимое, не имеющее прямого отношения к уникальному контенту страницы, то оно размечается с помощью элемента aside
•	Элемент footer используется для разметки заключительного содержимого.
Глава 12
Создание flex-макетов веб-страниц
В этой главе
	Принципы flex-макетов.
	Методы работы с flex-контейнерами и элементами.
•	Реалистичные flex-макеты на практике.
	Верстка flex-макета «Святой Грааль».
В главе 11 упоминалось, что т HTML5 доступно множество элементов разметки веб-страниц, от header до -Footer, от article до aside Однако эти элементы несут только семантическое предназначение, то есть никак не влияют на верстку сайта. Чтобы ваши веб-страницы выглядели желаемым образом, вам нужно выйти за пределы стандартного потока браузера, используя современные и мощныетехнологии flex- и grid-верстки.
213
Создание flex-макетов веб-страниц
Вы познакомитесь с grid- версткой в главе 13. а в этой основное внимание мы уделим flex-верстке Вы узнаете, что это такое и каковы возможности и устройство flex-макетов Стоит отметить, что за flex-версткой закрепилась репутация сложной в освоении технологии, но я докажу, что созданию flex-макетов можно научиться очень легко, выполнив несколько простых действий.
ОБЗОР FLEX-ВЕРСТКИ
Flexbox — удобное сокращение громоздкого официально! о названия метода flex-верстки' Flexible Зох Layout Module — модуль макета гибкого контейнера Принцип, лежащий е основе flex-верстки, заключается в поиске способа обойти строгий и тяжелый способ обработки содержимого браузером По умолчанию они компонуются в стопку. Рассмотрим следующий набор элементов div
<div class-"container">
<div class="item itemA">A<./div>
<div class="item itemB">B</div>
<div class="item itemC“>C</div>
<dlv class="item itemD">D</div>
<div class="item itemE">E</div>
<div class="item itemF">F</div>
<7div>
Классы для окрашивания каждого элемента в уникальный цвет фона в коде не показаны На рис 12.1 виден результат, и со1ласно ему элементы div укладываются в стопку и растягиваются по ширине окна браузера
Разумеется, можно прервать такой стандартный поток, использовав выравнивание элементов или строчные блоки (я говорил об этом в главе 8), но, увы. браузер по-прежнему управляет блоками по своему усмотрению Да, можно попытаться укротить браузер, отформатировав выровненные и строчные блоки нужным образом, но способ, мягко говоря, не кажется надежным
На помощь приходит flex-верстка, реализующая простые, но чрезвычайно мощные методы компоновки, распределения, выравнивания. изменения размеров и даже упорядочения дочерних элементов в родительском контейнере Приставка flex — «гибкость» — происходит от одного из основных принципов этой технологии дочерние элементы в контейнере должны гибко изменять размеры (ширину и ьысоту). увеличиваясь, чтобы заполнить пустое пространство, или уменьшаясь при необходимости Это происходит при изменении количества содержимого и/или размеоа экрана (напоимер. при разворачивании окна или повороте устройства)
214
Обзор flex-верстки
-» с  web<mign(NBygrowM.k)^examplevne-ficxbOK/	g) ft Л ft □ & :
А В С D Е F
► Рис. 12.1.
Стандартный поток div-элеменгов в браузере
Значит, flex верстка идеальна7 Нет, это не так У нее есть два основных недостатка
•	Из-за гибкости flex-макеты иногда выглядят нелепо Поначалу это вызывает недоумение или даже раздражение, но постепенно вы поймете, почему flex-макеты ведут себя таким образом
•	Flex-верстка не годится для крупномасштабных макетов. Flex-макеты прекрасно решают задачи с одномерными компонентами страницы — например, с шапкой или боковой панелью — и отлично подходят для небольших макетов (типа макета «Святой Грааль») Но большие и сложные проекты почти есегда невозможно реализовать, используя flex-верстку. Это не страшно, поскольку масштабные макеты — область применения gnd-версгки CSS, речь о которой пойдет в славе 13
В случае flex-верстки вы работаете с двумя типами объектов контейнерами и элементами Нех-контейнер — это родительский блочный элемент — div, р. любой из семантических HTML-элементов, которые вы изучали в главе И, и даже элемент body, содержащий элемент (- ы) Эти дочерние объекты называются flex-элементами.
Итак, достаточно теории Пришло время узнать, как устроен flex-макет.
215
Создание flex-макетов веб-страниц
ПРАКТИКУМ
В песочнице можно опробовать все варианты свойства flex-direction в интерактивном режиме.
г_2> Ссылка: wdpg io/2/12-1-2
ПАМЯТКА
Значение row используется по умолчанию, поэтому объявление flex-direction: row указывать не обязательно.
ПАМЯТКА
Если в этом примере применить свойство flexdirection: column, то получится макет, показан ный на рис. 12.1; основная ось расположится сверху вниз, а перекрест на я — слева направо В случае flex-direction: column-reverse получится тот же макет с элементами div в обратном порядке; основная ось бу дет располагать ся снизу вверх, а перекрестная — слева направо.
УПРАВЛЕНИЕ FLEX-КОНТЕЙНЕРАМИ
Прежде чем приступать к flex-верстке, необходимо решить какой блочный элемент станет flex-контейнером Определившись, вы преобразуете этот элемент в контейнер с помощью простого CSS-объявления. display: flex. Показанное ниже правило превращает элемент header во flex-контейнер
header {
display: flex;
Дочерние элементы контейнера автоматически приобретают свойства flex-объектов никаких дополнительных правил, деклараций или иного кода не требуется Теперь можно настраивать flex-контейнео и его элементы в соответствии с поставленной задачей
На мой взгляд, прежде чем верстать flex-макет, следует сначала ответить на несколько вопросов, касающихся контейнеров и элементов в них Ниже приведены вопросы для контейнеров
•	Каково направление контейнера7
•	Как элементы располагаются на основной оси?
•	Каково расположение элементов на перекрестной оси7
•	Следует ли переносить элементы?
•	Как строки располагаются на перекрестной оси7
(Не волнуйтесь, если не понимаете, что я подразумеваю под основной и перекрестной осями. Все станет понятно в следующем разделе.) Далее мы обсудим возможные ответы на все эти вопросы
Направления flex-контейнеров
Первое, что следует сказать о гибкости flex-макетов, — направления для элементов контейнера можно менять Стандартная компоновка силами браузера жестко определяет вертикальное направление, а выровненные и строчные блоки компонуются только в горизонтальном направлении, а вот flex-верстка допускает любое направле ние Решать вам
Возможно, самая важная концепция flex-верстки, которую нужно усвоить с самого начала, заключается в том что flex-контейнеры всегда имеют две оси.
•	основную расположенную в том же направлении, что и элементы контейнера
•	перекрестную (или вторичную), расположенную перпендикулярно основной оси
216
Управление flex-контейнерами
Вы определяете направление основной оси. указывая значение свойства flex-direction при форматировании контейнера контейнер {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
J
•	row — определяет горизонтальное направление основной оси, элементы которой располагаются слева направо (по умолчанию)
•	row-reverse — меняет в другую сторону горизонтальное направление основной оси, элементы располагаются справа налево
•	column — опоеделяет вертикальное направление основной оси. элементы располагаются сверху вниз
•	column-reverse — обращает вертикальное направление основной оси, элементы располагаются снизу вверх.
Следует отметить, что согласно значению row, элементы выстраиваются строго по направлению чтения вашего языка Если используется язык, который читается справа налево (например, арабский), то элементы располагаются справа налево (и. соответственно, значение row-reverse будет менять порядок следования элементов на слева направо).
Используя элементы div. показанные на рис. 12 1, можно превратить родительский div-элемент во flex-контейнер, указав направление с помощью значения row
.container {
display: flex;
flex-direction: row;
}
На рис 12 2 показан итог, а на рис 12 3 — результат воздействия на макет правила flex-direction: row-reverse
-> C * webdes>gnpia»groundlo/2/examples/tlexDo>-direction-row/	й ☆	& * □	:
Перекрестная ось
Основная ось
► Рис. 12 2. Элементы div с flex-контейнером и направлением row
217
Создание flex-макетов веб-страниц
<- С • weodesigr playground. io/2/exampies/flexbox-diieclion-row-reverse/ й ☆ й * II £ :

Основная ось
► Рис. 12.3. Элементы dw с flex-контейнером и направлением row-reverse
ПРАКТИКУМ
Как бы вы использовали flex-разметку для отображения нумерованного списка в обратном порядке?
Ссылка: wdpg.io/2/12-1-4
ПАМЯТКА
Значение f lex-start используется по умолчанию, поэтому объяв ление justify-content: flexstart указывать не обязательно.
ПРАКТИКУМ
В песочнице можно интерактивно поэкспериментировать со значениями свойства justify-content.
с_£> Ссылка: wdpg.io/2/12-1-5
На рис 12.2 показан тот же результат, что и при использовании правила float: left или display: inline-block, а на рис 12 3 — тот же результат, что и в случае применения правила float: right (этот результат невозможно получить, используя строчные блоки). Стоит отметить, что при Нех-разметке вы достигаете цели, добавив пару деклараций к контейнеру, а не форматируя каждый дочерний элемент отдельно, как это делается в случае с гыравниванием и строчными блоками Как вы понимаете, flex-разметка проще и эффективнее
Выравнивание элементов по основной оси
Итак, с помощью свойства flex-direction мы задали основную ось для контейнера Дальше следует выровнять элементы по этой оси. Используйте свойство justify-content для форматирования контейнера следующим образом:
контейнер {
display: flex;
justify-content: flex-start | flex-end | center | space-between I space-around | space-evenly;
}
•	flex-start — помещает элементы в начало контейнера (по умолчанию)
•	flex-end — помещает элементы в конец контейнера
•	centei— помещает элементы в центр контейнера
•	space-between - размещает элементы так, чтобы первый элемент находился в начале контейнера, последний — в конце, а остальные были равномерно распределены между ними.
•	space-around — распределяет элементы внутри контейнера, предоставляя большинству элементов одинаковое количество пространства по обе стороны, причем первый элемент занимает половину этого пространства слева, а последний — половину пространства справа
218
Управление flex-контейнерами
•	space-evenly — равномерно распределяет элементы в контейнере. предоставляя каждому элементу одинаковое количество места с каждой стороны.
На рис 12 4 показано, как каждое значение влияет на расположение элементов в контейнере (основная ось расположена горизонтально). (Обратите внимание, что я добавил контур по периметру каждого контейнера, чтобы вы увидели его границы.)
flex-start
flex-end center
space between space-around space-evenly
► Рис. 12.4.
Значения свойства justify-content
Выравнивание элементов по перекрестной оси
Расположив элементы по основной оси, вы можете определиться с перекрестной осью. Для этого используется свойство align-items контейнера:
контейнер {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}
•	stretch — расширяет каждый элемент по поперечной оси до заполнения контейнера (по умолчанию)
•	flex-start — выравнивает элементы в начале перекрестной оси
•	flex-end — выравнивает элементы в конце перекрестной оси
•	centei— выравнивает элементы в центре перекрестной оси.
•	baseline — выравнивает элементы по базовой линии первой строки текста во flex-контейнере.
На рис 12 5 показано, как значения свойства justify-content влияют на расположение элементов в контейнере (перекрестная
ПАМЯТКА
Значение stretch используется по умолчанию, поэтому объявле-ние align-items: stretch указывать не обязательно.
ПАМЯТКА
Если необходимо добавить про странство между элементами в каждом столбце flex-контейнера, то задайте свойству column-gap нужное значение. Для настройки промежутка между строками flex-контейнера используется свойство row-gap.
219
Создание flex-макетов веб-страниц
ось расположена вертикально). (Я добавил контур вокруг каждого контейнера, чтобы боти видны границы.)
In which ЛгжЛюп do you want the container to run?
Huw do you want the Items arranged аюлд the mam aws?
How do you want the items arranged along the cross axis?
Du you want the Items to wrap?
How do you want multiple lines arranged along the cross axis?
In which	How do you	How do you	DO you
агссЬол do	want rhe	want the	want
you want	Items	items	the
the	arranged	arranged	items
cocumar to	along the	along the	to
run?	main axis?	cross axis?	wrap?
Mow do you want multiple lines arranged along the
fiexstan
in which direction do you want the container to run?
How do you want the items arranged along the main axis?
How do you want the items arranged along the crow axis?
DO you want the items to wrap?
how do you want multiple lines arranged along the cross axis?
In which Лгасьоо do you want the container to run?
How do you want the Items arranged along the main axis?
mow do you want the items arranged along the cross axis?
Do YOU want the item* to wrap?
How do you want muftipla lines arranged along the сто» axis?
In which
baseline
How do vou want How do vou want direction do you the Items arranged the items arranged want the along the main along the cross container to run’ axis?
Do vou want the items to wrap?
How do vou want multiple lines arranged along the cross axis’
center
flex end
baseline
► Рис. 12.5. Значения свойства align-items
ЧАВО
Все эти выравнивания сбивают с толку. Что может помочь запомнить их?
Почти всем, кто только начинает изучать flex-верстку, тяжелее всего освоить выравнивание элементов. Попробуйте запомнить, что основная ось сродни горизонтальной, а перекрестная ось — вертикальной.
Перенос flex-элементов
По умолчанию flex-контейнер компонуется в одну строку (если зы присвоили свойству flex-direction значение row или row-reverse) или столбец (если свойству flex-direction присвоено значение column или column-reverse). Если элементы flex-контейнера слишком нелики и не помешаются в строку или столбец, то сжимаются по основной оси до подходящего размера. Как вариант, можно перенести элементы контейнера на несколько строк или столбцов, а не сжимать их. Для этого к контейнеру применяется свойство flex-wrap контейнер {
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
J
•	nowrap — элементы контейнера не переносятся (значение по умолчанию).
•	wrap — элементы пеоеносятся на необходимое количество строк или столбцов
•	wrap- reverse — элементы переносятся в конце перекрестной оси
220
Управление flex-контейнерами
На рис 12 6 показано, как каждое значение влияет на выравнивание элементов в контейнере (основная ось расположена юризон-тально). (Я добавил оранжевый контур вокруг каждого контейнера, чтобы вы могли видеть его границы.)
nowrap
In which	How do you	How do you	Do you want	How do you
direction on	want the items	want the items	the items to	want multiple
you want the	arranged along	arranged along	wrap?	lines arranged
container to	the main axis?	the cross axis?		along tne cross
run?				axis?
In which direction do you wanr the container to run?
Do you want №e Items to wao?
How do you want the items arranged along the cross axis?
wrap
How oo you want the items arranged along the main axis?
How oo you want multiple lines arranged along the cross axis?
Do you want the Items to wap?
wrap-reverse
In which direction do you want the container to run?
How do you want multiple lines arranged along the cross axis?
How do you want the Items arranged along the main axis?
How do you want the items arranged along the cross axis?
► Рис. 12.6. Сеойство flex-wrap на практике
Выравнивание строк по перекрестной оси
Последнее решение, связанное с контейнером, — способ расположения строк/столбцов по перекрестной оси Он похож на вырав! <ивание отдельных flex-элементов по основной оси, но здесь вы имеете дело с целыми строками элементов Выравнивание пыполняется с помощью свойства align-content
контейнер {
display: flex;
align-content: stretch | center | flex-start | flex-end I space-between | space-around I space-evenly;
}
•	stretch — расширяет строки по поперечной оси, заполняя контейнер по высоте (по умолчанию)
•	center — размещает строки в центре перекрестной оси
ПРАКТИКУМ
Можно поэкспериментировать с различными значениями свойства align-items в интерак тивном режиме в песочнице.
Ссылка: wdpg.iO/2/l2-1-6
ПАМЯТКА
Значение nowrap используется по умолчанию, поэтому объявление flex-wrap: nowrap указы вать не обязательно.
ПРАКТИКУМ
Вы можете поэксперименти ровать с тремя значениями свойства flex-wrap в интерактивном режиме песочницы.
Ссылка, wdpg.ю/2/12-1-8
221
Создание flex-макетов веб-страниц
ПАМЯТКА
Значение stretch используется по умолчанию, поэтому объявление align-content: stretch указывать не обязательно.
ПРАКТИКУМ
Можно поэкспериментировать с различными значениями свойства align-content в интерактивном режиме в песочнице.
сф Ссылка;
wdpg.io/2/12-l-lCi
•	flex-start — размещает строки в начале перекрестной оси
•	flex-end — размещает строки в конце перекрестной оси.
•	space-between — помещает первую строку в начало перекрестной оси, последнюю — в конец, а остальные строки равномерно распределяет между ними
•	space-around — равномерно распределяет большинство строк внутри контейнера, предоставляя каждой строке заданное количество пространства по обе стороны, причем первый элемент получает половину этого пространства перед строкой, а последний — половину пространства после
•	space-evenly — равномерно распределяет строки d контейнере, предоставляя каждой строке одинаковое количество пространства с обеих сторон
На рис. 12 7 показано, как в зависимости от значения меняется расположение строк з контейнере (основная ось расположена горизонтально). (Я добавил оранжевый контур вокруг каждого контейнера, чтобы вы могли видеть его границы )
► Рис. 12.7. Применение сюйства abgn-content
222
Управление flex-контейнерами
Урок 12.1. Выраениеание элемента по центру с помощью flex-разметки Тема: flex и другие свойства flex-контейнера
Ссылка: wdpg.io/2/12-l-O
При размегке веб-страниц чаще всего возникает простейший на первый взгляд вопрос как выровнять элемент по центру, сразу и по горизонтали, и по вертикали? То есть как с помощью CSS поместить элемент точно в центр окна браузера7 За многие годы было придумано множество хитроумных приемов для решения этой задачи, причем большинство из них основаны на сложных правилах CSS К счастью, есть простое решение flex-верстка допускает размещение любого элемента в центре экрана при выполнении четырех правил CSS, как показано в следующем примере
^Пример
cj> Ссылка wdpq. о/2/12-l-l
В этом примере мы выравниваем элемент hl по горизонтали и вертикали в окне браузера.
Center Me!
LQ LU
div {
display: flex;
justify-content: center;
Выравниваем элемент Kl > no горизонтали
align-items: center; *	- Выравниваем элемент Ml
height: 100vh;	no вертикали
Изменяет размер элемента div согласно высоме окна браузера
<div>
<hl>Center Me!</hl>
</div>
В этом примере задача решается за счет превращения элемента div во flex- контейнер, который автоматически преобразует заголовок hl во flex-элемент. Присвоив свойс!вам justify-content и align-items значение center и настроив высоту контейнера div равной высоте окна браузера 'по умолчанию она равна ширине окна браузера), вы центрируете элемент hl в окне.
223
Создание flex-макетов веб-страниц
РАБОТА С FLEX-ЭЛЕМЕНТАМИ
Теперь, познакомившись с контейнерами flex-макетов, обратите внимание на flex-элементы внутри этих контейнеров. Как и прежде, к изучению и использованию flex-элементов лучше всего подходить, задав себе ряд вопросов.
•	Должен ли элемент увеличиваться при наличии свободного про-странстча?
•	Должен ли элемент уменьшаться, если ему не хватит пространства0
•	Следует ли устанавливать исходный размер элемента0
•	Требуется ли изменить порядок элементов?
•	Нужно ли изменить выравнивание элементов0
Далее мы обсудим эти вопросы и ответы на них.
Увеличение элемента при возможности
ПРОФИ
Чтобы рассчитать, какая часть пустого пространства отведена каждому элементу, сложите все значения flex-grow в дан ном контейнере, а затем разделите отдельные значения свойства flex-grow на полученную сумму. Например, значения 1, 2 u 1 в сумме равны 4, поэтому процентное соотношение составляет 25 (1 разделить на 4), 50 (2 разделить на 4) и 25 (J разделить на 4) соответственно.
Если вы снова взглянете на рис 12 4. то заметите, что в случае использования значения flex-st art flex-элементы группируются в начале контейнера, оставляя справа пустое пространство. Такой эффект может быть нежелательным, и элементы должны заполнить это пустое пространство Для этого к элементу, который необходимо расширить, примените свойство flex-grow
элемент {
flex-grow: значение;
}
По умолчанию всем flex-элементам присваивается значение flex-grow, рапное 0. Чтобы увеличить элементы, заполнив пустое пространство контейнера, присвойте им положительные числа следующим образом (рис. 12 8).
•	Когда flex-элементу в контейнере будет присвоено положительное значение, к этому элементу добавится соответствующее количество пустого пространства в контейнере
•	Если прис воить одно и то же положителы юе значение нескольким flex-элемснтам в контейнере, то объем пустого пространства в контейнере будет разделен поровну между этими элементами.
•	Если присвоить нескольким flex-элементам в контейнере разные положительные числа, то объем пустого пространства в контейнере будет пропорционально разделен между этими элементами в соответствии с указанными значениями Если присвоить трем элементам значения 1, 2 и 1, то эти элементы получат 25, 50 и 25 % пустого пространства соответственно
224
Работа с flex-элементами
flex-grow О
С- С a webiteaignptoyfroufMtia/2/exMnptes/n«>bm. Oat-growf
о * а » □ 3
flex-grow: 1
flex-grow. 1
flex-grow: 1
Пустое пространство во Лех-контейнере
► Рис. 12.8. Влияние на макет различных значений свойства flex-grow
Уменьшение элемента при необходимости
Помимо расширения flex-элементов в целях заполнения пустого пространства контейнера, распространена проблема сжатия flex-элементов, когда в контейнере недостаточно места Эта функция используется по умолчанию, поэтому если браузер определяет, что flex-элементы слишком велики для размещения в контейнере, то автоматически уменьшает их размер
Степень уменьшения элемента зависит от его размера по отношению к другим элементам и размерам контейнера Предположим, что вы работаете с горизонтальной основной осью (то есть свойству flex-direction присвоено значение row), в котооой в контейнере шириной 1200 пикселов стремятся поместиться пять элементов шириной 4О‘ | пикселов. В сумме получается 2000 пикселов, поэтому браузер должен уменьшить ее на 800 пикселом, чтобы элементы поместились в контейнер. В данном случае, поскольку ширина всех элементов одинакова, браузер уменьшает ширину каждого из них на 160 пикселов
Если элементы имеют разную ширину, то вычисления существенно усложняются, поэтому я не буду их здесь рассматривать Достаточно сказал ь, что величина уменьшения ширины каждог о элемента зависит от его исходной шиоины Чем больше начальная ширина, тем сильнее уменьшается элемент.
225
Создание flex-макетов веб-страниц
ПРАКТИКУМ
В песочнице мож но интерактивно поэксп еримен-тироватъ с различными значениями свойства flex-grow
Ссылка; wdpg io/2/12-2-2
ИНФОРМАЦИЯ
На сайте hups:// www.mad ehy т ike. сот . а и/ writing/ understanding-flexbox Майк Ритмюллер доходчиво объясняет принципы вычисления размеров уменьшаемых flex-элементов
.ВНИМАНИЕ!
Браузер не будет уменьшать элемент до размера, минимально необходимого для от ображения его содержимого. Если вы увеличиваете значение свойства flex-shrink, а элемент не уменьшается, то, скорее всего, он достиг минимально возможного размера.
Вместо того чтобы позволять браузеру определять, насколько уменьшится каждый элемент, можно указать, что конкретный элемент должен быть уменьшен больше или меньше, чем другие элементы Для этого к элементу применяется сройство flex-shrink:
элемент {
flex-shrink: значение;
}
По умолчанию всем flex-элементам присваивается значение снойст^а flex-shrink, равное 1, то есть все они будут одинаково уменьшаться, когда это будет необходимо Чтобы самостоятельно управлять коэффициентом уменьшения, присвойте положительные значения свойства flex-shrink этим элементам следующим образом (рис 12.9).
•	Если кы присвоите свойству flex-shrink значение выше 1, то браузер сожмет этот элемент больше, чем другие элементы, на коэффициент, который н некоторой степени пропорционален заданному вами значению (Опять же вычисления довольно сложные.)
•	Если зы присвоите свойству flex-shrink значение в диапазоне от 0 до 1. то браузер уменьшит этот элемент в меньшей степени, чем другие элементы
•	Если вы присвоите свойству flex- shrink значение 0, то браузер не будет уменьшать элемент.
226
Работа с flex-элементами
Указание начального
размера элемента
Итак, flex-элементы могут увеличивзться/уменьшаться в зависимости от расположения в контейнере, и на этот процесс можно влиять с помощью свойств flex-grow и flex-shrink Но, когда речь идет об изменении размера flex-элементов, какое значение берется за исходное? Это зависит от следующих факторов
•	Если ширина (свойству flex-direction присвоено значение row) или высота элемента (свойству flex-direction присвоено значение column) объявлена, то элемент меняет размер, исходя из этою указанного значения.
•	Если ширина или высота элемента не объявлена, то его размер автоматически подгоняется браузером до значений, минимально необходимых для размещения содержимого элемента Элемент может увеличиваться, исходя из этого начального значения, но не может уменьшаться до более низких значений.
В последнем случае, то есть при отсутствии правил ширины (f lex-direction : row) или высоты (flex-direction: column), возникает две проблемы Во-первых, элемент не может становиться меньше с воею содеожимого Во-вторых, начальный размер (то есть минимальный, необходимый для отображения содержимого) может быть меньше чем требуется для сайта. Обе проблемы можно решить, задав базовый размер элемента по основной оси Для этого применяется свойство flex-basis
элемент {
flex-basis: значение | auto | content;
}
•	значение определяет ширину (при flex-direction: row) или высоту (при flex-direction: column) элемента Можно использовать любые единицы измерения CSS о которых вы узнали в главе 7. в том числе рх, em rem vw и vh Можно также указать значение в процентах.
•	auto — позволяет браузеру определить базовый размер на основе свойства width или height элемента (по умолчанию). При отсутствии такого объявления значение auto аналогично content, о котором речь идет ниже.
•	content — устанавливает базовую ширину или высоту на основе содержимого элемента.
ПРАКТИКУМ
В песочнице можно интерактивно поэкспериментировать с раз личными значениями свойства flex-shrink.
с£> Ссылка wdpg.io/2,'12-2-5
227
Создание flex-макетов веб-страниц
Краткая нотация свойства flex
Следует упомянуть, что flex-верстка поддерживает свойство flex, определяющее значения свойств flex-grow, flex-shrink и flexbasis. Допустим любой из следующих синтаксисов
элемент {
flex: fLex-grow fLex-shrink f Lex-basis;
flex: fLex-grow fLex-shrink;
flex: fLex-grow fLex-basis;
flex: fLex-дгон;
flex: fLex-basis;
}
Рассмотрим пример объявления, в котором используются значения по умолчанию всех перечисленных выше свойств:
flex: 0 1 auto;
В этом примере свойству flex-grow присваивается значение 1. а свойству flex-shrink — значение 0
flex: 1 0;
Последний пример форматирует элемент с фиксированным размером 10 ет
flex: 0 0 lOem;
Изменение порядка flex-элементов
Один из самых неожиданных и удивительно удобных приемов, предлагаемых flex-версткой, — возможность изменения порядка элементов в контейнере Опишу два распространенных сценария использования этой функции
•	Один из важных принципов доступности — размещать основное содержимое страницы как можно ближе к ее е ерхней части Если вы разместили рекламу или другой несущественный контент, скажем, на левой боковой панели, то в исходном коде он обязательно окажется первым. Однако с помощью flex-разметки можно поместить код боковой панели после основного содержимого, а затем изменить ее расположение так. чтобы она отображалась в левой части страницы.
•	Не менее важный принцип веб-дизайна для мобильных устройств — размещение основного содержимого на первом экране, который видят пользователи смартфонов и планшетов. Если вы не хотите перекомпоновывать контент для пользователей компьютеров, то можно добавить медиавыражение CSS, которое с помощью flex-разметки меняет порядок расположения содержимого в зависимости от используемого устройства
228
Работа с flex-элементами
С помощью свойства order можно изменить порядок следования flex-элементов:
элемент {
order: значение;
}
По умолчанию нсем элементам во flex-контейнере присваивается значение свойства order, равное 0 Порядком элементов можно управлять следующим образом-
•	чем выше значение свойства order элемента, тем позже/дальше он пояиляется в контейнере,
•	элемент с наибольшим значением свойства order отображается последним в контейнере,
•	элемент с наименьшим значением свойства order отображается в контейнере первым.
На рис 12.10 показаны несколько значений свойства order
order О
► Рис. 12.10.
Влияние на макет различных значений свойства order
ПРОФИ
Допускаются отрицательные значения свойства order, поэтому простой способ переместить элемент на передний план контейнера — присвоить свойству значение -1
ПРАКТИКУМ
В песочнице можно интерактивно поэксперимент и-роватъ со свойством order.
Ссылка;
wdpg.io/2/L2-2-6
Выравнивание flex-элементов по отдельности
Ранее я говорил, что для выравнивания элементов по пеоекрестной оси контейнера можно использовать свойство align-itens Вместо одинакового выравнивания всех элементов можно выровнять определенные элементы особым образом. Это можно сделать с помощью свойства align-self элемента
элемент {
align-self: stretch | flex-start | flex-end | center | baseline;
}
229
Создание flex-макетов веб-страниц
Допустимые значения оказывают такое же влияние, что и и случае свойства align-items контейнера (см. подраздел «Выравнивание элементов по перекрестной оси» ранее в этой главе). Кроме toi о. можете присвоить значение auto, чтобы сбросить элемент к текущему значению align-items. На рис 12 11 показан контейнер с правилом align-items: flex-start для последнего элемента в котором указано свойство align-self: flex-end
align-items: flex-start
align self: flex end
► Рис. 12.11 Можно переопоеделить свойство align-items контейнера с помощью свойства abgn-self
Урок 12.2. Создание списка миниатюр
Тема: свойства flex-grow и flex-shrink
сф> Ссылка: wdpg.io/2/12-2-C
Распространенный контент на веб-страницах — простой список миниатюр в котором слева показаны миниатюрные изображения, а справа — описания или какая-то иная информация Такие элементы используются для фотогалерей, пользовательских каталогов, библиографий, проектов в резюме и многого другого. С помощью обычных правил CSS скомпоновать таким образом сразу и изображение, и текст сложно, поэтому воспользуемся flex разметкой, как показано в следующем примере
230
Работа с Аех-элементами
& Пример Ссылкамwdpg.iO/2/12-2-1
В этом примере мы выравниваем элемент hl по горизонтали и вертикали в окне браузера,
animal path
A footpath or track made оу the constant and long-term walking of animals.
ВЕБ-СТРАНИЦА
bridleway
A footpath that Is also suitable for a horse and rider.
coffin trail
A footpath used for transporting a coffin to a cemetery for burial.
desire line
An rfiformal path that pedestrians prefo' to гаке to get from ore location to another rather man using a sidewalk or otner official route.
.dictionary-container { list-style-type: none;
}
.dictionary-item { display; flex;
}
.dictionary-image { flex-shrink: 0;
}
.dictionary-entry { flex-grow: 1;
}
Все элементы li превращаются во Hex-контейнеры
Предотвращаем уменьшение
Миниатюр
Позволяем тексту заполнять остальную часть контейнера
<ul class="dictionary-container">
<li class="dictionary-item">
<div class="dictionary-image”>
<img src="/images/animalpath.jpg" alt="Photo of an animal path">
</div>
<div class="dictionary-entry">
<h4>animal path</h4>
<p>A -footpath or track made by the constant and longterm walking of animals.</p>
</div>
</li>
и т.д.
</ul>
231
Создание flex-макетов веб-страниц
Урок 12.3. Создание flex-макета «Святой Грааль»
Тема: разметка с помощью Лех и других Лех-свойств с^> Ссылка: wdpg.ю/2/ 12-3-0
ПАМЯТКА
Размещение контейнеров с горизонтальной основной осью внутри большего контейнера с вертикальной основной осью, как я делаю в этом упражнении, — это легкий способ верстки двумерных макетов.
Но все же для создания двумерных, макетов лучше воспользоваться grid версткой. Подробнее о ней читайте в гла ее 13.
^Пример
Итак, теперь можно сконцентрироваться на создании flex-версии макета «Святой Грааль» из главы 11 Он подразумевает три варианта, согласно которым вам нужно располагать содержимое рядом друг с другом шапка, навиг ационная панель и столбцы с содержимым Во всех трех случаях вы помещаете элементы во flex-контейнер с горизонтальной основной осью
Однако сначала обратите внимание, что эти элементы должны располагаться стопкой, а значит, им нужен flex-контейнер с вертикальной основной осью С этой задачей прекрасно справляется элемент body, поэтому задайте его в качестве flex-контейнера с вертикальной основной осью и содержимым вверху body {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: !>0em;
min-height: 10evh;
}
Обратите внимание, что я указал максимальную ширину и минимальную высоту контейнера Вы поймете, почему я использовал значение 100vhw. когда чуть позже перейдете к добавлению подвала Теперь оформите шапку, как показано в следующем примере
сф> Ссылка: wdpg.io/2/12-3-1
В этом примере мы расположим логотип и название сайта рядом друг с другом, используя flex-разметку.
YOUR	гр..
logo Site Title
HERE
header {
display: flex;
justify-content: flex-start; -—Выоо? элемента header align-items: center;	в виЗе пех-контейнера
border: lpx solid black;
padding: lem;
J .	— Предотвращает
header img ;	> сжатие логотипа
flex-shrink: 0;
232
Работа с Йех-элементами
hl { flex-grow: 1;	-*
padding-left: .5em; font-size: 2.5em;
Позволяйил элементу hl использовать оставшееся пространство шапки
<header>
<img src="/images/your-logo-here.png' alt=’Our logo">
<hl>Site Title</hl>
</header>
В этом примере я преобразовал элемент шапки (header) но flex-контейнер с элементами, расположенными в начале основной (горизонтальной) оси и центрированными на перекрестной (вертикальной) оси
Теперь преобразуем навигационную панель в горизонтальный flex-контейнер. как показано в следующем примере.
^Пример с^> Ссылка: wdpg.io/2/12-3-2
В этом примере мы расположим flex-элементы панели рядом друг с другом.
Home Item Item Item
nav {
padding: . 5em;
border: lpx solid black;
}
nav ul {
display: flex;
justify-content: flex-start;
list-styie-type: none; padding-left: . Sem;
}
nav li { paading-right: 1.5em;
}
Отображает элемент ul в виде flex-контейнера
<nav>
<ul>
<li>Home</li>
<li>Item</li>
<li>Itemc/li>
<li>Item</li>
</ul>
</nav>
233
Создание flex-макетов веб-страниц
В этом случае элемент ul преобразуется во flex-контейнер, а это значит что элементы 11 становятся flex-элементами. располагаемыми горизонтально от начала контейнера
Затем преобразуем элементы article и aside в разделе main во flex-элементы чтобо! скомпоновать двухколоночный макет В следующем примере показано, как это делается
^Пример Ссылка:wdpg,io/2/12-З-З
В этом примере мы расположим элементы article и aside рядом друг с другом в двухколоночном макете, используя flex-разметку.
ВЕБ-СТРАНИЦА
Article Title Article paragraph 1 Article paragraph 2	Sidebar Title Sidebar pso-agiaph
main {
display: flex;
Вывод элемента main в качестве Нек-контейнера
flex-grow: 1; Допускаем увеличение по
}	вертикали
article {
flex-gro 3-	Элемент article может
border: Ipx solid	black;	использовать три единицы
у	пространства
aside {	. Элемент aside может использовать
flex-grow; 1; ' одну единицу пространства
border: Ipx solid black;
}
<main>
<article>
<h2>Article Title</h2>
<p>Articie paragraph l</p>
<p>Article paragraph 2</p>
</article>
<aside>
<h3>Sidebar Title</h3>
<p>Sidebar paragrapn</p>
</aside>
</main>
234
Работа с flex-элементами
Следует обратить внимание на несколько интересных моментов. Во-первых, элемент main — двойной агент' он выступает в роли flex-контейнера для элементов article и aside, а также служит flex-элементом во flex-контейнере элемента body. Правило flex-grow: 1 элемента main дает браузеру указание выделить под main все пустое пространство по вертикали в контейнере body Опять же, зачем это нужно, станет ясно в процессе работы с подвалом.
Flex-элементам article и aside я присвоил свойство flex-grow со значениями 3 и 1 соответственно Таким образом, элемент article получает 75 % доступного горизонтального пространства, a aside — оставшиеся 25 %.
Наконец, добавьте элемент footer, которому не нужны flex-свойства На рис 12.12 показан результат
Обратите внимание, что элемент footer размещается е нижней части окна браузера, где и должен находиться в настоящем макете «Святой Грааль» Вы добились этого приятного штриха, решив три задачи
• превратив элемент body во fiex-контейнер с вертикальной основной осью;
ПРОФИ
Обратите внимание, что высота элементов article и aside одинакова, это приятный бонус, полученный благодаря правилу align-self: stretch, примененному к контейнеру body, Получается отличная боковая панель во всю высоту, и для этого не нужно прибе гать к каким-либо CSS-ухищрениям.
ПРАКТИКУМ
Как бы вы изменили этот макет, чтобы вывести боковую панель слева, а не справа?
|=£> Ссылка wdpg. ю/2/12-3-5
ПРАКТИКУМ
Как в макете «Святой Грааль-отобразить три столбца содержимого: боковые па нели слева и справа от элемента article?
Ссылка.
wdpg. ю/2/12-3-6
235
Создание flex-макетов веб-страниц
*	добавив объявление min-height: 100vh к элементу body, отчего высота последнего никогда не становится меньше окна браузера
•	добавив объявление flex-grow: 1 к элементу main чтобы тот занял все доступное вертикальное пространство в контейнере body
РЕЗЮМЕ
•	Определить направление контейнера позволяет свойство flexdirection
•	Для выравнивания элементов по основной оси используется свойство justify-content
•	Выровнять элементы по перекрестной оси можно с помощью свойства align-items.
•	Для переноса элементов используется свойство flex-wrap.
•	Выровнять несколько строк по перекрестной оси позволяет свойство align-content
•	Для автоматического увеличения элемента под свободное дополнительное пространство используется свойство flex-grow
•	Автоматическое сжатие элемента в случае нехватки пространства выполняется с помощью свойства flex-shrink
•	Для установки базового размера элемента используется с войст во flex-basis
•	Изменить порядок отображения элементоь поможет свойство order
•	Изменить выравнивание определенных элементов можно с помощью свойства align-self
Глава 13
Создание grid-макетов веб-страниц
В этой главе
	Концепции grid-макетов.
	Основы работы с контейнерами, строками и столбцами в grid-макетах.
•	Управление промежутками, областями и выравниванием в grid-макетах.
	Верстка grid-макета «Святой Грааль».
Долгие годы веб-дизайнеры используют громоздкие библиотеки типа Bootstrap, чтобы позициониоовать элементы страницы в виде строк или столбцов Такая верстка в сетке позволяет дизайнерам управлять расположением каждого элемента страницы. Однако этот подход затратен, поскольку библиотеки верстки в сетке часто сложны и почти всегда отягощены балластом в виде лишнего кода CSS или даже JavaScript
237
Создание grid-макетов веб-страниц
Сейчас ситуация быстро меняется в положительную сторону после появления технологии CSS Grid Layout (обычно сокращенно CSS Grid, или просто Grid — grid) Она поддерживается всеми актуальными версиями распространенных браузеров и выступает в роли удобного стандартизированного и не требующего дополнительных библиотек способа реализовать макет «в сетке» на ваших страницах В этой главе вы познакомитесь с основами grid-всрстки CSS. Вы узнаете, что она собой представляет, какими возможностями обладает и как работает
ОСНОВЫ GRID-ВЕРСТКИ CSS
В главе 12 я говорил, что благодаря flex-верстке можно прервать стандартный поток объектов в браузере путем формирования гибких flex-контейнеров, позволяющих управлять расположением элементов по горизонтали или по вертикали Было бы хорошо иметь способ создать контейнер, позволяющий точно управлять объектами страницы сразу и по горизонтали, и по вертикали
Модуль CSS Gnd Layout Module Level 1, который я буду называть CSS Grid или просто grid, может делать это. Основной посыл grid-верстки заключается в предоставлении веб дизайнеру возможности управлять блоками содержимого не так, как стандартно реализовано в браузере В потоке по умолчанию браузер складывает элементы друг на друга Рассмотрим следующий набор div-элементск
<div class="container">
<div	class="item
<div	class="item
<div	class="item
<div	class="item
<div	class="item
<div	class="item
itema">a</div> itemb">b</div> itemc">c</div> itemd">d</div> iteme">e</div> itemf">f</div>
</div>
Здесь не показано но я добавил специальные классы, окрашивающие фон элементов в разные цвета (и не только это) На рис. 13 1 показан результат: элементы div располагаются вертикально и растягиваются во нею ширину окна браузера
В главе 8 было сказано что из такого стандартного потока можно извлечь нужное количество элементов, используя выравнивание или преобразуя блоки в строчные. А в главе 12 вы научились использовать flex-верстку, чтобы располагать дочерние элементы горизонтально или вертикально в родительском контейнере Это прекрасные и полезные способы, но теперь нам нужно нечто большее. Теперь мы хотим получить полный контроль над расположением не только отдельных элементов строк или столбцов
238
Основы grid-верстки CSS
с элементами, но и всех элементов внутри контейнера, как по горизонтали. так и по вертикали.
► Рис. 13.1.
Стандартная компоновка div-элементов в браузере
Такой контроль позволяет получить технология CSS Grid Layout. В grid-макетах вы работаете с двумя типами объектов страницы: контейнерами и элементами Grid-контейнер — это элемент любого типа в родительском блоке. К таким элементам относятся div, р, все семантические HTML-элементы, изученные вами г главе 11. даже body — элемент, окружающий дочерние элементы, которые называются grid-элементами Итак, пришло время узнать, как устроена grid-верстка
Урок 13.1. Работа с grid-контейнерами
Тема: объявление display: grid
Н) Ссылка: wdpg io/2/13-1-0
Приступая к gnd-верстке, ны назначаете блочный элемент grid-контейнером с помощью простого CSS-объявления, display: grid Так, показанное ниже правило превращает элемент body ь gnd-контейнер body {
display: grid,
}
239
Создание grid-макетов веб-страниц
Дочерние объекты в контейнере автоматически становятся grid-элементами, каких-либо дополнительных правил, деклараций или иного кода не требуется После этого можно настраивать gnd-контейнер и его элементы в соответствии с поставленной задачей.
► Пример Ссылка; wdpg.io/2/13-1-0
В этом примере показано, как преобразовать элемент г grid-контейнер
а b
ВЕБСТРАНИЦА
.container { display: grid;
}
Класс container преобразуемся в grid-контейнер
<div class="container">
<div cla$s=“item itema">a</div>
<div class="item itembL,>b<./div>
<div class="item itemc">c</div>
<div class="item itend'>d(/div>
<div class="item iteme“>e</div>
<div class="item itemf">f</div>
</div>
Эми контейнеры dtv становятся grid -элементами
Элемент div становимся grid-контейнером
Обратите внимание, что в примере я создал элемент div с классом container В CSS-файле я применил правило display: grid к классу .container Как видно из результата, похоже, что ничего особенного не произошло поскольку дочерние элементы div по-прежнему отображаются в стандартном потоке. (Я говорю «похоже», так как на самом деле стандартный поток был преобразован в одноколоночный grid-макет, поэтому макет лишь выглядит как отражение стандартного потока браузера.) Чтобы доработать его, необходимо указать строки и столбцы grid-макета, что вы и сделаете далее.
240
Основы grid-верстки CSS
Урок 13.2. Определение столбцов и строк в grid-макете
Тема: свойства grid-template-columns и grid-template-rows
Ссылка: wdpg io/2/13-2-0
Чтобы gnd-контейнер делал что-то полезное, нужно указать количество столбцов и строк в grid-макете, который называется grid-шаблоном. Он создается путем объявления свойств grid-template-columns и grid-template-rows для gnd-контейнера
контейнер {
display: grid;
grid-temp]ate-columns: размеры-столбцов;
grid-template-rows: размеры-строк;
}
ПАМЯТКА
Если свойство grid-template-rows не указывать, то браузер автома тически подгонит высоту строк под размер самого высокого элемента в каждой строке.
^Пример Ссылка: wdpg.ю/2/13-2-1
В этом примере к grid-контейнеру применяется grid-шаблон....
.container {
display: grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: l&Cipx lS0px;
}
Grid -шаблон контейнера
<div class="container">
<div class="item itema">a</div>
<div class="item itemb">b</div>
<div class="item itemc">c</div>
<div class="item itemd">d</div>
<div class="item iteme">e</div>
<div class="item itemf">f</div>
</dlv>
Размеры-столбцов и размеры-строк — это разделенные пробелами списки значений применяемые ко всем столбцам и строкам в grid-макете. В качестве размеров могут выступать числа с любой стандартной единицей измерения CSS (рх, em, rem. vw или vh), проценты или ключевое слово auto, которое предписывает браузеру задать автоматический размер на основе других указанных вами значений.
241
Создание grid-макетов веб-страниц
ЧАВО
Как задать столбцу ширину, равную самому широкому элементу?
Вместо точного значения используйте ключевое слово max-content.
с^> Ссылка:
wdpg. io/2/13-2-2
В примере я изменил код класса .container и определил grid-макет из трех колонок (шириной 100 200 и 300 пикселов) и двух строк (высотой 100 и 150 пикселов)
Урок 13.3. Знакомство с единицей измерения f г
Тема: единица измерения fr
Ссылка: wdpq io/2/13-3-0
В качестве размеров для свойств grid-template-columns и grid-template-rows вы также можете использовать значения в новой единице измерения gnd-верстки — fr. которая представляет собой долю свободного пространства, доступного в grid-контейнере по горизонтали (для столбцов) или по вертикали (для строк). Например, если вы присвоите значение If г одному из столбцов, то по ширине (по горизонтали) он займет в grid-контейнере -се свободное пространство. См. следующий пример.
Аналогично, если присвоить значение if г одному столбцу и значение 3f г другому, то первый займет н grid-контейнере 25 % свободного пространства по горизонтали, а второй — оставшиеся 75 %.
► Пример tzj> Ссылка: wdpg.io/2/13-3-1
В этом примере используется значение в новой единице измерения f г, чтобы последний столбец занял в grid-контейнере все оставшееся свободное пространство по горизонтали.
LQ LU
.container {	___
display: grid;	>с	Ширина последнего
grid-template-columns: 100рх 200рх Ifг;	столбца будем
grid-template-rows: 100рх 150рх;	равна 1 fr
}
<div class="container">
<div class="item itema">a</div>
<div class="item itemb">b</div>
<div ciass="item itemc">c</div>
<div class="item itemd">d</div>
<div class="item iteme">e</div>
<div class="item itemf">f</div>
</div>
242
Основы grid-верстки CSS
Урок 13.4. Добавление промежутков в grid-макет
Тема: свойства column-gap и row-gap
Ссылка: wdpg.ю/2/13-4-0
По умолчанию в grid-макетах отсутствуют промежутки — горизонтальные между столбцами и вертикальные между строками. Чтобы их создать, примените к grid-контейнеру свойства column-gap и row-gap контейнер {
display: grid;
column-gap: промежуток-между-столбцами;
row-gap: промежуток-между-строками;
}
Значения промежуток -между - столбцами и промежуток-между -строками выражаются числами в любой стандартной единице измерения CSS (рх. em. rem, vw или vh) Получившиеся промежутки между столбцами и строками называются интервалами
ПАМЯТКА
Чтобы использовать значения в единицах f г в качестве размера строк, необходимо явно определить высоту для grid контейнера. Иначе ее размер будет равен высоте только его содержимого ичи сумме указанных значений grid-tempiate-rows.
К примеру, попробуйте в класс . container добавить объявление height: 100vh, азатем указать высоту строки, равную 1 ft.
Ссылка.
wdpg.io/2/13-3-2
► Пример Ссылка: wdpgio/2/13-4-1
В этом примере в код класса .container добавляются определения промежутков 15 пикселов между столбцами и 20 — между строками.
.container {
display; grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: l&0px 150px;
column-gap: 15px; -a Определяет промежуток между
row-gap; 20px;	Скиол5цами
1	* Определяет промежуток между строками
cdiv class="container“>
<div	class="item	itema">a</div>
<div	class="item	itemb">b</div>
<div	class="item	itemc">c</div>
<div	class="it₽m	itemd">d</div>
<div	class="item	iteme">e</div>
<div	class="item	itemf">f</div>
</div>
243
Создание grid-макетов веб-страниц
Вы также можете добавить промежутки между объектами grid-макета, используя сокращенную нотацию — свойство gap
контейнер {
display: grid;
gap: промежуток-между-столбцами промежуток-между-строками;
)
Урок 13.5. Исполъзоеание функции repeat () Тема: функция repeat()
Ссылка: wdpg ю/2/13-5-0
Если в gnd-макете используется несколько столбцот и/или строк одинаковою размера, то можно сэкономить время, определив их с помощью функции repeat()
гереаЦколичество, размер)
Укажите количество создаваемых столбцов или строк и их размер
Показанные ниже объявления эквивалентны:
grid-template-columns: 20Орх 2frdpx 200рх;
grid-template-columns: repeat(3, 200рх);
Пример ф Ссылка wdpg.io/2/13-5-1
В этом примере в код класса .container вносится функция repeat (), позволяющая создать три столбца и две строки идинакевиго размера.
ВЕБ-СТРАНИЦА
Создание мрех одинаковых столбцов
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(2, 150px);
}
Создание двух одинаковых строк
244
Основы grid-верстки CSS
<div class="conrainer">
<div class="item itema">a</div>
<div class="item itemb">b</div>
<div class="item itemc">c</div>
<div class="item itemd">d</div>
<div class="item iteme">e</div>
<div class="item itemf">f</div>
</div>
Урок 13.6. Размещение элементов в grid-макете
Тема: свойства grid-column-* и grid-row-*
сф Ссылка: wdpg. ю/2/13-6-0
Приведу три важных термина из сетчатого мира grid-верстки, котовые необходимо знать
•	grid-ячейка — прямоу| ольник, образующийся в результате пересечения grid-строки и grid-столбца
•	grid-линии — условные горизонтальные и вертикальные линии, формирующие сетку и окоужающие grid-элементы Эти линии нумеруются, начиная с 1. Например, левая верхняя grid- ячейка окружена четырьмя grid-линиями линиями grid-строк 1 и 2 и линиями grid-столбцов 1 и 2,
•	grid-область — часть сетки охватывающая одну или несколько ячеек
По умолчанию браузер автоматически заполняет сетку grid-макета, основываясь на ширине столбцов и высоте строк При таком автоматическом назначении каждому grid-элементу отводится одна ячейка. Если необходимо, чтобы grid-элементы занимали несколько ячеек по горизонтали или вертикали (или и то и другое), то нужно указать конкретные позиции grid-элементов в сетке
Для этого каждому gnd-элементу присваиваются следующие четыре значения
элемент {
grid-column-start: позиция-начала-столбца',
grid-column-end: позиция-конца-столбца;
grid-row-start: позиция-начала-строки;
grid-r ow-end: позиция-конца-строки;
}
В качестве значений указывается номер строки grid-макета. Обязательно нужно указать значения свойств grid-column-start и grid-row-start Свойство grid  column-end можно опустить или указать для него следующее значение
•	если опустить это свойство то элемент будет размещен только в начальном grid-столбце,
•	если указать ключевое слово end. то элемент начнется с начального grid-столбца и закончится последним gnd-столбцом
245
Создание grid-макетов веб-страниц
•	можно указать ключевое слово span с пробелом и количеством столбцов, которые элемент должен занимать л grid-макете Так, следующие два набора деклараций эквивалентны
grid-column-start: 2;
grid-column-end: 5;
grid-column-start: 2;
grid-column-end: span 3;
Свойство grid-row-end тоже необязательное. Его можно использовать следующим образом.
•	опустить, тогда элемент будет размещен только в начальной grid-строке,
•	указать ключевое слово end, чтобы элемент размещался с начальной grid-строки до последней grid-строки,
•	указать ключевое слово span с пробелом и количеством grid-строк которые элемент должен занимать в макете. Так, следующие два набора деклараций эквивалентны
grid-row-start: 1;
grid-row-end: 3;
grid-row-start: 1;
grid-row-end: span 2;
► Пример
Ссылка wdpg io/2/13-6-1
В этом примере в код классов элементов вносятся объявления grid - col umn - * и grid - row - *, чтобы разместить элементы в сетке из пяти столбцов и трех строк.
ВЕБ-СТРАНИЦА
.container {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(3, 150px);
}
246
Основы grid-верстки CSS
.it ema {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
}
.itemb {
grid-column-start: 3;
grid column-end: span 3;
grid-row-start: 1;
grid-row-end: 1;
}
.itemc {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2; grid-row-end: end;
}
.itemd {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: end;
}
.iteme {
grid-column-start: 4;
grid-column-end: span 2;
grid-row-start: 2;
grid-row-end: 2;
}
.itemf {
grid-column-start: 4;
grid-column-end: span 2;
grid-row-start: 3;
grid-row-end: 3;
}
Смолка 1 u 2, строка 1
Столицей 3. 4 и 5. строка 1
Столбец 1; строки 2 и 3
Столбце! 2 и 3, строки 2 и 3
Столбца 4 и 5; строка 2.
Столбца 4 и 5, строка 3
<div class="container">
<div class="item itema">a</div>
<div class="item itemb">b</div>
<div class="item itemc">c</div>
<div class="itenr itemd">d</div>
<div class="item iteme">e</div>
<div class="item itemf">f</div>
</div>
247
Создание grid-макетов веб-страниц
Разместить элементы в grid-макете можно с помощью кратких нотаций свойств
элемент {
grid-column: позиция-начала-столбца / позиция-конца-столбца; grid-row: позиция-начала-строки / позиция-конца-строки;
}
Урок 13.1 Присвоение имен grid-областям
Тема: свойства grid-template-areas
и grid-area
с£> Ссылка: wdpg.iO/2/13-7-i‘
При размещении grid-элементов вместо номеров строк/сюлбцов можно определить именованные grid-области макета — например, header и sidebar — и назначить grid-элементы соответствующим образом Для этого нужно дополнить grid -шаблон именованными областями, добавив свойство grid-template-areas
контейнер {
display: grid;
grid-template-columns: размеры-столбцов;
grid-template-rows: размеры-строк;
grid-template-areas:
'имена-в-grid-строке!'
'имена-в-дгЛд-строке2'
‘имена-в-grtd-cmpoKeN'
}
В данном синтаксисе имена-в-grid-cmpoKel, имена-в-дг1й-строке2 и т д — разделенные пробелами списки имен, применяемые к соответствующей строке grid-макета Обратите внимание на следующие моменты
•	вы указываете имя для каждой ячейки в gi id-макете.
•	если именованная область должна занимать несколько столбцов, то добавьте имя необходимое количество раз, чтобы задействовать горизонтальный диапазон нужного размера.
•	если именованная область должна занимать несколько строк то добавьте имя необходимое количество раз, чтобы задействовать вертикальный диапазон нужного размера:
•	чтобы сослаться на пустую ячейку или область, укажите одну/не-сколько точек (.) в каждой ячейке.
Настроив шаблон именованных grid-областей, присвойте его имя каждому grid-элементу с помощью свойства grid-area
элемент {
grid-area: uMH-grid-o6nacmu;
}
248
Основы grid-верстки CSS
^Пример С/ Ссылка; wdpg.io/2/13-7-1
В этом примере в классе с ontainer создается grid-шаблон из пяти четных столбца и четырех строк. К тому же я добавил пять именованных областей header, nav, main, sidebar и footer. Я присвоил эти имена четырем grid-элементам (класс itema присвоен header, класс itemb — паv, и т. д).
Header
\а\ Main
ВЕБ-СТРАНИЦА
bonier
.container {
height: 100vh;
display: grid;
grid-template-columns: repeat(5, ifr);
grid-template-rows: 75px 5Ppx lfr 5@px;
grid-template-areas:
'header header header header header'
'nav nav nav nav nav
'main main main main sidebar'
'footer footer footer footer footer';
}
.itema {
background-color: tomato;
grid-area: header;
Определяем именованные grid-области
Присваиваем области header
.itemb {
background-color: mediumorchid;
grid-area: nav; -4—^,
j	Присваиваем области nav
.itemc { background-color: royalblue; grid-area: main;
i	Присваиваем области mam
249
Создание grid-макетов веб-страниц
.itemd {
background-color: mediumseagreen;
grid area, sidebar,	Присваиваем области sidebar
.iteme {
background-color: orange;
grid area: -footer; -4—
j	Присваиваем области footer
<div class="cortainer">
<div class="item itema’>Header</div>
<div class="item itemb">Nav</div>
<div class="item itemc"?Main</div>
<div class="item itemd">Sidebar</div>
<div class="item iteme’>Footerc/div>
</div>
Предыдущий пример — это все тот же макет «Святой Грааль» из главы 11. С помощью нескольких объявлении для контейнера и одного объявления grid-area для каждого элемента grid-макета мы смогли скомпоновать классический макет, содержащий минимальное количество кода
Урок 13.8. Выравнивание grid-элементов
Тема: свойства justify * и align-*
Ссылка: wdpg.io/2/13-8-0
Grid-разметка двумерна, поэтому выравнивание предполагает учет позиций по двум ОСЯМ'
•	строчная ось, или ось строки, располагается в том же направлении, что и письмо (то есть направление, в котором пишутся слова) В таких языках, как английский и арабский, направление режима письма горизонтальное. поэтому ось строки тоже горизонтальная Направления этой оси и содержимого г grid-строке идентичны, поэтому строчная ось и называется осью строки'
•	блочная ось, или ось столбца, располагается перпендикулярно оси строки. В таких языках, как английский и арабский где ось строки
250
Основы grid-верстки CSS
горизонтальна, ось блока — вертикальна Направления этой оси и содержимого в grid-столбце идентичны, поэтому блочная ось и называется осью столбца
Grid-элементы можно выравнивать по осям строки и/или столбца как во всем grid-контейнере, так и лишь в столбие/строке, содержащих элемент Сначала рассмотрим случай выравнивания элементов по оси строки и/или столбца во всем grid-контейнере о чем речь пойдет в следующих двух подразделах.
ПАМЯТКА
Значение stretch используется по умолчанию, поэтому объявление justify-content: stretch указывать не обязательно.
Выравнивание grid-элементов
по оси строки
Вы можете выровнять grid-элементы по оси строк, применив свойство justify-content к gnd-контейнеру
контейнер {
display: grid;
justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
}
•	start — выравнивает элементы по началу строки.
•	end — выравнивает элементы по концу строки
•	center — выравнивает элементы по центру строки
•	stretch — растягивает элементы по оси строки (по умолчанию).
•	space-between — выравнивает элементы каждой строки так, что первый элемент находится г. начале строки, последний — в конце, а остальные элементы равномерно распределены между ними
•	space-around — элементы равномерно распределены вдоль оси строки расстояния между каждой парой соседних элементов равны Промежутки перед первым элементом и после последнего элемента равны половине оасстояния между парами соседних элементов.
•	space-evenly — элементы равномерно распределены вдоль оси строки Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.
ПРАКТИКУМ
В интерактивном режиме все значения свойства justify-content можно опробовать в песочнице.
гф Ссылка: wdpg. ю/2/13-8-1
На рис. 13 2 показаны различные варианты расположения элементов  контейнере (ось строки расположена горизонтально) (Я добавил контур вокруг каждого контейнера, чтобы показать его । раницы.)
251
Создание grid-макетов веб-страниц
start
end
center
stretch
space-between
space-around
space-evenly
ПАМЯТКА
Значение stretch используется no умолчанию, поэтому объявление align-content: stretch указывать не обязательно.
ПРАКТИКУМ
В интерактивном режиме все значения свойства align-content можно опробо ватъ в песочнице.
c_J> Ссылка: wdpg.io/2/13-8-2
Выравнивание grid-элементов по оси столбца
Оы можете выровнять grid-элементы по оси столбца, применив к grid-контейнеру свойство align-content.
контейнер {
display: grid;
align-content: start | end | center | stretch | space-between I space-around | space-evenly;
)
•	start — выравнивает элементы по началу столбца
•	end — выравнивает элементы по концу столбца
•	center — выравнивает элементы по центру столбца.
•	stretch — растягивает элементы по оси столбца (по умолчанию)
•	space-between — выравнивает элементы каждого столбца так, что первый элемент находится в начале столбца, последний — в конце, а остальные элементы равномерно распределены между ними.
•	space-around — элементы равномерно распределены вдоль оси столбца, расстояния между каждой парой соседних элементов равны Промежутки перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов
•	space-evenly — элементы равномерно распределены вдоль оси столбца Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера
252
Основы grid-верстки CSS
На рис. 13.3 показаны различные варианты расположения элементов в контейнере (ось столбцов расположена вертикально). (Я добавил контур вокруг каждого контейнера, чтобы показать его границы)
Теперь рассмотрим способ выравнивания элементор в отдельных столбцах/строках (в отличие от всего grid-контейнера), о чем пойдет речь в следующих двух подразделах.
Выравнивание grid-элементов в определенном столбце
Вы можете выровнять grid-элементы по оси строки в указанном столбце, применив к grid-контейнеру свойство justify-items контейнер {
display: grid;
justify-items: start | end | center | stretch;
}
•	start - выравнивает элементы по началу столбца
•	end — выравнивает элементы по концу столбца.
•	center — выравнивает элементы по центру столбца
•	stretch — растягивает элементы по оси столбца (по умолчанию).
На рис 13 4 показаны различные варианты расположения элементов в столбце (ось строки расположена горизонтально). (Я добавил контур вокруг каждого контейнера, чтобы показать его границы.) В grid- контейнере три столбца одинаковой ширины (и две строки одинаковой высоты).
ПАМЯТКА
Значение stretch ио пользуется по умолчанию поэтому объяв ление justify-items: stretch указывать не обязательно.
ПРАКТИКУМ
В интерактивном режиме все значения свойства justify-items можно опробовать в песочнице.
Ссылка.
wdpg. ю/2/13-8-3
ПРОФИ
Если необходимо переопределить действие свойства justify-items на конкретный элемент, примените к нему свойство j u st if у -self. Оно принимает те же значения, что иjustify-items.
253
Создание grid-макетов веб-страниц
► Рис. 13.4.
Варианты использования свойства justity-items
ПАМЯТКА
Значение stretch используется по умолчанию, поэтому объявление align-items: stretch указывать не обязательно.
ПРАКТИКУМ
В интерактивном режиме все значения свойства align-items можно опробовать в песочнице.
Ссылка: wdpg. ю/2/13-8-4
ПРОФИ
Если необходимо переопределить действие свойства align-items на конкретный элемент, примените к нему свойство align-self. Оно принимает те же значения, что и align-items
Выравнивание grid-элементов в определенной строке
Вы можете выровнять grid-элементы по оси столбца в указанной строке, применив к grid-контейнеру свойство align-items контейнер {
display: gf'id;
align-items: start | end | center I stretch;
}
•	start — выравнивает элементы по началу строки.
•	end — выравнивает элементы по концу строки
•	center — выравнивает элементы по центру строки
•	stretch — растягивает элементы по оси строки (по умолчанию)
На рис 13 5 показаны различные варианты расположения элементов в строке (ось столбцов расположена вертикально). (Я добавил контур вокруг каждого контейнера, чтобы показать его границы.) В grid-контейнере две строки одинаковой высоты (и три столбца одинаковой ширины).
► Рис, 13.5.
варианты использования
свойства aLgr-items
254
Резюме
РЕЗЮМЕ
•	Для преобразования блочного элемента в grid-контейнер предназначено свойство display: grid
•	Определить количество и размер столбцов и строк можно с помощью свойств grid-template-columns и grid-template-rows соответственно
•	Единица измерения дпР-элементов fr применяется для обозначения доли свободного пространства i grid-контейнере пс горизонтали (для столбцов) и по вертикали (для строк).
•	Для настройки промежутка между столбцами и строками используются с войства column-gap и row-gap соответственно
•	Вместо того чтобы указывать длинный список од инаковых столбцов или строк, можно использовать функцию repeat ().
•	Определять grid столбцы и grid строки элемента можно с помощью свойств grid-column-start и grid-column-end, а также grid-row-start и grid-row-end соответственно.
•	Для создания именованных gtid-областей макета используется свойство grid-template-areas, а для назначения элемента именованной области — свойство grid-area
•	Выравнивание grid-элементов по оси строки и по оси столбца выполняется с помощью свойств grid-контейнера justify-content и align-content соответственно
•	Для выравнивания grid-элементон по оси строки в определенном столбце и по оси столбца в определенной строке используются свойства grid-контейнера justify-items и align-items соот-
ветственно
Глава 14
Приемы отзывчивого веб-дизайна
14
В этой главе
	Создание «жидких» и гибких веб-макетов.
	Подготовка адаптивных макетов с помощью медиавыражений.
	Верстка под мобильные устройства.
	Создание «жидких» изображений, реагирующих на размер экрана.
	Использование отзывчивых размеров шрифтов и значений, реагирующих на размер экрана.
Начну с определения отзывчивости (адаптивности) веб-страницы Согласно этой характеристике, макет страницы автоматически адаптируется шрифты, изображения и прочее содержимое подгоняются под размер экрана устройства посетителя, чтобы обеспечить удобство доступа к странице Другими словами, содержимое страницы становится удобным для просмотра, чтения и навигации независимо от размеров экрана устройства, на котором она отображается
256
Приемы отзывчивого веб-дизайна
Отзывчивый веб дизайн, как его называют в сообществе вебдизайнеров, не имел бы столь большого значения, если бы просторы Интернета бороздили лишь некоторые пользователи, делая это со смартфона или планшета. Еще в 2014 году доля пользователей мобильных устройстг з мире превысила долю посетителей, заходивших в Сеть с настольных компьютеров и ноутбуков
Г? Самое важное в отзывчивом дизайне — это гибкость. Гибким должно быть все: макеты, размеры изображений, текстовые блоки — абсолютно все. Гибкость придает вашему сайту текучесть, необходимую для того, чтобы поместиться в любой контейнер.
Ник Бабич
Существует много причин, по которым рекомендуется сделать все свои страницы отзывчивыми, и вы узнаете о многих из них по мере чтения этой гланы. Но, пожалуй, самая важная и основная причина заключается в следующем при чтении веб-страницы посетитель не должен прокручивать ее горизонтально
Содержимое некоторых страниц может прокручиваться слева направо, однако подавляющее большинство сайтов имеют вертикальную ориентацию, поэтому люди читают или просматривают их сверху вниз. Если при просмотре сайтов страница не помещается по ширине экрана и для просмотра содержимого нужно прокрутить ее вправо, потом обратно влево затем снова вправо и так до бесконечности — это очень сильно раздражает и уже через несколько секунд понуждает людей, перейти на другой сайт — любой.
Урок 14.1. Почему не стоит использовать макеты фиксированной ширины Тема: веб-макеты, имеющие фиксированную ширину сф Ссылка: wdpg ю/2/14-1-1
Почему некоторые веб-страницы не помещаются на экране устройства просмотра7 В большинстве случаев потому, что используются большие элементы, имеющие фиксированную ширину Они остаются одного и того же размера независимо от ширины экрана устройства, на котором отображаются, и если ширина страниц превышает размер экрана, то появляется горизонтальная полоса прокрутки раздражающая посетителей сайта Чтобы понять что я имею в виду, рассмотрим следующий пример
257
Приемы отзывчивого веб-дизайна
^Пример 1=> Ссылка: wdpg.io/2/14-l-l
В этом примере показан типичный маке1 фиксированной ширины.
.container {
display: grid;
grid-template-columns: repeat(3, grid-template- areas:
"header header header" "article article sidebar" "footer footer footer";
}
header {
grid-area: header;
padding: 16px;
}
article {
grid-area: article;
padding: 16px;
}
aside {
grid-area: sidebar;
padding: 12px;
}
footer {
grid-area: footer;
padding: 16px;
}
320px);
Класс container — 3iw> дс:<1-конг\лейне.р с тремя столбцами фиксированной ширины 520 пикселов
<div class="container">
<header>
<hl>Responsive web Design</hl>
</header>
<article>
<h2>A Brief History<./h2x
<p>Early in the new millennium, etc.c/p> </article> <aside>
<h3>Linkss/h3> и т. n. c/aside? <fo )ter>
<p>&copy; Logophilia Limited</p> </footer>
<?div>
В этом примере я привел простой трехколоночный grid-макет, в котором grid-контейнер содержит три столбца со строго определенной шириной 320 пикселов. Обратите внимание, что во всех объявлениях свойства padding указаны фиксированные значения в пикселах Если ширина области просмотра браузера превышает 960 пикселов, то данная веб-страница отображается прекоасно (рис. 14.1). А если страница
258
Приемы отзывчивого веб-дизайна
будет открыта на экране меньшего размера7 На рис. 14.2 видно, что экран планшета в портретной ориентации недостаточно широк, поэтому часть содержимого обрезается и появляется горизонтальная полоса прокрутки Еще хуже страница выглядит на экране смартфона (рис 14.3), где видно еще меньше содержимого, то есть посетитель будет еще дольше перетаскивать ползунок горизонтальной полосы прокрутки
► Рис. 14.1. Веб-страница на экране компьютерного монитора
Responsive Web В
A Brief History
Eerh Л1 lhe new тШешиит, h was Ьесшш be surfing lhe web on devices other than de was МЙ yean sway, bat faka were «wring (personal distal nwunti), ebw* т*ж!*п Obnouity, any website was going to look vr few inches wxk vcthmi qqc (hat was a fr* f whether it was possible to make a web pegs device sowm.
By 2006. the World Wide Web CtrtAwltem that pernntagM instead of E*ed mdek pnaeated nfaflwnfJ-a meehamam rfu specific devics duractemaks. such м view The oast year. web designer Ethan Marcott his (влмкв article hi A Litt Арал гащидм bom  Staple of modem web design ever mi
Полюса прокрутки
► Рис. 14.2. Веб-страница слишком широка для экрана планшета
► Рис. 14,3. Веб-страница слишком широка для экрана смартфона
259
Приемы отзывчивого веб-дизайна
Разработка веб-страниц строго опре-' х деленного размера — исключительно неправильный подход. Он не только приводит к фиксации размеров вебстраницы независимо от размера экрана устройства пользователя, но и сводит на нет все преимущества гибкости окружения.
Джим Калбах
ПАМЯТКА
Размер панелей в интерфейсе Web Design Playground можно изменять. Но для того, чтобы вы могли полноценно поэкспериментировать с от зывчивостью, рекомендую ска чать примеры и поработать с ними вне песочницы. Все файлы примеров до ступны в GitHub-репозитории книги: https:// github.com/ paulmcfe/wdpg2-example-files
СОЗДАНИЕ
ОТЗЫВЧИВОГО МАКЕТА
Теперь, когда вы узнали о недостатках макетов фиксированной ширины, мы можем приступить к подгонке макетов под экраны любого размера Существует несколько способов достичь идеальной отзывчивости, о которых мы поговорим далее. Но прежде необходимо соблюсти некоторые предварительные условия
Во-первых, нужно убедиться, что размер всех блочных элементов вычисляется с учетом границ, а не только содержимого. — это стандартный подход Как я объяснял в г лаве 9, самый простой способ настроить блочные элементы таким образом — добавить следующее правило в начале CSS-файла
* {
box-sizing border-box;
}
Во-вторых, нужно настроить стандартные ширину и масштаб области просмотра браузера, добавив следующий код в раздел заголовка (head) страницы:
<meta name="viewport“ content="width=device-width, initial-scale=1.0">
Согласно директиве width=device-width ширина страницы должна соответствовать ширине экрана устройства, на котором она отображается. Директива initial - scale=l. 0 позволяет изначально отображать страницу, не меняя масштаб Добавив эти настройки, можно приступать к настройке отзывчивости
260
Создание отзывчивого макета
Урок 14.2. Создание «жидкого» макета
Тема: использование единиц измерения fr или процентов для создания «жидкого»» макета czj> Ссылка: wdpg.io/2/14-2-0
Я уже говорил, что проблема макетов фиксированной ширины кроется в присвоении абсолютных значений, например 320рх, свойству grid-template-columns столбцов Вы можете решить эту проблему, указав размер по ширине не в абсолютных пиксельных значениях, а в относительных, например в процентах или единицах fr Такое решение часто называют «жидким», или текучим, макетом
Ниже приведен пример «жидкого» макета, размеры grid-столбцов которого указаны в единицах fr
ПАМЯТКА
Макет, размеры которого указаны в относительных единицах измерения, таких как проценты или fr, называется ‘Жидким» (текучим).
^Пример [=> Ссылка: wdpg.io/2/14-2-1
В этом примере мы превратим макет фиксированной ширины в «жидкий».
body {
max-width: 9Ь0рх; }
Элемент body теперь максимально широк
.container {
display: grid;
grid-template-columns: repeat(3, grid-template-areas:
"header header header" "article article sidebar" "footer footer footer";
}
Размерь/ grid-столбцов теперь указаны в единицах измерения fr
<div class="container">
<heaaer>
<hl>Responsive Web Design</hl>
</header>
<article>
<h2>A Brief History</h2>
<p>Farly in the new millennium, etc.</p>
</article>
<aside>
<h3>Links</h3> и T. П.
</aside>
<footer>
<p>8copy; Logophilia Limited</p>
</footer>
</div>
261
Приемы отзывчивого веб-дизайна
ПРАКТИКУМ
В песочнице вы можете попрактиковаться в преобразовании макета фиксированной ширины в <жидкиш>.
сЧ Ссылка wdpg io/2/14-2-2
На рис. 14.4 показано, что содержимое веб-страницы с «жидкой» компоновкой теперь полностью '-мешается на экране планшета в портретной ориентации. Прекрасно1 По рис. 14 5 видно, что на экране смартфона содержимое страницы тоже помещается горизонтальной прокрутки нет. Ура!
Responsive Web Design
A Brief History Ktdy in the new mflUrwdam, и wf becoming apparent that people were icon (ошв to b« radios the web on device* ether than desktop tad laptop ootapvton. Th* emartphono wa» мШ уеде away, krai folk» were rtartfag to ta& abend accessing the web uautgPDAa(pemeal digit*! asrirrnn-}. ebook render*, video game coasohn, and even TVs. Obviously* ацу webrntr w u going to look very different when accessed from a devise a few ndw w»de Уесма urw
► Рис. 14,4. Благодаря текучести макета веб-страница идеально вписывается в экран планшета
► Рис. 14.5. «Жидкий» макет также подходит для экрана смартфона, но столбцы узкие
Но возникла другая проблема На рис 14.5 видно, что столбцы с содержимым теперь очень узкие, поэтому читать текст неудобно Чтобы решить эту проблему следует освоить еще одну технику отзывчивого дизайна. Но прежде рассмотрим единицы измерения относительно области просмотра
Управление размерами «жидких» макетов
Важно учитывать, что при указании ширины элемента е процентах его размер вычисляется относительно ширины родительского элемента К примеру, если ширина родительского элемента — 800 пикселов, а дочернему элементу назначено правило width: 75%, то ширина дочернего составит 600 пикселов Вне зависимости от ширины окна браузера, пусть она даже равна 2000 пикселам, максимальная ширина дочернего элемента составит 600 пикселов
262
Создание отзывчивого макета
А если необходимо, чтобы дочерний элемент занимал 75 % экрана, а не родительского элемента? В этом случае нужно вместо процентов использовать единицы, вычисляемые относительно области просмотра, то есть окна браузера. Можно использовать следующие четыре единицы
*	vw — единица ширины области просмотра, то есть I00vw равно 100 % текущей ширины области просмотра Если она составляет 1600 пикселов то 1 vw равен 16 пикселам,
•	vh — единица высоты области просмотра, то есть 100vh равно 10') % текущей высоты области просмотра Если она составляет 2000 пикселов то ivh равен 20 пикселам
•	vmin — минимальная единица области просмотра, то есть 100vmin равно 100 % меньшего из двух размеров области просмотра Если область просмотра имеет ширину 800 и высоту 600 пикселов то lvmin эквивалентен 6 пикселам (поскольку в данном случае высота области просмотра меньше ширины);
•	vmax — максимальная единица области просмотра, то есть 10nvmax равно 100 % большего из двух размеров области просмотра Если ширина области просмотра 1200 пикселов, а высота — 1024 пиксела, то lvmax эквивалентен 12 пикселам (поскольку ширина области просмотра больше высоты)
Предположим необходимо отобразить рисунок так, чтобы он автоматически занимал всю высоту области просмотра Этого можно добиться, применив к нему следующее правило .image-full {
height: 100vh;
width- auto;
Я добавил объявление width: auto чтобы браузер автоматически вычислял ширину изображения относительно его высоты, сохраняя исходное соотношение сторон
ПРАКТИКУМ
Данный метод отображения ил люстраций во всю высоту области просмотра можно опробовать в пе сочнице.
Ссылка wdpq.io/2/14-2-4
Урок 14.3. Верстка адаптивного макета
Тема: использование выражений (gimedia i_J} Ссылка: wdpg . >/2/14-3-0
«Жидкий» макет работает отлично пока ширина экрана устройства про-смот ра не становится слишком маленькой. В последнем случае столбцы становятся излишне узкими и их неудобно читать (особенно боковую панель) Взгляните на рис 14.5 (см выше). Видите, как название страницы (Responsive Web Design) едва вписывается в ширину области просмотра смартфона? Если бы этот элемент был хотя бы на несколько пикселов больше или на пару букв длиннее, то текст перенесся бы и выглядел крайне неприятно (рис 14 6)
ПАМЯТКА
Макеты с медиавыражениями для настройки элементов и свойств страницы в за висимости от характеристик экрана (например, ширины) называются адаптивными.
263
Приемы отзывчивого веб-дизайна
Responsive Web
ПАМЯТКА
Согласно синта ксису после слова @media нужно указывать тип носителя, например print или tv. Но по умолчанию используется screen, то есть устройства с экранами, а значения по умолчанию указывать не обязательно, поэтому тип носителя можно опустить.
► Рис. 14.6. Слегка увеличьте название странииы — и дизайн нарушится
A Brief History
Early in the new millennium, it was
ИНФОРМАЦИЯ
В подавляющем большинстве директив (fflmedia, которые вам предстоит писать, указывается выражение mi п -width или maxwidth. Но можно оценивать и другие характеристики, например высоту, разрешение и соотношение сторон. Полный список опубликован на странице сайта Mozilla Developer Network по адресу htlps://developer. mozilla.org/ru/ docs/Web/CSS/@ media#media_. features.
В чем сходство этих двух сценариев7 Основную проблему можно решить, выяснив ширину области просмотра браузера.
•	если она меньше 450 пикселов, то элементы grid-макета должны выводиться в стандартной компоновке;
•	если она меньше 350 пикселов, то следует уменьшить размер шрифта в названии страницы до 24 пикселов
Эти и многие другие задачи можно решить, воспользовавшись медиавыражениями CSS Медиавыражение — это блок кода, состоящий из правил стилей. Выражение учитывает определенные характеристики области просмотра, например ее ширину. Если выражение истинно для текущего устройства (области просмотра), то браузер применяет правила в соответствующем блоке кода, если нет — игнорирует их. Макеты с медиавыражениями часто называют адаптивными, поскольку они подстраиваются под область просмотра, в которой отображаются.
Приведу общий синтаксис.
@media (выражение') {
селектор {
декларации
}
И т. д.
}
Чаще всего выражение представляет собой свойство min-width или max-width, за которым следует двоеточие и значение
Если необходимо стилизовать страницу на устройстве с экраном ширина которого не превышает определенный размер, используйте выражение max-width Код ниже предписывает браузеру отображать элемент hl шрифтом размером 24 пиксела, если ширина экрана не превышает 350 пикселов:
(almedia (max-width: 350рх) {
hl {
font-size: 24рх;
}
J
Если же необходимо стилизовать страницу на устройстве с экраном, ширина которого превышает определенный размер, то используйте выражение min-width. Код ниже применяет к элементу aside правило
264
Создание отзывчивого макета
display: inline-block только в том случае, если ширина экрана равна или превышает 1024 пиксела
(Qmedia (min-width: 1024рх) {
aside {
display: inline-block;
}
}
В следующем примере приведен обновленный код, содержащий медиавыражение, которое меняет grid-макет на стандартный поток (а также уменьшает размер шрифта названия страницы), если ширина экрана устройства отображения не превышает 450 пикселов.
ПРАКТИКУМ
Напишите для трехколоночнего flex-макета медиа-выражение, согласно которому на небольших экранах устройств первым отображается средний столбец.
Ссылка;
wdpg.io/2/14-З-З
► Пример
с^> Ссылка: wdpg.io/2/14-3-1
В этом примере мы рассмотрим медиавыражение, коте рое меняет grid-макет на стандартную компановку, а также уменьшает размер шрифта названия страницы.
.container {
display: grid;
grid-template-columns: repeat(3, lfr);
grid-template-areas:
"header header header"
"article article sidebar" "footer footer footer";
}
{	МеЗиавырджение применимо, если размер
font-size: 32px;	/ области просмотра равен 450 пикселам
}	* «ди меньше этого значения
(Smedia (max-width: 450рх) {
.container {
grid-template-columns: lfr; grid-template-areas: "header" "article" "sidebar" "footer”;
}
hl {	'
font-size: 24px;
}
}
Сег\Л-макет меняется нд одноколоночный макет с элементами, скомпонованными друг над другом
Шрифт названия страницы ул\еньшается до 24 пикселов
На рис 14 7 показано, как макет страницы выглядит на экране шириной более 450 пикселов На рис. 14 8 и 14,9 можно видеть, как тот же макет выглядит на экране шириной 450 пикселов и меньше.
265
Приемы отзывчивого веб-дизайна
ПРАКТИКУМ
На основе версии макета, в которой элемент aside по умолчанию скрыт, напишите медиавыражение, отображающее этот элемент, когда ширина области просмотра превышает 1024 пиксела.
Ссылка.
wdpg.io/2/14-3-2
► Рис. 14.7. Вид страницы на устоойстве с экраном, ширина которого превышает 4ь:1 пикселов
"ЬфшГ that им percentages instead of fixed widths expressed m pixel» In eaHy 3^09. the W3C presented media oiar^r—a mechanism that етаЫее  <ksi«nar to write coda that lancets specific derice еЫгееЪкги&а. sudi м viewport width-as a Candidate Recommendation. The next year, web designer Ethan Marcone coined the tern гедгепяи* web dcaen in hs famous artide шЛ Liti Apart magmnr The concept look off from there and has been a staple of modern web design ever sines.
© Logophffia Limited
► Рис. 14.8. Вид верхней части страницы на устройстве с экраном шириной менее 450 пикселов.
► Рис. 14.9. Как видно в нижней части страницы, все элементы grid- макета скомпонованы друг над другом
266
Создание отзывчивого макета
Контрольные точки медиавыражений
Может возникнуть соблазн настроить медиавьюажения на определенную ширину экрана устройства, например 320 пикселов для старых моделей iPhone, 400 — для смартфонов Samsung, 768 - для некоторых моделей iPad и т д Увы, это путь в никуда Устройств с разной шириной экрана слишком много, и подстроиться под все не получится И даже если вы сможете это сделать, ваш код очень быстро устареет, так как непрерывно выпускаются новые устройства с экранами различных размеров. R общем, откажитесь от этой затеи
Гораздо удобнее позволить контенту диктовать значения с войств min-width и max-width, которые указываются в медиавыражениях. Скажем, на экране монитора удобнее всего читать текст, разбитый на строки примерно по 75 символов. Если такая длина строки получается при ширине контейнера 600 пикселов, то имеет смысл присвоить свойству max-width элемента значение 600рх Предположим также что текст вполне комфортно читать при длине строк до 50 символов, достигаемых при ширине контейнера 400 пикселов
Поэкспериментируйте с различными значениями ширины экрана, определяя, когда ширина контейнера преодолеваетданноео(раниче-ние, составляющее 400 пикселов Результат зависит от макета страницы, но допустим, что он достигается, когда ширина экрана уменьшается до 550 пикселов, так как на данном этапе становится слишком узкой боковая панель Текст на странице при меньшей ширине неудобно читать, поэтому определяем контрольное ограничение 550 пикселов, которое и оказывается контрольной точкой в медиавыражении @media (max-width; 550рх) {
.container { float: none; width: 100%;
}
}
Если коротко, то вы изменяете ширину окна браузера и следите за тем, при какой ширине дизайн уже неудобен: текстовые строки становятся слишком короткими или длинными, размер шрифта — слишком большим, блочный элемент нелепо смещается и т. д Вычисленную ширину можно использовать в качестве значения контрольной точки для медианыражения.
Урок 14.4. Создание макета, ориентированного на мобильные устройства Тема: директивы (ajmedia для немобилъных устройств
Ссылка: wdpg io/2/14-4-0
В уроке 14 3 я рассказывал, как использовать медиавыражения для ориентации на экраны мобильных устройств и настройки элементов
267
Приемы отзывчивого веб-дизайна
ПАМЯТКА
Макет, код ко торого в базовой структуре рассчитан на мобильные устройства и усложняется на более широких экранах, называется макетом, ориентированным на мобильные устройства (или mobile-first).
ПАМЯТКА
Не обязательно начинать с ширины 320 пикселов. Если у вас есть доступ к анали  тическим инстру ментам сайта, то вы можете посмотреть, с каких устройств посетители заходят на ваш сайт. Если все или большинство из них используют устройства с экраном шириной более 400 пикселов, то начать следует именно с этого значения.
grid-макета. Отличное решение, но гуру веб-дизайна утверждают, что CSS-код должен быть аддитивным, а не субтрактивным То есть свойства должны добавляться/изменяться, но не удаляться. Почему7 В каком-то смысле работа с каскадными таблицами стилей похожа на процесс готовки соль и приправы гораздо проще добавить, чем удалит ь На вебкухне лучше начинать с минимального рабочего набора свойств а затем расширять его.
Практически всегда создание веб-страниц стоит начинать с макета, предназначенного для работы на самых маленьких устройствах просмотра, под которыми сейчас подразумеваются смартфоны Суть в том. чтобы созданная страница хороша выглядела и функционировала на небольшом экране смартфона (обычно 320 пикселов в ширину). Уже после этого вы добавляете правила и настраиваете макет под экраны большего размера. Это так называемая ориентация на мобильные устройства, или подход mobile-first, который лежит в основе современною отзывчивого веб-дизайна
Один из принципов такого подхода — добавлять в первоначальный, ориентированный на мобильные устройства макет только необходимые элементы страницы Многие мобильные устройства ограничены медленным соединением с Интернетом и объемом скачиваемых данных, поэтому задача добросовестною веб-дизайнера — убедиться, что такие пользователи видят на ^еб-страницах только значимый контент Какое содержимое считать несущественным, зачастую сложно определить, поскольку то, что незначительно для одного пользователя, может быть крайне важным для другою Здесь следует проявить рассудительность, но именно за это веб-дизайнерам и платят деньги.
Мобильные устройства требуют от команд разработчиков ПО сосредоточиться только на самых важных данных и действиях в приложении. На экране размером 320 на 480 пикселов просто нет места для лишних, ненужных элементов. Приходится расставлять приоритеты.
Люк Вроблевски
В качестве иллюстрации вышесказанного предположим что измененная страница из нашего примера должна содержать второй элемент aside, расположенный слева и содержащий цитату об отзывчивом веб-дизайне Приятный штрих, но не критически важный, в частности, потому, что в стандартном потоке этот элемент будет отображаться перед элементом article. Как показано ниже в код добавлен элемент aside с объявлением display: none чтобы скрыть его по умолчанию Кроме того, добавлено медиавыражение для отображения элемента на экранах, ширина которых превышает 750 пикселов
268
Создание отзывчивого макета
► Пример
Ссылка: wdpg.io/2/14-4-1
В этом примере мы рассмотрим медиавыражение, которое меняет grid-макет
на стандартную компоновку, а также уменьшает размер шрифта названия страницы.
.container {
display: grid;
grid-template-columns: Ifr; grid-template-areas:
"header" "article" "sidebar" "footer";
.quotation {	'acc
display: none;	УМ(
По умолчанию содержимое макета. ориентированного на мобильные устройства, отображается в виде одного столбца с элементами, расположенными друг над другом
п
скрыт
}
(dmedia (min-widtn: 750рх) {
.container {
grid-template-columns: repeat(4, Ifr); grid-template-areas:
"header header header header"
"quotation article article sidebar" "footer footer footer footer";
}
.quotation {
display: block; -<- grid-area: quotation;
fin'd -макет для больших экранов состоит
из четырех столбцов
На экранах шириной, равной 750 пикселов и более, цитата отображается
«header?
<hl>Respcnsive ideb Design«/hl?
«/header?
<main>
<aside class="quotation">
<h3?Quote«/h3?	_—x Добавленный элемент
• • •	с цитатой
«/aside?
canticle?
<h2?A Brief History«/h2?
<p?Eanly in the new millennium, etc.«/p?
«/article?
«aside?
<h3?Links«/h3?
«/aside?
«/main?
«footer?
<p?&copy; Logophilia Limited«/p?
«/footer?
269
Приемы отзывчивого веб-дизайна
На рис. 14 10 показано, что на смартфоне на странице не видна боковая панель с цитатой. Она появляется на более широком экране например на планшете, показанном на рис 14 11.
Responsive Web Design


A Brief History
Larb in йм mw KuUsnmwn, it wm becocamg apparent that p*apl* w«rs мок gams to be surfing the web on devices other then desktop and laptop computet* The smartphone was still year* away, tert iolki were starting io isfik about accemtng the web using ?DAs (personal digital ueiMants), ebook readers, video game consoles. and even TV* Obvwualy.up wsbaks was going to look *wjy difhrent when accessed from a device a few mtbm wide versus ом that wk s few fret wide. Some smart folks started wondering whether it wee роамЫе to make a web page flexible enough to adapt to this wide range of device screens
By aoofl, the World Wide Web Conaomum (W3O was lefldag about hOffld* ikruixu that use percentages instead of fixed widths emtesaed in
► Рис. 14.10. На узком экране смартфона боковая панель с цитатой не отображается
► Рис. 14.11. На более широком экране, например на планшете, боковая панель с цитатой отображается
ПАМЯ ГКА
Макет, в кото ром сочетаются значения в относительных единицах измерения. гибкая grid-верстка, медиавыражения. а также ориентация на мобильные устройства, называется отзывчивым.
Признаки отзывчивости макета
Все описанные приемы относятся к концепции отзывчивого макета значения в относительных единицах измерения, гибкая grid-верстка, медиавыражения, а также ориентация на мобильные устройства Внедряя эти характеристики в свои страницы, вы сможете создать полностью отзывчивый веб-дизайн.
Но это еще не все. Вам нужно еще научиться адаптировать изображения и текст, и именно этим темам посвящена оставшаяся часть данной главы
ПОДГОТОВКА ОТЗЫВЧИВЫХ ИЗОБРАЖЕНИЙ
Отзывчивость изображений — одна из наиболее значимых задач, стоящих перед веб-дизайнерами Масштаб ее обусловлен двумя проблемами
270
Подготовка отзывчивых изображений
•	Изображение определенного размера должно поместиться в контейнер с меняющимися размерами Изображение шириной 6G0 пикселов прекрасно впишется в элемент шириной 800 пикселов, но в элементе шириной 400 пикселов часть изображения будет отсечена. Чтобы решить эту проблему, необходимо адаптировать изображения их размер должен меняться в зависимости от размера экрана
•	Использование файла изображения, размер которого соответствует экрану устройства пользователя Допустим, разрешение изображения составляет 2000 х 1500 пикселов Одно дело если оно загружается на экранах компьютеров, и совершенно другое, если на смартфонах это пустая трата времени на загрузку трафика
В следующих двух уроках вы узнаете об основных методах решения этих проблем
Урок 14.5. Создание отзывчивых изображений Тема: форматирование элемента img для обеспечения адаптивности гф Ссылка: wdpg.io/2/14-5-0
Изображение имеет статичные ширину и высоту, поэтому на первый взгляд кажется, что изменить их динамически невозможно. К счастью, элемент img позволяет решить эту проблему По умолчанию изображение разворачивается во всю ширину и высоту, как div или любой иной блочный элемент, и его масштаб можно динамически менять, указав размеры в процентах
Пои этом нужно учесть следующие моменты
•	Не стоит масштабировать изображение больше его исходного размера, поскольку возникнут артефакты в виде некрасивой пикселизации и рваных краев
•	Если изменить только высоту или только ширину изображения, то оно почти наверняка исказится, поскольку нарушится исходное соотношение сторон — ширины к высоте Чтобы избежатьэтой проблемы, необходимо пропорционально менять оба параметра. К счастью, браузер умеет сохранять соотношения сторон с помощью специальных директив
Чтобы решить обе проблемы и создать отзывчивое изображение подстраивающееся под размер экрана, примените следующее правило: img {
max-width: 100%;
height: auto;
}
Правило max-width: ir>0% не только допускает изменение масштаба изображения при изменении размера его родительского контейнера, но и ограничивает его динамическую ширину исходным размером Согласно правилу height: auto браузер сохраняет исходное соотношение
ПРАКТИКУМ
В некоторых случаях высота изображения не должна превышать некий предел, например его исходную высоту, поэтому необходимо использовать правила max-height: 300% и width: auto.
сф Ссылка wdpg.10/2/14-5-2
271
Приемы отзывчивого веб-дизайна
сторон изображения, динамически вычисляя высоту на основе текущей ширины изображения
Рассмотрим пример
^Пример [=> Ссылка: wdpg.io/2/14-5-1
Этот код служит для создания динамически меняющегося изображения, размеры которого уменьшаюгся/увеличиваюгся при изменении области просмотра, но не превышают исходные.
img {
max-width: 100%;
height: auto;
Обеспечивают отзывчивость изображения
<header>
<hl>Respcnsive Web Design</hl>
</header>
<main>
<aside class="quotation">
<h.3>Quote</h3>
</aside>
<article>
<h2>A Brief History</h2>
<p>Early in the new millennium, etc.</p>
</article>
<aside>
<h3>Links</h3>
<img src="/images/rwd png" alt="Responsive Web Design image">	*
</aside>	Изображение 6 элементе aside
</main>
<footer>
<p>&copy; Logophilia Limited</p>
</footer>
На рис 14 12 и 14 13 показано, как изменяется масштаб изображения при смене ширины его родительского элемента aside
Масштабирование изображений в зависимости от размера экрана — полезный прием, но он вовсе не означает, что вы должны загружать одно и то же изображение на все устройства Например, если разрешение и, соответственно, размер изображения очень телики то его вполне можно загружать на настольные компьютеры и ноутбуки, а на смартфоны/план-шеты лучше передавать менее «тяжелую» версию В следующем уроке вы узнаете об атрибутах элемента img. позволяющих загружать разные версии изображения в зависимости от устройства.
272
Подготовка отзывчивых изображений
► Рис. 14.12. Масштаб изображения, когда его родительский элемент aside занимает всю ширину экрана смартфона
► Рис. 14.13. При уменьшении ширины элемента aside масштаб изображения уменьшается соот ьетствующим образом
Урок 14.6. Отзывчивая загрузка изображений
Тема: атрибуты sizes и srcset
сф Ссылка: wdpg.ю/2/14-6-0
У отзывчивой графики есть еще одна особенность необходимость предо-стаиления версии изображения разрешение которого соответствует размеру экрана устройства пользователя. Можно создать изображение с малыми размерами для экранов смартфонов, со средними - для планшетов и наилучшую версию - для компьютеров Раньше для решения этой задачи требовался специальный сценарий, а в HTML5 все необходимые параметры поддерживает элемент img благодаоя двум новым атрибутам sizes и srcset
Атрибут sizes схож с директивой @media указывается выражение с определенными характеристиками экрана, например минимальной или максимальной высотой, а затем размеры изображения, с которыми оно должно отображаться на устройствах, соответствующих указанной конфигурации Можно перечислить несколько выражений
ВНИМАНИЕ!
При тестировании атрибута srcset путем изменения размера окна браузера он не всегда может загружать изо брожение разного размера. Хотя браузер по этому атрибуту и определяет, что нужно использовать изображение меньшего раз мера, но может изменять размер существующего изображения, поскольку оно уже было загружено в кэш.
273
Приемы отзывчивого веб-дизайна
ПАМЯТКА
Стандартное изображение, то есть указанное с помощью атрибута src, послужит запасным вариантом и будет, отображаться в старых браузерах, не поддерживающих атрибут srcset. Рекомендованный прием при ориентации на мобильные устройства — в качестве стандартного указывать изображение, предназначенное польза вателям мобильных устройств.
с соответствующими размерами изображения, разделив пары запятыми. Ниже показан общий синтаксис
sizes="(выражение!') ширина!, (выражение?) ширина?, ит. п., ширинам"
Обратите внимание что если в последнем случае не указано выражение. то изображение с приведенным размером (шириной) отображается на всех устройствах, котооые не соответствуют перечисленным выражениям Предположим что на экранах размером не более 500 пикселов вы хотите выводить изображения шириной 90 vw, а на остальных размер изображения должен составлять 50 vw Реализовать это можно так sizes="(max-width: seopx) 90vw, 50vw"
Затем в тег <img> добавляется атрибут srcset, в котором перечисляются графические файлы (с путями), разделенные запятыми, с указанием нужной ширины изображения и буквы w. Взгляните на синтаксис srcset="<paan! ширина!^, файл2 ширина2ш, и т. п." >
Руководствуясь этим кодом, браузер выбирает изображение, наиболее подходящее под размер экрана текущего устройства, учитывая значение ширины, указанное в атрибуте sizes. Рассмотрим пример srcset="/images/small.tif 400w,
/images/medium.tif 800w, /images/large.tif 1200w“>
В следующем примере соберем полученную информацию воедино и попробуем обеспечить отзывчивость изображений.
► Пример
cz^> Ссылка: wdpg.io/2/14-6-1
5 этом примере мы создадим динамически меняющее размер изображение, которое уменьшается/увеличивается при изменении размера экрана, но не превышает своих исходных размеров
Стандартное изображение для старых браузеров
Размеры выводимого
<img src= /images/img-small.png	p »
sizes="(max-width: 700px) 10Ovw, 75vw” srcset="/images/img-small.png 456w, /images/img-medium.png 900w, /images/img-large.png 1450w">
Список изображений для выбора браузером
На рис. 14 14-14 16 показано, как меняется изображение в браузере на экранах различных размеров
274
Подготовка отзывчивых изображений
► Рис. 14.14.
d крупной области просмотра отображается большое изображение
► Рис. 14.15. В области просмотра на планшете мы видим среднее изображение
► Рис. 14.16. В области просмотра на смартфоне выводится маленькое изображение
275
Приемы отзывчивого веб-дизайна
ПАМЯТКА
Чтобы изменить стандартный размер шрифта в Chrome, нажмите кнопку меню (три точки), выберите пункт Settings (Настройки), перейдите на вкладку Appearance (Внешний вид), а зате м в раскрывающемся списке Font Size (Размер шрифта) выберите подходящий размер.
Теперь, когда изображения стали отзывчивыми, можно обратить внимание на самый важный ресурс страницы — текст. Далее вы узнаете о некотооых приемах адаптации типографики под разные устройства
ПРИЕМЫ ОТЗЫВЧИВОЙ ТИПОГРАФИКИ
Ваша цель — разозлить некоторых людей, посещающих ваш сайт? Думаю, нет, хотя вы можете попытаться, указав размеры шрифюь в пикселах Браузеры типа Google Chrome и Mozilla Firefox допускают применение некоего дефолтного размера шрифта, во всех современных браузерах равного 16 пикселам, но люди преклонного возраста или с нарушениями зрения часто увеличивают это значение до 24. 32 или даже большего количества пикселов. Если вы воспользовались правилом font- si ze: 1брх для форматирования, скажем, основного текста своей страницы, то все посетители вашего сайта, в том числе и изменившие стандартный размер шрифта, увидят на вашей странице текст размером 16 пикселов.
К счастью, избежать такою сценария лег ко, если использовать относительные единицы измерения в рамках размеров шрифтов Один из вариантов — единица ет, где 1 ет соответствует стандартному размеру шрифта в браузере, ю есть, что крайне важно, заданному пользователем Если он настроил размер 16 пикселов, то 1,5 ет соответствует 24 пикселам, а 3 ет — 48 пикселам Если же пользователь указал 24 пиксела, то 1,5 ет будет соответствовать 36 пикселам, а 3 ет — 72 пикселам.
Решение кажется идеальным, но есть проблема связанная с наследованием Согласно правилам наследования некоторых CSS-свойств если родительский элемент форматируется с помощью свойства font-size, то его дочерние элементы автоматически фооматируются таким же образом. (Подробнее об этой важнейшей концепции CSS см в главе 19.) Чтобы увидеть проблему, сначала рассмотрите показанные ниже фрагменты HTML- и CSS-кода а затем ответьте на следующий вопрос если стандартный размер шрифта равен 16 пикселам, то каков размер шрифта в пикселах элемента hl?
HTML.
<body>
<header>
<hl>Vihat's My F-ont Size?</hl>
</header
</body>
276
Приемы отзывчивой типографики
CSS
body { font-size: lem;
}
header {
font-size: 1.5em;
}
hl { font-size: 2em;
}
Интуитивно можно предположить, что поскольку элемент hl объявлен с правилом font-size: 2em, то его текст должен отображаться шрифтом размером 32 пиксела Увы, это не так, и, чтобы объяснить почему, скажу, что свойство font-size наследуется, а это приводит к такой последовательности интерпретаций в браузере.
1	Для шрифта элемента body (lem) выбран размер 16 пикселов
2	Элемент header (l.Semj наследует размер шрифта от элемента body, так что равен 24 пикселам
3	Элемент hl (2ет) наследует размер шрифта от элемента header, поэтому равен 48 пикселам.
Я не говорю о том, что единиц ет следует избегать, но ьы должны учитывать описанный выше принцип наследования при настройке размеров шрифтов
Если гам не хочется заниматься вычислениями размеров в единицах ет, знайте, что есть альтернатива rem Это сокращение от root ет. оно обозначает главную относительную единицу, ведущую отсчет от корневого (главного) элемента страницы, которым является html Следует отметить два момента
•	Размеры стандартного шрифта и шрифта корневого элемента равны, а единица rem масштабируется идентично ет. поэтому единица rem является отзывчивой
•	Единица rem всегда наследует размер шрифта исключительно от элемента html поэтому проблем с наследованием не возникает Элемент hl, объявленный с правилом font-size: 2rem, всегда будет отображаться с размером шрифта, равным удвоенному стандартному
Опять же вышесказанное не значит, чго вы всегда должны использовать единицы rem вместо ет В некоторых случаях размеры шрифта дочернего элемента и родительского должны соотноситься, и тогда рекомендуется использовать единицы ет.
ПАМЯТКА
Чтобы изменить стандартный размер шрифта в Firefox, нажмите кнопку меню (три горизон шальные линии), выберите пункт Settings (Настрой ки), перейдите на вкладку General (Основные), а затем в раскрывающемся списке Size (Размер) раздела Fonts (Шрифты) выберите подходящий размер.
277
Приемы отзывчивого веб-дизайна
Урок 14. Использование отзывчивых размеров шрифтов
Тема: указание размеров шрифтов в единицах rem
сф Ссылка: wdpg ю/2/14-7-С
Ниже показана обновленная версия страницы в коде которой значения свойства font-size, ранее указанные в пикселах, заменены на аналоги в относительных единицах rem
^Пример сф Ссылка: wdpg.io/2/14-7-1
В этом примере показана обновленная версия страницы, в коде которой значения свойства font - size, ранее указанные в пикселах, заменены на аналогичные в относительных единицах гепт.
font-size: 1.5rem;
}
}
экранами ислользуюмся увеличенные размеры в единицах гем
Урок 14.8 Отзывчивые единицы измерения
Тема: использование единиц измерения rem сф Ссылка: wdpg.io/2/14-R-O
К сожалению, ошибки верстки из-за абсолютных единиц измерения, таких как пикселы не ограничиваются размерами шрифтов. Чтобы понять, что я имею в виду, рассмотрим следующий код, результат выполнения которого показан на рис. 14.17
278
Приемы отзывчивой типографики
Responsive Web Design
HTML:
<header>
<hl>Responsive bleb Design</hl>
</header>
CSS
header {
height: 64px;
}
Ы {
font-size: 2rem;
}
Страница выглядит замечательно! А если я изменю стандартный шрифт в браузере (Firefox) на 30 пикселов? На рис 14.18 показан печальный финал
Responsive Web Design
При увеличении стандартного размера шрифта заголовок hl превышает размер элемента header, в котором содержится, что приводит к общей перегруженности текста и (что гораздо хуже) к отсечению нижних границ букв р и д
Так происходит потому, что свойству height элемента header присвоено значение в абсолютных единицах — 64 пиксела Его высота не изменится ни на пиксел, какой бы стандартный размер шрифта вы ни выбрали
Рассмотрим следующий измененный код и результат, показанный на рис. 14.19
HTML:
<header>
<hl>Responsive Web Design</bl>
</header>
CSS
header {
height: 4rem;
}
Ы {
font-size: 2rem;
}
Responsive Web Design
► Рис. 14.17.
Текст hl
с размером 2 rem f-ыглядит прекрасно
► Рис. 14.18.
При увеличении стандартного размера шрифта заголовок уже не так хорош
ПАМЯТКА
Этот пример чисто демонстративный, так как на практике вы редко будете явно задавать высоту элемента. Вместо этого рекомендуется подгонять высоту элемента под его содержимое.
к Рис. 14.19.
Благодаря тому что t-ысота элемента header указана в относительных единицах rem, при изменении стандартного размера шрифта этот элемент масштабируется вместе с текстом
279
Приемы отзывчивого веб-дизайна
ВНИМАНИЕ'
Процентные значения вычисляются на основе ширины родительского элемента, поэтому иногда поля или от ступы, размеры которых заданы в процентах, выглядят странно или неправильно. R таких случаях, чтобы усилить контроль над ними, проценты следует сменить на единицы rent.
Единственное изменение которое я внес, — добавил правило height: 4rem для форматирования элемента header Благодаря тому что размер указан р. относительных единицах измерения, высота отзывчива и увеличивается (или уменьшается) в соответствии с изменением стандартного размера шрифта.
Выбор относительных единиц для измерений зависит от многих факторов. не последним из которых будет эффект, которого вы пытаетесь достичь Я могу дать несколько рекомендаций
•	При указании вертикальных размеров, таких как padding-top padding-bottom margin-top и margin-bottom, используйте единицы rem
•	При указании горизонтальных размеров, таких как width, padding-right, padding-left margin-right и margin-left, используйте проценты
•	При указании горизонтальных размеров когда требуется больше контроля над такими свойствами как width, max-width и min-width используйте единицы rem
•	При указании вертикальных размеров, которые масштабируются относительно высоты области просмотра, используйте единицы vh.
•	При указании горизонтальных размеров, которые масштабируются относительно ширины области просмотра используйте единицы vw.
^Пример
iz£> Ссылка: wdpg.io/2/14-8-1
В этом примере мы обновим код демонстрационкой страницы, заменив все абсолютные единицы (пикселы) на относительные— rem и проценты.
.container {
Для большего контроля используем значения в единицах геил
max-width: 60 ет; Для всех вертикальных величин header {	используются единицы гет
padding: Irem 1.67%;
}
hl <	J
padding-left: 1.67%;
}
.quotation {
padding-right: 1.67%;
}
article {
Для всех прочих горизонтальных величин используются проценты
flex-basis: 20гет; padding-top: Irem; padding-left: 1.67%;
}
P {
margin-bottom: Irem,
280
Резюме
aside { flex-basis: 10rem; padding: lrem 1.67%; }
Й	div {
padding-bottom: .5rem; } footer { padding: lrem 1.67%; }
Используя единицы rem для веотикальных величин и проценты — для горизонтальных, вы максимально контролируете этот аспект дизайна и при этом сохраняете отзывчивость макета. Что и требовалось доказат ь!
РЕЗЮМЕ
•	Избегайте фиксированной верстки, когда размеры элементов страницы указываются в абсолютных единицах, таких как пикселы
•	Отдавайте преимущество «жидкой» верстке, когда горизонтальные величины, такие как ширина, отступы и поля, выражаются в процентах
•	Чтобы сверстать отзывчивый макет, используйте медиавыражения для подгонки размеров блоков, компоновки макета, сокры-тия/отображения элементов в зависимости от размера экрана устройства
•	Ориентируйтесь в первую очередь на мобильные устройства, чтобы базовый макет страницы был оптимизирован для просмотра на смартфоне, и с помощью медиавыражений расширяйте/ изменяйте макет для просмотра на больших экранах
•	Адаптируйте изображения, отформатировав их с помощью деклараций max-width: 100% и height: auto
•	В теги <img> добавьте атрибуты sizes и sreset, чтобы масшта-биоовать изображения и выбирать графические файлы в соответствии с размером экрана устройства посетителя
•	При указании размеров шрифтов избегайте абсолютных значений в пикселах отдавая предпочтение относительным единицам
•	Используйте единицы rem при форматировании вертикальных величин, таких как высота, отступы и поля
Глава 15
Проект: создание фотогалереи
В этой главе
	Планирование и создание эскиза фотогалереи.
	Выбор шрифтов для страницы.
	Добавлетше шапки и навигационных ссылок.
	Добавление миниатюр изображений.
	Добавление динамических подписей и ссылок на полноразмерные изображения.
В отличие от первых двух проектов - персональной главной страницы, которую вы создали в главе 5. и целевой страницы, рассмотренной в главе 10, — теперь вы знаете достаточно, чтобы создать страницу, имеющую профессиональный вид Если вы сейчас себя недооцениваете. то эта глава докажет, что я прав В ней я расскажу о создании полнофункциональной фотогалереи, содержащей динамически генерируемые подписи, миниатюры со ссылками на полноразмерные версии изображений и многое другое. Вы воспользуетесь многими инструментами и приемами, которые изучили до этого момента, в том числе селекторами классов блочной моделью CSS, создадите изображения (конечно же) и макеты, Приступайте к работе!
282
Создание эскиза макета
НАЧАЛО РАБОТЫ
Проект представляет собой онлайн-галерею для демонстрации фотографий. Страница будет содержать несколько миниатюр, которые представляют собой уменьшенные версии полноразмерных изображений. Посетитель сайта может щелкнуть на любой миниатюре, чтобы открыть полноразмерную версию изображения Миниатюры сопровождаются краткими описательными подписями.
На первый взгляд проект прост По правде говоря, и получившаяся страница будет смотреться аскетично Безусловно, она будет красиво выглядеть и при этом будет казаться простой. Однако аскетичность дизайна сайта вовсе не означает простоту его функционала Мы сверстаем прекрасный flex-макет, добавим возможность адаптивности размеров относительно области просмотра и внедрим сложные методы позиционирования
ПОДГОТОВКА ФОТОГРАФИЙ
Начните проект с подготовки пары фотографий Для сохранения графических файлов лучше использовать формат JPEG, поскольку файлы в нем имеют меньший размер чем PNG. с минимумом потерь в качестве Вам понадобятся две версии каждого изображения полноразмерная и миниатюра. В своем макете я использовал миниатюры одинакового размера — 30(' пикселов в ширину и 20Э в высоту В вашем случае разрешение может быть иным. Полноразмерные версии могут иметь любой размер.
СОЗДАНИЕ ЭСКИЗА МАКЕТА
Как и в предыдущих проектах (см. главы 5и]0), все веб-проекты должны начинаться с карандаша и бумаги (или любого другого удобного для вас способа набросать эскиз) Вы учитесь создавать вебстраницы, а любой пристойный дизайн всегда начинается с беглого наброска, позволяющего получить общее представление о размерах и компонентах страницы. Ключевое слово — «беглого» Вам не нужно передавать вид финальной страницы. Вам нужно набросать основные разделы страницы и указать их примерное расположение, размер и содержимое. В качестве примера на рис 15.1 показан макет страницы с четырьмя разделами, такими как:
•	шапка с логотипом сайта и названием.
•	область навигации со ссылками на другие страницы галереи
ПРОФИ
Если вы не можете определиться с размером миниатюр, возьмите одно изображение и продублируйте его для всей галереи. Подобрав размер. можно будет обработать и остальные фотографии.
ВНИМАНИЕ!
Теоретически полноразмерные изображения могут иметь любой размер, но имейте в виду, что размеры файлов фотографий в очень высоком разрешении могут достигать десятков мегабайт. Чтобы не сжимать их слишком сильно, что чревато артефактами на изображениях, ис пользуйте разум ныв значения раз решений. В своем проекте я использовал снимки разрешением 2048 * 1365 пикселов.
283
Проект: создание фотогалереи
•	основной раздел страницы, содержащий миниатюры изображений'
•	подвал страницы с уведомлением об авторских правах и ссылками на социальные сети
Название страницы
ССЫЛКИ НА ГАЛЕРЕЮ
Миниатюра  Миниатюра  Миниатюра
► Рис. 15.1. Прежде чем пс гружаться в дебри HTML-и CSS-кода, возьмите карандаш с бумагой и набросайте поверхностный эскиз макета и содержимого страницы
Миниатюра  Миниатюра  Миниатюра
Миниатюра  Миниатюра  Миниатюра
Авторские права и ссылки на социальные сети
Подготовив эскиз, нужно обратить внимание на шрифты, которые будут использоваться на странице
ВЫБОР ШРИФТОВ
На этой странице мало текста, поэтому выбор шрифта вряд ли займет у вас много времени. Перечислю три области, для которых важно подобрать подходящий шрифт.
•	Шапка — хорошо бы выбрать что-то рукописное Для простоты я выбрал шрифт Cursive Кросс-платформенный шрифт, доступный как f Windows, так и в macOS, — это Brush Script МТ
284
Выбор цветов
•	Навигационная панель и подвал — по существу, текст здесь пред ставлен в виде ссылок, поэтому прекрасно подойдет красивый, чистый шрифт без засечек. Для своего проекта я выбрал шрифты Calibri (установлен на большинстве компьютеров под управлением операционной системы Windows) и Optima (установлен на большинстве компьютеров Мас)
•	Подписи к миниатюрам изображений — подписи довольно маленькие, поэтому я рекомендую использовать шрифт, читабельный даже при небольших размеоах. Я выбрал шрифты Calibri и Optima
В CSS-файле я указал следующие обьявления для настройки шрифтов.
font-family: cursive;
font-family: Optima, Calibri, sans-serif;
Теперь можно обратить внимание на цветовую схему для Фотогалереи.
ВЫБОР ЦВЕТОВ
Эта страница аскетична в отношении цвета, поэтому вам не нужно собирать сложную цветовую схему В моей версии используется три основных цвета
•	Фон шапки и подвала — дизайн выглядит сбалансированным, когда шапка и подвал окрашены в один цвет. Основной фон (о нем пойдет речь далее) должен быть относительно простым, чтобы акцентировать внимание на миниатюрах, поэтому в качестве фона шапки и подвала можно выбрать что-то более яркое, чтобы оживить страницу
•	Основной фон — эта область занимает львиную долю страницы и содержит миниатюры изображений и навигационные ссылки. Лучше всего для этой цели подойдет черный цвет или темные оттенки серого, коричневого или синего цветов
•	Текст — он должен хорошо читаться во всех трех разделах страницы в шапке, основном и подвале. В них используется темный фон, поэтому для окрашивания шрифта хорошо подойдет светлый, но не белый цвет, например светло-серый #еее, а также что-то вроде нежно-желтого
285
Проект: создание фотогалереи
На рис. 15 2 показаны цвета, которые я выбрал для своего проекта
Цвет текста i
#543437 МОПММ «221900
► Рис. 15.2.
Цветовая схема для моего проекта
1	*1
Шапка и подвал	Основной фон
Набросав макет страницы и определившись со шрифтами и цветом, мы можем переходить к конкретике (точнее, практике) — переводу идеи в HTML- и CSS-код.
СОЗДАНИЕ СТРАНИЦЫ
Чтобы создать фотогалерею, начните с каркаса кода, с которым я познакомил вас в главе 1 Затем переходите от раздела к разделу, добавляя текст, HTML-элементы и правила CSS
Базовая структура
За основу возьмите базовую структуру страницы из главы 1 и скомпонуйте макет галереи. Я выбрал следующие семантические HTML5-элементы.
• Для разметки шапки страницы используется элемент header, который, в свою очередь, состоит из двух элементов: img для логотипа сайта и hl для названия сайта
• Раздел навигации размечен с помощью элемента nav и состоит из неупорядоченного списка ссылок на другие страницы галереи.
• Главный раздел размечен с помощью элемента main и состоит из нескольких элементов img, отображающих миниатюры фотографий.
• Для разметки подвала страницы используется элемент footer, он содержит уведомление об авторских правах и несколько ссылок на социальные сети.
286
Создание страницы
^Пример i=J> Ссылка: wdpg.io/2/projects/photo-gallery/l
В этом примере мы подбираем элементы, составляющие базовую HTML-структуру фотогалереи.
ВЕБ-СТРАНИЦА
Раздел шапки
Навигационный раздел
(header?
(img src=’7images/your-logo-here.tif" ait="My logo"> (hl?Page Title</hl>
(/header?
(nav?
Раздел ьиалки
(ul?
di?Gallery 1</11>
di?Gallery 2</li> ______x Раздел
di?Gallery 3</li>	навигации
<li>Gallery 4</li?
(/ul?
</nav>
(mai n?
<img src=’http://placehold.it/300x20t)" alt="">
<img src="http7/placehold.it/300x200" alt="">
(img src="http://placehold.it/300x200" alt="">
(img src='‘http //placehold. it/300x200" alt="”> (/main>
Основной раздел (минммюро/ изображений)
(footer>
(p>Copyright and social media links(/p> (/footer?
Раздел лодвала
287
Проект: создание фотогалереи
ПАМЯТКА
13 базовую структуру страницы, входит и CSS-код сброса форматирования, который, помимо прочего, обнуляет поля и отступы, а также применя ет правило Ьох-sizing. border-box.
Сейчас галерея выглядит не очень привлекательно но скоро мы решим эту проблему Начнем с верстки общего макета страницы.
Общий макет
В главе 12 мы много говорили о flex-верстке, и сейчас эти знания вам пригодятся, поскольку мы сверстаем для фотогалереи flex-макет
Начнем с настройки основного flex-контейнера Под его задачи хорошо подойдет элемент body, который будет использоваться как одноколоночный контейнер по вертикальной основной оси Элементы должны быть вырсвнены по началу этой оси (то есть по верхней части страницы) Кроме тог о, все элементы нужно центрироватыю горизонтали, а подвал вывести в нижней части экрана, даже если содержимого недостаточно для заполнения остальной части страницы Г; следующем примере мы настроим все перечисленное
► Пример
сф> Ссылка: wdpg.io/2/projects/photo-gallery/2
В этом примере элемент body настраивается в качестве flex-контейнера для всей страницы.
Ограничение минимальной высоты
body {
display: flex;
flex-direction: column;
justify-content: flex-start; align-items: center;
Настройка
Пек-контейнера
min-height: 100vh;
font-family: Optima, Calibri, sans-serif;
background-color: #221900;
color: #ecd078;
Настройки группы шрифтов и цветов фона и текста
Единственное, что нужно сказать, касается свойства min-heignt Согласно его значению 100vh высота элемента body никогда не будет меньше высоты области просмотра браузера Если высота элемента body больше высоты области просмотра или равна ей. то подвал будет отображаться в нижней части экрана, даже если содержимого недостаточно для заполнения области просмотра по вертикали
Шапка сайта
Шапка состоит из элемента header, который, в свою очередь, содержит два элемента img для логотипа сайта и hl для заголовка сайта Кроме того, у шапки будут следующие характеристики
288
Создание страницы
•	Фоны шапки и остальной части страницы различаются, поэтому шапка будет зы гл я деть лучше, если займет всю ширину окна браузера Для этого понадобится правило width: 100%. примененное к элементу header.
•	Логотип и незнание сайта в шапке должны быть чыроннены и по гооизонтали, и по вертикали Для этого элемент header превращается во flex-контейнер с горизонтальной основной осью, а его свойствам justify-content и align-items задается значение center
В следующем примере показан HTML- и CSS-код, который я использовал для достижения поставленных целей и стилизации шапки
► Пример г-> Ссылка: wdpg.io/2/projects/photo-gallery/3
В этом примере шапка фотогалереи оформляется как flex-контейнер. в котором логотип и название сайта центрируются по горизонтали и вертикали.
ВЕБ-СТРАНИЦА
header {
display: flex;
justify-content: center;
align-items: center;
Шапка — это flex-контейнер
padding: lem 0;
width: 100%;	-------
background-culur: #543437;
}
hl {
padding-left: .5em;
font-family: cursive;
font-size: 3em;
Шапка растягивается во всю ширину окна
Стили для шапки сайта
<header>
<img src="/images/ampersand-photography.png" alt="Ampersand Photography logo">
<hl>Ampersand Photugraphy</hl>
</header>
289
Проект: создание фотогалереи
Раздел навигации
Следующая область страницы — раздел нанигации, который состоит из нескольких ссылок на другие страницы галереи. Он размечен элементом nav и содержит неупорядоченный список ссылок. Рассмотрим параметры форматирования этого раздела.
•	Ссылки в нем должны быть отцентрированы как по горизонтали, так и по вертикали Элемент nav — это flex-контейнер с горизонтальной основной осью, а свойствам justify-content и align-items задано значение center
•	Ссылки должны выглядеть как горизонтальный неупорядоченный список без маркеров Для этого элемент ul превоащается во flex-контейнер а свойству list-style-type задается значение попе
В следующем примере показан HTML- и CSS-код, необходимый для достижения этих целей и оформления раздела навигации
^Пример Ссылка: wdpg.io/2/projects/photo-gallery/4
В этом примере раздел навигации фотогалереи оформлен в виде flex-контейнера, содержащего элементы горизонтального неупорядоченного списка.
ВЕБ-СТРАНИЦА
GALLERY 1	GALLERY 2	GALLERY 3	GALLERY 4
nav {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: inherit;} nav ul {
display: flex;
list-style-type: none;}
nav li {
padding- lem 2.5em;
text-transform: uppercase;}
nav — Flex-контейнер
uf — flex-контейнер, Маркеры скрыты
" Стили для элементов Н
290
Создание страницы
<nav>
<ul>
<lixa href="galleryl.html">Gallery l</ax/li>
<lixa href="gallery2.html">Gallery 2</ax/li>
<lixa href="gallery3.html">Gallery 3</ax/li>
<lixa href="gallery4.html">Gallery 4</ax/li>
</ul>
</nav>
При просмотре страницы заметны две проблемы с навигационными ссылками.
•	Ссылки окрашены в стандартный синий цвет, который браузеры используют для их оформления По умолчанию ссылки не наследуют цвет шрифта родительского элемента, поэтому понадобится дополнительная инструкция для браузера В большинстве случаев проще всего добавить объявление color: inherit к элементу а
•	Нельзя определить, какая страница галереи отображается в данный момент Чтобы решить эту проблему, можно применить специальный стиль к навигационной ссылке текущей страницы. В моем случае для форматирования текущего элемента с изменением цвета фона и текста используется класс current-page
В следующем примере мы доработаем навигационные ссылки
ПРОФИ
Можно явно назначить цвет шриф там на странице, но если вы позднее решите изменить цвет текста, то вам придется вносить изменения в двух локациях, в элементах b' >dy и а. Благодаря использованию объявления color: inherit элемент а автоматически на следует изменение цвета текста путем форматирован ия элемента bi-dy.
^Пример с£> Ссылка: wdpg.io/2/projects/photo-gallery/5
В этом примере мы настроим для навигационных ссылок цвет, наследуемый итэлемента body. Кроме того, добавим класс current-page кэлементу текущей страницы, чтобы оформить ее как открытую.
Текущая страница Наведенная ссылка
ВЕБ-СТРАНИЦА
291
Проект: создание фотогалереи
.current-page { padding: .75em; background-cclor: #ecd078; color: #221960;
Класс current-page используемся для оформления омкрымой вкладки
*	- Элеменм а наследуем
а *	. ,	. * цвет от элемента body
color: inherit;
text-decoration: none;
}
a:hover {
color: #d95b43;	-—s Форматирование
text-decoration: underline;	наведенной ссылки
}
Ссылка заменяемся элементом span с классом current-page
<nav>	к
<ul>
<lixspan class="current-page">Gallery l</spanx/li>
<lixa href="gallery2.html">Gallery 2</ax/li>
<lixa href="gallery3.html">Gallery 3</ax/li>
clixa href="gallery4.html">Gallery 4</ax/li>
</ul>
</nav>
Теперь, когда мы настроили шапку и элементы навигации, настала пора основной части проекта — собственно фотогалереи.
Раздел с основным содержимым
Главная изюминка фотогалереи — это. конечно же. фотографии Основная концепция — разместить миниатюры оригинальных фотографий. на которых посетитель может щелкать, чтобы просмотреть полноразмерные изображения Простейший способ — превратить миниатюры в ссылки на ориг инальные фотографии, как это показано в следующем примере. Обратите внимание, что элемент main выступает в роли flex -контейнера, который центрирует миниатюры по горизонтали и допускает их перенос.
292
Создание страницы
^Пример с£> Ссылка: wdpg.io/2/projeds/photo-gallery/6
В данном примере элемент main превращается во Лех-контейнер Flex-элементы — это миниатюры фотографий, каждая из которых ссылается на соответствующее оригинальное изображение.
ВЕБ-СТРАНИЦА
main {
Это свойство	display: flex;
ограничиваем justify-content: center;	—* Flex-контейнер —
максимальную	flex-wrap: wrap;	эило элемент	mam
ширину \_______ max-width: 960px;
font-family: Optima, Calibri, sans-serif;
}
<main>
<	a href="/images/image01.jpg" target="_blank">
P <img src="/images/image01-thumbnail.jpg" alt="Thumbnail for image 1"> </a>
<	a href="/images/image02.jpg" target="_blank">
r- <img src="/images/image02-thumbnail.jpg" alt="Thumbnail z' for image 2">
</a>
<	a href="/images/image03.jpg" target="_blank">
*• <img src="/images/image03-thumbnail.jpg" alt="Thumbnail / for image 3">
</main>
Связанное полноразмерное изображение открывается в новой вкладке
293
Проект: создание фотогалереи
ПАМЯТКА
13 элементе main этого проекта вторичная ось проходит вертикально, поэтому объявление align-content: Flex-start дает браузеру указа ние выровнять все миниатюры по верхней части элемента main.
Подвал сайта
Последний элемент страницы фотогалереи - подвал, и котором будут размещены уведомление об авторских пранах и ссылки на социальные сети Чтобы выровнять эти элементы по горизонтали и вертикали, превратим элемент footer зо flex-контейнер
Обратите внимание, что элемент footer должен отображаться в нижней части страницы, даже если элемент main не заполняет окно браузера по вертикали Чтобы решить эту проблему, нужно задать свойству f lex-grow элемента main значение 1 Однако такое решение приводит к появлению неожиданных вертикальных промежутков между миниатюрами Для исправления ситуации задайте элементу main свойство align-content: flex-start В следующем примере показан необходимый код.
Ъ Пример гф Ссылка; wdpg.io/2/projects/photo-gallery/7
В этом примере элемент footer превращается во flex-контейнер, а элементу main назначаются специальные о ийства, чтобы исключить лишнее пространство между элементами main и footer.
© AMPERSAND PHOTOGRAPHY FACEBOOK TWITTER INSTAGRAM
main {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
flex-grow: 1;
max-width: 960px;
font-family: Optima, Calibri, sans-serif;
Теперь элемент main заполняем все пространство до подвала
footer {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: lem 0;
text-transform: uppercase;
background-color: #543437;
}
Элемент footer — это flex-контейнер
Элемент footer разворачивается на всю ширину окна
294
Полезные приемы
footer р {
padding: о 1.5em; }
<fouter>
<р>&сору; Ampersand Photography</p>
<pxa href="#">Facebaok</ax/p>
<pxa href="#">Twitter</ax/p>
<pxa href="#">Instagram</ax/p>
</footer>
ПОЛЕЗНЫЕ ПРИЕМЫ
Уже сейчас ваша фотогалерея похожа на приличную страницу, прекрасно выглядит и функционирует, На этом в принципе, можно остановиться, и, если «ам неинтересно, можете не читать дальше. Если же, на ваш взгляд, галерея выглядит скучно и заурядно, то прочитав следующие подразделы, вы сможете внести в нее несколько динамичных и полезных дополнений
Фиксация подвала
Ранее мы настроили сайт так. что подвал отображается в нижней части экрана, даже если в основном разделе недостаточно содержимого. чтобы заполнить окно браузера Когда элемент main содержит больше контента, чем вмещается в области просмотра браузера, подвал смещается вниз и пользователю нужно прокрутить страницу, чтобы увидеть его Как вариант, можно сделать так, что подвал будет виден всегда. Выполните следующие действия
ВНИМАНИЕ!
При добавлении уведомления об авторских правах у вас может возникнуть соблазн написать слова «Авторские права» и указать сим вол авторского права (&), но это излишество. Или напишите фразу, или укажите символ, но не используйте оба ва рианта сразу.
•	задайте элементу footer свойство position: fixed,
•	задайте элементу footer свойство bottom: 0, чтобы подвал фиксировался в нижней части области просмотра
•	добавьте небольшой отступ в нижней части элемента main, чтобы содержимое внизу не скрывалось фиксиооианным подвалом. Задайте свойству padding-bottom значение, идентичное высоте элемента footer (в данном случае 3.5ет)
В следующем примере показан необходимый код. решающий все эти задачи
295
Проект: создание фотогалереи
► Прим ер Ссылка wdpg.io/2/projects/photo-gallery/b
В этом примере элемент -footer фиксируется в нижней части области просмотра.
ВЕБСТРАНИЦА
Зафиксированный подвал
main {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
flex-grow: 1;
max-width: 960px;
padding-bottom: 3.5em;
}
footer {
display: flex;
justify-content: center;
align-items: center, position: fixed;  bottom: 0; .
width: 1(10%;
text-transform: uppercase; background-color: #543437;
}
Нижний оиасмуи элемента warn равен высоте подвала
Элемент footer зафиксирован
Элемент footer располагается в нижней части области просмотра
«Приклеивание» навигационной панели
Может быть, фиксированный подвал — это и не так важно, а вот наличие навигационной панели, которая постоянно на виду, — зесьма распространенное требование к верстке Навигация важна всегда, независимо от прокрутки страницы пользователем. Но в этом случае рассмотренный ранее метод фиксации подвала не подойдет. Если
296
Полезные приемы
вы зафиксируете навигационную панель, то вместе с ней придется закрепить и шапку, иначе в процессе прокрутки результат будет просто ужасающим Но фиксация шапки — пустая трата экранного пространства, поэтому нужно найти другое решение
Один из вариантов — поменять местами элементы header и nav Навигация находится в верхней части экрана поэтому можно добавить свойства position: fixed и top: 0 к элементу nav и свойство padding-top: 3.5em к элементу body
Неплохое решение, но я предпочитаю размещать элемент nav ниже шапки. В этом случае следует обратиться к значению sticky CSS-свойства position. В сочетании со значением top или bottom благодаря свойству position: sticky браузер прокручивает элемент как обычно, пока не достигнет указанной позиции, а затем зафиксирует его. Чтобы настроить такое поведение навигационной панели, вам нужно выполнить следующие действия
ПРАКТИКУМ
Полный код зафиксирован ного элемента nav доступен в песочнице.
сф Ссылка;
wdpg ю/2/projects/ photo-gallery/9
•	задать свойству position элемента nav значение sticky,
•	задать свойству top элемента nav значение 0. чтобы при прокрутке страницы навигационная панель оставалась зафиксированной в верхней части области просмотра;
•	задать свойству z-index элемента nav положительное число (например, 10), чтобы при прокрутке навигационная панель отображалась поверх остальных элементов страницы.
В следующем примере показан код, который нужно добавить.
^"Пример сф Ссылка: wdpg.io/2/projects/photo-gallery/lO
В этом примере мы настроим динамическую фиксацию навигационной панели.
«Приклеенная» навигационная панель
297
Проект: создание фотогалереи
nav {
display: flex;
justify-content: center;
align-items: center;
position: sticky;	-<—
top: 0;  ------- *—-
z-index: 10; ч
height: 3.5em;
width: 100%;
background-color: inherit;
}
Отвечает за фиксацию навигационной панели
При прокрутке панель «приклеивается» в верхней части области просмотра
Обеспечивает постоянную видимость панели
Добавление динамических подписей
Чего еще не хватает фотогалерее, так это подписей к миниатюрам Простой способ их создать — обернуть каждую миниатюру в контейнер div и превратить его во flex-контейнер со свойством flex-direction: column Затем можно добавить подпись, скажем, с помощью элемента figcaption и отобразить ее под миниатюрой Рассмотрим процесс в следующем примере
► Пример izj> Ссылка: wdpg.io/2/projects/photo-gallery/ll
В этом примере показан один из способов добавления подписей к миниатюрам
.image-thumbnail { display: flex; flex-direction: column; align-items; center;
ВЕБ-СТРАНИЦА
Миниатюра и подпись к ней обернуты во flex-контейнер
298
Полезные приемы
-  Каждая пара «миниатюра/подпись» ..	,	заключена в контейнер cuv
<div class= image-thumbnail >
Подписи <img sr'c='Vimages/image01-thumbnail.jpg">
<figure>
r <figcaption>Ladies gossiping in Montreal</figcaption> </figure>
</div>
<div class="image-thumbnail">
<img src=”/images/image02-thumbnail.jpg">
X <figure>
* <figcaption>To an ant, a flower is a world</figcaption>
</figure>
</div>
Это отличное решение но я хотел бы показать вам еще более классный прием, дающий настоящий «вау-эффект». Контейнер для миниатюры и подписи остается, а к элементу figcaption добавляется класс image-caption, Подпись дополняется элементами р, которые можно использовать как для названия, так и для основного текста подписи
Элеллент figcaption теперь содержит название и основной текст подписи
<div ciass-“image-thumbnai1">
<img src="/images/image01-thumbnail.jpg">
<figcaption class="image-caption">
<p class="caption-title">Les Chuchoteuses</p>
<p class="caption-text">Sculpture of ladies gossiping in Montrealc/p>
</figcaptionx
</div>
Задача — скрыть подпись по умолчанию и отображать ее только при наведении указателя мыши на миниатюру В CSS-файле создается класс image-thumbnail с правилами относительного позиционирования и шириной/высотой, равными фактической ширине и высоте миниатюры:
.image-thumbnail { position: relative;
width: 300px;	—ч Указываем me же значения
height: 200px; что и размеры миниатюры
Теперь, настроив позиционирование для класса image-thumbnail, применим абсолютное позиционирование для класса imagecaption Важно настроить в этом классе ту же ширину и высоту что и размеры миниатюры, а затем расположить его в левом верхнем углу (с помощью свойств top: 0 и left: б), чтобы при отображении текст перекрывал миниатюру. Ниже показан полный CSS-код этого класса
299
Проект: создание фотогалереи
.image-caption {
flex-direction: column; '	'	представляем
justify-content: flex-end; собой flex-контейнер
position: absolute; left: 0;
top: 0;
Подпись позиционируемся абсолютно, слева вверху
J
width: 3и0рх; I____ Те же размеры,
height: 200рх; чмо и у миниатюры background-color: rgba(32, 32, 32, 0.75); color: #ecd078;
opacity: 0,	- Цодписо no умолчанию скрыта
Темно-серый, частично прозрачный фон
ПРАКТИКУМ
Полный код этого примера доступен в песочнице.
Ссылка* wdpg.io/2/piojects/ photo-gallery/12
Обратите внимание, что был создан flex-контейнер с вертикальной основной осью и элементами, выровненными свойством flex-end в нижней части контейнера Настроен полупрозрачный фон темно-серого цвета, поэтому сквозь него вы сможете увидеть миниатюру Наконец, благодаря свойству opacity: 0 подпись скрыта по умолчанию. Чтобы отображать ее при наведении указателя мыши, к классу image-caption добавляем псевдокласс hover и с его помощью задаем свойству opacity значение 1 (на рис. 15 3 показан пример):
.image-caption:hover { opacity: 1;
}
► Рис. 15.3. Наведите указатель мыши на миниатюру, чтобы увидеть подпись
LES CHUCHOTEUSES
Sculpture of ladles gossiping in Montreal
ПРОДОЛЖЕНИЕ БАНКЕТА
Финальная версия фотогалереи (показана на рис 15.4) — отличная витрина для ваших фотографий (Если требуется выложить свой код • сеть как можно скорее, то ознакомьтесь с приложением в нем описаны необходимые действия)
300
Резюме
► Рис. 15.4. Полнофункциональная фотогалеоея
Нам удалось создато полнофункциональную фотогалерею (особенно если вы добавили дополнительные функции, описанные в предыдущем разделе). Тем не менее вы все еще можете дополнить и улучшить ее. используя множество способов. Конечно, вы можете добавить больше изображений, а если их очень много, то галерею можно расширить с помощью дополнительных страниц. Кроме того, вы можете изменить цвета, попробовать разные начертания и размеры шрифтов и т д
РЕЗЮМЕ
•	Создание фотогалереи начинается с подготовки миниатюр и полноразмерных версий фотографий, которые планируется показать
•	Затем следует набросать эскиз будущей фотогалереи.
•	Далее выбираются шрифты для названия и основного текста страницы.
•	Потом подбираются цвета для фона и шрифтов
301
Проект: создание фотогалереи
•	Затем формируется базовая структуоа страницы основные HTML элементы и глобальные CSS-свойства, применяемые к телу страницы (элементу body)
•	После этого верстается flex-макет, а элемент body назначаемся flex-контейнером
•	Далее с помощью CSS форматируются разделы по очереди, шапка, навигация, основной раздел и подвал
•	И наконец по желанию можно реализовать несколько приемов таких как фиксированный подвал, «липкая» навигационная панель и динамические подписи
Часть IV
Безупречные веб-страницы
Прошло около 30 лет с тех пор, как люди стали пользоваться Всемирной сетью (тогда ее можно было назвать так только с большой натяжкой). Это не так много в рамках истории человечества, но достаточно долго, чтобы мы успели забыть, каким был Интернет, скажем, в 1995 году. Если вы пользовались им в те времена, то наверняка вам вспомнится что-нибудь унылое: повсеместные черно-белые сайты, отсутствие таблиц стилей и верстка с помощсю минимального количества рудиментарных HTML-тегов В те времена большинству веб-серферов даже в голову не приходило, как могут выглядеть идеальные страницы. Прошло гремя. Теперь веб-страницы могут быть безупречными
Ваши веб-проекты тоже могут стать такими, когда вы прочитаете главы этой части. Вы научитесь использовать несколько дополнительных HTML-элементов (см. главу 16), поймете, как применять цвета и градиенты (см. главу 17), освоите расширенные приемы веб-типографики (см. главу 18) и некоторые техники CSS профессионального уровня (см главу 19) В главе 20 мы подведем итог, разобравшись, как создать шикарную страницу личного портфолио
Глава 16
Дополнительные HTML-элементы для веб-верстки
16
В этой главе
	Применение редко используемых, по важных HTML-элементов.
	Размещение на сайте ссылок на файлы.
	Ссылки на определенные элементы на странице.
	Добавление специальных символов и комментирование кода.
Возможно, вы заметили, что в первых главах этой книги мы активно работали с HTML а последующие больше посвящены CSS. Это неудивительно Освоив несколько базовых HTML-элементов, таких как div, р и span, вы принялись доба^ лять к ним множество CSS-стилей, позволяющих создавать прекрасные веб-страницы. Но в HTML есть нечто большее, чем эти базовые элементы В главе 11 вы уже познакомились с несколькими полезными структурными элементами, а в этой главе расширите свои знания языка HTML. Вы освоите элементы для разметки всего, от аббревиатур до переменных, научитесь настраивать тег <а>, узнаете, как добавлять на страницы символы, которые невозможно набрать с клавиатуры, и даже комментарии, повышающие удобочитаемость кода. Да здравствует HTML!
304
Дополнительные HTML-элементы для веб-верстки
Урок 16.1 Дополнительные текстовые элементы, которые стоит освоить
Тема: элементы для разметки текста
rzj> Ссылка: wdpg.io/2/16-1-0
Я уже несколько раз говорил о том что HTML-код веб-страниц важно структурировать семантически. То есть вы должны использовать элементы. которые подскажут браузеру (не говоря уже о веб-дизайнерах и разработчиках. читающих ваш код; какое значение имеет тот или иной элемент в контексте страницы Это особенно верно когда речь идет о базовом макете страницы, рассмотренном в главе 11: такие элементы, как header, nav и article, значительно облегчают читабельность кода Это блочные элементы, но вы можете семантически разметить и строчные В HTML5 довольно много таких текстовых элементов, и хотя они редко пригождаются нужно знать об их существовании и семантической нагрузке
abbr
Этот элемент размечает текст как аббревиатуру или акроним С помощью атрибута title можно указать расшифровку аббревиатуры или акронима. Большинство браузеров отображают содержимое атрибута title а виде подсказки, всплывающей при наведении указателя мыши на элемент Некоторые браузеры (в частности, Google Chrome и Mozilla Firefox) добавляют к размеченному таким образом тексту пунктирное подчеркивание.
Пример [=> Ссылка: wdpg.io/2/16-l-l
FOMO
in	fear of пл ssing out
LU CQ
<abbr title="fear of missing out”>FOMO</abbr>
305
Дополнительные HTML-элементы
cite
С помощью данного элемента размечаются источники цитат — творческие работы (в том числе и с именем автора), например книги, статьи, эссе, стихотворения, сообщения в блоге, публикации в социальной сети фильмы, телепередачи пьесы и поочие произведения искусства Большинство браузеров отображают размеченный таким образом текст курсивом
ВЕБ-СТРАНИИА	ВЕБ-СТРАНИЦА
^Пример сф Ссылка:wdpg.io/2/16-1-2
“A fine quotation is a diamond on the finger of a man of wit, and a pebble in the hand of a fool. ” —Joseph Roux, Meditations of a Parish Priest
<q>A fine quotation is a diamond on the finger of a man of wit., and a pebble in the hand if a fcol.</q> -<cite>3oseph Roux, Meditations of a Parish Priest</cite>
code
Этот элемент используегоя для разметки текста как программного кода Большинство браузеров отображают размеченный таким образом текст моноширинным шрифтом.
^Пример Ссылка: wdpg.io/2/16-1-3
Use the CSS rgb( j function.
Use the CSS <code>rgb()</code> function.
306
Дополнительные HTML-элементы для веб-верстки
dfn
Этот элемент используется для разметки термина, определяемого в контексте фразы или предложения Большинство браузеров отображают размеченный таким образом текст курсивом
^Пример Ссылка: wdpg.io/2/16-1-4
Л header is an element that appears at the top of the page.
A <dfn>header</dfn> is an element that appears at the top of the page.
kbd
Данный элемент используется для разметки текста, вводимого с клавиатуры (например, набранных символов или сочетания клавиш, к примеру Enter/Return), или, что более распространено, для обозначения пользовательского ввода любого типа (например голосовой команды) Большинство браузеров отображают размеченный таким образом текст моноширинным шрифтом
^Пример Ссылка: wdpg.io/2/16-1-5
<
s
1	For example, type Helvetica and then
U	press Enter.
For example, type <kbd>Helvetica</kbd> and then press <kbd>Enter</kbd>.
307
Дополнительные HTML-элементы
ВЕБ-СТРАНИЦА	ВЕБ-СТРАНИЦА
	mark Используйте этот элемент для разметки текста, важного для посетителя, подобно тому, как тексторыделителем вы отмечаете строки в книге Большинство браузеров показывают текст, размеченный таким образом, на желтом фоне.
► Пример	Ссылка wdpg.io/2/16-1-6 Future is a geometric sans-serif typeface that was designed by Paul Renner in 1927. Futura is a geometric sans-serif typeface that was <mark>designed by Paul Renner in 1927</mark>. pre Данный элемент не имеет семантического назначения в HTML5, но довольно часто используется с семантическими элементами, такими как code. Проблема вывода программного кода и подобного текста заключается в том что сложно передать его структуру например отступы, поскольку браузер игнорирует пробельные символы Однако при разметке текста с помощью элемента pre (от preformatted text — «предварительно отфор матированный текст») браузер сохраняет все пробельные символы, в том числе многосимвольные пробелы и переносы строк. Кроме того, браузер отображает размеченный таким образом текст моноширинным шрифтом.
> Пример	Ссылка, wdpg ю/2/16-1-7 function helloWorldf) { //Greet the reader alert('Hello world!1); } <prexcode> function helloWorld() { // Приветствую читателя alert('Hello World!'), }</codex/pre>
308
Дополнительные HTML-элементы для веб-верстки
s
Используйте данный элемент для разметки неточного, устаревшего или иного недостоверного текста Такой текст не всегда следует удалять Иногда необходимо оставить недостоверный текст для сравнения, например чтобы обратить внимание посетителя на исправление, обновленную информацию или измененную цену Браузер отображает размеченный таким образом текст добавляя линию зачеркивания
^Пример [=J> Ссылка: wdpg.io/2/16-1-8
On sale now for $42^99 S9.99.
On sale now for <s>$12.99</s> $9.99.
samp
Данный элемент используется для разметки фрагмента текста как результата вывода компьютерной программы или аналогичной системы. Браузер отображает размеченный таким образом текст моноширинным шрифтом
^Пример iz> Ссылка: wdpg.io/2/16-1-9
The error message said Comic Sans?
Are you kidding me I?.
The error message said <samp>Comic Sans!? Are you kidding me!?</samp>.
309
Дополнительные HTML-элементы
small
Данный элемент используется для разметки текста, который обычно лается мелким шрифтом' уведомлений об авторских правах или товарных знаках, отказов от ответственности, лицензионной информации, юридических прав, ограничений, предупреждений и прочих атрибуций. Браузер отображает размеченный таким образом текст шрифтом чуть более мелким, чем у основного текста
^Пример 1=> Ссылка: wdpg.io/2/16-1-10
ВЕБ-СТРАНИЦА	ВЕБ-СТРАНИЦА
Thank you for reading this essay. TypeNerdNews is С2323 Aldus Manunus. All nghts reserved.
Thank you for reading this essay.<br>
<small>TypeNerdNews is &copy; 2023 Aldus Manutius. All rights reserved.</small>
sub
Данный элемент служит для разметки текста как подстрочного индекса, что удобно, если на вашей веб-странице публикуются химические или математические формулы. Браузер отображает размеченный таким образом текст уменьшенным шрифтом, размещаемым ниже базовой линии обычнее текста.
^Пример Ссылка: wdpg.io/2/16-l-ll
Many illuminated manuscripts are written using iron gall ink. which is iron sulfate (FeSO.4) added to gallic acid (C7H6O5).
Many illuminated manuscripts are written using iron gall ink, which is iron sulfate (FeS0<sub>4</sub>) added to gallic acid (C<sub>7</sub>H<sub>6</sub>O<sub>5</sub>).
310
Дополнительные HTML-элементы для веб-верстки
sup
С помощью этого элемента можно разметить текст как надстрочный индекс поэтому его часто используют для математических формул и сносок Браузер отображает размеченный таким образом текст уменьшенным шоифтом, размещаемым выше базовой линии обычного текста
► Пример
izj> Ссылка: wdpg.io/2/16-1-12
The W3C standard cautions us not to use subscripts and superscripts "for typographical presentation for presentation’s sake."11 J
The W3C standard cautions us not to use subscripts and superscripts "for typographical presentation for presentation's sake."<sup>[lj</sup>
time
Данный элемент используется для разметки фрагмента текста в виде даты, времени или их комбинации
<time datetiте="машиночитае^ый-<рормот">человекочитае^ый-<рортт</'Ите>
Суть в том. чтобы представить дату и/или время в двух форматах
•	текст между тегами <time> и </time> — это удобный для человека способ отображения даты или времени, например 13 00 18 августа 2024 года,
•	значение атрибута datetime — машиночитаемый формат даты и/или времени, например 2023-08-23Т1б:Н0.и0-05:0Л Общий синтаксис показан на рис. 16 1
Часы Минуты Секунды
ГГГГ-ММ-ДД1чч:мм:сс±ЧЧ:ММ f г \	\
Год Месяц День	Часы Минуты
Время, опережающее (+) или отстающее (-) от средней- времени по Гринвичу
► Рис. 16.1. Синтаксис который следует использовать для передачи значения атрибуту datetime тега <time>
Браузер не форматирует дату/врсмя особым образом 1 :место этого
нужно использовать элемент time, чтобы передать браузеру и другому Г10
311
Дополнительные HTML-элементы
дату и/или время в понятном, считываемом формате К примеру, полезно указать дату и время создания или обновления страницы
^Пример	Ссылка: wdpg.io/2/16-l-13
ВЕБ-СТРАНИИА	ЗЕБ-СТРАНИЦА
This web page was last modified on August 23rd. 2023. at 9:25AM
This web page was last modified on <time datetime="2023-08-23T09:25:00-05:И0'>August 23rd, 2023 at 9:25AM</tirre>.
<U>
Для этого элемента я не нашел семантического предназначения Стандарт HTML гласит, что он «представляет собой область встроенного текста, которая должна быть отображена таким образом, чтобы было видно, что у нее есть нетекстовая аннотация». Я понятия не имею, что это значит К допустимым вариантам использования элемента и относится аннотирование орфографических ошибок, но я в этом сомневаюсь.
Основная проблема с элементом и заключается в том, что все браузеры отображают размеченный им текст, добавляя сплошное подчеркивание. а значит, посетитель может подумать, что перед ним ссылка, и попытается щелкнуть на ней кнопкой мыши (и расстроится, когда ничего не произойдет). Если предположить, что с помощью подчеркивания можно акцентировать внимание на тексте, то могу сказать, что для этого предназначен элемент ет Короче, я не нашел ни одной веской причины использовать элемент и Я привел его в книге, поскольку ны можете столкнуться с ним при просмотре исходного кода некоторых (без сомнения, плохо оформленных) веб-страниц.
^Пример ф Ссылка: wdpg.io/2/16-1-14
It's a really bad idea to use the u element because its text looks just like a link.
It's a really oad idea to use the <code>u</code> element because its text <u>looks just like a link</u>.
312
Дополнительно о ссылках
var
Данный элемент позволяет разметить слово или фразу в качестве шаблонного текста Это может быть переменная, параметр функции или обозначение общего класса объектов Браузер отображает размеченный таким образом текст курсивом.
^Пример iz> Ссылка: wdpg.io/2/16-1-15
5 s
Here’s the syntax to use for the time element:
<3	«-time datetime="machine-value">human cext</time>.
ib bJ CCj
Here's the syntax to use for the <code>time</code> element: <brxcode>&lt; time datetime="<var>machine-value </var>"&gt;<var>human text</var>&lt;/time&gt;.</code>
Теперь пришло время более подробно рассмотреть элемент а, с которым вы уже знакомы
ДОПОЛНИТЕЛЬНО
О ССЫЛКАХ
Когда вы знакомились с тегом <а> (напомню, это было в главе 2), оказалось что создать ссылку очень просто вам нужно всего лишь написать адрес ссылки в виде значения атрибута href тега <а> Все так, но возможности тега <а> на этом не заканчиваются' ссылки на веб-страницах могут быть трех типов.
•	удаленные ссылки на веб-страницы за пределами вашего сайта;
•	локальные ссылки на другие зеб-страницы вашего сайта;
•	внутристраничные ссылки на другие разделы текущей вебстраницы.
Об удаленных ссылках мы говорили в главе 2, о внутристранич-ных вы узнаете в уроке 16.2 А прямо сейчас я расскажу о локальных ссылках, ведущих на другие ^аши веб-страницы
313
Дополнительные HTML-элементы
Ссылки на локальные файлы
Первое, что следует отметить, — для локальных ссылок в URL не нужно указывать ни протокол, ни доменное имя При внутренней адресации браузер предполагает, что используется протокол HTTPS, а доменное имя — это имя вашего хост-сервера. Все просто, но прежде, чем продолжать учить вас созданию ссылок, я хочу провести небольшую экскурсию, чтобы вы разобрались в принципах работы веб-каталогов
Когда вы подписываете договор с хостинг-провайдером, который будет размещать гаши веб-страницы в Интернете, он предоставляет вам отдельный каталог на своем сервере Если вы размещаете лишь несколько страниц, этого каталога будет более чем достаточно Но если вы создали крупный сайт, то следует подумать о том. как организовать свои файлы. Почему7 Вспомните свой компьютер Вряд ли у вас все файлы хранятся в одном каталоге Скорее всего, у -гас есть отдельные каталоги для различных программ, которые вы используете, каталоги для документов, игр, фотографий и т. д.
Аналогичным образом можно структурировать и веб-файлы. Однако в таком случае ссылаться на файлы в других каталогах может быть чуть сложнее В качестве примера рассмотрим сайте тремя каталогами
/	• Основной каталог
articles/ journal/
Подкаталоги основного каталога
Рассмотрим три сценария, на которые следует обратить внимание
• Ссылка на файл в том же каталоге — самый простой сценарий, поскольку вам не нужно указывать путь по каталогам. Предположим, что редактируемый HTML-файл находится в каталоге journal, и е этом файле необходимо сослаться на страницу rant.html, которая тоже находится в этом каталоге В таком случае зы указываете только имя файла
<а href="rant.html">
•	Ссылка на файл в подкаталоге основного каталога — распространенный сценарий, поскольку ваша домашняя страница (которая почти наверняка находится в основном каталоге), скорее всего, будет содержать ссылки на файлы в подкаталогах. Предположим, что необходимо сослаться на страницу design.html в подкаталоге articles вашего сайта Тег<а> будет выглядеть так <а href="articles/design.html">
•	Ссылка на файл в соседнем подкаталоге — наиболее сложный сценарий. Предположим, у -ас есть страница в подкаталоге articles, и нужно сослаться на страницу poem.html в соседнем подкаталоге - journal Необходимый код тега <а>:
<а href='7journal/poem.html">
314
Дополнительно о ссылках
В последнем примере первый слеш (/) предписывает браузеру сначала подняться в основной каталог, а затем перейти в каталог journal, чтобы найти файл pocm.html
Урок 16.2. Ссылки на одну и туже страницу
Тема: внутристраничные ссылки
|_ф Ссылка: wdpg । э/2/16-2-0
Когда пользователь щелкает на обычной ссылке, то загружается соответствующая страница и браузер отображает в области просмотра ее верхнюю часть Но вы можете создать специальную ссылку, позволяющую отобразить какую-то другую часть страницы, например центральный раздел.
Когда используются такие ссылки? Большинство ваших HTML-страниц, скорее всего, будут небольшими и удобными, а заглянувшие на них веб-серферы легко сориентируются. А вот на более длинных страницах можно создать ссылки на различные разделы, чтобы посетитель мгновенно переходил к нужному разделу, а не прокручивал всю страницу, тратя тремя на поиски
Чтобы создать такую ссылку, необходимо добавить специальный идентификатор, отмечающий локацию, на которую нужно сослаться Например вспомните, как можно пометить место в книге, которую вы читаете Можно загнуть страничку, прикрепить между страницами липкую записку или вставить закладку Идентификатор ссылки на страницу выполняет ту же функцию он отмечает определенную позицию на ^еб-странице, а элемент а настраивается для прямой ссылки на позицию сданным идентификатором
Чтобы создать идентификатор в тег необходимо добавить атрибут id и .задать некое значение
<h2 id="best-practices">Bost Practices</h2>
Значение, присваиваемое атрибуту id должно соответствовать следующим критериям
•	оно должно быть уникальным на веб-странице;
•	должно начинаться с латинской буквы
•	остальные символы могут быть любой комбинацией латинских букв, цифр (0-9). дефисов (-), знаков подчеркивания (_). двоеточий (:) или точек ( ).
Код элемента а зависит от того, находится ли идентификатор на той же странице, что и ссылка, или нет В первом случае в теге а указывается идентификатор, которому предшествует знак решетки (#).
<а href="#best-practices">Go to the sest Practices section</a>
Если идентификатор определен на другой веб-странице, то в качестве значения атрибута href указывается URL этой страницы, за которым следуют знак решетки (#) и сам идентификатор
See my <а href="organization.html#best-practices">primer on best practicesc/a>
315
Дополнительные HTML-элементы
В следующем примере показано, как работают внутоистраничные ссылки
► Пример
izj> Ссылка wdpg.io/2/16-2-1
В этом примере мы рассмотрим страницу, на которой созданы пнутристраничные ссылки.
ВЕБ-СТРАНИЦА
Внутристраничные ссылки
Адрес внутристраничной ссылки
Organizing Your Web Page Text
Conlcnvt:
Ли*:*
All great documents have something in common, excellent organization. Content and lormamng arc important, but tnetr ettccuvcncu » aun>m>ncd or even nulniicd u inc document has a slipshod organization. However, even a page with only so-so content and negligible formatting can gr-t its point aerats if b's organized rohcrcntlj and sensibly
Ссылка н« заголовок Best Practices
<hl>Organizing Your Web Page Text</hl>
<h4>Contents:</h4>	3enent
<a href="#benefits">Benefits</axbr> . Ссылка на заголовок
<a href="#workflow">workflow</axbr> * Workflow
ca href="#best-practices">Best Practices</a>
<p>
All great documents have something in common: excellent organization. Content and formatting are important, but their effectiveness is diminished or even nullified if the document
nas a slipshod organization. However, even a page with only so-so content and negligible -formatting can get its point across if it's organized coherently and sensibly.
</p>
<h2 id="benefits">Benefits</h2>
Идентификатор для заголовка Benefits
<p>
There are many reasons to organize your web page text, but three are the most important: narrative flow, accessibility, and search engine optimization.
</p>
<h3>Narrative Flow</h3>
<p>
Research has shown &mdash; and poets and storytellers have known for thousands of years &mdash; that humans have an innate hunger for story. We learn better and take in data more effectively when it's organized as a narrative.
</p>
316
Вставка специальных символов
<h3>Accessibility</h3>
<Р>
Visually impaired visitors to your web page will often use special screen readers to read aloud the page contents. These tools are designed to look for and read web page headings so the user can quickly get an overall sense of the page structure.
</p>
<h3>Search Engine Optimlzation</h3>
<p>
Most search engines include page headings as part of their Идентификатор algorithms for determining where a page should rank in the Эля заголовка	results. In general, text that resides higher up in the page
Hest Practices	hierarchy is given more importance in the search results.
.	</p>	Идентификатор
<h2 id="workflow">Workflow</h2>	для заголовка Workflow
<h2 id="best-practices">Best Practices</h2>
Нпяд ли вы часто будете использовать внутристраничные ссылки, но они могут пригодиться на длинных страницах с большим коли-чеством разделов
ВСТАВКА СПЕЦИАЛЬНЫХ СИМВОЛОВ
HTML- и CSS-файлы полны текста, но это не значит, что они состоят только из букв, цифр и прочих символов, которые можно набрать с клавиатуры. Если в тексте на веб-странице нужно набрать тире (-), символ копирайта (©) или букву «е» с акутом (ё), то вам понадобятся специальные значения, называемые символьными сущнос тями Они могут быть трех видов шестнадцатеричный код. десятичный код и мнемоника. Шестнадцатеричный и десятичный коды — в большинстве своем цифровые, а мнемоники — это более понятные человеку сочетания, которые описывают (хотя часто и завуалированно) специальные символы, которые вы хотите отобразить. Например, символ зарегистрированного товарного знака (™) можно отобразить с помощью шестнадцатеричного кода &#х02122у десятичного кода &Я8482; или мнемоники &trade;.
Обратите внимание, что все три варианта обозначения сущностей начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Не забывайте о символьных сущностях, когда вам понадобится использовать специальные символы на своих страницах. На рис 16 2 показано несколько распространенных специальных символов.
ПРАКТИКУМ
Попробуйте создать внеш юою ссылку на страницу шипи. tu3.org/TR/ html5/ text-level semantics, html. Создайте вну тристраничную ссылку с идентификатором the-a-element на той же странице.
cj> Ссылка: wdpg.ю/2/16-2-3
317
Дополнительные HTML-элементы
Символ	Ш естнадцате-ричнын код	Десятичный вод	Мнемоника	Название
11	8#х0022;	8*34;	8quot;	Двойная кавычка (универсальная)
&	8#х0026;	8*38;	Samp;	Амперсанд
<	8#х003с;	8*60;	81t;	Знак «меньше»
>	&#х003е;	8*62;	&gt;	Знак «больше»
с	R-f;		iCentj	
£	8#х00аЗ;	8*163;	Spound;	Знак фунта
©	8#х00а9;	8*169;	8copy;	Знак авторе koi оправа
	8*х00ае;	8*174;	&reg;	Зарегистрированный товарный знак
X	8#x00bd;	8*189;	8fracl2;	Дробь — одна вторая
ё	8#х00е9;	8*233;	Seacute;	Буква «е» с акутом
—	8#х2014;	8*8212;	8mdash;	Длинное (Em) тире
► Рис. 16.2. Некоторые специальные символы HTML5 и их коды с мнемониками
ПАМЯТКА
Добавив стро ку <meta charset>“utf-8"> в разделе заго ловка страницы, можно будет прямо в коде вводить такие символы, как тире (-) и символ копирайта (&). Для ввода тире нужно на жать сочетание клавиш Alt+0151 в Windows или Option +Shift +- (дефис) в macOS, например.
Для удобства работы с символьными сущностями HTML я создал специальный онлайн-инструмент. Прочитайте следующий раздел, чтобы узнать, как получить к нему доступ и как его использовать.
ИНСТРУМЕНТ HTML5 ENTITY BROWSER
В HTML5 доступно около 150и символьных сущностей, поэтому неудивительно, что две из самых больших проблем, связанных с использованием симольных сущностей, — эго необходимость знать, какие символы доступны, и поиск нужною символа Столкнувшись с этими проблемами много раз, я решил создать инструмент HTML5 Entity Browser, который упорядочивает символьные сущности по категориям (так легко просмотреть доступные символы) и допускает их поиск (чтобы быстро найти нужный специальный символ). Получить доступ к нему можно следующим образом
1. На сайте песочницы Weo Design Playground (https7/webdesign-playground.io/2) нажмите кнопку Menu (Меню) и :.ыберите пункт HTML5 Entity browser (в разделе Tools (Инструменты)).
2 В раскрывающемся списке Choose the entity category you want to browse выберите категорию искомой сущности. Приложение отфильтрует список сущностей отобразив только относящиеся к выбоанной категории (рис. 16 3).
318
Комментирование кода
HTML5 Entity Browser
Use this tool to crowse the tut set ol UTMLS entities. Cither select the category you went to Drowse, or enter a search string The resulting entities aopear on me ngnt along with tnelr descriptions, entity names, and hex and decimal codes.
select a cateaory
Cnoose the entity category you want tO O'Orrtl
arrows
LEFTWARDS ARROW
Name. Alan,
Hex A»021W>,
Oechna Vew2
RIGHTWARDS ARROW
Name Amr
Hex AwtiM
Гмгмч $.rrs—;_____
LEFT RIGHT ARROW Name Aharr. Hex Atxulhn Oedmal: Atasad; __
NORTH WEST ARROW Name Anwar He> AbtMifS Cmtum WS$ae
Start" me entities
Type your entity search text*:
£
•you can enter all or part or me entity name or desenptton. vol> can a'so locate speahc entries oy entering a hex or decimal node.
SOUTH EAST ARROW Name Asear Her AFX02IE8 Decxma AMMO .EmWARDS ARROW WITH STROKE
A-A. Name Anian не. uhmim Am ЦаНПУААиъ WAVt ARROW___________________
esj| Irms Ar и "
UPWARDS ARROW Noma Suarr, Hex &»xOai»l; Oectmj AtotM DOWNWARDS ARROW Nome Sain Hex Ms*I1S3: Deems ASSESS. UP DOWN ARROW Nrurw Svl" Hex. АМИ195; DecmS Ы№97 NORTHEASTARROW Name Anson Hex ttxOFWT. One*™» A»wM
SOUTH WEST ARROW
Nsrre sawarr
Hex AfxOVIW;
j«rj l.w,'
RIGHTWARDS ARROW WTTH STROKE
_/4 r jn.au Hex tftoeito, । лтоз
LEFTWARDS rwo HEADED ARROW
ff— NnftT ALan . U™. ium.u._________
► Рис. 16.3.
В интерфейсе HTML5 Entity Browser выберите категорию для упорядочения списка сущностей, как показано на рисунке или выполните поиск нужных символов
3 Чтобы выполнить поиск сущности, в текстовое поле Type your entity search text:, введите полное или часть названия сущности либо ее описание на английском языке
Если нужно быстро найти конкретную сущность, то можно ввести ее шестнадцатеричный или десятичный код
КОММЕНТИРОВАНИЕ КОДА
Комментарий — это фрагмент текста, который, будучи расположенным в HTML- или CSS-файле, пропускается браузером, поэтому не показывается при отображении страницы Такое поведение может показаться странным, но у комментариев есть несколько хороших вариантов применения
•	Можно добавлять заметки для себя в определенных позициях кода страницы Например, это может быть комментарий наподобие «Здесь будет размещен логотип, когда он будет закончен».
•	Можно добавить пояснительный текст, описывающий отдельные части страницы. Если у вас ест ь раздел шапки страницы, то можно добавить перед ним соответствующий комментарий, например «Начало шапки»
•	Можно пропустить проблемные разделы страницы. Если у вас есть раздел, который не работает должным образом, или ссылка, ведущая в никуда то можно закомментировать соответствующий код (окружить символами комментариев), чтобы избежать проблем в браузере и для пользователя, пока проблема не будет решена.
ВНИМАНИЕ!
Текст коммента рия не отобража ется в браузере, но его сможет просмотреть любой человек, открывший исходный код страницы. Поэтому не помещайте в ком  ментарии кон фиденциальную информацию.
319
Дополнительные HTML-элементы
• Можно добавить уведомление об авторских правах или иную информацию для тех, кто просматривает исходный код HTML.
Чтобы превратить текст в комментарий, окружите его тегами комментариев HTML. Перед комментарием пишется <! - -, а после него -->, как показано ниже-
<!-- Это комментарий -->
РЕЗЮМЕ
•	Чтобы создать ссылку на локальный файл в том же каталоге, в качестве значения атрибута href тега <а> укажите имя файла если файл в другом каталоге, го вам необходимо указать перед именем файла имя каталога.
•	Чтобы создать внутристраничную ссылку, в тег локации ссылки добавляется атрибут id Затем в качестве значения атрибута href тега <а> указывается значение id, предваряемое знаком решетки (#).
•	Чтобы отобразить на странице специальный символ его можно ввести непосредственно, если это допускается, либо указать его сущность десятичный код. шестнадцатеричный код или мнемонику. Все сущности начинаются с амперсанда (&) и заканчиваются точкой с запятой (;).
•	Чтобы добавить в код комментарий, его текст нужно окружить сим юлами < ! - - и -->
Глава 17
Буйство красок в веб-дизайне
В этой главе
•	Основы цветопередачи.
	Как цвет используется в каскадных таблицах стилей.
	Окрашивание элементов.
•	Окрашивание фона.
	Создание цветовых градиентов.
В CSS есть все необходимые инструменты для окрашивания заголовков основного текста, ссылок и фона В этой главе вы узнаете, как пользоваться такими инструментами и как с помощью специальных приемов CSS создавать цветовые градиенты, благодаря которым ваши страницы будут вызывать чау-эффект
321
Буйство красок в веб-дизайне
ПРОФИ
С помощью 256 значений каждого из трех основных цветов вы можете смешать более 16 млн цветов.
ПРОФИ
При равных значениях красного, зеленого и синего цветов получаются оттенки серого. При меньших значениях основных цветов получаются более темные оттенки серого, а при больших — более светлые.
ТЕОРИЯ ЦВЕТА
Представляя ваши тоскливые возгласы, скажу, что я не буду забрасывать вас занудными академическими подробностями Да. о теории цвета написаны целые талмуды, но вам не понадобится разбираться в оптике и преломлении света, чтобы создавать красивые привлекающие взгляд веб-страницы. Нам нужно усвоить только два момента: как гармонично сочетать цвета и как они формируются. Первый момент рассматривается в разделе «Выбор гармоничных цветов» этой главы, а о втором поговорим прямо сейчас
Создать любой цвет можно с помощью двух методов Первый такой можно смешать три основных (первичных) цвета — красный (Red), зеленый (Green) и синий (Blue), поэтому этот метод иногда называют методом RGB Художники смешивают цвета на палитре, а в цифровой среде цвета получаются из смеси числовых значений, от 0 до 255 (или в процентах от 0 до 100) для каждо! о из т рех цветов Меньшее значение соответстзует меньшей интенсивности цвета, и наоборот.
В табл 171. перечислены деаять распространенных цветов и соответствующие значения красного, зеленого и синего
► Таблица 17.1. Значения красного, зеленого и синего для смешивания девяти распространенных цветов
Название	Красный	Зеленый	Синий	Цвет
Красный	255	0	0	
Зеленый	0	255	0	
Синий	0	0	255	
Желтый	255	255	0	
Пурпурный	255	0	255	
Голубой	0	255	255	
Черный	0	0	0	
Серый	128	128	128	
Белый	255	255	255	
Как видно из табл 17.1, если введено значение только одного цвета (отличное от 0), то получается чистый цвет, а если два или три значения, то оттенок. Чтобы вы поняли процесс смешивания, я создал короткую анимацию на сайте Web Design Playground. Нажмите кнопку Menu (Меню) и выберите пункт RGB Visualizer (в разделе Tools (Инструменты)) или перейдите непосредственно по адресу wdpg.io/2/rgbvis Вы увидите, как три круга — красный, зеленый и синий — медленно
322
Теория цвета
сближаются, а затем частично перекрывают друг друга Наблюдая их наложение, показанное на рис. 17.1, обратите внимание на четыре момента
•	в результате наложения красного и синего цветов получается пурпурный,
•	при наложении красного и зеленого получается желтый,
•	наложение зелено! о и синего дает голубой цвет,
•	при наложении всех трех цветов получается белый.
► Рис. 17.1.
На сайте песочницы Web Design Playground нажмите кнопку Menu (Меню) и выберите пункт RGt? Visualizer чтобы увидеть анимацию наложения трех кругов, в результате чего получаются смешанные цвета
Цвет в Интернете бесплатен. В черном тексте на белом нет ничего плохого, но другие цвета не только добавят странице драматизма, но и поспособствуют выстраиванию иерархии содержимого.
Эрик Шпикерманн
Второй метод создания цвета предполагает введение числовых значений трех характеристик называемых тоном, насыщенностью и светлотой, поэтому данный метод иногда называют методом HSL (от англ hue, saturation, lightness (intensity) — «тон», «насыщенность» и «светлота»).
• Тон - эта величина (более или менее эквивалентная понятию «цвет») определяет направление зектора цветности (в градусах) на цветовом круге со значениями от 0 до 359 (рис. 17.2). Малые значения указывают на положение -.(близи красного цвета (красный цвет — 0 градусов), а более высокие проходят через желтую, зеленую и синюю к фиолетовой части спектра
323
Буйство красок в веб-дизайне
► Рис. 17.2.
Тон обозначает положение на цветовом круге начиная с 0 (красный), далее 120 (зеленый) и 240 (синий)
Тон = 120 (зеленый)
Тон = О (красный)
•	Насыщенность — процентное значение, которое определяет чистоту данного цвета. Значение насыщенности 100 % означает, что цвет кристально чист Как показано на рис 17 3. уменьшение значения приводит к увеличению примеси серого, при значении 0 % цвет становится полностью серым
► Рис. 17.3.
Насыщенность — это мера чистоты цвета или степень присутствия в нем серого Цветовой круг на оис 172 имеет насыщенность 100 % Чем ниже процент насыщенности, тем более серым будет цвет
Насыщенность = 67 % Насыщенность = 33 % оо
•	Светлота — это значение тоже выражается в процентах и показывает, насколько светлым или темным получится цвет Как видно из рис. 17,4. при малых значениях цвет темнее (при 0 % получается черный цвет), а при более высоких — светлее (при 100 % получается белый цвет).
324
Окрашивание с помощью CSS
Светлота = 75 %
Светлота = 25 %
► Рис. 17.4.
Светлота определяет, насколько темным или светлым будет цвет Цветовой круг, показанный ранее на рис 17.3, настроен на 50 % светлоты Более высокие значения светлоты позволяют получить более светлые цвета, а более низкие — более темные
Какой метод использовать? От вет зависит от различных факторов. В случае работы с одним цветом проще использовать модель RGIh Если же необходимо выбрать гармоничные оттенки (например, такие, которые являются комплементарными или близкими по оттенку), то лучше использовать модель HSL. Прежде чем принимать решение, необходимо узнать особенности окрашивания элементов с помощью CSS
ОКРАШИВАНИЕ С ПОМОЩЬЮ CSS
Подчеркивая важ1 юсть цвета не только в мире таблиц стилей, но и вообще в веб-дизайне, CSS предоставляет по меньшей мере полдюжины способов определения такой, казалось бы. простой характеристики, как цвет Каждый способ найдет свое применение, поэтому в следующих уроках вы познакомитесь со всеми ними
Урок 17.1. Указывание цвета с помощью значений красного, зеленого и синего в функции rgb() Тема: функция rgb() с^> Ссылка: wdpg.io/2/17-l-C
Выше я сказал, что можно определить любой из более чем 16 млн оттенков, указав значение от 0 до 255 для красного, зеленого и синего цвете» Один из способов реализации такой формулы в CSS — функция rgb(), показанная на рис. 17.5.
325
Буйство красок в веб-дизайне
Красный (0-255)	Синий (0-255)
„	rgb (красный, зеленый, синий')
► Рис. 17 5. Чтобы
сформулировать цвет из красного,	4—'у—7
зеленого и синего компонентов,
можно использовать функцию rgb()	Зеленый (0-255)
Чтобы ее использовать в качестве красного зеленого и синего укажите числа от 0 до 255, чтобы определить соот вегствующие компоненты цвета. (Обратите внимание, что запятые указывать не обязательно, поэтому их можно опустить) Например чтобы создать фиолетовый цвет укажите число 128 в качестве красного 0 — зеленого и 128 — синего компонента В следующем примере показано, как с помощью CSS окрасить все заголовки hl з фиолетовый цвет.
► Пример	[“> Ссылка wdpg.io/2/17-l-l
В этом примере функция rgb() используется для окрашивания в фиолетовый цвет элемента hl.
ВЕБ-СТРАНИЦА
Royalty : A History
hi { *--------- ~	—- выбираем для форматирования
color: rgb(128, 0, 128); w элемент М-
}
Функция rgb() для установки
значения свойства color
<.hl>Royalty: A History</hl>
Помимо чисел, компоненты красного, зеленого и синего в функции rgb() можно указывать в процентах, где 100 % означает максимальную интенсивность цвета (что эквивалентно десятичному значению 255), а 0 % - наименьшую (что соответствует 0). В табл 17.2 приведена интерпретация содержимого табл. 171' десятичные значения заменены их процентными эквивалентами
326
Окрашивание с помощью CSS
► Таблица 17.2 Процентное соотношение красного, зеленого и синего компонентов для получения девяти оаспространенных црртов
Название	Красный	Зеленый	Синии	Цвет
Красный	100	0	0	
Зеленый	0	100	0	
Синим	0	0	100	
Желтый	100	100	и	
Пурпурный	100	в	100	
Голубой	0	100	100	
Черный	0	0	0	
Серый	50	50	50	
Белый	100	100	100	
Ниже показано объявление с процентными значениями для создания фиолетового цвета color: rgb(50%, 0, 50%)
Функция rgb() проста, но не особенно понятна интуитивно поэтому многие веб-дизайнеры отказываются от нее в пользу более интуитивной функции hsl(). о которой речь пойдет далее.
Урок 17.2. Указывание цвета с помощью значений тона, насыщенности и светлоты в функции hsl() Тема: функция hsl()
Ссылка: wdpg.i )/2/17-2-0
Если вы хотите применить конкретный цвет, то можно указать его с помощью значений тона, насыщенности и светлоты Для этого используйте CSS-функцию hsl() показанную на рис. 17.6
ПРАКТИКУМ
Попробуйте с помощью функции г go( Докрасить элемент в светлосерый цвет.
сф Ссылка-wdpq.io/2/17-1-3
ПРАКТИКУМ
Попробуйте с помощью функции г go () окрасить элемент в красный цвет.
сф Ссылка wdpgio/2/l 7-1-2
Тон (0-359)
Светлота (0-100 %)
hsl (тон, насыщенность, светлота')
Насыщенность (0-100 %)
► Рис. 17.6. Чтобы выбрать цвет с помощью значений тона, насыщенности и светлоты цвета, используйте функцию hsl()
327
Буйство красок в веб-дизайне
Передайте функции значение тона в виде числа от 0 до 359 значение насыщенности в процентах от 0 до 100 и значение светлоты также в процентах от 0 до 100. Повторяя пример с фиолетовым заголовком hl. покажу, как окоасить все заголовки hl в фиолетовый цвет с помощью функции hsl()
^Пример сф Ссылка: wdpg.io/2/17-2-1
В этом примере мы окрасим элемент hl в фиолетовый цвет, используя функцию hsl ().
Royalty: A History -^-элементм
*---'	------ Выдираем для форматирования
color: hsl(30H, 1И0%, 25%); элемент hl
Функция ItsIQ для установки значения свойства color
<hl>Royalty: A History</hl>
ПРАКТИКУМ
Попробуйте с помощью функции hsl() окрасить элемент в синий цвет.
сф Ссылка, wdpg.io/2/17-2-2
ПРАКТИКУМ
Попробуйте с помощью функции hsl () окрасить элемент в белый цвет.
сф Ссылка wdpg.io/2/17-2-3
Прежде чем переходить к следующему методу окрашивания элементов, мы поговорим об управлении уровнем прозрачности в CSS
Коротко о прозрачности
Обычно текст на веб-странице должен выглядеть контрастным и читаемым Но в некоторых случаях в целях придания странице визуально интересного вида, можно пожертвовать толикой читабельности, сделав текст слегка прозрачным Тогда фоновое содержимое (это может быть сплошной цвет, изображение или даже другой текст) будет проглядывать
Управлять уровнем прозрачности (также называемым непрозрачностью) текста можно с помощью функций rgba() и hsla() соответственно. Они используются аналогично функциям rgb() и hs 1(), но при этом указывается дополнительный, четвертый параметр — альфа-канал Он принимает числовое значение от 0.9
328
Окрашивание с помощью CSS
до 1.0, где 1.0 соответствует полностью непрозрачному тексту, а 0.0— полной его прозрачности (Как вариант, можно использовать функции rgb()n hsl()n просто передать им значение альфа-канала з качестве четвертого параметра.)
Краткий экскурс в шестнадцатеричный мир
Следующий способ управления цветом в CSS, о котором я расскажу, базируется на шестнадцатеричных значениях, в которых используется основание 16. а не 10, как в обычной десятичной системе счисления Если вы знакомы с шестнадцатеричной системой счисления, смело пропускайте этот подраздел; если же нет, то прежде, чем экспериментировать с цветом в CSS, кам стоит совершить небольшой, но необходимый экскурс в шестнадцатеричный мир
Шестнадцатеричные значения удобны, поскольку в них используются односимвольные представления для чисел от 0 до 15. В частности, для первых десяти значений используются символы от 0 до 9. как и в десятичной системе счисления, а для обозначения величин с 10 по 15 — буквы от А до F. На рис 17.7 показаны десятичные и шестнадцатеричные представления чисел от 0 до 15
ИНФОРМАЦИЯ
Чтобы узнать, как менять цвет элементов, управ ляя уровнем прозрачности, посмотрите в песочнице урок Changing the Transparency. izj> Ссылка: wdpg. ю/2/17-6-0
Десятичная система
1
► 0 1
Шестнадцатеричная система
23456789 10 11
23456789А В
12 13 14
С D Е
15
F
► Рис. 17.7. В шестнадцатеричной системе счисления для представления чисел от 0 до 9 используются цифры, как и в десятичной, а числа от 10 до 15 обозначаются буквами от Адо F
Для двузначных значений десятичное число состоит из двух частей слева — десятки, справа — единицы Число 10 можно прочитато как «один десяток и ноль единиц», а 36 — как «три десятка и шесть единиц». Двузначное шестнадцатеричное число тоже состоит из двух частей: слева — шестнадцатеричная часть, справа — единичная. Шестнадцатеричное число 10 можно прочитать как «одна шестнадцатеричная часть и ноль единиц» (что эквивалентно 16 в десятичной системе), а шестнадцатеричное число 5С — как «пять шестнадцатеричных частей и С (двенадцать) единиц» (что эквивалентно 92 в десятичной системе). На рис 17.8 показано несколько примеров.
329
Буйство красок в веб-дизайне
Один Шесть десяток единиц
16
Девять Две десятков единицы
Десятичная система
Одна шестнадцатеричная Ноль Две шестнадцатеричные Четыре Пять шестнадцатеричных Двенадцать часть	единиц части	единицы	частей	единиц
► Рис. 17.8 Подобно тому как двузначное десятичное число состоит из десятков слева и единиц справа двузначное шестнадцатеричное число состоит из шестнадцатеричных частей слева и единиц справа
Теперь, разобравшись с шестнадцатеричными числами (у вас ведь получилось7), вы можете применить полученные знания на практике, научившись использовать шестнадцатеричные числа для окрашивания элементов с помощью CSS
Урок 17.3. Использование шестнадцатерич ных значении RGB
Тема: шестнадцатеричные значения RGB г^> Ссылка: wdpg.io/2/17-З- О
Вместо функции rgb() с параметрами красного, зеленого и синего компонентов цвета можно использовать шестнадцатеричные значения CSS (рис. 179).
► Рис. 17.9. Цвет можно задать с помощью кода #ккззсс, где кк — шестнадцатеричное значение красного компонента, зз — зеленого, а сс — синего
Значение краем ин: (00- fl в шестнадцатеричной системе)
#ККЗЗСС
Значение зеленого (OO-ff в шестнадцатеричной системе)
Значение синего (OO-ff в шестнадцатеричной системе)
330
Окрашивание с помощью CSS
Шестнадцатеричные значения в модели RGb всегда начинаются со знака решетки (#) затем следуют двузначные шестнадцатеричные значения красного, зеленого и синего компонентов. (Если необходимо указать значение альфа-канала для управления прозрачностью, то используйте формат хккззссаа. где аа — двузначное шестнадцатеричное значение альфа-канала.) Для каждою шестнадцатеричного значения допустим диапазон от 00 до ff (Если вы используете формат #ккззссаа, то при #ккззсс00 цвет полностью прозоачен. а при #KK33ccff — полностью непрозрачен.) Поскольку эти значения состоят из трех шестнадцатеричных чисел, то их часто называют шестнадцатеричными триплетами В табл 17 3 перечислены шестнадцатеричныезначения RGB девяти распространенных цвете, показанных ранее в табл. 17.1 и 17.2
► Таблица 17.3 Шестнадцатеричные значения RGB девяти оаспространенных цветов
В следующем примере показано, как с помощью этою метода можно окрасить в фиолетовый цвет заголовки hl. Шестнадцатеричный эквивалент десятичного числа 128 равен 8© поэтому для фиолетового цвета красный компонент составит 80 зеленый - иа а синий — тоже 80
► Пример
с^> Ссылка: wdpg. io/2/17-3-1
В этом примере мы окрасим элемент hl в фиолетовый цвет, используя значение #800086
Royalty: A History . з„емеНты
331
Буйство красок в веб-дизайне
ы { -
color: #800080, }
Выдираем для форматирования элемент hi
Присваиваем свойству color значение #800080, означающее фиолетовый цвет
<hl>Royalty: A History</hl>
ПРАКТИКУМ
Попробуйте с по мощью шестнадцатеричного зна чения RGB окра сити элемент в синий цвет r"J> Ссылка: wdpg. ю/2/17-3-2
ПРАКТИКУМ
Попробуйте с помощью шестнадцатеричного зна чения RGB окра ситъ элемент в максимально светло-серый цвет.
с^> Ссылка-wdpg.ю/2/17-3-3
В ряде случаев код можно сократить. Если пары значений кк, зз и сс содержат одинаковые символы (например 00 бб или ff), то можно указать только один из повторяющихся символов в каждой паре Следующие два значения эквивалентны
#33ббсс
#3бс
Запутались7 Не волнуйтесь на сайте Web Design Playground есть онлайн-инструмент, с помощью которого легко выбрать нужный цвет и получить правильный CSS-код
Работа с палитрой цветов
Окрашивание с помощью кодов по модели RGB, значений HSL и шестнадцатеричных чисел удобно для компьютера, но с вязь между ними и конкретными цветами для человека не так очевидна Имена цветов звучат понятнее, но они есть у слишком малого количества доступных оттенков Упростить просмотр и выбор цвета, который будет использоваться на веб-странице поможет инструмент Color Chooser, доступный на сайте Web Design Playground Это палитра цветов, позволяющая выбрать желаемый цвет или сочетать любую комбинацию тона, насыщенности, светлоты и прозрачности Инструмент отображает не только сам цвет, но и соответствующий код функций rgb() (с точными значениями и процентами) и hsl(), а также шестнадцатеричное значение RGF и имя цвета Если настраивать уровень прозрачности, то вы увидите код функций rgba () (с точными значениями и процентами) и hsla(). Чтобы использовать палитру цветов, выполните следующие действия.
1. На сайте Web Design Playground нажмите кнопку Menu (Меню) и выберите пункт Color Chooser (в разделе Tools (Инструменты)) или перейдите непосредственно по адресу wdpg.io/2/colorchooser. чтобы отобразить палитру цветов (рис 1710)
2 Чтобы выбрать предустановленный цвет, щелкните на одном из образцов
332
Выбор гармоничных цветов
3.	Чтобы задать цг-ет собственноручно, введите в текстовое поле ниже код функции rgb(), hsl(), rgba(), hsla(), три шестнадцатеричных значения RGB или название цвета
4	Перетащите маркер на большом цветовом градиенте горизонтально. чтобы настроить насыщенность, или вертикально, чтобы задать светлоту.
5.	Перетаскивайте вертикальный ползунок, чтобы выбрать тон, и горизонтальный — чтобы настроить уровень прозрачности.
цвета
Color Chooser
ela1-d Took
Перетащите маркер, чтобы выбрать тон
 ММВ»
Hill lA
Поле для ввода
Предустановленные Перетащите ползунок,
Варианты значений выбранного цвета для CSS
Выбранный цвет
чтобы настроить
кода вручную
us* this cool to select a color and then see Its value In varousCSScoloicooes,including rgb() , hsl() , arrgghO, keyword (If appllcaole), as welt as rgb»() and h«la() if you change th* transparenry. click th* color palette below and then select youi color elements. The color appears, on the right along with its CSS codes
1.ЧЫ255, 140, 01 rgb(100k, 5Ы, 0в| hsl(13, ICC», Sot) *H8cOO darkoiange
Перетащите ползунок, чтобы настроить насыщенность Перетащите ползунок, чтобы настроить светлоту
прозрачность
► Рис. 17,10. Инструмент Color Chooser на сайте Web Design Playground позволяет выбрать цвет и скопировать его CSS-код
Теперь вы умеете окрашивать элементы страницы, но это лишь половина успеха. Плохо подобранные или неправильно примененные цвета могут ухудшить дизайн страницы. Н следующем разделе я расскажу о нескольких основных принципах эффективного использования цветов в дизайне веб-страниц.
ВЫБОР ГАРМОНИЧНЫХ ЦВЕТОВ
Количество доступных цветов чрезвычайно велико, поэтому у вас может возникнуть соблазн использовать на каждой странице десяток оттенков Однако излишняя пестрота может запутать пользователей и даже привести к зрительному утомлению Старайтесь использовать не более двух-трех цветов, а если этого недостаточно — то разные их оттенки.
333
Буйство красок в веб-дизайне
Выбирая цвета, подумайте об их психологическом воздействии на пользователей. Исследования показали, что холодные цвета, такие как синий и серый, вызывают чувство надежности и доверия Используйте их для придания странице делового вида. Для страниц, которые должны вызывать оживление, подойдут теплые цвета, например красный, желтый и оранжевый. — они передадут атмосферу праздника и есе-лья Для имитации безопасной, комфортной атмосферы попробуйте использовать коричневый и желтый цвета А эффект экологичности можно создать с помощью зеленого и коричневого цветов.
Наконец, необходимо подумать о сочетании цветов друг с другом Некоторые из них ожидаемо конфликтуют, и при совместном их использовании страница будет выглядеть ужасно К счастью у каждого цвета есть хорошо сочетающиеся между собой оттенки, в результате чего можно создать гармоничный дизайн, приятный для глаз Обратите внимание, гармоничный — не значит скучный! в зависимости от выбранных вами цветов результат может быть любым — от успокаивающего до возбуждающего, поэтому цветовая схема — это отражение посыла вашего сайта
К счастью, вам не нужно гадать и выбирать подходящие цвета Можно использовать приемы, описанные ниже
•	Комплементарные цвета находятся друг напротив друга на цветовом круге В рамках функции hsl () значения тона таких цветов находятся в 180 градусах друг от друга. Например, красный (hsl (0,100%, 50%)) комплементарен голубому (hs 1 (180, 100%, 50%)). Как пра-вило, I-, любой комплементарной цветовой схеме первый цвет используется на странице в качестве основного, а второй — для акцента, особенно элементов, на которые нужно обратить внимание пользователя, например кнопок Subscribe (Подписаться) или Buy (Купить) и подобных объектов, призывающих к действию
•	Близкие по оттенку цвета располагаются рядом друг с другом на цветовом круге. В рамках функции hsl() значения тона таких цветов находятся в 30 градусах и обе стороны друг от друга. Для красного цвета (hsl(0, 100%, 50%)) близкими по оттенку будут светло-коричневый (hsl(30, 100%, 50%)) и пуопурно-розовый (hsl(330, 100%, 50%)). Если вы предпочитаете меньший контраст (хотите, чтобы цвета были еще ближе друг к другу), го можно создать схожую схему, используя цвета, отстоящие друг от друга на 15 градусе14 Если вы выбираете схему с большим контрастом, то обычно лучше выбрать один цвет в качестве основного а два других использовать для кнопок, границ и других акцентируемых элементов
334
Вычисление цветовых схем
•	Триадные цвета — это три цвета, которые расположены на рав-ном расстоянии друг от друга на цвете зом круге В рамках функции hsl() значения тома таких цветоь находятся и 120 градусах в обе стороны друг от друга Если брать триаду на основе красною цвета (hsl(0, 100%, 50%)), то подойду г лаймовый (hsl(120, 100%, 50%)) и синий (hsl (240, 100%, 50%)) Триадные цвета, как правило, одинаковы в плане сочности, поэтому выглядят сбалансированными и гармоничными На многих сайтах с триадной цветовой схемой в один цвет окрашен фон страницы ио второй — содержимое и навигация, а в третий — границы и прочие акцентируемые элементы,
•	Разделенные комплементарные цвета. Эта схема похожа на комплементарную, только вместо противоположного цвета на круге вы выбираете варианты под углом 30 градусов в обе стороны от противоположного цвета. Для красно! о цвета (hsl(0, 100%, 50%)) отлично подойдут следующие разделенные комплементарные цвета зелено-голубой (hsl(150, 100%, 50%)) и сине-голубой (hs 1 (210, 100%, 50%)). При выборе такой схемы возьмите за правило использовать исходный цвет как основной, а два дополнительных — для оформления содержимого, навигации и акцентов
Сделать работу с показанными цветовыми схемами более удобной поможет инструмент Color Scheme Calculator, который выполнит все необходимые математические вычисления автоматически Он доступен на сайте Web Design Playground. Я расскажу об этом инструменте в следующем разделе.
ВЫЧИСЛЕНИЕ ЦВЕТОВЫХ СХЕМ
Если вы определились с основным цветом на своей странице, то вычислить дополнительные оттенки цветовой схемы довольно просто
•	Комплементарные цвета — прибавьте или вычтите 180 градусов тона.
•	Близкие по оттенку цвета — прибавьте 30 градусов тона для одного цвета и вычтите 30  радусов тона для друi ого.
•	Триадные цвета — прибавьте 120 градусов гона для одного цвета и вычтите 120 градусов тона для другого
•	Разделенные комплементарные цвета — прибавьте 180 градусов тона, а затем ^ычтите 30 градусов тона для одного цвета и прибавьте 30 градусов тона для другого
33S
Буйство красок в веб-дизайне
Если вы используете значения только модели RGB, то произвести вычисления будет довольно сложно. Не иолнуйтесь на сайте Web Design Playground я опубликовал калькулятор цветовых схем. Чтобы им воспользоваться, выполните следующие действия.
1	Нажмите кнопку Menu (Меню) и выберите пункт Color Scheme Calculator (в разделе Tools (Инструменты)) или перейдите непосредственно по адресу wdpg.io/2/colorcalc
2.	На вкладке Color Scheme (Цветовая схема) выберите подходящую цветовую схему Complementary (Комплементарная), Analogous (Близкая по оттенку), Triadic (Триадная) или Split Complementary (Разделенная комплементарная) Кроме того, доступна схема Monochrome (Монохромная), которая генерирует пять цветов с одинаковым тоном, но с разными значениями насыщенности и светлоты.
3.	На палитре цветов выберите исходный цвет. Можно щелкнуть на образце или ввести в текстовое поле шестнадцатеричное значение RGB или код функции rgb() (Другой вариант — двести название цвета или код функции hsl().) Калькулятор отобразит соответствующие цвета схемы с шестнадцатеричными значениями RGB а также кодом функций rgb() и hsl() для каждого цзета (рис. 17.11).
V* Cetaf ScfWM Catewtotor М

а о г, * а Э ।
WLH DESIGN PLATOHCHJND
ймн 1 -ш  Related Tools
Select a color acheme type:
О Complementery
•Analogous
О Triadic
О spirt Complementary Monochrome
Select an Initial color.
/ 
«fttOO rqb(255, 2», 0) n»l(60, tOCt, SOt)
*80ff0G rgb(128, 25S, 0) haJ(90, 100», Sot)
• rtei-O rgb(25S, 128, 0) nal(30, JOOS, SOt)
милом.»
► Рис. 17.11. Используйте калькулятор цветовых схем на сайте Web Design Playground чтобы сгенерировать цветовую схему для своего сайта
336
Применение цветовых градиентов
Окрашивание в сплошные цвета — это замечательно, но можно поднять веб-дизайн на более высокий уровень, используя специальную цветовую технику, называемую градиентом о которой пойдет речь в следующем разделе
ПРИМЕНЕНИЕ ЦВЕТОВЫХ ГРАДИЕНТОВ
До сих пор мы использовали только сплошные цвета. Они были светлее, темнее или даже прозрачнее, но оставались сплошными Но вы можете оформлять элементы страницы, используя несколько градиентных цветов Градиент — это сочетание двух или более цветов. в котором один цвет постепенно (а иногда и быстро) переходит в другой. При разумном использовании градиенты — эффективный способ сделать геб-страницу визуально интересной и запоминающейся. Прежде чем приступить к работе с CSS вам необходимо учесть следующие моменты
•	Градиенты — это изображения, которые браузер генерирует самостоятельно
•	Градиенты можно использовать только в качестве фона, хотя и фоновые изображения поддерживает широкий спектр элементов.
•	Доступны два типа градиентов
•	линейный переходит от одного цвета к другому по прямой линии.
•	радиальный переходит от одного цвета к другому от одной точки наружу в форме эллипса или круга.
В следующих двух уроках вы познакомитесь с CSS-кодом, лежащим в основе линейных и радиальных градиентов
Урок 17.4. Создание линейного градиента
Тема: функция linear-gradient()
сф Ссылка: wdpg i-j/2/17-4-0
Чтобы создать линейный градиент, к свойству background-image элемента. который вы оформляете, применяется функция linear-gradient(). На рис 1712 показан общий синтаксис, который следует использовать.
Значения цвета
► Рис. 17.12. Чтобы создать т	линейный градиент,
linear-gradient(yao/j, цвет![%], цвет2[%] и т. п.) используйте функцию
Zlinear-gradientO с параметрами угла и контрольными точками
Значение в градусах или ключевое слово	цвета
337
Буйство красок в веб-дизайне
ПРАКТИКУМ
Создайте линейный градиент под углом 60 градусов. В качестве первого цвета используйте тон 191 с насыщенностью 100 % и светлотой 50 %; в качестве второ го — тот же тон, но с насыщенностью 25 % и светлотой 15 %.
Ссылка;
wdpg.io/2/17-4-3
Значение угла может быть представлено числом от 0 до 359. за которым следует единица deg или ключевым словом to за которым следует название горизонтального (left или right), вертикального (top или bottom) или диагонального направления (top left, top right, bottom left или bottom right).
Контрольные точки цвета (ивет1 цвет2 и т. д.) могут быть представлены любыми значениями цвета, которые вы изучили ранее в этой главе Процентное значение определяет положение контрольных точек цвета — мест перехода, где заканчивается предыдущий цвет и начинается следующий. Первая контрольная точка по умолчанию установлена в положение0%(то есть е начало), а последняя — в положение 100% (то есть в конец), поэтому указывать эти значения не требуется
В следующем примере показан пустой элемент div, отформатированный с помощью линейного градиента.
► ПриЛСвр	Ссылка: wdpg.io/2/17-4-1
В этом примере мы отформатируем элемент div, добавив в качестве фона линейный градиент с переходом от желтого к синему.
div {
Резервное правило для (малораспространенных) браузеров не поддерживающих градиенты
background-color: blue;
background-image: linear-gradient(to oottom, yellow, blue);
height: 175px;
width: 100%;
--—' Правила для настройки размера элемента div
Линейный градиент с переходом сверху вниз
от желтого к синему
Элемент div
<divx/div>
338
Применение цветовых градиентов
Обратите внимание, что в примере я сначала задаю сплошной цвет фона, а затем применяю градиент. Правило background-coloi— резервный вариант для браузеров, которые не поддерживают градиенты (например. Internet Explorer 9 и более ранние версии). Такие браузеры отображают фоновые цвета, но игнорируют градиенты Все современные браузеры поддерживают градиенты, поэтому только устаревшие и почти не встречающиеся у пользователей старые версии браузера Internet Explorer требуют указания такого правила
Если вы создаете градиент из трех и более цветов; то необходимо указать, где должен заканчиваться каждый цвет и начинаться следующий Без этого браузер скомпонует градиент самостоятельно с переходами на разных расстояниях Если указать три цвета, то переход среднего цвета будет выполнен в позиции 50 %, на полпути между первым (0 %) и третьим (100 %) цветами В следующем примере рассмотрим линейный градиент, в котором второй цвет сменяет предыдущий чуть раньше
ПРАКТИКУМ
Создайте линейный градиент с переходом от левого верхнего угла к правому нижнему. Выберите темно-голубой #76a5af как начальный цвет и сине-голубой #0?3763 как финальный.
Ссылка; wdpg.io/2/17-4-2
ПРАКТИКУМ
Подберите два оттенка, которые хорошо сочетаются с темно-фиолетовым цветом #674ea7 в цветовой схеме «близкие по оттенку цвета'-. Создайте линейный градиент с переходом всех трех цветов из правого нижнего угла в верхний левый.
Е^> Ссылка wdpg.io/2/17-4-6
► Пример ф Ссылка: wdpg.io/2/17-4-5
В этом примере показан элемент div, отформатированный с помощью трехцветного линейного градиента, в котором средний цвет (белый) сменяет предыдущий раньше стандартной позиции (25 %).
г	Резервное правило для (малораспространенных)
background-color: blue; браузеров, не поддерживающих градиенты background-image: linear-gradient(tn top right, red, white 25%, blue); , e , height: 175px; П?авила width: 1И0%; РЯЗЛЛеРй элем*н™ }
Линейный градиент с переходом из левого нижнего угла в верхний правый, от красного к белому цвету в позиции 25 %, а затем к синему
Элемент div
<divx/div>
339
Буйство красок в веб-дизайне
Итак, мы разобрались с линейными градиентами Но с помощью CSS можно создавать и радиальные В следующем уроке вы узнаете как это сделать
Урок 17.5. Создание радиального градиента
Тема: функция radial-gradient()
сф Ссылка: wdpg.ю/2/17-5-0
Чтобы настроить радиальный градиент, свойству background-image элемента назначается функция radial-gradient() с соответствующими параметрами. На рис. 1713 показан общий синтаксис
► Рис. 17.13.
Определение радиального градиента с помощью функции radial gradientO с указанием формы, радиуса позиции и контрольных точек цвета
Круг (circle)	Начальная
или эллипс (ellipse) позиция фигуры
radial-gradient(t/>op^a, радиус at позиция, контрольные-точки)
I
Позиция завершения последнего цвета
ПРАКТИКУМ
Попробуйте создать интересные повторяющиеся фоновые узоры с помощью линейных градиентов и CSS-свойства background-size Еф Ссылка; wdpg io/2/17-4-7
ПРАКТИКУМ
Создайте линейный градиент с переходом слева направо и пятью цветами. Пять цветов (и их контрольные точки].
#ffff00 (0%), V05clff /20%Л #274е13 (50%/ #05clff (80%) U #f ff f 00 (100%J.
сф Ссылка: wdpg..o/2/17-4-6
Ферма может быть кру। ом — circle (по умолчанию, поэтому можно опустить) или эллипсом — ellipse Радиус — это пара ключевых слов указывающая сторону или угол элемента, где должен прекратить распространяться последний цвет Допустимые значения ближайшая сторона (closest-side), дальняя сторона (farthest-side), ближайший угол (closest-corner) и дальний угол (farthest-corner) Позиция определяет начальную точку фигуры, это может быть пара координат по осям X и У (например, 45рх 100рх) или пара ключевых слов, объединяющая горизонтальную позицию (left center или right) и вертикальную (top. center или bottom). Значения цвета в контрольных-точках такие же, как и для линейного градиента
По умолчанию в качестве радиуса используется значение f arthest-corner, а в качестве позиции — значение center center (которое может быть сокращено до center) Самое простое правило для создания радиального градиента выглядит как radial-gradient(u0eml, цвет2) и генерирует центрированный круговой градиент, переходящий от цвета! к цвету2 до дальнего угла элемента В следующем примере показан пустой элемент div с фоном в виде радиального градиента.
340
Применение цветовых градиентов
► Пример сф- Ссылка: wdpg.io/2/17-5-1
В этом примере мы отформатируем элемент di v, используя радиальный градиент от желтого к синему.
Резервное правило для (малораспространенных} div {	р браузеров; не поддерживающих градиенты
background-color: yellow;
background-image: radial-gradient(ellipse farthest-corner at left top, yellow, blue);	X
height: 2вчрх;
width: 100%;
Правила для настройки	\
размера элемента div	I
Радиальный градиент с переходом из левого верхнего угла в нижний правый ом желтого к синему цвету
<divx/div>
Элемент div
Инструмент для генерации градиентов
Градиенты — одни из самых интересных СЗЗ'Эффектон, но пои этом они весьма трудоемкие в них используются различные ключевые слова, значения цветов и положения контрольных точек. Чтобы упростить процесс создания градиентов на веб -страницах, я добавил на сайте Web Design Playground специальный инструмент для генерации различных градиентов По мере создания градиента вы будете видеть как результат, так и кросс-платформенный CSS-код. который можно скопировать и вставить в свой проект.
Чтобы использовать инструмент для генерации градиентов, выполните следующие действия
1. На сайте Web Design Playground нажмите кнопку Menu (Меню) и выберите пункт Gradient Construction Kit (в разделе Construction Kits (Конструкторы)) или перейдите непосредственно по адресу wdpg. ю/2/kits/g rad ient.
341
Буйство красок в веб-дизайне
2. С помощью переключателя выберите тип градиента который необходимо создать, линейный (Linear) или радиальный (Radial).
Элементы управления изменятся и соответствии с выбором Так, на рис 1714 показаны элементы управления для настройки линейного градиента
Related Tools
Select a gradient type:
*> Linear о Radial
Select a linear gradient direction:
Alternatively, enter a specific angle (0 to 359):
0 dn'wrO
Select the gradient colors and stops:
First:
Last.
Location:
Add a Stop
► Рис. 17.14 С помощью инструмента Gradient Construction Kit на сайте Web Design Playground можно очень быстро создать линейный или радиальный градиент
5. Настройте параметры выбранного градиента — линейного или радиального Так, чтобы выбрать направление линейного градиента. следует нажать кнопку с соответствующей стрелкой или гнести нужный угол.
4 Для каждой контрольной точки нажмите кнопку Color (Цвет), а затем на появившейся палитре выберите нужный цвет
•	Чтобы выбрать предустановленный цвет, щелкните на одном из образцов в лезой части палитры цветов
•	Чтобы задать собственный цвет, в текстовом поле введите (на выбор) код функции rgt>(), hsl(), rgba(). hsla(), шестнадцатеричное значение по модели RGB или название цвета.
•	В большом цветовом поле перетащите маркер по горизонтали, чтобы настроить насыщенность, или по вертикали, чтобы установить светлоту
342
Резюме
•	С помощью вертикального ползунка выберите тон, а с по мощью горизонтального — уровень прозрачности Когда закончите настраивать градиент, нажмите кнопку Choose (Выбрать) или Close (Закрыть).
В правой части окна инструмента Gradient Construction Kit вы увидите готовый градиент и соответствующий CSS-код
Независимо от того что «ы используете сплошные цвета или градиенты, ваш сайт однозначно будет выглядеть лучше, если вы откажетесь от унылых черно-белых оттенков в пользу более красочного дизайна, передающего индивидуальность и эстетику вашего проекта.
РЕЗЮМЕ
•	Помимо указания названий (имен) цветог. о которых рассказывается в главе 4. существует пять способов задать цвет в CSS: можно использовать функции rgb(), hsl(), rgba(). hsla() и шестнадцатеричное значение RGB
•	Окрасить текст элемента можно с помощью свойства color
•	Для окрашивания фона элемента используется свойство background-color
•	Применить линейный градиент в качестве фона элемента поможет функция 11near-gradient(). радиальный градиент можно создать с помощью функции radial-gradient().
Глава 18
Улучшение веб-текста с помощью типографики
В этой главе
	Управление шрифтами.
	Работа со шрифтами Google.
	Оформление абзацев и отдельных слов текста на веб-странице.
Рассказать секрет великолепнео веб-дизайна? Точнее, хотите ли вы знать один компонент дизайна, который присущ практически всем лучшим сайтам? Скрытый от посторонних глаз секрет, которым обладает почти каждый выдающийся сайт, можно г.ыоазить всего двумя словами важна типографика'
344
Управление шрифтами
Типографика — стили, применяемые для улучшения разборчиво сти, читабельности и внешнего вида текста, — это секретный соус магия Интернета, Если вы видите сайт, который обладает эстетической привлекательностью, то существует вероятность что большая часть этой привлекательности связана с использованием на сайте шрифтов, их размеров и начертаний интервалов и прочих типографских нюансов Сайт обладает текстовой привлекательностью.
Если вы хотите сделать такими же привлекательными свои вебстраницы, то вам достаточно запомнить эти два слова важна типографика! Важны шрифты Важны размер и начертание шрифта Важны интервалы, выравнивание и отступы. К счастью как вы увидите в этой главе, в CSS есть множество типографских инструментом, которые помогут украсить ваш текст. Разумеется, у вас не будет такого уровня контроля, как в текстовом редакторе, но свойств и значений CSS будет достаточно, чтобы показать всему миру, что вы заботитесь о тексте своей веб-страницы.
УПРАВЛЕНИЕ ШРИФТАМИ
Чтобы поднять типографику сайта на следующий уровень, нужно ыйти за рамки стандартных шрифтов о которых я говорил в главе 4. и использовать мощные концепции стеков шрифтов и веб-шрифтов
Урок 18.1. Управление стеками шрифтов
Тема: свойство font-family
i_^> Ссылка: wdpg.  >/2/18-1-0
В главе 4 я рассказывал что в качестве значения свойства font-family можно указать несколько семейств шрифтов, разделив их запятыми, в виде так называемого стека шрифтов Зачем указывать несколько семейств шрифтом'? За редким исключением, вы не можете быть уверены, что на устройстве пользователя установлен выбранный вами системный шрифт К примеру, системный шрифт без засечек Helvetica установлен на зсех компьютерах Мас. но доступен лишь на 7 % ПК под управлением операционной системы Windows. Аналог ично системный шрифт с засечками Cambria установлен на более чем 83 % ПК с Windows, но доступен только на 35 % компьютерах Мас. Опираясь на стек шрифтов, браузер проверяет первое семейство, чтобы узнать, установлено ли оно. Если нет, то он пробует следующее семейство шрифтов в стеке, и этот процесс продолжается до тех пор пока браузер не найдет установленный шрифт из числа указанных Если таковой не будет найден, то поможет аналогичное семейство стандартных шрифтов добавленное в конец стека Например, если вы подобрали для сайт а системные шрифт ы с засечками, то добавьте стандартный шрифт serif в конец стека.
ИНФОРМАЦИЯ
Информацию о проценте установки на компьютерах, а также рекомендуемые стеки многих популяр ных системных шрифтов можно найти на сайте u’ww.cssfonl-stack.com.
345
Улучшение текста с помощью типографики
К сожалению, нет более надежного варианта кроме как указать в стеке стандартный шрифт, хотя некоторые системные шрифты установлены не менее чем на 90 % компьютере'- Мас и Windows К системным шрифтам с засечками относятся Arial, Arial Slack, Tahoma. Trebuchet MS и Verdana Шрифты с засечками — Georgia и Times New Roman. Моноширинный шрифт — Courier New
Формирование стека шрифтов заключается и следующей стратегии указания семейстг шрифтов:
•	выбранный системный шрифт;
*	системный шрифт, похожий на выбранный;
•	похожий шрифт, распространенный как на компьютерах Мас. так и Windows;
•	стандартный шрифт того же стиля
Приведу пример
font-family: "League Spartan", Futura, Tahoma, sans-serif;
В следующем примере мы создадим два стека шрифтов один для элемента h3 и по одному для элементов р и 11.
^Пример сЦ> Ссылка: wdpg.io/2/18-1-1
В этом примере показан стек шрифтов с засечками, применяемый к элементу h3, а также стек шрифтов без засечек, применяемый к элементам р и II
ВЕБ-СТРАНИЦА
Элемент h3	— Элемент р
People of Collar 4-'
The adjectives white-collar and blue-collar are familiar to most of us, but there are a few more whimsical variants that you might not have heard of:
•	Black-and-blue-coila- Football players	Л
•	Grey-collar. Employees who perform both white- and blue-collar tasks I
•	Green-collar. Environmentalists	Элементы li
•	Open-collar: People who work at home
•	Steel-collar: Rooots	J
Элемент форматируется c ммошм стека шрифтов с засечками
h3 {
font-family:
}
P, li {
font-family:
}
"Lucida Bright", Georgia, serif;
Tahoma, Helvetica, Arial, sans-serif;
Элементы p и li форматируется с ммощье стека шрифтов дез засечек
346
Управление шрифтами
<h3>₽eople of Collar</h3>
<P>
The adjectives <i>white-collar</i> and <i>blue- collar</i> are familiar to most of us, but here are a few more whimsical variants that you might not have heard of: </p> <ul>
<li>Black-and-blue-collar: Football players</li>
<li>Green-collar: Environmentalists</li>
<li>Grey-collar: Employees who perform both white- and blue-collar tasks</li>
<li?Open-collar: People wno work at nome</li>
<li>Steel-collar: Rohots</li>
</ul>
Поиведу несколько рекомендаций, которые следует учитывать при написании стека шрифт©! для веб-проекта.
*	Если вы выбрали менее распространенный системный шрифт, то поместите его в начало стека Если вы укажете его после шрифта, который установлен, скажем, на 99 % компьютеров, то менее популярный шрифт будет использоваться оеже.
•	По возможности старайтесь соблюдать однотипность шрифтов в стеке К гримеру, не добавляйте в один стек узкий шрифт Anal и относительно толстый Verdana.
•	Всегда завершайте стек шрифтоь стандартным шрифтом того же стиля
Использование веб шрифтов
Подбирать системные шрифты по своему вкусу — простой способ улучшить типографику сайта по сравнению с применением стандартных шрифтов используемых в браузере по умолчанию Но с этим способом связаны две очевидные проблемы: разнообразие системных шрифтов сильно ограничено и вы не можете быть уверены, что выбранный вами системный шрифт установлен на компьютере пользователя. Последнее — большая проблема, поскольку вы не можете с уверенностью знать, как ваша веб-страница будет выглядеть на устройстве каждого пользователя Если ны верите в важность типографики (а это должно быть так), то такая неопределенность послужит серьезным препятствием для дизайна
К счастью, можно устранить это препятствие, внедрив в свои страницы веб-шрифты Это файлы шрифтов, которые размещены в Интернете и на которые ссылаются в специальном CSS-правиле (5)font-face Браузер учитывает это правило для загрузки файлов
347
Улучшение текста с помощью типографики
’еб шрифтов, тем самым гарантируя что асе польза атели увидят одинаковое оформление текста на вашей веб-странице
Существует два способа разместить веб-шрифты
•	использовать сторонний сервис;
•	разместить файлы шрифтом на собственном сайте
В следующих двух уроках вы узнаете подробности, а также преимущества и недостатки каждого метода.
Урок 18.2. Использование стороннего сервиса шрифтов
Тема: элемент link
сф Ссылка: wdpg.io/2/18-2-0
ВНИМАНИЕ!
Обратите внимание, что чем больше шрифтов вы добавляете, тем медленнее будут загружаться ваши веб страницы. Ссылайтесь только на те шрифты, которые абсолютно необходимы. Помимо обычного начертания, на большинстве вебстраниц исполъ зуется только курсивное и полужирное.
Самый поостой способ внедрить веб-шрифты — сослаться на шрифт, размещенный на стороннем сайте. Существует множество сервисов шрифтов, например Fonts com iwww.fonts.com) и Adobe Fonts (https:// fonts adobe.com). В большинстве случаев можно приобрести шрифт или оформить подписку с ежемесячной платой, получив доступ к широкому разнообразию шрифтов Множество начинающих веб-дизайнеров пользуются сервисом Googie Fonts (https://fonts.gooqle.com), на сайте которого доступны сотни бесплатных веб-шрифтов
Основное преимущество стороннего ресурса заключается в чистоте права на использование веб-шрифтов. Шрифты — предмет интеллектуальной собственности, и использовать их. в том числе на сайте, можно, только получив разрешение от создателя Сервисы шрифтов имеют необходимые лицензии, поэтому с их шрифтами не возникнет никаких проблем.
гг Сервисы веб-шрифтов... берут на себя львиную часть работы по лицензированию и хостингу, оставляя вам возможность заниматься тем, что у вас получается лучше всего: созданием удивительных и прекрасных сайтов.
Дан Иден
Основной недостаток сторонних сервисов заключается в том. что файлы шрифтов хранятся на удаленном сервере, поэтому в некоторых случаях загрузка шрифтов может потребовать дополнительного времени Чем больше шрифтов используемся, тем. дольше загрузка Однако в большинстве крупных сервисов шрифтов реализованы оптимизированные механизмы доставки, поэтому задержки загрузки шрифтов обычно не ощущаются.
348
Управление шрифтами
Процедура подключения веб-шоифтов различается в зависимости от сервиса, но в целом выглядит примерно так.
1	. Выберите желаемое семейство шрифтов на сайте сервиса шрифтов
2	Настройте семейство, добавив дополнительные начертания такие как курсив полужирный или полужирный курсив
3	. Скопируйте код элемента (элементов) link, сгенерированный сервисом шрифтов, и вставьте его в раздел заголовка своей веб-страницы (то есть между тегами <head> и </head>) перед элементом link со ссылкой на ваш CSS файл (или перед тегом <style>, если вы используете внутреннюю таблицу CSS).
По ссылке в добавленном коде браузер загрузит с сервера сервиса CSS файл, содержащий необходимый код шрифта Ниже показаны элементы link, сгенерированные сервисом Google Fonts для шрифта Lato (400 — обычное начертание а 700 — полужирное)
clink rel="preconnect" href="https://fonts.googleapis.com"> <link rel=”preconnect" href-"https://fonts.gstatic.com" crossorigin>
clink href="https://fonts.googleapis.com/
css2?family=Lato:ital,wght@0,
40и;1,400;1,700&display=swap" rel="stylesheet">
4	Добавьте шрифт в стили
Следующее свойство предписывает браузеру использовать семейство шрифтов Lalo для всех абзацев обычного текста (если указанный файл шрифта не может быть загружен, то используется стандартный шрифт без засечек)'
Р {
font-family: Lato, sans-serif;
}
ЧАВО
Почему Google предоставляет три элемента link?
Первые два связаны с установкой соединения с сервером Google. Таким образом, когда браузер начнет интерпре -тировать содержимое третьего элемента link, в котором перечислены необходимые шрифты, они буоут загружены гораздо быстрее.
► Пример
ВЕБ-СТРАНИЦА
с£> Ссылка: wdpg.io/2/18-2-1
В лом примере показаны два фрагмента текста. Первый вынесен за пределы элемента р, поэтому в нем используется стандартный шрифт браузера, а второй содержится в элементе р, поэтому отформатирован с помощью семейства шрифтов, указанного в CSS-свойстве.
This text just uses the browser's default font.
This text resides within an HTML paragraph, so it uses the font specified in the style definition for the p tag.
p {
font-family: Lato, sans-serif; }
К элементу p применяется семейство шрифтов Lato
349
Улучшение текста с помощью типографики
Предписываем браузеру скачать шрифт с сервера Google
<link rel="preconnect“ href ="https://-fonts.gc.jglcapis.com''> clink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<11nk href="https://fonts.gc ->gleapis.com/ css2?family-Lato:ital,wght|00,
400; 1,400;1,700&display=swap" rel="stylesheet">
поэтому
This text just uses the browser's default fort.	уется^
стандартный
<p>	шрифт
This text resides within an HTML paragraph, so it uses tne -font specified in the style definition for the p tag.
</p>
Этот текст размечен как элемент р. поэтому отформатирован шрифтом Lalo
Вместо стандартных и веб-шрифтои можно опубликовать необходимые файлы на собственном сайте, о чем пойдет речь в следующем уроке
ПРАКТИКУМ
Попробуйте на сайте Google Fonts сгенерировать код элемента link оля таблицы стилей с определением только одного шрифта Merriweather, с обычным на чертанием. Напишите правила CSS, позволяющие от форматировать с помощью этого шрифта весь текст на странице, и добавьте стандартный похожий шрифт в качестве запасного варианта.
сф Ссылка wdpg.io/2/18-2-2
Урок 18.3. Использование собственных файлов шрифтов
Тема: правило @font-face
tzj> Ссылка: wdpg.io/2/18-3-0
Использовать сторонний сервис шрифюв — самый простой способ отойти от шрифтов по умолчанию и сделать свои страницы привлекательными Однако не всем веб-дизайнерам нравится, что внешний вид их страниц зависит от удаленного сервера, который может работать медленно или вообще не быть доступным. В таких случаях дизайнеры проявляют самостоятельность и размещают файлы шрифтов на том же сервере, где находится и их сайт
К сожалению, за преимущества в скорости и доступности, присущие такому способу приходится расплачиваться сложностью настройки Если работа со шрифтами, размещенными на сторонних серверах, сводится к указанию в элементе link
350
Управление шрифтами
ссылки на удаленную таблицу стилей, то размещение шрифтов на своем сервере значительно повышает уровень сложности
Один из усложняющих факторов — лицензирование Большинство коммерческих шрифтов из-за лицензии нельзя использовать бесплатно Прежде нужно приобрести лицензию на их использование в Интернете (если такая форма лицензироьания вообще предполагается). Как вариант, можно поискать бесплатный шрифт для размещения в Интернете
В качестве последнего варианта приведу несколько сайтов с коллекциями шрифтов:
•	Befonts (https://befonts.com),
•	Fontspring (www.fontsprmg.com).
•	Font Squirrel (www.fontsquirell.com);
•	Открытая библиотека шрифтов (https://fontlibrary.org).
Еще один фактор сложности — формат шрифта Все современные браузеры поддерживают формат WOFF2 (Web Open Font Format 2.0), но найти шрифты в нем бывает непросто Обычно ситуация такая, вы скачиваете лицензионный файл шрифта но в формате TrueType Font (TTF) или OpenType Font (OTF), Такие файлы, как правило, имеют больший размер поэтому их нужно преобразовать в WOFF2 Это довольно сложная процедура, поэтому многие пользователи используют инструмент Webfont Generator на сайте Font Squirrel (https://www.fontsquirrel.com/ toois/webfont-generator), который преобразует скачанные файлы шрифта в другие форматы
Как вариант, можно воспользоваться инструментом google-weofonts-helper (https://gwfh.mranftl.com/fonts) позволяющим преобразовать и скачать выбранные шрифты Google в формате WOFF2 (а также в первой версии формата WOFF, совместимой с устаревшими браузерами типа Internet Explorer 9). Перед загрузкой шрифтов не забудьте нажать кнопку Modern Browsers (Современные браузеры) на странице скачивания, чтобы упростить генерируемый CSS-код
Скачав файлы в формате WOFF2 (а также WOFF, если требуется), добавьте CSS-код необходимый для использования шрифтов на вашем сайте Он содержит правило ^font-face, а общий синтаксис выглядит следующим образом.
 Названия шрифтов с пробелами @font-face (	> нужно заключить в кавычки
•font-family: 'Название шрифт_а';
src: ur,l( ’файл_шрифта. woff 2') format('woff2' url('файл_шрифта.woff') format('woff');
}
Чтобы применить правило @f ont -f асе, укажите его значение свойства font -family в качестве значения свойства font-family элемента, который необходимо оформить
ЧАВО
Всегда ли локальный шрифт загружается быстрее размещенного на удаленном сервере?
Вовсе нет. Многие, сервисы шрифтов поддерживают очень быстрые сети доставки содержимого (CDN), поэтому зачастую усаленные шрифты загружаются быстрее локальных.
ВНИМАНИЕ'
Шрифты — предмет интел лектуальной собственности, и относиться к ним следует соответствующим образом. Прежде чем размещать шрифт на своем сайте, убедитесь, что у вас есть лицензия на его использование в личных и/или коммерческих целях (в зависимости от вашего сайта).
351
Улучшение текста с помощью типографики
^Пример 1=> Ссылка: wdpg.io/2/18-3-1
В этом примере мы настроим правило @font-face на использнание шрифта Bree Serif и применим его к элементу ul.
ВЕБ-СТРАНИЦА
Содержимое элемента ul
Prefer to get your word origins on rhe web? Looking to kill some time at work? Wondering when this incessant questioning will end? Here are some firn websites that'll give vour clicking finger a workout-
•	Online Etymology Dictionary (www ctymonlme com)
•	Oxford English Dicrionnnj (www .ted.cnm)
•	The Phrase Finder (www phrases.org uh)
•	The Word Detective (www word-detective com)
•	Word Spy (www wordspii cam)
•	World Wide Words (www worldwidcwords arg)
(Sfont-face {
font-family: Bree Serif';
src: url('/fonts/breeserif.woff2') format('woff2'), url('/fonts/breeserif.woff') format('woff');
Название шрифта
из свойства font-family используется для применения шрифта к элементу
} ul
}
font-family: 'uree Serif';
<р>
Prefer to get your word origins on the weo? Looking to kill some time at work? Wondering when this incessant questioning will end? Here are some fun websites that'll give your clicking finger a workout:
<p>
<ul>
<li>Online Etymology Dictionary (https://www.etymonline.com)</li>
<li>Oxford English Dictionary (https://www.oed.com)</li>
<li>The Phrase Finder (https://www.phrases.org.uk)</li>
<li>The Word Detective (http://www.word-detective.com)</li>
<li>Word Spy (https://www.wordspy.com)</li>
<li>World Wide Words (https://www.worldwidewords.org)</li>
</ul>
При указании ссылок к файлам в правиле ^font-face следует учитывать несколпко моментоь
•	Если файлы шрифтов находятся в том же каталоге, что и CSS-файл (или HTML файл, содержащий CSS-код), то каталог указывать не нужно url('breeserif.wuff2')
•	Если файлы шрифтов находятся в подкаталоге папки с CSS-файлом (или HTML-файлом), то перед именем файла следует указать имя каталога и слеш (/):
url('fonts/breeserif.woff2‘)
352
Форматирование текста
• Если файлы шрифтов находятся в подкаталоге корневого каталога сайта то перед именем файла нужно указать слеш (/), имя каталога, а затем еще один слеш (/):
url( '/fonts/breeserif woff2')
ФОРМАТИРОВАНИЕ ТЕКСТА
Выбрав шрифт (а может, и несколько) и научившись управлять их размерами, вы приблизились к созданию типографически приятных веб страниц Но. чтобы ваши страницы выделялись из общей массы, вам нужно учесть еще несколько CSS-свойств, связанных с форматированием текста.
ПАМЯТКА
Еспи вы используете оба формата. и WOFF2, и WOFF, то для достижения наилучших результатов кросс платформенной поддержки в пра виле ^font-face укажите формат WOFF2 перед форматом WOFF.
Урок 18.4. Малые прописные буквы
Тема: свойство font-variant
ljJ> Ссылка: wdpg.ю/2/18-4-0
Когда необходимо, чтобы текст на странице был заметен, чаще всего применяется полужирный шрифт или курсив Однако в рамках неординарного подхода попробуйте использовать малые прописные буквы. Это полностью прописной стиль текста в котором строчные буквы преобразуются в прописные, но меньшего размера, чем обычные прописные (Текст набранный прописными буквами, остается без изменений.)
Чтобы придать тексту вид малых прописных букв, нужно свойству font-variant задать значение small-caps.
► Пример
Ссылка: wdpg.io/2/18-4-1
В этом примере мы используем свойство f ont-variant: small-caps, чтобы имена собственные в тексте отображались малыми прописными буквами.
Movable гуре was invented by JOHANNES GlTENBERu in the mid-fifteenth century. The first printing press m England was set up by William Caxton m 1476.
span {
font-variant: small-caps; }
Правило для элемента span для изменения оформления строчных букв
Имена собственные в элементах span z отображаются малыми прописными буквами \
Movable type was invented by <span>Johannes Gutenberg</span> in the mid-fifteenth century. The first printing press in England was set up by <spajT>hiilliam Caxton</span> in 1876.
353
Улучшение текста с помощью типографики
ПРОФИ
Еще один способ изменить регистр текста — использовать свойство text-transform. Задайте ему значение lowercase, если нужно, чтобы текст был набран строчными буквами, или uppercase, еспи все буквы должны быть прописными. Кроме того, можно использовать значение capitalizet, что бы каждое слово в тексте начиналось с прописной буквы.
нряд ли вы часто будете использовать малые прописные буквы, но в ряде случаев они могут стать эффектным элементом дизайна
Еще один дизайнерский прием, который вы будете (я рекомендую) часто использовать, — управление высотой строки, о чем я расскажу в следующем уроке.
Урок 18.5. Настройка высоты строки
Тема: свойство Ime-height
сф Ссылка: wdpg io/2/18-5-0
Придать тексту веб-страницы классный вид поможет прием управления высотой строки, то есть так называемым невидимым блоком строки, используемым браузером для размещения строки текста Края блока строки располагаются чуть выше самого высокого символа в строке и чуть ниже самого низкого
Высота строки настраивается с помощью CSS-свойства line-height. Типы значений, которые можно присвоить этому свойству, приведены в табл 18 1
► Таблица 1S.1. Значения поддерживаемые свойством line-height
Значение Описание
number	Числовое значение, указываемое без единицы измерения.
Вычисляемая высота строки равна текущему размеру шрифта, умноженному на указанное числи
length	Числовое значение, введенное с единицей измерения, например елп
percentage Процентное значение Вычисляемая высота строки равна текущему размеру шрифта, умноженному на указанное процентное значение
normal	Ключевое слово предписывающее браузеру автоматически наароить
высоту строки относительно текущего размера шрифта
Высота строки очень сильно влияет на читаемость текста, это отлично видно на рис 18 1 В тексте слева высота строк равна 0 75, в результате чего они расположены слишком близко друг к другу В тексте справа высота строк равна 2,25, в результате чего они расположены слишком далеко друг от друга и читабельность текста уменьшается. Для текста в центре высота строк равна 1,5, благодаря чему результат выглядит очень хорошо
Типографика — это двумерная архитектура, основанная на опыте и воображении и руководствующаяся правилами и удобством чтения.
Герман Цапф
354
Форматирование текста
"Vertical space is metered in a different way |to horizontal space]. You must choose not only irk overall measure - the depth of the column pr page - but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next
—Robert Bnnghurst
"Vertical space is metered m a different way [to horizontal space]. You must choose not only the overall measure - the depth of the column or page - but also a basic rhythmical unit This unit is the leading, which is the distance from one baseline to the next "
—	Robert Bnnghurst
'‘Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure - the depth of the column or page - bur also a basic rhylhmical unit. This unit is the leading, which is the distance from one baseline to rhe next."
—	Robert Bnnghurst
► Рис. 18.1. Если высота строки слишком мала (слева) или слишком велика (справа), то текст тяжело читать
► Пример iz> Ссылка wdpg.ю/2/18-5-2
В этом примере свойству line-height элемента р присваивается значение 0.9, что приводит к так называемому плотному интерлиньяжу Испробуйте использовать нормальный интерлиньяж с высокой строки примерно 1,4, а также своОодное значение, указав высоту строки 1,75 и выше.
<
=т
х	The name Iте height is often used synonymously with leading
S	(it's pronounced tedding). This term comes from i he movable
[3	rvpe profession, where ty pesetters often use a strip of lead Io sei
uh	the amount of space between two lines of text.
CD
p {
font-size: 1.5em;
line-height: 0.9;
}
Зтоечаеил зд ндсилройку Высоты линки элемента р для создания плотного, нормального или свободного интерлиньяжа
<Р>
The name <i>line height</i> is often used synonymously with <i>leading</i> (it’s pronounced <i>ledding</i>). This term comes from the movable type profession, where typesetters often use a strip of lead to set the amount of space between two lines of text.
</p>
355
Улучшение текста с помощью типографики
Теперь будучи знакомыми со всеми основными CSS-свойствами, связанными со шрифтами, вы готовы изучить удобное сокращенное свойство, позволяющее оформлять текст с помощью одного объявления В следующем уроке вы узнаете все необходимое
Урок 18.6. Краткая нотация свойства font
Тема: свойство font cj> Ссылка: wdpg.ю/2/lo-6-0
Как неоднократно упоминалось в этой книге касательно типографики в CSS учитывается шесть основных характеристик' семейство, размер, полужирное и курсивное начертания, малые прописные буквы и высота строки Эти компоненты представлены CSS-свойствами -font-family, font-size, font-weight, font-style, font-variant и line-height соответственно Для удобства можно применить некоторые или сразу все эти свойства в одной строке кода с помощью краткой нотации свойства font, синтаксис которой показан на рис 18 2.
Курсив	Малые прописные	Высота строки
font: font-styLe font-weight font-variant font-size/Line-height font-famity
Вес шрифта (полужирный)
Размер шрифта
Семейство
► Рис. 18.2. С помощью свойства font можно настроить до шести характеристик шрифта сразу
В этом синтаксисе повторяется все, что вы изучили ранее, однако вам необходимо учитывать следующие моменты
*	Можно указывать некоторые или все свойства, при этом обязательно нужно указать значения font-size и font-family в поиведенном выше порядке.
•	Если не указывать какое-либо свойство, то будет использоваться его значение по умолчанию
•	Значения свойств font-style, font-weight и font-variant можно указывать в любом порядке главное — перед значением свойства font-size
•	Возможно, вы обратили внимание на часть синтаксиса, связанную с размером шрифта/высотой строки Эта косая черта заимствована из традиционной типографики где в качестве сокращения можно сказать, что текст «сверстан 12/18», то есть используется шрифт размером 12 пунктов и с высотой строки 18 пунктов
356
Форматирование текста
► Пример
гф> Ссылка: wdpg.Ю/2/1В-6Т
В этом примере мы настроим свойство -font и применим его к элементам di v, dt и span.
ВЕБ-СТРАНИЦА
ascender
f	П1е par I of a tall lowercase letler such as b or h that extends above lowercase
/	icrtrrs <siich ляп and c
-► baseline
/ / The invisible line upon which lowercase characters such аз о and w appear to sit.
► descender
тементы a I	The pan of a lowercase letter such as g or у that extends below the в aseuke.
ieucKnc/	4
\\	(pronounced tedding) See песнг. ◄----------—_____	1
line height	1
\	The distance between the BAStuxtt of two adjacent lines of text. x. \
"► x-height	\\
The height of a typeface's lowcrcascxT	'Л
Элементы span
div {
font: bold 1.5em/1.3 Lora;
}
dt {
font: italic l.lem/1.25 Lora; } span {
font: }
small-caps lem Lora;
Элемент div отформатирован с помощью noлу жирного шрифта Lora размером 1,5 ем, высота строки равна 1,3
Элемент dt отформатирован с помощью курсивного шрифта Lora размером 1,1 ем, высота строки равна 1,2.5
Элемент span отформатирован с полющью малого прописного шрифта Lora размером 1 ем
clink href="https://fonts.googleapis.com/
css?family=Lora:400,400i>700,700i" rel="stylesheet">
<hl>Typography</hl>	>—. _	,	.
<div>A Glossary	of	Terms</div> Элемент div	отформатирован
<dl>	полужирным	шрифтом Lora
<dt>ascender</dt>	размером 1,5 ем и с высотой
<dd>	^Р°ки
The part of a tall lowercase letter such as <i>b</i> >r <i>h</i> that extends above lowercase letters such as <i>a</i> and <i>c</i>.
Элемент dt отформатирован курсивным шрифтом Lora размером 1,1 ем и с высотой строки 1,2.5
Этом элемент встраиваем в страницу шрифт Lora с сервера Google Fonts
357
Улучшение текста с помощью типографики
</dd>
<dt>baseline</dt>
<dd>
The invisible line upon which lowercase characters such as
<i>o</i> and<i>w</i> appear to sit.
</dd>
The part of a lowercase letter such as <i>g</i> or <i>y</i> that extends Delow the <span>baselinec/span>.	—
</dd> <dt>leading</dt> <dd>	Элеменгм span отформатирован малым прописным шрифтом Lora размером 1 ет
(pronounced <i>leddingc/i>) See <span>line height</span>.
</dd>
<dt>line height</dt>
<dd>
The distance between the <span>baselines</span> of two adjacent lines of text.
</dd?
<dt>x-height</dt>
<dd>
The height of a typeface’s lowercase <i>x</i>.
</dd>
</dl>
Управление стеками шрифтов, подключение локальных или вебшрифтов. форматирование малых прописных букв и настройка высоты строки — теперь вы знаете достаточно чтобы оформить текст на своих страницах по самому лучшему разряду
РЕЗЮМЕ
•	°екомендуется использовать локальные или веб-шрифты, а не системные
•	Первым делом нужно определиться со шрифтом, который отражает смысл текста и общую идею страницы.
•	В качестве альтернативного способа подчеркнуть или выделить текст можно применить font-variant: small-caps
•	Настроить свободный (но не слишком) интерлиньяж между текстовыми блоками поможет свойство line-height
•	Уменьшить время работы позволит краткая нотация свойства font
Глава 19
Профессиональные приемы работы с CSS-селекторами
В этой главе
	Моть идентификаторов и универсальных селекторов.
	Расширенное управление стилями с помощью селекторов потомков, а также дочерних и родственных селекторов.
	Применение стилей с помощью комбинации двух или более селекторов.
	Профессиональные приемы форматировав11я: наследование, каскадирование и специфичность CSS.
На первый взгляд каскадные таблицы стилей просты гы задаете значения свойствам, объединяете их в поавило. а затем применяете это правило к элементу страницы. Несколько таких правил — и ваша страница прекрасна Но кажущаяся простота реализации деклараций и правил CSS — это лишь вершина айсберга В его скрытой части находятся сложность и динамичность. Эта глава служит введением в некоторые из самых мощных и практичных концепций CSS.
359
Профессиональные приемы работы
ИНФОРМАЦИЯ
Мой практикум WebDev содержит полный обзор всех селекто ров CSS с примерами: https:// webdevworkshop io/ cooe/selector-reference/.
ВНИМАНИЕ'
Как и имена классов, идентификаторы чувствительны к регистру
ПАМЯТКА
Как и в случае с именами клас сов, значение идентификатора должно начинаться с латинской буквы или с дефиса (-), за которым следует латинская буква, и мо жет содержать любую комбинацию латинских букв, цифр, дефисов (-) и подчеркиваний (_).
ИДЕНТИФИКАТОРЫ
В главе 7 вы познакомились с селекторами CSS. указывающими на объект страницы, который нужно отформатировать селектор {
с войство!: значение!;
свойство2‘. значение2;
}
Я уже рассказывал, что в качестве селектора в этом синтаксисе правила CSS может выступать имя HTML-элемента (селектор типа (тега)) или класса (селектор класса) На самом деле селекторов CSS гораздо больше Многие из них малоизвестны, а наиболее распространенные являются действительно мощными инструментами В уроках этой главы вы познакомитесь с пятью видами селекторов а начнем мы с идентификаторов
Урок 19.1. Использование идентификаторов
Тема: селектор #id
Ссылка: wdpg । >/2/19-1-0
R главе 16 я рассказал, что можно ссылаться на определенный элемент веб-страницы, добавив к нему атрибут id и поместив идентификатор в адрес ссылки. Кроме того, вы можете использовать идентификатор элемента для применения к нему стилей CSS Для этого во .нутренней или внешней таблице стилей введите идентификатор перед знаком решетки (#), чтобы создать селектор
«идентификатор {
свойство!: значение!;
свойство2: значение2;
}
В следующем примере показано, как работают идентификаторы.
► Пример
Ссылка: wdpg.io/2/19-l-l
В этом примере мы добавляем идентификаторы section-quote
и section-summary к элементам div и применяем к ним правила, используя соответствующие селекторы.
Metaphors tor New Words
We make metaphors Гог many ihinga, but when we make many metaphors Гог one thing, it says thut tiling ie important to us. We make metaphors for new words almost aS readily as we make new words.
S- id= "section-quote"
y>- id= "section-summary"
360
Идентификаторы
#section-quote { color: darkgray; font-size: 1.25rem; font-style: italic; text-align: right;
}
ftsection-summary { color: dimgray; font-size: l.Srem; font-weight: bold; text-align: center;
}
Правило для идентификатора section -quote
Правило для идентификатора section-summary
<hl>
Metaphors for New Words _	n
j hJ,	Элементу dw присвоен
<div id="section-quote"/	идентификатор section-quote
"Because in our brief lives we catch so little of the vastness of history, we tend too much to think of language as being solid as a dictionary, with a granite-like permanence, rather than as the rampant restless sea of metaphor which it is."<br>-Julian Jaynes	,	-
-I v>	- — Элементу div присвоен
.. . , „	..	,, идентификатор section-summary
<div id= section-summary >
We make metaphors for many things, but when we make many metaphors for one thing, it says that thing is important to us. We make metaphors for new words almost as readily as we make new words.
</div>
Теперь, когда вы знаете о селекторах классов и идентификаторов, вы можете задаться вопросом, какой из них лучше использовать Об этом мы поюморим в следующем подразделе
Что выбрать: классы или идентификаторы
Когда следует использовать идентификаторы, а когда классы? Задайте себе такие вопросы
•	«Будут ли стили, которые я хочу использовать, применяться только к одному элементу7»
Если да, то используйте для этого элемента селектор идентификаторов.
•	«Будут ли стили, которые я хочу использовать, применяться к разным элементам7»
Если да то используйте для каждого из этих элементов селектор классов
ВНИМАНИЕ!
Селекторы иденти фикаторов, будучи примененными к оониму элементу, усложняют сопровождение CSS-кода и устранение неполадок в нем. Вы поймете, почему так происходит, когда позже в этой главе я расскажу о специфичности CSS. Поэтому наилуч-олая практика — никогда не использовать селекторы идентификаторов.
361
Профессиональные приемы работы
♦	«Будут ли стили, которые я хочу использовать, применяться только к одному элементу сейчас, но в будущем могут быть применены к другим элементам?»
Если да. то используйте для этого единственного элемента селектор классов В дальнейшем вы всегда сможете применить селектор классов к другим элементам
ВЕБ-ГЕНЕАЛОГИЯ: РОДИТЕЛИ, ПОТОМКИ И БРАТЬЯ
Прежде чем. продолжить работу с селекторами, нужно совершить недолгий экскурс в иерархическую структуру веб-страницы, чтобы вы могли усвоить несколько ключевых понятий. На рис. 19 1 показана иерархия типичной веб-страницы.
► Рис. 19.1. Древовидная структура типичной веб-страницы
Эта (перевернутая) древовидная структура выглядит так.
•	Элемент html — корень структуры
•	У элемента html две основные ветви head и body
•	Элемент head имеет две ветви title и style
•	У элемента body три ветви1 элемент hl и два элемента р
•	Первый из элементов р имеет ветзь div
•	У зетви div две ветви р.
•	Вторая из ветвей р имеет ветвь section.
•	У ветви section две ветви р
362
Контекстные селекторы
Понять эту иерархию и систему селекторов вам помогут несколько полезных терминов.
•	Родитель — элемент, который содержит друюй (-ие) элемент (-ы). На рис 19 1 элемент html — родительский по отношению к элементам head и body а элемент div — родитель двух элементов р.
•	Прародитель — элемент, содержащий элементы второго уровня На рис 19.1 html — прародитель элементов title, hl и других, а элемент div — прародитель элемента section
•	Предок — элемент, который содержит уровень (уровни) элементов. На рис 191 элемент html — предок всех остальных элементов, а элемент body — предок элемента div и всех вложенных в него элементов.
•	Дочерний элемент содержится в элементе расположенном на один уровень выше него в иерархии То есть у дочернего элемента в структуре есть родитель Парис 191 элемент title-дочерний по отношению к head, a div — дочерний элемент содержащего его элемента р
•	Потомок — любой вложенный элемент в структуре, то есть у потомка обязательно есть предок На рис 19.1 элемент title -потомок элемента html. а все четыре элемента р - потомки содержащего их элемента div
•	Родственный — элемент, который находится на том же уровне вложенности, что и другой элемент На рис. 19.1 элемент hl и два элемента р — дочерние элементу body — между собой являются родственными Обратите --нимание. что родственный элемент, который расположен рядом с другим таким элементом, называется смежным
Все эти разговоры о родителях и детях, предках и потомках могут показаться ненужной абстракцией В чем же суть7 Дело в том, что эти понятия крайне чажны для понимания контекстных селекторов, о которых пойдет речь в следующих уроках
КОНТЕКСТНЫЕ СЕЛЕКТОРЫ
Теперь, когда вы запомнили термины из предыдущего раздела, поговорим о том, как на основе иерархии веб-страницы создать мощные правила CSS с помощью трех контекстных селекторов (названных так потому, что они определяют контекст элемента на веб-сгранице)
ПАМЯТКА
В терминологии CSS символ, ука зываемый между двумя элементами и служащий для формирования селектора (например, про бел, используе мый в селекторах этого раздела), называется комбинатором.
ВНИМАНИЕ'.
Селекторы потомков весьма эффективны, поскольку охватывают каждого потомка предка, независимо от уровня вложенности между ними в иерархии. Чтобы избежать неожиданных результатов в момент. когда необходимо отформатировать потомка, находящегося на один уровень ниже предка, используйте селектор дочерних элементов (рассматривается в уроке 19.3).
363
Профессиональные приемы работы
Урок 19.2» Комбинатор потомков
Тема: комбинатор х у
izj> Ссылка: wdpg.io/2/19-2-'J
Один из распространенных сценариев CSS — применение правила стилей ко всем элементам, содержащимся внутри некоего другого элемента (предка), то есть к его потомкам. Для этого используется комбинатор потомков указываемый между предком и потомком в виде пробела, как показано ниже'
Родительский элемент
?	Элемент, который необходимо
предок потомок { отформатировать
свойство!: значение!; ________ Стили, которые
свойство2: значение2;	необходимо применить
}
На странице может быть несколько элементов р те, что в начале, будут служить для краткого описания страницы, а еще несколько элементов р — содержать основной текст Если вы хотите оформить основной текст иначе, чем текст описания, то стандартный селектор элемента р не подойдет Лучше заключите все элементы р основного текста в элемент div. а затем выберите все элементы р с помощью следующего селектора div р
В следующем примере комбинатор потомков используется для оформления основного текста страницы.
Пример сф- Ссылка wdpg.io/2/19-2-1
В этом примере селектор потомков div р используется для форматирования только тех элементов р, которые вложены в элемент div.
Weird Word Origins
ВЕБ-СТРАНИЦА
Welcome tc the always wonderful, sometimes weird, and often downright wacky world of word histones
Этот элемент p не является потомком div
Nevtr thought you’d hear adjectives. such as wacky and wetrd associated with the	л
history oi words? Think again, oh soon-to-be-evcn-wiserthan-you-arc-now reader!
The study of word origins isn't about memorizing technical term* or resurrecting dead languages or puzzling over parts of speech. Instead, it's all about telling stories.
The history of a word is a narrative, ptain and simple- where the word began, how it changed over lime, and how it gut where it is today Delightfully, these narratives are often full of plot twists, turning points, heroes and villains, and surprise endings.	у
Эти элементы p — потомки элемента div
364
Контекстные селекторы
body {
color: blue;
font-family: Verdana, sans-serif; font-size: 1.25rem;
}
div p {
color: #444;
font-family: Georgia, serif; — font-size: irem;
}
Смыли применяются ко всему тексту в теле страницы
Стили применяются толоко к элементам р, которые являются потомками элемента div
<h2>Weird Word Oigins</h2>
<P>
Welcome to the always wonderful, sometimes weird, and often downright wacky world of word histories</p> <div>
<P>
Never tnought you'd hear adjectives such as <i>wacky</i> and <i>weird</i> associated with the history of words? Think again, oh s< on-to-be-even-wiser-than-you-are-now reader! The study of word origins isn't about memorizing technical terms or resurrecting dead languages or puzzling over parts of speech. Instead, it's all about telling stories.
</p>
<P>
The history of a word is a narrative, plain and simple: where the word began, how it changed over time, and how it got where it is today. Delightfully, these narratives are uften full of plot twists, turning points, heroes and villains, and surprise endings.
</p>
</div>
Комбинатор потомков — мощный инструмент, поскольку нацелен на всех потомков предка, независимо от того, насколько глубоко в иерархии они вложены. Чтобы избежать неожиданных результатов, 'ыбирая потомка, вложенного на один уровень ниже предка, следует использовать комбинатор дочерних элементов о котором я расскажу в следующем уроке
ПРАКТИКУМ
Напишите правило, применяющее зеленый цвет и размер шрифта 1,25 ко всем элементам code, потомкам элемента div.
сф> Ссылка; wdpg.ю/2/19-2-2
365
Профессиональные приемы работы
ПРОФИ
Чтобы выбрать первый элемент родителя, используйте псевдокласс :first-child. Аналогично выбрать последний дочерний элемент родителя можно с помощью псевдокласса :last-child
Ссылка: wdpg.io/2/19-3-4
Урок 19>3. Комбинатор дочерних элементов
Тема: комбинатор х > у
Ссылка: wdpg.ю/2/19-3-0
Вместо того чтобы выбрать всех потомков определенного элемента часто требуется выбрать только его дочерние элементы. Для этого используется комбинатор дочерних элементов, обозначаемый символом «больше» (>), который указывается между родительским и дочерним элементами как показано в синтаксисе ниже:
ПРОФИ
Еще один мощный псевдо-класс дочерних элементов — :nrh-child(n), где вместо п указывается дочерний элемент. Например, псевдокласс :nth-child(3) выбирает третий дочерний элемент. С помощью псевдокласса : nth-child (odd) можно выбрать нечетные (первый, третий и т. д.) дочерние элементы, а с помощью :nth-child(even) —четные (второй, четвертый и т. д.).
Ссылка: wdpg.ю/2/19-3-5
Родительский элемент
родительский>дочерний {-ч свойство!: значение!; свойство?: значение?;
Элемент, который необходимо отформатировать
' х Стили, которые необходимо
применить
Ссылаясь на рис. 19.1. два дочерних элемента р элемента div можно отформатировать с помощью следующего селектора.
div > р
В следующем примере комбинатор дочерних элементов используется для оформления только тех элементов р. которые являются дочерними по отношению к элементу div
}
^Пример О Ссылка- wdpg.ю/2/19-3-1
В этом примере используется дочерний селектор di v > р, чтобы установить размер шрифта 1,25 ет и темно-зеленый цвет только для тех элементов р. которые являются прямыми дочерними элементами div.
Эти элементы p — дочерние по от ношению к элементу div
The Descendant Combinator
The Child Combinator
The First Child Pseudo-Class
The Sibling Combinator
Contextual Selectors
The Last С Mid Pseudo-Class V А ЭТИ элементы p — нет
The Nth Child Pseudo-Class 
366
Контекстные селекторы
р {
color: darkblue;
font-size: lrem;
font-weight: bold;
}
div > p {
font-size: 1.25rem; color: darkgreen;
}
Стили применяются ко всем элементам р
Стили применяются только к элементам р, которые являются дочерними по отношению к элементу div
<hl>Contextual Selectors</hl>
<.div>
<p>The Descendant Combinator</p>
<p>The Child Combinator</p>
<section>
<p>The First Pseudo-Class</p>
<p>The Last Pseudo-Class</p>
<p>The Nth Pseudo-Class</p>
</section>
<p>The Sibling Combinator</p>
</div>
Дочерние элементы р
Избирательное форматирование дочерних элементов и потомков — обычное дело в CSS, но вы можете также столкнуться с необходимостью форматирования родственных элементов находящихся на одном уоовне иерархии Об этом я расскажу в следующем уроке
Урок 19.4. Общий родственный комбинатор
Тема: комбинатор х ~ у
tz^ Ссылка: wdpg.ю/2/19-4-ь
Вместо того чтобы .-.ыбирать дочерние элементы или потомков, может потребоваться отформатиоовать элементы, находящиеся на одном с ними уровне. Для этого используйте общий родственный комбинатор, обозначаемый символом тильды (~). который указывается между целевым и родственными элементами, как показано в синтаксисе ниже
 Целевой элемент элемент ~ родственник { свойство!: значение!; свойство2: значение2;
Элемент, который необходимо отформатировать
'' Стили, которые необходимо применить
ПРАКТИКУМ
Если у вас есть нумерованный список, вложен ный в другой та кой же список, то с помощью комбинатора дочерних элементов отформатируйте вложенный список так, чтобы в нем использовались строчные буквы вместо цифр.
tzj> Ссылка wdpg ао/2/19-3-2
Согласно рис 19.1, можно отформатировать два элемента р — родственных по отношению к элементу hl — с помощью такого селектора hl ~ р
В следующем примере показано, как работает общий родственный комбинатоо.
367
Профессиональные приемы работы
^Пример Ссылка- wdpn io/2/19-4-1
В этом примере мы используем селектор hl ~ div, чтобы применить полужирный шрифт без засечек только к элементам div, которые являются последующими родственными элементами по отношению к элементу hl.
ВЕБ-СТРАНИЦА
Этот элемент div — родственный элементу hl, но расположен
передним
Эти элементы div не родственны элементу hl
Here's a quick look at the book's contents;
A Smart Vocabulary—Contents
Элемент hl
Chapter 1: Names of Things You Didn't Know Had Names
From the indentntion on your upper lip to the indentation on the/'^ bottoir of a wine bottle	.s'
Chapter 2 Making Word Whoopee -----------------"
Codswallop nincompoop, willy-nilly, and other w, nds that will bring a smile toyonr face.
Эти элементы div родственны элементу hl и расположены после элемента hl
div {
font-family: Georgia, serif; font-weight: normal;
}
Стили применяются ко всем элементам div
hl ~ div {
font-family: Verdana, sans-serif;
font-weight: bold; }
Стили применяются толско к элементам div — дратьям элемента hl
<div>
Этот родственный контейнер div расположен перед элементом hl
Последующие родственные элементы div
Here’s a quick ii ok at the book’s contents:
</div>
<hl>
A Smart Vocabulary-Contents
</hl>
<div>
Chapter 1: Names of Things You didn't Know Had Names
<div>
From the indentation on your upper lip to the indentation on the bottom of a wine bottle.
</div>
</div>
<div>
Chapter 2: Making Word whoopee
<div>
Codswallop, nincompoop, willy-nilly, and other words that will bring a smile to your face.
</div>
</div>
368
Комбинирование селекторов
CSS-селекторы, как и комбинаторы потомственных, родственных и дочерних элементов, полезны сами по себе, но их мощь возрастает, когда вы комбинируете их с другими селекторами. О том, как это делать, мы поговорим в следующем разделе
КОМБИНИРОВАНИЕ СЕЛЕКТОРОВ
CSS-селекторы — полезные инструменты, поскольку позволяют избирательно оформить содержимое веб-страницы. Указывая определенный класс или потомков элемента, вы получаете гораздо больше контроля над оформлением страницы А как быть, если нужно использовать сразу два селектора, например класса и потомка7 Другими словами, выбрать не элемент с определенным классом, а его потомков7 В табл 19.1 показано несколько способов комбинирования селекторов CSS.
► Таблица 19.1 Некоторые способы комбинирования селекторов
ПРОФИ
Чтобы выбрать лишь смежных родственников элемента, замените тильду символом -гыюс^: элемент + с.меж-ный_родственник (например, Ы + р/ Это смежный родственный комбинатор.
Ссылка wdpg ю/2/19-4-4
Пример	Описание
<div class="siaebar alert">	Применяет к элементу div классы sidebar и alert
р.footnote {стили}	Применяет стили к элементам р с классом footnote
р.footnote > а {стили}	Применяет стили к элементам а, дочерним по отношению к элементам р и относящимся к классу footnote
р.footnote a.external {стили}	Применяет сикли к элементам с классом external, которые являются потомками элементов р и относятся к классу footnote
frpayables-table li:nth-child(even) {стили}	Применяет правило к четным элементам li, которым присвоен идентификатор рау-ables-table
Раз уж я заговорил о комбинировании, то отмечу, что в CSS вполне допустимо применять одно правило стиля к двум или более селекторам Для этого нужно разделить селекторы запятыми, например, так
селекторА, селекторе { свойство!: значение!; свойство?: значение?;
}
369
Профессиональные приемы работы
Предположим что у вас есть класс pullquote который вы используете для оформления цитат в новостных статьях сайта, и класс sidebar, примененный к боковым панелям на страницах с руководствами Если эти два класса используют одно и то же правило то их можно обьединить
.pulIquote, .sidebar { color: #444; background-color: #ccc;
}
Вы часто будете комбинировать селекторы, поскольку это позволяет точно выбрать элементы, которые необходимо отформатировать Еще один способ выбрать конкретные элементы страницы — обратиться к ним с помощью псесдоэлементов CSS Звучит интригующе, но. как вы узнаете из следующего урока, это всего лишь еще один полезный прием CSS
ПАМЯТКА
Чтобы сгенерировать специальный символ, ука жите его шестнадцатеричный код, предваряемый обратным слешем (\). К примеру, вместо кода ' \026bf'; генерируется музыкальный знак диеза (»). Искать шестнадцатеричные коды символов удобно с помощью инструмента HTML5 Entity Browser (wdpg.io/ 2/charent/).
Урок 19.5. Псевдоэлементы ::before и ::after
Тема: псевдоэлементы ::before и "after
i Ссылка: wdpg.io/2/19-5-0
В CSS можно использовать объекты веб-страницы, которые официально не являются частью иерархии страницы, — псевдоэлементы Наиболее распространены псевдоэлементы ::before и ::after, которые используются для вставки контента соответственно до и после содержимого указанного вами элемента Б CSS такое содержимое называется сгенерированным, поскольку вы не вводите его сами, оно создается браузером автоматически Синтаксис выглядит так
Элемент веб-страницы
?	Определяет, куда
элемент' * before । after { помеи^аеплся с(гдеюж.имое content: значение;
стили содержимого	Содержимое которое
}	Ь	нужно вставить
Дополнительные стили, применяемые к добавляемому содержимому
Автоматически добавлять после каждого абзаца знак его окончания (5) поможет следующее правило.
р::after {
content: 5';
}
Один из наиболее распоостраненных вариантов применения псевдоэлемента :: before — замена стандартных маркеров в неупорядоченном списке на пользовательские В следующем примере показано как это сделать.
370
Комбинирование селекторов
ВЕБ-СТРАНИЦА
► Пример iz> Ссылка- wdpc io/2/19-5-1
В этом примере с помощью свойства list - style-type из элемента u 1 удаляются стандартные маркеры, а затем с помощью кода li:: before добавляются пользовательские символы — палец-указатель (шестнадцатеричный код 2б1е) и неразрывный пробел (шестнадцатеричный код 00а0).
Here are some interesting characters to use in place of the standard bullets:
Circled bullet: ®
Circled white bullet ©
 Rightwards arrow with loop: «+
Black star; ★
White star:
Triangle bullet: ►
----Символ пальца-указателя используется в качестве пользовательского маркера
1	Удаляем стандартный маркер
list-style-type: none; margin-left: 0; padding-left: Irem;	-—- Корректно форматируем
text-indent: -Irem;	пространство для маркера
'	— Добавляем палец-указатель
li:: before {	> и неразрывный пробел
content:'\261e\00a0';
color: red;
font-size: l.lem;
}
-—x форматируем пользовательский маркер
<div>
Here are some interesting characters to use in place of the standard bullets:
</div>
<ul>
<li>Circled bullet: &#x029bf;</li>
<li>Circled white bullet: &#x029be;</li>
<li>Rightwards arrow with loop: &#x021ac;</li>
<li>Black star: &#x©2605;</li>
<li>White star: &#x92606;</li>
<li>Triangle bullec: &flx2023;</li>
</ul>
371
Профессиональные приемы работы
ПРАКТИКУМ
Допустим, ваш сайт содержит ссылки на внешние ресурсы, находящиеся на другом сервере. Напишите правило CSS, которое автоматически добавляет значок для обозначения внешних ссылок по аналогии с «Википедией» (рис. 19.2). с_^ Ссылка wdpg.io/2/19-5-3
ПРАКТИКУМ
В CSS доступно свойство counter-increment, позволяющее настроить счетчик пунктов нумерованного списка. Если при своитъ свойству list-style-type элемента о1 значение попе, то с помощью псевдоэлемента ol:: before можно создавать пользовательские номера для списка.
Ссылка: wdpg.io/2/19-5-2
Раз уж я заговорил о псевдоэлементах, то стоит упомянуть псевдоэлемент : :first-letter для форматирования первой буквы текстового блока К примеру, код div: zfirst-letter {fontsize: 1.5rem; color: red;} задает первой букве каждого элемента div размер 1,5 rem и окрашивает в красный цвет Чтобы отформатировать первую строку текстового блока целиком, используйте псевдоэлемент ::first-line.
В этой главе вы уже познакомились с несколькими мощными селекторами CSS. а в следующем разделе узнаете о самом сильном из НИХ.
External links
• Official website й>
. CSSs’ at DMOZ
► Рис. 19,2. На сайте «Википедии>/ внешние ссылки отмечены специальным значком
СБРОС CSS-СТИАЕЙ С ПОМОЩЬЮ УНИВЕРСАЛЬНОГО СЕЛЕКТОРА
Универсальный селектор (*) применяется ко всем элементам на веб-странице, и такой подход к оформлению может показаться странным В конце концов, когда определенный набор стилей применяется к каждому элементу на странице9 Никогда. Дем не менее универсальный селектор полезен, когда речь идет о сбросе CSS — способе удаления стандартных стилей браузера, чтобы вы могли применить собственные, не беспокоясь о конфликтах с браузерными. Ниже показан базовый вариант CSS-нормализатора для сброса стилей
* {
box-sizing: border-box;
margin: 0;
Этот нормализатор присваивает свойству box-sizing значение border- box и обнуляет стандартные поля, установленные браузером по умолчанию (об этом говорилось в главе 9).
СТИЛИ: РАСПЛЕТАЕМ ПАУТИНУ
Большинство деклараций стилей и правил, с которыми вы работали до сих пор, действовали в полной изоляции. Вы задаете элементу hl размер шрифта, а элементу р - выравнивание, и браузер применяет эти два правила независимо друг от друга. Однако в реальном мире веб-дизайна такое взаимное дружелюбие встречается крайне редко. На всех веб-страницах, за исключением самых простых ваши стили обязательно будут взаимодействовать а иногда и конфликтовать друг с другом Это порождает хаос, но вы можете восстановить некое подобие порядка, поняв три ключевых механизма CSS наследование, каскадирование и специфичность
372
Стили: расплетаем паутину
Урок 19.6. Принципы наследования
Тема: наследование в CSS
Ссылка: /vdpg.io/2/l 9-6-0
В начале главы мы говорили о предках родителях, детях и потомках, поэтому вы не удивитесь, узнав, что в CSS есть метод передачи признаков от одного «поколения» к другому. Такой метод называется, что вполне уместно наследованием и означает, что для определенных CSS-свойств если родительский элемент отформатирован неким образом, то его потомки и дочерние элементы автоматически форматируются таким же образом.
Что значит «определенных свойств»? Потомки наследуют многие CSS-свойства, но не все Если в предыдущем примере настроить границу родительского элемента div. то этот стиль границы не будет применен ни к одному из его потомков, поскольку граница, скажем, вокруг элемента ет или sup будет выглядеть странно.
в следующем примере элементу div присваивается класс intro, позволяющий задать этому контейнеру коричневый шрифт размером 1,1 rem Обратите внимание, что дочерние элементы контейнера div — ет, sup и code, а также вложенный элемент div форматируются одинаково, поскольку в каждом случае они унаследовали стили от родительского элемента div
ПРАКТИКУМ
Элемент а наследует такие свойства стиля, как color, но вы не заметите это наслеоование; браузер его запретит, чтобы ваши ссылки выделялись на фоне обычного текста страницы. Как окрасить текст дочерних элементов а в ивст их родителя?
tzj> Ссылка wdpq.io/2/19-6-2
► Лршиер
LQ LU СП
Родительский элемент div
cz£> Ссылка: wdpg.io/2/19-6-1
В этом примере показывается принцип наследования- как стили родительского элемента div передаются дочерним элементам, таким как em, code и вложенный div
Дочерний элемент ет
Why don't all CSS properties inherit their parent's styles?* Because in some cases it would lead to weird or nonsensical results. For example, if you apply a border around, say, a da v element, it would look odd indeed to apply the same border to a child span or st rong element. Similarly, applying, say. a p 4-^ element's width value to a child am element doesn't make sense.	i
* See www.w3.org/TR. REC-CSS2/propidx htni‘ 4—Дочерний
\	элемент code
Дочерний элемент div
.intro {
color: saddlebrown;
font-size: l.lrem; line-height: 1.4;
}
Стили для класса mtro
373
Профессиональные приемы работы
- Родительский элемент div
. ,,	— Дочерний элемент ем
<div class= intro > X m r
Why don't <em>aLl</em> CSS properties inherit their parent's styles?<sup?*</sup>
Because in some cases it would lead to weird or nonsensical results. For example, if you apply a border around, say, a <code>div</code? element, it would look odd indeed co apply the same border to a child <ccde>span</code> or
<code>strong</code> element. Similarly, applying, say, a <code>p</code> element's
<code>width</code> value to a child <code>em</code> element doesn't make sense.	I
Дочерним элемент code
<div>
<sup>*</sup> See wwvi.w3.org/TR/REC-CSS2/propidx.html
</div>
</div>
Дочерний элемент div
Наследование — это азы процедуры применения стилей CSS Вдобавок к нему вам нужно разобраться в каскадировании, о котором мы поговорим в следующем уроке
ИНФОРМАЦИЯ
Консорциум Всемирной паутины (W3C) поддерживает полный список CSS-свойств (в том числе устаревшие свойства). Среди прочих сведений в этом списке можно найти информацию о наследовании каждого свойства. См. www.w3.org/ TR/ CSS2/ propidx. html.
Урок. 19.7. Принципы каскадирования
Тема: каскадирование в CSS
с/> Ссылка: wdpg.м >/2/19-7-;"’
Помимо передали стилей от родительских элементов к потомкам путем наследования, CSS определяет способ распространения стилей — каскадирование Наследование определяет, что передается элементам, а каскадирование — как. (Прежде чем продолжить, позвольте ответить на вопрос который, несомненно, у вас возник да именно из-за каскадирования таблицы стилей называются каскадными.) Изучить механизм каскадирования вам поможет следующий код
CSS
<style> div {
color: red;
}
</style>
Внутренняя таблица стилей
HTML
<div style color, blue, > *	- строчный стиль
What is the color of this text?
</div>
В этом примере внутренняя таблица стилей предписывает окрасить элемент div в красный текст, а строчный стиль — в синий. Какого цвета
374
Стили: расплетаем паутину
будет текст между тегами <div> и </div>? Как браузер разрешит конфликт между внутренней таблицей стилей и строчным стилем?
Чтобы ответить на оба вопроса, нужно знать, как устроено каскадирование. Во-первых, вы уже знаете, что существует три основных способа применения стилей CSS строчные стили, внутренние таблицы стилей и внешние таблицы стилей. Вместе эти способы составляют, по словам Консорциума W3C, так называемые авторские таблицы стилей (поскольку создаются автором, создавшим веб- страницу, то есть вами). Но при отображении веб-страницы применяются еще две таблицы стилей стили по умолчанию браузера (называемые таблицей стилей пользовательского агента) и пользовательские стили из настроек браузера (называемые пользовательской таблицей стилей)
Каскадирование выстраивает эти пять источников информации о стилях в следующем порядке.
•	таблица стилей пользовательского агента,
•	пользовательская таблица стилей
•	внешние и внутренние авторские таблицы стилей.
•	строчные авторские стили.
Эти источники перечислены в порядке возрастания значимости (веса — на языке CSS). Если браузер видит, что данное правило стиля определено в двух или более источниках, то устраняет конфликт, применяя стиль из источника имеющего наибольший иес В примере кода, который я показал ранее, гидно, что строчный стиль «весит» больше внутренней таблицы стилей, поэтому текст между тегами <div> и </div> будет отформатирован синим цветом, как показано в следующем примере
^Пример ф Ссылка: wdpg.io/2/19-7-1
В этом примере мы рассмотрим принципы каскадирования CSS: преимущество получает строчный стиль элемента div, поскольку имеет больший вес, чем селектор типа div из внутренней таблицы стилей.
What is the color of this text?
Элемент div
<style>
dlVc{olor: red; —' Внчмрянняя _
j	тьолыцд стилем
</style>  Строчный стиль
<div style="color: blue;">
What is the color of this text?
</div>
375
Профессиональные приемы работы
ПРОФИ
Существует шестой источник стиля, который необходимо учитывать: добав ление ключевого слова !important в конец объявления стиля. Это ключевое слово имеет наибольший вес в CSS, поэтому преобладает над всеми другими источниками.
Ссылка wdpg. ю/2/19-7-2
ПАМЯТКА
Этот рецепт я придумал, чтобы упростить пониманиеспе цифичности.
Фактический алгоритм каскадирования основан на формуле И-К-Т, где И — количество идентификаторов в селекторе, К — количество классов или псевдоклассов (селекторов атрибутов), а 7 — количество типов (то есть элементов и псевдоэле ментов) Чтобы определить победителя, нужно сравнить несколько таких результатов слева на право. Например, 1 -0-0 выигрывает у 0-1-1, а 0-2-1 — у 0-1-4.
Каскадирование — своего рода соревнование, в котором разные селекторы борются за право применить свои стили к одному и тому же элементу. О том, как CSS определяет «победителя» в таких соревнованиях, речь пойдет в следующем уроке.
Урок 19.8. Принципы специфичности
Тема: специфичность в CSS
cj> Ссылка: wdpg.io/2/19-8-0
Как вы думаете, что происходит с каскадированием CSS, когда два стиля, нацеленные на один и тот же элемент, исходят из одного источника7 Рассмотрим следующий код:
<style>
р.colored-text {
color: purple;
}
.colored-text { color: blue;
}
div P {	Селектор потомков
color: green;
}
P	"Г" Селектор типа
color: red;	r
}
</style>
<di v>
<p class="colored-text">What is the color of this text?</p? </div>
Таблица стилей содержит четыре правила, каждое из которых направлено на форматирование элемента р Первое правило нацелено на элементы р с классом colored-text, второе — на любые элементы с классом colored-text, третье — на элементы р являющиеся потомками элемента div, а четвертое правило — на все без исключения элементы р Каким цветом браузер отобразит текст между тегами <р> и </р>? Каскадирование не дает ответа на этот вопрос, поскольку все правила берутся из внутренней таблицы стилей и поэтому имеют одинаковый вес
Чтобы опоеделить победителя в этой CSS -борьбе, нужно разобраться со специфичностью Это, пожалуй, одна из самых сложных концепций в CSS, и в рамках данной главы я могу сказать следующее чем специфичнее определенный селектор нацелен на элемент веб-страницы, тем больший чес он имеет Определить специфичность селекторов вы сможете, выполнив следующие действия.
1. Подсчитайте количество элементов (например р или div) и псевдоэлементов (таких как :: before) и присвойте каждому из них 1 балл
2 Подсчитайте количество классов и псевдоклассов (например, : hover) и присвойте каждому из них 10 баллов.
376
Стили: расплетаем паутину
3. Подсчитайте количество идентификаторов и присвойте каждому из них 100 баллов
Полученная сумма указывают на вес каждого селектора Возвращаясь к примеру, подсчитайте баллы
•	р. colored-text — этот селектор содержит один элемент и один класс, 11 баллов
•	. colored-text — этот селектор содержит один класс, 10 баллов
•	div р — этот селектор содержит два элемента, в общей сложности 2 балла.
•	Р — этот селектор содержит один элемент, 1 балл
Итак, селектор p,colored-text получает наибольшее количество баллов, и поэтому текст между тегами <р> и </р> отображается фиолетовым цветом, как показано в следующем примере.
ВНИМАНИЕ!
Ранее в главе я предостерегал вас от чрезмерно го использования идеи ти фикато ров. и сейчас вы видите главную причину этого Данный селектор значительно перевешивает элементы, псевдоэлементы, классы и псевдоклассы.
^Пример сд> Ссылка:wdpg.io/2/19-8-1
В этом примере показываются принципы специфичности CSS: селектор
р. colored - text специфичнее других селекторов, поэтому браузер отображает текст в фиолетовом цвете
ВЕБ-СТРАНИЦА
What is the color of this text?
Элемент p
<style>	— Специфичности = 11 баллов (или 0-1-1)
p.colored-text {
color: purple;
}	* Специфичность = 1O баллов (или O-l-O)
.colored-text {
color: blue;
J div p {
Специфичность = 2 балла (или O-O-2)
color: green;
}
P {
— Специфичноемь = 1 балл (или O-O-l)
color: red;
}
</style>
<div>
<p class="colored-text">What is the color of this text?c/p>
</div>
377
Профессиональные приемы работы
Если вы написали правило для форматирования определенного элемента. но браузер не показывает эти стили при отображении страницы то проблема в том, что более специфичный селектор превзошел ваш. Вам нужно веонуться в код и выяснить, какой селектоо более специфичен
Наконец, вам может быть интересно, что произойдет с каскадированием, если два (или более) селектора из одного источника специфичны одинаково В этом случае каскадирование учитывает порядок указания селекторов в CSS-коде Победителем будет селектор, указанный в коде позже
РЕЗЮМЕ
•	Селектор идентификатора применяет правила CSS к любому элементу с указанным идентификатором
•	Чтобы выбрать все элементы, содержащиеся в родительском элементе, используется селектор потомков, перечисляющий имена родителя и потомка через пробел
•	Чтобы выбрать все дочерние элементы, содержащиеся в ооди-тельском элементе, используется селектор дочерних элементов, перечисляющий имена родителя и потомка через знак «больше» (>).
•	Чтобы выделить все элементы, являющиеся родственными по отношению к другому элементу, используется общий родственный селектор, перечисляющий имена двух элементов через тильду (~)
•	Псевдоэлементы ::before и :: after селектора позволяют вставить сгенерированное содержимое до или после элемента
•	Многие, но не все CSS-свойства наследуются от родительского элемента
•	Наследование происходит согласно каскадированию, по которому большее значение присваивается декларациям из источнике3 расположенных ближе к элементу В порядке возрастания значимости (веса) к таким источникам относятся стандартные стили браузера, пользовательские стили, внешние таблицы стилей, внутренние таблицы стилей и строчные стили.
•	При анализе деклараций из одного и того же источника стили выбираются исходя из специфичности селектора В порядке возрастания такими селекторами служат элементы и псевдоэлементы, классы и псевдоклассы, идентификаторы, строчные стили и ключевое слово ! important
Глава 20
Проект: подготовка веб-портфолио

В этой главе
	Планирование и эскиз страницы портфолио.
	Выбор шрифтов и цветов для страницы.
	Добавление текста и изображений на страницу.
	Добавление контактной информации.
Если вы занимаетесь творчеством рисуете иллюстрации, пишете книги или картины, сочиняете музыку либо создаете сайты, то просто обязаны рассказать миоу о себе и своей карьере и о том. насколько вы талантливы. В наши дни для этого обычно используются социальные сети Это прекрасно, но, используя для самопрезентации чужую платформу, вы играете по ее правилам и теряете контроль над тем. как себя преподнести Всегда лучше брать бразды правления в свои руки, и лучший способ сделать это — сформирован? собственное присутствие в Интернете Для творческих личностей это означает создать страницу портфолио, на которой представлены ваши лучшие или последние работы
379
Проект: подготовка веб-портфолио
В этой глазе я расскажу о том, как создать простую страницу портфолио Я сосредоточусь на многих приемах, которые вы изучили в части IV (например, внутристраничные ссылки, типографика и цвета), а к концу вы увидите, как создать сложную страницу портфолио, на которой будут показаны ваши лучшие творческие достижения
НАЧАЛО РАБОТЫ
Этот проект представляет собой базовое портфолио, то есть страницу, предназначенную для демонстрации некоторых (или всех) творческих работ. Это онлайн-эквивалент бумажного портфолио, которое художники носили с собой, встречаясь с работодателями Основная идея страницы портфолио — продемонстрировать ваши творческие работы людям, которые, возможно, захотят их купить или нанять вас для участия в некоем творческом проекте
ЭСКИЗ МАКЕТА
Вы уже выполнили несколько проектов из этой книги, поэтому знаете как это делается: для начала на листе бумаги нарисуйте ручкой или карандашом базовый макет Получится своего рода схема, на основе которой можно начинать использовать HTML-теги и CSS-свойства
На рис. 20.1 показан пример эскиза моей страницы портфолио Она представляет собой г-ариацию макета, называемого пятиблочным крупный блок служит вступлением, за ним следуют четыре маленьких блока, заполняемых изображениями портфолио
На рис. 20.1 мы нидим макет страницы с такими шестью разделами. как
•	шапка страницы, содержащая логотип, название страницы и ссылки на дру| ие разделы страницы;
•	краткое ведение в портфолио,
•	портфолио с четырьмя примерами моих работ;
•	раздел, рассказывающий посетителю страницы обо мне и моей работе.
•	раздел, позволяющий посетителю связаться со мной;
•	подвал страницы с уведомлением об авторских правах и ссылками на социальные сети
380
Эскиз макета
Портфолио
О сайге
контакты
Название страницы
Заголовок введения Подзаголовок введения Краткое введение в портфолио	F одное изображение
Контакты	
Портфолио
Пример № 1		Пример N- 2		Пример № 3		Пример № 4
Обо мне
Короткий абзац о том, кто вы и чем занимаетесь в тв> 1рческом плане. Пишите коротко- Хватит нескольких предложений, в которых расскажите посетителю о вашей творческой стороне, опыте, известных ваших клиентах и т д
Контакты
Адрес электронной почты
Ссылки на социальные сети
Ссылки на другие сайты
Уведомление об авторских правах
► Рис. 20.1. Прежде чем приступить к работе с HTML и CSS, набросайте эскиз макета и содержимого ст ран и цы
Первая задача на пути к созданию портфолио — выбрать шрифты, которые будут использоваться на странице
381
Проект: подготовка веб-портфолио
ПРОФИ
Обратите внимание, что такие буквы, как <а» и «е», имеют как очко, так и апер туру, то есть рост очка подразумевает уменьшение апертуры и наоборот. Чтобы эти символы четко отображались на экране, правильно подбирайте шрифт по х-высоте, например со значением, превышающим половину размера шрифта.
ВЫБОР ШРИФТОВ
Само портфолио состоит из изображений, однако на странице содержится довольно много текста, в том числе заголовки и основной текст — большие блоки текста без заголовков содержащие основную часть слов портфолио. Большая часть аудитории будет читать вашу страницу на экранах ноутбуков планшетов и смартфонов, поэтому важно заранее уделить немного времени выбору шрифтов, которые будут разборчивы и читаемы на небольших экранах
Можно заглянуть на сайт Google Fonts (https://fonts.google.com). выбрать шрифт, набрать текст, а затем оценить результат на глаз, насколько хорошо текст выглядит и читается. Или. как вариант, учесть определенные критерии. общие для шрифтов которые удобно читать на маленьких экранах Тестируя шрифт на сайте Google Fonts (или используя другой сервис шрифте?, на ваш выбор;, нужно обратить внимание на следующие четыре характеристики (рис 20.2)
•	Большой размер очка. Очко — замкнутое отрицательное негативное пространство у таких букв, как «А», «R», «С», «д», «я» и «р». Увеличение очка улучшает разборчивость символов.
•	Большой размер апертуры. Апертура — частично замкнутое негативное пространство у таких буки как «С», «5», «а» и «е». Увеличение апертуры тоже улучшает читаемость.
•	Средняя или большая х-высота Х-высота — расстояние от базовой линии до вершины строчных букв, таких как «х» и «о», или до вершины чаши в буквах, имеющих восходящие (например, «d» и «П») или нисходящие (например, «д» и «у») линии Подходящая х-высота (скажем, равная половине размера шрифта или больше) обычно приводит к увеличению очка и апертуры.
Очко
Толстый штрих
Тонкий штрих	Апертура
► Рис. 20.2. При выборе шрифта, который будет читабелен даже на небольших экранах обратите внимание на крупные очко и апертуру, сбалансированную х-высоту и малую контрастность штрихов
х-высота
382
Выбор шрифтов
•	Низкая или средняя контрастность штрихов. Очень тонкие штрихи могут быть неразличимы на маленьком экране, что затрудняет чтение текста Подбирайте шрифты, в которых разница между самыми тонкими и самыми толстыми штрихами минимальна
Можно оформить текст на странице одним шрифтом, но выбор двух шрифтов — одного для заголовков и другого для основного текста — сделает страницу более динамичной и контрастной Обычно я предпочитаю исполозовать шрифт без засечек для заголовков и с засечками для основного текста, но в этом проекте изменю эти предпочтения Для страницы портфолио можно взять оба шрифта с засечками или оба без засечек Единственный критерий, на который следует обратить внимание, — это гармоничное сочетание двух шрифтов, то есть схожие характеристики читаемости очко, апертура, х высота и контрастность штрихов И наконец, убедитесь, что каждое выбранное вами семейство содержит необходимые начертания: как минимум обычное, курсивное и полужирное
На сайте Google Fonts доступны сотни шрифтов, и десятки из них будут отлично видны даже на самых маленьких экранах Как же -ыбрать? Конечно, интересно самостоятельно найти нужный шрифт, но если вы предпочитаете от чего-то отталкиваться, то в табл. 20.1 приведены несколько удачных пар шрифтов для заголовков и основного текста (а также альтернативные шрифты без засечек для основного текста).
ПАМЯТКА
Маловероятно, что веб-шрифты Google не будут доступны. Тем не менее может возникнуть задержка с их загрузкой. В этом случае, чтобы на время задержки браузер не ото бражал стандартный шрифт с засечками или без, ообавьте в стек системный шрифт. Шрифты Georgia (с засечками) и Verdana (без засечек) доступны практически на всех современных компьютерах.
► Таблица 20.1 Рекомендуемые шрифты Google Fonts для заголовков и основного текста
Заголовки	Основной	Основной (как вариант)
Playfair Display	Open Sans	Raleway
Merriweather	Fira Sans	Merriweather Sans
Source Serif Рю	Source Sans Pro	Lato
Domme	Roboto	Open Sans
Lora	Varela Round	Lalo
Roboto Slab	Robolo	Raleway
Для заголовков в этом проекте я выбрал один из моих самых любимых шрифтов Playfair Display Это великолепный шрифт с красивым крупным очком и отличной х-высотой. Правда, у него высокая
383
Проект: подготовка веб-портфолио
контрастность штрихов, но вряд ли это станет проблемой для крупных заголовков В семействе Playfair Display шесть начертаний, поддерживается кириллица, так что это шрифт на все случаи жизни. Для основного текста я выбрал Open Sans, один из самых популярных шрифтов без засечек в Интернете Это плотный шрифт, который отличается крупными очком и х-высотой. поддержкой кириллицы, а также малой контрастностью штрихов Менее популярная, но все же прекрасная альтернатива — Raleway
Чтобы воспользоваться сервисом Google Fonts и добавить ссылки на полужирный и полужирный курсивный шрифты Playfair Display, а также на обычный, курсивный и полужирный шрифты Open Sans, я указал следующие элементы link
<link rel="preconnect" href="https://fonts.google3pis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
clink href="https://fonts.googleapis.com/css2?family= t'pen+Sans: itai, iwghtjSO, 400; 0,700; 1,4008 family=
Playfair+Display:itai,wght@0,700;1,700&di splay=swap" rel="stylesheet">
В CSS-файле я указал следующие объявления для задания этих семейств
font-family: "Playfair Display", Georgia, serif; font-family: "Open Sans", Verdana, sans-serif;
Набросав макет страницы и выбрав шрифты, нужно определиться с цветовой схемой
ВЫБОР ЦВЕТОВОЙ СХЕМЫ
Ьыбор цвета зависит от типа портфолио и от общего образа, который необходимо передать. В качестве примера я буду представлять специалиста по реставрации и ремонту книг (увы, гипотетически). Я хочу использовать цвета, излучающие тепло (ведь люди, которые любят старые книги настолько что хотят их отреставрировать, как правило добрые, теплые) и безопасность (те же люди не хотят отдавать свои драгоценные книги кому попало). Насыщенные коричневые цвета могут довольно эффективно передать оба эмоциональных тона Мой калькулятор цветовых схем на сайте Web Design Playground (wdpg ю/2/ colorcalc) подсказал монохромную цветовую схему, основанную на цвете #77613с (рис. 20 3)
384
Создание страницы
#edc9cl	жа9ч879	#77613c	#5Ы31л	#367507
► Рис. 20.3.
Монохромная цветовая схема на основе шестнадцатеричного значения цвета #77613с
Подготовив эскиз макета страницы и выбрав шрифты и цвета, вы можете воплотить поверхностный набросок в точный HTML- и CSS-код.
СОЗДАНИЕ СТРАНИЦЫ
Чтобы создать страницу портфолио, начните с каркасного кода, с которым я познакомил вас в главе 2. Затем, переходя от раздела к разделу, добавьте текст, элементы и свойства.
Базовая структура
Для начала возьмите базовую структуру страницы из главы 2 и сверстайте макет страницы портфолио, используя семантические HTML5-элементы.
•	Для разметки шапки страницы используется элемент header Он содержит три элемента img для логотипа сайта, nav для области навигации, которая содержит неупорядоченный список ссылок на другие элементы на странице, и hl для названия страницы.
•	Для оазметки основного раздела используется элемент main, состоящий из нескольких элементов section, каждый из которых служит контейнером для соответствующего раздела страницы
•	Для разметки подвала стоаницы используется элемент footer Он содержит уведомление об авторских правах и ссылки на социальные сети
385
Проект: подготовка веб-портфолио
^Пример сф> Ссылка: wdpg.io/projects/portfolio-page/l
В этом примере мы выбираем элементы, составляющие базовую HTML-структуру страницы портфолио
Шапка -<
Wl R LOGO HERE
ВЕБ-СТРАНИЦА
Pjitfoho About < cotart Page Tide Portfolio
I OCHIiНОЙ раздел
About Mt
Contact Me
Cop;Tight and social media links
Подвал
Шапка
<header>
<img src="/irr,ages/your-logc-here.pngb' alt="My logo’ >
<nav>
<ul>
<li>Portfolio</li>
<li>Ai?out</li>
<li>Contact</li>
</ul>
<hl>Page Titlec/hl>
</nav>
</header>
<main>>
<section>>
<nl>Portfolio</hl>>
<img
<img
<img
<img
</sect ion>>
<secticn>>
<hl>About Me</hl>>
</section>>
<section>>
<hl>Contact Me</hl>>
</section>>
</main>
<-Footer>
<p>Copyright and social media links</p>
</footer>
Основной раздел
src="http://placehold.it/150x159 src="http://placehoid.it/150xl50 src=“http://placehold.it/15GxlS0 src="http://placehold.it/150xl50
alt= alt= alt= alt=
Подвал
386
Создание страницы
Страница портфолио пока еще пуста, но это ненадолго Перейдем к структуриросанию общего макета странице!
Общий макет
Верстка пятиблочного макета подразумевает использование технологии Flexbox. и именно ее мы и применим. Однако содержимое нужно выровнять по центру окна браузера, поэтому нам понадобится и потенциал технологии CSS Grid Общая структура, к достижению которой необходимо стремиться, выглядит следующим образом
•	Исходным grid- контейнером будет элемент body. Присвойте ему свойство grid-template-columns: Ifr auto Ifr чтобы создать три столбца, средний из которых будет автоматически подстраиваться под размер содержимого, а левый и правый займут оставшееся пространство поровну, тем самым центрируя средний столбец.
•	Для разметки самого содержимого вложите элемент div в элемент body и присвойте свойство grid-column: 2 чтобы поместить контейнер div в середину gnd-макета Кроме того, div — это flex-контейнер со свойствами flex-direction: column и justify-content: flex-start Так мы получаем одноколоночный контейнер с содержимым, выровненным по верхней части контейнера.
В следующем примере показано, как задать все эти настройки
ПАМЯТКА
Кроме того, базовый макет стра ницы содержит CSS-код сброса форматирования, который, помимо прочего, обнуляет поля и отступы, а размер шриф та делает равным 100 %.
^Пример с^> Ссылка: wdpg.io/2/projects/portfolio-page/3
В этом примере мы добавим HTML-код для разметки шапки и CSS-код для ее форматирования.
Настраиваем основной grid-контейнер
Применяем стек шрифтов. а также цвета фона и текста
body {
display: grid;
grid-template-columns: Ifr auto Ifr;
min-height: 100vn;
margin-top: lrem;
font-family: "Open Sans", Verdana, sans-serif; >
background-color: #cdc9cl; >
background-image; radial-gradient(circle farthest-side at
center top, hsl(0, <)%, 100%) 0%, #cdc9cl 100%);>
color: #362507;
.container { grid-column: 2,
display: flex;	Настраиваем
flex-direction: column; " 4 вложенный век-контейнер justify-content: flex-start; для содержимого max-width: 60rem; < с>граничиваел1 максимальную ширину содержимого
387
Проект: подготовка веб-портфолио
<body>
<div class="container">
</div>
</body>
Подготовив общий grid-макет, можно приступать к верстке отдельных разделов портфолио Сначала займемся шапкой
Шапка сайта
Как я уже сказал, шапка состоит из элемента header, который содержит три элемента img для логотипа страницы, nav для навигационных ссылок и hl для названия страницы Вдобавок я хочу отформатировать шапку следующим образом
•	логотип страницы должен быть выровнен по левому краю контейнера, а навигация и название — по правому краю,
•	все содержимое шапки должно быть выровнено по вертикали
Самый простой способ — использовать flex-макет, поэтому превратите элемент header во flex-контейнер с горизонтальной основной осью и свойством, align-items: center Чтобы выполнить ыравнивание по горизонтали, разделите шапку на левую и правую части с помощью div-контейнеров. В следующем примере показан HTML- и CSS-код, который я использовал для достижения поставленных целей и оформления остальной части шапки
► Пример
Ссылка wdpg.io/2/projects/portfolio-page/4
В этом примере мы займемся оформлением шапки сайта.
ВЕБ-СТРАНИЦА
• Rortfo This Old Book
* АЬдш
* Contact
388
Создание страницы
header {
display: flex;
justify-content: center; ______s Элемент header —
align-items: center;	эмс Hex-контейнер
padding: . 5rem0;
}
.header-left {
flex: 1 0 33%;	*
text-align: left; Дебая часть шапки занимает одну
}	треть ширины, правая — две трети
.header-right {
flex: 2 0 67%;	-----х>
display: flex;
flex-wrap: wrap;	-—Правая часть шапки —
justify-content: flex-end; 3mc Нсх-контейнер
}
Левая часть шапки
<header>
<div class="heaaer-left">
<img src="/images/portfolio-logo.png" alt="This old Fnok logo >
</div>
<div class="header-right">
<nav>
<ul>
<lixa
<lixa
<lixa
</ul>
</nav>
<hl>This Old Book</hl>
</div>
</header>
href-"ftportfolio" class="btn">Portfolio</ax/li> href="ftabout" class="btn">About</ax/li> href=”#cuntact" class="btn">C..>ntact</ax/li>
Правая часть шапки
Структурировав шапку, можно заняться ее оформлением. С логотипом все в порядке, а вот навигационные ссылки нужно превратить в подходящие кнопки и отформатировать название страницы. В следующем примере показан необходимый HTML- и CSS-код
389
Проект: подготовка веб-портфолио
^Пример	Ссылка: wdpg.io/2/projects/portfolio-page/4
В этом примере мы займемся оформлением шапки сайта.
ВЕБ-СТРАНИЦА
PQRIFOLO
АВО-Т  CONTACT
This Old Book
&
padding-top: Irem;
У элемента hl немного увеличиваемся омсмуп сверху
. btn {
background-color: #362507;
padding: .25rem .75rem;
border-radius: .75rem; font-size: lrem;
color: #cdc9cl;
text-transform: uppercase;
}
nav ul {
Этом класс превращаем элементы навигации в соомвемсмвующие кнопки
display: flex;
list-style-type: none;
}
nav li {
padding-left: Irem;
Эпли стили отвечают за оформление элементов навигации
а {
text-decoration: none;
a:hover {
color: #362507;
background-coJor: #cdc9cl;
hl
Эиаоил CSS-код придаем стило ссылкам (одычно/М и наведенным}
„ Этоил CSS-код форматирует название страницы в шапке
{
font-size: 4rem;
font-weight: bold;
font-family: "Playfair Display", Georgia, serif;
Особого внимания заслуживает класс btn, который, как было показано ранее, применяется к элементам а в разделе nav Каждый элемент а представляет собой элемент маркированного списка, а задача класса btn - превратить содержимое каждого элемента li
390
Создание страницы
(текст ссылки) в соответствующую кнопку. Класс btn выполняет следующие действия.
•	добавляет цвет фона,
•	добавляет отступы вокруг текста;
•	применяет свойство border-radius для скругления углов,
•	устанавливает размер и цвет шрифта, а также преобразует все буквы в прописные.
Итак, шапка страницы готова Ваша следующая задача - добавить в ведение к портфолио, о котором я расскажу далее
ПРОФИ
Свойство borderradius скругляет углы элемента. Можно указать точное значение (чем больше, тем сильнее округ ляются угльи или процентное (например, значение 50% сводит границы в круг).
Введение
введение в портфолио служит для привлечения внимания посетителя к вашей странице, предлагая краткий обзор наших творческих задач Этот раздел должен содержать название и, если необходимо, подзаголовок, короткий абзац и ссылку на раздел «Контактная информация».
В следующем примере я оформил введение страницы темно-коричневым цветом текста (#362567), добавил заголовок h2 и подзаголовок ИЗ, создал кнопку действия и разместил подходящее изображение, которое может вызвать интерес у потенциальных посетителей Чтобы все было оформлено красиво и аккуратно, я разметил введение (с помощью класса intro) во flex-контейнер.
^Пример tzj> Ссылка: wdpg.io/projects/2/portfolio-page/5
В этом примере мы добавим на страницу портфолио вводную часть.
<divdass= "intro-text" >
<div dass="intro-image">
Элемент p Элемент img
Элемент h2
Элемент hi
<section dass= ‘intro''> -К
Eteri Restoration and Repair
Jfinbnke.rufait ◄-----------------
 h^i hi to TWi Old Boor, me txvene nome at boot restore?
uke oto toofe diet heet w** better deys end new We them vrah urefui end respeixful герьп er? «npf. Get ергкххл termly Bicto than irxltworsefor < .evIHeve erere or enpotarn oook that could use some Tl£?
Элемент a
391
Проект: подготовка веб-портфолио
Правила CSS для класса intro
.intro {
display: flex;
align-items: center;
margin: 2rem 0;
border: 3px solid #77613c;
color: #362507;
font-size: 1.25rem;
backgi ound-color: #a99879;
background-image: radial-gradient(ellipse closest-corner at center, #cdc9cl 0%, #a99879 100%);
•intrc-text { flex: 2 0 67%;
padding: 2rem 0 2rem 2rem;
}
. intro-text p { margin: 1.5rem 0;
}
. intro-image {
flex: 1 0 33%;
padding-right: 2rem; text-align: right;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
font-style: italic;
Правила CSS для класса intro-image
Правила CSS для класса intro-text
Правила CSS для заголовков разного уровня
}
h2, h3 {
font-family: "Playfair Display", Georgia, serif; }
<main>
«section class="intro">
<div class="intro-text">
(h2>Bcuk Restoration and Repair(/h2>
(h3>If it's Ьгоке, I'll fix it(/h3>
<P>
Welcome to This Old Book, the online home of book restorer Paul McFedries. I take old books that have seen better days and breath new life into them with careful and respectful repairs and cleaning. Got a precious family Bible that's a little worse for- wear? Have a rare or important book that could use some TLC? Let's talk.
</p>
(div>
(a href="#contact" class="btn">Contact Me(/a> (/div> (/div>
392
Создание страницы
<div class="intro-image">
<img src="/irnages/portfol.io-intro.png" alt="lllustration showing several old books">
</div>
</section>
</main>
Шапка и вводная часть служат для привлечения посетителей на страницу Подготовив их, вы должны добавить примеры портфолио Это ваша следующая задача, сажнейшая для данного проекта Как это делается, я покажу в следующем разделе
Портфолио
Реальная основа страницы — само портфолио Это серия изображений, демонстрирующих ваши работы В момент принятия решения о том, сколько изображений публиковать у вас есть три варианта
•	Показать все работы. Этот вариант подойдет, если ваше портфолио маленькое Если же оно большое, то можно показать все. но, возможно, на первой странице привести только часть работ, а затем дать ссылку на вторую страницу, где будут представлены остальные (или все) работы.
•	Показать последние работы. Этот вариант хорош, если, на ваш взгляд, последние работы особенно хороши, у вас изменился стиль или появились VIP-клиенты
•	Показать лучшие работы. Этот путь стоит выбрать, если необходимо показать себя с лучшей стороны,
В типичном портфолио предполагается от одного до трех рядов, по два — четыре изображения е каждом. Перед портфолио следует поместить заголовок и, возможно, несколько предложений в качестве вступления Само поотфолио, чтобы оно выглядело аккуратным, нужно настроить как flex-контейнер В следующем примере показано, как я совместил все эти аспекты на своей странице портфолио
Содержимое портфолио заключено в элемент section, которому я присвоил класс portfolio Обратите внимание, что я также присвоил идентификатор portfolio чтобы указать этот элемент section в качестве навигационной ссылки Portfolio (Портфолио) в шапке, которую вы настраивали ранее
Текст портфолио находится в контейнере div с классом portfoliotext Он состоит из заголовка h2 и элемента р с вводным текстом
393
Проект: подготовка веб-портфолио
^Пример cj> Ссылка: wdpg.io/2/projects/portfolio-page/6
В этом примере мы добавим на страницу примеры портфолио
ВЕБ-СТРАНИЦА
<sertion dass=
"portfolio">
Элементы img
.portfolio {
margin-bottom: lrem;
}
.portfolio-text p {
margin: .5rem 0 1.5rem;
font-size: 1.25rem;
}
.portfolio-images {
display: flex;
justify-content: space-between;
}
.portfolio-image {
position: relative;
cursor: pointer;
margin-bottom: lrem,
}
Изображения портфолио размещены во flex-контейнере
Контейнер с содержимым портфолио — это элемент section с классом и идентификатором portfolio
<sectior class="portfolio" id="portfolio">
<div class»"portfolio-text">	. Контейнер с текстом
<	h2>Some Recent toork</h2>	портфолио — это элемент div
<	p>	с классом portfolio-text
Here are some of my recent restoration projects. The images you see below are the "before" versions of each book. To see an "after" version, move your mouse over an image (or tap it).
c/div^	Контейнер изображений
<div class="portfolio-lmages">	порилфолмо — это элемент
<	div class»"portfolio-image"> * c пассом portfolio-- mages
<img src="/images/portfolio-booKl-before.prig”>
<img class="image-overlay" src="/images/portfoliobookl-after.png">
</div>
394
Создание страницы
cdiv class="portfolio-image">
<img src="/images/portfolio-book2-before.png”>
<img class="image-overlay" src=”/images/portfoliobouk2-after.png"> </div>
<div class="portFolio-image">
<	img src=" /images/ portfolio- ЬоокЗ - before. png’1 >
<	img class="image-overlay” src="/images/portfoliobook3-after.png"> </div>
<div class='portfolio-image“>
<img src="/images/portfolio-book4-before.png">
<	img class="image-overlay'' src="/images/portfoliobook4-after.png”>
</div>
</div>
</section>
Изображения портфолио находятся в контейнере div с классом portfolio-images. Он состоит из нескольких элементов div (с классом portfolio-image) В принципе, в портфолио достаточно добавить один элемент img в каждый из таких элементов div Однако в своем проекте я хочу представить изображения «до» и «после», причем последние должны отображаться при наведении указателя мыши на изображение (или при касании на мобильном устройстве). Для этою я добавил второй элемент img с классом image-overlay Ниже показан CSS-код этого класса
.image-overlay {
position: absolute;
left: 0;
too: 0;
width: 2O0px;
height; 156px;
z-index: 1;
opacity: 0;
transition: opacity 1.5s ease;
}
.image-overlay:hover { opacity: 1;
}
Второе (накладываемое) изображение имеет те же размеры, что и предыдущее, и позиционируется абсолютно в левом верхнем углу элемента div с классом portfolio-image (который позиционируется относительно в рамках контекста позиционирования для последующего изображения). Накладываемому изображению присваивается свойство z-index: 1. чтобы оно отображалось поверх исходного изображения, и свойство opacity: 0. чтобы предотвратить его отображение при первой загрузке страницы Затем с помощью события hover значение opacity изменяется на 1, чтобы изображение отобразилось. Свойство transition класса image-overlay анимирует появление накладываемого изображения.
395
Проект: подготовка веб-портфолио
О себе
Следующий элемент страницы портфолио - раздел «О себе», в котором можно опубликовать соответствующую информацию образование, опыт работы, должности, достижения и т. д Вы можете сделать свое портфолио достоверным, приведя данные, благодаря которым потенциальные клиенты, работодатели и спонсоры смогут убедиться том, что ны обладаете нужными им творческими способностями
Раздел «О себе» прост в него входят заголовок и абзац текста с соответствующей информацией. Рассмотрим пример
► Пример <=£> Ссылка: wdpg.io/2/projects/portfolio-page/7
В этом примере мы добавим на страницу портфолио раздел «О себе».
ВЕБ-СТРАНИЦА
<section class- , "about"> Л
Элемент h2 Элемент р
About Меч- у
Paul Mettdrtas s a book conservator, bookbinder, and an expert in the history and conservation of Gothic and An Deco bookbindings. He is a graduate of the Canadian Bookb nding ano Book Arts Guild, and apprenticed with some of the top North American and European book restorers including Don Palmer. Rose Eldnage. and Betsy Tayfor-Newlove. Paul was formerly president ol the Gothic Book Workers Guild and is currently executive director ot the Historical An Deco Booxt«nding society, working with both institutional and private Clients, he has restored hundreds of books over the years.
.about {
margin-bottom: Irem;
}
.about-text p {
margin: . 5rem 0 1.5rem;
font-size: 1.25rem;
}
Правила CSS для раздела «О себе»
Контейнер с текстов «О себе» — эило элемент section с классом и идентификатором about
«section class-"about" id="about">
<div class=“about-text">
<h2>About Me«/h2>
<P>
Контейнер с содержимым раздела «О себе» — это элемент div с классом about -text
«b?Paul McFedries«/b> is a book conservator, bookbinder,and an expert in the history and conservation of Gothic and Art Deco bookbindings. He is a graduate of the Canadian Bookbinding and Book Arts Guild, and apprenticed with some of the top North American and European book restorers, including Don Palmer, Rose Eldridge, and Betsy Taylor-Newlove. Paul was formerly president of the Gothic Fook Workers Guild and is currently executive director of the Historical Art Deco Bookbinding Society. Working with both institutional and private clients, he has restored hundreds of books over the years.
</p>
</div> «/section?
396
Создание страницы
Содержимое раздела «О себе» заключено ₽ элемент section с классом about Вдобавок я назначил ему идентификатор about, чтобы указать этот элемент в навигационной ссылке About (О себе) в шапке. Вы на пути к победе! Далее следует важнейший раздел «Контактная информация».
Контактная информация
Последним элементом основной части страницы портфолио будет раздел с контактной информацией, где вы приводите способы, которые позволят заинтересованным посетителям связаться с вами Как минимум вы должны указать адрес электронной почты, а также можете добавить ссылки на наши профили в социальных сетях.
Раздел «Контактная информация» прост' нем содержатся заголовок, вводный абзац, адрес электронной почты и ссылки на социальные сети Рассмотрим пример.
ЧАВО
Можно ли попросить людей связаться со мной с помощью формы?
Форма — отличный способ получить сообщение, но она не слишком хорошо подходит для больший ства начинающих вебдизайнеров, поскольку для обработки данных формы требуется довольно слож ный сценарий. Однако некоторые сервисы в Интернете позволяют не только создать веб-форму, но и обработать данные. Взгля ните на сайты TypeForm iwww.typeform.comi и Wufoo www.wufoo.com)
► Пример
с£> Ссылка: wdpg.io/2/projects/portfolio-page/8
В этом примере мы добавим на страницу портфолио раздел «Контактная информация».
Элемент hi	Элемент р
<section class—
"contact">
pout at й’зо/ЛооЛ лх com
Contact Me
If you wont to know mote «bout my work, or if you want to dbcuss в pt eject, pieese get № touch.
Aitemaavey, dick in coo beraw to reecn out us-ng yoir fevontt sochl network:
<div dass=
"contact-text">
<div dass="contart-sodal-links">
.contact {
margin-bottom: Irem;
}
.contact-text p {
margin: . Srem 0 1.5rem;
font-size: 1.25rem;
}
.contact-social-links a { margin-right: 1.5em;
}
Настраиваем подвал как flex -контейнер
397
Проект: подготовка веб-портфолио
Контейнер для текста раздела	Контейнер с содержимым
«Контактная информация» представляем	раздела «Контактная
содой элемент div с классом contact-text	информация» — эмо
элемент section с классом «section class="contact" id="contact"> м идентификатором г <div class="contact-text"> V contact <h2?Contact Me«/h2>
<p>	X---/
If you want to know more about my work, or if you want to discuss a project, please get in touch:
</p>
<pxi>paul at thisoldbook dot com</ix/p> <P>
Alternatively, click an icon below to reach -ut using your favorite social network:
</p>
</div> d-v <div class="contact-social-links"? <a href="#" class="contact-social-link"?«img src»"/ images/facebook-round.png" alt-"Facebook icon"x/a>
<a href»"#" class="contact-social-link"ximg src»"/ images/twitter-round,png" alt»"Twitter icon"x/a>
<a href»"#" class="contact-social-link"ximg src»"/ images/instagram-round.png" alt="lnstagram icon"x/a>
</div> «/section?
Контейнер co ссылками на социальные сети раздела «Контактная информация» — это элемент div с классом contact-social-links
ПАМЯТКА
Добавляя адрес электронной почты в раздел «Контактная информация», не указывайте его обычным тек стом, иначе адрес прочтут боты-спамеры. Вместо этого измените его так, чтобы е.го мог прочитать человек, но не боты, — например, вместо символа (а напишите слово -собака».
Содержимое текста раздела «Контактная информация» заключено в элемент section с классом contact и таким же идентификатором поэтому мы можем использовать этот элемент в качестве привязки для кнопки Contact (Контактная информация) в шапке и кнопки Contact Me (Свяжитесь со мной) во вводной части портфолио
Ваша страница портфолио почти готова1 Осталось добавить подвал о котором я расскажу в следующем разделе
Подвал страницы
Последний элемент портфолио — подвал Как показано в следующем примере, я добавил в подвал уведомления об авторских правах и несколько ссылок на дру! ие разделы сайта.
Подвал заключен в элемент footer, настроенный как flex-контейнер Уведомление об авторских правах представляет собой flex-элемент с классом footer-copyright выровненный по левому краю, а набор ссылок на сайт — flex-элемент с классом footer-links, выровненный по правому краю
398
Создание страницы
► Пример
[=£> Ссылка: wdpg.io/projects/2/portfolio-page/9
В этом примере мы добавим на страницу портфолио подвал.
ВЕБ-СТРАНИЦА
<div class='footer-copyng ht'>
Элемент	-► Copyright 202 3 This Old Book
footer
Home FAQ Site Map Privacy
<div class="footer-links">
footer {
display: flex;
padding: lem 0;
border-tcp: lpx solid #a99879;
}
.footer-copyright { flex; 1 0 50%; text-align: left; fiint-style: italic; font-size: 1.25em;
}
.footer-links { flex: 1 0 50%; text-align: right; font-size: 1.25em;
}
.footer-links a { color: #362507; margin-left: lem;
}
Настраиваем подвал как flex-контейнер
<footer>
<div class="footer-copyright"> Copyright 2023 This Old Book </div>
<div class="footer-links">
<a
<a sa <a
href="#">Home</a> href="#">FAQ</a> href="#">Site Map</a> href="#">Privacy<./a>
</div>
*----Уведомление од авторских
правах в подвале размечем элементом div с классом footer-copyright
контейнер со ссю!лками на разделю/ сайта в подвале — а м-элемент с классом footer-links
c/footeo
Поздравляем! Вы создали отличную страницу портфолио В следующем разделе вы найдете информацию о том как при желании улучшить проект.
399
Проект: подготовка веб-портфолио
ПРОДОЛЖЕНИЕ РАБОТЫ
Финальный вариант страницы портфолио (мой вариант показан на рис. 20 4) — отличное начало для распространения информации о ваших творческих достижениях.
This Old Book
Bonk Restoration and Repair
Vi-.- —гд Пн Old Book, tne online home of book restorei * hx Uchdnes. i take old books that have seen Better days and ft кап j-w не into inem witn taie*ui ana respectr.ii r epairs ano гыам< -.и ftprecious family Bible thacs a little woise for wwr> -ih-r a ли or important book mat could use some TIC?
Some Recent Work
Here are some of my recent restoration projects. The images you see below are the “before* versions of each book To see an 'after* version, move your mouse over an image (or tap it).
► Рис. 20.4.
Страница портфолио, ютовая для размещения в Интернете
About Me
Paul McFedries Is a book conservator, bookbinder, and an expert in the history and conservation of Gothic and Art Deco bookbindings. Helsa graduate of the Canadian Bookbinding and Book Arts Guild, and apprenticed with some of the top North American and European book restorers, including Don Palmer. Rose Eldridge, and Betsy Tayior-Newlove Paul was formerly president of the Gothic Book Workers Guild and is currently executive director of tne Htstoiical An Deto Bookbinding Society.
Working with ootn institutional and private clients, he nas restored hundreds of books over tne years,
Contact Me
If you want to know more about my work, or If you want to discuss a project, please get in touch:
paulm thisoldbook acx com
Alternatively, dick an icon below to reach out using your favorite social network:
Cooyright 2023 тЫ$ От Book
Home FAQ Site Map Privacy
400
Резюме
Главное, чего не хватает странице портфолио. — адаптивности Страница хорошо выглядит в браузерах на экранах компьютеров и даже на планшетах с высоким разрешением в альбомной ориентации однако на небольших экранах компоновка нарушается Я даю вам упражнение по добавлению контрольных точек медиавыражений (см главу 14), которые позволят странице выглядеть прекрасно на экранах любого размера, вплоть до смартфона
Это последняя глава книги, но ваше образование в области вебдизайна не завершено Обязательно загляните на сайт Web Design Playground (https://webdesignplayground.io/2), где вы найдете множество примеров, упражнений и уроков, которые помогут вам опочить свои навыки и расширить знания. Увидимся1
РЕЗЮМЕ
•	Сначала следует набросать эскиз планируемого сайта
•	Далее нужно выбрать шрифты для заголовков и основного текста страницы.
•	Затем необходимо подобрать цвета для фона и шрифтов.
•	Потом нужно сформировать базовую структуру страницы основные HTML-элементы и глобальные CSS-свойства, применяемые к телу страницы (элементу body)
•	После этого следует сверстать flex- макет
•	Затем нужно наполнить содержимым и отформатировать разделы страницы в таком порядке шапка, вводный текст, примеры портфолио, раздел «О себе», раздел «Контактная информация» и подвал.
Приложение
От песочницы к реальным проектам: создание веб-страниц
Вы многое узнали из этой книги и. надеюсь, проработали лее упражнения, придал страницам своего сайта должный лоск Но прежде, чем вычеркивать пункт «Создать сайт» из списка ближайших дел, необходимо выполнить еще несколько задач найти для сайта место во Всемирной паутине и выгрузить файлы сайта в Интернет. Это приложение поможет решить обе задачи. Сначала вы узнаете, как найти и зыбрать локацию в Интернете, где друзья, близкие и даже совершенно незнакомые люди из дальних уголков мира смогут увидеть ваше творение Затем вы узнаете, как и с помощью чего перенести веб-страницы из песочницы для веб-дизайна или с жесткого диска в Интернет и как их там закрепить
402
Сохранение проектов из песочницы
СОХРАНЕНИЕ ПРОЕКТОВ
ИЗ ПЕСОЧНИЦЫ
Если для экспериментов bdi использовали песочницу Web Design Playground и даже создали в них свои проекты, то следующим шагом будет перенос кода из песочницы на ваш компьютер Существует два способа сделать это скопировать код и скачать его Для начала я покажу вам, как копировать код из песочницы.
Копирование кода из песочницы
В песочнице Web Design Playground много HTML- и CSS-кода он есть на страницах уроков, а также н HTML- и CSS-редакторах. Один из способов сохранить код на свой компьютер — скопировать его из песочницы Playground После этого можно вставить код в файл, используя текстовый редактор В песочнице Web Design Playground доступны три способа копирования кода.
• Со страницы урока. Когда на странице урока встречается фрагмент HTML- или CSS-кода, под кодом появляется кнопка Copy to Clipboard (Копировать н буфер обмена) (рис П 1). Нажмите ее. чтобы скопировать код в буфер обмена компьютера (область памяти, используемая для хранения последних скопированных или вырезанных данных)
CSS .quotation { padding: 0.5em; width: 8058; border: Зрх double green;
}
Copy to ClipDoard
► Рис. П.1. Чтобы скопировать
HTML- или CSS-код co страницы урока в песочнице Weo Design Playground, нажмите кнопку Copy to Clipboard (Копировать в буфер обмена)
• Из окна редактора HTML. Редактор HTML содержит HTML-код текущего урока, измененный вами HTML-код либо новый HTML-код, добавленный вами в песочницу Независимо от происхождения вы можете скопировать HTML-код нажав кнопку меню в левом верхнем углу HTML-редактора, а затем выбрать команду Сору to clipboard (Копировать в буфер обмена) (рис. П 2) Эта команда копирует полный HTML-код в буфер обмена чашего компьютера
403
От песочницы к реальным проектам
Display еп Qis
HTML
wges/your-logo-
е <hl>
к Рис. П.2. Чтобы скопировать код из НТ ML-редактора, нажмите кнопку меню редактооа, а затем выберите команду Сору to Clipboard (Копировать в буфер обмена)
pb
6 <nav>
7 <ul>
<li Нояе /li?
• Из окна редактора CSS, Редактор CSS содержит CSS-код текущего урока, существующий код CSS, измененный вами CSS-код либо новый CSS-код добавленный вами в песочницу. Независимо от происхождения вы можете скопировать CSS-код, нажав кнопку меню । левом верхнем углу CSS-редактора, а затем выбрать команду Copy to clipboard (Копировать в буфер обмена) (рис П 3). Эта команда копирует полный CSS-код в буфер обмена вашего компьютера
► Рис. П.З. Чтобы скопировать код из CSS-редактора, нажмите кнопку меню редактора, а затем выберите команду Сору to clipboard (Копировать в буфер обмена)
X
Display errors
Copy to clipboard
(I। ।nig;
rent-size:
CSS
ng: border-box;
order-box;
Когда команда Copy to clipboard (Копировать в буфер обмена) будет выполнена, откройте HTML- или CSS-файл . текстовом редакторе на компьютере, установите указатель мыши там, где должен появиться скопированный код, а затем в интерфейсе текстового редактора выполните команду для вставки данных из буфера обмена. В подавляющем большинстве редакторов для этого нужно выбрать команду вида Edit ► Paste (Редактировать ► вставить) или нажать сочетание клавиш Ctrl+V (Windows) или Cmd+V (Mac).
Скачивание кода из песочницы
Вместо тою чтобы копировать/вставлять фрагменты HTML- или CSS-кода по очереди, можно извлечь все содержимое HTML- и CSS-редакторов песочницы. Так можно поступить, если вам нужен весь
404
Выбор редактора кода
код конкретного урока или если вы создали собственную песочницу и наполнили ее HTML- и CSS-кодом
Выполните следующие действия.
1	На сайте Web Design Playground откройте урок, в котором есть нужный вам код, или песочницу с вашим кодом
2.	Нажмите кнопку Menu (Меню) и в разделе Playground (Песочница) выберите пункт Download code (Скачать код). Программа соберет код в ZIP-архив, и браузер сможет скачать этот файл
3.	Найдите скачанный файл, webdesign. zip
4.	Дважды щелкните на архиве webdesign.zip. чтобы открыть его В открывшейся папке вы увидите два файла.
• Файл index.html содержит базовую структуру HTML-страницы с содержимым HTML-редактора, вставленным между тегами <body> и </body>. Кроме того, он содержит в разделе <head> элемент link, который ссылается на файл styles.css.
* Файл styles.css содержит содержимое редактора CSS.
5.	Скопируйте или переместите эти файлы в папку, в которой хранятся остальные файлы вашего сайта (например, файлы изображений).
Теперь, когда код из песочницы хранится на вашем компьютере Мас или ПК. можно выкладывать его в Интернет. Но прежде, чем это делать, вам нужно выполнить еще несколько действий, чтобы подготовить файлы к публикации в Интернете.
ВЫБОР РЕДАКТОРА КОДА
Для экспериментов с HTML- и CSS-кодом вы можете использовать песочницу Web Design Playground, но, когда придет время серьезно заняться веб-дизайном вы захотите работать с локальными файлами на своем компьютере Для этого ^ам понадобится текстовый редактор желательно разработанный с учетом особенностей верстки вебстраниц Хорошее ПО для веб-дизайна оснашено такими функциями, как подсветка синтаксиса (определенные элементы синтаксиса выделяются разным цветом для удобного чтения), нумерация строк, автозавершение кода (когда вы начинаете набирать, скажем, имя свойства редактор отображает список возможных вариантов, позволяя завершить ввод, щелкнув кнопкой мыши) и обработка текста (например, автоматический отступ блоков кода, преобразование табуляции в пробелы и наоборот, смешение фрагментов кода вправо/ влево, удаление излишних пробелов в конце строк и сокрытие блоков
405
От песочницы к реальным проектам
кода). Приведу несколько редакторов, которые предлагают все эти функции (и, как правило многие другие)
•	Notepad++ — доступен только для Windows. Доступен бесплатно (https://notepad-plus-plus.org)1
•	Nova — программа доступна для Мас по цене 99 долларов, но есть и бесплатная пробная версия (https://nova.app).
•	Sublime Text — npot рамма доступна для Windows и Мас по цене 99 долларов, но есть и бесплатная пробная версия iwww.sublime-text.com)
•	Visual Studio Code — прог рамма доступна бесплатно для Windows и Мас (https://code.visualstudio.com)
НАСТРОЙКА ПАПОК
Оформляя подписку на хостинг для размещения сайта в Интернете (см. раздел «Выбор хостинг-провайдера» далее в этом приложении), вы получите доступ в собственную папку, н которой можно хранить файлы на сервере Это корневая папка вашего сайта Скорее всего, вы сразу зададите вопрос сколько вложенных папок нужно создавать в корневом каталоге — одну или несколько7
Не всегда ясно, нужны ли сложенные папки, поэтому рассмотрим возможные сценарии.
•	Один веб-проект, состоящий из одного файла. Самый простой веб-гроект, например лендинг, состоит из одного HTML файла Он содержит текст, HTML-теги, правила CSS как строчные, так и во внутренней таблице стилей (то есть между тегами <style> и </style>), а также удаленное (то есть сами файлы хранятся на других сайтах) мультимедийное содержимое (например изображения). В этом случае файл можно хранить в корневой папке, и вложенные папки вам не нужны.
•	Один веб-проект, состоящий из небольшого количества файлов Большинство простых или любительских веб-проектов состоят из нескольких файлов HTML-файла, CSS-файла и графических файлов В этом случае вложенные папки почти наверняка не понадобятся, поэтому все файлы можно хранить в корневой папке.
•	Один веб-проект, состоящий из множества файлов. Нередко большой проект содержит несколько HTML- и CSS-файлов множество мультимедийных файлов, г частности изображений В этом случае HTML-файлы можно поместить в корневую папку
406
Проверка кода
и создать отдельные подпапки для других типов файлов CSS. изображений и т д
• Несколько веб-проектов. Когда вы освоитесь в области веб-дизайна. то поймете, что нельзя создать только один проект. Несколько проектов — норма, и в этом случае следует разделять проекты, храня каждый из них в отдельной подпапке Если конкретный проект велик, то вы можете создать подпапки для хранения различных типов файлов проекта (CSS, изображения, видео и т д.).
Зачем я говорю об этом уже сейчас7 Вы неизмеримо упростите и улучшите свою жизнь веб-дизайнера, если настроите структуру локальных папок на своем компьютере по аналогии со структурой на удаленном сервере (после регистрации на сайте хостинг-провайдера).
1.	Для начала создайте локальную папку в качестве основног о места хоанения ваших веб-файлов.
Она будет служить локальным эквивалентом корневой папки на веб-сервере
2	Если вы работаете над несколькими веб-проектами, то создайте для каждого проекта отдельную папку
3.	Если проект достаточно велик и требует вложенных папок для определенных типов файлов, то создайте нужные вложенные папки в каталоге проекта
4.	Скачивая файлы из песочницы Playground (как описано в предыдущем разделе) или создавая собст венные файлы H TML, CSS или изображения, сохраняйте их в соответствующих локальных папках. Следующая задача — проверить код на соответствие требованиям
ПРОВЕРКА КОДА
Как отмечалось в книге, HTML-элементы и CSS-свойства несложные, но могут порождать проблемы. Если вы забудете указать закрываю-щий тег или скобку, пропустите кавычки или запятую, неправильно напишете имя тега или свойства, то велика вероятность, что ваша веб-страница не будет отображаться должным образом. В некоторых случаях ошибка бросается е глаза (если, к примеру, содержимое на странице вообще не отображается), но чаще она незаметна или сложна в обнаружении.
В любом случае вряд ли е ы захотите выставлять страницу с ошибками на всеобщее обозрение, поэтому, помимо внимательного изучения HTML- и CSS-кода, можно запросить помощь в Интернете, отправив свой код на сайт одного из сервисов проверки
ПАМЯТКА
Еще один способ запустить про верку — скопировать HTML код из текстового редактора, перейти на вкладку Validate by Direct Input (Проверка путем непосредственного ввода), вставить HTML-код в текстовое поле, а затем нажать кнопку Check (Проверить).
407
От песочницы к реальным проектам
Проверка HTML-кода
Консорциум World Wide Weo Consortium (W3C) поддерживав! сервис проверки кода, который может проверить HTML-разметку и сообщить, содержит пи она ошибки или неточности. Чтобы использовать данный сервис, выполните следующие действия
1	В браузере перейдите на сайт https://validator.w3.org
2.	Перейдите на вкладку Validate by File Upload (Проверка путем загрузки файла).
3.	Нажмите кнопку Browse (Обзор)
Сайт предложит вам выбрать файл, который необходимо проверить.
4.	Выберите HTML-файл, который нужно проверить, и нажмите кнопку Open (Открыть) Файл будет загружен на сайт.
5	Нажмите кнопку Check (Проверить). Сервис проверки разметки проверит HTML-код и отобразит результаты.
В идеале вы увидите сообщение No errors or warnings to show (Ошибок и предупреждений нет) (рис. П.4).
► Рис. П.4. HTML-проверка показала' ошибок и предупреждений нет
408
Проверка кода
Если ваш HTML файл не прошел проверку, то вы увидите сообщения об ошибках и/или предупреждения (рис П 5).
1	Element title must not be empty
From line 5, column 16; to №e 5 column 23
<tltieJ</titli>D
2	.	г..» Attribute cits not allowed on element hl at thia point
From Ine 9, column 1 to me 9 column 24
<body>Q<bl cl*s>*eain-he*diitg*>Weird
There were errors.
Used ам HTML parser
ТоШ e»eoraon hme 3 mmsaconds
► Рис Л 5. Найдены ошибки
Проверка CSS-кода
Консорциум W3C поддерживает сервис проверки CSS-разметки, которая может проанализировать наш CSS-код и предупредить о найденных ошибках или неточностях Чтобы использовать данный сервис, выполните следующие действия.
1.	В браузере перейдите на сайт https://jigsaw.w3.org/css-validator.
2	Перейдите на вкладку By File Upload (Загрузка файлов).
3.	Нажмите кнопку Browse (Обзор) (Windows) или Choose File (Выбрать файл) (macOS)
Сайт предложит выбрать файл, который необходимо проверить.
4.	Выберите CSS-файл, который нужно проверить, и нажмите кнопку Open (Открыть) Файл будет загружен на сайт
5.	Нажмите кнопку Check (Проверить). Сервис проверки разметки проверит CSS-код и отобразит результаты.
В идеале вы увидите сообщение No Error Found (Ошибок не обнаружено) (рис П.6)
ПАМЯТКА
Еще один способ запустить проверку — скопировать CSS код из текстового редактора, перейти на вкладку By Direct Input (Проверка путем непосредственного ввода), вставить CSS-код в текстовое поле, а затем нажать кнопку Check (Проверить).
409
От песочницы к реальным проектам
wscr
The W3C CSS Validation Service
W3C CSS Validator result» for styles css (CSS level 3)
Jump to validated css
W3C CSS Validator results for styles.css (CSS level 3)
Congratulations! No Error Found.
Ths document validates asCSSleyeljl
► Рис. П.б. CSS-проверка показала ошибок и предупреждений нет
Если ваш CSS-файл не прошел проверку, то вы увидите сообщения об ошибках и/или предупреждения (рис. П.7).
W3C
The W3C CSS Validation Service
W3C CSS VAiiditor retull* tor style» cm (CSS level 3)
Jump to Errors (2) Validated CSS
W3C CSS Validator results for styles.css (CSS level 3)
Sorry! We found the following errors (2)
ufil : styles.css
4 body	value Error font-sue unknown dimension 20p2
Ю divp	value Error color purpe1 is not a color value purpei
► Рис. П.7. Найдены ошибки
После того как вы исправили все ошибки и коде, ваши HTML-и CSS-файлы готовы к публикации Но прежде следует определиться с локацией их размещения То есть рам нужно найти хостинг-провайдера.
ВЫБОР ХОСТИНГ-ПРОВАЙДЕРА
Еще в главе 1 вы узнали, что зеб-страница хранится на специальном компьютере, называемом веб-сервером, который принимает запросы браузера о предоставлении страницы и связанных с ней файлов и отвечает на них. Прежде чем посетители смогут просматривать ваш веб-проект, зы должны разместить его файлы на веб-сервере Для этого вам нужно зарегистрироваться на сайте компании, сдающей в аренду место на своем сервере Такие компании назызаются хостинг-провайдерами или хостинговыми компаниями
410
Выбор хостинг-провайдера
Какими критериями следует руководствоваться при выборе хостинг-провайдера7 Ответ зэе.исит от типа сайта, который вы размещаете, но наиболее распространенными являются следующие критерии.
•	Допустимый объем трафика — максимальный объем данных с вашего сайта в месяц, который хостинг-провайдер будет передавать браузерам В большинстве случаев вы дополнительно оплачиваете трафик, превышающий лимит, входящий в абонентскую плату. Некоторые хостинг-провайдеры предлагают услугу неограниченного трафика.
•	Общее дисковое пространство — объем пространства на жестком диске, выделяемого на веб-сервере Общее дисковое пространство обычно составляет не менее нескольких сотен мегабайт, что более чем достаточно для простого сайта
•	Количество сайтов - количество корневых папок, которые можно создать.
•	Количество адресов электронной почты — количест во адресов электронной почты, которые включены ь услугу хостинга.
•	Хостинг доменных имен — поддерживает ли хостинг-провайдер доменные имена, купленные у регистратооов доменных имен Одни хостинг-провайдеры сами продают доменные имена, а другие предлагают услугу бесплатного размещения на поддомене вида вашдомен.webhostdomam.com.
•	Поддержка FTP — протокола передачи файлов, который представляет собой интернет-сервис, используемый для скачивания файлов с веб-хоста и загрузки их на него. Почти все хостинг-провайдеры поддерживают FTP. но некоторые допускаюттолько собственные интерфейсы передачи файлов
Как правило чем дешевле хостинг, тем меньше функций вы получите Прежде чем начать поиск хостинг-провайдера, составьте список предлагаемых функций и выберите, что вам нужно, а что — нет. На первом этапе это может быть сложно, например, в случае с максимальным трафиком, поскольку он частично определяется тем. насколько популяоным станет ваш сайт, а пока посетителей будет немного
При поиске хостинг-провайдера у вас есть три основных варианта • Ваш интернет-провайдер (ISP). Компания или учреждение, че-
рез которые вы выходите в Интернет, могут предлагать услуги хостинга. Многие интернет-провайдеры предлагают бесплатный хостинг для простых персональных сайтов, а некоторые корпоративные сети поддерживают веб-сервер, который можно использовать для тех же целей В большинстве случаев такой
411
От песочницы к реальным проектам
хостинг предлагает минимальный объем трафика и дискового пространства
•	Бесплатный хостинг-провайдер. Многие хостинг-провайдеры предоставляют бесплатные планы по размещению веб-страниц Нюанс в том, что на бесплатных планах большинство функций хостинга недоступны или сильно ограничены, особенно в части выделяемого трафика и дискового пространства, и почти всегда вы можете опубликовать только один сайт. Некоторые бесплатные хостинги еще и встраивают в ваш сайт рекламу, хотя в последнее время это становится редкостью
•	Коммерческий хостинг-провайдер. Если необходимо получить адекватный набор функций для своего сайта, то вам придется купить услуги платного хостинг-провайдера Обратите внимание. что я не говорю о колоссальных суммах Такие популярные хостинг-провайдеры, как Bluehosl (www.bluehost.com). GoDaddy (www.godaddy.com) и HostGator (www.hostgator.com), предлагают многофункциональный хостинг обычно менее чем за 500 рублей в месяц. Если вы планируете заниматься веб-дизайном не только для создания одной простенькой домашней странички, то вам стоит обратить внимание на коммеоческий хостинг.
После оформления договора с хостинг-провайдером обычно проходит от нескольких минут до нескольких часов, прежде чем ваш профиль будет готов Затем можно начинать выгрузку файлов.
ВЫГРУЗКА ФАЙЛОВ
Итак, «аши HTML- и CSS-файлы содержат код и проверены, вспомогательные файлы (к примеру, изображения) готовы, папки настроены, а хостинг-провайдер готов представить ваш сайт миру. Остается только передать файлы с вашего компоютера на сервер веб-хоста Этот процесс называется выгрузкой
Способ выгрузки файлов зависит от хостинг-провайдера но наиболее распространены следующие три метода
•	Протокол FTP Большинство хостинг-провайдеров поддерживают загрузку файлов по данному протоколу. Для этого вам нужно обзавестись FTP-клиентом — программой, которая подключается к FTP-серверу хостинг-провайдера и предоставляет интерфейс для выполнения основных операций с файлами, таких как навигация и создание папок, а также -.ыгрузка. удаление и переименование файлов. Популярные клиенты для Windows — CuteFTP iwww.globalscape.com/cuteftp) и Cyberduck (https://cyberduck.io) Для Мас попробуйте Transmit (https://panic.com/transmit) или FileZilla (https:// filezilla-project.org). Когда программа будет загружена, найдите на
412
Выгрузка файлов
страницах поддержки вашего хостинг-провайдера инструкцию как подключиться к его FTP-серверу
•	Инструмент администрирования cPanel. Его предлагают многие хосгинг-провайдеоы cPanel представляет собой простой интерфейс для решения таких задач хостинга, как управление электронной почтой и доменами. L интерфейсе cPanel также доступен компонент File Manager который можно использовать для выгрузки файлов и выполнения других задач по управлению файлами
•	Собственные инструменты. Некоторые хостинг-провайдеры предлагают собственные интерфейсы для выгрузки и работы с файлами Инструкции можно найти на странице поддержки хостинг-провайдера.
Каким бы способом вы ни воспользовались, загрузите все файлы и папки вашего сайта в корневую папку на сервере хостинг-про-зайдера. Затем загрузите сайт в свой любимый браузер и убедитесь, что он работает нормально. Можете проверить, как работает сайт в нескольких разных браузерах и на нескольких разных устройствах, чтобы убедиться в его доступности широкому кругу пользователей. Добро пожаловать в Интернет'
Пол Макфедрис
Веб-дизайн с нуля: HTML + CSS на практике
2-е издание
Перевел с английского С. Черников
Руководитель дивизиона Руководитель проекта Ведущий редактор Литературный редактор Художественный редактор Корректор
Верстка
Ю. Сергиенко А- Питиримов Н Гринчик Н Хлебина В Мостипан Е Павлович Г. Блинов
Права на издание получены по соглашению с Manning Publications. Все права защищены Никакая часть данной книги не может быть воспроизведена в какой бы го ни было форме без письменного разрешения владельцев авторских прав
Информация содержащаяся в данной книге получена из источников рассматриваемых издательством как надежные Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки связанные с использованием книги В книге возможны упоминания организаций деятельность которых запрещена на территории Российской Федерации таких как Meta Platforms Inc. РасеЬоок, instagram и др. Издательство не несет ответственности за дощупность мате риалов, ссылки на которые вы можете найти е этой книге На момент подготовки книги к изданию все ссылки на интернет-ресурсы были действующими.
Изготовлено в России. Изготовитель ООО «Прогресс книга».
Место нахождения и фактический адрес.
194044. Россия г. Санкт-Петербург Б Сампсониевский пр. д. 29А пом 52.
Тел +78127037373
Дата изготовления 072025. Наименование книжная продукция
Соок годности не ограничен
Налоговая льгота - общероссийский классификатор продукции ОК 034-2014
58.11.12 - Книги печатные профессиональные, технические и научные
Импортер н Беларусь ООО «ПИТЕР М» 220020 РБ, г Минск, ул Тимирязева, д. 121/3. к 214 тел./факс: 208 80 01
Подписано в печать 22 05 25 Формат 70x100/16 Бумага офсетная Усл п л. 33,540
Тираж 700 Заказ 0000
ANK Co., Ltd
HTML/CSS.
ВСЯ ВЕБ-РАЗРАБОТКА В СХЕМАХ И ИЛЛЮСТРАЦИЯХ
Создание веб-страницы с продуманным дизайном и полезными функциями требует технических навыков и знания языков программирования Язык HTML передает структуру документа веб-браузеру с помощью разметки, а таблицы стилей CSS определяют макет и дизайн веб-страницы.
У вас нет опыта работы с HTML и CSS? Ничего страшного1
Книга очень похожа на комикс, а разобраться с веб-разработкой вам помогут огромное количество иллюстраций и персонаж по имени Закладка, который сопровождает текст понятными и смешными комментариями
Вы сразу приступите к созданию веб-страницы и точно не будете скучать. Главное — практика1
КУПИТЬ
ВЕБ
ДИЗАЙН
Трэйси Осборн
ВЕБ-ДИЗАЙН
ДЛЯ НЕДИЗАЙНЕРОВ
Пора сделать веб-разработку доступной для всех. Забавное, полезное и насыщенное информацией руководство охватывает все ключевые принципы дизайна, передовые практики, полезные шоткаты, профессиональные советы, реальные примеры и базовые знания программирования, необходимые для создания красивого веб-сайта, которым вы будете уверенно делиться со всем миром. Почему? Потому что вы научитесь разрабатывать современные сайты!
«Реб дизайн для недизайнеров» содержит все необходимое, чтобы вы чувствовали себя комфортно, занимаясь веб-разработкой, в том числе множество реальных примеров веб-сайтов, которые должны вдохновлять и мотивировать Не нужно тратить время и деньги на дорогого графического дизайнера,, эта книга проведет нас через основы, воспользовавшись самыми быстрыми шоткатами — вы все сделаете сами, и прямо сейчас
купить