Презентація на тему «Таблиці каскадних стилів і динамічні веб-сайти»

Спецкурс “Основи веб-дизайну”
Розділ 5. Таблиці каскадних стилів і динамічні веб-сайти
 Основи веб-дизайну
Вперед>>
<< Назад
11:06
 Основи веб-дизайну
Вперед>>
<< Назад
11:06
     Використання таблиць каскадних стилів
Поняття про таблиці каскадних стилів
Застосування каскадних стилів у HTML-документах
Позиціонування елементів веб-сторінки за допомогою стилів
Частина 1
Вперед >>
11:06
Таблиці каскадних стилів і динамічні веб-сайти
Хто прагне стати справжнім веб-майстром,  має засвоїти додаткові засоби оформлення сторінок та створення ефектів, яких неможливо досягнути звичайними методами. 
Навчимося розробляти сучасні динамічні веб-ресурси, які реагують на дії відвідувачів, відповідають на їхні запитання, обмінюються з ними електронними листами, а може, навіть допомагають робити домашні завдання.
Тому дізнаємося про ще один засіб форматування текстів і розміщення елементів на веб-сторінках, ознайомимося з динамічними елементами сайтів та навчимося їх створювати. 
Крім того, виконаємо дві практичні роботи, присвячені створенню динамічних елементів та форм, а також їхній обробці за допомогою скриптів.

 Основи веб-дизайну
<< Назад
Вперед >>
<< Назад
11:06
Використання таблиць каскадних стилів
Ви вже розглянули можливості форматування вмісту веб-сторінок за допомогою засобів мови HTML та візуального редактора веб-сайтів. 
Проте є й інші засоби оформлення текстів і створення зовнішніх ефектів, які можуть прикрасити веб-сторінку. Одним з них є таблиці стилів. 
Загальний принцип використання стилів на веб-сторінках той самий, що і для документів, створених у середовищі текстового процесора: користувач визначає набори правил форматування, які потім застосовуються до елементів документа. Проте у веб-дизайні способи застосування стилів різноманітніші.

 Основи веб-дизайну
Вперед >>
<< Назад
11:06


Поняття про таблиці каскадних стилів
Стиль — це набір правил оформлення та форматування, який можна застосувати до різних елементів веб-документа.
 У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться задавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. 
Стилі дають змогу позиціювати елементи сторінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.


 Основи веб-дизайну
Вперед >>
<< Назад
11:06


Поняття про таблиці каскадних стилів
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. 
Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.

 Основи веб-дизайну
Вперед >>
<< Назад
11:06
Таблиці каскадних стилів
Таблиці каскадних стилів — це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначеннями тегів. 
Наприклад:
Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}

Тут задано параметри для тегу абзацу <Р>, які встановлюють: 
розмір шрифту 40 пунктів, 
колір шрифту — зелений, 
гарнітуру — Comic Sans MS. 

У документі достатньо ввести теги <Р>...</Р> із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.

 Основи веб-дизайну
Вперед >>
<< Назад
11:06
Зверніть увагу!
Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML. 
У наведеному прикладі встановлено розмір шрифту 40 пунктів, хоча в мові HTML за допомогою атрибута SIZE можна задати для шрифту максимальний розмір 7, що відповідає 36 пунктам.
Крім того, таблиці каскадних стилів дають змогу визначити єдиний стиль оформлення для різних сторінок документа і швидко модифікувати його зміною відповідного параметра у таблиці стилів.

 Основи веб-дизайну
Вперед >>
<< Назад
11:06
 Основи веб-дизайну
Вперед >>
<< Назад
11:06
Застосування каскадних стилів у HTML-документах
 Основи веб-дизайну
Вперед >>
<< Назад
11:06


Підключення зовнішньої таблиці стилів
Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. 
Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:
<LINK REL = "stylesheet"   TYPE = "text/css"   HREF="mystyle.css">
Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. 
Атрибут HREF задає адресу файлу  (mystyle.css).
 Основи веб-дизайну
Вправа 5.1
12
Вправа 5.1
Вперед >>
<< Назад
11:06
Використання стилів внутрішньої таблиці
Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.
<HEAD>
<STYLE>
Тег1  {властивість11: значення11;  властивість12: значення12;   ...;
властивість 1n: значенняі1n} 
Тег2  {властивість21: значення21;  властивість22: значення22;   ...;
властивість2m: значення2m}
</STYLE> 
</HEAD>
Як видно з коду, найпростіша внутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується, як правило, з нового рядка. Визначення тегу містить його ім'я без кутових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрапками. 
 Основи веб-дизайну
Вперед >>
<< Назад
11:06

Визначимо стилі заголовків першого та другого рівнів із використанням тегу <STYLE>
<html>
<head>
<style>
h1 {font-size:48pt; color:red}
h2 {font-size:20pt; color:blue}
</style>
<title>Приклад використання CSS</title>
</head>
<body>
<h1>Для заголовка першого рівня визначено розмір 48 pt, а колір тексту — червоний </h1>
<h2>Для заголовка другого рівня визначено розмір 20 pt, а колір тексту — синій </h2>
<p>Для цього абзацу стиль не застосовано, для оформлення тексту використано атрибути за умовчанням.
</body>
</html>
 
У цьому описі стилю змінено оформлення заголовків Н1 та Н2. Зокрема, для першого призначено розмір 48 пунктів і червоний колір, а для другого — розмір 20 пунктів і синій колір. 

 Основи веб-дизайну
Стилі заголовків першого та другого рівнів
15
Вперед >>
<< Назад
11:06

Створення нових стилів
У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до такого стилю за іменем, використовуючи атрибут СLASS=ім’я_стилю, де ім'я записують вже без крапки. Для одного тегу можна використовувати декілька стилів форматування.

Наприклад, застосовуючи атрибут CLASS тегу </Р>, задамо для двох абзаців різні стилі: 
першому надамо розмір шрифту 38 пунк­тів, білий колір символів і оливковий колір тла, 
другому — розмір шрифту 46 пунктів, фіолетовий колір символів і рожевий колір тла. 

 Основи веб-дизайну
Вперед >>
<< Назад
11:06

Створення нових стилів
<HTML> 
<HEAD>
<STYLE>
.style1 {font-size: 3 8pt; color: white; background-color: olive}
.style2 {font-size: 46pt; color: magenta; background-color: mistyrose}
</STYLE>
<TITLE>Приклад використання CSS</TITLE>
</HEAD>
<BODY>
<P CLASS=style1>До цього абзацу застосовано стиль style1 </Р>
<Р CLASS=style2>До цього абзацу застосовано стиль style2 </Р>
</BODY>
</HTML>

Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприклад, ефект об'ємного тексту або накладання (часткового перекриття) фрагментів сторінки.

 Основи веб-дизайну
Застосування різних стилів форматування для тегу абзацу
18
Виконання даного прикладу
Приклад накладання рядків тексту. Приклад 5.1
19
Приклад 5. 1 
Вперед >>
<< Назад
11:06
Позиціювання елементів веб-сторінки за допомогою стилів
Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць — каскадні стилі надають для цього додаткові цікаві можливості.
Зокрема, можна обирати один із трьох типів позиціювання елементів на сторінці: статичне, відносне та абсолютне позиціювання. Тег визначається атрибутом POSITION, який може набувати таких значень:

 Основи веб-дизайну
Вперед >>
<< Назад
11:06

Позиціювання елементів веб-сторінки за допомогою стилів
Для відносного та абсолютного позиціювання використовують чотири властивості — left (ліворуч) та right (праворуч), які задають відступи для розміщення об'єкта по горизонталі, і top (згори) та bottom (знизу) — по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху — той, який описали останнім.
Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об'єкта задають за допомогою властивості z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.
 Основи веб-дизайну
Позиціювання фрагментів тексту і зображення за допомогою стилів
22
Вправа 5.2