Работа с изображениями

Автор admin | 8 ноября 2010, 3:53

Вставка изображений

Фактическим стандартом для веб-страниц стали изображения в форматах GIF, JPEG и PNG.

Формат GIF (Graphics Interchange Format) – сжатие изображения без потерь, с поддержкой прозрачности и анимации, 8-битный цвет (256 вариантов);
Формат JPEG (Joint Photographic Experts Group) – сжатие регулируемой глубины с потерями, 16-битный цвет;
Формат PNG (Portable Network Graphics) – сжатие регулируемой глубины, широкий выбор цветовых форматов (24-битный цвет, оттенки серого, 8-битовая цветовая палитра), поддержка многослойной прозрачности.

Как правило, JPEG хорош для фотографий, позволяя достичь наилучшего сжатия с минимальными потерями, а GIF и PNG – для схем и пиктограмм.

Вы также можете сделать эти изображения ссылками. Для встраивания изображения в документ используется тег <IMG>, имеющий обязательный параметр src (источник), в котором задается адрес файла, содержащего рисунок.

При указании адреса изображения может использоваться абсолютный или относительный путь.

Абсолютный путь означает, что в качестве имени файла мы используем его полное имя, например, c:\site\image\prim.jpg на локальном компьютере или http://mysite.ru/image/prim.jpg.

Относительный путь учитывает положение страницы, из которой происходит обращение к файлу. Рассмотрим различные варианты расположения файлов index.html, в который вставляется изображение, и файла с изображением prim.jpg:

файлы находятся в одной папке (на одном уровне) – используется просто имя файла <img src=”prim.jpg”>;
файл index.html папка с изображением находятся на одном уровне <img src=”/image/prim.jpg”>.
файлы находятся в разных папках, которые находятся на одном уровне <img src=”../image/prim.jpg”>. Двоеточие со слэшем (../) обозначает переход на один уровень.
файлы находятся в разных папках, которые находятся на разных уровнях <img src=”../../image/prim.jpg”>;
на веб-сервере кроме выше описанных вариантов можно прописывать адреса, используя вместо имени сервера слэш. Запись <img src=”/image/prim.jpg”> эквивалентна записи http://mysite.ru/image/prim.jpg

Чтобы вставить изображение:

Предварительно сохраните файл, чтобы редактор мог использовать относительные адреса.
Поместите текстовый курсор в то место, куда вы хотите вставить изображение.
Нажмите кнопку Изображение на панели инструментов Nvu или дайте команду Вставка => Изображение. Откроется диалоговое окно Свойства изображения на вкладке Адрес.
В поле Адрес изображения введите адрес (URL) изображения. Для выбора файла, находящегося на локальном диске или в локальной сети нажмите кнопку Выбрать файл.
Введите альтернативный текст (alt), отображаемый в том случае, когда изображение не показывается. Кроме того, альтернативный текст может отображаться и графическими браузерами до полной загрузки. Некоторые браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Вы можете отказаться от вставки альтернативного текста

Рис. 35.

При просмотре рисунка с указанными на рис. 35 параметрами в браузере Internet Explorer с отключенным показом изображений и наведении указателя мыши получается рис. 36.

Рис. 36.

Примечание. Чтобы быстро вставить изображение, достаточно перетащить его при помощи мыши в окно Nvu из другого приложения или из окна папки.

Если вы хотите добавить разрыв строки между изображением и последующим текстом (изображениями) того же абзаца, используйте команду Вставка => Разрыв под изображениями.

С помощью вкладки Размеры (рис. 37) можно задать новые размеры изображения в пикселах, причем как в большую, так и меньшую сторону. По умолчанию флажок Соблюдать пропорции включен, поэтому при вводе ширины или высоты второй параметр будет высчитываться автоматически. В HTML предусмотрены параметры width и height тега <IMG>.

Рис. 37.

Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

Остальные параметры, определяющие вид изображения, меняются на вкладке Внешний вид (рис. 38). Сюда входят

Поля слева и справа, Поля сверху и снизу, задающие для любого изображения пустые поля по горизонтали и вертикали с помощью параметров hspace и vspace. Особенно это актуально при обтекании рисунка текстом. В этом случае, чтобы текст не наезжал плотно на изображение, необходимо вокруг него добавить пустое пространство параметр hspace),

Сплошная рамка, добавляющая вокруг изображения рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> . В качестве значения указывается толщина рамки в пикселах.

Расположение текста относительно изображения, указывающая положение изображения относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.

Рис. 38.

Задание8. Вставьте рисунок с параметрами, указанными на рисунках 35, 37, 38 и добавьте текст, чтобы получилась страница, приведенная на 39.

Рис. 39.

Код этой страницы приведен ниже.

<html>

<head>

http-equiv=”content-type”>

<title>пример рисунка</title>

</head>

<body>

<p><img title=”цветок”

style=”border: 2px solid ; width: 200px; height: 150px;”

alt=”гортензия” src=”images/Hydrangeas.jpg”

align=”middle” hspace=”10″ vspace=”10″>Гортензия<br>

Гортензии – изумительные по красоте и разнообразию кустарники. В

декоративном садоводстве гортензии ценятся за разнообразие форм

соцветий, обширную палитру цветов, крупные фигурные листья, интересную

кору, а также за неприхотливость и обильное цветение. Необычайно

эффектное зрелище гортензии представляют осенью, когда на одном

растении можно одновременно увидеть бутоны, семенные головки и листья

разных цветов</p>

<br>

</body>

</html>

Изменение свойств изображения

Поместив изображение на страницу, в дальнейшем вы можете изменять его свойства, например высоту и ширину, размер полей, характер размещения текста по отношению к изображению.

Чтобы просмотреть или изменить свойства изображения, неоходимо выполнить одно из следующих действий:

Дважды щелкнуть по изображению.
Выделить изображение и нажать кнопку Изображение в панели инструментов Nvu.
В контекстном меню рисунка выбрать команду Свойства изображения.

Откроется диалоговое окно Свойства изображения.

Задание 9. Преобразуйте предыдущий рисунок в такой вид, который представлен на рисунке 40.

Для этого выполните следующие действия:

Установите в свойствах изображения на вкладке Расположение в группе расположение изображение относительно текста Влево, окружить текстом справа.
Переместите мышью рисунок в тексте за заголовок Гортензия.
Присвойте заголовку стиль Заголовок1 и установите выравнивание по центру.
Для текста задайте выравнивание по ширине.