Санкт-Петербург «БХВ-Петербург» 2021 УДК 004.43 ББК 32.973-018.1 Р58 Роббинс Дж. Р58 Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика. — 5-е изд.; пер. с англ. — СПб.: БХВ-Петербург, 2021. — 956 с.: ил. ISBN 978-5-9775-4050-6 Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показа- но, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано при- менение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы языка JavaScript и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени за- грузки веб-изображений. В каждой главе представлены упражнения, которые позволят освоить описанные ме- тодики, и краткие контрольные вопросы для закрепления ключевых понятий. В пятом издании добавлен материал об использовании CSS Flexbox и Grid для созда- ния сложных и гибких макетов страниц, тонкостях адаптивного веб-дизайна для отображе- ния веб-страниц на экранах любых устройств, о работе с командной строкой, Git и другими инструментами веб-дизайнера, а также применении SVG-изображений Для веб-дизайнеров УДК 004.43 ББК 32.973-018.1 Группа подготовки издания: Руководитель проекта Евгений Рыбаков Зав. редакцией Екатерина Сависте Компьютерная верстка Людмилы Гауль Оформление обложки Карины Соловьевой © 2021 BHV Authorized Russian translation of the English edition of Learning Web Design 5th edition ISBN 9781491960202 © 2018 O’Reilly Media Inc. Th is translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. © 2021 BHV Авторизованный перевод с английского языка на русский издания Learning Web Design 5th edition ISBN 9781491960202 © 2018 O’Reilly Media Inc. Перевод опубликован и продается с разрешения компании-правообладателя O’Reilly Media, Inc. «БХВ-Петербург», 191036, Санкт-Петербург, Гончарная ул., 20. ISBN 978-1-491-96020-2 (англ.) © O’Reilly Media, Inc., 2018 ISBN 978-5-9775-4050-6 (рус.) © Перевод на русский язык, оформление, ООО «БХВ-Петербург», ООО «БХВ», 2021 ОГЛАВЛЕНИЕ НАПУТСТВИЕ от Джен Симмонс ...................................................................................................................................9 ПРЕДИСЛОВИЕ .....................................................................................................................................................................11 Структура книги ....................................................................................................................................14 Типографские соглашения ...............................................................................................................16 Благодарности ........................................................................................................................................16 Об авторе ..................................................................................................................................................17 Как с нами связаться? .........................................................................................................................18 ЧАСТЬ I. НАЧАЛО РАБОТЫ......................................................................................19 Глава 1. Знакомство с веб-дизайном .............................................................................21 С чего начать? .........................................................................................................................................22 Распределение ролей при разработке сайтов .....................................................................23 Подготовка к веб-разработке ........................................................................................................36 Подведем итоги .....................................................................................................................................41 Контрольные вопросы .......................................................................................................................42 Глава 2. Как все это работает?..........................................................................................43 Связь между Интернетом и Всемирной паутиной ..............................................................43 Порядок обработки информации ................................................................................................44 Пара слов о браузерах ......................................................................................................................45 Адреса веб-страниц: URL..................................................................................................................47 Анатомия веб-страницы ...................................................................................................................51 Собираем все вместе ..........................................................................................................................57 Контрольные вопросы .......................................................................................................................60 Глава 3. Важные концепции ..............................................................................................61 Множественность устройств… .....................................................................................................62 Соблюдение интернет-стандартов ..............................................................................................64 Постепенное улучшение ...................................................................................................................64 Адаптивный веб-дизайн ....................................................................................................................66 Один Интернет для всех (доступность сайтов) ....................................................................69 Потребность в скорости (быстродействие сайта) ...............................................................72 Контрольные вопросы .......................................................................................................................75 ЧАСТЬ II. РАЗМЕТКА HTML, ПРИМЕНЯЕМАЯ ДЛЯ СТРУКТУРИРОВАНИЯ ВЕБ-СТРАНИЦ ............................................................................................77 Глава 4. Создание простой веб-страницы ...................................................................79 Пошаговое создание веб-страницы............................................................................................79 Запуск текстового редактора .........................................................................................................80 Шаг 1. Начнем с ввода контента ...................................................................................................84 Шаг 2. Добавление структуры в HTML-документ .................................................................87 6 Оглавление Шаг 3. Добавление тегов в HTML-документ ............................................................................92 Шаг 4. Добавление изображений .................................................................................................96 Шаг 5. Изменение внешнего вида текста с помощью таблицы стилей ..................100 Устранение проблем при разработке веб-страниц .........................................................101 Валидация документов ....................................................................................................................103 Контрольные вопросы .....................................................................................................................105 Глава 5. Разметка текста ..................................................................................................107 Абзацы ......................................................................................................................................................108 Заголовки ................................................................................................................................................109 Тематические разрывы (горизонтальные линейки) ..........................................................111 Списки ......................................................................................................................................................111 Дополнительные элементы разметки контента .................................................................116 Организация контента на странице..........................................................................................120 Обзор строчных элементов ..........................................................................................................127 Обобщающие элементы (div и span) ........................................................................................141 Улучшение доступности документа с помощью ARIA .....................................................148 Экранирование символов ..............................................................................................................151 Объединяем все вместе ..................................................................................................................154 Контрольные вопросы .....................................................................................................................158 Обзор элементов: текстовые элементы ..................................................................................158 Глава 6. Добавление ссылок ...........................................................................................161 Атрибут href ........................................................................................................................162 Ссылки на веб-страницы в Интернете ...................................................................................164 Ссылки в пределах сайта ................................................................................................................165 Ссылка на фрагмент другого документа ................................................................................176 Открытие новых целевых окон браузера ..............................................................................178 Почтовые ссылки ................................................................................................................................179 Телефонные ссылки ...........................................................................................................................180 Контрольные вопросы .....................................................................................................................181 Обзор элементов: ссылки ...............................................................................................................182 Глава 7. Добавление изображений ..............................................................................183 Раздел первый: добавление изображений с помощью элемента img ................184 Раздел второй: добавление SVG-изображений ..................................................................194 Раздел третий: разметка адаптивных изображений ........................................................203 Конец — делу венец .........................................................................................................................218 Контрольные вопросы .....................................................................................................................219 Обзор элементов: изображения .................................................................................................221 Глава 8. Таблицы .................................................................................................................223 Использование таблиц ....................................................................................................................223 Минимальная структура таблицы ............................................................................................224 Заголовки таблиц ................................................................................................................................227 Растяжение ячеек ...............................................................................................................................228 Доступность таблиц ..........................................................................................................................231 Оглавление 7 Группировка строк и столбцов ....................................................................................................233 Собираем все воедино ....................................................................................................................235 Контрольные вопросы .....................................................................................................................237 Обзор элементов: таблицы ............................................................................................................238 Глава 9. Формы ....................................................................................................................239 Как работают формы?. ......................................................................................................................239 Элемент form ............................................................................................................241 Переменные и контент ....................................................................................................................245 Элементы управления формой ...................................................................................................246 Функции доступности формы ......................................................................................................270 Макет и дизайн формы ....................................................................................................................275 Контрольные вопросы .....................................................................................................................277 Обзор элементов: формы ...............................................................................................................278 Глава 10. Встроенные мультимедийные объекты .....................................................285 Окно в окне: элемент iframe ........................................................................................................285 Многоцелевое средство для встраивания: object ...........................................................288 Видео и аудио ......................................................................................................................................290 Холст ..........................................................................................................................................................301 Контрольные вопросы .....................................................................................................................305 Обзор элементов: встроенные мультимедийные объекты .........................................306 ЧАСТЬ III. ПРАВИЛА CSS ДЛЯ ПРЕДСТАВЛЕНИЯ HTML-ДОКУМЕНТОВ ........309 Глава 11. Введение в каскадные таблицы стилей .....................................................311 Преимущества CSS .............................................................................................................................312 Мощь CSS ................................................................................................................................................312 Как работают таблицы стилей? ...................................................................................................313 Важные понятия ..................................................................................................................................320 Единицы измерения CSS .................................................................................................................330 Инструменты вашего браузера для веб-дизайна .............................................................334 Вперед — вместе с CSS ...................................................................................................................336 Контрольные вопросы .....................................................................................................................337 Глава 12. Форматирование текста ..................................................................................339 Основные свойства шрифтов ......................................................................................................340 Расширенная CSS3-типографика .................................................................................................361 Свойство color (изменение цвета текста) ..............................................................................363 Еще о типах селекторов ..................................................................................................................365 Настройки текстовых строк .........................................................................................................371 Изменение маркированного и нумерованного списков ...............................................383 Контрольные вопросы .....................................................................................................................387 Обзор CSS: свойства font и text ...............................................................................................388 Глава 13. Цвета и фоны, а также еще о селекторах и внешних таблицах стилей ..391 Указание цветовых значений .......................................................................................................391 Свойство color (цвет переднего плана) ..................................................................................398 8 Оглавление Свойство background-color (цвет фона) ................................................................................399 Свойство background-clip (обрезка фона) ...........................................................................400 Свойство opacity (управление непрозрачностью) ...........................................................401 Селекторы псевдокласса ...............................................................................................................403 Селекторы псевдоэлементов.......................................................................................................408 Селекторы атрибутов .......................................................................................................................411 Фоновые изображения ....................................................................................................................413 Все цвета радуги (градиенты) ......................................................................................................431 И, в завершение, внешние таблицы стилей .........................................................................438 Подводим итоги ..................................................................................................................................442 Контрольные вопросы .....................................................................................................................442 Обзор CSS: свойства цвета и фона ...........................................................................................444 Глава 14. Блочная модель .................................................................................................445 Блок элемента .....................................................................................................................................445 Свойства width, height и box-sizing (указание размеров блока) ............................446 Отступы ....................................................................................................................................................451 Стили границ .........................................................................................................................................457 Поля ..........................................................................................................................................................468 Присваивание типов отображения ...........................................................................................474 Тени для блока .....................................................................................................................................476 Контрольные вопросы .....................................................................................................................477 Обзор CSS: свойства блока ............................................................................................................478 Глава 15. Плавающие элементы и позиционирование ............................................481 Нормальный поток ............................................................................................................................481 Плавающие элементы ......................................................................................................................482 Свободное обтекание текстом CSS-форм .............................................................................494 Основы позиционирования ..........................................................................................................502 Относительное позиционирование .........................................................................................504 Абсолютное позиционирование .................................................................................................505 Фиксированное позиционирование .........................................................................................514 Контрольные вопросы .....................................................................................................................516 Обзор CSS: свойства плавающих элементов и позиционирования .........................517 Глава 16. CSS-макетирование с помощью Flexbox и Grid .......................................519 CSS Flexbox: создание гибких контейнеров ........................................................................520 Модуль CSS Grid Layout ...................................................................................................................549 Контрольные вопросы ....................................................................................................................584 Обзор CSS: свойства макета .........................................................................................................588 Глава 17. Адаптивный веб-дизайн ..................................................................................591 Зачем нужен АВД? ..............................................................................................................................591 Рецепт адаптивности ........................................................................................................................593 Настройка области просмотра ....................................................................................................594 Гибкие сетки (текучие макеты) ....................................................................................................595 Выбор точек прерывания ..............................................................................................................603 Оглавление 9 Стратегии адаптивной разработки ...........................................................................................606 Несколько слов о тестировании.................................................................................................622 Дополнительные справочные ресурсы по адаптивному веб-дизайну ...................624 Контрольные вопросы .....................................................................................................................626 Глава 18. Переходы, трансформации и анимация .....................................................627 CSS Transitions .......................................................................................................................................628 Модуль CSS Transforms ....................................................................................................................638 Анимация по ключевым кадрам .................................................................................................650 Несколько завершающих слов ....................................................................................................655 Контрольные вопросы .....................................................................................................................657 Обзор CSS: переходы, трансформации и анимация .........................................................659 Глава 19. Дополнительные сведения о CSS-методиках ...........................................661 Стайлинг форм .....................................................................................................................................661 Специальные свойства для форматирования таблиц ....................................................665 Очистка стилей: сброс CSS и таблица стилей Normalize.css ..............................669 Методика подмены текста изображением ............................................................................671 CSS-спрайты ..........................................................................................................................................673 Проверка поддержки свойств CSS ............................................................................................675 Таблицы стилей: послесловие ....................................................................................................680 Контрольные вопросы ....................................................................................................................680 Обзор CSS: свойства таблиц .........................................................................................................682 Глава 20. Современные инструменты для веб-дизайна .........................................683 Знакомство с командной строкой ............................................................................................683 Универсальные CSS-инструменты (процессоры) ...............................................................689 Grunt и Gulp: инструменты для сборки кода .......................................................................697 Контроль версий с помощью Git и GitHub ............................................................................701 Заключение ............................................................................................................................................710 Контрольные вопросы .....................................................................................................................711 ЧАСТЬ IV. ПРИМЕНЕНИЕ JAVASCRIPT ДЛЯ УПРАВЛЕНИЯ ПОВЕДЕНИЕМ ВЕБ-СТРАНИЦ ...........................713 Глава 21. Введение в JavaScript ........................................................................................715 Что есть JavaScript? ............................................................................................................................715 Добавление кода JavaScript на веб-страницу ......................................................................719 Анатомия сценария ...........................................................................................................................721 Объект браузера .................................................................................................................................737 События ...................................................................................................................................................737 Объединяя все вместе .....................................................................................................................740 Дополнительные сведения о JavaScript ..................................................................................741 Контрольные вопросы .....................................................................................................................743 Глава 22. Использование JavaScript и DOM ................................................................745 Встречайте DOM ..................................................................................................................................745 Полифилы ...............................................................................................................................................755 10 Оглавление Библиотеки JavaScript.......................................................................................................................758 Промежуточный финиш ..................................................................................................................763 Контрольные вопросы .....................................................................................................................764 ЧАСТЬ V. ИЗОБРАЖЕНИЯ ДЛЯ ВСЕМИРНОЙ ПАУТИНЫ ................................765 Глава 23. Веб-графика: основные понятия ...................................................................767 Источники изображений ................................................................................................................767 Знакомство с форматами изображений .................................................................................772 Размер и разрешение изображения ........................................................................................785 Стратегия работы с изображениями ........................................................................................789 Фавиконы ................................................................................................................................................793 Подведем итоги… ..............................................................................................................................797 Контрольные вопросы .....................................................................................................................798 Глава 24. Создание веб-изображений ...........................................................................799 Сохранение изображений в веб-форматах ..........................................................................799 Работа с прозрачностью ................................................................................................................806 Советы по созданию адаптивных изображений ................................................................813 Оптимизация изображения ...........................................................................................................823 Контрольные вопросы ....................................................................................................................834 Глава 25. SVG-изображения...............................................................................................835 Рисование с помощью XML ...........................................................................................................837 Возможности SVG, связанные с XML .......................................................................................846 Инструменты SVG ...............................................................................................................................853 Советы по созданию SVG ..............................................................................................................856 Адаптивные изображения в формате SVG ...........................................................................860 Дальнейшее изучение SVG ..........................................................................................................868 Контрольные вопросы ....................................................................................................................868 И ... мы это сделали! .........................................................................................................................869 ЧАСТЬ VI. ПРИЛОЖЕНИЯ..........................................................................................871 Приложение 1 ............................................................................................................................873 Приложение 2 ...........................................................................................................................889 Приложение 3 ............................................................................................................................891 Приложение 4 ............................................................................................................................897 ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ .......................................................................................906