|
 |
Шаг 9. ИзображенияДля встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой. Для указания адреса изображения можно задавать как абсолютный, так и относительный путь. В общем случае, правила для добавления изображений те же, что и при создании ссылок. Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.
Рис. 9.1. Пример размещения файлов
Рис. 9.2. Пример размещения файлов В примере 9.1 показаны несколько способов указания пути к графическому файлу при добавлении изображений на веб-страницу. Пример 9.1. Вставка изображения в документ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Альтернативный текстАльтернативный текст позволяет получить текстовую информацию об изображении при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то альтернативный текст появляется раньше самого рисунка. Некоторые браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. Для создания альтернативного текста используется параметр alt тега <IMG>, как показано в примере 9.2. Пример 9.2. Добавление альтернативного текста <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Размеры изображенияДля изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG> (пример 9.3). В качестве значений используется пиксел — элементарная точка на мониторе. Пример 9.3. Размеры изображения <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Замечание Подход, когда приходится менять размеры изображения относительно исходных, не следует применять часто. Если количество пикселов в картинке насильно увеличивается, то они никак не появятся из ниоткуда и браузеру придется, используя алгоритмы интерполяции, достраивать их самостоятельно. Тот же алгоритм применяется и в обратном случае, когда необходимо уменьшить картинку. Данный подход изменения размера изображения получил термин ресемплирование. Качество ресемплирования напрямую зависит от типа изображения, чем больше оно содержит мелких и контрастных деталей, тем хуже конечный результат, который проявляется как размытость. Рамка вокруг изображенияВокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах. Пример 9.4. Добавление рамки вокруг изображения <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Поля вокруг изображенияДля любого изображения можно задать пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство (пример 9.5). Пример 9.5. Добавление отступов вокруг изображения <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Выравнивание изображенияДля изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>. В табл. 9.1 перечислены возможные значения этого параметра и результат его использования.
Наиболее популярные параметры — left и right, создающие обтекание вокруг изображения (пример 9.6). Пример 9.6. Обтекание текста вокруг рисунка <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Работа с изображениями в NvuДля добавления нового изображения в Nvu нажмите на кнопку
Рис. 9.3. Окно свойств изображения Замечание Некоторые браузеры никак не отображают альтернативный текст, кроме случая отключения показа изображений. Если вы хотите обязательно сделать всплывающую подсказку, используйте параметр title тега <IMG>. В Nvu можно добавить эту возможность, заполнив текстом поле «Всплывающая подсказка» (рис. 9.3). С помощью вкладки «Размеры» (рис. 9.4) можно задать новые размеры изображения в пикселах, причем как в большую, так и меньшую сторону. По умолчанию флажок «Соблюдать пропорции» включен, поэтому при вводе ширины или высоты второй параметр будет высчитываться автоматически.
Рис. 9.4. Изменение размеров изображения в Nvu Остальные параметры, определяющие вид изображения, меняются на вкладке «Внешний вид» (рис. 9.5). Сюда входят «Поля слева и справа» (параметр hspace), «Поля сверху и снизу» (vspace), «Сплошная рамка» (border) и «Расположение текста относительно изображения» (align).
Рис. 9.5. Добавление отступов, рамки и выравнивания к изображению Изображение в качестве ссылкиКроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <A> и </A>, как показано в примере 9.7. Пример 9.7. Создание рисунка-ссылки <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Когда изображение становится ссылкой, вокруг него автоматически добавляется рамка толщиной один пиксел. Чтобы убрать рамку, добавьте параметр border="0" к тегу <IMG>. В Nvu создание ссылки для изображения делается с помощью вкладки «Ссылка» в параметрах добавления и свойств изображения, как показано на рис. 9.6.
Рис. 9.6. Создание ссылки на изображении в Nvu Copyright © Влад Мержевич |
adipiscing elit...
или выберите пункт меню Вставка > Изображение... После
этого откроется диалоговое окно, где следует указать адрес изображения и альтернативный
текст (рис.9.3).
