Книга научит вас основам современного веб-дизайна и сч ерпывающ ее руководствое издание эксмо
 Скачать 23.7 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
| Независимо оттого, новичок вы или опытный веб-дизайнер, эта книга научит вас основам современного веб-дизайна И СЧ ЕР П Ы В А Ю Щ ЕЕ РУКОВОДСТВОе издание ЭКСМО Дженнифер Роббинс HTML5, CSS3 и ИСЧЕРПЫВАЮЩЕЕ РУКОВОДСТВО Дженнифер Роббинс HTML5, CSS3 ИСЧЕРПЫВАЮЩЕЕ РУКОВОДСТВО УДК 004.42 ББК 32.973.26 Р 58 Jennifer Niederst Robbins Learning Web Design, 4th Edition Authorized Russian translation of the English edition of Learning Web Design, 4th Edition (ISBN 9781449319274) © 2012 Littlechair, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. Роббинс Дж 58 HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Джен нифер Роббинс; перс англ. МА. Райтман]. — е издание. — М. : Эксмо, 2014. — 528 с. + DVD. — (Мировой компьютерный бестселлер). В этой книге вы найдете все, что необходимо знать для создания отличных веб сайтов. Начав с изучения принципов функционирования Интернета и веб-страниц, к концу книги вы освоите приемы создания сложных сайтов, включая таблицы стилей CSS и графические файлы, и научитесь размещать страницы во Всемирной паутине. Книга включает упражнения, с помощью которых вы освоите разнообразные техники работы с современными веб-стандартами (включая HTML5 и На диске — описанные в книге программы и примеры. УДК 004.42 ББК 32.973.26 Производственно-практическое издание МИРОВОЙ КОМПЬЮТЕРНЫЙ БЕСТСЕЛЛЕР Роббинс Дженниф ер, CSS3 и ИСЧЕРПЫВАЮЩЕЕ РУКОВОДСТВО (орыс ттш де Директор редакции Е. Капьёв Ответственный редактор В. Обручев Художественный редактор Г. Федотов ООО Издательство «Эксмо» 123308, Москва, ул. Зорге, д. 1. Тел. 8 (495) 411 -68-86, 8 (495) 956-39-21. Home раде: w w w .eksm o.ru E-mail: info@ eksm o.ru ©Hflipyuji: «ЭКСМО» АК,Б Баспасы, 123308, Мэскеу, Ресей, Зорге кешеа, 1 уй. Тел. 8 (495) 411 -68-86, 8 (495) 956-39-21 Ноте раде: www.eksmo.ru E-mail: info@eksmo.ru. Тауар белпсг «Эксмо» Казахстан Республикасында дистрибьютор жэне еым бойынша арыз-талаптарды кдбылдаушынын, eKmi «РДЦ-Алматы» ЖШС, Алматы *., Домбровский кеш., а, литер Б, офис Тел 8 (727) 2 51 59 89,90,91,92, факс 8 (727) 251 58 12 вн. 107; E-mail: RDC-Almaty@eksmo.kz Эымнщжарамдылык, Mep3iMi шектелмеген. Сертификация туралы акпарат сайтта: Сведения о подтверждении соответствия издания согласно законодательству РФ о техническом регулировании можно получить по адресу https://eksmo.ru/certification/ © H f lip r e H мемлекет: Ресей. Сертификация карастырылмаган % Подписано в печать Формат х 1081/ 16. Печать офсетная. Уел. печ. л. 55,44 Тираж 2000 экз. Заказ Отпечатано с готовых файлов заказчика в ОАО Первая Образцовая типография, филиал УЛЬЯНОВСКИЙ ДОМ ПЕЧАТИ, г. Ульяновск, ул. Гончарова, 14 ISBN 978-5-699-67603-3 9 785699 676033 ISBN 978-5-699-67603-3 © Райтман МА, перевод на русский язык, 2014 © Оформление. ООО Издательство «Эксмо», 2014 9785699676033 https://fiction.eksmo.ru/ ОГЛАВЛЕНИЕ П РЕДИС ЛОВИ Е Структура книги. 12 Благодарности.................................................................................................13 Об авторе. Использование примеров кода. ЧАСТЬ I НАЧАЛО РАБОТЫ ГЛ А ВАС А МОЕ НАЧАЛО С чего начать?...................................................................................................18 Задачи веб-дизайнера..................................................................................18 Требуемые знания. Необходимое обеспечение.........................................................................29 Резюме................................................................................................................36 ГЛ А В А КАК РАБОТАЕТ ВСЕМИРНАЯ ПАУТИНА. Интернет против Всемирной паутины. Обслуживание вашей информации..........................................................38 Несколько слово браузерах.......................................................................39 Адреса веб-страниц (URL)............................................................................. Анатомия веб-страницы............................................................................... Резюме. ГЛАВА ВАЖНЫЕ КОНЦЕПЦИИ ДЛЯ В Е БДИ ЗА Й НЕ Р А Множество устрой ств....................................................................................50 Соблюдение стандартов. Прогрессивное улучшение. Адаптивный веб-дизайн............................................................................... Обеспечение доступности. Производительность сайта ЧАСТЬ II РАЗМЕТКА HTML ДЛЯ СТРУКТУРИЗАЦИИ ГЛ А ВАС О ЗДАНИЕ ПРОСТОЙ СТРАНИЦЫ. 65 Веб-страница шаг за шагом. Запуск текстового редактора.....................................................................67 Шаг 1: Добавление контента....................................................................... Шаг 2: Структурирование документа. ! Шаг 3: Определение текстовых элементов. Шаг 4: Добавление изображений. Шаг 5: Изменение внешнего вида страницы с помощью C S Когда хорошие страницы становятся плохими. 84 Валидация кода ...............................................................................................86 Резюме................................................................................................................87 Г ЛАВА РАЗМЕТКА ТЕКСТА. Абзацы Заголовки. Списки. Другие элементы контента........................................................................... Организация контента страницы Встроенные элементы. Общие элементы (div и Некоторые специальные символы..........................................................125 Резюме............................................................................................................. ГЛАВА ДОБАВЛЕНИЕ ССЫЛОК. Атрибут h re Ссылки на веб-страницы других сайтов Ссылки на страницы собственного сайта.............................................134 Открытие ссылки в новой вкладке или окне браузера...................146 Ссылки на адрес электронной почты. Ссылки на номер телеф о на.......................................................................148 Резюме............................................................................................................. ГЛАВА ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ. Форматы изображений. Элемент Ф рейм ы ........................................................................................................... Резюме. ГЛАВА РАЗМЕТКА ТАБЛИЦ Использование таблиц. Минимальная структура таблицы ............................................................ 165 Оглавление Заголовки таблицы. Объединение ячеек. Обеспечение доступности таблиц............................................................173 Соединение ячеек и заголовков..............................................................174 Резюме............................................................................................................. ГЛАВА ФОРМЫ. Принцип работы формы.............................................................................179 Элемент form .................................................................................................. Переменные и их содержим ое................................................................184 Обзор элементов формы Обеспечение доступности форм Макет и дизайн формы...............................................................................209 Резюме............................................................................................................. ГЛАВА ЗНАКОМСТВО С H T M L 5 Краткая история H T M L Особенности разм етки...............................................................................223 API-интерфейсы в спецификации H TM Видео- и аудиоконтент................................................................................. Рисование средствами H TM L5 Резюме. ЧАСТЬ III ПРАВИЛА CSS ДЛЯ ПРЕДСТАВЛЕНИЯ ГЛ А ВАКА С КА ДН Ы Е ТАБЛИЦЫ СТИЛЕЙ. Преимущества C S S ..................................................................................... Возможности Как работают таблицы стилей. Важные концепции. Дальнейшее изучение CSS........................................................................ ГЛАВА ФОРМАТИРОВАНИЕ ТЕКСТА (ВКЛЮЧАЯ СЕЛЕКТОРЫ) Свойства шрифта..........................................................................................267 Изменение цвета текста.............................................................................287 Еще несколько типов селекторов. Выравнивание строк текста. Подчеркивания и другие декоративные эффекты. Изменение регистра. Кернинг и интервал между словами. Тень текста. Изменение маркеров и нумерации списков. Резюме 7 ГЛАВА ЦВЕТА И ФОН (ВКЛЮЧАЯ СЕЛЕКТОРЫ И ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ) Определение значений цвета. Основной цвет. Фоновый цвет. Непрозрачность. Селекторы псевдокласса...........................................................................321 Селекторы псевдоэлем ентов.................................................................. Селекторы атрибутов. Фоновые изображения. Сокращенное свойство фона. Градиенты. Внешние таблицы стилей Резюме. ГЛАВА БЛОЧНАЯ МОДЕЛЬ ОТСТУПЫ ГРАНИЦЫ И ПОЛЯ) Блок элемента. 355 Задавание размеров блока.......................................................................356 Отступы............................................................................................................. Границы ........................................................................................................... 366 Поля....................................................................................................................378 Присвоение типов отображен ия............................................................386 Добавление теней к блокам Резюме. ГЛАВА ОБТЕКАНИЕ И ПОЗИЦИОНИРОВАНИЕ Нормальный поток........................................................................................391 О бтекание.......................................................................................................392 Основы позиционирования.......................................................................409 Относительное позиционирование. Абсолютное позиционирование..............................................................412 Фиксированное позиционирование. Резюме. ГЛАВАМ А КЕТЫ СТРАНИЦ СРЕДСТВАМИ Стратегии верстки страниц Шаблоны макетов страниц. 435 Многоколоночные макеты при помощи плавающих элементов Позиционированные макеты. Фоновый цвет колонок сверху донизу. 452 ГЛАВА ПЕРЕХОДЫ, ПРЕОБРАЗОВАНИЯ И АНИМАЦИЯ. 457 CSS-переходы................................................................................................457 CSS-преобразования................................................................................. Анимация по ключевым кадрам. 482 Резюме.............................................................................................................487 ГЛ А ВАТЕ Х НИ ЧЕСКИ Е ПРИЕМЫ Сброс стилей C S S Технические приемы замены текста изображением.......................491 CSS-спрайты .................................................................................................. Стилизация веб-форм.................................................................................497 Стилизация таблиц. Основы адаптивного веб-дизайна......................................................... Заключение. Резюме. ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ. СЛЕДУЮЩИЕ ГЛАВЫ ИПР ИЛ ОЖЕ НИ ЯН АХ ОД Я Т С Я НАД ИСКЕ, ПРИЛАГАЕМОМ К КНИГЕ ЧАСТЬ IV СОЗДАНИЕ ГРАФИЧЕСКИХ ИЗОБРАЖЕНИЙ ДЛЯ ВСЕМИРНОЙ ПАУТИНЫ Г ЛАВА ОСНОВЫ СОЗДАНИЯ ГРАФИЧЕСКИХ ИЗОБРАЖЕНИЙ Источники изображ ений................................................................................3 Знакомство с форматами................................................................................8 Размер и разрешение изображения........................................................23 Работа с прозрачностью. Знакомство с форматом SVG.......................................................................36 Резюме................................................................................................................43 Г ЛАВА ПРОСТЫЕ И ЭФФЕКТИВНЫЕ В Е Б ИЗОБРАЖЕНИЯ. Общие стратегии оптимизации. Оптимизация файлов формата G I F Оптимизация файлов формата JP E G Оптимизация файлов формата Оптимизация по размеру файла. Резюме. 61 Оглавление ЧАСТЬ V JAVASCRIPT ДЛЯ ПОВЕДЕНИЯ ГЛ А В А ВВЕДЕНИЕ В JA V A S C R IP T ............................................................................. Что такое Добавление сценариев JavaScript на страницу. Анатомия сценария. Объект браузера.............................................................................................. С обы тия..............................................................................................................87 Резюме................................................................................................................89 Ответы к упражнениям..................................................................................92 ГЛ А В А ПРИМЕНЕНИЕ. Объектная модель докум ента.....................................................................93 Полизаполнения............................................................................................ Библиотеки JavaScript................................................................................. Резюме. ПРИЛОЖЕНИЕ АО ТВ Е ТЫКУ ПР АЖ НЕ НИ ЯМ ПРИЛОЖЕНИЕ Б С ЕЛЕ КТО Р Ы C S S 3 .......................................................................................... ПРИЛОЖЕНИЕ В С О ЗДАНИЕ АН ИМИ РОВ АН Н Ы Х G IF ФАЙЛОВ Как это работает. Инструменты для создания GIF-аним ации...........................................146 Создание анимированных файлов шаг за шагом. Автоматическая генерация промежуточных кадров. Что необходимо помнить об анимированных файлах ПРЕДИСЛОВИЕ Веб-дизайн потрясающе изменчив. Как только начало казаться, что ситуация вокруг принятия веб-стандартов создателями браузеров и сообществом веб-разработчиков успокоилась, появился мобильный Интернет, вновь перевернувший все. С выпуском смартфонов и планшетов Всемирная паутина пробивает себе дорогу на маленькие экраны портативных устройств, где никогда раньше не использовалась. В результате веб-дизайнеры и программисты столкнулись с серьезными трудностями, пытаясь найти способы, как сделать взаимодействие с сайтами приятным для пользователя, независимо оттого, с каких устройств к ним получен доступ. На момент написания этой книги многие из проблем, например, как визуализировать изображение на нужном устройстве, еще находились в стадии обсуждения. Это невероятно активный период для веб дизайна, полный экспериментов и совместной работы. Он чем-то напоминает мне дни становления Всемирной паутины в 1993 году, когда я только начинала карьеру веб-дизайнера. Столько всего еще предстоит понять Так много возможностей И, если честно, сейчас нелегко писать книгу обо всех этих меняющихся технологиях. Поэтому я сделала всевозможное, чтобы выделить развивающиеся области и предоставить ссылки на онлайн-ресурсы, чтобы держать вас в курсе. Кроме того, стали доступны два новых стандарта — HTML5 (пятая основная версия языка гипертекстовой разметки) и CSS3 (каскадные таблицы стилей, уровень 3). В разделе этой книги, посвященном HTML, отражен современный стандарт HTML5. Рассмотрены уже готовые к применению разделы разрабатывающегося стандарта CSS3 и присутствует глава, описывающая, как добиться интерактивности с помощью переходов и преобразований. Сегодня инструменты позволяют сделать гораздо больше и эффективнее, чем всего несколько лет назад. Наконец, поскольку JavaScript — важная часть процесса веб-разработки, в книгу включены две главы, в которых представлен этот языки несколько способов его использования. Яне специалист по JavaScript, но, к счастью, нашла эксперта в этой области. Главы, посвященные JavaScript, написал Мэтт «Wilto» Маркус, дизайнер и разработчик в компании Filament Group, член команды jQ uery Mobile и технический редактор издания A List Эта книга рассматривает специфические проблемы и вопросы, возникающие у новичков, опытных графических дизайнеров, програм- ПРИМЕРЫ НА ДИСКЕ Все примеры для выполнения упражнений из книги вы найдете на диске, прилагающемся к книге Структура книги мистов, офисных служащих и всех, кто хочет научиться веб-дизайну. Я постаралась изложить здесь опыт моего преподавания на курсах для начинающих, добавила упражнения и тесты, чтобы вы могли получить практический опыт и проверить свои успехи. Читаете ли вы эту книгу отдельно или в качестве дополнения к курсу веб-дизайна, я надеюсь, она поможет вам начать работу и получить удовольствие от процесса. Специальные обозначения текста в этой книге В этой книге используются следующие обозначения текста: Курсив Используется для выделения терминов, имен файлов и каталогов, а также для привлечения внимания. Полужирный Используется для выделения адресов веб-сайтов и электронной почты. Л истин г Моноширинным шрифтом выделены примеры кода. Полужирный листинг Моноширинный полужирный шрифт используется для привлечения внимания в примерах кода. Курсивный листинг Моноширинный шрифт с курсивом используется для выделения заполнителей для значений атрибутов и свойств таблиц стилей. Структура книги Книга состоит из пяти разделов, в каждом из которых рассматриваются важные аспекты веб-разработки. Часть I. Начало работы В ней закладываются основы всех рассматриваемых в книге тем. Она начинается со значимых общих сведений о среде веб-разработки: чем вы можете заниматься, какие технологии изучить и какие инструменты использовать. Вы сразу начнете работать сии узнаете в общих чертах, как функционируют веб-страницы. Я также познакомлю вас с некоторыми важными понятиями, которые помогут вам начать думать о дизайне, как современный веб-дизайнер. Часть II: Разметка HTML для структуризации Здесь в подробностях раскрывается работа всех элементов и атрибутов, доступных для создания семантической структуры контента, в том числе и новых элементов, введенных в HTML5. Я рассмотрю разметку текста, ссылок, изображений, таблиц и форм. Часть II завершается всесторонним обсуждением языка HTM L5 и его отличий от предыдущих стандартов.  перейти в каталог файлов | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |