web-nlaneta - Уроки HTML'а. Урок # 9.

Как оживить веб-страницу с помощью графики

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

"За" и "против" применения графики на веб-страницах

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

Рисунки и графика жизнено важны для WWW. Это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст. Представьте себе, что вы берете любимую газету, а там нет иллюстраций. Она будет выглядеть скучно, независимо от того, как отформатирован текст. Веб-страница без графики подобна рекламному проспекту без рисунков - в нем просто нет смысла.

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

Конечно, будет немного сложно показывать вам примеры в рассылке, так как большинство людей просматривает e-mail сообщения в режиме OffLine (отключен от сети). Поэтому вам будет полезно посещать архив рассылки расположенный на сайте Design Laboratory. Читателям рассылки в текстовом режиме вообще с этой темой не повезло...

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

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

Где вы сможете найти графику, изображения и рисунки

Теперь, когда вы убедились, что вам следует ввести в веб-страницу несколько графических объектов, задается вопрос: где их взять? Сайт Design Laboratory расчитан для веб-строителей. На нем есть раздел Графика где вы сможете найти большую коллекцию различной графики.
как буд-то бы рисунок

Вы также можете взаимствовать графику с чужих веб-страниц. Для этого необходимо подвести курсор мыши на изображение, вызвать всплывающее меню (правой кнопкой) и найти Save Image As... [Сохранить рисунок как...]. Потренеруйтесь с этим загадочным квадратом справа. Правда сохранять-то нечего, поэтому вы просто увидите надпись Save as....

Создаем свое изображение

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

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

Выбирайте сканер с разрешением не меньше 300х300 точек на дюйм. Это означает, что при сканировании каждого квадратного дюйма сканер различает 90'000 точек. Кажется, что это много, но обычный факс имеет разрешение 200х200 ppi (pixels per inch - точек на дюйм) - и вы знаете, какими расплывчатыми иногда бывают сообщения. Часто сканеры поставляются с программным обеспечением, которое существенным образом повышает разрешение.

Сканеры с высоким разрешением обычно стоят довольно дорого. Они вряд ли необходимы, если вы просто сканируете изображения для веб-страницы. Для непрофессионального использования обычно достаточно разрешения 300х300 или 600х600 ppi.

Сейчас часто можно видеть объявления в магазинах, где продают компютерную технику подобно: "Сканируем". Многие делают на этом большие деньги, расчитывая на неопытных пользователей. В среднем, один проход сканера стоит не более 5 рр. Лучше не поддаваться на "качественное сканирование" за которое шустрые продавци берут по 10-15 рублей.

Как поместить изображение на страницу

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

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

Использование файлов нужных типов

Изображения можно созранять в нескольких форматах. У каждого их них есть свои преимущества и недостатки. Не секрет, что во всемирной паутине преобладают 2 распространенных формата - GIF и JPeG. Тип файлов GIF (Graphical Interchange Format - Графический Формат Обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых WWW.

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

Как поместить изображение на страницу

Имеется страница, на которой имеется пока только текст. Например эта:

-= Моя коллекция бабочек =-

Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.

Стоит нам добавить одну строчку и страничка превращается в следующее:

-= Моя коллекция бабочек =-

Посмотрите, что мы добавили:

<center>
<h3>-= Моя коллекция бабочек =-</h3>
<img src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"><br><br>
</center>
Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br>

Изображения помещаются на странице крайне просто. Вам нужно только знать, как применять тег <img>. IMG - сокращение от "image" ("изображение"). Надо ввести тег <img> и ключевое слово SRC="..." для указания, какую картинку закрузить. И все! Изображения можно помещать в любом месте веб-страницы, в заголовки, таблицы, списки или в текст, только проверьте, чтобы тег <img> оказался между тегами <body> и </body>. В данной странице о бабочках я собираюсь ввести изображение бабочки, вверху страницы, как раз под заголовком <h1></h1>.

Мы вставляли здесь картинку бабочки в формате GIF, под названием dc72.gif, которая находится в папке http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/.

Тег <img> сообщает браузеру, что необходимо вывести на экран изображение с именем исходного файла dc72.gif. Вводя этот тег, вы подразумеваете, что файл dc72.gif находится в папке http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/. Если эта картинка находится в той же папке, что и HTML-файл в котором вы собираетесь вставить тег <img>, то название папки можно не вводить, тогда код будет выглядеть следующим образом: <img src="dc72.gif">.

Основываясь на информации, приведенной, легко определить, когда вы указали неверное расположение графического файла: браузер вместо изображения, которое вы ожидали увидеть, выводит вместо картинки пиктограму ошибки такого вида:

Эта пиктограмма показывается браузером в случаях, если:

Имя файла, содержащего изображение, задано неверно и не указывает ну существующий файл (возможно, вы по ошибке набрали не dc72.gif, а dcc72.gif).
Неверно указан путь к файлу. Попробуйте скопировать файл с изображением в ту же директорию, где находится ваш HTML-файл.
Бывает, что некоторые сервера, на которых вы решите хранить свою страницу (например narod.ru) базированы на UNIX'е. Ничего страшного если не понятно. Суть в том, что важно как вы напишите имя файла. Например если вы напишите <img src="DC72.GIF>, картинка не покажется из-за регистра. Попробуйте ввести <img src="dc72.gif"> и ошибка будет устранена.
Файл изображения находится там, где вы указали, но у него неверно обозначены права доступа. Поскольку веб-страница предназначена для загрузки и Интернет, часть ваших файлов изменяется так, чтобы никто не смог просмотреть их. В этом случае, если вы уверены, что верно указали путь, свяжитесь со своим провайдером и спросите его, как правильно установить права доступа.

Оптимальные размеры изображений

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

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

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

Максимальный размер файла. Лично я стараюсь ограничить любые изображения на своих сайтах. Придерживаюсь нормы 15-20 килобайт. Такие изображения достаточно подробны, но посетители не начинают грызть ногти в ожидании, пока они загрузятся. Ограничение в 15-20 килобайт очень приблизительно. Чуть позже я расскажу о пиктограммах, и вы убедитесь, что большинство из них очень малы (0.5-5 килобайт) и быстро загружаются. Если вы встретили потрясающее изображение, занимающее больше 20 килобайт, скокойно используйте его. Просто помните, что если вы вставите слишком много таких изображений, время ожидания посетителей существенно возрастет.

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

Существует ряд профессиональных пакетов, таких как Adobe Photoshop, позволяющих изменять размеры изображений. О том как пользоваться Photoshop'ом я расскажу в другом разделе рассылки. Паралельные уроки Photoshop'у я начинаю со следующего выпуска... решено! Вообще Photosop - самое универсальное средство для всех. Если интересно знать подробней, читайте следующую главу рассылки.

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

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

Миниатюры очень популярны, поскольку дают посетителям возможность выбирать только те изображения, которые они хотят увидеть. Я покажу вам сейчас как можно использовать миниатюры:

миниатюра

полное изображение

Алтернативный текст

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

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

В описаных выше случаях полезно использовать ключевое словов ALT тега <img>. ALT выводит заданный текст в той части экрана, где должно быть (или будет) изображение.

Задание альтернативного текста, описывающего изображения домашней страницы, считается правилом вежливости. Альтернативный текст является частью тега <img>. Просто добавьте к тегу ключевое слово ALT="..." и наберите текст в кавычках после знака "равно". Данный тег с альтернативным текстом, к примеру с dc72.gif, выглядет так:

-= Моя коллекция бабочек =-

Посмотрите, что мы добавили:

<center>
<h3>-= Моя коллекция бабочек =-</h3>
<img alt="Бабочка" src="http://cray.vision.krg.kz/~Sam/dlab/grcol/anim/dc72.gif"><br><br>
</center>
Я коллекционирую бабочки. У меня очень большая коллекция, примерно 1300 различных бабочек. Я стараюсь не повторяться и около 1000 бабочек у меня различных видов и окраски.<br>

Есть еще один плюс у альтернативного текста. Подведя курсор мыши к картинке где есть ключевое слово ALT="...", вы увидите всплывающее окошко с самим альтернативным текстом. Попробуйте подвести к бабочке чуть выше.

Мы начали разговор о веб-графике. Этот урок был вводным, поэтому важных материалов по обучению почти не содержал.

Веб-планета

Уроки HTML'а. Урок # 9.

-= Моя коллекция бабочек =-

-= Моя коллекция бабочек =-

-= Моя коллекция бабочек =-