Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 861 Лабораторна робота 8 на тему Форматування елементів Web-сторінки за допомогою каскадних таблиць стилів з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота 8 на тему Форматування елементів Web-сторінки за допомогою каскадних таблиць стилів з курсу Сучасні Internet-технології, НУДПСУ

« Назад

861 Лабораторна робота 8 на тему Форматування елементів Web-сторінки за допомогою каскадних таблиць стилів з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота № 8 Форматування елементів Web-сторінки за допомогою каскадних таблиць стилів

Мета роботи: освоєння практичних навичок використання каскадних таблиць стилів

Хід роботи

1. Підготовча робота. У папці HTML створимо файл css.html та запишемо у ньому такий HTML-код:

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css"> </style>

<title>Використання каскадних таблиць стилів</title>

</head><body>

<h1>Заголовок першого рівня №1</h1>

<p>Текст першого абзацу</p>

<h1>Заголовок першого рівня №2</h1>

<h2>Заголовок друго рівня</h2>

<p>Текст другого абзацу</p>

</body></html>

     Відповідне вікно браузера подане на рис. 1.

2. Визначимо стиль, що призводить до появи границь товщиною 1 піксель навколо всіх елементів  h1 та  вирівнювання цих елементів по центру:

<style type="text/css">

   h1 {border-width: 1; border: solid; text-align: center}

</style>

Після застосування такого стилю вікно відображення заголовків першого рівня зміниться відповідно до рис. 2.

3. Модифікуємо визначення стилю таким чином, щоб він використовувався тільки елементами h1класу m:

          h1.m {border-width: 1; border: solid; text-align: center}

4. Першому елемента h1призначимоклас m:

<h1 class='m'>Заголовок першого рівня №1</h1>

Оновлене відображення HTML-документа у вікні браузера повинно відповідати рис. 3.

5. За допомогою контекстного селектора визначимо стиль для відображення заголовків другого рівня та абзаців шрифтом Monotype Corsiva:

...

h2, p {font-family: 'Monotype Corsiva';}

 </style>

Переглянемо модифікований документ (рис.4).

6. У першому абзаці додамо стиль для відображення тексту цього абзацу червоним кольором з нижньою границею типу double та верхньою границею зеленого кольору типу dotted:

<p style="border-bottom-style: double; color: Red; border-top-color: Green; border-top-style: dotted;">Текст першого абзацу</p>

Відображення цього абзацу у вікні браузера подане на рис.5.

7. Скопіюємо у папку HTML два рисунки, наприклад 1.jpg та Eifel.jpg.

8. У файлі css.html додамо HTML-код для показу на Web-сторінці цих рисунків з границею, товщиною 1 піксель. Рисунка Eifel.jpg призначимо вирівнювання "по лівому краю", а рисунка 1.jpg присвоїмо id='pic':

…

<img src="Eifel.jpg" border="1">

<img src="1.jpg" border="1" id="pic">

</body>

9. Додамо стиль для абсолютного позиціювання об’єкта з  id='pic'  відносно вікна браузера з параметрами top=90 пікселів  та left=450 пікселів:

...

#pic {position: absolute; top: 90px; left: 450px}

</style>

Пересвідчимося, що розміщення рисунка 1.jpg (рис. 6) значно відрізняється від звичайного розміщення, заданого за допомогою параметра align тегу <img>.

10. Рисунка Eifel.jpg призначимо id="eifel":

<img src="Eifel.jpg" border="1" id="eifel">

11. Додамо стиль для того, щоб об’єкт з id="eifel" не відображався у вікні браузера:

...

#eifel {display: none}

 </style>

Пересвідчимося, що рисунок Eifel.jpg  не відображається у вікні браузера (рис. 7).

12. Модифікуємо стиль об’єкта з id="eifel" для його відображення на екрані:

#eifel {display: none}

Пересвідчимося, що рисунок Eifel.jpg  знову відображається у вікні браузера (рис. 6).

13. Виділимо визначені нами стилі у окремий файл та зв’яжемо його з нашим HTML-документом (css.html). Для цього:

У папці HTML створимо текстовий документ, назвемо його mystyle.css та відкриємо за допомогою текстового редактора "Блокнот"

Із файлу css.html перенесемо у mystyle.css всі визначинені нами таблиці стилів:

h1.m {border-width: 1; border: solid; text-align: center}

h2, p {font-family: 'Monotype Corsiva';}

#pic {position: absolute; top: 90px; left: 450px}

#eifel {display: block}

Зазначимо, що теги <style type="text/css"> та </style> записувати не потрібно

За допомогою меню "Файл"->"Сохранить" збережемо файл mystyle.css;

У файлі css.html замість тегів <style type="text/css"> ... </style> запишемо:

<link href="mystyle.css" rel="stylesheet" type="text/css">

Збережемо файл css.html.

14. Проведемо оновлення нашої Web-сторінки у вікні браузера. Якщо у процесі виконання п. 13 не було допущено помилок, то відображення Web-сторінки повинно зостаись без змін (рис. 6).

Завдання для самостійної роботи

  1. Розробити таблиці стилів для форматування 2-3 сторінок сайта з тематики, визначеної викладачем.

  2. Оформити звіт.

Питання для самоперевірки

  1. Як встановити абсолютну позицію об’єкта відносно вікна браузера?

  2. Як за допомогою стилів знищити зображеня об’єкта з вікна браузера?

  3. Як визначити стиль, що призведе до відображення зеленим кольором тексту, розміщеного у таблицях Web-сторінки?

  4. Як визначити стиль, що призведе до відображення всіх заголовків  шрифтом Arіal?

  5. Записати стиль для відображення нижньої границі тексту абзаців?

  6. Записати стиль для відображення верхньої границі тексту абзаців?

  7. Як зв’язати HTML-документ з таблицями стилів, що визначені у окремому файлі?

  8. Навіщо використовується групування селекторів?

  9. Навіщо у тегах використовується параметр id?

  10. Як при визначенні правил стилів використовуються класи?

З повагою ІЦ “KURSOVIKS”!