Главная

Популярная публикация

Научная публикация

Случайная публикация

Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






Рисунки на WEB-страницах




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

Рисунки хранятся в отдельных графических файлах. Во Всемирной паутине, как правило, используют два графических формата: gif (graphic interchange format) и jpg (joint photographic experts group). Оба эти формата используют растровую графику (получаются данные о каждой точке изображения и они отображаются на экране). Формат gif использует палитру из 256 цветов при 8 битов на пиксель, а формат jpg - 16,7 миллионов цветов при 24 битов на пиксель. Формат gif применяется для встроенных изображений, а формат jpg – для показа фотографий.

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

При загрузке html-документа сначала отображается текстовая часть, а изображение загружается на втором проходе. Пока пользователь знакомится с текстом, идёт загрузка изображений. И, тем не менее, многие пользователи работают в режиме отключения приема графических файлов, увеличивая скорость передачи данных, но жертвуя красотой и наглядностью представления этих данных.

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

После этих предварительных указаний вернёмся к вопросам практического представления изображений на Web-страницах.

Рисунки на Web-страницах могут использоваться тремя способами:

· Как фон, на котором располагаются элементы основного документа;

· Как изображение, встроенное в документ;

· Как ссылка на другой документ (например, в карте-изображение).

Изображение, используемое как фон, всегда занимает всё окно просмотра браузера. Желательно, чтобы файл, содержащий фон был небольшим и быстро загружался. Если размер изображения меньше окна просмотра браузера, то изображение будет размножено. Для указания фонового изображения надо в теге <BODY> записать ранее приведенный атрибут background и, возможно, атрибут bgcolor. Например, если на диске имеется графический файл Tiles.jpg, содержащий фоновое изображение, то тег <BODY> будет иметь вид: <BODY background="Tiles.gif">

 


Для встраивания изображения в документ используется одиночный тег < IMG > (сокращение от слова image). В том месте документа, где вы хотите вставить рисунок надо указать этот тег, так как он задаёт ссылку на графический файл. Тег может содержать ряд атрибутов:

Атрибут Функция атрибута
src Указывает место файла на диске и его имя (обязательный атрибут)
align Выравнивание рисунка
alt Текст в месте расположения рисунка
border Вокруг изображения будет рамка указанной толщины
height Высота рисунка в пикселях
width Длина рисунка в пикселях
hspace Отступ от изображения по горизонтали
vspace Отступ от изображения по вертикали

 

Отметим, что хотя атрибуты height и width изменяют размер рисунка на экране, но время его загрузки не изменяется. Их надо использовать всегда для стабильности изображения сайта как после первого, так и после второго прохода. Ведь очень часто размеры рисунка намного больше, чем показываемый маленький «квадратик» после первого прохода, а текст, который уже загрузился, форматируется исходя из размеров этих «квадратиков». Когда рисунок загрузится после второго прохода, его размеры потеснят загруженный текст, который будет вынужден переформатироваться — стабильность изображения сайта разрушится.

Создадим html-документ содержащий рисунок паутины, который находится на диске С: в каталоге images и имеет имя web.gif

<HTML>

<HEAD>

<TITLE> html-документ содержащий рисунок паутины </TITLE>

</HEAD>

<BODY>

<P><IMG src="C:\images\web.gif" align="left" hspace=20 vspace=20 border=3 width=150 height=120> <P>Размер рисунка: атрибуты WIDTH и HEIGHT

<P>Рисунок можно отделять от текста отступами: атрибуты HSPACE и VSPACE

<P>Рамка вокруг рисунка: атрибут BORDER

</BODY>

</HTML>

Браузер отобразит данный html-документ на экране следующим образом:

 


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

Третий тип изображений – карты-изображения будет рассмотрен в пункте, посвященном специально этому вопросу.

Файлы с расширениями gif и jpg желательно располагать в том же каталоге, что и html-файл. Если это не так, то браузер не сможет, без особого указания, найти запрашиваемое изображение и выдаст на экран пиктограмму ошибки. Такая пиктограмма может означать, что

· Имя и\или расширение файла изображения задано неверно;

· Неверно указан путь к файлу изображения.

Списки

Вспомним текстовый редактор Word. В нем можно создавать неупорядоченные и упорядоченные списки. Это можно сделать и в html-документах. Признаком начала такого списка является тег <UL> или <OL>, сокращения от английских слов Unordered Lists и Ordered List. Список заканчивается концевым тегом </UL> или </OL>. Каждая строка списка отмечается тегами <LI> текст </LI>.

Рассмотрим примеры построения списков. Создадим следующий html-документ:

<HTML>

<HEAD>

<TITLE> Неупорядоченный список </TITLE>

</HEAD>

<BODY>

Неупорядоченный список

<UL>

<LI>одноранговая сеть</LI>

<LI>сеть на основе сервера</LI>

</UL>

<P><B> Упорядоченный список </ B>

<OL>

<LI>понедельник</LI>

<LI>вторник</LI>

<LI>среда</LI>

<LI>четверг</LI>

<LI>пятница</LI>

</OL>

</BODY>

</HTML>

На экране пользователь увидит:






Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных