ChatGPT (OpenAI) — допомога у розробці структури уроку, формулюванні навчальних завдань та підготовці навчального тексту.
ChatGPT Image Generation (OpenAI) — генерація ілюстрацій та візуальних об'єктів до уроку.
Авторська розробка — Василь Кутенський. Зміст, структура, методичне опрацювання та остаточне редагування матеріалу здійснені автором.
Згенеровані матеріали перевірені, опрацьовані та адаптовані до навчальних цілей.
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- CSS. Каскадні таблиці стилів. Оформлення вебсторінок
Урок:
CSS. Каскадні таблиці стилів. Оформлення вебсторінок
11 Клас
8
2
33
0
1
1
Залучено ШІ
При створенні цього матеріалу був залучений штучний інтелект.
Вміст уроку:
1
2
3
4
5
6
7
8
Опис, який учні побачать перед початком уроку
CSS. Каскадні таблиці стилів. Оформлення вебсторінок
Продовження проєкту
WordPress.com
Практична робота №2
1. Мета уроку
Навчитися розуміти призначення CSS, розрізняти HTML і CSS, оформлювати вебсторінки та застосовувати основні принципи вебдизайну до власного сайту у WordPress.
Очікувані результати: після уроку учні зможуть:
пояснювати, для чого потрібні CSS;
розрізняти структуру сторінки та її оформлення;
змінювати кольори, шрифти, розміри тексту й вигляд блоків у WordPress;
використовувати налаштування теми та редактора блоків;
створювати охайні, зрозумілі й узгоджені вебсторінки.
2. Пригадуємо попередні уроки
На попередніх заняттях ми:
Визначили мету власного сайту та його цільову аудиторію.
Продумали структуру майбутнього вебсайту.
Розглянули сторінки, розділи, меню та навігацію.
Познайомилися з CMS WordPress.
Вивчили структуру HTML-сторінки й основні HTML-елементи.
Тепер уявімо, що наш сайт уже має заголовок, текст, зображення та меню, але виглядає надто просто. Як зробити його красивим і зручним?
Саме для цього використовують CSS.
3. Пояснення нової теми простими словами (ELI5)
Уявіть, що вебсторінка — це кімната.
HTML — це конструкція кімнати.
Стіни, двері, вікна та розташування предметів. На вебсторінці це заголовки, абзаци, зображення, списки й кнопки.
CSS — це оформлення кімнати.
Колір стін, шпалери, освітлення та стиль меблів. На вебсторінці це кольори, шрифти, відступи, рамки й розташування елементів.
WordPress — це інструмент, за допомогою якого ми створюємо сайт.
Він дає змогу додавати вміст і змінювати його оформлення без необхідності писати весь код вручну.
Отже, запам’ятайте:
HTML відповідає за структуру та зміст.
CSS відповідає за зовнішній вигляд.
WordPress допомагає створювати й редагувати сайт.
4. Що таке CSS?
CSS — це скорочення від Cascading Style Sheets, українською — каскадні таблиці стилів.
CSS — це мова стилів, яка визначає, як відображатимуться елементи вебсторінки у браузері.
За допомогою CSS можна налаштовувати:
Шрифти й текст
Тип, розмір, товщина, вирівнювання.
Кольори
Фон, текст, посилання, кнопки.
![Card Style Update [#3023319] | Drupal.org](https://fs11.vseosvita.ua/1100nqqt-ec6d-274x234.jpg)
Розташування
Відступи, ширина блоків, колонки.
Оформлення блоків
Рамки, заокруглення, тіні.
Як виглядає CSS-код?
Розгляньмо простий приклад:
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
Цей код означає:
h1 — заголовок першого рівня, до якого застосовуються правила;
color: blue; — зробити текст синім;
font-size: 36px; — установити розмір тексту 36 пікселів;
text-align: center; — вирівняти текст по центру;
{ } — містять правила оформлення;
; — відокремлює одне правило від іншого.
Правила CSS складаються з селектора, який визначає елементи, і набору властивостей зі значеннями.
5. Як CSS пов’язаний із WordPress?
У нашому проєкті ми працюємо з уже створеним сайтом на WordPress.com. Тому важливо розуміти: для виконання практичної роботи нам не обов’язково писати CSS-код вручну. Спочатку навчимося використовувати вбудовані інструменти оформлення WordPress.
Є три основні способи оформлення.
1. Налаштування стилів теми
Змінюємо загальну кольорову гаму, шрифти, вигляд заголовків і кнопок усього сайту.
Залежно від теми: Вигляд → Редактор → Стилі або Вигляд → Налаштувати.
2. Редактор блоків
Виділяємо заголовок, абзац, зображення чи кнопку й змінюємо їхні кольори, розміри, вирівнювання та відступи, якщо відповідні параметри доступні.
3. Власний CSS-код
Дає більше контролю над оформленням. Можливість додавати власний CSS залежить від тарифу WordPress.com і доступних функцій теми.
Для нашого уроку використаємо перші два способи, а власний CSS розглянемо як наступний рівень.
1
2 з 12 балів
Практична робота № 2
«Оформлення вебсторінки засобами WordPress»
Мета роботи: оформити сторінку власного сайту відповідно до раніше визначеної цільової аудиторії та принципів вебдизайну.
Обладнання: комп’ютер із доступом до Інтернету, браузер, ваш сайт на WordPress.com.
Результат: готова вебсторінка з узгодженими кольорами, читабельним текстом, виразними заголовками та охайним розташуванням блоків.
Завдання 1. Відкрийте власний сайт
Відкрийте браузер.
Перейдіть на WordPress.com.
Увійдіть у свій обліковий запис.
Відкрийте вже створений сайт — новий створювати не потрібно.
Перейдіть до редагування головної сторінки або сторінки, над якою працювали на попередньому уроці.
Перед змінами перегляньте сторінку й визначте, що потрібно покращити.
.png)
2
2 з 12 балів
Завдання 2. Оберіть кольорову гаму
Використайте правила, які ми вивчали на уроці про вебдизайн.
Для навчального сайту можна взяти таку палітру:
Основний колір — синій
Заголовки, меню та основні елементи.
#174A7E
Фоновий колір — світло-блакитний
Фон окремих блоків і секцій.
#EAF3FA
Білий
Основний фон для зручного читання.
#FFFFFF
Акцентний колір — зелений
Кнопки та важливі посилання.
#24864B
Покроково:
Знайдіть налаштування стилів теми або оформлення сторінки.
Якщо доступні палітри кольорів, оберіть відповідну або створіть власну.
Установіть основний колір заголовків і важливих елементів.
Виберіть світлий фон, на якому добре читається текст.
Перевірте, чи достатньо контрастують текст і фон.
Не потрібно обов’язково використовувати саме ці кольори. Можна залишити власну палітру, якщо вона відповідає задуму сайту.
3
2 з 12 балів
Завдання 3. Оформіть заголовки й текст
Відкрийте сторінку в редакторі WordPress.
Виділіть головний заголовок.
Перевірте його рівень, розмір, колір і вирівнювання.
Для основного тексту виберіть читабельний шрифт і достатній розмір.
Розділіть довгі фрагменти тексту на абзаци.
Використовуйте підзаголовки для окремих розділів.
Орієнтовні розміри для навчального сайту:
Елемент | Рекомендований розмір |
|---|---|
Головний заголовок | 32–40 px |
Підзаголовок | 24–30 px |
Основний текст | 16–18 px |
Підпис до зображення | 13–15 px |
Це рекомендації, а не обов’язкові значення. У WordPress вони можуть називатися «Малий», «Середній», «Великий» або задаватися іншими одиницями.
4
2 з 12 балів
Завдання 4. Оформіть блоки та кнопки
Додайте або відредагуйте блоки на сторінці.
Мій навчальний сайт
Тут розміщено інформацію, корисні матеріали та цікаві завдання.
Навчальні матеріали
Ознайомтеся з матеріалами, виконайте завдання та перевірте свої знання.
Переглянути матеріали
Приклад оформлення. У власному сайті блоки та кнопки створюються й редагуються засобами WordPress.
Виконайте такі дії:
Зробіть головний заголовок помітним.
Оформіть один інформаційний блок із власним заголовком.
Додайте кнопку або посилання, яке веде на іншу сторінку вашого сайту.
Якщо редактор дозволяє, змініть фон блоку, відступи й заокруглення кутів.
Переконайтеся, що елементи не перевантажують сторінку.
5
Завдання 5. Перевірте результат
Збережіть зміни або натисніть «Оновити».
Відкрийте попередній перегляд сторінки.
Перевірте вигляд на комп’ютері та, якщо можливо, на телефоні.
Переконайтеся, що меню працює, текст читається, а посилання відкривають потрібні сторінки.
Важливо: назви пунктів меню та доступні налаштування можуть відрізнятися залежно від теми WordPress.com. Якщо певної опції немає, використайте доступні налаштування блоків.
6
2 з 12 балів
7. Додаткове завдання: знайомство з CSS-кодом
Для учнів, які хочуть зрозуміти, як працює CSS безпосередньо, розгляньмо ще один приклад.
body {
font-family: Arial, sans-serif;
color: #243447;
background-color: #FFFFFF;
}
h1 {
color: #174A7E;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}
Цей код задає основний шрифт і колір тексту, білий фон сторінки, синій заголовок по центру та зручну відстань між рядками абзацу.
Скопіювати цей код у довільне поле WordPress недостатньо: його потрібно додати в місце, де WordPress дозволяє застосовувати CSS. У цій практичній роботі код є навчальним прикладом — змінювати сайт за допомогою нього необов’язково.
7
2 з 12 балів
Перевір себе
1. За що відповідає CSS?
За створення облікового запису
За оформлення елементів вебсторінки
За збереження файлів на комп’ютері
2. Що визначає HTML?
Структуру та вміст вебсторінки
Лише колір фону
Лише розмір шрифту
3. Що означає color: blue; у CSS?
Зробити фон синім
Зробити текст синім
Змінити розмір тексту
4. Як у нашому проєкті найпростіше змінити оформлення сторінки?
Переписати весь сайт з нуля
Використати налаштування стилів теми та блоків WordPress
Видалити HTML
5. Навіщо перевіряти сайт на телефоні?
Щоб перевірити зручність відображення на малому екрані
Щоб змінити адресу сайту
Щоб автоматично додати CSS
8
Підсумок уроку
Сьогодні ми з’ясували, що HTML формує структуру вебсторінки, CSS визначає її зовнішній вигляд, а WordPress надає інструменти для створення та оформлення сайту.
Наступним логічним уроком буде «Верстка вебсторінок. Структура блоків та елементів сайту». На ньому можна буде перейти від візуальних налаштувань WordPress до власного CSS-коду й побачити, як він змінює вигляд нашого сайту.
Рефлексія від 0 учнів
Сподобався:
0
Так: 0
Ні: 0
Зрозумілий:
0
Так: 0
Ні: 0
Потрібні роз'яснення:
0
Ні: 0
Так: 0