Лабораторна робота 7.
Мета – навчитися
створювати таблиці на веб-сторінках, меню, змінювати курсори, створювати
маркований список і коментарі.
Програмне забезпечення:
–
операційна система
з графічним інтерфейсом – Windows XP
або Windows 7;
–
браузер для роботи
в мережі Інтернет – Google Chrome або Opera;
–
веб-технологія – каскадні таблиці стилів CSS.
ХІД РОБОТИ
Теоретичні відомості
Для виконання лабораторної роботи необхідно повторити
матеріал теми 5.
CSS. Таблиці
Алгоритм роботи з таблицями в CSS:
1. Створити таблиці із
вказанням кольору фону комірок на веб-сторінках, створених в л. р. 5, 6.
Приклад коду для створення таблиці:
<html>
<head>
<title>Таблиця</title>
<style type="text/css">
table {border-style:solid; border-width: 100px;
border-color: blue;
background: yellow; color: black; }
td {background: white;}
</style>
</head>
<body>
<table cellpadding="6"
cellspacing="4">
<tr><th>Перший стовпець</th><th>Другий
стовпець</th>
<th>Третій стовпець</th><th>Четвертий стовпець</th></tr>
<tr><td>Дані 1</td><td>Дані
2</td><td>Дані 3</td><td>Дані 4</td></tr>
<tr><td>Дані 5</td><td>Дані
6</td><td>Дані 7</td><td>Дані 8</td></tr>
</table>
</body>
</html>
Результат таблиці (рис.
7.1):
Рис. 7.1. Таблиця
2. Створити таблицю на веб-сторінці із вказанням кольору
меж, її стилю, товщини навколо елементу.
Властивість border –
колір межі, її стиль і товщина навколо елементу. Приклад:
<html>
<head>
<title>Таблиці</title>
<style type="text/css">
table { background: silver;
border: dotted red;
border-width: thick;}
td {background: white;}
td, th {padding: 20 px ;
border: solid blue;
border-width: medium;}
</style>
</head>
<body>
<table>
<tr><th>Перший
стовпець</th><th>Другий стовпець</th>
<th>Третій стовпець</th><th>Четвертий стовпець</th></tr>
<tr><td>Дані 1</td><td>Дані
2</td><td>Дані 3</td><td>Дані 4</td></tr>
<tr><td>Дані 5</td><td>Дані
6</td><td>Дані 7</td><td>Дані 8</td></tr>
</table>
</body>
</html>
Результат таблиці (рис. 7.2):
Рис. 7.2. Таблиця
3. Створити об’ємну таблицю на веб-сторінці.
Для створення об’ємних таблиць можна використовувати
світлі і темні кольори в рамці або комірках. Стиль рамки може мати наступні
значення:
1) none – межа
відсутня (значення властивості border-width дорівнює нулю);
2) hidden –
аналогічно значенню none, за винятком сценарію вирішення конфліктів між
границями, який використовується для елементів таблиці;
3) dotted –
границя відображається пунктирною лінією;
4) dashed –
границя відображається штрихпунктирною лінією;
5) solid –
границя відображається суцільною лінією;
6) double –
границя відображається двома безперервними лініями; сума значень ширини двох
ліній і відстані між ними дорівнює значенню властивості border-width;
7) groove –
границя відображається втиснутою лінією;
8) ridge –
границя відображається опуклою лінією (протилежно значенням groove);
9) inset – весь
блок виглядає втисненим;
10) outset – весь блок виглядає опуклим (протилежно
значенню inset).
Товщина рамки може бути 2, 4 або 6 пікселів.
Приклад об’ємної таблиці (рис. 7.3):
<html>
<head>
<title>Таблиця</title>
<style type="text/css">
table
th {background: purple; color: yellow; border: groove
yellow; border-width: thick;}
td, th { background: linen; padding: 30 px; border:
outset yellow; border-width: thick;}
</style>
</head>
<body>
<table cellspacing="0"
border="30">
<tr><th>Перший
стовпець</th><th>Другий стовпець</th>
<th>Третій
стовпець</th><th>Четвертий стовпець</th></tr>
<tr><td>Дані 1</td><td>Дані
2</td><td>Дані 3</td><td>Дані 4</td></tr>
<tr><td>Дані 5</td><td>Дані
6</td><td>Дані 7</td><td>Дані 8</td></tr>
</table>
</body>
</html>
Рис. 7.3. Об’ємна таблиця
CSS. Меню
Алгоритм роботи з меню в CSS:
1. Створити меню на веб-сторінці.
Приклад html-коду:
<html>
<head>
<title>Меню</title>
<link
rel="stylesheet" type="text/css"
href="style3.css">
</head>
<body>
<ul
class="menu">
<li><a
href="1.html">Home</a></li>
<li><a
href="2.html">About</a></li>
<li><a
href="3.html">Intresting</a></li>
<li><a
href="4.html">Contact</a></li>
</ul>
</body>
</html>
Приклад CSS-код:
ul {
color:red;
background-color:
cyan;
padding: 50 px;
border-bottom:
20 px solid;}
Результат (рис.
7.4):
Рис. 7.4.
Меню
CSS. Курсор
Алгоритм роботи з курсором в CSS:
1. Змінити вигляд курсору.
В CSS є можливість змінювати вигляд курсору (таблиця
7.1).
Таблиця 7.1.
Приклад зміни курсору при наведенні його на посилання:
<html>
<head>
<title>Курсори</title>
<style
type="text/css">
.movelink {
cursor: move; }
.helplink {
cursor: help; }
</style>
</head>
<body>
<p><a
href="1.1.html"
class="movelink">Текст</a></p>
<p><a
href="1.2.html"
class="helplink">Текст</a></p>
</body>
</html>
CSS. Маркований список
Алгоритм роботи з маркованим списком в CSS:
1. Створити маркований
список на веб-сторінці за
допомогою властивості list-style-image із застосуванням
до елементу ul. Приклад (рис. 7.5):
ul { list-style-image: url
("images/1.jpg");}
Рис. 7.5. Маркований список
CSS. Коментарі
Алгоритм роботи з коментарем в CSS:
1. Створити коментар
на веб-сторінці. Прописати код в html-документі та
style2.css.
HTML-код:
<html>
<head>
<title>Коментарі</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div
class="coms">
<div
class="com f ">
<p>Comments</p>
</div>
</div>
</body>
</html>
CSS-код:
body {background: yellow;}
.coms {width: 400px;}
.com {width: 60%; margin-bottom: 40px;}
.com p {margin: 5 10 15px 10;}
.f{ position: relative;background: white; padding: 20px;
color: blue; border-radius: 60px; margin-left: 40px;}
.f:after {content: ''; display: block; position:
absolute;
width: 0; height: 0;
border-top: 20px solid;border-bottom: 10px solid;
border-right: 10px solid white; left: -8px; top: 8px;}
Результат (рис. 7.6):
Рис. 7.6. Коментар
Завдання для виконання
1. Створення таблиць в CSS
Завдання 1.1. Таблиці (40 хв.).
1. Створити таблицю на веб-сторінці із вказанням кольору
фону комірок, із кольору меж, її стилю, товщини навколо елементу.
2. Створити об’ємну таблицю на веб-сторінці.
2. Меню. Вигляд
курсору в CSS
Завдання 2.1. Меню, курсор (40 хв.).
1. Створити меню на веб-сторінці.
2. Змінити вигляд
курсору при роботі з веб-сторінками.
Завдання для самостійного виконання
Завдання 1.1. Створення коментарів (30 хв.).
1. Створити
коментарі на веб-сторінках.
Запитання для контролю
1. Як
створити таблицю із фоном комірок?
2. Як
створити таблицю із вказанням кольору меж, її стилю, товщини навколо елементів?
3. Як
створити об’ємну таблицю на веб-сторінці?
4. Як
створити горизонтальне меню, що випадає?
5. Чи
можна змінити вигляд курсору при роботі з веб-сторінками? Якщо так, то як?
6. Розкрити
процес створення коментарів на веб-сторінках.
Немає коментарів:
Дописати коментар