Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет приборостроения и информатики

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Комолова.doc

Скачиваний:

Добавлен:

27.08.2019

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 56 / 216 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 > Следующая >>>

155 Пикселов (листинг 3 2) Хотя листинги 3 1 и 3 2 практически совпадают,

изображения имеют разные размеры в пикселах и поэтому занимают разную

площадь

Листинг 3 2 Пример создания веб-страницы с изображением ромашки

<html>

<head>

<title>РИСУНОК</title>

</head>

</body>

</html>

По умолчанию рисунок разместился в левом верхнем углу

На рис 3 3 показан еще один пример размещения на веб-странице изображения,

но на этот раз в коде заданы значения атрибутов ширины и высоты (ширина 281,

высота 300 пикселов), а также указана подпись (листинг 3 3)

Рис 3 3 Веб-страница с изображением и подписью66 Урок 3. Графика

Листинг 3 3 Размещение на веб-странице изображения и подписи

<html>

<head>

<title>Рисунок Атланты на Фонтанке</title>

</head>

<img width ="300" heigth="281"

src="Атланты на Фонтанке.jpg">

Россия * Санкт-Петербург*Еще одни атланты на Фонтанке

Угол Невского проспекта и Набережной реки Фонтанки

</center>

</body></html>

На рис 3 4 показан пример размещения четырех изображений шириной 92 и вы-

сотой 114 пикселов каждое в таблице (листинг 3 4) Подробно принципы работы

с таблицами будут рассмотрены далее

Рис 3 4 Четыре рисунка в таблице Выравнивание изображений 67

Листинг 3 4 Пример создания четырех рисунков в таблице

<html><head><title>ЧЕТЫРЕ РИСУНКА В ТАБЛИЦЕ</title></head>

<tr>

<td>

<td>

</td>

</td></tr>

</body></html>

Выравнивание изображений

С помощью атрибута ALIGN можно задать способ выравнивания изображения

на веб-странице На рис 3 5 первый рисунок выровнен вправо, второй — влево

(листинг 3 5)

Рис 3 5 Пример выравнивания изображений на веб-странице68 Урок 3. Графика

Листинг 3 5 Пример выравнивания изображений на веб-странице

<html>

<head>

<title>ОБТЕКАНИЕ ГРАФИКИ ТЕКСТОМ</title>

</head>

<body>

<h1>Обтекание текстом объектов</h1>

Activemovie stream - это дополнительный пакет для работы с internet

explorer. C помощью этой программы можно проигрывать файлы в формате asf в таких

не слишком быстрых сетях, как интернет.

за счет инкапсуляции в active movie stream можно эффективно синхронизировать

и хранить на различных серверах файлы в популярных форматах мультимедиа,

таких как mpeg, avi, wav и apple Quick Time

необходимо ввести в веб-страницу звук, видео и интерактивность. OLE - объектно-

ориентированная технология создания программных объектов

<tr>

<td>Возможно </td>

</tr>

<tr>

<td>обтекание текста </td>

</tr>

<tr>

<td>вокруг таблицы </td>

</tr>

Необходимо ввести в веб-страницу звук, видео и интерактивность. OLE - объектно-

ориентированная технология создания программных объектов

</body></html>

Карты изображений

Карты изображений (image maps) позволяют пользователю связывать ссылки на

другие документы с отдельными частями изображений Щелкая мышью на ча-

стях изображения, так называемых активных областях (hot spots), пользователь

может выполнять те или иные действия, переходить к другим документам и т п

Если пользователь позиционирует указатель мыши на изображении, которое с по-

мощью атрибута ISMAP в теге <IMG> определено как карта изображения, и щелкает

левой кнопкой мыши, то координаты точки щелчка передаются на веб-сервер При

получении этих координат сервер ищет на карте активную область, содержащую

эти координаты Если такая область существует, то заданный URL-адрес акти-

вируется, и браузер пользователя переходит по этому адресу на новую страницу

Описанный вариант функционирования характерен для случая, когда карта изо-

бражения размещается на сервере, однако она также может размещаться на кли-

ентском компьютере В этом случае браузер самостоятельно выясняет URL-адрес

нужной страницы и передает серверу не координаты точки щелчка, а этот адрес

Второй случай предпочтительнее, так как на сервере не приходится запускать про-

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

активной области По соображениям безопасности многие системные админи- Карты изображений 69

страторы не разрешают посторонним работать на сервере и записывать сценарии

в каталоги

К сожалению, с картами изображений, функционирующими на клиентской

машине, могут работать не все браузеры.

Тег <MAP>

Тег <MAP> применяется для представления графического изображения в виде карты

с активными областями Активные области можно идентифицировать по всплы-

вающей подсказке, которая появляется при наведении на такую область указателя

мыши Данный тег появился в версии HTML 3 2

Контейнер, состоящий из тегов <MAP> и </MAP>, является блоком описателей ак-

тивных областей

Тег <MAP> может быть связан с тегом <IMG> или тегом <INPUT> с помощью атрибу-

та USEMAP

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

USEMAP в тег IMG:

Атрибут USEMAP указывает, в каком месте находится карта изображения Карта изо-

бражения определяет, какому участку изображения какой URL-адрес соответствует

Карта изображения может находиться в том же документе, что и изображение, или

в другом документе Размещение карты в другом документе позволяет объединить

вместе изображения из разных документов, но добавляет еще одну итерацию в меха-

низм функционирования карты, поскольку за первую итерацию выясняется место-

нахождение карты, а за вторую выполнение действия, предписанного URL-адресом

данного участка изображения Параметр map_name указывает имя карты для изо-

бражения, а предшествующий ему URL-адрес — местонахождение карты Если па-

раметр URL отсутствует, карта с указанным именем ищется в текущем документе

Пример синтаксиса определения карты изображения:

<map name="map_name"> <area [shape=" shape "] coords="x,y,..." [href=" reference "]

[nohref]></map>.

Атрибут NAME задает имя карты, например: NAME="КАРТА" — имя карты

Тег <AREA>

Тег <AREA> определяет активную область в составе карты изображений на сторо-

не клиента (это описатель активной области) Тег <AREA> не имеет закрывающего

тега Синтаксис:

Для каждой активной области карты имеется свой тег <AREA>

Атрибут SHAPE Атрибут SHAPE задает форму активной области на карте и ее

координаты, он может принимать значения:

rect — прямоугольная область;70 Урок 3. Графика

ci rcle — область в форме круга;

poly — область в форме многоугольника;

default — вся область

Атрибуты, определяющие форму области на карте, являются обязательными

Атрибут COORDS Атрибут COORDS определяет позицию области на экране

Синтаксис:

coords="координаты"

Набор координат соответствует форме области Координаты задаются в еди-

ницах длины и разделяются запятыми:

для круга необходимо задать координаты центра и радиус в пикселах (ко-

ординаты центра отсчитываются от левого края и верхнего края рисунка);

для прямоугольной области задаются координаты всех четырех углов;

для многоугольной области задаются координаты каждого из углов много-

угольника, который точно или приблизительно соответствует форме области

Атрибут HREF Атрибут HREF задает URL-адрес для ссылки Синтаксис:

Атрибут ALT Атрибут ALT задает альтернативный текст для браузеров, кото-

рые не поддерживают тег <AREA> Синтаксис:

Атрибут TITLE Атрибут TITLE задает текст подсказки, всплывающей при на-

ведении указателя мыши на активную область Синтаксис:

Атрибут TARGET Атрибут TARGET идентифицирует фрейм, в котором должен

быть открыт целевой ресурс Синтаксис:

target="имя|_blank|_self|_parent|_top"

Параметры:

им я — документ открывается во фрейме с именем, задаваемым с помощью атри-

бута NAME дескриптора <FRAME> (имя фрейма должно начинаться с буквы);

_blank — документ открывается в новом неименованном окне;

_self — документ открывается в том же окне, в котором содержится текущий

документ;

_parent — документ открывается во фрейме, родительском по отношению

к фрейму, содержащему текущий документ (если родительского фрейма не

существует, документ открывается в текущем фрейме);

_top — документ открывается в текущем окне и занимает все окно

Атрибут NOHREF Атрибут NOHREF указывает на то, что с областью не связана

ссылка

Атрибут TABINDEX Атрибут TABINDEX определяет порядок, в котором актив-

ные области получают фокус после нажатия клавиши Tab Синтаксис: Карты изображений 71

tabindex="число"

Атрибут ACCESSKEY Атрибут ACCESSKEY определяет комбинацию клавиш,

используемую для доступа к активной области (перехода по URL) Синтаксис:

accesskey="символ"

Атрибут ONFOCUS Атрибут ONFOCUS определяет обработчик события, возни-

кающего при получении активной областью фокуса ввода (фокус ввода может

быть получен как с помощью мыши, так и в результате перебора после нажатия

клавиши Tab) Синтаксис:

onfocus="сценарий"

Атрибут ONBLUR Атрибут ONBLUR определяет обработчик события, воз-

никающего при потере активной областью фокуса ввода (фокус ввода может

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

и в результате перебора после нажатия клавиши Tab) Синтаксис:

onblur="сценарий"

Атрибут USEMAP Необязательный атрибут USEMAP связывает с данным эле-

ментом карту изображения Синтаксис:

usemap="URL"

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

связаны с картами и объединяются тегом <MAP> В этом случае щелчок на карте

обрабатывает браузер:

Атрибут ISMAP Необязательный атрибут, используется для определения

карты изображения на стороне сервера Синтаксис:

ismap="длина"

Тег <IMG> должен быть включен в тег <A> Атрибут ISMAP сообщает браузеру,

что данное изображение дает пользователю возможность выполнять какие-

либо действия, щелкая мышью на активных областях Этот атрибут разрешает

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

и позволяют выполнять переходы Такие изображения применяются совмест-

но с тегом <A> В этом случае реакцию на щелчок отрабатывает сервер:

Примеры карт изображений

В качестве примера карты изображения рассмотрим семейную фотографию При

наведении указателя мыши на каждого члена семьи появляется соответствующая

всплывающая подсказка и возможен переход на другую веб-страницу с более под-

робными данными о нем

Код карты представлен в листинге 3 6, а на рис 3 6 показаны варианты карты изо-

бражения с активными областями в виде круга, прямоугольника и многоугольни-

ка Под изображением находится поле, в котором появляется название области

при наведении на нее указателя мыши Изображение, которое выбрано для при-

мера, имеет размер 400×300 пикселов 72 Урок 3. Графика

Рис 3 6 Пример карты изображения

Листинг 3.6. Пример создания карты изображения с активными областями в виде круга,

прямоугольника, многоугольника

<html><head><title>ФОТОГРАФИЯ-КАРТА</title></head>

<area onmouseover="document.where.who.value='Папа'"

shape=circle coords=70,70,70 href="father.htm">

<area onmouseover="document.where.who.value='Сынок'"

shape=poly coords=130,50,250,50,270,156,260,196,220,290,140,141

href="son.htm"> Карты изображений 73

<area onmouseover="document.where.who.value='Дочка'"

shape=rect coords=59,125,170,220 href="daughter.htm">

<area onmouseover="document.where.who.value='Мама'"

shape=circle coords=310,80,70 href="mather.htm">

</map>

</map>

</body></html>

В данном примере изображение, размещенное на странице с помощью тега <IMG>,

становится картой с помощью атрибута USEMAP

В листинге 3 7 представлен код еще одного примера карты изображения, позво-

ляющей просмотреть более подробно пригороды Санкт-Петербург, выбирая часть

большой фотографии Фотография разделена на четыре прямоугольника (рис 3 7)

Рис 3 7 Еще один пример карты изображения

Листинг 3.7. Пример создания карты изображения с активными областями в виде

прямоугольников

<html><head><title>МЕНЮ-КАРТА</title></head>

<h1>Пригороды Санкт-Петербурга</h1>

<hr>74 Урок 3. Графика

<tr><td><a href = graph1.htm> Петродворец</a>

<td><a href = #img>Ломоносов</a>

<td><a href = move.htm> Пушкин</a>

<td><a href = #map>Павловск</a>

</table><hr></center>

<h2>Графические ссылки</h2>

</map>

<hr>

</body>

</html>

Чтобы лучше понять, как задаются координаты областей, приведен рис 3 8 с ко-

ординатами в пикселах для каждой прямоугольной области

Рис 3 8 Разметка прямоугольных областей карты

Это изображение, состоящее из четырех видов пригородов Санкт-Петербурга,

имеет размеры 380×540 пикселов

Масштабирование изображений

На рис 3 9 показана веб-страница (листинг 3 8), содержащая три изображения

разного размера, источником которых является один и тот же файл Файл имеет Масштабирование изображений 75

размеры 154 пиксела в ширину и 248 пикселов в высоту Первое изображение уве-

личено в два раза, второе имеет реальный размер, размеры третьего изображения

уменьшены в два раза

Рис 3 9 Три изображения разного размера из одного файла

Листинг 3 8 Пример создания трех изображений разного размера из одного файла

<html><head><title>РАЗМЕРЫ РИСУНКА</title></head>

<body>

</body></html>

Изображения отделены друг от друга на расстояние трех неразрывных пробелов

(которые задаются символами &nbsp)

Если непродуманно задать ширину и высоту изображения, оно исказится Такой

пример приведен на рисунке 3 10 (листинг 3 9)

Листинг 3 9 Пример неудачного получения трех изображений разного размера

из одного файла

<html><head><title>ИСКАЖЕННЫЕ РИСУНКИ</title></head>

<img height=124 width=376 src=»girlie.gif»> </body></html>76 Урок 3. Графика

Рис 3 10 Три изображения разного размера, полученные из одного файла

Стандартные современные мониторы имеют разрешение 1024 пикселов в шири-

ну и 768 пикселов в высоту При разработке изображений следует учитывать, что

окно просмотра будет занимать лишь часть этой области На рис 3 11 показаны

изображения в виде полос с указанием их ширины и высоты в пикселах (лис-

тинг 3 10) Первая полоса имеет размеры 90 пикселов в высоту и 980 в ширину,

вторая — 80 пикселов в высоту и 780 в ширину, третья — 75 пикселов в высоту

и 600 в ширину, четвертая — 70 пикселов в высоту и 500 в ширину, пятая — 65 пик-

селов в высоту и 400 в ширину, шестая — 60 пикселов в высоту и 200 в ширину,

седьмая — 50 пикселов в высоту и 100 в ширину

Листинг 3 10 Примеры создания изображений с указанием их размеров в пикселах

<html><head><title>РАЗМЕРЫ РИСУНКОВ В ПИКСЕЛАХ</title>

</head>

<body>

</body></html>

Если размер изображения по ширине превышает 980 пикселов, оно не может

полностью поместиться на экране, и появляется горизонтальная полоса про-

крутки Если размер изображения по высоте превышает 570 пикселов, оно не

может полностью поместиться на экране, и появляется вертикальная полоса

прокрутки Для мониторов, размеры которых в пикселах отличаются от величи- Подведем итоги 77

ны 1024×768, размеры полностью размещаемого на экране изображения будут

другие, но суть останется та же

Рис 3 11 Примеры изображений с указанием их размеров в пикселах

Подведем итоги

В этом уроке рассмотрены теги, позволяющие размещать графику на веб-страницах

Главным из них является тег <IMG> с его атрибутами SRC, ALT, LONGDESC, HEIGTH,

WIDTH, ALIGN, BORDER, VSPACE, HSPACE Местоположением изображения на страни-

це управляет атрибут выравнивания ALIGN, который может принимать значения

top, middle, bottom, left и right (сверху, посередине, снизу, слева, справа) Расска-

зано также о теге <MAP>, который применяется для представления графического

изображения в виде карты с активными областями Представлены примеры карт

Рассмотрены форматы графических файлов JPEG и GIF, которые обычно исполь-

зуются в Интернете Рассказано также о форматах BMP, PCX и PNG

Для лучшего понимания природы изображений раскрыты такие понятия, как

пикселы и разрешение Урок 4 Фон веб-страниц

Каждая веб-страница имеет фон, на котором можно размещать текст

и рисунки. В этом уроке рассмотрены особенности создания фона

веб-страниц. Приведена таблица цветов, наиболее часто использую-

щихся в Интернете.

Урок Фоновые рисунки 79

Фоновые рисунки

Большинство браузеров позволяет включать в документ фоновый рисунок, кото-

рый будет отображаться на заднем плане всего документа Некоторым пользова-

телям нравится видеть на веб-страницах фоновую графику, другим нет Ненавяз-

чивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона

большинства документов

Описание фонового рисунка включается в тег <BODY> и выглядит следующим об-

разом:

На рис 4 1 показана страница с фоном, соответствующая в листингу 4 1

Рис 4 1 Веб-страница с фоновым рисунком

Рис 4 2 Рисунок, выбранный в качестве фона, и диалоговое окно с размерами этого рисунка

В качестве фона выбран рисунок с размерами 4,97×4,52 см Несмотря на неболь-

шие размеры, рисунок покрывает всю площадь страницы, словно множество пли-

ток кафеля На рис 4 2 слева показан исходный рисунок, а справа — диалоговое

окно с размерами этого рисунка, открытое в программе Adobe Photoshop 80 Урок 4. Фон веб-страниц

Листинг 4 1 Пример создания веб-страницы, содержащей фоновый рисунок

<HTML>

<HEAD>

<TITLE> Графический фон</TITLE>

</HEAD>

</BODY>

</HTML>

Задание стандартных цветов

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

и ссылок предопределенные цвета Чтобы задать эти цвета, необходимо включить

в тег <BODY> дополнительные параметры:

Здесь каждый из параметров определяет цвет того или иного элемента страницы:

BGCOLOR — цвет фона документа;

TEXT — цвет простого текста документа;

LINK — цвет ссылки

Цвет задается шестизначным числом в шестнадцатеричном формате и цветовой

модели RGB Значение #000000 соответствует черному цвету, значение #FFFFFF —

белому Например:

Данная строка определяет белый цвет фона документа, черный текст и серебри-

стые ссылки

На рис 4 3 показана веб-страница, содержащая текст белого цвета на синем фоне

(листинг 4 2)

Рис 4 3 Веб-страница, содержащая текст белого цвета на синем фоне Задание стандартных цветов 81

Листинг 4 2 Пример создания веб-страницы, содержащей текст белого цвета

на синем фоне

<HTML><HEAD><TITLE>Цветовой фон</TITLE></HEAD>

<BIG>Текст белого цвета</BIG>

</BODY></HTML>

На рис 4 4 показана та же веб-страница, что и на рис 4 3, но с атрибутами, ко-

торые задают верхнюю, нижнюю, левую, правую границы страницы в пикселах

(листинг 4 3) Видно, что текст смещен относительно границ страницы

Рис 4 4 Веб-страница, текст на которой имеет отступы

Рис 4 5 Фрагмент веб-страницы, содержащей таблицу цветов82 Урок 4. Фон веб-страниц

Листинг 4 3 Пример создания веб-страницы, текст на которой имеет отступы

<HTML><HEAD><TITLE>Цветовой фон</TITLE></HEAD>

<BODY BGCOLOR=123456 TEXT=FFFFFF TOPMARGIN=100 BOTTOMMARGIN=100 LEFTMARGIN=100

RIGHTMARGIN=100> <BIG>Текст белого цвета</BIG></BODY></HTML>

На рис 4 5 показана часть веб-страницы с названиями цветов, которые могут ис-

пользоваться на веб-странице в качестве фоновых (листинг 4 4) Такую таблицу

разработчикам веб-страниц полезно иметь под рукой, поскольку с ее помощью

очень удобно подбирать цвета и определять их значения

Листинг 4 4 Пример создания таблицы цветов

<HTML><HEAD><TITLE>Таблица цветов</TITLE></HEAD>

<BODY ALINK=#000000 BGCOLOR=#FFFFFF BGPROPERTIES=FIXED LINK=#000000 TOPMARGIN=10

VLINK=#808080>

<H1 ALIGN=CENTER>Таблица цветов</H1>

<TABLE BGCOLOR=GRAY BORDER=2 CELLPADDING=0 CELLSPACING=5> <TBODY><TR><TD ALIGN=MIDDLE

BGCOLOR=ALICEBLUE><FONT COLOR=BLACK

SIZE=2>ALICEBLUE-ГРЯЗНО ГОЛУБОЙ (#F0F8FF) </TD>

<TD ALIGN=MIDDLE BGCOLOR=ANTIQUEWHITE>ANTIQUEWHITE-АНТИЧНЫЙ

БЕЛЫЙ (#FAEBD7) </TD>

<TD ALIGN=MIDDLE BGCOLOR=AQUA>AQUA-АКВА (#00FFFF)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=AQUAMARINE>AQUAMARINE-АКВАМАРИН-

ЗЕЛЕНОВАТОГОЛУБОЙ (#7FFFD4) </TD></TR>

<TR><TD ALIGN=MIDDLE BGCOLOR=AZURE>AZURE-

ЛАЗУРНЫЙ (#F0FFFF) </TD>

<TD ALIGN=MIDDLE BGCOLOR=BEIGE>BEIGE-БЕЖЕВЫЙ (#F5F5DC)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=BISQUE>BISQUE-БИСКВИТ (#FFE4C4)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=BLACK>BLACK-ЧЕРНЫЙ (#000000)

</TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=BLANCHEDALMOND>BLANCHEDALMOND-

БЛЕДНЫЙ ДАЛЬМОНД (#FFEBCD) </TD>

<TD ALIGN=MIDDLE BGCOLOR=BLUE>BLUE-СИНИЙ (#0000FF)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=BLUEVIOLET>BLUEVIOLET-

ФИОЛЕТОВЫЙ (#8A2BE2) </TD>

<TD ALIGN=MIDDLE BGCOLOR=BROWN>BROWN-КОРИЧНЕВЫЙ (#A52A2A)

</TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=BURLYWOOD>BURLYWOOD-

ДРЕВЕСНЫЙ (#DEB887) </TD>

<TD ALIGN=MIDDLE BGCOLOR=CADETBLUE>CADETBLUE-

МОРСКОЙ (#5F9EA0) </TD>

<TD ALIGN=MIDDLE BGCOLOR=CHARTREUSE>CHARTREUSE-ЛИКЕР

ШАРТРЕЗ (#7FFF00) </TD>

<TD ALIGN=MIDDLE BGCOLOR=CHOCOLATE>CHOCOLATE-

ШОКОЛАДНЫЙ (#D2691E) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=CORAL>CORAL-КОРАЛЛ (#FF7F50)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=#C0F0E0>CORNFLOWER-КУКУРУЗНЫЙ

ЦВЕТОК (#6495ED) </TD>

<TD align=middle BGCOLOR=CORNSILK>CORNSILK-КУКУРУЗНЫЙ

ШЕЛК (#FFF8DC) </TD> Задание стандартных цветов 83

<TD align=middle BGCOLOR=CRIMSON>CRIMSON-

МАЛИНОВЫЙ (#DC143C) </TD></TR>

<TR> <TD align=middle BGCOLOR=CYAN>CYAN-ГОЛУБОЙ (#00FFFF)

</TD>

<TD align=middle BGCOLOR=DARKBLUE>DARKBLUE-

ТЕМНОСИНИЙ (#00008B) </TD>

<TD align=middle BGCOLOR=DARKCYAN>DARKCYAN-

ТЕМНОГОЛУБОЙ (#008B8B) </TD>

<TD align=middle BGCOLOR=DARKGOLDENROD>DARKGOLDENROD-

ТЕМНОЗОЛОТОЙ (#B8860B) </TD></TR>

<TR> <TD align=middle BGCOLOR=DARKGRAY>DARKGRAY-

ТЕМНОСЕРЫЙ (#A9A9A9) </TD>

<TD align=middle BGCOLOR=DARKGREEN>DARKGREEN-

ТЕМНОЗЕЛЕНЫЙ (#006400) </TD>

<TD align=middle BGCOLOR=DARKKHAKI>DARKKHAKI- ТЕМНЫЙ

ХАКИ (#BDB76B) </TD>

<TD align=middle BGCOLOR=DARKMAGENTA>DARKMAGENTA-

ТЕМНОПУРПУРНЫЙ (#8B008B) </TD></TR>

<TR> <TD align=middle BGCOLOR=DARKOLIVEGREEN>DARKOLIVEGREEN-

ТЕМНОЗЕЛЕНООЛИВКОВЫЙ (#556B2F) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKORANGE>DARKORANGE-

ТЕМНООРАНЖЕВЫЙ (#FF8C00) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKORCHID>DARKORCHID- ТЕМНОЙ

ОРХИДЕИ (#9932CC) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKRED>DARKRED-

ТЕМНОКРАСНЫЙ (#8B0000) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=DARKSALMON>DARKSALMON-

ТЕМНООРАНЖЕВО РОЗОВЫЙ (#E9967A) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKSEAGREEN>DARKSEAGREEN-

ТЕМНОЗЕЛЕНЫЙ МОРСКОЙ (#8FBC8B) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKSLATEBLUE>DARKSLATEBLUE-

ТЕМНОСЕРОГОЛУБОЙ (#483D8B) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKSLATEGRAY>DARKSLATEGRAY-

ТЕМНОГОЛУБОСЕРЫЙ (#2F4F4F) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=DARKTURQUOISE>DARKTURQUOISE-

ТЕМНОБИРЮЗОВЫЙ (#00CED1) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DARKVIOLET>DARKVIOLET-

ТЕМНОФИОЛЕТОВЫЙ (#9400D3) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DEEPPINK>DEEPPINK- НАСЫЩЕННО

РОЗОВЫЙ (#FF1493) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DEEPSKYBLUE>DEEPSKYBLUE- НАСЫЩЕНО

НЕБЕСНЫЙ (#00BFFF) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=DIMGRAY>DIMGRAY-

ТУСКЛОСЕРЫЙ (#696969) </TD>

<TD ALIGN=MIDDLE BGCOLOR=DODGERBLUE>DODGERBLUE- ИЗМЕНЕННЫЙ

СИНИЙ (#1E90FF) </TD>

<TD ALIGN=MIDDLE BGCOLOR=FIREBRICK>FIREBRICK- ОГНЕННО

КИРПИЧНЫЙ (#B22222) </TD>

<TD ALIGN=MIDDLE BGCOLOR=FLORALWHITE>FLORALWHITE-

ЦВЕТОЧНОБЕЛЫЙ (#FFFAF0) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=FORESTGREEN>FORESTGREEN- ЛЕСНОЙ

ЗЕЛЕНИ (#228B22) </TD>

<TD ALIGN=MIDDLE BGCOLOR=#F0C00A>FUCHIA-

ФИСТАШКОВЫЙ (#FF00FF) </TD>

<TD ALIGN=MIDDLE BGCOLOR=GAINSBORO>GAINSBORO-

ГЕЙНСБОРО (#DCDCDC) </TD>

продолжение 84 Урок 4. Фон веб-страниц

Листинг 4 4 (продолжение)

<TD ALIGN=MIDDLE BGCOLOR=GHOSTWHITE>GHOSTWHITE-ЕЛЕ ЗАМЕТНЫЙ

БЕЛЫЙ (#F8F8FF) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=GOLD>GOLD-

ЗОЛОТОЙ (#FFD700) </TD>

<TD ALIGN=MIDDLE BGCOLOR=GOLDENROD>GOLDENROD-

ТЕМНОЗОЛОТОЙ (#DAA520) </TD>

<TD ALIGN=MIDDLE BGCOLOR=GRAY>GRAY-СЕРЫЙ (#808080)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=GREEN>GREEN-ЗЕЛЕНЫЙ (#008000)</

FONT> </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=GREENYELLOW>GREENYELLOW-

ЗЕЛЕНОЖЕЛТЫЙ (#ADFF2F) </TD>

<TD ALIGN=MIDDLE BGCOLOR=HONEYDEW>HONEYDEW- МЕДВЕНОЙ

РОСЫ (#F0FFF0) </TD>

<TD ALIGN=MIDDLE BGCOLOR=HOTPINK>HOTPINK-

ЖАРКОРОЗОВЫЙ (#FF69B4) </TD>

<TD ALIGN=MIDDLE BGCOLOR=INDIANRED>INDIANRED- КРАСНЫЙ

ИНДИГО (#CD5C5C) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=INDIGO>INDIGO-

ИНДИГО (#4B0082) </TD>

<TD ALIGN=MIDDLE BGCOLOR=IVORY>IVORY- СЛОНОВОЙ

КОСТИ (#FFFFF0) </TD>

<TD ALIGN=MIDDLE BGCOLOR=KHAKI>KHAKI-ХАКИ (#F0E68C)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=LAVENDER>LAVENDER-

ЛАВАНДОВЫЙ (#E6E6FA) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=LAVENDERBLUSH>LAVENDERBLUSH-

ПОКРАСНЕННОЙ ЛАВАНДЫ (#FFF0F5) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LAWNGREEN>LAWNGREEN- ТРАВЯНОЙ

ЗЕЛЕНИ (#7CFC00) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LEMONCHIFFON>LEMONCHIFFON-

ЛИМОННОКОРИЧНЕВЫЙ (#FFFACD) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTBLUE>LIGHTBLUE-

СВЕТЛОСИНИЙ (#ADD8E6) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=LIGHTCORAL>LIGHTCORAL-

СВЕТЛОКОРАЛЛОВЫЙ (#F08080) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTCYAN>LIGHTCYAN-

СВЕТЛОГОЛУБОЙ (#E0FFFF) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTGOLDENRODYELLOW><FONT COLOR=BLACK

SIZE=2>LIGHTGOLDENRODYELLOW- СВЕТЛОЗОЛОТОЙ (#FAFAD2) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTGREEN>LIGHTGREEN-

СВЕТЛОЗЕЛЕНЫЙ (#90EE90) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=LIGHTGREY>LIGHTGREY-

СВЕТЛОСЕРЫЙ (#D3D3D3) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTPINK>LIGHTPINK-

СВЕТЛОРОЗОВЫЙ (#FFB6C1) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTSALMON>LIGHTSALMON- СВЕТЛО-

ОРАНЖЕВО РОЗОВЫЙ (#FFA07A) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTSEAGREEN>LIGHTSEAGREEN- СВЕТЛОЙ

МОРСКОЙ ВОЛНЫ (#20B2AA) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=LIGHTSKYBLUE>LIGHTSKYBLUE-

СВЕТЛО-НЕБЕСНО-СИНИЙ (#87CEFA) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTSLATEGRAY>LIGHTSLATEGRAY- СВЕТЛО-

ГОЛУБОСЕРЫЙ (#778899) </TD> Задание стандартных цветов 85

<TD ALIGN=MIDDLE BGCOLOR=LIGHTSTEELBLUE>LIGHTSTEELBLUE- СВЕТЛЫЙ

СЕРО-СИНИЙ (#B0C4DE) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIGHTYELLOW>LIGHTYELLOW-

СВЕТЛОЖЕЛТЫЙ (#FFFFE0) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=LIME>LIME-ЛИПОВЫЙ

ЦВЕТ (#00FF00) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LIMEGREEN>LIMEGREEN-

ЛИПОВОЗЕЛЕНЫЙ (#32CD32) </TD>

<TD ALIGN=MIDDLE BGCOLOR=LINEN>LINEN-ЛЬНЯНОЙ (#FAF0E6)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=MAGENTA>MAGENTA-

ПУРПУРНЫЙ (#FF00FF) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=MAROON>MAROON-

КАШТАНОВЫЙ (#800000) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMAQUAMARINE>MEDIUMAQUAMARINE-

УМЕРЕННЫЙ АКВАМАРИН (#66CDAA) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMBLUE>MEDIUMBLUE- УМЕРЕННЫЙ

СИНИЙ (#0000CD) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMORCHID>MEDIUMORCHID- УМЕРЕННОЙ

АРХИДЕИ (#BA55D3) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=MEDIUMPURPLE>MEDIUMPURPLE-

УМЕРЕННО-ПУРПУРНЫЙ (#9370DB) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMSEAGREEN>MEDIUMSEAGREEN-

УМЕРЕННОМОРСКОЙ (#3CB371) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMSLATEBLUE>MEDIUMSLATEBLUE

(#7B68EE) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMSPRINGGREEN>MEDIUMSPRINGGREEN-

УМЕРЕННО-СЕРОСИНИЙ (#00FA9A) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=MEDIUMTURQUOISE>MEDIUMTURQUOISE-

УМЕРЕННОБИРЮЗОВЫЙ (#48D1CC) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MEDIUMVIOLETRED>MEDIUMVIOLETRED-

УМЕРЕННО ФИОЛЕТОВОКРАСНЫЙ (#C71585) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MIDNIGHTBLUE>MIDNIGHTBLUE- СРЕДНИЙ

ТЕМНО-СИНИЙ (#191970) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MINTCREAM>MINTCREAM-

КРЕМОВЫЙ (#F5FFFA) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=MISTYROSE>MISTYROSE- КРАСНЫЙ

ТУМАН (#FFE4E1) </TD>

<TD ALIGN=MIDDLE BGCOLOR=MOCCASIN>MOCCASIN- ЦВЕТ ОБУВИ

ИНДЕЙЦЕВ (#FFE4B5) </TD>

<TD ALIGN=MIDDLE BGCOLOR=NAVAJOWHITE>NAVAJOWHITE-

СВЕТЛОКОРИЧНЕВЫЙ (#FFDEAD) </TD>

<TD ALIGN=MIDDLE BGCOLOR=NAVY>NAVY-МОРСКОЙ (#000080)

</TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=OLDLACE>OLDLACE- СТАРЫЕ

КРУЖЕВА (#FDF5E6) </TD>

<TD ALIGN=MIDDLE BGCOLOR=OLIVE>OLIVE- ОЛИВКОВЫЙ (#808000)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=OLIVEDRAB>OLIVEDRAB- СЕРЫЕ

ОЛИВКИ (#6B8E23) </TD>

<TD ALIGN=MIDDLE BGCOLOR=ORANGE>ORANGE-

ОРАНЖЕВЫЙ (#FFA500) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=ORANGERED>ORANGERED-

ОРАНЖЕВОКРАСНЫЙ (#FF4500) </TD>

<TD ALIGN=MIDDLE BGCOLOR=ORCHID>ORCHID- ОРХИДЕИ (#DA70D6)

</TD> продолжение 86 Урок 4. Фон веб-страниц

Листинг 4 4 (продолжение)

<TD ALIGN=MIDDLE BGCOLOR=PALEGOLDENROD>PALEGOLDENROD-

БЛЕДНОЗОЛОТОЙ (#EEE8AA) </TD>

<TD ALIGN=MIDDLE BGCOLOR=PALEGREEN>PALEGREEN-

БЛЕДНОЗЕЛЕНЫЙ (#98FB98) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=PALETURQUOISE>PALETURQUOISE-

БЛЕДНОБИРЮЗОВЫЙ (#AFEEEE) </TD>

<TD ALIGN=MIDDLE BGCOLOR=PALEVIOLETRED>PALEVIOLETRED- БЛЕДНО

ФИОЛЕТОВО КРАСНЫЙ (#DB7093) </TD>

<TD ALIGN=MIDDLE BGCOLOR=PAPAYAWHIP>PAPAYAWHIP- ДЫННАЯ

ПЛЕТЬ (#FFEFD5) </TD>

<TD ALIGN=MIDDLE BGCOLOR=PEACHPUFF>PEACHPUFF- ПЕРСИКОВЫЙ

ДЫМ (#FFDAB9) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=PERU>PERU- ЦВЕТ

ПУСТЫНИ (#CD853F) </TD>

<TD ALIGN=MIDDLE BGCOLOR=PINK>PINK- РОЗОВЫЙ (#FFC0CB)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=PLUM>PLUM- СЛИВОВЫЙ (#DDA0DD)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=POWDERBLUE>POWDERBLUE- ПОРОШКОВО

СИНИЙ (#B0E0E6) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=PURPLE>PURPLE-

ПУРПУРНЫЙ (#800080) </TD>

<TD ALIGN=MIDDLE BGCOLOR=RED>RED- КРАСНЫЙ (#FF0000)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=ROSYBROWN>ROSYBROWN- РОЗОВО

КОРИЧНЕВЫЙ (#BC8F8F) </TD>

<TD ALIGN=MIDDLE BGCOLOR=ROYALBLUE>ROYALBLUE- КОРОЛЕВСКО

СИНИЙ (#4169E1) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=SADDLEBROWN>SADDLEBROWN-

КОРИЧНЕВОЕ СЕДЛО (#8B4513) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SALMON>SALMON- ЦВЕТ

ЛОСОСЯ (#FA8072) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SANDYBROWN>SANDYBROWN- РЫЖЕВАТО

КОРИЧНЕВЫЙ (#F4A460) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SEAGREEN>SEAGREEN- МОРСКОЙ

ЗЕЛЕНИ (#2E8B57) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=SEASHELL>SEASHELL- МОРСКИХ

РАКОВИН (#FFF5EE) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SIENNA>SIENNA- ОХРА (#A0522D)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=SILVER>SILVER-

СЕРЕБРЯНЫЙ (#C0C0C0) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SKYBLUE>SKYBLUE- СИНЕГО

НЕБА (#87CEEB) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=SLATEBLUE>SLATEBLUE-

СЛАНЦЕВОСИНИЙ (#6A5ACD) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SLATEGRAY>SLATEGRAY- СЛАНЦЕВО-

СЕРЫЙ (#708090) </TD>

<TD ALIGN=MIDDLE BGCOLOR=SNOW>SNOW- СНЕГ (#FFFAFA)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=SPRINGGREEN>SPRINGGREEN- ВЕСЕННЯЯ

ЗЕЛЕНЬ (#00FF7F) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=STEELBLUE>STEELBLUE-СИНЕВАТО

СТАЛЬНОЙ (#4682B4) </TD> Подведем итоги 87

<TD ALIGN=MIDDLE BGCOLOR=TAN>TAN-КОРА ДУБА (#D2B48C)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=TEAL>TEAL-ЧИРОК (#008080)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=THISTLE>THISTLE-

ЧЕРТОПОЛОХ (#D8BFD8) </TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=TOMATO>TOMATO-

ТОМАТНЫЙ (#FF6347) </TD>

<TD ALIGN=MIDDLE BGCOLOR=TURQUOISE>TURQUOISE-

БИРЮЗА (#40E0D0) </TD>

<TD ALIGN=MIDDLE BGCOLOR=VIOLET>VIOLET-

ФИОЛЕТОВЫЙ (#EE82EE) </TD>

<TD ALIGN=MIDDLE BGCOLOR=WHEAT>WHEAT-ПШЕНИЦА (#F5DEB3)

</TD></TR>

<TR> <TD ALIGN=MIDDLE BGCOLOR=WHITE>WHITE-БЕЛЫЙ (#FFFFFF)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=WHITESMOKE>WHITESMOKE-

ДЫМ (#F5F5F5) </TD>

<TD ALIGN=MIDDLE BGCOLOR=YELLOW>YELLOW-ЖЕЛТЫЙ (#FFFF00)

</TD>

<TD ALIGN=MIDDLE BGCOLOR=YELLOWGREEN>YELLOWGREEN- ЖЕЛТО-

ЗЕЛЕНЫЙ (#9ACD32) </TD></TR></TBODY></TABLE>&NBSP;

</BODY></HTML>

Подведем итоги

В этом уроке рассказано, как создать фон веб-страницы В качестве фона можно

использовать рисунок или сделать фон однотонным В конце урока приведен ли-

стинг очень полезной для разработчиков веб-страниц программы, описывающей

<<< < Предыдущая 1 2 3 4 56 / 216 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.12.2018386.05 Кб18Киса.doc
#
09.04.2015435.71 Кб15Кластеры.doc
#
09.04.2015359.82 Кб26кол.docx
#
20.08.2019200.7 Кб7колеб.контура.doc
#
15.03.2016222.72 Кб48Колебания типа E в прямоугольном объемном резонаторе.docx
#
27.08.20191.1 Mб16Комолова.doc
#
12.07.201960.12 Кб18комп.преступление2.docx
#
09.04.2015463.87 Кб35Компьютерные сети Лабораторная 01.doc
#
20.04.20191.19 Mб46Конспект лекций 4306 - 2007.doc
#
14.03.2016176.13 Кб181Конспект лекций материаловед.2...doc
#
09.04.20154.36 Mб507Конспект лекций от мешка 1.doc