- •Конспект лекцій з дисципліни
- •Лекція 1. Принципи організації глобальної мережі Інтернет. Введення в Веб-технології: структура та принципи Веб.
- •Предмет курсу
- •Характеристика Інтернет
- •Стек протоколів tcp / ip
- •Система доменних імен dns
- •Структура і принципи www
- •Проксі-сервери
- •Протоколи Інтернет прикладного рівня
- •Лекція 2. Принципи побудови Веб-сайтів. Структура Веб застосуваннь. Характеристика мови html.
- •Історія розвитку html
- •Принципи гіпертекстової розмітки
- •Групи тегів нтмl
- •Лекція 3. Структура html-документа і елементи розмітки заголовка документа.
- •Призначення заголовка
- •Відображення змісту елемента title
- •Основні контейнери заголовка
- •Елемент розмітки head
- •Елемент розмітки title
- •Елемент розмітки base
- •Елемент розмітки meta
- •Елемент розмітки link
- •Елемент розмітки style
- •Елемент розмітки script
- •Лекція 4. Контейнери тіла документа.
- •Теги тіла документа
- •Тіло документа - контейнер body
- •Теги управління розміткою Заголовки
- •Атрибут аlign
- •Теги управління відображенням символів
- •Теги, що управляють формою відображення
- •Верхні і нижні індекси
- •Атрибут sizе
- •Атрибут соlоr
- •Створення списків в html
- •Атрибути маркерів у ненумерований списку
- •Коментарі в мові html
- •Гіпертекстові посилання
- •Лекція 5. Графіка.
- •Використання графіки в html.
- •Атрибут src
- •Атрибут alt
- •Атрибут аlign
- •Формати графічних файлів
- •Активні зображення
- •Зображення в мініатюрі
- •Лекція 6. Таблиці html.
- •Засоби опису таблиць в html
- •Створення таблиць в html
- •Атрибут nowrap
- •Атрибут соlspan
- •Атрибут rowspan
- •Атрибут widтн
- •Застосування порожніх клітинок
- •Атрибут сеllраdding
- •Атрибути аlign і valign
- •Атрибут border
- •Атрибут cellspacing
- •Атрибут bgcolor
- •Атрибут background
- •Використання таблиць в дизайні сторінки
- •Лекція 7. Використання html-форм
- •Html-Форми
- •Завдання форми - елемент form
- •Атрибут cols
- •Атрибут name
- •Атрибут rows
- •Алгоритм роботи фреймів
- •Створення простої сторінки з фреймами
- •Завдання фреймової структури
- •Підготовка вмісту фрейма
- •Підготовка фрейму main
- •Атрибути rows і соls
- •Атрибут rows
- •Атрибут сols
- •Атрибут nаме
- •Атрибут маrginwidth
- •Атрибут маrginheight
- •Атрибут scrolling
- •Атрибут noresize
- •Атрибут srс
- •Атрибут таrgет
- •Вкладені і множинні кадрові структури
- •Лекція 9. Призначення і застосування каскадних таблиць стилів css
- •Призначення css
- •Способи застосування css
- •Перевизначення стилю
- •Елемент style
- •Посилання на зовнішній опис
- •Імпорт опису стилів
- •Селектор - ім'я елемента розмітки
- •Селектор - ім'я класу
- •Селектор - ідентифікатор об'єкта
- •Спадкування й перевизначення
- •Лекція 10. Блокові і стрічкові елементи css
- •Блокові і стрічкові елементи
- •Елемент div
- •Елемент span
- •Властивості блоків
- •Відступи (margin)
- •Набивання (padding)
- •Рамка (border)
- •Обтікання блоку тексту
- •Лекція 11.Позиціонування у css
- •Координати і розміри
- •Абсолютні координати
- •Відносні координати
- •Лінійні розміри блоку
- •Управління видимістю
- •Порядок накладення і область видимості
- •Порядок накладення блоків. Z-index
- •Область видимості блоку. Clip
- •Лекція 12. Призначення та застосування JavaScript.
- •Метод join ()
- •Метод reverse ()
- •Метод sort ()
- •Оператори мови
- •Лекція 14. Об'єктна модель броузера.
Активні зображення
Активні зображення (image maps), або зображення, чутливі до клацаннях миші, дозволяють створити на вузлі графічні меню довільної форми. Активне зображення - це зображення з так званими активними областями (hot spots), які посилаються на URL інших сторінок або вузлів.
Є два методи формування активних зображень: на сервері і у клієнта. Зображення першого типу використовують сервер для того, щоб знайти відповідний даній активної області URL і передати на браузер потрібну сторінку. Активні зображення, що працюють на клієнтській машині, задають інформацію про активну області на НТМL-сторінці, так що браузер сам з'ясовує, які області є активними, і запитує з сервера відповідну сторінку.
Активні зображення, що працюють у клієнта, мають кілька переваг. По-перше, сторінки з ними можна перенести на інший сервер. По-друге, серверу не доводиться виконувати зайву роботу (наприклад, переглядати всю інформацію про активні областях), тобто навантаження на сервер зменшується. При використанні працюють на сервері активних зображень у каталозі СGI-bin сервера повинен бути відповідний сценарій. З міркувань безпеки багато системні адміністратори не записують сценарії в каталог СGI-bin. Тому більш детально ми розглянемо створення активних зображень у клієнта.
Створення активного зображення. Процес створення активного зображення складається з двох етапів. Спочатку необхідно визначити на картинці області, які потрібно зробити активними, а потім співвіднести їх з посиланнями на інші URL. Активні області задаються перерахуванням їхніх координат (у пікселях). Все це можна зробити вручну, визначивши координати кутів активних областей, але набагато простіше скористатися якою-небудь програмою, наприклад МарЕdit.
Визначити карту легко. Потрібно відкрити в МарEdit HTML-файл, що містить зображення, на якому потрібно створити активні області, після чого вибране зображення буде завантажено в робоче вікно. Потім слід вибрати тип активної області (квадрат, трикутник і коло), клацнути і потягнути мишкою, позначивши границю області. Програма автоматично проводить запис в HTML-файл, що описує границі активної області. Потім цій галузі потрібно приписати URL. У будь-яких місцях зображення можна намалювати активні області та визначити для кожної з них URL. Важливо залишати між областями небагато місця, щоб при читанні бути впевненим, що активізується правильна посилання. Межі активних областей задаються координатами кутів прямокутника і багатокутника або центру і радіусу кола. Якщо ви вирішили робити активне зображення у клієнта, Map Edit постачає дані тільки для тегів <MAP>. Вам доведеться самим задати тег зображення з атрибутом USEMAP і помістити його після тега </ MAP>. Не забудьте перед ім'ям карти в атрибуті USEMAP записати символ "#" наступним чином:
<IMG SRC="mymap.gif" USEMAP="#sitemap">
Активні зображення в клієнта працюють незалежно від програмного забезпечення сервера і не перестануть функціонувати, навіть якщо файли будуть перенесені на інший сервер. Таким зображень потрібні тільки дві речі: браузер, що підтримує HTML 3.0, і інформація про карту, записана в HTML-файлі. Наведемо приклад активних зображень.
<IMG SRC="image.gif" ALT="Ізображенія" USEMAP="#imap">
<MAP NAME="imap">
<AREA SHAPE = "rect" COORDS = "0,0,100,100" HREF = "http://www.snu.edu.ua/help/../index.html">
<AREA SHAPE = "rect" COORDS = "100,0,200,100" HREF = "http://www.snu.edu.ua/shop / ../index.html ">
<AREA SHAPE="default" nohref>
</ MAP>
