Технології створення сайтів. CMS. WordPress та його можливості

Крок 1. Відкриваємо WordPress

1. Запустіть браузер Google Chrome, Microsoft Edge або Firefox.

2. У рядку адреси введіть:

wordpress.com

1. Натисніть Enter.

2. Відкриється головна сторінка WordPress.

Крок 2. Створюємо обліковий запис

Якщо облікового запису ще немає:

1. Натисніть Get started / Почати, або перейдіть на Інформаційну панель для подальшого ознайомлення

2. Введіть адресу електронної пошти. ім'япрізвище@radekhivspec.ukr.education

3. Створіть пароль.

4. Вкажіть ім'я користувача, якщо система його запропонує.

5. Підтвердьте реєстрацію.д

Увага! Якщо це шкільне заняття, краще використовувати навчальний обліковий запис, а не особистий акаунт учня.

Крок 3. Починаємо створення сайту

Після входу відкриється панель WordPress.

Знайдіть кнопку:

Create website / Створити сайт

Натисніть її.

WordPress запропонує вказати основну інформацію про майбутній сайт.

https://wordpress.com/wordpress-free/

Крок 4. Вказуємо назву сайту

У полі Site name / Назва сайту введіть:

Мій навчальний сайт

Назва може бути іншою.

Наприклад:

• «Мій сайт про Україну»;

• «Світ робототехніки»;

• «Моя школа»;

• «Програмування для початківців»;

• «Моє хобі».

Натисніть Continue / Продовжити.

Вибираємо адресу сайту

WordPress запропонує вибрати адресу.

Наприклад:

miy-navchalnyi-sait.wordpress.com

або інший доступний варіант.

Завдання учня

Придумайте коротку адресу, яка відповідає темі вашого сайту.

Наприклад:

robotics-school.wordpress.com

або

my-computer-site.wordpress.com

Якщо обрана адреса вже зайнята, WordPress запропонує інші варіанти.

Крок 6. Вибираємо тариф

WordPress може запропонувати платні плани.

Для навчальної роботи шукаємо можливість:

Free / Безкоштовний

Якщо доступний безкоштовний варіант, обираємо його.

Не вводьте дані банківської картки для виконання цієї навчальної роботи

Крок 7. Відкриваємо панель керування

Після створення сайту відкриється Dashboard / Панель керування.

Саме тут ми будемо керувати сайтом.

У панелі можна побачити розділи на зразок:

• Posts — записи;

• Pages — сторінки;

• Media — медіафайли;

• Appearance — зовнішній вигляд;

• Settings — налаштування;

• Comments — коментарі.

4

Крок 8. Налаштовуємо назву сайту

У панелі керування знайдіть:

Settings → General

або відповідний розділ налаштувань сайту.

Перевірте:

Site Title / Назва сайту

Напишіть:

Мій навчальний сайт

У полі опису можна написати:

Навчальний сайт учня з інформатики

Збережіть зміни.

Крок 9. Вибираємо дизайн сайту

Тепер змінимо зовнішній вигляд.

У меню відкрийте:

Appearance → Themes

або Зовнішній вигляд → Теми.

Перед вами з'являться готові шаблони.

Завдання

1. Перегляньте запропоновані теми.

2. Виберіть одну тему.

3. Натисніть Preview / Перегляд, якщо така кнопка доступна.

4. Перегляньте, як буде виглядати сайт.

5. Натисніть Activate / Активувати.

Крок 10. Створюємо головну сторінку

Тепер створимо основну сторінку сайту.

У меню відкрийте:

Pages → Add New Page

або:

Сторінки → Додати нову сторінку

У полі назви напишіть:

Головна

Додаємо текст

У редакторі натисніть на область введення тексту.

Напишіть:

Вітаю на моєму навчальному сайті!

На цьому сайті я буду розміщувати навчальні матеріали, цікаву інформацію та власні проєкти з інформатики.

Крок 11. Додаємо заголовок

Натисніть + для додавання нового блоку.

Виберіть:

Heading / Заголовок

Напишіть:

Ласкаво прошу!

Заголовок можна зробити більшим або меншим.

Крок 12. Додаємо зображення

На головній сторінці натисніть:

+ → Image / Зображення

Далі виберіть:

Upload / Завантажити

Виберіть зображення з комп'ютера.

Наприклад, фотографію:

• комп'ютера;

• робототехніки;

• програмування;

• природи;

• школи.

Після завантаження зображення з'явиться на сторінці.

Крок 13. Зберігаємо сторінку

У верхній частині редактора натисніть:

Save / Зберегти

або Publish / Опублікувати.

Якщо система запитає підтвердження публікації — підтвердіть.

Тепер сторінка доступна на сайті.

Крок 14. Створюємо сторінку «Про сайт»

Знову відкрийте:

Pages → Add New

Назва:

Про сайт

Додайте текст:

Про сайт

Цей сайт створено під час практичного заняття з інформатики.

На сайті будуть розміщуватися навчальні матеріали, цікаві факти, проєкти та результати моєї роботи.

Натисніть Publish / Опублікувати.

Крок 15. Створюємо сторінку «Контакти»

Знову:

Pages → Add New

Назва:

Контакти

Додайте:

Контакти

Автор сайту: Учень/учениця ___ класу.

Навчальний заклад: __________________.

Предмет: Інформатика.

Не потрібно розміщувати на відкритому сайті домашню адресу, номер телефону чи інші приватні дані.

Натисніть:

Publish

Крок 16. Створюємо запис

Тепер познайомимося з другим важливим елементом WordPress — записами.

Відкрийте:

Posts → Add New Post

або:

Записи → Додати новий запис

Назва запису

Напишіть:

Моя перша публікація

У текстовому полі напишіть:

Сьогодні я створив свій перший сайт за допомогою системи керування вмістом WordPress.

Під час практичної роботи я навчився створювати сторінки, додавати текст і зображення та налаштовувати зовнішній вигляд сайту.

Крок 17. Додаємо зображення до запису

Натисніть:

+ → Image

Завантажте зображення.

Наприклад:

💻 комп'ютер
🤖 робот
🌐 вебсайт
🐍 Python

Після цього натисніть:

Publish

Крок 18. Додаємо категорію

Під час редагування запису знайдіть:

Categories / Категорії

Натисніть:

Add New Category

Створіть категорію:

Інформатика

Поставте її для свого запису.

Крок 19. Створюємо меню сайту

Тепер потрібно зробити так, щоб відвідувач міг переходити між сторінками.

Відкрийте:

Appearance → Editor

або відповідний розділ редагування сайту.

Знайдіть:

Navigation / Навігація

У меню додайте:

• Головна

• Про сайт

• Контакти

Порядок можна встановити таким:

Головна → Про сайт → Контакти

Збережіть зміни.

Крок 20. Перевіряємо готовий сайт

Тепер відкрийте свій сайт у новій вкладці.

Перевірте:

☑ Чи є назва сайту?

☑ Чи відкривається головна сторінка?

☑ Чи є сторінка «Про сайт»?

☑ Чи є сторінка «Контакти»?

☑ Чи працює меню?

☑ Чи відображається зображення?

☑ Чи відкривається перший запис?

☑ Чи немає помилок у тексті?

Крок 21. Перевіряємо сайт на телефоні

Скопіюйте адресу сайту.

Відкрийте її на смартфоні.

Перевірте:

• чи правильно відображається текст;

• чи видно зображення;

• чи працює меню;

• чи можна перейти між сторінками.

Це важливо, тому що сучасні сайти повинні нормально працювати не лише на комп'ютерах, а й на мобільних пристроях.

Практичне завдання для учня

Створіть власний сайт

Тема сайту:

«Моє хобі»

або за вибором:

1. Моя школа

2. Мій клас

3. Робототехніка

4. Комп'ютерні технології

5. Програмування

6. Спорт

7. Музика

8. Подорожі

9. Моя професія майбутнього

10. Цікаві технології

На сайті обов'язково повинні бути:

Додаткове завдання ⭐

Спробуйте додати на сайт:

1. Кнопку

Наприклад:

Дізнатися більше

2. Галерею

Додайте 3–5 зображень.

3. Відео

Якщо WordPress і вибрана тема дозволяють, додайте навчальне відео.

4. Посилання

Додайте посилання на корисний навчальний ресурс.

Наприклад:

Корисні ресурси

Що потрібно запам'ятати

CMS

CMS — система керування вмістом сайту.

Вона дозволяє створювати та змінювати сайт без необхідності вручну створювати кожну сторінку програмним кодом.

WordPress

WordPress — популярна система керування вмістом, за допомогою якої можна створювати:

• блоги;

• навчальні сайти;

• сайти організацій;

• портфоліо;

• новинні сайти;

• інтернет-магазини;

• інформаційні ресурси.

Сторінка

Page — окрема постійна сторінка сайту.

Наприклад:

Головна
Про нас
Контакти

Запис

Post — публікація, яку можна регулярно додавати на сайт.

Наприклад:

«Ми провели шкільну олімпіаду»

Контрольні запитання

1. Що таке CMS?

2. Для чого використовують CMS?

3. Що таке WordPress?

4. Яка різниця між сторінкою та записом?

5. Для чого потрібні теми WordPress?

6. Що таке меню сайту?

7. Для чого використовують категорії?

8. Як додати зображення на сторінку?

9. Як створити нову сторінку?

10. Чому важливо перевіряти сайт на смартфоні?

Звіт про практичну роботу

Учень повинен здати:

1. Адресу створеного сайту.

2. Скріншот головної сторінки.

3. Скріншот панелі керування WordPress.

4. Скріншот сторінки «Про сайт».

5. Скріншот створеного запису.

Оцінювання

12 балів

Результат: учень повинен отримати працюючий невеликий сайт, створений у WordPress, та продемонструвати, що вміє самостійно керувати його вмістом.