Работа с графикой
Форматы используемых |
графических файлов |
|
GIF – Graphic Interchange Format |
2 |
Палитра 256 цветов, применяется для логотипов, |
|
баннеров, рисунков. Обладает средствами поддержки |
эффектов анимации и прозрачности
JPG-JPEG – Joint Photographic Experts Group
Палитра около 16.7 млн. цветов, применяется для хранения фотографий и крупных изображений
PNG — Portable Network Grafics — был разработан в качестве альтернативы GIF- и JPG-форматам.
Формат файла можно посмотреть, например, в свойствах этого файла (открыть свойства через правую кнопку мыши)
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
Формат GIF |
|
Формат GIF — Graphics Interchange Format — (произносится по разному |
3 |
— «гиф» или «джиф») изначально был разработан для передачи |
графических данных между компьютерами с использованием модемов. |
Формат GIf применяет те же алгоритмы сжатия, что и обычные программы-архиваторы (метод LZW-компрессии — патентованный алгоритм сжатия, принадлежащий корпорации Unisis), поэтому при записи и считывании GIF-изображения никаких потерь информации не происходит. Однако в отличии от них GIF-файлы архивируются и разархивируются автоматически.
Формат GIF может применяться для цветных изображений, различных градаций серого или черно-белых изображений. При работе с цветом и при работе с градациями серого GIF-формат ограничен 256 цветами. В большинстве случаев этого вполне достаточно для получения качественных иллюстраций, но до фотографического качества, конечно, далеко.
GIF-формат имеет три приятные дополнительные возможности:
|
|
Мультипликация |
|
|
Прозрачная графика |
|
|
Черезстрочная развертка |
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
Формат JPEG |
|
Формат JPEG — Joint Photographic Experts Group — |
4 |
(произносится «джи-пег») был разработан специально для |
передачи фотографий. Он поддерживает миллионы цветов и |
позволяет получать изображения очень высокого качества.
Конечно, высокое качество отражается на размерах файла. Но формат JPG имеет одну особенность: во многих редакторах, которые работают с JPG-файлами (в частности, в PhotoShop`е) при сохранении файла, можно указать ту степень качества, которая нужна и, тем самым, балансируя на планке «качество- размер файла», достичь нужного компромисса.
В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета на близкие — на глаз такую подмену будет обнаружить практически невозможно, а размер файла существенно сократится.
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
Формат PNG |
5 |
Формат PNG — Portable Network Grafics — (произносится |
«пинг») был разработан в качестве альтернативы GIF- и JPG- |
|
|
форматам. |
Полная реализация данного формата должна :
•поддерживать полноцветные изображения с цветовой глубиной 24 бит/пиксел и даже 48 бит/пиксел,
•позволять хранить полную информацию о степени прозрачности каждой точки изображения с помощью специального альфа-канала.
•использовать более эффективный алгоритм черезстрочности,
•давать возможность использования гамма-коррекции. Это свойство используется для сглаживания яркости дисплеев различных типов компьютеров и, соответственно, между создаваемыми на них изображениями.
Трудность состоит в том, что на сегодняшний момент, PNG еще не готов для реального применения. Но не забывайте о нем, он может оказаться графическим форматом будущего.
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
|
Вставка картинки |
|
|
Для вставки графического объекта используется тэг |
|
6 |
<IMG > с атрибутами |
|
Обязательный атрибут!!!! |
||
src |
||
Источник(source) изображения, т.е. адрес графического файла. |
||
|
Здесь следует использовать относительный адрес файла. |
Ширина и высота изображения. Эти атрибуты можно не width, указывать, тогда рисунок будет выглядеть "как есть", но лучше
height задавать их явно, чтобы браузер зарезервировал соответствующий объем памяти.
alt |
Текст, появляющийся на экране вместо рисунка, если тот по |
|
какой-либо причине не может быть загружен. |
||
|
border 
Толщина рамки вокруг рисунка.
Задание имени файла |
изображения |
7
Имя файла изображения задается следующим образом:
Если файл расположен в той же папке, что и web-страница, то можно указать только само имя с расширением, например, <IMG SRC=“picture.gif”>
Если файл графики расположен во вложенной папке, то необходимо указать относительный путь, например, <IMG SRC=“Папка_картинок\picture.gif”>
Если файл графики расположен в другом месте, то указывается абсолютный путь, например,
<IMG SRC=“S:\3cursRP\$tasks \Компьютерное_делопроизводство\picture.gif”> Абсолютный путь указывается в основном для ссылки на другие web-страницы. Абсолютный путь не следует указывать для ссылки на файлы своего сайта
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
8 |
Следует использовать |
|
относительный адрес файла в атрибуте src!!!
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
Изменение формата |
графического файла |
9Открыть файл в любом графическом
редакторе
Выполнить команду меню Файл\Сохранить как
Выбрать нужный формат из списка Тип файла и нажать кнопку Сохранить
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
Задание размеров изображения
(желательно указывать)
10 |
Используем для этого атрибуты тэга IMG: |
|
<IMG SRC=“?” WIDTH=“?” |
HEIGHT=“?”>
WIDTH– ширина, HEIGHT– высота
В качестве значений этих атрибутов необходимо указать величину в пикселях или процентах. Ориентировочно, 100х100 пикселей – это маленькая картинка.
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|
11 |
Всегда желательно |
|
задавать явно размеры |
|
картинки, поскольку это |
|
позволяет ускорить процесс |
загрузки Web-страницы на компьютер пользователя.
Кафедра ИТ Ситникова П.Э., Шелудько Л.В |
Компьютерное |
делопроизводство. |
|