Картинки на страничке
В принципе размещение картинки на страничке - дело не столь уж и сложное. Делается это с помощю тэга <img>. Это тег насколько прост, настолько и уникален. Во-первых, он не имеет закрывающего тэга и, во-вторых, не может быть использован без атрибута src . Атрибуты тэга <img> следующие:
src - путь к файлу с рисунком (иллюстрацией, изображением);
height - высота рисунка ( в пикселях);
width - ширина рисунка ( в пикселях);
align - выравнивание (center - по центру, left - в левой части страницы, right - в правой).
Путь к файлу указывается следующим образом:
src=img.gif - если файл рисунка находится в том же каталоге, что и HTML файл, ссылающийся на него;
images/img.gif - если файл рисунка расположен в каталоге images, являющимся подкаталогом либо корневого каталога, либо каталога, где расположен HTML, ссылающийся на него;
../images/img.gif - префикс ../ означает переход в корневой каталог, а оттуда уже согласно указанному пути.
Хочется отметить, что такой способ указания пути является общим для всех видов файлов, в т.ч. и изображений. Принятое нами обозначение img.gif является условным. Под ним понимается файл рисунка. А images - условное наименование каталога с файлами изображений. Файлами изображений для WEB-страниц могут быть файлы форматов JPG, JPEG, GIF, PNG. Рассмотрению файлов графики будут посвящены следующие рассылки.
А пока вернемся к тэгу <body>
<body text=red background=img.gif
bgcolor=yellow link=yellow
alink=red vlink=black>
Вы, вероятно, заметили, что добавлен атрубут background, которому присвоено значение img.gif. Это означает, что фоном страницы будет не просто цвет, а выбранный рисунок.
Создадим HTML файл link.html со следующим кодом:
<html>
<head>
<title>Использование ссылок и изображений</title>
</head>
<body text=black background=img.jpg bgcolor=white
link=blue alink=red vlink=red>
<p>Написано белым по черному</p>
<a href=attrib.html>К описанию атрибутов</a>
<p>Вот рисунок, который высветится под этим
текстом посередине</p>
<img src=pict.jpg align=center>
</body>
</html>
В принципе все, что требовалось знать о рисунках, в плане их использования. Вам нужно найти два небольших.
К примеру:
и
Следующие несколько разделов будут посвящены созданию и обработке изображений для Web-страниц.
Создание и оптимизация изображений для Web-сайта
В прошлый раз мы с Вами рассмотрели вопрос о размещении изображений на Web-страничке. Ни один сайт не может обойтись без иллюстраций. И чем качественней они, тем сайт выглядит более презнтабельно. Однако при создании и размещении изображений на сайте следует помнить следущее:
Картинки должны быть четкими, ясными, но иметь размер не более 20-30 kB, иначе пользователь будет нервничать, ожидая загрузки картинки, какая бы хорошая она ни была.
Картинки должны быть иллюстрациями к тексту, а не просто бессвязно размещаться на страничке;
Не следует использовать слишком яркие, пестрые картинки, от которых могут уставать глаза. Лучше использовать более умеренные цветовые тона;
Следует помнить, что наш с Вами взгляд движется слева направо и сверху вниз, поэтому то на что Вы хотели бы обратить внимание, следует размещать в левом верхнем углу.
Какой формат GIF или JPG (JPEG) использовать? Здесь все относительно просто. Если изображение фотографического качества, то формат JPG наиболее подходящий в плане минимальных размеров файла при относительно неплохом качестве. При изображениях типа схем, значков, логотипов наиболее преемлем формат GIF. Кроме того формат GIF позволяет создавать "прозрачные" изображения, т.е. изображения без рамки, а также анимированные изображения. Все эти операции можно проделать с программой Adobe Photoshop. Преимущества этой программы в том, что она во-первых, не предъявляет столь высоких системных требований к компьютеру и при этом позволяет выполнять практически все действия с изображением. Опишу несколько приемов работы с этой программой, позволяющих делать файлы изображения для Web.
Задать размер изображения можно как
при создании нового файла, так и при
изменении готового. Во втором случае
из пункта горизонтального меню Image
(изображение), выбрать Image Size (Размер
изображения). Изображения для Web как
правило имеют разрешение 72 dpi (Dop per Inch -
точек на дюйм). В нашем случае там стоит
300 dpi (поле Resolution, для которого выбрано
pixels/inch).
Если изображение, которое Вы обрабатываете имеет большее разрешение, то в диалоговом окне, открывшемся после выбора указанного выше пункта меню, следует снять галочку напротив Resample Image, иначе будут потеряны пиксели, и установить разрешение 72 dpi. В случае изменения размеров изображение лучше установить режим соблюдения пропорций (Constrain Proportions) и внести в поле, которое по Вашему наиболее важное (высота или ширина), требуемую величину. Вторая величина будет рассчитана самой программой. Сканируете ли Вы изображение или видоизменяете какое-то готовое, пользуйтесь следующим правилом: правьте изображение с размерами в 2-3 раза превышающими тот, который Вы планируете разместить на страничке. После выполнения всех операций уменьшайте размер до требуемого с установленной галочкой в пункте Resample Image (Bicubic стоит по умолчанию, его менять не стоит).
Для сохранения изображения с учетом оптимального выбора размеров файла и качества, командой Save for Web (Сохранить для Web) из пункта горизонтального меню File (Файл) вызовите диалоговое окно Web-оптимизации. Выберите тип файла GIF или JPG. Программа сама Вам предложит варианты, где Вы сможете видеть как качество изображения, так и его размер.
В
случае выбора GIF, можно задавать количество
цветов. Изменяя параметры GIF, можно
контролировать сглаживание (dither) и
выбирать новые цвета, что позволяет
получать интересные эффекты с цветовыми
переходами. Можно выбрать какой-нибудь
из предустановленных вариантов GIF с
большим количеством цветов (к примеру
32), установить сглаживание и сократить
количество цветов до четырех.