Лабораторна робота 8.
Мета – навчитися
створювати спливаючі підказки, спливаюче вікно із затемненням, додавати ефект сірого відтінку на картинці.
Програмне забезпечення:
–
операційна система
з графічним інтерфейсом – Windows XP
або Windows 7;
–
браузер для роботи
в мережі Інтернет – Google Chrome або Opera;
–
веб-технологія – каскадні таблиці стилів CSS.
ХІД РОБОТИ
Теоретичні відомості
Для виконання лабораторної роботи необхідно повторити
матеріал теми 5.
CSS. Спливаючі підказки
Алгоритм роботи з спливаючими підказками:
1. Створити спливаючу
підказку на веб-сторінці. Спливаючі підказки надають додаткову інформацію,
наприклад, розшифрування або пояснення абревіатури.
Приклад створення
спливаючої підказки (рис. 8.1):
<html>
<head>
<title>Спливаючі
підказки</title>
<style>
a.t
{text-decoration: none; border-bottom: solid 1px red;color: blue;}
a.t span
{display: none;}
a.t:hover
span {background: ivory;
color: blue;
position:
absolute;
display:
block;
left: 60px;
top: 60px;
border:
outset 3px coral;
padding:
5px;}
</style>
</head>
<body>
<a
href="/" class="t">
ЕОМ
<span>Електронно-обчислювальна машина</span></a> – загальна назва для обчислювальних машин, що є електронними (починаючи з перших лампових машин, включаючи напівпровідникові тощо) на відміну від електромеханічних (на електричних реле тощо) та механічних обчислювальних машин.
</body>
</html>
Рис. 8.1.
Спливаюча підказка
CSS. Спливаюче вікно із затемненням
Алгоритм роботи з спливаючим вікном із затемненням:
1. Створити спливаюче
вікно із затемненням.
Приклад створення
спливаючого вікна із затемненням з використанням HTML і CSS:
<html>
<head>
<style>
#window1{
background:
red;
height: 40%;
position:
fixed; }
#window {
background-color:
green;
height: 80%;
position:
fixed;
color:
silver;
width: 90%;}
</style>
</head>
<body>
<h2>Текст</h2><h2>Текст</h2><h2>Текст</h2>
<div
id="window1">
<div
id="window">
<p>Текст
у вікні</p>
<p
style="cursor:
pointer;"onclick="document.getElementById('window1').style.display='none';">Закрити
вікно</p>
</div>
</div>
</body>
</html>
Результат (рис. 8.2):
Рис. 8.2.
Спливаюче вікно із затемненням
CSS. Ефект сірого
відтінку на картинці
Алгоритм створення ефекту сірого відтінку на картинці:
1. Створити ефект
сірого відтінку на картинці.
Приклад
HTML-коду:
<head>
<title>Ефект сірого кольору</title>
<link
rel="stylesheet" href="style.css">
</head>
<body>
<div class="image">
<img
src="1.jpg">
</div>
</body>
</html>
CSS-код:
.image img:hover {
-webkit-filter: grayscale(100%);}
.image img:hover {
-webkit-filter: grayscale(100%);}
В результаті отримали
ефект сірого відтінку зображення, але при наведенні курсору миші на зображення,
зображення стає кольоровим (рис. 8.3).
Рис. 8.3. Ефект
сірого відтінку на картинці
Завдання для виконання
1. Спливаючі підказки
Завдання 1.1. Створення спливаючих підказок (40 хв.).
1. Створити
спливаючі підказки на головні слова веб-сторінок.
2. Спливаюче вікно із затемненням
Завдання 2.1.
Створення спливаючого вікна із затемненням (40 хв.).
1. Створити 2
спливаючих вікна із затемненням на веб-сторінках.
Завдання для самостійного виконання
Завдання 1.1. Створення
сірого ефекту на картинці (30 хв.).
1. Створити
ефект сірого ефекту на 2 картинках.
Запитання для контролю
1. Як
створити спливаючі підказки?
2. Як
створити спливаючі вікна із затемненням на веб-сторінках?
3. Як
створити ефект сірого ефекту на картинці?
Немає коментарів:
Дописати коментар