Книга посвящена разработке веб-сайтов и веб-приложений с нуля, с применением самых современных клиентских и серверных технологий, селекторов CSS и подходов к веб-дизайну. Рассмотрены стандарт CSS 3+, отрисовка на холсте (технология Canvas), адаптивный веб-дизайн (технологии Flexbox и Grid), технология SASS, расширяющая возможности CSS, а также художественные аспекты веб-дизайна, обеспечение кроссплатформенности сайтов и приложений и приверженность отзывчивому веб-дизайну.
Для веб-дизайнеров и веб-разработчиков
От новичка к эксперту за 29 простых шагов.
Эта книга предназначена для всех, кто заинтересован в совершенствовании своих знаний и навыков в области веб-дизайна, причем неважно, кем именно будет чита- тель: просто любителем, профессиональным разработчиком или специалистом, на- меревающимся построить карьеру веб-дизайнера.
Инструменты, доступные веб-разработчикам, постоянно совершенствуются, сооб- разуясь с ростом потребностей профессиональных разработчиков в более объем- ных, качественных, более эффективных и интерактивных веб-свойствах.
В прошлом основная масса улучшений вынужденно создавалась с применением кода JavaScript, но теперь в веб-браузеры встроено так много новых технологий, что веб- дизайнеры могут создавать воистину фантастические страницы и сайты. Единственная проблема заключается в необходимости получения сведений о том, что доступно и как все это использовать. Вот тут-то и пригодится эта книга, поскольку она позволяет ознакомиться со всеми последними усовершенствованиями как HTML5, так и CSS3, а также уяснить их суть и научиться их использованию.
- Пошаговое руководство, в котором описано, как придумать, набросать, спроектировать, создать, протестировать и запустить веб-сайт или веб-приложение
- Подробные примеры и иллюстрации работы с HTML и CSS
- Разбор интерактивных технологий, в частности HTML5 Canvas, CSS-преобразования в 2D и 3D, Flexbox, CSS Grid
- Технология SASS, являющаяся надстройкой над CSS
- Программирование анимации, геолокации, аудиовизуальных эффектов
- Технология отзывчивого веб-дизайна
- Кроссплатформенная разработка
Здесь все, что нужно знать о современной веб-разработке.
Чему вы сможете научиться
- Вы получите полноценное представление о текущем уровне технологий и инструментов, предоставляемых как в HTML5, так и в CSS3.
- Вы приобретете навыки, необходимые для создания веб-сайтов, не уступающих по своим стандартам лучшим доступным в настоящее время в Интернете образцам.
- Вы овладеете приемами, всего лишь несколько лет назад считавшимися особо трудоемкими и сложными при разработке на JavaScript, но в настоящее время вполне доступными и готовыми к простому применению во всех современных браузерах.
Для кого эта книга
Книга предназначена для тех, кто уже занимается веб-разработкой или только ступил на эту стезю, а также для всех желающих сделать успешную карьеру в области интерфейсного веб-дизайна.
Книгу “HTML5 и CSS3. Мастер-класс” можно купить со скидкой в интернет-магазине издательства “БХВ“.
Предисловие. 15
Об авторе. 17
ГЛАВА 1. Начальные сведения о HTML5 и CSS3. 19
Введение. 19
Структура. 21
Цели 21
Знакомство с HTTP и HTML. 21
Знакомство с CSS. 24
Использование атрибутов id и class. 25
Чем обусловлена необходимость применения HTML5 и CSS3. 28
Заключение. 29
ГЛАВА 2. Установка веб-сервера. 31
Вступление. 31
Структура. 31
Цели 31
Представление о WAMP, MAMP и LAMP. 32
Установка под Windows. 32
Работа с корнем документа. 36
Установка под MacOS. 39
Работа с корнем документа. 41
Установка под Linux. 43
Работа с корнем документа. 44
Заключение. 44
ГЛАВА 3. Visual Studio Code. 45
Вступление. 45
Структура. 45
Цели 45
Популярность VS Code. 46
Установка VS Code под Windows. 47
Установка VS Code под MacOS. 49
Установка VS Code под Linux. 51
Начало работы с VS Code. 52
Заключение. 54
ГЛАВА 4. Консоль разработчика. 55
Вступление. 55
Структура. 55
Цели 55
Доступ к консоли разработчика. 56
Польза, извлекаемая из работы с консолью.. 60
Автозавершение. 61
Просмотр элементов. 63
Заключение. 65
ГЛАВА 5. Введение в HTML5. 67
Введение. 67
Структура. 67
Цели 68
HTML5 гораздо серьезнее, чем просто HTML4 + 1. 68
SVG и MathML. 79
Заключение. 80
ГЛАВА 6. Использование холста в HTML5. 81
Введение. 81
Структура. 81
Цели 81
Ускоренный курс JavaScript 82
Размещение кода внутри тегов <script>. 82
Размещение кода в отдельном файле. 85
Функция getElementByID() 87
Превращение холста в изображение. 88
Заключение. 90
ГЛАВА 7. Прямоугольники и заливки. 91
Введение. 91
Структура. 91
Цели 91
О примерах работы с холстом.. 92
Рисование прямоугольников. 93
Использование переменных. 94
Применение стилей рисования. 95
Изменение толщины линии. 96
Очистка прямоугольника. 97
Применение градиентной заливки. 98
Применение радиального градиента. 100
Разноцветные градиентные заливки. 101
Использование заполнения узором.. 103
Использование перемещения. 106
Заключение. 109
ГЛАВА 8. Надписи на холсте. 111
Введение. 111
Структура. 111
Цели 111
Создание надписей. 112
Изменение способа отображения текста. 112
Выравнивание текста. 113
Изменение толщины обводки. 115
Надписи с заполнением.. 118
Использование узора для заполнения надписи. 121
Заключение. 122
ГЛАВА 9. Рисование на холсте. 123
Введение. 123
Структура. 123
Цели 123
Рисование линий с использованием путей. 124
Применение заполнений. 128
Ограничения областей холста. 128
Рисование кривых линий. 131
Выбор направления. 132
Рисование дуги к конкретной точке. 136
Использование аттракторов. 138
Завершение и схождение линий. 141
Заключение. 144
ГЛАВА 10. Работа с холстом.. 145
Введение. 145
Структура. 145
Цели 145
Рисование с использованием изображений. 146
Извлечение частей изображений. 148
Использование холста в качестве исходного изображения. 149
Прикрепление теней. 151
Тени прикрепляются не только к изображениям.. 153
Непосредственное редактирование пикселей. 154
Как хранятся данные о цвете. 156
Последовательный перебор данных. 157
Обработка данных изображения. 157
Усреднение данных о цвете. 158
Другие эффекты.. 158
Создание собственных данных изображения. 162
Заключение. 162
ГЛАВА 11. Расширенные возможности работы с холстом.. 163
Введение. 163
Структура. 163
Цели 163
Выстраивание композиции и прозрачность. 164
Использование цикла. 167
Рисование изображения. 167
Изменение прозрачности. 168
Применение преобразований. 169
Использование поворотов. 171
Применение перемещений. 172
Применение сразу нескольких преобразований. 173
Заключение. 173
ГЛАВА 12. Применение геолокации. 175
Введение. 175
Структура. 175
Цели 176
Что такое GPS. 176
Альтернативы применению GPS. 176
Проверка доступности геолокации. 177
Использование консоли разработчика. 179
Перенаправление пользователей. 180
Получение сведений о местоположении пользователя. 182
Именованные функции. 184
Когда получено разрешение. 185
Заключение. 186
ГЛАВА 13. Работа с формами. 187
Введение. 187
Структура. 187
Цели 187
Атрибуты формы HTML5. 188
Атрибут autofocus. 188
Атрибут autocomplete. 190
Атрибут form.. 191
Атрибут formaction. 193
Другие переопределения формы.. 194
Атрибут multiple. 195
Атрибут novalidate. 196
Атрибуты width и height 196
Атрибут list и теги <datalist> и <option>. 197
Атрибуты min, max и step. 198
Другие типы ввода даты и времени. 200
Атрибут pattern. 200
Атрибут placeholder 201
Атрибут required. 202
Тип ввода color 203
Числа и диапазоны.. 204
Тип ввода search. 206
Заключение. 207
ГЛАВА 14. Локальное хранилище и многое другое. 209
Введение. 209
Структура. 209
Цели 209
Использование локального хранилища. 210
Хранение и извлечение локальных данных. 210
Удаление и очистка локальных данных. 213
Использование взамен этого хранилища сеансов. 214
Микроданные. 214
Веб-воркеры.. 217
Автономные веб-приложения. 220
Как работают автономные веб-приложения. 220
Перетаскивание. 222
Обмен сообщениями между документами. 223
Заключение. 223
ГЛАВА 15. Аудио и видео. 225
Введение. 225
Структура. 225
Цели 225
Аудио в HTML5. 226
Аудиокодеки. 226
Воспроизведение аудио. 227
Видео в HTML5. 229
Видеокодеки. 230
Воспроизведение видео. 230
Заключение. 236
ГЛАВА 16. Введение в CSS3. 237
Введение. 237
Структура. 237
Цели 237
Разработка CSS3 продолжается. 238
Новое в CSS3. 239
Селекторы атрибутов. 239
Фоновые решения. 240
Границы.. 242
Тени блоков. 244
Столбцы и перетекания. 246
Цвета и прозрачность. 247
Текстовые эффекты и шрифты.. 248
Перемещения и преобразования. 250
Flexbox-разметка. 252
Flexbox как отдельный модуль. 252
CSS grid. 255
Заключение. 258
ГЛАВА 17. Селекторы атрибутов CSS3. 259
Введение. 259
Структура. 259
Цели 259
Селекторы атрибутов CSS. 260
Селектор по имени атрибута. 260
Селектор по значению атрибута. 261
Селектор по слову из списка. 262
Селектор по дефису. 263
Селектор по начальным символам.. 264
Селектор по конечным символам.. 265
Глобальный селектор. 267
Флажок невосприимчивости к регистру символов. 268
Флажок восприимчивости к регистру символов. 269
Заключение. 270
ГЛАВА 18. Создание фона. 271
Введение. 271
Структура. 271
Цели 271
Обрезка и начало фона. 272
Литералы шаблонов. 272
Использование свойства background-clip. 274
Использование свойства background-origin. 275
Совместное использование обрезки и начала фона. 275
Раздел сценария JavaScript 278
Размер фона. 280
Использование градиентов. 282
Точки остановки цвета. 284
Удаленность точек остановки цвета и повторения. 284
Радиальные и конические градиенты.. 285
Заключение. 286
ГЛАВА 19. Построение границ. 287
Введение. 287
Структура. 287
Цели 287
Радиус границы.. 288
Цвета границ. 290
Градиентные границы.. 291
Использование нескольких фонов. 293
Использование одного изображения. 295
Заключение. 298
ГЛАВА 20. Свойства блока и текста. 299
Введение. 299
Структура. 299
Цели 299
Добавление теней. 299
Переполнение элементов. 302
Макет, составленный из нескольких колонок. 303
Заключение. 309
ГЛАВА 21. Цвета и прозрачность. 311
Введение. 311
Структура. 311
Цели 311
RGB-цвета. 312
Использование цветового круга. 315
RGBA-цвета. 316
HSL-цвета. 318
Применение прозрачности. 321
Заключение. 323
ГЛАВА 22. Текстовые эффекты и шрифты.. 325
Введение. 325
Структура. 325
Цели 326
Задание размеров блока. 326
Текстовое переполнение. 328
Перенос длинных слов. 329
Изменение размеров элементов пользователем.. 331
Выделение фокуса. 333
Текстовые тени. 334
Веб-шрифты.. 335
Заключение. 339
ГЛАВА 23. Двумерные преобразования. 341
Введение. 341
Структура. 341
Цели 342
Преобразования. 342
Переходы.. 344
Перемещения. 347
Ожидаемое вскоре свойство translate. 347
Масштабирование. 347
Вращение. 349
Наклон. 350
Использование матриц. 352
Заключение. 354
ГЛАВА 24. Трехмерная графика и анимация. 355
Введение. 355
Структура. 355
Цели 355
3D-преобразования. 356
Задание перспективы.. 358
Два способа изменения перспективы.. 360
Задание стиля преобразования. 362
Изменение исходной точки преобразования. 363
Работа в 3D-пространстве. 364
Управление кубом.. 366
3D-перемещение. 367
3D-масштабирование. 367
3D-вращение. 367
Видимость обратных сторон граней. 369
Заключение. 370
ГЛАВА 25. Макет Flexbox. 371
Введение. 371
Структура. 371
Цели 371
Сведения о Flexbox. 372
Создание интерактивной среды Flexbox. 372
Как работает пример. 375
Работа с примером.. 378
Flex-направление. 379
Перенос flex-элементов. 382
Выравнивание всего содержимого по главной оси. 382
Выравнивание элементов по поперечной оси. 386
Выравнивание всего содержимого по поперечной оси. 389
Другие свойства. 393
Заключение. 394
ГЛАВА 26. CSS Grid. 395
Введение. 395
Структура. 395
Цели 395
Сведения о CSS Grid. 396
Как работает пример. 399
Работа с примером.. 400
Задание потока Grid-элементов. 401
Выравнивание содержимого. 402
Выравнивание элементов. 407
Задание промежутков. 412
Изменение местоположения и размеров. 412
Заключение. 417
ГЛАВА 27. Знакомство с Sass. 419
Введение. 419
Структура. 419
Цели 420
Sass — достойное решение. 420
Сведения о Sass. 420
Различные версии Sass. 421
Установка под Windows. 421
Другие установщики под Windows. 424
Установка под MacOS. 424
Установка под Linux. 426
Альтернативные установки под Linux. 427
Препроцессинг в CSS. 428
Заключение. 429
ГЛАВА 28. Переменные и потоки выполнения в Sass. 431
Введение. 431
Структура. 431
Цели 431
Переменные в CSS. 432
Переменные в Sass. 434
Значения переменных, используемые по умолчанию.. 435
Область видимости переменных. 437
Принудительное задание глобальной видимости. 438
Управление потоком выполнения. 439
Sass-операторы.. 439
Sass-выражения (Sass-сценарий) 440
@if … @else. 441
Влияние скобок. 443
@else if. 443
@each … in. 444
@for … from … through. 445
@for … from … to. 447
@while. 448
Заключение. 448
ГЛАВА 29. Расширенный Sass. 449
Введение. 449
Структура. 449
Цели 450
Вложенность, используемая в Sass. 450
Вложенные свойства. 452
Наследование в Sass. 453
Использование миксинов. 455
Модули Sass. 456
Будущие версии. 457
Заключение. 458
Метаданные. 459
Описание. 459
Чему вы сможете научиться. 460
Для кого эта книга. 460
Содержание. 461
Биография автора. 462
-
НОВИНКА
HTML5 и CSS3. Мастер-класс
1250 ₽
975 ₽
Робин Никсон (Robin Nixon) более 40 лет создаёт софт, разрабатывает сайты и веб-приложения и много лет пишет о сетевых технологиях, Интернете и вебе. В его портфолио более 200 журнальных статей и более 40 книг, переведённых на многие языки мира, в том числе, бестселлер «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5». Кроме того, он создаёт и проводит собственные видеокурсы на тему Интернета.