Поделиться
193. Лабораторная работа 6.4. Вставка графических изображений.doc
Лабораторная работа 6.4. Вставка графических изображений
Вставка на страницу изображения из файлов графических форматов (расширения gif, bmp, jpg, ico и т.п.) выполняется с помощью тега <IMG> c атрибутом SRC, значение которого – адрес файла. Можно использовать также атрибуты WIDTH (ширина), HEIGHT (высота), задающие размер изображения в пикселях, ALIGN (обтекание) со значениями, например, RIGHT (картинка справа от текста), LEFT (слева от текста), атрибуты VSPACE (верхнее и нижнее поля вокруг рисунка), HSPACE (боковые поля), задающие размер полей в пикселях.
Фоновая графика (фоновый рисунок, поверх которого идет текст страницы) задается в теге <BODY> с помощью атрибута BACKGROUND, значением которого является адрес фоновой картинки, например, <BODY BACKGROUND=”C:\Мои документы\океан.jpg>. Чтобы просто залить цветом страницу, используется атрибут BGCOLOR, значение которого – имя цвета, например, <BODY BGCOLOR=”YELLOW” >.
1 Поместите в папку с Web-документами два файла с изображениями, один из которых будет играть роль обычной картинки на странице (в примере это «Колобок.gif»), а другой – роль фона (здесь – «Холмы.gif»). Следует учесть, что если картинка – рисунок формата bmp, то при масштабировании (если исходный размер заметно отличается от указанного в теге) изображение размывается. Поэтому, если нет подходящей картинки, можно нарисовать ее в приложении Paint, задав сразу подходящий размер и сохранив с расширением .gif.
Создайте в Блокноте следующий файл и сохраните его как myimg.htm.
<HTML> <HEAD> <TITLE> Изображения </TITLE> </HEAD>
<BODY BACKGROUND=”Холмы.gif”>
<BR> <BR>
<H1> Это текст поверх фоновой графики </H1>
<IMG SRC=”Колобок.gif” WIDTH=40 HEIGHT=30 VSPACE=10
HSPACE=20 ALIGN=”LEFT”>
<H2> Рисунок слева! Выбирайте фон так, чтобы он не мешал восприятию
текста </H2>
</BODY> </HTML>
Проверьте результат в обозревателе, затем попробуйте изменить значения атрибутов изображения, сохраните и запустите (можно повторно не открывать Explorer, а нажать кнопку «Обновить» на его панели).
При создании Web-рисунков необходимо учитывать следующее. На Web-страницах, как правило, используется растровая графика, в файлах которой содержится информация о каждой точке рисунка (пикселе). Каждое такое изображение содержит фиксированное количество пикселей по вертикали и горизонтали рисунка, соответствующих его высоте и ширине. Количество бит информации на один пиксель (от 1 до 48) определяется глубиной цвета или битовым разрешением. Чем больше глубина цвета, тем шире диапазон доступных цветов и тем точнее их представление в оцифрованном изображении, тем больше и объем файла с рисунком. Плохим свойством растровой графики является ее слабая масштабируемость: при масштабировании рисунка качество изображения ухудшается (рисунок «размывается»).
Среднестатистический пользователь работает в Интернете с разрешением экрана порядка 800´600, поэтому желательно, чтобы изображение не превышало размеров 700´400 пикселей (часть экрана займет браузер). Многие мониторы в сети воспринимают только 256 цветов, поэтому 24-битные графические рисунки будут иметь плохое качество изображения и слишком долго загружаться.
Возможность сжатия рисунка и повышение скорости пересылки зависит от формата графической информации. Для Web-графики стандартными считаются форматы JPEG, GIF, PNG.
JPEG (Joint Photographic Experts Group) – самый популярный формат для фотоизображений, позволяющий хранить полноцветные изображения с 16 миллионами цветов и уменьшать размер файла до 100 раз (обычно от 5 до 15 раз) без заметной потери качества изображения. Этот формат лучше использовать для фотографий, полученных со сканера или цифровой камеры, графики со сложным сочетанием цветов и оттенков.
Формат GIF (Graphics Interchange Format), главным достоинством которого является малый размер файлов, является до сих пор основным графическим форматом сети. В отличие от JPEG, формат GIF пользуется сжатием без потерь. Недостаток gif-изображений – малоцветность, палитра ограничена 256 цветами. Усовершенствованные версии формата, например GIF89a, позволяют указывать прозрачный цвет, строки текста, восстанавливать область экрана, занятого рисунком, снабжать файл невидимыми (не отображаемыми при выводе на страницу) комментариями. В этом формате можно также хранить в одном файле несколько изображений-кадров мультипликационного ролика, интерактивно управлять сменой кадров (анимационные GIF-файлы). Формат GIF подходит для изображений с ограниченным количеством цветов, рисунков с четкими границами и краями, изображений с текстом, анимацией, позрачным фоном. Следует учитывать: чем больше на рисунке контрастных и мелких деталей, тем больше размер gif-файла, чем большую площадь занимают однородно окрашенные участки и большую горизонтальную протяженность имеют детали рисунка, тем меньше размер gif-файла.
Формат PNG (Portable Network Graphics) пока широкого распространения не получил. Основным его достоинством является поддержка цветных рисунков с глубиной цвета до 48 бит. Этот формат обеспечивает высокую степень сжатия как по горизонтали, так и по вертикали. Каждый пиксель PNG-файла может иметь любую градацию прозрачности. Чтобы сгладить различия в яркости дисплеев разных компьютеров, формат позволяет хранить в файле исходный коэффициент яркости дисплея, на котором изображение было создано. PNG-формат не позволяет создавать анимационные ролики; для анимации можно использовать вариацию PNG – формат MNG (Multiple Network Graphics).
2 Создайте страницу с собственным портретом (используйте фотографию или рисунок в Paint).
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
