Вставка изображений в веб‑документ
В HTML‑страницу можно вставить графический файл. Допустимые форматы файлов определяются браузером. Для Интернета наиболее приемлемыми являются форматы рисунков JPG и GIF, поддерживаемые всеми браузерами. Для размещения на веб‑страницах изображений служит тег <IMG> с атрибутом SRC=, указывающим адрес файла изображения. Если вы хотите при переносе изображения на веб‑страницу изменить его размеры, то это можно сделать с помощью атрибутов WIDTH=(Ширина рисунка в пикселах) и HEIGHT=(Высота). Приведем пример использования рисунка 2006.jpg, созданного в MS Paint:
<HTML>
<BODY>
<IMG SRC="2006.jpg">
<IMG SRC="2006.jpg" width=50 height=50 Alt="С Новым годом!">
</BODY>
</HTML>
В этом документе продемонстрированы три возможности работы с рисунками:
• тег <IMG SRC="2006.jpg"> вставляет в веб‑документ рисунок из файла 2006.jpg, расположенного в текущей директории. Возможные расширения таких рисунков – JPG, PNG и GIF;
• тег <IMG SRC="2006.jpg" width=50 height=50> перемасштабирует размеры рисунка до 50 пикселов по ширине и 50 пикселов по высоте;
• тег <Alt="C Новым Годом!"> выводит при наведении мыши на рисунок текст «С Новым Годом».
Примечание.
Не вдаваясь в тонкости веб‑дизайна, отметим тот момент, что данный пример – типичный случай технологии OLE с использованием связывания, так как рисунок 2006.jpg не становится частью HTML‑документа, а продолжает существовать в виде отдельного файла. В этом случае в документ внедряется не сам рисунок, а только указание на то, где он находится (путь к нему).
Упражнение 2.5. Создание коллажа
Коллаж обычно создается путем монтажа из нескольких изображений. В данном примере для создания комбинированного изображения воспользуемся возможностями графического редактора MS Paint в работе со слоями.
Новый термин.
Слои в графических редакторах можно рассматривать как наложенные друг на друга изображения, выполненные на прозрачных кальках. При этом результирующее изображение получается как сумма изображений, выполненных на таких кальках.
Ниже описан порядок выполнения коллажа, составленного из трех исходных изображений: Болота (1.jpg), Лягушки (2.jpg) и Дюймовочки (3.jpg), показанных на рис. 2.26, а–в.
Рис. 2.26. Исходные элементы для коллажа.
Рассмотрим порядок создания коллажа, состоящего из нескольких изображений:
1. Для начала выполните запуск программы MS Paint три раза и в каждом из окон откройте свой файл (то есть Болото, Лягушку и Дюймовочку).
2. В окне с изображением Лягушки резинкой сотрите фон (рис. 2.27).
3. Аналогично удалите фон из изображения Дюймовочки.
4. Теперь поочередно скопируйте в буфер обмена Лягушку и Дюймовочку, а затем вклейте их в изображение Болота. Посредством изменения масштаба, трансформации, поворота и перемещения этих объектов создайте композицию, аналогичную рис. 2.28. Используйте также инструмент Надпись для создания текста.
Рис. 2.27. Изображение лягушки без фона.
Рис. 2.28. Коллаж готов (вариант без Дюймовочки).
Внимание!
В ходе вашей работы есть один тонкий момент, изображенный на рис. 2.29.
Рис. 2.29. Иллюстрация работы с инструментом прозрачности фона изображения.
На рисунке 2.29, а показано максимальное для MS Paint количество слоев (два), а на рис. 2.29, б посредством инструмента для изменения прозрачности слоя белый фон вокруг изображения лягушки удален. Без наличия изображенного справа внизу инструмента изменения прозрачности фона создавать коллажи в MS Paint было бы невозможно.
Новый термин.
Прозрачность цвета означает, что при наложении данного рисунка поверх другого рисунка (фонового) нижний рисунок будет виден сквозь верхний в тех точках, которые имеют цвет, назначенный прозрачным.