1896

Рис. 45. Вид Web-страницы в окне браузера

Задание альтернативного текста

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

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

Ниже рассмотрим пример: если установить курсор на изображении, то появится альтернативный текст (рис. 46).

…

<IMG SRC="computer.gif" ALT="Компьютер" ALIGN="RIGHT">

…

Рис. 46. Вид Web-страницы в окне браузера

1.5.4. Расположение текста рядом с графикой

Одной графики может оказаться недостаточно для полной передачи ее смысла. Поэтому вместе с графикой используют текст. Есть несколько способов выравнивания изображений на домашней странице по отношению к тексту. Ключевое слово ALIGN является частью тега <IMG>. С его помощью можно задавать место изображения на экране и вид обрамления его текстом. Перечислим восемь опций ALIGN (табл. 15).

Таблица 15. Опции ALIGN

Приведем примеры по выравниванию текста с графикой: 1. Текст выровнен по верхнему краю изображения (рис. 47):

…

<IMG SRC="computer.gif" ALT="Компьютер" ALIGN="TOP"> <B>Устройство персонального компьютера</B>

…

Рис. 47. Вид Web-страницы в окне браузера

2.Ширина изображения 259 пикселей, а высота – 211 пикселей (рис. 52):

…

<IMG SRC="computer.gif" ALT="Компьютер" WIDTH="259" HEIGHT="211”>

…

Рис. 52. Вид Web-страницы в окне браузера

1.5.5. Пиктограммы

Кроме цветных изображений и рисунков, на домашней странице могут присутствовать пиктограммы всех видов. С технической точки зрения пиктограммы попадают в категорию «изображений» (они обычно хранятся в файлах формата GIF и JPEG), но обычно очень малы (2 – 6 Кбайт) и применяются на домашних страницах из соображений дизайна, эстетики, а также для «перелистывания» страниц.

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

Пиктограммы перемещения

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

WWW-узле, скорее всего, увидите на каждой странице три пиктограммы: стрелка «вправо», стрелка «влево» и пиктограмма «начало».

Стрелка «влево» вернет вас на предыдущую страницу, стрелка «вправо» – на следующую, а пиктограмма «начало» – в самое начало книги. Пиктограммы перемещения полезны только в том случае, когда необходимо связать ссылками в одно целое несколько Web-страниц, поскольку они дают возможность графически «листать» страницы.

Приведем пример:

Рис. 53. Пиктограммы перемещения

Пиктограммы реконструкции

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

Приведем пример:

Рис. 54. Пиктограммы реконструкции

Пиктограммы новинок

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

Приведем пример:

Рис. 55. Пиктограммы новинок

Линии, полосы и маркеры

Очень часто вместо тега <HR> используют линейную графику (простую графику в виде линий и полос). Элементы линейной графики бывают различных форм, цветов и рисунков и существенно отличаются от результата работы тега <HR>.

Маркеры обычно применяются для замены точек, которые отмечают пункты маркированного списка.

Приведем пример:

Рис. 56. Графические линии и маркеры

1.5.6. Фоновые изображения

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

Рассмотрим несколько примеров. Первый пример:

Текст программы в блокноте будет выглядеть следующим образом:

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Background</TITLE></HEAD>

<BODY BACKGROUND="fon.jpg" TEXT="#FFFFFF"> <H2><B><P ALIGN="CENTER">

Добро пожаловать на нашу страничку

</B></H2>

</BODY></HTML>

На рис. 57 показано, как будет выглядеть файл в окне браузера.

Рис. 57. Вид Web-страницы в окне браузера

Второй пример:

Текст программы в блокноте будет выглядеть следующим образом:

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Background</TITLE></HEAD>

<BODY BACKGROUND="fon1.jpg" TEXT="#000000"> <H2><B><P ALIGN="CENTER">

Добро пожаловать на нашу страничку

</B></H2>

</BODY></HTML>

На рис. 58 показано, как будет выглядеть файл в окне браузера.

Рис. 58. Вид Web-страницы в окне браузера

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

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

На рис. 59 показан неудачный выбор фона для Web-страниц:

Рис. 59. Неудачный выбор фона Web-страницы

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

1.Можно использовать файлы с изображениями с компакт-дисков (например, у знакомых).

2.Воспользоваться другими страницами, то есть скопировать с чужих страниц. Это делается следующим образом (С помощью Internet Explorer):

–Откройте любую страницу на WWW и поместите указатель мыши на изображение.

–Щелкните правой кнопкой мыши на изображении. Появится меню.

–Выберите команду СОХРАНИТЬ РИСУНОК КАК... Появится диалоговое окно СОХРАНИТЬ КАК...

–Определите, где на диске хотите сохранить изображение, и выберите команду СОХРАНИТЬ.

3.Создайте собственное изображение, используя графические редакторы.

Контрольные вопросы

1.Чем отличаются форматы GIF и JPEG? Перечислите и дайте характеристику тегам выравнивания изображения.

2.Каким образом можно задать рамку изображения?

3.Каким образом используется альтернативный текст?

4.Каким образом задается ширина и высота изображения?

5.Каким образом задаются отступы от изображения?

6.Как расположить текст рядом с изображением?

7.Что такое пиктограммы, их назначение и виды?

8.Как создаются фоновые изображения на Web-странице?

9.Где можно найти необходимые изображения?

Практические задания

1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 60):

Рис. 60. Вид Web-страницы в окне браузера

2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 61):

Рис. 61. Вид Web-страницы в окне браузера

3.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 62):