Створення сайту

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

Тема: Створення особистого сайту за допомогою онлайн-конструктора Canva.

Мета:

• Ознайомитися з інтерфейсом та можливостями Canva для створення вебсайтів.

• Навчитися обирати та налаштовувати шаблони сайтів.

• Здобути практичні навички додавання та редагування контенту: тексту, зображень, посилань.

• Опанувати процес публікації простого односторінкового сайту (лендінгу) на безкоштовному домені Canva.

• Створити власний функціональний міні-сайт (наприклад, сайт-візитку, просте портфоліо або сторінку про себе).

Обладнання та матеріали:

• Комп'ютер або ноутбук з доступом до Інтернету.

• Веб-браузер (Google Chrome, Firefox, Edge тощо).

• Обліковий запис Canva (безкоштовний або Pro). Якщо немає, його потрібно буде створити.

• Підготовлений контент (за бажанням):

  • Ваше фото (портрет або інше релевантне).

  • Короткий текст про себе, свої навички, інтереси чи мету створення сайту.

  • Приклади робіт (фото, посилання) – якщо створюєте портфоліо.

  • Контактні дані (email, посилання на соціальні мережі – за бажанням).

Хід роботи:

Крок 1: Вхід у Canva та Пошук Шаблонів Сайтів

1. Відкрийте веб-браузер та перейдіть на сайт canva.com.

2. Увійдіть у свій обліковий запис Canva або зареєструйтеся, якщо у вас його немає (можна використати Google, Facebook акаунт або email).

3. На головній сторінці Canva знайдіть рядок пошуку. Введіть ключові слова, наприклад: вебсайт, сайт, сайт-портфоліо, особистий сайт, landing page. Canva запропонує різні типи шаблонів.

4. Натисніть на опцію "Вебсайт" або подібну, щоб перейти до галереї шаблонів.

Крок 2: Вибір Шаблону

1. Перегляньте запропоновані шаблони. Зверніть увагу на їх структуру та дизайн. Шукайте шаблон, який візуально вам подобається і відповідає меті вашого сайту (наприклад, якщо це портфоліо – шукайте шаблон з галереєю зображень; якщо сайт-візитка – з акцентом на контактну інформацію та коротке інфо).

2. Наведіть курсор на шаблон, щоб побачити його попередній перегляд. Деякі шаблони мають кілька сторінок (секцій).

3. Коли знайдете підходящий шаблон, натисніть на нього, а потім на кнопку "Налаштувати цей шаблон" (Customize this template). Відкриється редактор Canva.

Примітка: Ви також можете обрати "Створити порожній сайт", але для першого разу рекомендується використовувати шаблон.

Крок 3: Ознайомлення з Редактором Canva

1. Центральна область: Це ваше робоче полотно, де ви бачите та редагуєте сайт. Сайт в Canva часто є однією довгою сторінкою, розділеною на секції.

2. Ліва бічна панель: Тут знаходяться основні інструменти:

   • Шаблони (Templates): Можна змінити шаблон.

   • Елементи (Elements): Доступ до фігур, ліній, іконок, фото, відео, графіки.

   • Завантаження (Uploads): Сюди ви завантажуєте власні фото та відео.

   • Текст (Text): Додавання заголовків, підзаголовків, основного тексту.

   • Стилі (Styles): Швидка зміна колірної палітри та шрифтів для всього сайту.

   • Фон (Background): Зміна фону сторінки/секції.

   • Та інші інструменти (залежно від вашого тарифу та налаштувань).

3. Верхня панель: Містить назву вашого дизайну, кнопки "Поділитися", "Опублікувати вебсайт", а також опції скасування/повторення дій.

Крок 4: Редагування Структури Сайту (Секції/Сторінки)

1. Сайти в Canva часто складаються з кількох секцій (сторінок), які відображаються одна під одною. Ви можете бачити їх мініатюри внизу екрану або натиснувши на іконку "Показати сторінки" (Grid view).

2. Додавання секції: Натисніть кнопку "+" між секціями або під останньою секцією.

3. Дублювання секції: Наведіть курсор на секцію (сторінку) в режимі сітки або під нею і натисніть іконку "Дублювати сторінку".

4. Видалення секції: Натисніть на іконку кошика біля непотрібної секції.

5. Зміна порядку секцій: У режимі сітки (Grid view) перетягніть мініатюри сторінок, щоб змінити їх порядок.

6. Визначте основні блоки вашого сайту:

   • Привітання / Головний екран (з вашим ім'ям/назвою та фото).

   • Про мене / Біографія (короткий текст).

   • Мої роботи / Портфоліо (якщо потрібно, з прикладами).

   • Послуги (якщо пропонуєте).

   • Контакти (email, соцмережі).

Крок 5: Заповнення Контентом – Текст

1. Редагування існуючого тексту: Клацніть двічі на будь-який текстовий блок у шаблоні. Виділіть текст і напишіть свій власний.

2. Зміна форматування: Коли текстовий блок виділено, зверху з'явиться панель форматування. Тут можна змінити шрифт, розмір, колір, вирівнювання, зробити текст жирним чи курсивом.

3. Додавання нового тексту: Перейдіть на ліву панель, виберіть Текст (Text). Натисніть "Додати заголовок", "Додати підзаголовок" або "Додати основний текст". Перетягніть текстовий блок у потрібне місце на сторінці та введіть текст.

4. Заповніть секції: Напишіть короткий, змістовний текст для кожної секції вашого сайту (Про себе, Контакти тощо). Уникайте довгих абзаців.

Крок 6: Заповнення Контентом – Візуальні Елементи (Зображення, Іконки)

1. Заміна зображень шаблону:

   • Перейдіть на ліву панель у Завантаження (Uploads).

   • Натисніть "Завантажити медіа" та виберіть ваше фото з комп'ютера.

   • Після завантаження просто перетягніть ваше фото з панелі завантажень на місце зображення в шаблоні. Canva автоматично його замінить і впише в рамку (якщо вона є).

2. Додавання нових зображень:

   • Ви можете використати власні завантажені фото або знайти зображення в бібліотеці Canva (Елементи -> Фото).

   • Перетягніть обране фото на сторінку. Змініть його розмір, перетягуючи за куточки.

3. Додавання іконок (наприклад, для соцмереж):

   • Перейдіть в Елементи.

   • У рядку пошуку введіть назву іконки (наприклад, "instagram icon", "email icon", "phone icon").

   • Виберіть потрібну іконку (багато безкоштовних). Перетягніть її на сторінку, налаштуйте розмір та колір (якщо можливо).

Крок 7: Додавання Посилань

1. Посилання на текст: Виділіть текст, який хочете зробити посиланням (наприклад, адресу email або назву соцмережі). На панелі форматування зверху натисніть на іконку ланцюжка ("Посилання"). Вставте URL-адресу (наприклад, https://www.instagram.com/yourprofile) або для email введіть mailto:your.email@example.com. Натисніть Enter або "Застосувати".

2. Посилання на іконки або кнопки: Клацніть на елемент (іконку, фігуру, кнопку). У правому верхньому куті елемента з'явиться іконка ланцюжка. Натисніть її та вставте URL-адресу.

3. Перевірте, чи додали посилання на ваші соцмережі, email або інші важливі ресурси у секції "Контакти".

Крок 8: Налаштування Загального Стилю

1. Кольори: Якщо вам не подобається палітра шаблону, перейдіть у Стилі (Styles) на лівій панелі. Тут можна застосувати готові комбінації кольорів та шрифтів або налаштувати власні.

2. Шрифти: Переконайтеся, що шрифти на сайті читабельні та виглядають гармонійно. Не використовуйте забагато різних шрифтів (2-3 достатньо). Змінити шрифти можна як через панель Стилі, так і для кожного текстового блоку окремо.

3. Фон: Клацніть на фон секції, щоб змінити його колір або додати фонове зображення (Фон на лівій панелі).

4. Перегляньте весь сайт: Переконайтеся, що всі елементи вирівняні, кольори та шрифти послідовні у всіх секціях.

Крок 9: Попередній Перегляд Сайту

1. У правому верхньому куті редактора знайдіть кнопку "Попередній перегляд" (Preview) або іконку ока. Натисніть її.

2. Ваш сайт відкриється в режимі перегляду. Перевірте, як він виглядає.

3. Важливо: У режимі перегляду зверху є перемикач між виглядом на комп'ютері (десктоп) та мобільному телефоні. Обов'язково перевірте мобільну версію! Canva намагається адаптувати сайт автоматично, але іноді елементи можуть зміщуватися або текст ставати нечитабельним. Поверніться в редактор і внесіть корективи, якщо потрібно.

4. Клацніть на всі посилання, щоб переконатися, що вони працюють правильно.

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

1. Коли ви задоволені результатом, натисніть кнопку "Опублікувати вебсайт" (Publish Website) у правому верхньому куті.

2. Canva запропонує кілька варіантів:

   • Безкоштовний домен Canva: Це виглядає приблизно так yourname.my.canva.site. Це найкращий варіант для цієї практичної роботи. Виберіть цю опцію.

   • Придбати новий домен: Canva запропонує купити унікальне доменне ім'я (платно).

   • Використати мій існуючий домен: Якщо у вас вже є куплений домен (платно і потребує додаткових налаштувань DNS).

3. Вибравши "Безкоштовний домен", натисніть "Продовжити".

4. Вам буде запропоновано ввести першу частину URL (піддомен), наприклад, ваше ім'я чи псевдонім. Canva перевірить, чи вільне це ім'я.

5. Налаштування сайту:

   • Назва сторінки у браузері (Site description/Browser tab preview): Введіть коротку назву вашого сайту (напр., "Особистий сайт [Ваше ім'я]").

   • Опис сайту (Site description): Короткий опис для пошукових систем (необов'язково для цієї роботи).

   • Дозволи (Permissions): Переконайтеся, що не стоїть галочка "Захистити паролем" (якщо не потрібно) і що сайт буде видимий для всіх. Можна поставити галочку "Приховати мій сайт від пошукових систем", якщо не хочете, щоб його індексував Google.

6. Перегляньте налаштування і натисніть "Опублікувати" (Publish).

7. Canva підготує ваш сайт. Це може зайняти кілька секунд або хвилину.

8. Після публікації ви побачите вікно з посиланням на ваш сайт. Скопіюйте це посилання! Воно вам знадобиться для перевірки та здачі роботи.

Крок 11: Перевірка та Здача Роботи

1. Відкрийте скопійоване посилання в новій вкладці браузера (або в режимі інкогніто), щоб переконатися, що сайт доступний і виглядає так, як ви планували.

2. Ще раз перевірте роботу всіх посилань та відображення на мобільному пристрої (можна змінити розмір вікна браузера або використати інструменти розробника F12).