рефераты конспекты курсовые дипломные лекции шпоры

Раздел Программирование
/
Графика в HTML-документах

Реферат Курсовая Конспект

Выберите учебное заведение

Графика в HTML-документах

Графика в HTML-документах - раздел Программирование, Общие принципы проектирования HTML-документа В Html-Документах Возможно Использование Растровой И Векторной Графики. Прогр...

В HTML-документах возможно использование растровой и векторной графики. Программы просмотра отображают три формата растровой графики

GIF (Graphics Interchange Format) – формат (быстрого) обмена изображениями. Используется для графики с “небольшим” количеством цветов. Этот формат допускает создание рисунков и анимационных изображений с прозрачным фоном;

JPEG (Joint Photographic Experts Group) – используется для отображений фотографий;

PNG (Portable Network Graphics) – альтернатива GIF и два формата векторной графики – технологии Shockwave и Flash компании Makromedia.

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

Фоновое изображение. Рисунок может использоваться в качестве фона Web–страницы. Для решения этой задачи используется параметр background оператора BODY. Слева по тексту приводится пример фонового рисунка. Необходимо отметить, что размер фонового рисунка значительно меньше окна программы просмотра. Поэтому фоновый рисунок будет повторяться по вертикали и по горизонтали до заполнения всего окна программы просмотра. Значение параметра background равно адресу фонового изображения. Адрес фонового рисунка указывает либо относительное местоположение рисунка (то есть путь доступа к рисунку относительно расположения исходного HTML-файла), либо его полный URI-адрес. Здесь и далее предполагается, что все рисунки размещены в папке Images, которая хранится в одной папке с исходным HTML-файлом.

Оператор BODY имеет еще один параметр, используемый для задания фонового рисунка bgproperties. Этот параметр может иметь единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а остается неподвижным относительно экрана.

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

Синтаксис элемента: одиночный тэг с двумя обязательными атрибутами — src и alt

<img src="URI" alt="альтернативный текст">

Собственные атрибуты элемента <IMG>

Наименование атрибутов	Описание атрибутов
SRC	Адрес URI-файла с графическим изображением.
ALT	Текстовая строка, которая отображается вместо графического файла, если броузер не может показать изображение или графическая система броузера отключена намеренно.
ALIGN	Выравнивание текста относительно изображения: left – по левой границе; right – по правой границе; top – по верхней границе; middle – по центру изображения; bottom – по нижней границе. Есть и еще ряд более “тонких” значений атрибута.
HEIGHT	Высота изображения в пикселях (рекомендуемый).
WIDTH	Ширина изображения в пикселях (рекомендуемый).
BORDER	Ширина рамки вокруг изображения (только NN).
HSPACE	Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по горизонтали.
VSPACE	Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по вертикали.
USEMAP	Адрес URI-файла, содержащего карту изображения (сегментированная графика).
ISMAP	Признак сегментированной графики.

Кроме перечисленных индивидуальных параметров, оператор <IMG>, также как и другие операторы, имеет ряд общих параметров и параметры для обработчиков событий.

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

Фоновые и сегментированные графические изображения масштабирования не допускают.

Пример 2.9. Использование графики в HTML-документах

<HTML>

<HEAD>

<TITLE>Проектирование WEB-сайта</TITLE>

</HEAD>

<DIV><P><big><H2>Графика в HTML-документах</H2>

<P><IMG align=top hspace=10 src="Images/Leti_tm2.gif">Это главный

корпус Ленинградского<br>Электротехнического института

<P align=left>Графическое изображение можно<IMG align=bottom height=40

src="Images/Cdrom.gif" width=160> включать непосредственно в

текст.</big></P></DIV>

<IMG align=bottom src="Images/vv.gif" vspace=20>Есть несколько

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

<P>Просто текст</P></DIV>

</BODY>

</HTML>

Результат выполнения примера 2.9 (рис.2.9)

Рис.2.9. Просмотр примера “Графика в HTML-документах”

В рассматриваемом примере:

- в качестве фона документа (<BODY background="Images/Fon_Tile.gif">) рассматривается рисунок, который хранится в файле с именем Fon_Tile.gif в папке Images. Вид рисунка приводился в тексте параграфа;

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

- при отображении рисунка Images/Cdrom.gif показывается возможность использования параметров height и width;

- в строке <IMG align=left width=30% height=10% alt="Здесь отображается РИСУНОК" src=hj> в параметре src задан несуществующий файл. Поэтому броузер высвечивает текст, заданный в параметре alt — "Здесь отображается РИСУНОК".

Замечание. Для отображения строки текста, указанного в качестве значения параметра alt, необходимо выделить место в окне броузера;

- в нижней части Web – страницы приведены два же рисунка, отличающихся одним параметром — прозрачностью фона рисунка. Первый рисунок, загружаемый оператором <IMG align=bottom src="Images/vv_pr.gif" vspace=20>, использует исходный рисунок с прозрачным фоном. Второй, загружаемый оператором <IMG align=bottom src="Images/vv.gif" vspace=20>, использует тот же самый исходный рисунок, но с непрозрачным фоном.

Замечание. При работе с графикой возникают проблемы с размещением и фиксацией рисунков в строго определенных местах окна программы просмотра. Решение этой задачи достигается за счет разметки окна программы просмотра либо в виде таблицы с невидимыми границами, либо за счет использования так называемого “плавающего” фрейма, который рассматривается далее.

Развернуть

Открыть в широком формате

– Конец работы –

Эта тема принадлежит разделу:

Общие принципы проектирования HTML-документа

Структура документов в формате HTML... В рекомендациях W первой строкой создаваемого документа указывается... lt DOCTYPE HTML PUBLIC W C DTD HTML EN gt...

Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Графика в HTML-документах

Что будем делать с полученным материалом:

Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:

Все темы данного раздела:

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

Технология подготовки гипертекстового документа
Web-технология позволяет объединить в одном документе самые разные формы представления информации — текст, таблицы, графику, звук и многое другое, а также соединить в гипертекстовую систему

Проектирование HTML – документа
Гипертекст в формате HTML представляется совокупностью структурных блоков. Разметка гипертекста осуществляется элементами[2], поэтому содержание структурного блока и элементы разметки также называю

Структура HTML – документа
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD>

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

Описание термина располагается в контейнере <DD>описание</DD>.
Пример 2.5. Списки-определения. <HTML> <HEAD> <TITLE>Проектирование WEB- сайта</TITLE> </HEAD>

Форматирование шрифта
В языке разметки HTML определены операторы физического и логического форматирования символов. Операторы физического форматирования явным образом определяют внешний вид симв

Цвет в HTML – документах
Язык разметки гипертекста HTML позволяет указывать цвет фона документа, текста (заголовков и отдельных слов), полей ссылок на другие документы и так далее. Обозначение цвета.

Сегментированная графика. Элементы <MAP> и <AREA>.
Сегментированная графика или графическая карта (imagemap) представляется обычным изображением с выделенными чувствительными (активными) областями. Активные области изображения являются ссылками на