Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа
Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.
ALIGN
Выравнивание текста относительно графического изображения
LEFT по левой границе;
RIGHT по правой границе;
TOP по верхней границе;
MIDDLE по центру изображения;
BOTTOM по нижней границе;
TEXTTOP выравнивание по верхней границе относительно самых высоких символов в текстовой строке;
ABSMIDDLE выравнивание середины текстовой строки относительно середины изображения;
BASELINE выравнивание нижней рамки изображения относительно базовой линии текстовой строки;
ABSBOTTOM выравнивание нижней границы изображения относительно нижней границы текущей строки
HEIGHT
Высота изображения в пикселах
WIDTH
Ширина изображения в пикселах
BORDER
Ширина рамки вокруг изображения в пикселах (используется только навигатором Netscape Navigator)
HSPACE
Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали
VSPACE
Ширина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали
USEMAP
Адрес URL файла, содержащего так называемую карту изображения, которая используется для сегментированной графики. Сегментированная графика будет рассмотрена нами позже в этой главе
ISMAP
Этот параметр указывает, что данное изображение является сегментированным
С помощью параметров HEIGHT и WIDTH вы можете выполнять масштабирование графических изображений. Значение этих параметров можно указывать в процентах от ширины окна просмотра.
Масштабирование позволяет подготовить графический файл относительно небольшого размера, который быстро передается через Internet, и занимает при этом значительную площадь в окне навигатора. Вы, однако, не можете масштабировать сегментированные графические изображения и фоновые изображения.
В листинге 31 мы привели пример документа HTML, в который вставлено два растровых графических изображения.
Листинг 31. Файл chap4\inline.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение
графических изображений</
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение графики в документах HTML</H2>
<IMG SRC="cpanel.jpg">Это содержимое папки
Control Panel на моем компьютере
<P>Вы можете включать графические
изображения <IMG SRC="clock.jpg">
</BODY>
</HTML>
Первое изображение имеет большие размеры и расположено в начале параграфа, а второе, небольших размеров, вставлено в середину параграфа (рис. 28).
Рис. 28. Два графических изображения в документе HTML
Задавая различные типы выравнивания, вы можете изменить относительное расположение графического изображения и текста, расположенного рядом. Ниже мы приведем несколько примеров для всех типов выравнивания, допустимых в параметре ALIGN оператора <IMG>.
В документе HTML, исходный текст которого приведен в листинге 32, для параметра ALIGN мы указали значение TOP (выравнивание по верхней границе).
Листинг 32. Файл chap4\top.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение
графических изображений</
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение графики в документах HTML</H2>
Приведем пример документа HTML, в котором имеется
графическое изображение.
<P><IMG SRC="sun.gif"
ALIGN=TOP>Есть несколько
текста относительно графического изображения, которые
можно выбирать при помощи параметра <ALIGN>
оператора <IMG>
</BODY>
</HTML>
В результате текст оказался выровнен по верхней границе графического изображения, как это показано на рис. 29.
Рис. 29. Выравнивание текста по верхней границе изображения
Заметим, что при использовании выравнивания по верхней границе изображения мы не получили эффект обтекания изображения текстом. Такой эффект можно получить при помощи выравнивания других типов, о чем мы расскажем позже.
В листинге 33 мы привели исходный текст документа HTML, в котором помимо выравнивания типа BOTTOM (выравнивание по нижней границе изображения) указан параметр BORDER. Этот параметр позволяет создать вокруг графического изображения рамку заданной толщины. К сожалению, параметр BORDER распознается только навигатором Netscape Navigator. Что же касается навигатора Microsoft Internet Explorer, то он игнорирует параметр BORDER.
Листинг 33. Файл chap4\bottom.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Размещение
графических изображений</
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение графики в документах HTML</H2>
Приведем пример документа HTML, в котором имеется
графическое изображение.
<P><IMG SRC="sun.gif"
ALIGN=BOTTOM BORDER=2>Есть несколько
текста относительно графического изображения, которые
можно выбирать при помощи параметра <ALIGN>
оператора <IMG>
</BODY>
</HTML>
На рис. 30 изображен внешний вид документа с графическим изображением, взятым в рамку. Для него также указано выравнивание текста по нижней границе.
Рис. 30. Выравнивание текста по нижней границе изображения
На рис.31. мы показали центрирование текста относительно графического изображения, которое получается при использовании для параметра ALIGN значения MIDDLE. Текст соответствующего документа HTML вы найдете в файле chap4\bottom.htm на дискете, которая продается вместе с книгой. Этот текст мы опустили для экономии места, так как он отличается от текста, приведенного в листинге 33 только значением параметра ALIGN.
Рис. 31. Центрирование текста относительно изображения
Указывая для параметра ALIGN значения LEFT и RIGHT вы можете добиться эффекта обтекания изображения текстом, соответственно, с правой и левой стороны.
На рис. 32 показано взаимное расположение текста и графического изображения для выравнивания по левой границе (параметр ALIGN имеет значение LEFT). Исходный текст соответствующего документа HTML вы найдете в файле chap4\left.htm на дискете.
Для выравнивания по правой границе, которое получается если параметр ALIGN имеет значение RIGHT, взаимное расположение текста и графического изображения показано на рис. 33. Исходный текст документа HTML расположен в файле chap4\right.htm, который вы найдете на дискете.
Навигаторы Netscape Navigator, а также навигатор Microsoft Internet Explorer версии 3.0, распознают еще несколько типов выравнивания.
Выравнивание типа TEXTTOP аналогично выравниванию типа TOP, однако выравнивание выполняется относительно самых высоких символов в текстовой строке (рис. 34). Пример документа HTML находится в файле chap4\texttop.htm, расположенный на дискете.
Если указано выравнивание типа ABSMIDDLE, то выполняется выравнивание середины текстовой строки относительно середины изображения (рис. 35). Пример соответствующего документа HTML вы найдете в файле chap4\absmiddle.htm.
Указав тип выравнивания как BASELINE, вы можете выполнить выравнивание нижней рамки изображения относительно базовой линии текстовой строки (рис. 36). Соответствующий документ HTML расположен в файле chap4\baseline.htm.
Тип выравнивания ABSBOTTOM задает выравнивание нижней границы изображения относительно нижней границы текущей строки, которая расположена под базовой линией (рис. 37). Документ HTML, демонстрирующий выравнивание этого типа, расположен в файле chap4\absbottom.htm.
3.2 Как выбрать формат графического файла
Подготовка и размещение
графических изображений в
Прежде всего вы должны выбрать формат файла, в котором будет храниться графическое изображение. Несмотря на то что сегодня существуют десятки различных графических форматов, практически для оформления документов HTML используются только два. Первый формат - это формат обмена графикой GIF (Graphics Interchange Format), второй - JPEG. Рассмотрим особенности этих форматов, не углубляясь в несущественные для нас технические подробности.
Формат JPEG
Хотя исторически формат
GIF появился раньше, сначала мы расскажем
о формате JPEG. Этот формат имеет особенности,
делающие привлекательным его
Прежде всего, формат JPEG допускает
сжатие графической информации с
потерями. Подготавливая файл в формате
JPEG, вы можете указать допустимый процент
потери качества. Чем больше этот процент,
тем меньший объем дискового
пространства потребуется для хранения
файла и, что самое главное, тем
меньшее время потребуется
Минимизация размера графического изображения без существенных потерь качества - очень важная процедура. Дело здесь в том, что в среднем информация передается через сеть Internet со скоростью примерно 1 Кбайт в секунду, поэтому на загрузку больших изображений может уйти слишком много времени. Поэтому даже и не думайте о том, чтобы разместить в документе HTML цветную фотографию, занимающую на диске 1 Мбайт - посчитайте сами, сколько времени эта фотография будет передаваться пользователю.
Реальные объемы изображений, которые можно использовать, лежат в пределах от нескольких Кбайт до нескольких десятков Кбайт. Если же существует принципиальная необходимость размещения в документе HTML графического изображения высокого разрешения, занимающего много места, вы можете создать в документе ссылку на это изображение в виде небольшой пиктограммы. О том как это сделать, мы расскажем позже.
Другое преимущество формата JPEG заключается в том, что он позволяет хранить изображения с высоким цветовым разрешением (например, содержащие 16 млн. цветов).
Есть ли у формата JPEG недостатки?
Конечно есть, а как же без них.
Наиболее заметный недостаток
алгоритма сжатия с потерей качества
сказывается при попытке сжать
изображение с большим
Формат GIF
Формат GIF был разработан пользователями сети CompuServe и в настоящее время стал очень популярен. Несмотря на то что изображения, хранящиеся в этом формате, не могут иметь более 256 цветов, формат GIF обладает возможностями, которые делают его незаменимым в целом ряде случаев.
Во-первых, в формате GIF используются алгоритмы сжатия изображения без потерь качества. Поэтому этот формат как нельзя лучше подходит для хранения копий экранов или штриховых рисунков, содержащих большие однотонные площади.
Во-вторых, вы можете существенно уменьшить размер графического файла, записав в него сокращенную цветовую палитру вместо полной 256-цветной.
В-третьих, размещая в документах
HTML специальным образом
В-четвертых, формат GIF и только
формат GIF позволяет создавать
И, наконец, в пятых, формат GIF позволяет создавать файлы с чересстрочным (interlaced) изображением. Что это такое?
Строки чересстрочных изображений GIF располагаются не подряд, а по очереди. Вначале в этом файле находятся строки, номера которых кратны восьми, затем - четырем и так далее. Чересстрочное изображение проявляется на экране навигатора постепенно, увеличивая свою четкость по мере получения новых порций данных. Это дает пользователю возможность оценить содержимое графического изображения до момента его полной загрузки. Если изображение вам не нужно, вы можете отказаться от его загрузки до полного завершения процесса и тем самым сэкономить время.
Как устроен файл GIF?
Файл в формате GIF версии 89a состоит из блоков нескольких типов, два из которых являются обязательными, а остальные - дополнительными. Обязательные блоки - это блоки заголовка и блоки изображения. Дополнительно файл GIF может содержать блоки комментария, текстовые и управляющие блоки, а также блоки данных, содержащие произвольную информацию.
В блоке заголовка расположена палитра и сведения о размерах области, в которой желательно отображать содержимое файла. Что же касается палитры, то в файле GIF может быть определена одна глобальная палитра, которая используется для всех графических изображений, записанных в файле, или несколько локальных палитр для отдельных изображений.
В одном файле GIF может
быть один или несколько блоков изображений.
Если вы создаете прозрачные или анимационные
изображения, вам будет нужно
подготовить несколько