Ћекции.ќрг


ѕоиск:




 атегории:

јстрономи€
Ѕиологи€
√еографи€
ƒругие €зыки
»нтернет
»нформатика
»стори€
 ультура
Ћитература
Ћогика
ћатематика
ћедицина
ћеханика
ќхрана труда
ѕедагогика
ѕолитика
ѕраво
ѕсихологи€
–елиги€
–иторика
—оциологи€
—порт
—троительство
“ехнологи€
“ранспорт
‘изика
‘илософи€
‘инансы
’ими€
Ёкологи€
Ёкономика
Ёлектроника

 

 

 

 


Ћекци€ 10 √рафика, √иперссылки




√рафика Ц одна из самых привлекательных особенностей World Wide Web. ’орошо оформленные сайты, т.е. сайты, на страницах которых в соответствии с замыслом дизайнера размещены графические изображени€, привлекают к себе большее число посетителей, чем сайты, хран€щие только текстовую информацию.

÷ель лекции: ѕознакомитьс€ с графическими возможност€ми HTML. ѕон€ть, как правильно вставл€ть рисунки в документ HTML. –азобратьс€ что такое гиперссылки и дл€ чего они нужны.

ћногообразие достигаетс€ путем размещени€ в различных позици€х HTML Ц документа изображений, которые хран€тс€ на диске в файлах графического формата, в которых любое изображение представлено в виде битовой карты Ц пр€моугольной матрицы элементарных цветных точек, называемых пиксел€ми. ¬се, что вы видите на экране своего монитора, достигаетс€ за счет того, что операционна€ система мен€ет цвета различных пикселей матрицы экрана.

Ќа сегодн€ существует множество графических форматов файлов, но в WWW используютс€ только файлы формата GIF JPEG.

‘ормат GIF (Graphic Interchange Format Ц формат обмена графическими данными) изначально разрабатывалс€ дл€ пользователей сетей. √рафика, сохран€ема€ в этом формате, ограничиваетс€ 256 цветовыми оттенками. Ётого маловато дл€ качественной цветной фотографии, но вполне подходит дл€ оформлени€ фона. Ётот формат обладает двум€ важными свойствами, которые не поддерживаютс€ другими форматами: прозрачность (transparency) и анимаци€ (animation).

ѕрозрачность задаетс€ следующим образом: в специальной программе какой-то цвет дл€ файла этого формата назначаетс€ Ђпрозрачнымї и тогда при выводе на экран изображени€, которое хранитс€ в таком GIF Ц файле, пиксели указанного цвета будут игнорироватьс€, то есть не выводитьс€. Ёто дает возможность поверх фона Ђнакладыватьї сложные изображени€.

јнимаци€ заключаетс€ в том, что в пределах одного GIF Ц файла сохран€ютс€ несколько изображений и при выводе браузером последовательно показываютс€ в одной области экрана, что создает эффект простейшей мультипликации.

‘ормат JPEG (Joint Photographic Experts Group Ц ќбъединенна€ группа экспертов по изображени€м) €вл€етс€ общим именем дл€ набора форматов. ¬се семейство этих форматов основано на математических алгоритмах сильного сжати€ изображени€. ѕричем, чем больше сжатие, тем менее качественным по отношению к оригиналу получаетс€ результирующее изображение. Ќо в целом, это формат позвол€ет сжать графический файл в дес€тки раз.

10.1 ¬недрение графики в HTML Ц документ

–ассмотрим, как изображени€ из графических файлов попадают в рабочее поле Web Ц браузера.

¬о-первых, изображение может быть использовано в качестве фона. ”же известный нам тэг <BODY> имеет атрибут BACKGROUND:

<BODY BACKGROUND=ФURL GIF Ц или JPEC Ц файлУ>

≈сли графический файл (с расширением GIF Ц или JPEC) расположен в том же каталоге, то достаточно просто указать его им€ с расширением, но если он хранитс€ в другом месте, то дл€ него требуетс€ указать полный путь доступа, а в —ети Ц URL, например, так:

<BODY BACKGROUND =Фhttp://www.tutorial.ru/pic/back.gifФ>

¬озможен случай, когда графический файл расположен в подкаталоге текущего каталога. ¬ этом случае достаточно просто указать им€ подкаталога и им€ файла.

<BODY BACKGROUND=Фpictures/back.gifФ>

ќбращаю ваше внимание, что Web в качестве символа разделител€ в полном имени файлов примен€етс€ обратный слэш /, а не тот который используетс€ в системе Windows. Ёто требование системы Unix, под управлением которой работает большинство серверов »нтернета. ≈ще одной особенностью этой системы €вл€етс€ то, что в ней различаютс€ строчные и прописные символы при указании URL, это важно, игнорирование этого момента может привести к ошибке.

Ќапример, с точки зрени€ Windows, все ниже приведенные имена указывают на один и тот же файл, расположенный в каталоге pictures:

Ј pictures/back.gif

Ј PICTURES/back.gif

Ј pictures/BACK.GIF

Ј Pictures/Back.gif

Ќо система Unix будет искать различные файлы, расположенные в различных каталогах и может не найти указанный файл. —амый простой способ не ошибитьс€ всегда, задавать имена файлов и каталогов, использу€ только строчные буквы латинского алфавита, и обходитс€ простыми словами английского €зыка (или вовсе транскрипци€ми).

¬недренной фоновое изображение, если его размеры меньше рабочего пол€, будет размножено браузером так, что заполнит весь экран. ≈сли сам HTML Ц документ достаточно большой и дл€ его просмотра приходитс€ прибегать к помощи полос прокрутки (скроллинг), то фоновое изображение (особенно в том случае, когда оно многократно дублировано), будет перемещатьс€ вместе с текстом. ≈сли по какой-то причине необходимо оставл€ть фон неподвижным в момент прокрутки всего документа, следует воспользоватьс€ параметром BGPROPERTIES=ФFIXEDФ:

<BODY BACKGROUND=Фbg.gifФ BGPROPERTIES=ФFIXEDФ>

ƒл€ прив€зки изображений к HTML Ц документу существует одинарный (не имеющий обрамл€ющей пары) тэг <IMG> наиболее проста€ форма этого тэга следующа€:

<IMG src=ФURLФ>

«десь URL €вл€етс€ адресом графического файла (или полным его именем), содержащего изображение. ¬се, что сказано дл€ имен, используемых в URL тэга <BODY>, справедливо и дл€ тэга <IMG>.

” этого тэга есть еще несколько атрибутов:

Ј ALING Ц ”станавливает расположение текста по отношению к изображению наверху (TOP), посередине (MIDDLE) или внизу изображени€ (BOTTOM).

Ј ALT Ц ќпредел€ет текст, который будет выводитьс€ Ђпод изображениемї, то есть в той пр€моугольной области, котора€ должна быть закрыта изображением. Ётот же текст будет выводитьс€ под указателем мыши, если его на несколько секунд оставить неподвижным над изображением.

Ј WIDTH Ц задает ширину изображени€ в пиксел€х.

Ј HEIGHT Ц задает высоту изображени€ в пиксел€х.

Ј BORDER Ц задает ширину обрамл€ющей изображение рамки.

јтрибуты WIDTH и HEIGHT выполн€ют важную функцию. ≈сли они не указаны, то браузер сам вынужден определ€ть размер внедр€емого графического файла.

—ледующий пример демонстрирует вывод изображени€ формата 25х70 пикселей без рамки, хран€щегос€ в файле demo_picture.gif. »зображение физически размещено не на удаленном компьютере, а том же каталоге, что и HTML Ц документ, в котором установлена ссылка на это изображение.

<IMG SRC =Фdemo_picture.gifФ WIDTH=25 HEIGH=70 BORDER=0 ALT=Ф„удесна€ картинаФ>

Ќа листинге представлен текст HTML Ц документа, оформленного с использованием фонового изображени€ и некоторой фотографии.

Ћистинг 1 ¬недрение графического файла (рис.10.1)

<HTML>

<HEAD><TITLE>‘отографи€</TITLE></HEARD>

<BODY BACKGROUND=vts.jpg><CENTER>

<IMG SRC=green.jpg WIDTH=486 HEIGHT=400 BORDER=0 ALT=Ф√реци€Ф>

</CENTER> </BODY>

</HTML>

–ис. 10.1 Ѕраузер после загрузки HTML Ц документа

Ћистинг 2 (рис.10.2)

<HTML>

<HEAD><TITLE>‘отографи€</TITLE></HEARD>

<BODY BACKGROUND=pictures/IMG_0119.JPG><CENTER>

<IMG SRC=IMG_0165.JPG WIDTH=486 HEIGHT=400 BORDER=0 ALT=Ф√реци€Ф>

</CENTER> </BODY>

</HTML>

–ис.10.2 ¬ыполнение листинга 2

HTML допускает любое расположение тэгов и их атрибутов, так что можно его форматировать по собственному вкусу. »спользу€ тэг <IMG> можно внедр€ть в документ также и динамические изображени€ Ц файлы формата AVI. Ётот формат позвол€ет работать с оцифрованными видеоклипами. ƒл€ внедрени€ AVI.- клипа используетс€ следующий набор атрибутов:

Ј DYNSRC Ц «адает URL AVI Ц файла.

Ј WIDTH Ц Ўирина изображени€ в пиксел€х.

Ј HEIGHT Ц ¬ысота изображени€ в пиксел€х

Ј START Ц «адает момент Ђвключени€ї клипа. ћожет принимать значение FILEOPEN, то есть прокрутка начинаетс€ сразу же с момента загрузки документа или MOUSEOVER, когда Ђвключениеї происходит при щелчке мыши.

Ј LOOP Ц «адает количество повторов клипа путем указани€ целого числа. ≈сли вместо числа поставить значение INFINITE, то клип будет Ђпрокручиватьс€ї бесконечное число раз.

Ј LOOPDELAY Ц «адает задержку в миллисекундах между повторами изображени€.

ѕример, загрузки клипа, хран€щегос€ в файле clip.avi. ѕрокрутка начинаетс€ сразу же, бесконечное число раз с задержкой 3 мс между каждым циклом:

<IMG dynsrc=clip.avi WIDTH=150 HEIGHT=120 START=ФfileopenФ LOOP=ФinfiniteФ LOOPDELAY=3>





ѕоделитьс€ с друзь€ми:


ƒата добавлени€: 2015-01-29; ћы поможем в написании ваших работ!; просмотров: 1079 | Ќарушение авторских прав


ѕоиск на сайте:

Ћучшие изречени€:

Ќаука Ч это организованные знани€, мудрость Ч это организованна€ жизнь. © »ммануил  ант
==> читать все изречени€...

1926 - | 1729 -


© 2015-2024 lektsii.org -  онтакты - ѕоследнее добавление

√ен: 0.011 с.