Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика. 5-е изд.
Год издания: 2021
Автор: Роббинс Дженнифер
Переводчик: ООО БХВ-Петербург
Издательство: БХВ-Петербург
ISBN: 978-5-9775-4050-6
Язык: Русский
Формат: PDF
Качество: Издательский макет или текст (eBook)
Количество страниц: 943
Описание: Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах
показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании
веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано
применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования
страниц и выполнения простой анимации. Даны основы языка JavaScript и подчеркнута
его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки
веб-изображений.
В каждой главе представлены упражнения, которые позволят освоить описанные методики,
и краткие контрольные вопросы для закрепления ключевых понятий.
В пятом издании добавлен материал об использовании CSS Flexbox и Grid для создания
сложных и гибких макетов страниц, тонкостях адаптивного веб-дизайна для отображения
веб-страниц на экранах любых устройств, о работе с командной строкой, Git и другими
инструментами веб-дизайнера, а также применении SVG-изображений
Robbins J.N. / Роббинс Дж.Н. - Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics, 5th edition / Изучаем веб-дизайн: руководство для начинающих по HTML, CSS, JavaScript и веб-графике, 5-е издание [2018, PDF, ENG]
Оглавление
НАПУТСТВИЕ от Джен Симмонс ................................................................................................................................... 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
Шаг 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
Группировка строк и столбцов ....................................................................................................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
Свойство 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
Стратегии адаптивной разработки ........................................................................................... 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
Библиотеки 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
