Сегодня: 26 мая 2017 года, пятница

Поиск по сайту


Дизайнерский форум

Рассылка

Наша кнопка

Мы рекомендуем

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

Чтобы графические элементы сайта загружались одновременно со страницей, а затем корректно отображались в браузере, они должны находиться в отдельной папке, для удобства названной 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. Если указать большие значения длины и ширины, это повлечет снижение качества изображения. Картинку большого размера не стоит уменьшать с помощью данных атрибутов, веб-браузер все равно вначале будет загружать изображение первоначального размера, а уже потом изменять его. Поэтому прежде чем разместить изображение на веб-странице, при помощи любого графического редактора подкорректируйте его параметры.
Дизайн навигатор - Photoshop, уроки фотошоп, шаблоны сайтов