14115

ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ

Конспект урока

Информатика, кибернетика и программирование

УРОК 6 ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ Наличие изображений делает Webстраницу более привлекательной и информативной для посетителей. Сами рисунки хранятся в отдельных файлах вне документа HTML но отображаются браузером внутри Webстраницы. Для вставки рисунка нужн

Русский

2013-05-21

383.5 KB

2 чел.

УРОК 6

ВСТАВКА ГРАФИЧЕСКОГО ИЗОБРАЖЕНИЯ

Наличие изображений делает Web-страницу более привлекательной и информативной для посетителей. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются браузером внутри Web-страницы.

Для вставки рисунка нужно воспользоваться тегом <IMG>.

Атрибут src

Обязательным атрибутом этой команды является атрибут src, с его помощью задается имя файла, в котором хранится рисунок. Обычно графические файлы помещают в отдельный каталог pic (или image), который является подкаталогом для каталога с HTML-текстами.

Пример команды вывода графики: <IMG src=pic/picture.jpg>

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

Другие атрибуты тега <IMG>

Атрибуты

Описание

alt

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

Пример записи: <IMG src=logo.gif alt="Логотип">

width, height

Ширина и высота картинки (в пикселях).

Например: <IMG src=logo.gif width=300 height=150>

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

border

Рамка вокруг картинки. Значением атрибута является толщина рамки (в пикселях).

Например: <IMG src=logo.gif border=1>

Чтобы удалить рамку, нужно задать нулевое значение атрибута.

align

Задает правила размещения на Web-странице текста и графических изображений относительно друг друга. Значения top, bottom и middle задают вертикальное положение фрагмента текста относительно картинки.

Пример1<IMG src="images\analisator.gif" alt="Анализатор" width="150" height="138" border="1" align="top">

Значения left и right задают способ обтекания графики текстом.

Пример2

hspace, vspace

Задает ширину пустой области (в пикселях) вокруг изображения, отделяющей его от остальных элементов страницы (hspace  слева и справа, vspace  сверху и снизу). Это позволит избавиться от эффекта прилипания текста к картинке.

Пример3


Вставка картинки средствами редактора HomeSite

  1.  На панели инструментов Common нажмите кнопку (Image).
  1.  В появившемся диалоговом окне ввести значения полей:
  •  Sourse адрес картинки (можно воспользоваться кнопкой (Обзор));
  •  Alt.Text альтернативный текст;
  •  Width, Heigt ширина и высота картинки (автоматически вставляются реальные размеры выбранного изображения);
  •  Hspace, Vspace ширина пустой каймы вокруг картинки;
  •  Border ширина рамки;
  •  Align выравнивание;
  1.  Нажать кнопку ОК

В результате выполненных действий в тексте программы появится строка HTML-кода:

<IMG src="pic\11.jpg" alt="Закат" width="200" height="133" hspace="8" vspace="5" border="1" align="left">.

Картинки ссылки

Если команду IMG вложить внутрь дискриптора <A>…</A>, то она будет работать как ссылка. При этом изображение обрамляется рамкой того же цвета, что объявлен для ссылок. Если рамка нежелательна, неоходимо указать нулевое значение атрибута border.


Задание

Небольшие графические изображения могут играть роль маркеров списка. При этом элементы маркированного списка не объявляются тегом <LI>. Каждый элемент начинается переходом на новую строку и картинкой. Рекомендуется использовать для картинок-маркеров атрибуты align и hspase. Атрибут align позволит выровнять строку текста относительно маркера, а hspace поможет задать одинаковые отступы текста от маркера.

Создайте документ по образцу:

Примечания:

  1.  Фон документа находится в файле 06_fon.jpg.
  2.  Цвет линии имеет код #660033
  3.  Заголовок страницы объявлен заголовком второго уровня, размер последнего слова увеличен.
  4.  Используются вложенные списки. Каждый уровень вложенности отличается отступом текста вправо.
  5.  Картинки для маркеров лежат в папке images/

06_sm1.gif

06_sm2.gif

06_sm3.gif

06_sm4.gif

06_sm5.gif

06_sm6.gif

PAGE  2


 

А также другие работы, которые могут Вас заинтересовать

39817. Импульсные и цифровые автоматические системы управления 51.5 KB
  К импульсным АСУ относятся системы в состав которых входит хотя бы один элемент дискретного действия преобразующий непрерывный сигнал в последовательность импульсов или в ряд квантованных сигналов. Функциональную схему импульсной системы можно представить состоящей из дискретного элемента и непрерывной части НЧ. непрерывные системы дискретные системы xt непрерывная величина x k величина определена в отдельные промежутки времени производная от непрерывной величины  x k=x kx k1 разность первого порядка вторая...
39818. Развитие автоматизации судов 194.5 KB
  характеризуется внедрением автоматических систем управления регулирования контроля и защиты в объёме. На следующем этапе разрабатываются автоматические системы регулирования и дистанционного управления функционально связанными установками: котельной паротурбинной дизельэнергетической электроэнергетической. Автоматика первого поколения позволила решить главные задачи: повысить маневренность стабильность работы и экономичность судовых машин и систем освободить людей от утомительной обязанности ручной регулировки и управления. Резко...
39819. Классификация систем автоматического регулирования 381.5 KB
  Системы автоматического регулирования нашли широкое применение в многочисленных технологических процессах различных отраслей народного хозяйства. Следящие системы когда изменение выходного параметра Yt происходит по заранее неизвестному закону изменения задающего воздействия Xt. Во время работы системы регулируемая величина Yt должна изменяться в полном соответствии с задающим воздействием т. К таким системам относятся системы автоматического сопровождения цели например телескоп следит за движением небесного тела системы...
39820. Анализ автоматических систем регулирования 362 KB
  Теория автоматического управления делится на: анализ АСР известны параметры блоков их характеристики при этом необходимо определить поведение системы качество регулирования. синтез АСР заключается в нахождении параметров блоков АСР регулятора при заданных показателях качества. АСР могут находиться в двух режимах: Статический все воздействия внутренние и внешние постоянны во времени реальные АСР практически редко находятся в статическом режиме. Для упрощения расчётов АСР проводят линеаризацию ведь как правило поведение...
39821. Разработка проекта комплексного дизайн-графического обеспечения рекламной кампании Уфимского филиала МГГУ им. М.А. Шолохова в области образовательных услуг 67.17 KB
  Краткая история графического дизайна. Теоретическая значимость: в теоретической части дан подробный анализ истории зарождения графического дизайна и история возникновения наружного штендера. В первой главе представлен краткий обзор истории графического дизайна. Краткая история графического дизайна Графический дизайн художественнопроектная деятельность по созданию гармоничной и эффективной визуальнокоммуникативной среды.
39822. Возведение производственного здания 2.01 MB
  Целями данного дипломного проекта являются: обоснование объемнопланировочных и конструктивных решений здания в архитектурностроительной части проекта; конструирование и расчет монолитного железобетонного перекрытия главных и второстепенных монолитных железобетонных балок; разработка технологических карт на сложные виды работ а именномонолитные работы кирпичная кладка и работы по устройству кровли здания; разработка календарного плана строительства здания на основе расчета нескольких вариантов организации строительства их сравнения...
39823. Проектирование фотоотдела при дизайн-студии 381.39 KB
  Установление режима работы предприятия Для определение производственной программы предприятия по определенному формату определенного вида услуг по следующей формуле рассчитывается объем работ: 9 где Оф объем работ по определенному формату определенного вида услуг руб. Цз цена одного заказа по определенному формату определенного вида услуг руб. Отсюда: Объем работ для заказов художественной фотосъемки на формате...
39824. ОСНОВЫ ТЕХНОЛОГИИ МАШИНОСТРОЕНИЯ 7.55 MB
  Основные факторы влияющие на точность обработки. Этапы обеспечения точности обработки. Пути снижения влияния погрешностей установок на точность обработки 46 3.РАСЧЕТНОАНАЛИТИЧЕСКИЙ МЕТОД ОБЕСПЕЧЕНИЯ ТОЧНОСТИ ОБРАБОТКИ ДЕТАЛЕЙ.