Лабораторна робота №5 Тема: Використання каскадних таблиць стилів CSS (Cascading Style Slieets).

Мета роботи: Навчитися створювати та використовувати таблиці стилів. Навчитися створювати форми у HTML-документах. Навчитись застосовувати звук у HTML-документах.

Звіт: файл style.css з описом стилів, які використовуються на web-сторінці З висновками про практичний курс web-дизайну, у висновках також визначити переваги та недоліки застосування таблиць стилів CSS; на web-сторінках зі звітами до лабораторних робіт створені форми з меню, що випадає.

Хід роботи

1. Вивчіть теоретичний матеріал для виконання роботи (ТЕМА 7. Використання каскадних таблиць стилів CSS (Cascading Style Sheets).

2. Відкрийте Notepad та створіть текстовий файл з назвою styles.ess.

3. Враховуючи вже розроблений дизайн, створіть опис стилів елементів, класів, ID, що будуть використовуватись для web-документу.

Таблиця стилів повинна бути оформлена за основними правилами оптимізації:

1) таблиця стилів умовно розбивається на три блоки за селекторами:

елементи, класи, ID;

2) в кожному блоці селектори розташовуються за алфавітним порядком;

3) всі визначення для одного і того же елемента повинні знаходитись в одному місці;

4) селектори елементів рекомендується писати великими буквами.

Розглянемо теоретично приклад створення таблиці стилів. На практиці кожен студент повинен описати свої індивідуальні стилі у відповідності до дизайну, розробленого на попередній роботі. В описах стилів спочатку записується колір і фон, далі шрифт, у кінці поля і відступи. Цифри означають порядковий номер рядка і до самої таблиці стилів не відносяться.

Приклади стилів:

1. A:link {

color: #000;

font-weight: bold}

2. A:visite { color: #555; font-weight: bold}

3. A:active, A':hover { color: #F00; font-weight: bold}

4. BODY {

background-color: #EEE; margin: Opx;

padding: Opx}»к < * \^1

5- H2 { ^;,.~

color: tbrown;

font-family: Verdana, Arial Cyr, Arial;

font-weight: bold;

font-size: 14pt;

margin-left: 20%;

margin-top: 0,5 cm;

text-aiign: left;

}

6. P {

color: #000;

font-family: Times New Roman, serif;

text-indent: 1cm;

text-align: justify; '•.»'■■

margin-left: 15%; "'-,л

margin-right: 15%;

margin-top: Ipt;

margin-bottom: lpt; ■■

7. norm {

color: #555;

font: 12px Verdana, Helvetica, sans-serif}

8. #lnk A:link, #lnk A:visited { ' Щ color: #666}

9. #lnk A:active, #lnk A:hover {

color: #F90} 'І'Щ:

Рядки 1-3 визначають правила для посилань, 4 - правило для тіла документа. 5 - правило для заголовка другого рівня. Для даного стилю заголовки • web-сторінок, оформлені тегом <Н2>, будуть відображатися жирним шрифтом Verdana або, якщо цей шрифт не встановлений, шрифтом Arial. Розмір заголовка дорівнює 14 пунктам, колір чорний, відступ ліворуч дорівнює 20 % ширини сторінки, а відступ зверху - 0,5 см. Заголовок буде вирівнюватися по лівому краю сторінки.

6 - правило для оформлення абзацу. У цьому прикладі стилю визначено, що параграфи <Р> на всіх web-сторінках, що використовують цей опис (в нашому випадку на web-сторінці з висновками), будуть відображатися шрифтом Times New Roman або у випадку, якщо цей шрифт на машині не встановлений, іншим шрифтом, але з цього сімейства (serif). Колір шрифту встановлено чорний, вирівнювання - повне (по обидва боки). Також установлені для параграфа ряд значень відступів. У стилі параграфа установлені бічЗЙ відступи в 15 % ширини вікна і вертикальні відступи в 1 пункт.

Завдяки тому, що бічні відступи заголовка і параграфа встановлені у відсотках від ширини вікна оглядача, при перегляді web-сторінок на комп'ютерах з різним дозволом дисплея пропорції і розташування шголовка, основного тексту і відступів будуть збережені.

7-8 - блок контекстних селекторів. 4. Створіть надпис "ВИСНОВКИ", що буде виглядати тривимірним, але не буде використовуватись графіка. При застосуванні CSS можна вказувати значення відступів навколо об'єктів, як негативні величини. Це дозволяє накладати один шар тексту на інший і одержувати цікаві результати.

Створіть опис стилів для двох класів:

. zl {color: silver; margin-top: lOOpx; margin-left: 20%; font-family: Verdana; font-size: 25pt; font-weight: bold;}

.z2 {color: red; margin-top: -45px; margin-left: 20%; font-family: Verdana; font-size: 25pt; font-weight:

bold;}

5. Опишіть стилі для будь-яких інших об'єктів або класів за власним

вибором.

6. Для того щоб «прив'язати» створені стилі до web-сторінки з

висновками, в html-файл totalhtm в розділі <HEAD> помістіть рядок з

посиланням на файл стилів і з указівкою про використання CSS:

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

Оскільки файл зі стилями буде знаходитися в тому ж каталозі сервера, що

й інші сторінки, параметр HREF="URL" у нашому випадку буде ім'ям

нашого файлу стилів (styles.css).

6. Для формування тривимірного надпису, що буде заголовком документа

у тілі html-документа запишіть:

<DIV class="zl">BMCHOBKH</DIV> <DIV class="z2">BMCHOBKM</DIV>

7. Використовуючи створену таблицю стилів оформіть web-документ з

висновками про практичний курс web-дизайну, за попередньо виконаними

роботами. У висновках також визначте переваги та недоліки застосування

таблиць стилів CSS,

8. Створіть фоновий звук, який би повторювався 3 рази при відкритті web-

сторінки з висновками. Вставте до сторінки звуковий файл, який би

завантажувався при натасканні на відповідне гіперпосилання.

Internet Explorer мае можливість автоматичного завантаження і

програвання фонового звука у форматах wav,.au,.mid, якщо такі файли

включені до складу Web-документа. до)вдя

Файл у форматі.wav є стандартом звукових файлів у Windows. У цьому форматі представлені всі системні звуки Windows. Формат MIDI був розроблений для управління електронними музичними інструментами і за своєю структурою повністю відрізняється від усіх інших форматів звукових файлів.

Для фонового звука використовується тег <BGSOUND>. Атрибути

тега <BGSOUND>:

- SRC=«URL» вказує місцезнаходження звукового файла;

- LOOP=n визначає кількість повторень звука (при значенні LOOP INFINITE звук відтворюється протягом всього часу, поки відкритий

документ).

Тег <BGSOUND> повинен бути розташований у заголовку документа і мати такий формат:

<BGSOUND SRC=«URL звукового файла» LOOP=infinite>

До HTML-документа можна вставити звуковий файл у вигляді

гіпертекстового посилання, при натисканні на яке завантажується

звуковий файл або відбувається супровід фоновим звуком:

<А HREF=«URL звукового файла»>Для завантаження

звукового файла натиснути т.ут</А>

9. Протестуйте Ваш web-сайт.у оглядачах Internet Explorer і FireFox. При

необхідності виправте помилки.

10. Доповніть таблицю з тегами.

11. Захистіть лабораторну роботу.

Контрольні питания

1. Призначення каскадних таблиць стилів. Переваги використання.

2. Поясніть різницю між способами підтримки стилів документа. Створення таблиць зв'язаних стилів (linked style sheet), глобальних стилів (global style sheet), внутрішніх стилів (inline style).

3. Які основні параметри кольору, фону доступні у стилях HTML?

4. Які основні параметри шрифтів доступні у стилях HTML?

5. Які основні параметри тексту доступні у стилях HTML?

6. Які основні параметри абзацу, як блокового елементу, доступні у стилях HTML? ■

7. Які основні параметри списків доступні у стилях HTML?

8. Які формати використовуються для звукових файлів, що вставляються у HTML-документ?

9. За допомогою якого тега вставляється звуковий файл?

10. Як задається кількість повторень для фонового звука?

Додаток

Не нашли, что искали? Воспользуйтесь поиском: