Делаем резиновую картинку

Делаем резиновую картинку
«Резиновая» картинка – это картинка, которая обладает способностью масштабироваться. Можно создать такую картинку, используя компьютерные программы. Удобство резиновой картинки заключается в том, что та «растягивается» в нужном направлении. Это веб-творение хорошо отображается в любом браузере. Когда картинка содержит полезные элементы, «резиновые» свойства эффективно повышают ее функциональность.

Отыщите или создайте изображение, которое требуется сделать масштабирующимся и потом разместить в сети интернет. На компьютере запустите программу Adobe Photoshop. Теперь откройте в программе это изображение. Найдите на панели инструментов Slice Tool. Разрежьте с его помощью изображение на части. Поделите ее таким образом, чтобы картинка состояла ровно из трех графических элементов, а часть в центре оставалась пустой. Это поможет при любом разрешении монитора растягиваться картинке.

Сохраните изображение с оптимизацией (Save for web) для веб-формата. Установите при сохранении необходимый формат файла – png, jpeg или gif. Чтобы изменить какие-то фрагменты изображения, отыщите опцию Slice Select Tool, затем измените части картинки так, чтобы их размер во время визуализации на компьютерном экране был минимальным при маленьких потерях качества. После изменения сохраните все картинки как images и html. Изображения сохранены? Тогда займитесь редактированием HTML-кода. В приложении «Блокнот» откройте сохраненный html-документ. Теперь строки кода, в которых необходимости нет, сотрите. Неизменными сохраните лишь данные о таблице (в нее встроены изображения).

Вместо yourimage.gif в строках указывайте путь к изображениям на компьютере. Ширина и высота должна быть соответствующей. Чтобы сделать среднюю часть изображения растягивающейся, когда в стороны разводятся крайние части, пропишите в строках кода нужную информацию. Укажите параметры (высоту и ширину) собственного изображения. Теперь произведите загрузку в корневой каталог сайта созданных изображений. Укажите на сервере новые пути к картинкам, отредактировав HTML-код. Код картинки впишите между тегами.

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

Categories : Остальное / Уроки / Интернет / web-разработки / css / html / WEB-Дизайн
Tags :

0 Коментов Оставить комментарий