×
Traktatov.net » HTML, XHTML и CSS на 100% » Читать онлайн
Страница 41 из 156 Настройки

Совет

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

В листинге 4.8 приведен пример кода, который задает изображение с предварительной загрузкой.

Листинг 4.8. Изображение с предварительной загрузкой

Встраивание изображения


На рис. 4.9 показан результат предварительной загрузки изображения, на следующем проходе браузер загрузит изображение нормального качества.

Рис. 4.9. Предварительное изображение


Альтернативный текст и предварительная загрузка изображения делают сайт удобнее.

Ссылки изображения

Используя картинки, можно повысить функциональность сайта, создавая изображения-ссылки.

Ссылки – главное в Интернете, и, естественно, существует возможность использовать в качестве ссылок изображения.

Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <А> и , при этом вокруг картинки появится рамка, которой можно управлять с помощью атрибута border. Синие рамки вокруг рисунков выглядят некрасиво, зато с ними сразу понятно, что можно щелкнуть кнопкой мыши на этой картинке и перейти на другую страницу.

В листинге 4.9 приведены примеры создания ссылок-изображений с различными размерами рамок.

Листинг 4.9. Создание изображений-ссылок

Встраивание изображения

Ссылка без задания атрибута border (рамка ставится по умолчанию)

Фотография карликового вислоухого кролика

Ссылка без рамки

Фотография карликового вислоухого кролика

Рамка в 10 пикселов

Фотография карликового вислоухого кролика


Результат обработки кода из листинга 4.9 можно увидеть на рис. 4.10.

Рис. 4.10. Изображения-ссылки


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

Галереи изображений

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

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

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