Лабораторна
робота 6.
Мета – створити таблицю стилів, навчитися використовувати
кольори для оформлення веб-сторінок,
розглянути методи позиціонування та управління фоновим зображенням, навчитися
форматувати текст: змінювати шрифти, вирівнювати текст, створювати «декоративні
ефекти» тексту, інтервал між символами, трансформацію тексту, змінювати
зовнішній вигляд першої літери, створювати посилання на веб-сторінках.
Програмне забезпечення:
–
операційна система
з графічним інтерфейсом – Windows XP
або Windows 7;
–
браузер для роботи
в мережі Інтернет – Google Chrome або Opera;
–
веб-технологія – каскадні таблиці стилів CSS.
ХІД РОБОТИ
Теоретичні відомості
Для виконання лабораторної роботи необхідно повторити
матеріал теми 2.3.
CSS. Колір і фон
Алгоритм роботи з кольором і фоном в CSS:
1. Оформити колір
тексту та фон веб-сторінок (створених в л. р. 5) за допомогою властивостей color, background-color, які
встановлюються в селекторі body із вказанням
значення властивостей, наприклад:
h3 {color: green};
body {background-color: green;}
2 Підключити CSS до гіпертекстових
документів, використовуючи один із методів:
· зовнішній (використання посилання на зовнішню таблицю стилів з розширенням *.css):
<link rel="stylesheet" type="text/css" href="style.css"/>· зовнішній (використання посилання на зовнішню таблицю стилів з розширенням *.css):
Зовнішня
таблиця стилів style.css повинна містити властивість background-color.
· внутрішній або глобальна таблиця стилів (використання тега style у секції head):
<style type="text/css">· внутрішній або глобальна таблиця стилів (використання тега style у секції head):
body {background-color: blue;}
</style>
· in-line або вбудована таблиця стилів – використання атрибуту style у секції body:
<body style="background-color: yellow;">· in-line або вбудована таблиця стилів – використання атрибуту style у секції body:
3. Оформити фонове
зображення веб-сторінок за допомогою властивостей background-image, background-repeat, background-attachment, background-position. Наприклад (рис. 6.1):
body {background-image: "url(1.jpg)";}
Рис. 6.1. Фонове зображення веб-сторінки
Властивість background-repeat – повторення фонового зображення, яке може повторюватися
по горизонталі (background-repeat: repeat-x), по вертикалі
(background-repeat: repeat-y), по
горизонталі та вертикалі (background-repeat: repeat) або не
повторюватися (background-repeat: no-repeat).
Приклад повторення фонового зображення по вертикалі (рис. 6.2):
body {
background-color: yellow;
background-image: url("1.jpg");
background-repeat: repeat-y;}
Рис. 6.2. Повторення фонового зображення по горизонталі
Властивість background-attachment – фіксація фонового зображення або прокручування разом з
вмістом сторінки. Може набувати наступних значень:
· background-attachment: scroll – зображення
прокручується разом зі веб-сторінкою, тобто розблоковано;
· background-attachment: fixed – зображення
блоковано.
Приклад
прокручування фонового зображення разом із
веб-сторінкою (рис. 6.3):
body {
background-color: yellow;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-attachment: scroll;}
Рис. 6.3. Прокручування
фонового зображення разом із веб-сторінкою
Властивість background-position вказує точне розташування графічного об’єкту на
веб-сторінці. Значення background-position можна
встановити, використовуючи фіксовані одиниці (наприклад, пікселів: '200px 400px') або слова top, bottom, center, left, right.
Приклад
розташування фонового зображення в лівому нижньому кутку екрану (рис. 6.4):
body {
background-color: yellow;
background-image: url("1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left bottom;}
Рис. 6.4. Розташування фонового зображення в лівому нижньому кутку
екрану
CSS. Текст
Алгоритм роботи з текстом в CSS:
1. Оформити шрифт
тексту веб-сторінок (створених в л. р. 5) за допомогою властивостей font-family, font-style, font-variant, font-weight, font-size.
Властивість font-family – шрифт тексту
веб-сторінки, існує 2 типи імен шрифтів – ім'я сімейства (family-name) і загальне або родове сімейство (generic family).
Сімейства шрифтів:
1) Times New Roman, Garamond, Georgia – сімейство serif, шрифт з зарубками;
2) Trebuchet, Arial, Verdana – сімейство sans-serif, шрифт без
зарубок;
3) Courier, Courier New, Andele Mono – сімейство monospace, символи шрифтів мають однакову ширину.
Приклад списку шрифтів (рис. 6.5):
p {font-family: Courier, Andele Mono, monospace;}
Рис.
6.5. Шрифт сімейства monospace
Властивість font-style – стиль
шрифту, можливі значення: normal,
italic або oblique. Приклад (рис. 6.6):
p {font-family: Courier, Andele Mono, monospace; font-style: oblique;}
Рис.
6.6. Стиль шрифту oblique
Властивість font-variant – вибір між варіантами normal і small-caps (малі заголовні букви (upper case)). Приклад варіанту small-caps (рис. 6.7):
h2 {font-variant: small-caps;}
Рис. 6.7. Шрифт з властивістю font-variant:
small-caps
Приклад варіанту normal (рис. 6.8):
h2 {font-variant: normal;}
Рис. 6.8. Шрифт з властивістю font-variant:
normal
Властивість font-weight – вага
шрифту, визначає наскільки товстим, або "важким", повинен бути шрифт.
Шрифт може бути normal або bold.
Властивість font-size – розмір шрифту, який можна позначати одиницями вимірювання (пікселі,
відсотки).
Властивість
font –
скорочений запис, який містить всі властивості шрифту. Наприклад (рис.
6.9):
p {font-style: italic;
p {font-style: italic;
font-weight: bold;
Рис. 6.9. Шрифт з властивістю font
2. Оформити відступи,
вирівнювання, декорації тексту веб-сторінок за допомогою властивостей text-indent, text-align, text-decoration.
Властивість text-indent – відступи для виділення параграфа. Приклад (рис. 7):
p {text-indent: 50px;}
Рис. 7. Відступи для виділення параграфа
Властивість text-align – вирівнювання тексту, яке
має наступні значення: left, right,
centred або justify. Приклад
(рис. 7.1):
p {text-align: center;}
Рис. 7.1. Вирівнювання тексту по центру
Властивість text-decoration – декорація тексту, надає можливість
зробити текст з лінією зверху, закреслений текст,
підкреслений текст, миготливий текст. Приклад декорації тексту (рис. 7.2):
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
h4 {text-decoration: underline;}
Рис. 7.2. Декорація тексту
3. Оформити інтервали
між буквами, трансформацію тексту за допомогою властивостей letter-spacing, text-transform.
Властивість letter-spacing – інтервал між буквами. Приклад (рис. 7.3):
h1 {letter-spacing: 20px;}
p {letter-spacing: 12px;}
Рис. 7.3. Інтервали між буквами
Властивість text-transform – трансформація тексту – регістр символів із значеннями capitalize (капіталізує текст, тобто кожне нове слово
відображається з великої літери), uppercase (усі великі літери), lowercase (усі маленькі
літери), none (текст
відображається без змін).
Приклад (рис.
7.4):
h3 {text-transform: uppercase;}
li {text-transform: capitalize;}
Рис. 7.4. Трансформація тексту
CSS. Посилання
Алгоритм роботи з посиланнями в CSS:
1. Оформити посилання
веб-сторінок (створених в л. р. 5),
використовуючи селектор а.
Оформлення
посилань може бути різним, наприклад:
· a:link – звичайне
посилання;
· a:visited – відвідане
посилання;
· a:active – посилання, на
яке натиснули;
· a:hover – посилання, над
яким знаходиться курсор миші.
Приклад
задання кольору для посилання (рис. 7.5):
a {color: green;}
Рис. 7.5. Колір посилання
Приклади різних посилань. Посилання без
підкреслення (рис. 7.6):
a:link { text-decoration: none; /* прибирання підкреслення посилання */}
a:visited {
text-decoration: none; }
a:active {
text-decoration: none; }
a:hover {
text-decoration: underline; /* підкреслення
посилання при наведенні мишею */
color: red;
/* колір посилання */}
Рис.
7.6. Посилання без підкреслення
Підкреслене та надкреслене посилання (рис. 7.7):
a:link { text-decoration: none; }
a:visited {
text-decoration: none; }
a:active {
text-decoration: none; }
a:hover {
text-decoration: underline overline; /* посилання
підкреслене та надкреслене */
color: red; /* колір посилання */}
Рис. 7.7.
Підкреслене та надкреслене посилання
Зміна розміру
посилання (рис. 7.8):
a:link {
text-decoration: none; }
a:visited { text-decoration: none; }
a:active {
text-decoration: none; }
a:hover {
font-size: 20px; /* розмір шрифту */
font-weight:
bold; /* напівжирне підкреслення */
color: green; /* колір посилання */}
Рис. 7.8. Зміна
розміру посилання
Завдання для виконання
1. Кольорове оформлення веб-сторінок
Завдання 1.1. Колір і фон веб-сторінок (30 хв.).
1. Задати колір
тексту, використовуючи правила CSS для веб-сторінок,
створених в л.
р. 5.
2. Оформити фонове
зображення веб-сторінок за допомогою властивостей background-image, background-repeat, background-attachment, background-position.
2. Оформлення тексту
Завдання 2.1. Форматування тексту (30 хв.)
1. Змінити шрифт
тексту веб-сторінок, створених в л. р. 5.
2. Вирівняти текст,
створити «декоративний ефект» тексту на веб-сторінках.
3. Встановити інтервал
між символами, трансформувати текст на веб-сторінках.
3. Оформлення посилань
Завдання 3.1. Посилання (20 хв.)
1. Оформити посилання
на веб-сторінках, створених в л. р. 5,
використовуючи різні способи відображення посилань.
Завдання для самостійного виконання
Завдання 1.1. Зовнішній вигляд першої
букви (30 хв.).
1. Змінити зовнішній
вигляд перших букв на веб-сторінках.
Запитання для контролю
1. Як
підключити правила CSS до гіпертекстових
документів?
2. Як
змінити фон веб-сторінок, використовуючи правила CSS?
3. Як
виконати вирівнювання тексту та створити «декоративний ефект» тексту на
веб-сторінці?
4. Як
встановити інтервал між символами, трансформувати текст на веб-сторінках?
5. Як
змінити зовнішній вигляд перших букв на веб-сторінках?
6. Як
оформити посилання на веб-сторінках?
Немає коментарів:
Дописати коментар