Графика и мультимедиа в веб-документах. Встраивание изображений в HTML-документы. Параметр BORDER. Параметры WIDTH и HEIGHT

Страницы работы

5 страниц (Word-файл)

Фрагмент текста работы

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Государственное образовательное учреждение

высшего профессионального образования

Сибирский государственный аэрокосмический университет

имени академика М.Ф. Решетнева

(СибГАУ)

АЭРОКОСМИЧЕСКИЙ КОЛЛЕДЖ

Рассмотрено на заседании

 цикловой комиссии

230103 «Автоматизированные

  системы обработки

информации и управления»

 и

рекомендовано к применению

_____________( )

«_____»_____________20___г

Методическое пособие

Лабораторная работа № 4

по дисциплине:

«Распределенные системы обработки информации»

Графика и мультимедиа в веб-документах.

230103  Автоматизированные  системы обработки информации и управления

Разработал                                           Преподаватель АК                       

2010 г.


ЛАБОРАТОРНАЯ РАБОТА № 4

Тема: Графика и мультимедиа в веб-документах.

Цель: научиться добавлять графические изображения и файлы мультимедиа в веб-документы.

Оборудование и программное обеспечение:

Персональный компьютер IBM PC/AT.

Операционная система MS-DOS, Windows 95/98/NT/2000/XP.

Теоретическая часть

В HTML-документах графические изображения можно внедрять в документ или использовать как фоновый рисунок документа. Браузеры могут отображать три вида графических изображений: GIF, JPEG, PNG.

Встраивание изображений в HTML-документы

Вставка изображений в HTML-документ осуществляется при помощи тега <IMG>. Тег <IMG> одиночный, он имеет следующие атрибуты:

Параметр SRC - единственный параметр, который является обязательным для указания, он задает путь (относительный или абсолютный) к рисунку. Формат указания следующий:

<IMG SRC="picture.gif">

В  данном  случае  браузер  станет  искать  файл "picture.gif" в том же каталоге, где находится и HTML-документ, ссылающийся на этот рисунок. Обычно для графических изображений выделяется отдельная папка:

<IMG SRC="images/picture.gif">

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

HREF="My_doc.html"><IMG SRC="map.gif"></A>

Любая часть такого изображения будет работать как указатель ссылки на документ My_doc.html.

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

<IMG SRC="images/clock.gif"BORDER="5">

В случае если графическое изображение является гиперссылкой, браузер  автоматически отобразит вокруг рисунка рамку толщиной в 1 пиксел (кроме этого, некоторые браузеры делают рамку определенного цвета, обычно синего).

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

<A><HREF="clock.html"><IMG SRC="images/clock.gif"  BORDER="0"></A>

Параметры WIDTH и HEIGHT - используются для определения размеров графического изображения, встраиваемого в электронный документ (ширина и высота, в пикселах):

<IMG SRC="images/clock.gif" BORDER="1" WIDTH="300" HEIGHT="201">

Использование этих параметров не обязательно, однако рекомендуется по двум основным причинам:

  • во время загрузки изображения браузер сразу зарезервирует на странице столько места, сколько необходимо для отображения рисунка. Многие разработчики пренебрегают этим правилом, в результате чего при загрузке под рисунок изначально отводится слишком мало места, а потом страница начинает "скакать", поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла;
  • иногда размеры изображения слишком велики и для его просмотра "в полный рост" требуются полосы прокруток. В таком случае, если необходимо поместить рисунок в окне браузера, не прибегая к помощи полос прокруток, то можно в HTML-коде указать пропорционально уменьшенные размеры этого рисунка. Размещая на странице уменьшенный вариант рисунка, обязательно помните о необходимости пропорционального изменения размеров, в противном случае при нарушении соотношения этих размеров, изображение получится искаженным и неприглядным

Корректно изменить пропорции рисунка можно следующими способами:

  • указать в теге <img> измененным только один из параметров (либо

Похожие материалы

Информация о работе