3 Мбайт) никто не поместит на свою веб-страницу На рис 18 5 показано то же

диалоговое окно после уменьшения разрешения и размеров фотографии

Размер файла с новыми параметрами оказался в 132 раза меньше (!), чем был рань-

ше, и составил 24 Кбайт Естественно, при подобной настройке нужно все время   Изменение  разрешения  и  размеров  изображения   259

визуально контролировать качество изображения, поскольку снижение разреше-

ния означает уменьшение количества пикселов на единицу длины, что, в конце

концов, обязательно скажется на визуальном восприятии

Рис 18 4  Настройка разрешения и размеров изображения

Рис 18 5  Уменьшение разрешения и размеров фотографии260     Урок 18. Подготовка изображений для веб-страниц  

Коррекция изображения

Программа Adobe Photoshop содержит множество средств для повышения каче-

ства изображений Фотографии могут быть слишком темными, слишком светлы-

ми, недостаточно контрастными, иметь неразличимые детали, плохую рельеф-

ность, поэтому появляется необходимость их изменения Чем отличается хорошая

фотография от плохой? Хорошая фотография имеет оптимальный баланс света и

тени Процесс изменения погрешностей в освещении и контрасте называют кор-

рекцией

Коррекция обычно выполняется с помощью меню команд подменю Adjustments

(Настройка) меню Image (Изображение)

В качестве примера изменим внешность девушки, показанной слева на рис 18 6

Справа на рисунке представлено диалоговое окно Brightness/Contrast (Яркость/

Контраст), открывшееся после выделения фрагмента изображения (показанных на

заднем плане губ) и выбора команды Image  Adjustment  Brightness/Contrast (Изо-

бражение  Настройка  Яркость/Контраст) Как видите, для изменения контрастно-

сти и яркости выделенного фрагмента достаточно изменить положение ползунков 

Brightness (Яркость) и Contrast (Контраст) или ввести нужные значения в соответ-

ствующие поля

Рис 18 6  Изменение контрастности и яркости губ

Рисунок 18 7 иллюстрирует процесс цветовой коррекции глаза, выделенного ин-

струментами выделения, с помощью команды Image  Adjustments  Hue/Saturation

(Изображение  Настройка  Оттенок/Насыщенность)

Рисунок 18 8 иллюстрирует процесс цветовой коррекции брови, выделенный ин-

струментами выделения, с помощью команды Image  Adjustments  Color Balance (Изо-

бражение  Настройка  Цветовой баланс), которая применяется к области выделения   Коррекция изображения   261

Рис 18 7  Изменение оттенка, насыщенности и светлоты выделенного фрагмента

Рис 18 8  Настройка цветового баланса выделенного фрагмента

Рис 18 9  Изображение после коррекции262     Урок 18. Подготовка изображений для веб-страниц  

Для обрезки краев изображений применяется инструмент Crop (Кадрирование)

или команда Image  Crop (Изображение  Кадрирование) после выделения нужного

фрагмента любым инструментом выделения После выбора этой команды все изо-

бражение, лежащее вне рамки выделения, будет удалено

На рис 18 9 показано полностью подготовленное для размещения на веб-

странице изображение после выполнения всех операций, описанных в этом раз-

деле (сравните его с изображением на рис 18 6)

Подведем итоги

В этом уроке рассматриваются основные принципы подготовки изображений для

веб-страниц с помощью программы Adobe Photoshop В частности, представле-

ны команды и инструменты для выполнения файловых операций, для выделения

фрагментов изображения, для изменения разрешения и геометрических размеров

изображения, для тоновой и цветовой коррекции изображения Урок 19 HTML 5

Язык HTML 5 является совместным продуктом корпорации World Wide 

Web Consortium (W3C) и рабочей группы Web Hypertext Application 

Technology Working Group  (WHATWG). Рабочая  группа WHATWG раз-

рабатывала формы и приложения, корпорация W3C сосредоточила 

усилия на XHTML 2.0.

Многие идеи HTML 5 были изначально предложены WHATWG в стан-

дарте  Web  Applications  1.0.  HTML  5  включает  другой  стандарт 

WHATWG, Web Forms 2.0. 

Урок264     Урок 19. HTML 5

Пример веб-страницы HTML 5

Когда веб-браузер получает документ, он по тегам определяет, как документ дол-

жен быть интерпретирован

HTML 5 вводит несколько новых элементов и атрибутов Некоторые из них тех-

нически являются эквивалентами <div> и <span>, но имеют свое семантическое

значение, например <nav> и <footer> Эти теги должны облегчать работу поиско-

вым системам Другие элементы предоставляют новую функциональность, такие

как <audio> и <video> Новый тег <section> выводит на экран данные, формируя их

в разделы

Некоторые устаревшие элементы HTML 4, такие как <font> и <center>, были уда-

лены из HTML 5 Пример создания веб-страницы на языке HTML 5 приведен

в листинге 19 1

Листинг 19 1  Пример создания веб-страницы на языке HTML 5

<!DOCTYPE HTML>

<html>

<head>

<title> Пример веб-страницы на языке HTML 5</title>

</head>

<body>

<header>...</header>

<nav>...</nav>

<section>

<article>

...

</article>

</section>

<aside>...</aside>

<footer>...</footer>

</body>

</html>

Спецификация <!DOCTYPE> является первым объявлением документа в версии

HTML5 предшествуя тегу <html> Данный тег объявляет браузеру о специфика-

циях используемого HTML, выступая в роли объявления, инструкции браузеру

Документ, созданный в версии HTML 4 01, требует ссылки на DTD, так как вер-

сия языка HTML 4 01 была основана на SGML HTML5 основан не на SGML и не

требует ссылки на DTD, но использует спецификацию doctype для указания брау-

зеру Спецификация <!DOCTYPE> пишется прописными буквами и не имеет конеч-

ного тега

Размещение объектов мультимедиа

на веб-страницах

Мультимедийные файлы размещаются на веб-страницах с помощью тегов <audio>,

<video>, <embed> и <object>   Пример веб-страницы HTML 5   265

Тег <audio> имеет атрибуты autoplay, controls, loop, preload, src

Атрибут  autoplay Атрибут autoplay определяет порядок воспроизведения дан-

ных мультимедиа Если он присутствует, то файл мультимедиа автоматически

запускаться по окончании загрузки документа

Атрибут controls.  Атрибут controls позволяет пользователю управлять воспро-

изведением, например, с помощью кнопки проигрывания

Атрибут loop  Атрибут loop указывает на то, что по окончании файл муль-

тимедиа должен снова начать воспроизводиться Данные мультимедиа могут

сначала воспроизводится от начала до конца как в прямом, так и в обратном

направлении

Атрибут preload  Атрибут preload  контролирует загрузку файла Принима-

ет значения auto (автоматический), metadata (метаданные) и none (никакой)

Атрибут src  Атрибут src (от англ source — источник) определяет местораспо-

ложение изображения, включаемого в состав документа Имеет параметр url,

который указывает браузеру, где находится файл

Мультимедийные файлы имеют расширения Ogg Vorbis, MP3, Wav Однако будьте

внимательны — не все браузеры поддерживают аудио (табл 19 1)

Таблица 19 1  Поддержка аудиоформатов разными браузерами

Формат

Microsoft