(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Изображения на веб-сайте. Часть II. Методы размещения.

Источник: web-silver

Чтобы графические элементы сайта загружались одновременно со страницей, а затем корректно отображались в браузере, они должны находиться в отдельной папке, для удобства названной images или просто img. Далее папка img копируется в каталог с html-страницами. Теперь можно задуматься о том, как внедрить изображения в веб-страницы.

Для размещения графической информации на сайте применяется тег <IMG> и атрибут SRC: <img src="адрес изображения">. Применимо для папки img код примет следующий вид: <img src="site/img/picture.gif">, где site - имя корневой папки, в которой располагается сайт; img - каталог с изображениями; picture.gif - размещаемый графический файл. Закрывающий тег </IMG> не используется.

В случае ошибочного указания адреса размещаемого файла, вместо изображения в веб-браузере вы увидите пустую рамку.

Неправильное изображение

Атрибуты тега <IMG>.

Атрибут SRC отвечает за указание адреса файла. Но кроме него,существуют ряд других атрибутов, отвечающих за нюансы размещения (подпись рисунка, способ выравнивания и так далее).

Атрибут ALIGN служит для установления способа выравнивания картинки (значения left и right, top, middle, bottom)

С помощью ALT добавляется комментарий, отображаемый во время отключения показа графики в веб-браузере.

HTML-код: ALT="комментарий".

BORDER - толщина рамки вокруг изображения.

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

WIDTH и HEIGHT - высота и ширина изображения.

В завершении статьи несколько полезных советов:

  • Указав перед адресом графического изображения проток http://, вы создадите абсолютную ссылку. То есть сохранить веб-страницу для автономного просмотра вместе с изображением, обозначенным в ссылке, невозможно. Абсолютная ссылка предназначена для загрузки изображения из Интернета, а потому на компьютере картинка сохранена не будет.
  • Для графических элементов сайта (меню и баннеров) используйте формат gif, для полноцветных изображений - jpeg.
  • Старайтесь не применять атрибуты WIDTH и HEIGHT для изображений формата jpeg. Если указать большие значения длины и ширины, это повлечет снижение качества изображения. Картинку большого размера не стоит уменьшать с помощью данных атрибутов, веб-браузер все равно вначале будет загружать изображение первоначального размера, а уже потом изменять его. Поэтому прежде чем разместить изображение на веб-странице, при помощи любого графического редактора подкорректируйте его параметры.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 25.08.2008 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
DevExpress / Universal Subscription
CAD Import .NET Professional пользовательская
Dr.Web Security Space, продление лицензии на 1 год, 1 ПК
Microsoft 365 Business Basic (corporate)
IBM RATIONAL Clearcase Floating User From Rational Clearcase Lt Floating User Trade Up License + Sw Subscription & Support 12 Months
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Новые материалы
Один день системного администратора
Все о PHP и даже больше
Adobe Photoshop: алхимия дизайна
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100