 |
|
|
Архитектура Астрономия Аудит Биология Ботаника Бухгалтерский учёт Войное дело Генетика География Геология Дизайн Искусство История Кино Кулинария Культура Литература Математика Медицина Металлургия Мифология Музыка Психология Религия Спорт Строительство Техника Транспорт Туризм Усадьба Физика Фотография Химия Экология Электричество Электроника Энергетика |
Графічні гіперпосилання ⇐ ПредыдущаяСтр 2 из 2
Зображення, як і текст, можна використовувати як посилання. Для цього тег <IMG>необхідно помістити між тегами <А> і </А>. Зображення-посилання має синю рамку, а після наведення на нього вказівника миші той набуває такої самої форми, що й у випадку текстового посилання. ПрикладВикористання зображень як посилань Розглянемо приклад веб-сторінки, що містить малюнки, які є гіперпосиланнями. <HTML> <TITLE>Птахи</TITLE> <BODY BACKGROUND="1.jpg"> <А HREF="gorobci.html"><IMG SRC="gorobci.jpg"></A> <A HREF="flamingo.html"><IMG SRC="flamingo.jpg"></A> </BODY> </HTML> Малюнок gorobci.jpgпов'язаний із файлом gorobci.html,а малюнок flamingo.jpg— із файлом flamingo.html. Ще одним способом використання малюнків як гіперпосилань є створення графічних кнопок переходу. Приклад.Використання кнопок переходу Іноді великий за обсягом текст поділяють на частини, кожна з яких розташована на окремій веб-сторінці. У нижній частині поточних сторінок розміщують зображення двох стрілок: Вперед і Назад. Їх настроюють як гіперпосилання на наступну і попередню веб-сто- рінки — так, як це показано у прикладі. <HTML> <TITLE>PAGE10</TITLE> <BODY BACKGROUND="1.jpg"> <IMG SRC="2.jpg" ALIGN=left HSPACE=10 VSPASE=10> Блакитні води океану та коралові рифи, ласкаве сонце і білосніжний прибережний пісок, фантастичний підводний світ і казкові птахи, буяння барв сходів і заходів, непрохідні ліси і п'янкий запах орхідей... Сприятливий клімат Острова Свободи дає можливість туристам відвідувати його цілий рік. Тут немає зайвої вологості, а спека не така страшна завдяки постійним подувам бризів із океану. Середньорічна температура повітря й води становить + 26-28°С. <BR> <А HREF="page9.html"><IMG SRC="nazad.jpg"></A> <А HREF="pagell.html"><IMG SRC="vpered.gif"></А> </BODY> </HTML> Кнопка Назад пов'язана з файлом page9.html, а кнопка Вперед —з файлом page11.html Під час створення сайтів зображення часто вставляють у комірки таблиці. У цьому випадку малюнки будуть розташовані на екрані так, як задумав дизайнер веб-сайту. У такий спосіб створюють, наприклад, фотогалереї: зображення невеликих розмірів вміщують у комірки таблиці та роблять їх гіперпосиланнями, кожне з яких пов'язане з тим самим фото, але більшого розміру. Приклад.Створення фотогалереї Створимо у HTML-документі таблицю, в комірки якої вставимо ілюстрації до веб-сайту навчального закладу. <HTML> <BODY> <TABLE> <TR><TD><A HREF="foto/l.html" TARGET="_blank"><IMG SRC="foto/l.jpg" WIDTH=180 HEIGHT=150 ALT="Тренажерний зал"> </TD> <TD><A HREF="foto/2.html" TARGET="_blank"><IMG SRC="foto/2.jpg" WIDTH=180 HEIGHT=150 ALT="Гімнастика в нашій школі"></TD> <TD><A HREF="foto/3.html" TARGET="_blank"><IMG SRC="foto/3.jpg" WIDTH=180 HEIGHT=150 ALT="HapiBHi з чемпіонами"></TD> <TD><A HREF="foto/4.html" TARGET="_blank"><IMG SRC="foto/4.jpg" WIDTH=180 HEIGHT=150 ALT="KBK"></TD></TR> <TR><TD><A HREF="foto/5.html" TARGET="_blank"><IMG SRC="foto/5.jpg" WIDTH=180 HEIGHT=150 ALT="Шкільний xop"></TD> <TD><A HREF="foto/6.html" TARGET="_blank"><IMG SRC="foto/6.jpg" WIDTH=180 HEIGHT=150 ALT="Haші таланти"></TD> <TD><A HREF="foto/7.html" TARGET="_blank"><IMG SRC="foto/7.jpg" WIDTH=180 HEIGHT=150 ALT="Відкриття Золотої пекторалі"></ТП> <TD><A HREF="foto/8.html" TARGET="_blank"><IMG SRC="foto/8.jpg" WIDTH=180 HEIGHT=150 ALT=" Наші тaлaнти"></TD></TR> </TABLE> </BODY> </HTML> Усі зображення розміщені в поточній папці в підкаталозі foto. Кожний малюнок, вставлений у комірку таблиці, є посиланням, що вказує на HTML-документ, тіло якого містить тег вставляння того самого малюнка-гіперпосилання. Наведемо приклад одного з таких документів — 3.html. <HTML> <TITLE>Нарівні з чемпіонами</TITLE> Використання зображень у веб-документах 107 <BODY> <IMG SRC="3.jpg" WIDTH=900 HEIGHT=750> </BODY> </HTML> Отже, малюнок у комірці таблиці та пов'язаному з ним HTML- документі однаковий, але в таблиці його розміри значно менші реальних — 180x150 пікселів. Кожний такий малюнок супроводжується альтернативним текстом. HTML-документи, пов'язані з гіперпосиланнями, відкриваються в окремому вікні: цього досягають наданням атрибуту TARGET значення blank. Зображення в них мають суттєво більші розміри, наприклад, ширина — 900 пікселів, а висота — 750. Розміри малюнка, що відкривається в окремому вікні, підбирають так, щоб він мав ширину та висоту, достатні для детальнішого ознайомлення з ним. При цьому слід пильнувати, щоб не відбулося спотворення картинки, тому часто розміри залишають реальними, не використовуючи атрибутів WIDTH та HEIGHT._
Поиск по сайту: |