Урок 12

Позиціювання елементів веб сторінки за допомогою стилів

Позиціонування елементів

Для перекриття елементів можливо застосовувати особливі "хитрощі", як в прикладі створення 3-D ефекту.

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

Для позиціонування елементів на сторінці використовуються три властивості:

• left- для завдання відстані в пікселах від лівого краю вікна (х-координата);
• top- для завдання відстані в пікселах від верхнього краю вікна (у-координата);
• z-index- для вказівки порядку, в якому елементи будуть перекривати один одного; це новий вимір, елементи з великим z-індексом відображаються над елементами з меншим z-індексом.

Звичайно, при використанні цих трьох властивостей не створюється ефект тривимірного простору.

Крім властивостей-координат, для позиціонування елементів знадобиться властивість position. Ця властивість в поєднанні з властивостями left/top дозволяє встановлювати елементи в певні позиції вікна.

Властивість position може приймати три значення:

• absolute- задані властивості left/top поставлять елемент в місце з координатами х і увідносно верхнього лівого кута контейнера (об'єкта, що містить даний елемент).Якщо вони визначені для елемента поза контейнера, то початком відліку координат буде верхній лівий кут сторінки.
• relative- елемент буде встановлено відповідно до того, в якому місці вихідного тексту він знаходиться; це стандартне значення.
• static- елемент буде поставлений в деякий стан щодо фону і не буде переміщатися при прокручуванні сторінки.

ПРИКЛАДИ:

• приклад тексту у вигляді блоку
• приклад картинки в тексті
• приклад картинки тексту та вікна із прокруткою
• папка з матеріалами
  

  

  Додатково:

• опис властивостей зображення та позіціонування об'єктів
• приклад тексту документу малюнок у тексті та 3D-текст

Практична робота 3

«Створення веб сторінки з використанням каскадних
 аркушів стилю»

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки.

папка із матерілами до роботи 

вірши

картинки ще картинки

Вариант 1

Відформатувати текст і картинки, використовуючи опис стилів:

Заголовок: колір – DarkGreen, розмір 40 пт, отступ 150 пікселів; тип шрифту Verdana
Основний текст: колір – Navy, розмір 45 пт, тип шрифту Arial
Картинка : положення у тексті

Вид документу: 

Вариант 2

Відформатувати текст і картинки, використовуючи опис стилів:

Заголовок: колір – BlueViolet, розмір 48 пт, отступ 200 пікселів;  тип шрифту Tahoma

Основной текст:   колір – Chocolate, розмір 34 пт,   тип шрифту Comic Sans MS

Картинка : положення у тексті

Вид документу: