. Лабораторная работа 6.4. Вставка графических изображений
Оценка 4.9

. Лабораторная работа 6.4. Вставка графических изображений

Оценка 4.9
doc
13.05.2020
. Лабораторная работа 6.4. Вставка графических изображений
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).

 


Лабораторная работа 6.4. Вставка графических изображений

Лабораторная работа 6.4. Вставка графических изображений

Среднестатистический пользователь работает в

Среднестатистический пользователь работает в
Скачать файл