Пермская группа пользователей Linux

Следующая наша тема — сложная графика и анимация.

Под словом «сложная» в данном случае я подразумеваю не сложность рисования, а сложность вёрстки. То есть речь пойдёт о многослойной составной графике с прозрачными областями. Но начнём мы с простого.

1. Картинки.

Сначала поговорим о том, каким образом на сайт можно вставить картинку.

Способа всего два: первый — вставить непосредственно объектом image, и тогда по этой картинке можно будет кликнуть правой кнопкой и сохранить на компьютер; второй — указать какому-нибудь элементу это изображение в качестве фона, и тогда пользователь без специальных средств не сможет ничего сделать с этой картинкой: ни сохранить, ни открыть в новом окне. Кроме того, изображения, наложенные фоном, по умолчанию не отображаются при печати страницы.

Рассмотрим возможности этих двух вариантов вставки изображений на сайт.

1.1. Объект.

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

Пожалуй, самый яркий пример использования этого эффекта — это масштабирование Яндекс.Карт: http://maps.yandex.ru/

В поиске картинок Гугла этот эффект применяется для создания заглушек из маленьких картинок, пока большая грузится: http://images.google.ru/images?q=лемур

Этот эффект может иметь также и чисто декоративное применение: http://www.help-line.ru/ — здесь масштабируется слоган сайта при изменении размеров окна.

Еще одна важная особенность такого способа вставки изображения в том, что ему можно указать альтернативный текст, который будет показан, если картинка не загрузилась. В некоторых случаях это бывает важно. Например, на табачных и алкогольных сайтах необходимо показывать «health warning». И если у пользователя отключены картинки, то он, по крайней мере, увидит альтернативный текст:

1.2. Фон.

При наложении изображения фоном нет возможности использовать масштабирование. Но зато здесь мы можем: а) расположить изображение в любом месте объекта и б) включить повторение. Сейчас мы рассмотрим все варианты использования этих возможностей.

Расположение фона можно указывать в пикселях и процентах, причем как положительные значения, так и отрицательные. Пиксели отсчитываются от левого верхнего угла объекта до левого верхнего угла изображения. Проценты же высчитываются таким образом, чтобы указанная часть изображения в процентах правым краем совпала с правым краем соответствующей части объекта. Допустим, если мы укажем расположение по горизонтали 50%, то изображение будет размещено так, чтобы его середина совпадала с серединой объекта, фоном которого оно является.

На рисунке разные варианты расположения фона изображены в верхнем ряду.

Первый вариант самый простой и используется чаще других. Обычно в тех случаях, когда объект совпадает по размеру с картинкой.
Второй вариант используется при верстке «резиновых» сайтов. Хороший пример: http://ancorenergy.ru/
Третий вариант используется обычно для уменьшения количества графических файлов, что позволяет сократить время загрузки страниц: несколько картинок объединяются в один файл, но показывается только какая-то часть. Вот, например, файл с иконками Яндекса: http://img.yandex.net/i/www/iconx.png
Четвертый вариант, когда изображение по размеру больше объекта, обычно используется для размещения большой фоновой картинки у страницы. Пример: шапка сайта http://www.aerosouz.ru/ или http://vidizokna.ru/

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

Обычно повторение используется для покрытия объекта каким-то узором: полосками, точками, более сложными элементами. Например, на сайте http://www.aerosouz.ru/ внизу так сделаны полоски и трава.

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

Здесь я хочу остановиться и пояснить, почему дизайнерам важно знать и понимать принцип работы с изображениями на сайтах. Дизайнер — это не художник, это скорее архитектор. По его макету конструируется сайт, почти также, как по чертежам архитектора строится здание. Чем лучше архитектор знает возможности материалов и инструментов, тем точнее и правильнее он сможет составить чертеж. И наоборот: если он не разбирается в материалах, то будет ставить изначально невыполнимые задачи. Например, построить небоскреб из бумаги. Причем, когда ему будут объяснять, почему это невозможно, он не сможет понять. Он будет вынужден поверить на слово.
Кроме того, дизайнер должен уметь оценить трудоёмкость решения поставленной задачи. Ведь часто бывает так, что дизайнер не понимает, почему, например, в одном месте легко расположить текст, а в другом очень трудно и долго.

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

Продолжение следует...