- •Модуль 1. Основи html. Лабораторна робота №1 html - основні поняття, структура документа
- •Основні теоретичні відомості.
- •1. Основні поняття
- •2. Правила запису тегів:
- •3. Структура документу
- •4. Визначення й оформлення функціональних розділів документа
- •5. Форматування html – документа Вирівнювання:
- •Індекси:
- •Параметри шрифту:
- •Існують наступні логічні стилі:
- •Існують наступні фізичні стилі:
- •Завдання до лабораторної роботи
- •Лабораторна робота №2 Робота з графічними зображеннями на Web-сторінці. Списки
- •Основні теоретичні відомості
- •1. Використання графічного зображення в якості фону
- •2. Формати графічних файлів для www
- •3. Вставка графічних зображень (елемент img та його атрибути)
- •4. Списки
- •Маркірований
- •Нумерований
- •Список визначень
- •Вкладені списки
- •Завдання до лабораторної роботи
- •Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання.
- •1. Основні теоретичні відомості.
- •2. Створення гіперпосилань
- •3. Види посилань
- •4. З'єднання з іншими документами
- •5. Звертання до певних розділів інших документів
- •6. Використання зображення як посилання
- •Завдання до лабораторної роботи
- •Лабораторна робота №4 Створення таблиць. Робота з атрибутами таблиці.
- •Основні теоретичні відомості
- •1. Загальна структура таблиці
- •2. Завдання загальних параметрів таблиці
- •3. Форматування даних у таблиці, оформлення рамок (форматування рядків і комірок)
- •1. Вирівнювання даних у стовпцях таблиці
- •2. Завдання кольору рамок таблиці
- •3. Завдання фонового малюнка для таблиці
- •4. Структурування таблиці
- •Завдання до лабораторної роботи
- •Лабораторна робота №5 Створення фреймів Настроювання атрибутів фреймів. Використання посилань, створення фреймового меню.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Елемент завдання фреймів frameset та його атрибути
- •3. Вміст фреймів (елемент frame)
- •4. Вкладені фрейми
- •5. Інші атрибути елемента frameset
- •6. Атрибути елемента frame
- •2. Посилання й навігація
- •3. Плаваючі фрейми (елемент iframe)
- •Завдання до лабораторної роботи
- •Лабораторна робота №6 Карти зображень. Робота зі звуком.
- •Основні теоретичні відомості
- •1. Основні поняття
- •2. Створення карти посилань в html
- •3. Створення карт посилань за допомогою редактора Dreamweaver
- •Робота з мультимедіа
- •Вбудовування звукових файлів в Web-сторінку
- •Фонові звуки
- •Рухомий текст
- •Завдання до лабораторної роботи
- •Модуль 2. Створення інтерактівності. Css. Dhtml. Лабораторна робота №7 Робота з формами
- •Основні теоретичні відомості
- •2. Створення елементів керування
- •Список, що розкривається:
- •Поле - список
- •Список із множинним вибором
- •Завдання до лабораторної роботи
- •Основні теоретичні відомості
- •1. Поняття про аркуші стилів
- •2. Поняття про внутрішні та зовнішні аркуші стилів
- •3. Вбудований стиль (атрибут style)
- •4. Заголовний стиль (елемент style)
- •6. Види селекторів
- •Стильові властивості
- •1. Значення властивостей
- •2. Властивості шрифтів
- •3. Властивості тексту
- •4. Властивості кольору і фону
- •Завдання до лабораторної роботи
- •Лабораторна робота №9 Зовнішні аркуші стилів . Стильові властивості
- •Основні теоретичні відомості
- •2. Звертання до зовнішнього аркуша стилів (елемент link)
- •3. Запис css-правил.
- •Стільові властивості (продовження)
- •1. Властивості блоку
- •2. Властивості списків
- •3. Інші групи стильових властивостей
- •4. Псевдокласи й псевдоелементи
- •Завдання до лабораторної роботи
- •Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти
- •Основні теоретичні відомості
- •1. Правила спадкування властивостей
- •2. Селектори нащадків
- •3. Каскади стилів
- •4. Пріоритети стилів
- •5. Шари й позиціонування елементів
- •6. Вирізання області (властивість clip)
- •Завдання до лабораторної роботи
- •Лабораторна робота № 11. Dhtml.
- •Завдання до лабораторної роботи
- •Вимоги до звіту та критерії оцінювання
- •Критерії оцінювання лабораторних робіт:
- •Критерії оцінювання індивідуальних робіт:
- •Для отримання заліку необхідно виконати 70% завдань і набрати не менше 145 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
5. Звертання до певних розділів інших документів
Гіперпосилання можуть також використовуватися для з'єднання з певними розділами документів. Припустимо, ми хочемо з'єднати документ А с першим розділом документу В, для чого нам необхідно створити іменоване гіперпосилання в документі B. Наприклад, таке:
<A name = "Розділ 1">Глава 1 </a>.
Таким чином ми створюємо закладку в документі В на яку треба перейти.
Тепер, описуючи посилання в документі A, треба включити не тільки ім'я файлу "document.html", але також і ім'я гіперпосилання, відокремлюване символом (#). Наприклад,
<A HREF = "document.html#глава1"> Глава 1 </A>.
Тепер «клацнувши» на слові «Глава 1» у документі А, ви перейдете безпосередньо в Главу 1 у документі B.
6. Використання зображення як посилання
Для використання зображення як посилання зображення необхідно включити усередину тегу-контейнера <A>
Наприклад:
<A href = E:\Documents and Settings \vika \Мої документи \HTML \Мерфи.doc > <IMG src=D:\distr_fom\FOTO\веб\OTHER\book.gif> </A>
Завдання до лабораторної роботи
Завдання №1.
За допомогою редактора Dreamweaver створити два зв'язаних гіперпосиланнями Web-документа, у яких були б використані усі вивчені раніше структури.
Тема першого документа: «Про себе й своїх друзів». Тема другого документу: «Мої захоплення».
Документи назвіть – iAndFrands.html, passion.html відповідно.
Завдання №2.
У документ passion.html внести маркірований список з маркером у вигляді зображення й організувати систему якорів і навігації по внутрішніх гіперпосиланнях.
Завдання №3
1. Створіть на диску D папку Web. Створить цю папку папкою сайту за допомогою Dreamweaver. В папці Web створіть Web-сторінку, яка повинна відображати список знаків зодіаку. Список знаків зодіаку представте у вигляді маркованого списку. Документ повинен мати назву index.html.
2. За допомогою MS Word створіть два HTM-документа, які будуть відображати інформацію про відповідний знак зодіаку, наприклад документи lion.htm та scorpion.htm. Вставте до створених файлів два довільні зображення. Збережіть створені HTM-документи в папці Web.
3. Створити в документі index.html два гіперпосилання до створених файлів, наприклад, до файлів lion.htm та scorpion.htm відповідно.
4. Добавте на Web-сторінку index.html два абзаци, які містять інформацію про два знаки зодіаку. Створіть гіпертекстові посилання в документі index.html на створені абзаци.
5. Створіть в кінці документу index.html гіпертекстове посилання, на початок документу index.html.
6. Створіть в документі index.html гіпертекстове посилання на будь-який файл, що перебуває на диску D.
Завдання №4
1. Створити на диску D папку Web_2. В папці Web_2 створіть Web-сторінку з назвою reference.html.
2. Добавте до створеної Web-сторінки reference.html два будь яких gif зображення.
3. Змінити перше зображення, виставивши його ширину 180 (висота вираховується автоматично).
4. Змінити друге зображення, зробивши його ширину 80.
5. Створіть в документі reference.html нумерований список, список повинен міститися після першого зображення. Нумерація в списку повинна бути арабськими цифрами.
Приклад:
<OL type=l>
<li> Людина набагато розумніше, ніж йому це треба для щастя.
<li> Нікому не поставити нас на коліна! Ми лежали, і будемо лежати!
<li> Думаю, не помилюся, якщо промовчу.
<li> Прошу послати мене на курси підвищення зарплати.
</OL>
6. Добавте до сторінки reference.html ще один нумерований список, який повинен міститися після попереднього. Нумерація в списку повинна бути великими римськими цифрами і починатися з чотирьох.
Приклад:
<OL type=A>
<li> Життя, звичайно, не вдалася, а в іншому все нормально.
<li> Якщо вам довго не дзвонять родичі або друзі, значить у них всі добре.
<li> Вибачите, що я говорю, коли ви перебиваєте.
<li> Чималої людини можна легко довідатися по тому, як незграбно він робить підлості.
</OL>
7. Відокремити перше зображення від тексту по вертикалі й по горизонталі по 20 пікселів.
8. Добавити до сторінки reference.html третє зображення. Зробити третє зображення в рамці, товщина якої 10 пікселів.
9. Додати до першого зображення альтернативний текст.
10. Зробити наприкінці сторінки посилання у вигляді графічного зображення.
Приклад:
<IMG src=D:\web\малюнок1.gif align=right alt="Простий малюнок" >
Приклад виконання завдання:
<head>
<title> Закони Мерфи </title>
</head>
<body>
<IMG src=D:\web\малюнок1.gif align=right WIDTH=180 HSPACE=20 VSPACE=20 alt="Простий малюнок" >
<OL type=l>
<li> Людина набагато розумніше, ніж йому це треба для щастя.
<li> Нікому не поставити нас на коліна! Ми лежали, і будемо лежати!
<li> Думаю, не помилюся, якщо промовчу.
<li> Прошу послати мене на курси підвищення зарплати.
</OL>
<ol type=I start=5>
<li> Ціль визначає калібр.
<li> Першим здоровається той, у кого слабкіше нерви.
<li> Мудрість не завжди приходить із віком. Буває, що вік приходить один.
</OL>
<OL type=A>
<li> Життя, звичайно, не вдалася, а в іншому все нормально.
<li> Якщо вам довго не дзвонять родичі або друзі, значить у них всі добре.
<li> Вибачите, що я говорю, коли ви перебиваєте.
<li> Чималої людини можна легко довідатися по тому, як незграбно він робить підлості.
</OL>
<br> Мало знати собі ціну-<IMG src=D:\web\малюнок2.gif align=absmiddle WIDTH=80 border=10 bordercolor=red > треба ще користуватися попитом
<p> <IMG src=D:\web\малюнок3.gif align=bottom > Коли дружина зненацька дарує вам краватка - виходить,
<BR> нова норкова шубка їй вже не подобається.
<A href=D:\web\ Мерфи.doc> <IMG src=D:\web\малюнок5.gif></A>
</body>
</html>
Контрольні питання.
Яке призначення редактора Dreamweaver?
Як створити й зберегти Web-документ за допомогою програми Dreamweaver?
Назвіть основні елементи інтерфейсу редактора Dreamweaver?
З яких елементів складається головна панель інструментів?
Як можна підключити додаткові панелі інструментів?
Що таке внутрішнє гіперпосилання? Як вона організується?
Що таке зовнішнє гіперпосилання? Як вона організується?
Що таке абсолютна й відносна адреса файлу?
Як використовувати зображення у вигляді гіперпосилання?