Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика. 5 изд

 Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика. 5-е издание....1

Learning Web Design. A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics....1

Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика. 5-е издание....3

Роббинс Дж. Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика. — 5-е изд.....4

ОГЛАВЛЕНИЕ....5

НАПУТСТВИЕ от Джен Симмонс....11

ПРЕДИСЛОВИЕ....13

СТРУКТУРА КНИГИ....14

ТИПОГРАФСКИЕ СОГЛАШЕНИЯ....16

БЛАГОДАРНОСТИ....16

ОБ АВТОРЕ....17

КАК С НАМИ СВЯЗАТЬСЯ?....18

ЧАСТЬ I. НАЧАЛО РАБОТЫ....19

ГЛАВА 1. ЗНАКОМСТВО С ВЕБ-ДИЗАЙНОМ....20

С ЧЕГО НАЧАТЬ?....21

РАСПРЕДЕЛЕНИЕ РОЛЕЙ ПРИ РАЗРАБОТКЕ САЙТОВ....22

ПОДГОТОВКА К ВЕБ-РАЗРАБОТКЕ....35

ПОДВЕДЕМ ИТОГИ....40

КОНТРОЛЬНЫЕ ВОПРОСЫ....41

ГЛАВА 2. КАК ВСЕ ЭТО РАБОТАЕТ?....42

СВЯЗЬ МЕЖДУ ИНТЕРНЕТОМИ ВСЕМИРНОЙ ПАУТИНОЙ....42

ПОРЯДОК ОБРАБОТКИ ИНФОРМАЦИИ....43

ПАРА СЛОВ О БРАУЗЕРАХ....44

АДРЕСА ВЕБ-СТРАНИЦ: URL....46

АНАТОМИЯ ВЕБ-СТРАНИЦЫ....50

СОБИРАЕМ ВСЕ ВМЕСТЕ....56

КОНТРОЛЬНЫЕ ВОПРОСЫ....59

ГЛАВА 3. ВАЖНЫЕ КОНЦЕПЦИИ....60

МНОЖЕСТВЕННОСТЬ УСТРОЙСТВ…....61

СОБЛЮДЕНИЕ ИНТЕРНЕТ-СТАНДАРТОВ....63

ПОСТЕПЕННОЕ УЛУЧШЕНИЕ....63

АДАПТИВНЫЙ ВЕБ-ДИЗАЙН....65

ОДИН ИНТЕРНЕТ ДЛЯ ВСЕХ (ДОСТУПНОСТЬ САЙТОВ)....68

ПОТРЕБНОСТЬ В СКОРОСТИ (БЫСТРОДЕЙСТВИЕ САЙТА)....71

КОНТРОЛЬНЫЕ ВОПРОСЫ....74

ЧАСТЬ II. РАЗМЕТКА HTML, ПРИМЕНЯЕМАЯ ДЛЯ СТРУКТУРИРОВАНИЯ ВЕБ-СТРАНИЦ....75

ГЛАВА 4. СОЗДАНИЕ ПРОСТОЙ ВЕБ-СТРАНИЦЫ....76

ПОШАГОВОЕ СОЗДАНИЕ ВЕБ-СТРАНИЦЫ....76

ЗАПУСК ТЕКСТОВОГО РЕДАКТОРА....77

ШАГ 1. НАЧНЕМ С ВВОДА КОНТЕНТА....81

ШАГ 2. ДОБАВЛЕНИЕ СТРУКТУРЫ В HTML-ДОКУМЕНТ....84

ШАГ 3. ДОБАВЛЕНИЕ ТЕГОВ В HTML-ДОКУМЕНТ....89

ШАГ 4. ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ....93

ШАГ 5. ИЗМЕНЕНИЕ ВНЕШНЕГО ВИДА ТЕКСТА С ПОМОЩЬЮ ТАБЛИЦЫ СТИЛЕЙ....97

УСТРАНЕНИЕ ПРОБЛЕМ ПРИ РАЗРАБОТКЕ ВЕБ-СТРАНИЦ....98

ВАЛИДАЦИЯ ДОКУМЕНТОВ....100

КОНТРОЛЬНЫЕ ВОПРОСЫ....102

ГЛАВА 5. РАЗМЕТКА ТЕКСТА....103

АБЗАЦЫ....104

ЗАГОЛОВКИ....105

ТЕМАТИЧЕСКИЕ РАЗРЫВЫ (ГОРИЗОНТАЛЬНЫЕ ЛИНЕЙКИ)....107

СПИСКИ....107

ДОПОЛНИТЕЛЬНЫЕ ЭЛЕМЕНТЫ РАЗМЕТКИ КОНТЕНТА....112

ОРГАНИЗАЦИЯ КОНТЕНТА НА СТРАНИЦЕ....116

ОБЗОР СТРОЧНЫХ ЭЛЕМЕНТОВ....123

ОБОБЩАЮЩИЕ ЭЛЕМЕНТЫ (DIV И SPAN)....137

УЛУЧШЕНИЕ ДОСТУПНОСТИ ДОКУМЕНТА С ПОМОЩЬЮ ARIA....144

ЭКРАНИРОВАНИЕ СИМВОЛОВ....147

ОБЪЕДИНЯЕМ ВСЕ ВМЕСТЕ....150

КОНТРОЛЬНЫЕ ВОПРОСЫ....154

ОБЗОР ЭЛЕМЕНТОВ: ТЕКСТОВЫЕ ЭЛЕМЕНТЫ....154

ГЛАВА 6. ДОБАВЛЕНИЕ ССЫЛОК....157

АТРИБУТ HREF....158

ССЫЛКИ НА ВЕБ-СТРАНИЦЫ В ИНТЕРНЕТЕ....160

ССЫЛКИ В ПРЕДЕЛАХ САЙТА....161

ССЫЛКА НА ФРАГМЕНТ ДРУГОГО ДОКУМЕНТА....172

ОТКРЫТИЕ НОВЫХ ЦЕЛЕВЫХ ОКОН БРАУЗЕРА....174

ПОЧТОВЫЕ ССЫЛКИ....175

ТЕЛЕФОННЫЕ ССЫЛКИ....176

КОНТРОЛЬНЫЕ ВОПРОСЫ....177

ОБЗОР ЭЛЕМЕНТОВ: ССЫЛКИ....178

ГЛАВА 7. ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ....179

РАЗДЕЛ ПЕРВЫЙ: ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ С ПОМОЩЬЮ ЭЛЕМЕНТА IMG....180

РАЗДЕЛ ВТОРОЙ: ДОБАВЛЕНИЕ SVG-ИЗОБРАЖЕНИЙ....190

РАЗДЕЛ ТРЕТИЙ: РАЗМЕТКА АДАПТИВНЫХ ИЗОБРАЖЕНИЙ....199

КОНЕЦ — ДЕЛУ ВЕНЕЦ....214

КОНТРОЛЬНЫЕ ВОПРОСЫ....215

ОБЗОР ЭЛЕМЕНТОВ: ИЗОБРАЖЕНИЯ....217

ГЛАВА 8. ТАБЛИЦЫ....219

ИСПОЛЬЗОВАНИЕ ТАБЛИЦ....219

МИНИМАЛЬНАЯ СТРУКТУРА ТАБЛИЦЫ....220

ЗАГОЛОВКИ ТАБЛИЦ....223

РАСТЯЖЕНИЕ ЯЧЕЕК....224

ДОСТУПНОСТЬ ТАБЛИЦ....227

ГРУППИРОВКА СТРОК И СТОЛБЦОВ....229

СОБИРАЕМ ВСЕ ВОЕДИНО....231

КОНТРОЛЬНЫЕ ВОПРОСЫ....233

ОБЗОР ЭЛЕМЕНТОВ: ТАБЛИЦЫ....234

ГЛАВА 9. ФОРМЫ....235

КАК РАБОТАЮТ ФОРМЫ?....235

ЭЛЕМЕНТ FORM....237

ПЕРЕМЕННЫЕ И КОНТЕНТ....241

ЭЛЕМЕНТЫ УПРАВЛЕНИЯ ФОРМОЙ....242

ФУНКЦИИ ДОСТУПНОСТИ ФОРМЫ....266

МАКЕТ И ДИЗАЙН ФОРМЫ....271

КОНТРОЛЬНЫЕ ВОПРОСЫ....273

ОБЗОР ЭЛЕМЕНТОВ: ФОРМЫ....274

ГЛАВА 10. ВСТРОЕННЫЕ МУЛЬТИМЕДИЙНЫЕ ОБЪЕКТЫ....280

ОКНО В ОКНЕ: ЭЛЕМЕНТ IFRAME....280

МНОГОЦЕЛЕВОЕ СРЕДСТВО ДЛЯ ВСТРАИВАНИЯ: OBJECT....283

ВИДЕО И АУДИО....285

ХОЛСТ....296

КОНТРОЛЬНЫЕ ВОПРОСЫ....300

ОБЗОР ЭЛЕМЕНТОВ: ВСТРОЕННЫЕ МУЛЬТИМЕДИЙНЫЕ ОБЪЕКТЫ....301

ЧАСТЬ III. ПРАВИЛА CSS ДЛЯ ПРЕДСТАВЛЕНИЯ HTML-ДОКУМЕНТОВ....304

ГЛАВА 11. ВВЕДЕНИЕ В КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ....305

ПРЕИМУЩЕСТВА CSS....306

МОЩЬ CSS....306

КАК РАБОТАЮТ ТАБЛИЦЫ СТИЛЕЙ?....307

ВАЖНЫЕ ПОНЯТИЯ....314

ЕДИНИЦЫ ИЗМЕРЕНИЯ CSS....324

ИНСТРУМЕНТЫ ВАШЕГО БРАУЗЕРА ДЛЯ ВЕБ-ДИЗАЙНА....328

ВПЕРЕД — ВМЕСТЕ С CSS....330

КОНТРОЛЬНЫЕ ВОПРОСЫ....331

ГЛАВА 12. ФОРМАТИРОВАНИЕ ТЕКСТА....333

ОСНОВНЫЕ СВОЙСТВА ШРИФТОВ....334

РАСШИРЕННАЯ CSS3-ТИПОГРАФИКА....355

СВОЙСТВО COLOR (ИЗМЕНЕНИЕ ЦВЕТА ТЕКСТА)....357

ЕЩЕ О ТИПАХ СЕЛЕКТОРОВ....359

НАСТРОЙКИ ТЕКСТОВЫХ СТРОК....365

ИЗМЕНЕНИЕ МАРКИРОВАННОГО И НУМЕРОВАННОГО СПИСКОВ....377

КОНТРОЛЬНЫЕ ВОПРОСЫ....381

ОБЗОР CSS: СВОЙСТВА FONT И TEXT....382

ГЛАВА 13. ЦВЕТА И ФОНЫ, А ТАКЖЕ ЕЩЕ О СЕЛЕКТОРАХ И ВНЕШНИХ ТАБЛИЦАХ СТИЛЕЙ....385

УКАЗАНИЕ ЦВЕТОВЫХ ЗНАЧЕНИЙ....385

СВОЙСТВО COLOR (ЦВЕТ ПЕРЕДНЕГО ПЛАНА)....392

СВОЙСТВО BACKGROUND-COLOR (ЦВЕТ ФОНА)....393

СВОЙСТВО BACKGROUND-CLIP (ОБРЕЗКА ФОНА)....394

СВОЙСТВО OPACITY (УПРАВЛЕНИЕ НЕПРОЗРАЧНОСТЬЮ)....395

СЕЛЕКТОРЫ ПСЕВДОКЛАССА....397

СЕЛЕКТОРЫ ПСЕВДОЭЛЕМЕНТОВ....402

СЕЛЕКТОРЫ АТРИБУТОВ....405

ФОНОВЫЕ ИЗОБРАЖЕНИЯ....407

ВСЕ ЦВЕТА РАДУГИ (ГРАДИЕНТЫ)....425

И, В ЗАВЕРШЕНИЕ, ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ....432

ПОДВОДИМ ИТОГИ....436

КОНТРОЛЬНЫЕ ВОПРОСЫ....436

ОБЗОР CSS: СВОЙСТВА ЦВЕТА И ФОНА....438

ГЛАВА 14. БЛОЧНАЯ МОДЕЛЬ....439

БЛОК ЭЛЕМЕНТА....439

СВОЙСТВА WIDTH, HEIGHT И BOX-SIZING (УКАЗАНИЕ РАЗМЕРОВ БЛОКА)....440

ОТСТУПЫ....445

ГРАНИЦЫ....450

СТИЛИ ГРАНИЦ....451

ПОЛЯ....462

ПРИСВАИВАНИЕ ТИПОВ ОТОБРАЖЕНИЯ....468

ТЕНИ ДЛЯ БЛОКА....470

КОНТРОЛЬНЫЕ ВОПРОСЫ....471

ОБЗОР CSS: СВОЙСТВА БЛОКА....472

ГЛАВА 15. ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ И ПОЗИЦИОНИРОВАНИЕ....475

НОРМАЛЬНЫЙ ПОТОК....475

ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ....476

СВОБОДНОЕ ОБТЕКАНИЕ ТЕКСТОМ CSS-ФОРМ....488

ОСНОВЫ ПОЗИЦИОНИРОВАНИЯ....496

ОТНОСИТЕЛЬНОЕ ПОЗИЦИОНИРОВАНИЕ....498

АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ....499

ФИКСИРОВАННОЕ ПОЗИЦИОНИРОВАНИЕ....508

КОНТРОЛЬНЫЕ ВОПРОСЫ....510

ОБЗОР CSS: СВОЙСТВА ПЛАВАЮЩИХ ЭЛЕМЕНТОВ И ПОЗИЦИОНИРОВАНИЯ....511

ГЛАВА 16. CSS-МАКЕТИРОВАНИЕ С ПОМОЩЬЮ FLEXBOX И GRID....512

CSS FLEXBOX: СОЗДАНИЕ ГИБКИХ КОНТЕЙНЕРОВ....513

МОДУЛЬ CSS GRID LAYOUT....542

КОНТРОЛЬНЫЕ ВОПРОСЫ....577

ОБЗОР CSS: СВОЙСТВА МАКЕТА....581

ГЛАВА 17. АДАПТИВНЫЙ ВЕБ-ДИЗАЙН....584

ЗАЧЕМ НУЖЕН АВД?....584

РЕЦЕПТ АДАПТИВНОСТИ....586

НАСТРОЙКА ОБЛАСТИ ПРОСМОТРА....587

ГИБКИЕ СЕТКИ (ТЕКУЧИЕ МАКЕТЫ)....588

ВЫБОР ТОЧЕК ПРЕРЫВАНИЯ....596

СТРАТЕГИИ АДАПТИВНОЙ РАЗРАБОТКИ....599

НЕСКОЛЬКО СЛОВ О ТЕСТИРОВАНИИ....615

ДОПОЛНИТЕЛЬНЫЕ СПРАВОЧНЫЕ РЕСУРСЫ ПО АДАПТИВНОМУ ВЕБ-ДИЗАЙНУ....617

КОНТРОЛЬНЫЕ ВОПРОСЫ....619

ГЛАВА 18. ПЕРЕХОДЫ, ТРАНСФОРМАЦИИ И АНИМАЦИЯ....620

CSS TRANSITIONS....621

МОДУЛЬ CSS TRANSFORMS....631

АНИМАЦИЯ ПО КЛЮЧЕВЫМ КАДРАМ....643

НЕСКОЛЬКО ЗАВЕРШАЮЩИХ СЛОВ....648

КОНТРОЛЬНЫЕ ВОПРОСЫ....650

ОБЗОР CSS: ПЕРЕХОДЫ, ТРАНСФОРМАЦИИ И АНИМАЦИЯ....652

ГЛАВА 19. ДОПОЛНИТЕЛЬНЫЕ СВЕДЕНИЯ О CSS-МЕТОДИКАХ....653

СТАЙЛИНГ ФОРМ....653

СПЕЦИАЛЬНЫЕ СВОЙСТВА ДЛЯ ФОРМАТИРОВАНИЯ ТАБЛИЦ....657

ОЧИСТКА СТИЛЕЙ: СБРОС CSS И ТАБЛИЦА СТИЛЕЙ NORMALIZE.CSS....661

МЕТОДИКА ПОДМЕНЫ ТЕКСТА ИЗОБРАЖЕНИЕМ....663

CSS-СПРАЙТЫ....665

ПРОВЕРКА ПОДДЕРЖКИ СВОЙСТВ CSS....667

ТАБЛИЦЫ СТИЛЕЙ: ПОСЛЕСЛОВИЕ....672

КОНТРОЛЬНЫЕ ВОПРОСЫ....672

ОБЗОР CSS: СВОЙСТВА ТАБЛИЦ....674

ГЛАВА 20. СОВРЕМЕННЫЕ ИНСТРУМЕНТЫ ДЛЯ ВЕБ-ДИЗАЙНА....675

ЗНАКОМСТВО С КОМАНДНОЙ СТРОКОЙ....675

УНИВЕРСАЛЬНЫЕ CSS-ИНСТРУМЕНТЫ (ПРОЦЕССОРЫ)....681

GRUNT И GULP: ИНСТРУМЕНТЫ ДЛЯ СБОРКИ КОДА....689

КОНТРОЛЬ ВЕРСИЙ С ПОМОЩЬЮ GIT И GITHUB....693

ЗАКЛЮЧЕНИЕ....702

КОНТРОЛЬНЫЕ ВОПРОСЫ....703

ЧАСТЬ IV. ПРИМЕНЕНИЕ JAVASCRIPT ДЛЯ УПРАВЛЕНИЯ ПОВЕДЕНИЕМ ВЕБ-СТРАНИЦ....704

ГЛАВА 21. ВВЕДЕНИЕ В JAVASCRIPT....705

ЧТО ЕСТЬ JAVASCRIPT?....705

ДОБАВЛЕНИЕ КОДА JAVASCRIPT НА ВЕБ-СТРАНИЦУ....709

АНАТОМИЯ СЦЕНАРИЯ....711

ОБЪЕКТ БРАУЗЕРА....727

СОБЫТИЯ....727

ОБЪЕДИНЯЯ ВСЕ ВМЕСТЕ....730

ДОПОЛНИТЕЛЬНЫЕ СВЕДЕНИЯ О JAVASCRIPT....731

КОНТРОЛЬНЫЕ ВОПРОСЫ....733

ГЛАВА 22. ИСПОЛЬЗОВАНИЕ JAVASCRIPT И DOM....735

ВСТРЕЧАЙТЕ DOM....735

ПОЛИФИЛЫ....745

БИБЛИОТЕКИ JAVASCRIPT....748

ПРОМЕЖУТОЧНЫЙ ФИНИШ....753

КОНТРОЛЬНЫЕ ВОПРОСЫ....754

ЧАСТЬ V. ИЗОБРАЖЕНИЯ ДЛЯ ВСЕМИРНОЙ ПАУТИНЫ....755

ГЛАВА 23. ВЕБ-ГРАФИКА: ОСНОВНЫЕ ПОНЯТИЯ....756

ИСТОЧНИКИ ИЗОБРАЖЕНИЙ....756

ЗНАКОМСТВО С ФОРМАТАМИ ИЗОБРАЖЕНИЙ....761

РАЗМЕР И РАЗРЕШЕНИЕ ИЗОБРАЖЕНИЯ....774

СТРАТЕГИЯ РАБОТЫ С ИЗОБРАЖЕНИЯМИ....778

ФАВИКОНЫ....782

ПОДВЕДЕМ ИТОГИ…....786

КОНТРОЛЬНЫЕ ВОПРОСЫ....787

ГЛАВА 24. СОЗДАНИЕ ВЕБ-ИЗОБРАЖЕНИЙ....788

СОХРАНЕНИЕ ИЗОБРАЖЕНИЙ В ВЕБ-ФОРМАТАХ....788

РАБОТА С ПРОЗРАЧНОСТЬЮ....795

СОВЕТЫ ПО СОЗДАНИЮ АДАПТИВНЫХ ИЗОБРАЖЕНИЙ....802

ОПТИМИЗАЦИЯ ИЗОБРАЖЕНИЯ....812

КОНТРОЛЬНЫЕ ВОПРОСЫ....823

ГЛАВА 25. SVG-ИЗОБРАЖЕНИЯ....824

РИСОВАНИЕ С ПОМОЩЬЮ XML....826

ВОЗМОЖНОСТИ SVG, СВЯЗАННЫЕ С XML....835

ИНСТРУМЕНТЫ SVG....842

СОВЕТЫ ПО СОЗДАНИЮ SVG....845

АДАПТИВНЫЕ ИЗОБРАЖЕНИЯ В ФОРМАТЕ SVG....849

ДАЛЬНЕЙШЕЕ ИЗУЧЕНИЕ SVG....857

КОНТРОЛЬНЫЕ ВОПРОСЫ....857

И ... МЫ ЭТО СДЕЛАЛИ!....858

ЧАСТЬ VI. ПРИЛОЖЕНИЯ....859

ПРИЛОЖЕНИЕ 1. ОТВЕТЫ....860

ПРИЛОЖЕНИЕ 2. ГЛОБАЛЬНЫЕ АТРИБУТЫ HTML5....876

ПРИЛОЖЕНИЕ 3. СЕЛЕКТОРЫ CSS УРОВНЯ 3 И 4....878

ПРИЛОЖЕНИЕ 4. ОТ HTML+ К HTML5....884

ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ....893

Цветные рисунки....900

Книга поможет освоить веб-дизайн,  не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы языка JavaScript и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

В каждой главе представлены упражнения, которые позволят освоить описанные методики, и краткие контрольные вопросы для закрепления ключевых понятий.

В пятом издании  добавлен материал об использовании CSS Flexbox и Grid для создания сложных и гибких макетов страниц, тонкостях адаптивного веб-дизайна для отображения веб-страниц на экранах любых устройств, о работе  с командной строкой, Git и другими инструментами веб-дизайнера, а также применении  SVG-изображений.

Вы хотите заняться веб-дизайном, не имея опыта? Это дружественное руководство даст вам превосходные возможности для старта! Вы узнаете, как устроены и работают веб-страницы, и начнете постепенно создавать свой собственный сайт. По завершении чтения книги вы сможете создать простой сайт с многоколоночными страницами.

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

Книга идеально подходит для студентов и разработчиков с любым начальным уровнем подготовки. Излагаемый материал  прост и понятен для начинающих, но вместе с тем он настолько тщательно подобран, что будет полезен и опытным разработчикам, стремящимся постоянно совершенствовать свои знания и навыки.

 Вы научитесь:

• Создавать веб-страницы, содержащие текст, ссылки, изображения, таблицы и формы
• Использовать таблицы стилей (CSS) для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации
• Писать скрипты на языке JavaScript и узнаете почему он столь важен в веб-дизайне
• Создавать и оптимизировать веб-изображения, сократив до минимума время их загрузки

Новое в пятом издании

• Использование CSS Flexbox и Grid для создания сложных и гибких макетов страниц
• Тонкости адаптивного веб-дизайна, благодаря которому веб-страницы великолепно выглядят на экранах любых устройств
• Описание работы с командной строкой, Git и другими инструментами, входящими в набор инструментов современного веб-дизайнера
• Применение SVG-изображений