Етапи створення веб-сайтів. Конструювання сайтів. 1 Перевірка знань LearningApps • https://learningapps.org/4913427 • https://learningapps.org/6843735 2 Ти дізнаєшся: Про поняття інформаційної структури сайту Які бувають види вебсайтів Як визначається важливість структури при створенні дизайну веб-сторінки 3 Інформаційна структура сайту – це спосіб організації інформаційних матеріалів сайту разом з усіма зв'язками, що дозволяють цим матеріалами взаємодіяти один з одним. 4 Інформаційна структура сайту Модель сайту Лінійна Ієрархічна «Павутина» 5 Інформаційна структура сайту 6 Інформаційна структура сайту (приклад) 7 Інформаційна структура сайту • • • • Алфавітна організація Хронологічна організація структури Географічна організація структури Цільова аудиторія 8 Інформаційний вміст Домашня (головна) Веб спільноти Інтернет-магазини Портали Блоги Типи веб-сторінок Типи сайтів Статичні веб-сайти Веб-каталог Форум Чат Сторінка розділу веб-сайту 9 3 правила Основні вимоги до структури сайту Структура повинна бути максимально зрозумілою відвідувачу Вкладеність сторінок каталогу повинна бути максимально оптимізована і логічна Проста навігація 10 Створення облікового запису 11 Заходимо на сторінку Google. Натискаємо «Увійти». 12 Вибираємо «Вибрати інший обліковий запис». Потім «Створити обліковий запис» 13 Заповнюємо поля. Після натискаємо «Далі» 14 За потребою заповнюємо додаткову інформацію. Після натискаємо «Далі» 15 Підтверджуємо номер телефону, надіславши на нього повідомлення 16 За потребою вмикаємо додаткові можливості. 17 Ознайомлюємося та погоджуємося з вимогами 18 Тепер у нас є обліковий запис 19 Для переходу в блог натискаємо на 9 квадратиків та обираємо додаток «Blogger» 20 СТВОРЕННЯ БЛОГУ 21 Натискаємо «Створити власний блог» 22 Заходимо до власного облікового запису, вводячи відповідні данні. Після натискаємо «Далі» 23 Вводимо ім’я, під яким будуть нас бачити інші користувачі. Та продовжуємо реєстрацію. 24 Тепер ми знаходимося в додатку Blogger. Інформацію, яка може заважати закриваємо. 25 Для створення першого блогу натискаємо «Новий блог», або «Створити» 26 «Заголовок» - назва сайту «Адреса» - це онлайн-адреса (доменне ім'я), який відвідувачі набирають в браузер 27 Задаємо: «Заголовок», «Адресу». Обраємо тему. Та створюємо блог. Якщо адреса не доступна, значить блог з таким адресом існує. 28 Тепер ви знаходимося в створеному блозі. Його можна переглянути натиснувши «Переглянути блог». 29 Таким його бачить користувач, який зайшов на ваш блог. Тепер почнімо налаштовувати ваш блог 30 Створимо опис блогу для пошукових систем. Для цього в адміністративній панелі обираємо «Налаштування» 31 У випадаючому вікні обираємо «Налаштування пошуку» 32 Як бачите опція «Опис» поки що вимкнена Натискаємо «Редагувати» 33 Далі натискаємо «Так» 34 Далі потрібно написати опис вашого блогу. Натискаємо «Зберегти зміни» Опис необхідний для полегшення пошуку його в Інтернеті 35 ОГЛЯД АДМІНІСТРАТИВНОЇ ПАНЕЛІ БЛОГУ 36 Перша вкладка Публікації. Саме тут ми будемо писати. Оформлювати та публікувати свої повідомлення 37 Далі йде Статистика 38 Тут ми можемо скільки відвідувачів було на нашому блозі, які публікації користуються попитом 39 Наступна вкладка Коментарі. Вже з назви зрозуміло, що саме тут зможемо побачити коментарі до блогу та публікацій 40 Вкладка Прибутки потрібна тим, хто хоче заробляти на своєму блозі. Ми створюємо навчальний блог. Тому детально на цьому пункті зупинятись не будемо 41 Вкладка Сторінки потрібна для створення багатосторінкового блогу. Детальніше розберемся трохи пізніше 42 Наступна вкладка Макет. Вона необхідна для змінення зовнішнього вигляду нашого блогу 43 Далі йде вкладка Тема. Тут можна змінити Тему нашого блогу, робити імпорт та експорт свого блогу 44 Далі йде вкладка Налаштування Тут ми будемо задавати основні налаштування блогу Наприкла, змінити електронну пошту до якого прив'язаний сайт, змінити мову налаштування тощо 45 Поговоримо трохи детальніше про Імпорт та Експорт нашого блогу. Для цього обираємо вкладку Тема У верхньому правому кутку знаходимо кнопку Резервне копіювання та відновлення 46 У вікні що з'явилось ви можете завантажити всі налаштування вашого блогу собі не комп'ютер. Або якщо ви знайшли нестандартний шаблон для блогу саме тут ви можете завантажити його на сайт. Рекомендується робити резервне копіювання перед будь-якими змінами. Тому що якщо щось не вийде, у вас завжди буде копія і можна буде відновити блог до попереднього стану 47 СТВОРЕННЯ БАГАТОСТВОРІНКОВОГО БЛОГУ 48 Якщо подивитись на будь-який блог, можна помітити, що він складається з кількох сторінок. Наприклад, головна сторінка, 3 клас, 4 клас, Рекомендую до перегляду тощо 49 Спробуємо створити ці сторінки на вашому блозі Для цього переходимо на вкладку Сторінки. Натискаємо Створити сторінку 50 Вводимо її назву 51 Натискаємо Опублікувати 52 Як бачите наша сторінка з'явилася в переліку сторінок. Далі натискаємо Створити сторінку, що створити ще одну сторінку. Повторюємо цю процедуру доти, доки не створимо всі необхідні нам сторінки Далі натискаємо Переглянути блог 53 Сторінки, які ми додали ще не з'явилися. Розберемося що требі зробити. 54 Щоб ваші сторінки з'явилися, переходимо у вкладку Макет 55 Якщо полистати цю сторінку то можемо не побачимо гаджет зі сторінками, або побачити тільки не активним 56 Якщо гаджет не знайшли натискаємо «Додати гаджет» там де хочемо розмістити сторінки 57 У новому вікні ми шукаємо Сторінки, нажимаємо на Плюс 58 З'явилося ще одне вікно. Саме тут вибираємо ті сторінки, які ми хоче щоб відображались обираємо порядок сторінок та зберігаємо 59 Переходимо до нашого блогу, оновлюємо його і бачимо що сторінки з'явились 60 Якщо гаджет сторінки не активний то натискаємо на олівець и змінюємо 61 Вмикаємо гаджет. Обираємо потрібні сторінки їх порядок та зберігаємо. Тепер цей гаджет активний. 62 Переходимо до нашого блогу, оновлюємо його і бачимо що сторінки з'явились 63 Обовьязково у правому верхньому куті нетискаємо Зберегти компонування (Сохранить расположение) 64 Робота з комп'ютером Завдання 1. Перегляньте сайт нашої школи – Яку інформаційну структуру він має? – Чи відповідає дана структура вимогам? – Побудуйте структуру сайту. Результат відправити на електронну пошту zsembon@gmail.com. В темі вказати «№ класу, Прізвище, ім’я» 65 Домашнє робота Створення Власного блогу Завдання 1. Обрати тему вашого блогу (всі теми знаходяться на наступному слайді). Побудуйте структуру до блогу за обраною темою (мінімум 6 сторінок). Результат відправити на електронну пошту zsembon@gmail.com. В темі вказати «№ класу, Прізвище, ім’я» Завдання 2. Створити блог за обраною темою. Налаштуйте опис блогу. Створити 6 сторінки згідно структурі блогу. Завдання 3. ОБОВ’ЯЗКОВО Заповнити анкету «Тема блогу» за посиланням. 66 Теми блогу 1. 2. 3. 4. 5. 6. 7. 8. 9. Іноземна мова Українська мова Українська література Зарубіжна література Алгебра Геометрія Фізика Інформатика Хімія 10. 11. 12. 13. 14. 15. 16. 17. Біологія Географія Історія України Всесвітня історія Мистецтво Основи здоров'я Фізична культура Трудове навчання 67
