ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 06.04.2021
Просмотров: 264
Скачиваний: 1
6
На
сегодняшний
день
стандарт
JPEG
занимает
второе
место
по
попу
-
лярности
после
GIF
и
используется
для
создания
изображений
,
в
компози
-
цию
которых
входят
фотографии
,
сложные
коллажи
(
компьютерный
мон
-
таж
нескольких
разнородных
графических
объектов
),
объекты
,
подвергну
-
тые
действию
различных
графических
эффектов
и
фильтров
.
Стандарт
PNG
разрабатывался
с
учетом
особенностей
Интернета
.
PNG
является
попыткой
объединить
в
себе
наиболее
сильные
стороны
двух
предыдущих
стандартов
и
исключить
их
недостатки
.
В
стандарте
реализованы
следующие
средства
:
•
прозрачный
фон
;
•
построчное
чередование
;
•
сжатие
без
потерь
и
др
.
Однако
PNG,
несмотря
на
свои
преимущества
,
не
получил
такого
признания
пользователями
Интернета
,
как
стандарты
GIF
и
JPEG (
одна
из
возможных
причин
–
отсутствие
поддержки
анимации
).
В
Сети
можно
встретить
графические
файлы
с
расширением
png,
но
достаточно
редко
и
только
в
специфических
направлениях
интернет
-
отрасли
(
например
,
рабо
-
та
программного
модуля
GD::Graph,
автоматически
генерирующего
гра
-
фики
и
диаграммы
для
систем
статистики
,
рейтинга
и
пр
.).
1.2.
ВСТАВКА
ГРАФИКИ
В
HTML-
ДОКУМЕНТ
Прежде
чем
перейти
к
рассмотрению
правил
встраивания
графики
в
HTML-
документы
следует
напомнить
,
что
графические
изображения
так
-
же
могут
быть
включены
в
основной
раздел
документа
,
описываемый
те
-
гом
-
контейнером
<BODY>
,
а
также
в
качестве
фона
ячеек
таблицы
:
<BODY BACKGROUND="bg.gif">
<TABLE>
<TR>
<TD BACKGROUND="bg2.jpg">T
Е
KCT</TD>
</TR>
</TABLE>
Для
вставки
графических
изображений
в
HTML-
документы
исполь
-
зуется
специальный
тег
<IMG>
,
который
не
требует
наличия
закрывающе
-
го
тега
.
Рассмотрим
существующие
параметры
этого
тега
.
Параметр
SRC
.
Единственный
параметр
,
который
является
обяза
-
тельным
для
указания
, –
это
SRC
,
который
выполняет
важную
роль
в
гра
-
фическом
изображении
на
странице
–
он
задает
путь
(
относительный
или
абсолютный
)
к
рисунку
.
Формат
указания
следующий
:
<IMG SRC="picture.gif">
Следует
заметить
,
что
в
данном
случае
браузер
станет
искать
файл
«picture.gif»
в
том
же
каталоге
,
где
находится
и
HTML-
документ
,
ссылаю
-
щийся
на
этот
рисунок
.
Обычно
для
графических
изображений
выделяется
отдельная
папка
:
<IMG SRC="images/picture.gif">
Параметр
BORDER
предназначен
для
отображения
вокруг
рисунка
рамки
определенной
толщины
(
листинг
1.1,
рис
. 1).
Толщина
указывается
в
пикселах
,
по
умолчанию
(
если
параметр
пропущен
)
рамка
браузером
не
отображается
.
Листинг
1.1.
Пример
использования
рамок
вокруг
изображений
<HTML><HEAD>
<TITLE>
Пример
рамок
вокруг
изображения
</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black"
LINK="#00FF00" ALINK="#00FF00" VLINK="blue">
<TABLE BORDER="0">
<TR ALIGN="CENTER">
<TD>
Без
рамки
<IMG SRC="images\watch.jpg"> </TD>
<TD>
Рамка
толщиной
5 <IMG SRC="images\watch.jpg" BORDER=5> </TD>
<TD>
Рамка
толщиной
10 <IMG SRC="images\watch.jpg" BORDER=10> </TD>
</TR>
</TABLE>
</BODY></HTML>
Рис
. 1.
Пример
рамки
вокруг
рисунка
В
случае
если
графическое
изображение
является
гиперссылкой
,
брау
-
зер
автоматически
отобразит
вокруг
рисунка
рамку
толщиной
в
1
пиксел
(
кроме
этого
,
некоторые
браузеры
делают
рамку
определенного
цвета
,
обычно
синего
).
Поэтому
,
если
никакой
необходимости
в
рамке
вокруг
гра
-
фического
указателя
ссылки
нет
,
следут
дать
браузеру
соответствующую
инструкцию
:
7
8
<
А
HREF="watch.html"><IMG SRC="images/watch.jpg"
BORDER="0"></A>
Параметры
WIDTH
и
HEIGHT
по
аналогии
с
другими
HTML-
элементами
(
табличные
ячейки
,
горизонтальные
разделители
)
используют
-
ся
для
определения
размеров
графического
изображения
,
встраиваемого
в
электронный
документ
(
ширина
и
высота
,
в
пикселах
):
<IMG SRC="images/watch.jpg" BORDER="1" WIDTH="250"
HEIGHT="250">
Использование
этих
параметров
не
обязательно
,
однако
рекоменду
-
ется
по
двум
основным
причинам
:
•
во
время
загрузки
изображения
браузер
сразу
зарезервирует
на
странице
столько
места
,
сколько
необходимо
для
отображения
рисунка
;
многие
разработчики
пренебрегают
этим
правилом
,
в
результате
чего
при
загрузке
под
рисунок
изначально
отводится
слишком
мало
места
,
а
потом
страница
начинает
«
скакать
»,
поскольку
браузер
одновременно
пытается
в
это
пространство
вместить
реальные
размеры
файла
;
•
иногда
размеры
изображения
слишком
велики
и
для
его
просмот
-
ра
«
в
полный
рост
»
требуются
полосы
прокруток
;
в
таком
случае
,
если
не
-
обходимо
поместить
рисунок
в
окне
браузера
,
не
прибегая
к
помощи
полос
прокруток
,
можно
в
HTML-
коде
указать
пропорционально
уменьшенные
размеры
этого
рисунка
.
Размещая
на
странице
уменьшенный
вариант
рисунка
,
обязательно
помните
о
необходимости
пропорционального
изменения
размеров
в
про
-
тивном
случае
при
нарушении
соотношения
этих
размеров
изображение
получится
искаженным
и
неприглядным
.
Корректно
изменить
пропорции
рисунка
можно
следующими
спосо
-
бами
:
•
указать
в
теге
<IMG>
измененным
только
один
из
параметров
(
либо
WIDTH
,
либо
HEIGHT
);
браузер
самостоятельно
изменит
второй
па
-
раметр
,
сохраняя
пропорцию
;
•
открыть
рисунок
в
любом
растровом
редакторе
(
например
, Adobe
Photoshop)
и
изменить
пропорции
программным
образом
.
Что
касается
пропорционального
увеличения
графических
изобра
-
жений
в
HTML-
документах
,
то
такой
подход
не
рекомендуется
по
причине
особенностей
самого
растрового
формата
(
ухудшение
качества
изображе
-
ния
при
увеличении
его
размеров
).
Однако
если
степень
увеличения
незна
-
чительна
(
в
среднем
на
5–10
пикселов
),
как
правило
,
визуально
качество
остается
неизменным
.
В
завершение
разговора
о
параметрах
WIDTH
и
HEIGHT
следует
ска
-
зать
,
что
допустимо
указание
размеров
графического
изображения
в
про
-
центах
.
Этот
формат
записи
дает
команду
браузеру
растянуть
или
сузить
рисунок
в
соответствии
с
размерами
окна
страницы
.
Но
такой
подход
не
рекомендован
и
может
применяться
только
в
исключительных
случаях
и
9
только
в
отношении
однородных
рисунков
,
поскольку
некоторые
браузеры
либо
не
поддерживают
подобное
обозначение
размеров
,
либо
выводят
ри
-
сунки
некорректно
.
Параметр
ALIGN
предназначен
для
определения
типа
выравнивания
рисунка
относительно
текста
и
прочих
элементов
электронного
документа
.
Существующие
значения
параметра
ALIGN
представлены
в
табл
. 1.1.
Таблица
1.1.
Значения
параметра
ALIGN
Значение
Функция
LEFT
Текст
обтекает
рисунок
по
правому
краю
(
изображение
слева
)
RIGHT
Текст
обтекает
рисунок
по
левому
краю
(
изображение
справа
)
ТОР
Верхний
край
рисунка
выравнивается
по
самому
высокому
элементу
строки
ТЕХТТОР
Верхний
край
рисунка
выравнивается
по
самому
высокому
текстовому
элементу
строки
MIDDLE
Выравнивание
середины
рисунка
по
базовой
линии
строки
ABSMIDDLE
Выравнивание
середины
рисунка
по
середине
строки
BOTTOM
Выравнивание
нижнего
края
рисунка
по
базовой
линии
строки
BASELINE
Выравнивание
нижнего
края
рисунка
по
базовой
линии
строки
ABSBOTTOM
Выравнивание
нижнего
края
рисунка
по
нижнему
краю
строки
Следует
заметить
,
что
некоторые
популярные
браузеры
(
например
,
Netscape)
интерпретируют
значения
ABSMIDDLE
и
ABSBOTTOM
как
,
соот
-
ветственно
,
MIDDLE
и
BOTTOM
. Internet Explorer
корректно
отображает
все
приведенные
в
табл
. 1.1
значения
.
Основное
же
различие
между
значениями
нижнего
края
и
базовой
линии
заключается
в
особенностях
некоторых
букв
алфавита
и
прочих
символов
.
Нижний
край
–
это
крайняя
точка
текстового
блока
,
а
базовая
линия
проходит
по
нижней
части
строки
текста
без
учета
фрагментов
тек
-
ста
,
выходящих
за
строку
.
Другими
словами
,
при
наличии
в
тексте
букв
«
у
», «
р
», «q», «g»
и
т
.
п
.
нижняя
часть
этих
символов
будет
определяться
значением
ABSBOTTOM
,
а
часть
букв
на
уровне
запятой
в
предложении
–
значением
BOTTOM
или
BASELINE
.
Примеры
выравнивания
рисунков
приведены
соответственно
в
листинге
1.2
и
на
рис
. 2.
Рис
. 2.
Примеры
выравнивания
рисунков
Листинг
1.2.
Примеры
выравнивания
рисунков
<HTML>
<HEAD> <TITLE>
Примеры
выравнивания
рисунков
</TITLE> </HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00"
ALINK="#00FFFF" VLINK="BLUE">
<IMG SRC="images\watch125.jpg" ALIGN="left" BORDER="1"
WIDTH="125">
<B>
Выравнивание
текста
по
правому
краю
рисунка
</B> <BR>
Профиль
деятельности
разработчиков
JPEG
внес
свой
вклад
в
по
-
зиционирование
стандарта
–
в
основном
он
использовался
(
и
по
сей
день
используется
)
для
передачи
фотографических
изображе
-
ний
.
В
стандарте
применен
специальный
алгоритм
компрессии
дан
-
ных
–
при
повышении
степени
сжатия
качество
изображения
ухуд
-
шается
за
счет
изъятия
"
ненужной
"
информации
(
в
отличие
от
ал
-
горитма
сжатия
GIF,
который
позволяет
производить
подобную
процедуру
практически
без
потерь
).
<BR>
<IMG SRC="images\watch125.jpg" ALIGN="right" BORDER="1"
WIDTH="125">
<B>
Выравнивание
текста
по
левому
краю
рисунк
a</B> <BR>
10
Профиль
деятельности
разработчиков
JPEG
внес
свой
вклад
в
по
-
зиционирование
стандарта
–
в
основном
он
использовался
(
и
по
сей
день
используется
)
для
передачи
фотографических
изображе
-
ний
.
В
стандарте
применен
специальный
алгоритм
компрессии
дан
-