Уроки WEB дизайна




 Размещение изображений на сайте


Что ж, ликуйте: вот вам элемент IMG. Элемент этот состоит только из открывающего тега. Главный его атрибут - src - задаёт имя файла изображения. Поскольку картинка - это не текст, сам по себе текстовый html-файл не может содержать в себе картинку. Он может только ссылаться на неё, т.е. иметь некоторую метку, говорящую браузеру, что "вот в этом месте должна быть вон та картинка".
Из этого следует, во-первых, что картинки лежат отдельно от html-файлов, а во-вторых…
…что атрибут src принимает значения, аналогичные значениям href атрибута A. Т.е. мы фактически ставим ссылку на изображение, а элемент IMG заставляет браузер самостоятельно "сходить" по этой ссылке, получить картинку и отобразить её в указанном месте нашего документа.
Соответственно, всё, что было сказано относительно гиперссылок, справедливо и для изображений: адрес картинки может быть относительный или абсолютный.
Как вы знаете, изображения могут быть в формате gif или jpg. Сейчас многие браузеры поддерживают также формат png, обладающий рядом замечательных свойств. Многие, но не все. Поэтому универсальными форматами веб-графики по-прежнему остаются gif и jpg.
Атрибут alt позволяет задать описание изображения. Значение этого атрибута больше, чем кажется. Изображение само по себе - это некий чуждый гипертексту элемент, менее универсальный: в отличие от текста, воспринять изображение можно только визуально. Соответственно, для невизуальных браузеров, а также различных автоматических систем, поисковых, например, содержание изображений остается тайной за семью печатями.
Мало того, в визуальных браузерах также есть возможность отключить показ графических элементов (с целью экономии времени или трафика - объема скачиваемой информации). Тогда на месте изображений появляются прямоугольники с alt-текстом.
Это позволяет нам продолжать пользоваться сайтом даже с отключенной графикой. Итак, атрибут alt позволяет создать "текстовую" версию изображения. Если на картинке изображен текст, то сам бог велел этот текст продублировать в атрибуте alt. Если что-то содержательное, то дать краткое описание этого содержания.
А вот если картинка выполняет чисто декоративную функцию, то alt-текст следует оставить пустым, не забивать страницу лишней информацией. Вряд ли слушателю звукового браузера будет интересно узнать, что между заголовком и картинкой располагается какая-то линеечка.
У изображений имеются атрибуты width и height, задающие ширину и высоту изображения. Это может показаться странным, но значения этих атрибутов могут не совпадать с шириной и высотой самого изображения. И браузер худо-бедно растянет изображение под заданный формат (менее качественно, конечно, чем графический редактор, но растянет).
Однако атрибуты эти созданы в основном не для деформации изображений (хотя иногда такая деформация очень даже бывает нужна), а для того, чтобы браузер мог зарезервировать на странице место нужного размера и загружать следующий текст, не дожидаясь загрузки картинки. Дело в том, что пока картинка не начала загружаться, браузер не знает её размера.
Это приводит к тому, что если эти атрибуты не заданы, то уже загруженный текст страницы "переверстывается" на ходу по мере загрузки картинок. Выглядит это, прямо скажем, не ахти. А в некоторых старых браузерах даже останавливалась дальнейшая загрузка текста, пока не с сервера не "приходило" изображение. В свете сказанного рекомендуется всегда явно указывать размеры всех изображений на странице.
Что касается умышленной деформации, то она позволяет делать некоторые фокусы. Например, в своё время дизайнер по имени Дэвид Сигель придумал т.н. "графическую распорку". Это изображение в формате gif размером 1x1 пиксель, прозрачное. На странице такое изображение не видно.
Теперь, вставляя в нужном месте документа это изображение и задавая ему нужный размер с помощью атрибутов width и height, мы можем точно управлять пустыми пространствами на нашей странице. Например, ячейка таблицы, в которую заключена такая "распорка" уже не сожмётся меньше размера этой распорки.
С точки зрения содержания это, конечно, полный нонсенс, но до появления таблиц стилей распорки были вообще одним из основных механизмов управления размещением информации на странице: отступы, межстрочные интервалы и т.д., всё это имитировалось с помощью распорок.
Другой фокус: если нам нужно изобразить нечто вытянутое в одном из двух измерений, например, какую-нибудь тень, нам достаточно взять "сечение" этого предмета шириной 1 пиксель и вытянуть его с помощью атрибута width настолько, насколько нам нужно. При этом, как вы понимаете, мы существенно экономим на объеме графических файлов.
Другие атрибуты изображения: hspace и vspace задают поле вокруг изображения. Соседняя с картинкой информация (текст или другие картинки) может прилегать к ней вплотную, а может отстоять на некоторое расстояние. Hspace задаёт это расстояние по горизонтали, а vspace - по вертикали.
Особенно это актуально как раз при обтекании картинки текстом, поскольку текст, обтекающий картинку вплотную в большинстве случаев смотрится неудовлетворительно.
Теперь о самом этом обтекании. Задается оно атрибутом align. Вообще элемент IMG является текстовым и не начинает новой строки. Следующие за ним тексты или изображения по умолчанию примыкают к нему справа, но выравниваются по нижнему краю. Иногда такой вариант не подходит. С помощью атрибута align мы можем задать следующие варианты: bottom (это то, что мы имеем по умолчанию: текст выравнивается с изображением по нижнему краю), top…
…(текст выравнивается по верху картинки), middle (текст выравнивается по центру картинки). Пока об обтекании картинки текстом речи не идёт: вторая строка текста окажется под картинкой. Если же нам нужно встроить картинку в текст, то атрибут должен принять одно из значений left (картинка слева, текст обтекает её справа) или right (картинка выравнивается по правому краю, текст обтекает её слева).
Обтекать картинку может не только текст, но и, например, другие изображения меньшего размера. Таким образом можно элегантно создавать конструкции, для которых, на первый взгляд, необходима таблица. Здесь же мы добиваемся того же эффекта без таблиц.
Здесь нам невредно будет вспомнить элемент BR с его атрибутом clear. Как вы помните, если мы поставим перенос строки в текст, обтекающий изображение (или даже два переноса), то перенос осуществится, но обтекание продолжится и с новой строки.
С помощью атрибута clear мы можем прекратить обтекание и перенести новую строку под изображение, причем сделать это на выбор: только в случае, если текст обтекает картинку справа (clear=left), слева (clear=right) или в любом случае (clear=all). Относится это не только к тексту, но и к "обтекающим" изображениям.

Карта сайта Реклама
На нашем сайте Вы сможете найти любую информацию о программах 3D Max, Macromedia Flash MX, Corel Draw 12, Adobe Illustrator и многих других. Вы не найдете на данном сайте различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи и кейгены для этих программ. Для приобретения или скачивания программ воспользуйтесь ссылками на официальных сайтах производителей.
успеха нашей Веб Лаборатории