Практичний проєкт «Мій перший вебсайт у Canva Pro»

Мета роботи: Навчитися створювати структуру сайту, підбирати візуальне оформлення, наповнювати сторінки контентом та публікувати готовий веб-ресурс за допомогою інструментів Canva Pro.

Частина 1: Вибір теми та структури

Для виконання роботи оберіть одну із запропонованих тем. Кожна тема має готову структуру сторінок (блоків) та рекомендації щодо наповнення.

Тема 1: Історичний лонгрід «Занепад Римської республіки»

Ед'ютейнмент-сайт (навчально-розважальний), присвячений ключовим подіям античної історії.

• Блок 1 (Головний екран): Назва сайту, епічне фонове відео або зображення Колізею/римського легіону. Кнопка «Почати подорож».

• Блок 2 (Вступ): Короткий опис періоду (I століття до н.е.) та причин кризи республіки.

• Блок 3 (Видатні діячі): Три колонки з портретами (бюстами) та короткими фактами про Юлія Цезаря, Гнея Помпея та Марка Красса (Перший тріумвірат).

• Блок 4 (Хронологія): Таймлайн з основними подіями (наприклад, перехід Рубікону).

• Блок 5 (Джерела): Посилання на історичні книги або статті.

• Оформлення: Класичний стиль. Кольори: бордовий (імператорський пурпур), золотий, мармурово-білий. Шрифти: із засічками для заголовків (наприклад, Cinzel або Playfair Display), класичні без засічок для тексту.

Тема 2: Кіберспортивний блог «Огляд турнірів з CS2»

Сучасний динамічний сайт для фанатів кіберспорту.

• Блок 1 (Головний екран): Яскравий заголовок, логотип улюбленої команди (наприклад, NaVi), на фоні — скріншот з гри або фото арени. Кнопка «Останні результати».

• Блок 2 (Новини): Текстовий блок про перехід на рушій Source 2 або оновлення мап.

• Блок 3 (Склад команди): Картки гравців з їхніми нікнеймами, фотографіями та ігровими ролями (снайпер, капітан тощо).

• Блок 4 (Розклад матчів): Таблиця або список найближчих ігор команди на турнірах.

• Блок 5 (Підписка/Контакти): Форма "Підписатися на оновлення" та посилання на соцмережі.

• Оформлення: Геймерський, сучасний стиль. Кольори: темний фон (чорний/темно-сірий) з неоновими акцентами (жовтий, кислотно-зелений або кібер-синій). Шрифти: жирні, рубані, футуристичні (наприклад, Anton, Montserrat).

Частина 2: Покрокова інструкція виконання (Крок за кроком)

Крок 1: Створення основи проєкту

1. Відкрийте Canva та переконайтеся, що ви увійшли в акаунт з доступом Pro.

2. На головній сторінці натисніть фіолетову кнопку «Створити дизайн» (у правому верхньому куті).

3. У пошуковому рядку введіть «Вебсайт» і оберіть відповідний формат.

4. Перед вами з'явиться порожній робочий простір. У верхній панелі натисніть на назву файлу (за замовчуванням "Дизайн без назви") та перейменуйте його відповідно до вашої теми.

Крок 2: Формування структури (Блоків)

1. Кожен слайд у Canva для сайтів дорівнює одному блоку (сектору), який користувач бачитиме при прокручуванні вниз.

2. Створіть 5 сторінок (блоків) відповідно до обраної структури теми, натискаючи кнопку «+ Додати сторінку» внизу екрана.

3. У лівому верхньому куті кожної сторінки натисніть «Додати нотатки до сторінки» (або двічі клікніть на номер сторінки) і впишіть її назву (наприклад, "Головна", "Діячі", "Розклад"). Це дуже важливо для майбутньої навігації сайту.

Крок 3: Налаштування фірмового стилю (Бренд-кіт)

1. Перейдіть у вкладку «Стилі» на лівій бічній панелі.

2. Оберіть кольорову палітру, яка відповідає вашій темі (історичній або кіберспортивній).

3. Оберіть комбінацію шрифтів. Застосуйте їх до всіх сторінок кнопкою «Застосувати до всіх сторінок».

Крок 4: Наповнення контентом та дизайн

Блок 1 (Головний екран):

1. Перейдіть у вкладку «Елементи» $\rightarrow$ «Фото» або «Відео». Знайдіть тематичне фонове зображення та розтягніть його на весь екран (або клікніть правою кнопкою миші $\rightarrow$ «Установити зображення як тло»).

2. Натисніть клавішу «T» на клавіатурі, щоб швидко додати текст. Напишіть головний заголовок сайту.

3. Знайдіть в «Елементах» фігуру «Прямокутник із заокругленими кутами», зробіть її контрастного кольору, покладіть зверху текст — це буде ваша кнопка.

Блоки 2-4 (Інформаційні):

1. Використовуйте інструмент «Сітки» (Елементи - Сітки), щоб рівно розмістити кілька фотографій поруч (наприклад, для трьох історичних постатей або гравців команди).

2. Завантажте власні зображення через вкладку «Передані», якщо потрібних немає в бібліотеці Canva.

3. Застосуйте функцію Canva Pro «Видалення фону» (виділіть фото - Редагувати фото - Видалення фону), щоб органічно вписати портрети в дизайн сайту.

4. Додайте текстові описи під кожним зображенням.

Крок 5: Налаштування інтерактивності (Гіперпосилання)

1. Поверніться до Блоку 1. Виділіть вашу створену "кнопку" (і текст, і фігуру разом).

2. Натисніть правою кнопкою миші та оберіть «Посилання» (або значок ланцюга на верхній панелі).

3. У вікні, що з'явиться, оберіть сторінку вашого проєкту (наприклад, посилання на Блок 3 "Видатні діячі" або "Склад команди"). Тепер при кліку на кнопку сайт плавно прокрутиться до цього блоку.

Крок 6: Перевірка адаптивності

1. На верхній панелі (біля кнопки публікації) натисніть іконку «Попередній перегляд» (у вигляді ока або екрана).

2. У верхньому правому куті вікна перегляду перемикайтеся між іконками комп'ютера та смартфона.

3. Перевірте, чи не з'їжджає текст і чи добре видно зображення на мобільному екрані.

Крок 7: Публікація сайту

1. Закрийте попередній перегляд і натисніть кнопку «Опублікувати сайт» у верхньому правому куті.

2. Поставте галочку «З навігацією» (щоб з'явилося меню сайту з назвами ваших блоків).

3. Оберіть «Безкоштовний домен» і натисніть «Продовжити».

4. У полі URL придумайте коротку назву англійською (наприклад, roman-republic-info або cs2-navi-fan).

5. У полі опис напишіть 1-2 речення про сайт (це потрібно для SEO).

6. Натисніть «Опублікувати». Дочекайтеся завершення процесу та скопіюйте посилання на ваш готовий сайт!