Как сделать резиновую картинку?
«Резиновой» называется картинка, обладающая способностью масштабироваться. Создать такую картинку можно, используя компьютерные программы. Ее удобство заключается в том, что она «растягивается» в нужном направлении. Такое веб-творение успешно отображается в любом браузере. Если картинка содержит какие-то полезные элементы, «резиновые» свойства повышают ее функциональность. Создать сайт самостоятельно с Wix.comНайдите или создайте изображение, которое необходимо сделать масштабирующимся и разместить в сети интернет. Запустите программу Adobe Photoshop. Откройте это изображение в программе. На панели инструментов найдите Slice Tool. С его помощью разрежьте изображение на части. Разделите ее таким образом, чтобы вся картинка состояла из трех графических элементов и центральная была пустой. Это поможет картинке растягиваться при любом разрешении монитора. Сохраните картинку с оптимизацией для веб-формата (Save for web). При сохранении установите необходимый формат файла - gif, jpeg или png. Для того, чтобы изменить отдельные фрагменты изображения, найдите в меню опцию Slice Select Tool и измените части картинки таким образом, чтобы из размер был минимальным при наименьших потерях качества во время визуализации на экране. После изменения сохраните картинки как html и images. Когда сохранили изображения, займитесь редактированием HTML-кода. Откройте сохраненный html-документ в приложении «Блокнот». Сотрите все строки кода, в которых нет необходимости. Сохраните неизменными только данные о таблице, в которую встроены изображения В строках вместо yourimage.gif укажите путь к изображениям на вашем компьютере. Высота и ширина должна быть соответствующая. Для того, чтоб сделать растягивающейся среднюю часть изображения, когда крайние части разводятся в стороны, пропишите необходимую информацию в строках кода. Укажите параметры (ширину и высоту) собственного изображения. Произведите загрузку созданных изображений в корневой каталог сайта. Укажите новые пути к картинкам на сервере, отредактировав таким образом HTML-код. Впишите код картинки между тегами . Проверьте свойства картинки. Попробуйте изменить ее масштаб в интернете. Изображение должно быть пластичным в любом направлении.
Оцените статью!
Вам понадобится
- изображение, сайт, программа Adobe Photoshop, приложение «Блокнот», HTML-код, корневой каталог своего сайта