Использование графики, цвета и текста
Тема 8: Использование графики, цвета и текста (1 час)
План
1. Добавление на Web-страницы цветных фоновых изображений
2. Добавление на Web-страницы графических фоновых изображений
3. Изменение цвета текста и гиперссылок
4. Добавление кнопок перемещения
1. Добавление на Web-страницы цветных фоновых изображений
Если вы хотите создать Web-страницу, производящую на зрителя неизгладимое впечатление, то вам не обойтись без цветных фоновых изображений.
Сначала сделаем фоновое изображение цветным. С помощью атрибута BGCOLOR дескриптора <BODY> можно определить цвет фона, указав шестнадцетичное число, состоящее из 6 цифр. Этот атрибут имеет следующий формат:
Рекомендуемые материалы
<BODY BGCOLOR=#rrggbb>
…
</BODY>
2. Добавление на Web-страницы графических фоновых изображений
В HTML для создания графического фона используется атрибут BACKGROUND дескриптора <BODY>, например:
<BODY BACKGROUND="fon.gif">
Для получения эффекта браузер "выкладывает" изображение мозаикой, заполняя пространство фона. Тонкие горизонтальные полоски "спускаются" вниз по странице, воздавая вертикальную цветную полосу.
В том, что касается фоновых графических изображений, существует интересный парадокс. После загрузки в Web-браузер фоновое изображение отображается немного быстрее, если его физический размер больше (например, 60х90 мм, а не 30х40 мм). Все дело в том, что Web-браузер должен "выложить" изображение мозаикой на заднем плане Web-страницы. И, конечно, чем больше размер изображения, тем меньше элементов мозаики понадобится.
3. Изменение цвета текста и гиперссылок
После изменения цвета фона документа или добавления фонового изображения вы должны изменить цвета переднего плана (т.е. текста), чтобы сделать текст читабельным.
Цвет основного текста можно изменить с помощью атрибута TEXT дескриптора <BODY>. При этом используется следующий формат:
<BODY TEXT="#rrggbb">
Изменить цвета гиперссылок можно с помощью следующих атрибутов: LINK, VLINK, ALINK. Эти атрибуты устанавливают цвета для непосещенных, посещенных и активных ссылок соответственно.
Для изменения цвета ссылок используется следующий формат:
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
По умолчанию для LINK выбирается голубой цвет, для VLINK – фиолетовый, а для ALINK- красный.
С помощью контейнера <FONT> и его атрибута COLOR можно изменить цвет любого символа или группы символов:
<FONT COLOR=red>Это текст красного цвета.</FONT>.
Дескриптор <FONT> можно использовать также для изменения шрифта, отображаемого браузером. Для этого используется атрибут FACE, за которым следует список имен шрифтов, с помощью которых браузер должен отображать приведенный далее текст:
<FONT FACE="Arial">Как выглядит этот текст?</FONT>
Обратите внимание на лекцию "5. Противопожарные двери и окна".
4. Добавление кнопок перемещения
О том, как создать изображения-ссылки мы говорили с вами на прошлом уроке. А теперь настало время поговорить о кнопках перемещения. Использование маленьких пиктограмм-ссылок – это единственный способ помочь пользователям перемещаться по вашей странице.
Предположим, вам нужны пиктограммы, представляющие собой ссылки на определенные страницы, и вы хотите, чтобы каждое изображение располагалось на отдельной строке. Типичный код этой процедуры приведен в следующем листинге:
<A HREF="архивы.html"><IMG SRC="imagesARCHIVES.gif" ALT="Архивы">Архивы</A><BR>
<A HREF="пользователи.html"><IMG SRC="imagesAUCTION.gif" ALT="Архивы">Пользователи</A><BR>
<A HREF="поиск.html"><IMG SRC="imagesBAZAAR.gif" ALT="Архивы">Поиск</A><BR>.
