- •Модуль 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 балів. Завдання для індивідуальної роботи.
- •Рекомендована література
- •Фоменко Андрій Вікторович Практикум зі створення
Завдання до лабораторної роботи
Завдання 1.
Створити в папці MYWEB папку БЛОКИ й скопіювати в неї 9 графічних файлів, бажано:
C:\ Program Files\ Microsoft Office\ CLIPART\ Publisher\ Backgrounds\ J0143753.GIF,
C:\Program Files\ Microsoft Office\ CLIPART\ Publisher\ Backgrounds\ WB00780L.GIF,
C:\ Program Files\ Microsoft Office\ CLIPART\PUB60COR\ J0382966.JPG,
C:\ Program Files\ Microsoft Office\ CLIPART\PUB60COR\ J0384888.JPG;
C:\Program Files\ Microsoft Office\ CLIPART\PUB60COR\ J0341738.JPG;
C:\ Program Files\ Microsoft Office\ CLIPART\ PUB60COR\ SO01236_.WMF;
C:\Program Files\ Microsoft Office\ CLIPART\ PUB60COR\ SO00168_.WMF
Останні два файли перетворити у формат JPG за допомогою будь-якого графічного редактора.
Створити за допомогою редактора web- сторінок у цій папці три аркуші стилів text.css, block.css, img.css.
Тексти файлів до першого завдання
Файл text.css
#zagolov1 { font-family:"Times New Roman", Times, serif; font-size:24px; font-style:italic; font-weight:700; text-align:center; color:#FF0033; }
#obikn { font-family:"Courier New", Courier, mono; font-size:16px; font-style:normal; font-weight:500; text-align:justify; text-indent:25px; line-height:1.3; letter-spacing:3px; word-spacing:6px; color:#0033FF}
#base { font-family:Georgia, "Times New Roman", Times; font-size:16px; font-style:oblique; font-weight:500; text-align:justify; text-indent:15px; line-height:1.2; letter-spacing:1px; word-spacing:3px; color:#000066;}
#title {font:Geneva, Arial, Helvetica; font-size:40px; font-style:oblique; font-weight:900; letter-spacing:4px; word-spacing:7px;color:#FF3300}
Файл block.css
.first { margin-left:10px;}
.second { margin-left:14px; margin-top:-44px;}
.osnov { margin-left:10px; position:relative; left:5px; top:10px; width:80%; background-image:url(J0143753.GIF); background-repeat:repeat-x; background-color:#FFFFCC; border-color:#0033FF; border-style:ridge; border-width:8px}
.base { margin-left:15px; position:relative; left:5px; top:15px; background-image:url(J0143749.GIF); width:70%; border-color:#0099FF; border-style:outset; border-width:5px}
body { background-image:url(WB00780L.GIF); font-size:16px; font-style:normal; font-weight:200; color:#000099;}
Файл img.css
#pict1 { width:20%; background-color:#3399FF; border-color:#CC00CC; border-width:10; border-style:ridge; text-align:center;}
Завдання 2.
Створіть у цій папці БЛОКНОТ два html файли з іменами index.htm і present.htm.
Тексти файлів до завдання 2
Файл index.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
<link href="text.css" type="text/css" rel="stylesheet">
<link href="img.css" type="text/css" rel="stylesheet">
<link href="block.css" type="text/css" rel="stylesheet">
</head>
<body>
<div align="center" class="first" id= "title"style=" color:#FF99CC"> Валентинов день
</div>
<div align="center" class="second" id="title" style="color:#CC0000" >Валентинов день
</div>
<div id="zagolov1"> ця сторінка присвячується всім
<br>
<span id="title" style="color:#0066FF; font-family:'Times New Roman', Times, serif; text-decoration:blink">хто любить і любимо
</span>
</div>
<div id="obikn" class="osnov" style="width:545pt; ">
<p id="zagolov1" align="center">Історія дня Святого Валентина
</p>
Створення першої валентинки приписується Чарльзу, Герцогові Орлеанскому (1415 рік), що сидів у цей час у в'язниці, в одиночній камері, і що вирішив боротися з нудьгою шляхом писання любовних послань власній дружині. Однак, найбільшого розквіту валентинки досягли до вісімнадцятого століття. </div>
<img src="SO00168_.jpg" id="pict1" style="width:17%; position:absolute; left:750px; top:8px ">
<img src="SO00168_.jpg" id="pict1" style="width:17%; position:absolute; left:750px; top:550px ">
<img src="SO01236_.jpg" id="pict1" style="width:17%; height:170pt; position:absolute; left:770px; top:240px ">
<a href="present.htm"><img src="J0341738.JPG" id="pict1" style="width:17%; position:absolute; left:50px; top:8px "></a>
<div id="base" class="base" style=" margin-left:60px ">
Час життя й діяльності Валентина збіглися з роком правління римського імператора Клавдія ΙΙ. Для збереження військового духу імператор видав указ, який забороняв легіонерам одружуватись. Не страшачись імператорського гніву, молодий християнський священик Валентин продовжував таємно вінчати закоханих легіонерів. </div>
</body>
</html>
Файл present.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
<link href="block.css" type="text/css" rel="stylesheet">
<link href="img.css" type="text/css" rel="stylesheet">
<link href="text.css" type="text/css" rel="stylesheet">
</head>
<body >
<div align =" center " class = " first " id = " title " style = " color :#003399 " > Зі святом мої дорогі
</div>
<div align="center" class="second" id="title">Зі святом мої дорогі
</div>
<div class="osnov" id="base" style="width:38%; text-align:center ">
Мечтал я выразить не раз
<br>
Всё что значишь для меня ты,
<br>
Искал неповторимых фраз,
<br>
Искал слова, что так богаты.
</div>
<a href="index.htm"><img src="J0382966.JPG" id="pict1" title="Валентинка" style = " position:absolute ; left: 65%;top: 52%">
</a>
<a href="index.htm"><img src="J0175428.JPG" id="pict1" title="Валентинка" style = " position:absolute ; left: 15%;top: 52%">
</a>
<div class="osnov" id="base" style=" position:absolute; left:57%; top: 12%; width:38%; text-align:center ">
Любовь, как роза, роза красная,
<br>
Цветет в моем саду.
</div>
<div class="osnov" id="base" style="width:38%; pos
ition:absolute; left:29%; top:71%; text-align:center ">
Будь счастлива, моя любовь,
<br>
Прощай и не грусти.
<br>
Вернусь к тебе, хоть целый свет
<br>
Пришлось бы мне пройти!
<br>
<span style="color:#CC0000; text-align:right; font-style:italic " > Роберт Бернс "ЛЮБОВЬ"</span> <br> </div>
<a href="index.htm"><img src="J0384888.JPG" id="pict1" title="Валентинка" style="position:absolute; left:40%;top:34% "></a>
<div id="zagolov1" style=" text-decoration:blink; position:absolute; left:10%; top:80%; width:100pt; color:#FF0000">Любов це таке почуття...
</div>
<div id="zagolov1" style=" text-decoration:blink; position:absolute; left:75%; top:80%; width:100pt; color:#FF0000">Любов це таке почуття...</div>
</body>
</html>
Завдання 3.
Перегляньте документи index.htm і present.htm.
Створіть ще один файл стилів MY_STYLE.css. Додайте в нього свій стиль блоку, свій стиль тексту.
Створіть ще один файл стилів MY_FILE.html. Підключіть до нього 4 стилі, внесіть блоки із графікою, текстом, використовуючи різні стилі, розташуйте на сторінці, аналогічно файлу present.htm.
Контрольні питання:
Які ви знаєте види позиціонування і в чому їхнє розходження?
Принципи спадкування й каскадування?
Яким чином здійснюється вирізання областей?
Як можна організувати зміну шарів?
Визначите можливості властивості виводу елемента на екран?