Дом Гнома

В гости к Гному - www.ugnoma.NET...
Как это нет??? У Гнома всё есть!!!

Графика и цвет в Интернете, вставка изображений в HTML-документы

 

белая белая ночь....
чёрная чёрная боль...
серая серая пыль....
синяя синяя даль....
гр. "Чёрный Кофе"

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

Включение графики на страницу открывает безграничные возможности для дизайна. К сожалению, не все эти возможности следует использовать. Если вы вспомните самый ужасный узел, который вам приходилось видеть, то вполне вероятно, что его качество пострадало от неудачно подобранных изображений. Кто тот человек, который решил, что анимированный танцующий хомяк в верхней части узла — это отличная идея? Эффективное использование графики на узле требует тщательного планирования. Особое внимание уделите форматам файлов.
Использование цветов на узле может повлиять на него и негативно. Цвета в дизайне оказывают воздействие на физическое и эмоциональное состояние пользователя. Таким образом, создается общее впечатление о вашей работе. Хороший дизайн только положительно дополняет ту информацию, которую вы хотите донести. Кроме того, имеются физические факторы, определяющие выбор цвета. Например, зеленый текст на красном фоне (и это еще не самый худший случай) практически невидим для людей, страдающих дальтонизмом. Существуют целые книги, посвященные вопросу выбора цвета, я же вкратце расскажу про форматы графических картинок используемых в веб-дизайнерстве.

 

Форматы веб-графики

В настоящее время существует три основных графических веб-формата. В качестве части вашего дизайна веб-обозреватель может отображать форматы GIF, JPEG и PNG. Каждый из них служит для определенных целей, поэтому при правильном их использовании они помогут сохранить качество изображения и уменьшить время загрузки.

 

GIF-изображения

Формат графического обмена (Graphic Interchange Format), более известный как GIF, был одним из первых поддерживаемых в Интернет форматов. Особенным его делает тот факт, что он поддерживает только 256 цветов и чаще всего используется для изображений с большими областями одного цвета. Мультипликацию, текст, иллюстрации, черно-белые фотографии и графики лучше сохранять в формате GIF. Формат GIF существует еще в одном виде, который называется GIF89a. Этот формат отличается от оригинального тем, что поддерживает прозрачность и анимацию. Формат GIF89a предоставляет однобитовую прозрачность. Таким образом, можно выбрать цвет (но только один), который на изображении будет прозрачным. Однако эту функцию лучше использовать только в очень простых изображениях.

 

JPEG-изображения

Формат JPEG был специально разработан для фотоизображений, так как он поддерживает миллионы цветов. Аббревиатура JPEG расшифровывается как Joint Photographic Experts Group (Объединенная группа экспертов по обработке фотоизображений). Формат JPEG отличается от других тем, что в нем используется сжатие. Это означает следующее: когда изображение сохраняется в указанном формате, часть данных, из которых состоит файл, выбрасывается. В результате изображение уменьшается. Это достигается за счет ухудшения качества изображения. К счастью, при сохранении JPEG-файла можно указать уровень сжатия и тем самым обеспечить оптимальное соотношение размера и качества.

 

PNG-изображения

Несмотря на то что в течение нескольких лет формат PNG ( Portable Network Graphic — Переносимая сетевая графика) не использовался, он является относительно новым форматом. Изначально разработанный для замены GIF, формат PNG оказался достаточно универсальным. Он имеет ряд преимуществ перед форматами GIF и JPEG. Наиболее значимыми его особенностями являются улучшенное сжатие файла, многоуровневая прозрачность и двухмерная чересстрочная развертка. Более подробно об особенностях этого формата рассказывается на официальном узле PNG www.libpng.org.
Вы можете спросить, почему же не все используют формат PNG? Дело в том, что до 4-й версии популярных веб-обозревателей, формат PNG не поддерживался. Практически все ваятели просто ПРИВЫКЛИ работать с GIF и JPEG. И хотя многие дизайнеры постепенно переходят к PNG и привыкают к нему, PNG, думаю, пройдёт какое то время прежде чем этот формат займёт свое реальное место, и станет обычным форматом изображений в будущем.

 

Преобразование формата изображения HTML документа

Если картинка хранится в файле с расширением отличным от .gif или .jpg, то вам необходимо будет выполнить преобразование формата изображения в нужный. Для этого можно воспользоваться средствами одной из программ редактирования графики, например Irfan-View (здесь на сайте есть ссылка для скачивания русской версии этой программы). Как правило, в процессе конвертации файла в формат .gif или .jpg его размер уменьшается, что способствует увеличению скорости загрузки картинки.

 

Задание размеров изображения HTML документа

Задание размеров графического изображения явно (с помощью атрибутов WIDTH, HEIGHT) позволяет браузеру загружать картинку с большей скоростью, т.к. он не тратит время на дополнительные вычисления.

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

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

Увеличение размеров изображения в HTML документе

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

Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.
 

Уменьшение изображения HTML документа

Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.
Но вернёмся к нашим баранам.

 

    Для вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место HTML страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий HTML код:

<.img src="/html/logo.jpg">

    Если графика и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если HTML страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для ее вставки нужно написать так:

<.img src="/html/images/logo.jpg">

    Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее:

width — ширина изображения в пикселах или процентах;

height — высота изображения в пикселах или процентах.

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

    Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

<.img src="/html/logo.jpg" width="50" height="20">

или

<.img src="/html/logo.jpg" width="10%" height="5%">

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

<.img src="/html/logo.jpg" alt="Логотип сайта www.ugnoma.com">

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

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

left — графика располагается у левого края страницы, а текст и другие элементы обтекают изображение справа;

right — графика располагается у правого края страницы, а текст и другие элементы обтекают изображение слева.

    Например, HTML код

<.img src="/html/logo.jpg" align="left"> Это мой аватар на форумах и в различных сервисах.

браузер покажет так:

Это мой аватар на форумах и сервисах

   

 А этот HTML код   <.img src="/html/logo.jpg" align="right">Это мой аватар на форумах и сервисах -  будет выглядеть вот так:

 

 

 

Это мой аватар на форумах и сервисах

  Для прекращения обтекания текстом изображения можно использовать тег BR знакомый нам из раздела о форматировании текста. У тега BR есть атрибут clear, который может принимать три значения:

left — прекращение обтекание текстом изображений, выровненных по левому краю

right — прекращение обтекание текстом изображений, выровненных по правому краю;

all — прекращение обтекание текстом изображений, выровненных и по левому, и по правому краю.

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

vspace — создает верхнее и нижнее поля;

hspace — создает боковые поля (слева и справа).

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

<.img src="/html/logo.jpg" align="left" vspace="5" hspace="20">Это мой аватар на форумах и сервисах

то получим следующее:

     Это мой аватар на форумах и сервисах

   

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

<.img src="/html/logo.jpg" border="10">

в браузере выглядит так

 

Помимо этого, есть ещё два атрибута тега IMG, наверняка они вам сразу не понадобятся, а может и вообще никогда к ним не прибегнете, но для более полной картины я их опишу:

ismap - признак карты-ссылок (обработка сервером);
usemap - признак карты-ссылок (обработка клиентом),

эти атрибуты используются при добавлении на сайт так называемой карты ссылок (наверняка вы сталкивались, когда в опциях на сайте, например майлру, выбираешь определённую страну или город, и в зависимости от выбора изменяются параметры предоставления информации - метеопрогноз, валюта. язык и пр).

 

Списки с графическими маркерами HTML страницы

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

Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера.

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

Пример:

HTML код:

 


    Часть 1


    Часть 2


    Часть 3

    Отображение в браузере:



      Часть 1
      Часть 2
      Часть 3

     

    Использование изображений в качестве - карты ссылок

    Как я уже говорил ранее возможно использование графических изображений-якорей для ссылок в HTML документах. Для этого необходимо поместить тег <.IMG scr="файл изображения"> в контейнер гиперссылки...<./A>.

    Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" (imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером.

    Карты ссылок обрабатываемые сервером

    Не будем подробно рассматривать карты ссылок обрабатываемых сервером (я вам тут не там, в учебники по CGI-программированию не нанимался)))), но основные элементы этой технологии рассмотрим.

    1. Создаем изображение - карту ссылок (например, сканируем политическую карту мира).

    2. Создаем файл определения карты ссылок. Данный файл (расширение MAP) содержит описание связи непересекающихся областей изображения с ссылками на ресурсы Интернет. Map-файлы бывают двух форматов CERN и NCSA, а их поддержка определяется используемым веб-сервером.

    Файлы формата CERN представляют собой набор записей вида:

    ТипОбласти (x1, y1) ... URL
    ...
    ТипОбласти (x1, y1) ... URL

    Файлы формата NCSA представляют собой набор записей вида:

    ТипОбласти URL x1, y1, ...
    ...
    ТипОбласти URL x1, y1, ...

    Типы областей задаются относительно размера изображения (а не относительно окна браузера), используемого в качестве карты ссылок, и бывают следующих типов:

    Default Область, связанная с которой ссылка, активизируется при выборе пользователем области изображения без описания. Не требует задания координат.
    Rect Прямоугольная область изображения. Задается двумя парами координат (левый-нижний, правый-верхний).
    Poly Многоугольник (до 100 вершин). Координаты первой и последней вершины должны совпадать.
    Point Точка на изображении. Задается координатами точки.
    Circle Круг на изображении. Задается координатами центра круга и значения (NCSA-точка на окружности/CERN-радиус)

    3. Создаем CGI-сценарий (Common Gateway Interface). Это программа которая храниться на веб-сервере и служит для преобразования координат щелчка мыши, переданного броузером, в URL ресурса, в соответствии с файлом определения карты ссылок. (данный этап, как правило можно пропустить, т.к. у всех провайдеров есть стандартный обработчик карт-ссылок, надо только узнать, где он лежит и какой MAP формат понимает).

    4. В HTML документе указываем ссылку на map-файл определения, а в качестве элемента-якоря задаем файл изображения карты ссылок. Например:

    <.A HREF="httр://www.mysite.ru/cgi-bin/mapdef.map"><./A>

     

    Карты ссылок обрабатываемые клиентом

     

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

     



    ...


     

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

     

    <.MAP NAME=map1> <.AREA SHARE=RECT COORDS="0,0, 50,100" NOHREF> <.AREA SHARE=RECT COORDS="51,0, 100,100" HREF="page1.htm"> <./MAP> <.IMG SRC="map.gif" USEMAP=#map1>

     

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

    1. старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности загрузить изображение или загрузки в браузер с отключенной графикой не нарушается структура документа (вместо графики будет прямоугольник заданного размера с текстовым описанием);

    2. при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BORDER=0), дабы не портить внешний вид документа;

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

     

     

    Поделиться ссылкой на страницу:
    В начало страницы
    
    Дружно все тыкаем сюда!