Google Sites | Google Sites | Створення електронних навчальних матеріалів Навчальна Програма

<div class="xblock xblock-public_view xblock-public_view-vertical" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="VerticalStudentView" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="vertical" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@vertical+block@9d3a184b350647c5b167ea43497cbe2b" data-request-token="d9adbeaa51ad11f09e5dfaea3c1aae8f" data-graded="False" data-has-score="False"> <div class="vert-mod"> <div class="vert vert-0" data-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@02bf8375048f480fa71d39c8e6827fef"> <div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="XBlockToXModuleShim" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="html" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@02bf8375048f480fa71d39c8e6827fef" data-request-token="d9adbeaa51ad11f09e5dfaea3c1aae8f" data-graded="False" data-has-score="False"> <script type="json/xblock-args" class="xblock-json-init-args"> {"xmodule-type": "HTMLModule"} </script> <p style="text-align: center;"><img height="auto" width="640" src="/assets/courseware/v1/70596bfb9f99c3491c8c9f25f672fc4d/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/m6_t5_GSite_img1_header.png" alt="picture1" /></p> <div style="border: 2px solid #253777; box-shadow: #c3cad3 0px 0px 10px; padding: 16px; margin-bottom: 16px; border-radius: 8px; background-color: #b1d5e4; text-align: justify;"><strong>Google Сайти </strong> — це безкоштовний і простий у використанні інструмент від Google, що дозволяє створювати вебсайти без жодних знань у програмуванні чи вебдизайні</div> <p style="text-align: justify;">Google Sites — це відмінний вибір, коли вам потрібен швидкий, безкоштовний і простий спосіб розмістити інформацію онлайн без необхідності занурюватися в технічні деталі веб-розробки.</p> <p></p> <p></p> <p></p> <p></p> <div style="background-color: #ddf2d5 !important; border: 1px solid lightgrey; border-radius: 5px; padding: 16px; box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%); margin: 0 8px 0 0;"> <div style="display: flex; align-items: center;"><img src="/assets/courseware/v1/fcf41b41a71b41736bb700067b403f33/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/like_plus_PNG.png" alt="picture" style="width: 105px; max-width: 30%; margin-bottom: 0px;" /> <p style="margin-top: 0px; margin-bottom: 0px; padding-left: 20px; font-size: 120%;"><span style="color: #116062;"> <b>Переваги використання Google Site</b> </span></p> </div> <ul> <ul> <ul> <li><strong>Інтуїтивний візуальний редактор: </strong> Створюйте сторінки без кодування, використовуючи простий інтерфейс перетягування.</li> <li><strong>Глибока інтеграція з Google Workspace:</strong> <ul> <li>Документи, таблиці, презентації з Google Drive (Docs, Sheets, Slides).</li> <li>Відео з YouTube.</li> <li>Форми для опитувань чи збору даних з Google Forms.</li> <li>Фотографії з Google Photos.</li> </ul> </li> <li><strong>Адаптивний дизайн (Responsive Design): </strong> Ваш сайт автоматично підлаштовується під будь-який пристрій — комп'ютер, планшет чи смартфон. Це гарантує зручний перегляд для всіх відвідувачів.</li> <li><strong>Спільна робота в реальному часі:</strong> Кілька людей можуть одночасно редагувати сайт, бачачи зміни одне одного.</li> <li><strong>Контроль доступу: </strong> Вирішуйте, хто може переглядати ваш сайт: усі в інтернеті чи лише запрошені вами особи.</li> <li><strong>Безкоштовність: </strong> Сервіс є повністю безкоштовним для користувачів Google-акаунтів.</li> </ul> </ul> </ul> </div> <h3 style="padding-top: 24px;"><span style="color: #004984; font-weight: bold; font-size: 130%;"> Для чого можна використовувати Google Sites?</span></h3> <p style="margin-bottom: 1px; font-size: 80%;"><em>Натисніть на інтерактивні елементи, щоб дізнатись більше</em></p> <p></p> <div class="container-dm-pic3"> <div class="dm-pic3"> <div class="dm-sc-collaps-wrapper"> <div class="dm-collaps-wrap"><button class="dm-collaps"> <i class="fa fa-angle-down" aria-hidden="true"></i><b>1. В освіті</b> </button> <div class="dm-collaps-content"> <div style="display: flex;"> <div style="padding-left: 25px;"> <ul> <ul> <li>Створити сайт з навчальними матеріалами.</li> </ul> </ul> </div> </div> </div> </div> </div>   <div class="dm-sc-collaps-wrapper"> <div class="dm-collaps-wrap"><button class="dm-collaps"> <i class="fa fa-angle-down" aria-hidden="true"></i><b>2. Для особистих потреб</b> </button> <div class="dm-collaps-content"> <div style="display: flex;"> <div style="padding-left: 25px;"> <ul> <ul> <li>Онлайн-резюме або портфоліо робіт.</li> <li>Простий сайт для особистого блогу чи хобі.</li> </ul> </ul> </div> </div> </div> </div> </div>  <div class="dm-sc-collaps-wrapper"> <div class="dm-collaps-wrap"><button class="dm-collaps"> <i class="fa fa-angle-down" aria-hidden="true"></i><b>3. Для бізнесу та організацій</b> </button> <div class="dm-collaps-content"> <div style="display: flex;"> <div style="padding-left: 25px;"> <ul> <ul> <ul> <li>Швидкий сайт-візитка для малого бізнесу.</li> <li>Інформаційний сайт для заходів чи конференцій.</li> <li>Сайт для волонтерських зборів.</li> </ul> </ul> </ul> </div> </div> </div> </div> </div> </div> </div> <style></style> <p> <script>// <![CDATA[ $(".dm-sc-collaps-wrapper").each(function () { $(this) .find(".dm-collaps") .click(function () { $(this).toggleClass("dm-collaps--active"); $(this).next().toggle(); }); }); // ]]></script> </p> <p></p> </div> </div> <div class="vert vert-1" data-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@dbf084c65e0c4d9fb2a094782222d395"> <div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="XBlockToXModuleShim" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="html" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@dbf084c65e0c4d9fb2a094782222d395" data-request-token="d9adbeaa51ad11f09e5dfaea3c1aae8f" data-graded="False" data-has-score="False"> <script type="json/xblock-args" class="xblock-json-init-args"> {"xmodule-type": "HTMLModule"} </script> <h3 style="padding-top: 32px;"><span style="color: #004984; font-weight: bold; font-size: 130%;">Як створити сайт?</span></h3> <p style="margin-bottom: 1px; font-size: 80%;"><em>Натисніть на інтерактивні елементи, щоб ознайомитися більш детально </em></p> <p></p> <div class="carousel-slider-wrapper">  <div class="dm-slideshow-container-carousel"> <div class="dm-mySlides-carousel"> <div style="display: flex; align-items: center; margin-top: 0px; margin-bottom: 0px;"><img src="/assets/courseware/v1/0de9a52cd591480257609d4c3035ba4a/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/1.png" alt="some image" style="width: 50px; max-width: 25%; flex-grow: 0; flex-shrink: 0; margin: 32px 0 32px 0" /> <div style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;"> <h3 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">Перейдіть на sites.google.com</span></h3> <p> <ul> <li>Перейдіть на сайт sites.google.com зі свого Google-акаунту </li> <li>Оберіть "створити новий сайт" з нуля або використовувати один із запропонованих шаблонів (наприклад, для класу, проєкту, портфоліо). </li> </ul> </div> </div> </div>   <div class="dm-mySlides-carousel"> <div style="display: flex; align-items: center; margin-top: 0px; margin-bottom: 0px;"><img src="/assets/courseware/v1/45902a8052cbe589cc60633ea00e1c74/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/2.png" alt="some image" style="width: 50px; max-width: 25%; flex-grow: 0; flex-shrink: 0; margin: 32px 0 32px 0" /> <div style="margin-top: 0px; margin-bottom: 0px; padding-left: 20px;"> <p></p> <h3 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;"> Створіть структуру сайту:</span></h3> <p> <ul> <li>Створіть кілька сторінок (наприклад, "Головна", "Про нас", "Контакти")</li> <li>Організуйте сторінки у меню навігації. </li> </ul> </div> </div> </div>   <div class="dm-mySlides-carousel"> <div style="display: flex; align-items: center; margin-top: 0px; margin-bottom: 0px;"><img src="/assets/courseware/v1/8dc95982a86c22c60ac1ce8c8fcda530/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/3.png" alt="some image" style="width: 50px; max-width: 25%; flex-grow: 0; flex-shrink: 0; margin: 32px 0 32px 0" /> <div style="margin-top: 0px; margin-bottom: 0px; padding-left: 20px;"> <h3 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;"> Налаштуйте дизайн</span></h3> <p> <ul> <li>Виберіть готову тему з підходящими шрифтами, кольоровими схемами та стилями </li> <li>Налаштуйте колір фону, зображення, та логотип.</li> </ul> </div> </div> </div>   <div class="dm-mySlides-carousel"> <div style="display: flex; align-items: center; margin-top: 0px; margin-bottom: 0px;"><img src="/assets/courseware/v1/f4ee159239f07385ce1551d6e44fa29c/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/4.png" alt="some image" style="width: 50px; max-width: 25%; flex-grow: 0; flex-shrink: 0; margin: 32px 0 32px 0" /> <div style="margin-top: 0px; margin-bottom: 0px; padding-left: 20px;"> <h3 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">Наповніть сайт контентом </span></h3> <ul> <li> Додадайте текст, зображення, відео, документи з Google Диску.</li> </ul> </div> </div> </div>   <div class="dm-mySlides-carousel"> <div style="display: flex; align-items: center; margin-top: 0px; margin-bottom: 0px;"><img src="/assets/courseware/v1/a91df711e585f596ef93387a03b83477/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/5.png" alt="some image" style="width: 50px; max-width: 25%; flex-grow: 0; flex-shrink: 0; margin: 32px 0 32px 0 " /> <div style="margin-top: 0px; margin-bottom: 0px; padding-left: 20px;"> <p></p> <h3 style="padding-top: 16px;"><span style="color: #156082; font-weight: bold;">Опублікуйте сайт</span></h3> <p> <ul> <li> Коли ваш сайт готовий - натискаєте кнопку "Опублікувати"</li> <li>Google Sites надасть вам веб-адресу (наприклад, sites.google.com/view/ваш-сайт)</li> <li>Можливо підключити власний домен, якщо це потрібно. <li>Встановіть політику контролю. чи буде сайт публічним (доступним для всіх) або приватним (доступним лише для певних користувачів Google).</li> </ul> </div> </div> </div>  <div class="dm-prev">❮</div> <div class="dm-next">❯</div> </div> <p></p> <div style="text-align: center;"><span class="dm-dot"> </span> <span class="dm-dot"> </span> <span class="dm-dot"> </span> <span class="dm-dot"> </span> <span class="dm-dot"> </span> </div> </div> <p></p> <style></style> <p> <script>// <![CDATA[ let allCarouselSliders = document.querySelectorAll(".carousel-slider-wrapper"); for (let i = 0; i < allCarouselSliders.length; i++) { let currentSlider = allCarouselSliders[i]; let allDots = currentSlider.querySelectorAll(".dm-dot"); let nextButton = currentSlider.querySelector(".dm-next"); let prevButton = currentSlider.querySelector(".dm-prev"); allDots.forEach((dot, index) => dot.addEventListener('click', () => { currentSlide(index + 1); })) nextButton.addEventListener("click", () => { plusSlides(1); }) prevButton.addEventListener("click", () => { plusSlides(-1) }) let slideIndex1 = 1; showSlides(slideIndex1, currentSlider); function plusSlides(n) { showSlides(slideIndex1 += n, currentSlider); } function currentSlide(n) { showSlides(slideIndex1 = n, currentSlider); } function showSlides(n, currentSlider) { let i; let slides = currentSlider.getElementsByClassName("dm-mySlides-carousel"); let dots = currentSlider.getElementsByClassName("dm-dot"); if (n > slides.length) { slideIndex1 = 1 } if (n < 1) { slideIndex1 = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" dm-active", ""); } slides[slideIndex1 - 1].style.display = "block"; dots[slideIndex1 - 1].className += " dm-active"; } } // ]]></script> </p> </div> </div> <div class="vert vert-2" data-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@a525ecc68b834a4eaafd6511592f6086"> <div class="xblock xblock-public_view xblock-public_view-html xmodule_display xmodule_HtmlBlock" data-course-id="course-v1:Profosvita+CS-007-EDUP+2025" data-init="XBlockToXModuleShim" data-runtime-class="LmsRuntime" data-runtime-version="1" data-block-type="html" data-usage-id="block-v1:Profosvita+CS-007-EDUP+2025+type@html+block@a525ecc68b834a4eaafd6511592f6086" data-request-token="d9adbeaa51ad11f09e5dfaea3c1aae8f" data-graded="False" data-has-score="False"> <script type="json/xblock-args" class="xblock-json-init-args"> {"xmodule-type": "HTMLModule"} </script> <div style="display: flex; align-items: center; margin-right: 16px; margin-left: 16px; margin-bottom: 24px; border-radius: 8px; padding: 16px;"><img src="/assets/courseware/v1/a8e78237e0ee63609bb77a09c07e3656/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/icon_link.png" alt="picture" style="width: 100px; margin-bottom: 10px;" /> <div style="padding-left: 30px; text-align: justify;"> <p><em><b>Додатковий матеріал</b> – <a href="https://www.youtube.com/playlist?list=PLzdgHk8HLzxWOx2kTKbf9nL0IjgkEXOCc" target="[object Object]">Google Sites - Створення власного сайту - 10 відео</a></em></p> </div> </div> <p><iframe width="100%" height="550" src="https://www.youtube.com/embed/Z3zBhwyKHmM?si=KKFSRyj35yTst2Ts" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></p> <p></p> <p></p> <p></p> <div style="display: flex; align-items: center; margin-right: 16px; margin-left: 16px; margin-bottom: 24px; border-radius: 8px; padding: 16px;"><img src="/assets/courseware/v1/a8e78237e0ee63609bb77a09c07e3656/asset-v1:Profosvita+CS-007-EDUP+2025+type@asset+block/icon_link.png" alt="picture" style="width: 100px; margin-bottom: 10px;" /> <div style="padding-left: 30px; text-align: justify;"> <p><b>Додатковий матеріал</b> – <em><strong><a href="https://support.google.com/a/users/answer/9310491?hl=ru" target="[object Object]">Google Help</a></strong></em></p> </div> </div> <p></p> <div id="gtx-trans" style="position: absolute; left: 381px; top: 1522.66px;"> <div class="gtx-trans-icon"></div> </div> <p></p> </div> </div> </div> <script type="text/javascript"> (function (require) { require(['/static/js/dateutil_factory.762fd6ff462b.js?raw'], function () { require(['js/dateutil_factory'], function (DateUtilFactory) { DateUtilFactory.transform('.localized-datetime'); }); }); }).call(this, require || RequireJS.require); </script> <script> function emit_event(message) { parent.postMessage(message, '*'); } </script> </div>

Завершення тесту

Тестування завершено.