Інформатика – Поглиблений рівень

Тема уроку: “Позиціювання елементів веб-сторінки за допомогою стилів”

Пригадаємо!

1.  Які види сайтів ви вже знаєте?
2. Якими сайтами ви найчастіше користуєтесь?
3. Що таке каскадні таблиці стилів, для чого вони використовуються?

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

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць –каскадні стилі надають для цього додаткові цікаві можливості.

Зокрема, можна обирати один із трьох типів позиціювання елементів на сторінці: статичне, відносне та абсолютне позиціювання. Тег визначається атрибутом POSITION, який може набувати таких значень:

• static – статичне; задане за умовчанням і передбачає розміщення чергового об’єкта на вільному місці після попереднього;
• relative – відносне; визначає розташування об’єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання;
• absolute – абсолютне; передбачає розміщення об’єкта шляхом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості – left (ліворуч) та right (праворуч), які задають відступи для розміщення об’єкта по горизонталі, і top (згори) та bottom (знизу) – по вертикалі. Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об’єкт, описаний першим, а зверху – той, який описали останнім.

Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об’єкта задають за допомогою властивості z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об’єкт із більшим значенням z-index розміститься поверх об’єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об’єкти матимуть однакові її значення, то зверху розташується об’єкт, описаний нижче за текстом у HTML-документі.

Працюємо за комп’ютером

Повторимо правила ТБ в кабінеті інформатики та при роботі за комп’ютером.

Завдання 1

• Завантажте сайт https://www.w3schools.com/.
• На вкладці HTML Зображення (images) поексперементуйте з фото на зразку. Скопіюйте скрипт у файл Notepad++  та вставте власний текст і фото. Збережіть проект у власній папці.
• Використовуючи вкладку HTML Заголовки (headings) налаштуйте заголовок власного сайту.
• Використовуючи вкладку HTML Стилі (styles) налаштуйте колір тексту та колір фону.
• Використовуючи вкладку HTML Форматування (formatting) відформатуйте текст на сайті.
• Використовуючи вкладку HTML Списки (lists) вставте на власний сайт два різних види списків. Списки повинні відповідати темі сайту.
• Використовуючи вкладку HTML Колір (Colors) спробуйте створити блоки різних кольорів.
• Збережіть проект.

Продемонструйте виконане завдання вчителю.