Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

лабы / Lab3 / ИТСлаб3

.doc
Скачиваний:
24
Добавлен:
16.04.2013
Размер:
56.83 Кб
Скачать

3

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

Использование графики при разработке html-страниц

Цель работы: изучить основы гипертекстовой технологии на примере разработки html-страниц с использованием графических объектов.

Продолжительность работы - 4 часа.

  1. Теоретические сведения

В современном Internet принято чтобы web-сайты содержали в себе графические объекты. Как минимум, это должен быть логотип компании - владельца сайта - или торговой марки или приветствие. Также рекомендуется использовать небольшие картинки для оформления границ html-страниц. В самом деле, как можно было увидеть в ходе одной из предыдущих лабораторных работ, использование только закрашивания html-страницы не обеспечивает достаточно гармоничного её восприятия.

Поскольку html-документ может содержать только текст, все графические объекты оформляются в виде отдельных файлов и выкачиваются браузером при загрузке сайте. Также браузер поступает с музыкой и видео, внедрёнными в html-страницу. Во многом поддержка графических объектов зависит от версии web-браузера. MS Internet Explorer 6 и более поздние его версии поддерживают графические файлы форматов gif, jpg, pcx, bmp, swf и др.

Популярность WWW сейчас во многом обеспечивается использованием в html-документах графических объектов: картинок, анимации, игр, разработанных в редакторе Macromedia Flash (файлов с расширением swf ). Последнее время Flash-анимация вытесняет привычную для Internet GIF-анимацию, так как этот формат обеспечивает более компактное хранение данных за счёт сжатия графики, что важно для быстроты загрузки сайтов, а также позволяет использовать палитру в 16 млн. цветов, в то время, когда формат GIF поддерживает лишь 16 стандартных цветов.

  1. Сведения о языке HTML

2.1. Размещение картинок внутри текста

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

SRC - URL-адрес того источника, откуда берется изображение.

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

ALIGN - определяет, как будет позиционироваться данное изображение относительно строки текста, в которую оно помещено. Возможные значения атрибута:

TOP - поставить на один уровень верхний край изображения и верхнюю границу текущей строки;

MIDDLE - поставить базовую линию текущей строки вровень с центром изображения;

BOTTOM - выровнять нижнюю часть изображения по базовой линии текущей строки (используется по умолчанию);

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

RIGHT - сместить картинку к правому краю страницы совершенно аналогично смещению влево.

WIDTH - ширина изображения в пикселах.

HEIGHT - высота изображения в пикселах.

BORDER - если элемент IMG участвует в разметке как составная часть некой гипертекстовой связи, то браузеры, как правило, отмечают это обстоятельство, рисуя цветную рамку вокруг подобной картинки. Атрибут border задаёт определенную ширину для подобной рамки (в пикселах). Если же необходимо полностью избавиться от рамки, следует указать border=0.

HSPACE - задать ширину чистых полей слева и справа от изображения.

VSPACE - задать ширину чистых полей над и под изображением.

Например, тег

<IMG src="http://webapp/images/sample.gif" alt="Пример картинки в html" align=top width=200 height=200 hspase=50 vspase=50>

размещает картинку размерами 200х200 пикселов, отделённую от текста и других картинок полями по 50 пикселов, с пояснительным текстом и выравниванием по верхнему краю.

2.2. Использование картинок в качестве фона

Для задания фона html-страницы используются два средства HTML: задание цвета фона и использование картинки в качестве фонового рисунка. Последний приём позволяет создавать более осмысленные html-страницы, так как от фона зависит общее восприятие сайта.

Чтобы поместить картинку на задний план под текст html-документа используется атрибут background тега BODY. Например:

<BODY background="http://webapp/images/fon3.jpg">

Фоновая картинка выкладывается "черепицей" по всей html-странице. При этом важно чтобы картинка стыковалась сама с собой по левой и правой, верхней и нижней границам. Некоторые из прилагаемых к работе картинок обладают этим свойством.

Пример html-страницы, содержащей картинки. (См. также файл test_l3.html.)

<html>

<head>

<title>Страница с картинками</title>

<head>

<body background=images/fon1.jpg>

<img src=images/butte.gif align=left width=110 height=84 vspace=12>

<img src=images/runrabit.gif align=right width=135 height=129 hspace=50>

Пример html-страницы с картинками и gif-анимацией. Картинки попарно выровнены по левой и правой сторонам.<br>

<img src=images/rowboat_small.gif align=left width=51 height=37 hspace=50>

<img src=images/superav_small.gif align=right width=72 height=48>

Две из них выровнены по границам пространства, ограниченного соседними картинкам. Один из зайцев и лодка сдвинуты атрибутом hspace.

<br><br><br>

<img src=images/butte.gif align=right width=110 height=84>

<img src=images/runrabit.gif align=left width=135 height=129>

</body>

</html>

2.3. Картинки и гиперссылки

Для связей между html-страницами и сайтами нередко используются картинки вместо текстового описания гиперссылки. В случае ссылок на другие сайты такие картинки называются баннерами. Баннеры, как правило, представляют собой логотипы компаний – владельцев сайтов или счётчики числа посещений сайтов, что также нередко привлекает интерес к сайтам. Трудно сказать, насколько эффективен такой подход, так как большое количество баннеров перегружает html-страницы, которые начинают напоминать витрины магазинов. Поэтому правильное размещение рекламных баннеров на сайте – основа его успеха.

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

Использовать картинку в качестве гиперссылки очень просто:

<A HREF="URL гиперссылки"> <IMG src="URL картинки"> </A>

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

Лабораторное задание и порядок его выполнения

  1. Ознакомиться с основами технологии разработки html-документов и изучить средства HTML, приведенные в описании лабораторной работы.

  2. Скопировать на диск D или H директорию images со всем содержимым. В последствии при выполнении заданий располагать html-страницы рядом с этой директорией.

  3. Скопировать из текста пример html-страницы и изучить её работу. Изменить ширину окна web-браузера и понаблюдать за смещением картинок при этом. Объяснить наблюдаемые эффекты.

  4. С помощью редактора Notepad, написать собственные html-страницы с произвольным текстом, используя все описанные в работе возможности HTML. При создании страниц использовать картинки из директории images.

    1. Создать html-страницу и разместить на ней несколько картинок (3-4 штуки). Продемонстрировать возможности HTML по размещению картинок внутри текста. Сохранить документ в файл page1.htm.

    2. Создать html-страницу, фоном к которой служит картинка. Разместить на странице текст и ещё одну картинку. При выборе картинки для фона учитывать наличие у неё свойства стыковки с собой по границам. Сохранить документ в файл page2.htm.

    3. Создать html-страницу, содержащую баннер. В качестве другого сайта использовать одну из ранее разработанных html-страниц. Обеспечить выделение баннера жирной рамкой. Сохранить документ в файл page3.htm.

    4. Используя картинки ROWBOAT_small.gif и ROWBOAT_big.jpg или SUPERAV_small.gif и SUPERAV_big.jpg, создать html-страницу, позволяющую просмотреть увеличенное изображение при щелчке мышкой на маленьком изображении. При этом написать ТОЛЬКО ОДНУ (!!!) html-страницу. Сохранить документ в файл page4.htm.

  5. Продемонстрировать функционирование разработанных html-страниц преподавателю.

  6. Оформить отчет по результатам выполнения лабораторной работы.

  7. Ответить на вопросы преподавателя.

Требования к отчету

Отчет должен содержать:

  1. название и цель работы;

  2. краткие сведения о формате html-документа, средствах HTML, использованных при выполнении работы.

  3. тексты разработанных html-страниц.

© Серёгин А. Ю., МИЭТ, 2005