Лекция№11 Встраивание изображений
реклама
Лекция № 11 Тема: Встраивание изображений в HTML Цель: Для размещения изображений в HTML-документах используется тэг <IMG>, у которого параметр SRC задает местонахождение файла с изображением. Например: <IMG SRC=picture.gif> - в HTML-документ будет помещено изображение, находящееся в файле picture.gif; <IMG SRC=Images/Плитка.bmp> - в HTML-документ будет помещено изображение, находящееся в файле Плитка.bmp, который расположен в папке Images, находящейся в этой же самой папке, что и HTML-документ. При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тэга <IMG>. Возможные значения: TOP- Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. TEXTTOP- Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. MIDDLE- Выравнивание середины изображения по базовой линии текущей строки. ABSMIDDLE- Выравнивание середины изображения по середине текущей строки. BASELINE или BOTTOM- Выравнивание нижней границы изображения по базовой линии текущей строки. ABSBOTTOM- Выравнивание нижней границы изображения по нижней границе текущей строки. LEFT- Изображение “прижимается” к левому полю окна. Текст обтекает изображение с правой стороны. 1 RIGHT- Изображение “прижимается” к правому полю окна. Текст обтекает изображение с левой стороны. Приведем фрагмент HTML-документа, иллюстрирующий использование этих параметров: ................ <IMG SRC=Images/Leto.jpg ALIGN=LEFT WIDTH=300> Изображение “прижимается” к правому полю окна. Текст обтекает изображение с левой стороны.<BR> <IMG SRC=Images/Vodopad.jpg ALIGN=RIGHT WIDTH=300> Изображение “прижимается” к левому полю окна. Текст обтекает изображение с правой стороны.<BR> ................ В браузере данный HTML-документ будет выглядеть следующим образом: При их использовании мы получаем так называемое “плавающее” изображение. В этом случае изображение “прижимается” к соответствующему краю окна браузера, а текст (или другие элементы) “обтекают” изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек. Понятия “базовая линия”, “нижняя граница” проиллюстрированы на следующем рисунке: 2 Как видно из рисунка базовая линия (BASELINE или BOTTOM) – это нижняя часть воображаемой линии текста, которая проводится без учета нижней части некоторых символов, например букв типа j, q, y. В отличие от выравнивания по базовой линии, при задании значения ABSBOTTOM, выравнивание выполняется по нижней границе, то есть по нижней части самого низкого элемента в строке. Аналогично обстоит дело с различием между параметрами TOP и TEXTTOP. Например, самым высоким элементом в строке может быть графическое изображение, в то время как самым высоким текстовым элементом строки является, как правило, заглавная буква. Приведем пример HTML-документа, в котором используется изображение как элемент строки. Для простоты возьмем в качестве картинки изображение прямоугольника, находящегося в файле Wrinkls.jpg. Текст HTML-документа будет следующим: <HTML><HEAD> <TITLE> Выравнивание изображений относительно текста.</TITLE> </HEAD> <BODY> Выравнивание <IMG SRC=Wrinkls.jpg ALIGN=Top> по верхнему краю. <P> Выравнивание <IMG SRC=Wrinkls.jpg ALIGN=Middle> середины изображения по базовой линии. <P> Выравнивание <IMG SRC=Wrinkls.jpg ALIGN=Bottom> нижней границы изображения по базовой линии текущей строки. <P> </BODY> </HTML> 3 Замечание. Если браузер работает в режиме отключения приема графических изображений, то пользователь рисунков не увидит. Для этого случая желательно на месте рисунков вывести поясняющий текст, который может появляться также в виде подсказки при наведении курсора мыши на область, где должен быть расположен рисунок. Это достигается использованием параметра тэга ALT например: <IMG>, Выравнивание <IMG SRC=prjam.gif ALIGN=Top ALT=”Здесь изображение прямоугольника.”> по верхнему краю. Задание размеров выводимого изображения Тэг <IMG> имеет еще два необязательных параметра, указывающих размеры изображения при просмотре Web-страницы. Это WIDTH (ширина) и HEIGHT (высота), которые задаются в пикселях. Замечание. Если значения параметров ширины и высоты изображения не совпадают с истинными размерами изображения, то браузеры автоматически выполняют его перемасштабирование. Поэтому неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания значений ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, настоятельно рекомендуется указывать их реальные размеры в пикселях с помощью параметров WIDTH и HEIGHT. Определить действительные размеры изображений можно с помощью специальных программ. Указание действительных размеров: позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустотелому 4 прямоугольнику, выдаваемому на экран вместо изображения. Если размеры не будут указаны, то браузер, не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено; позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнять форматирование документа до полной загрузки файлов с изображениями. Параметры WIDTH и HEIGHT очень удобно использовать при масштабировании изображений. Приведем пример HTML-документа, позволяющего вывести рисунок в масштабах 2:1, 1:1, 1:2 Отделение изображения от текста Для тэга IMG можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, которые остаются пустыми, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением остается пространство, необходимое для нормального восприятия. Размещение изображения в рамке Изображение, встраиваемое в HTML-документ, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга <IMG>. В качестве значения параметра используется число, определяющее толщину рамки в пикселях. По умолчанию рамка вокруг изображений не изображается. Исключением из этого правила является случай, когда изображение является ссылкой. Замечание. Если изображение является ссылкой, то по умолчанию браузеры заключают его в рамку синего цвета. Избежать появления рамки можно, указав значение BORDER=0. 5
