ПОНЯТТЯ ПРО СТРУКТУРУ ВЕБ-САЙТУ. ФРЕЙМИ, ТЕГИ Й АТРИБУТИ ФРЕЙМІВ. ВИКОРИСТАННЯ ПОСИЛАНЬ У ФРЕЙМАХ. Практична робота № 5. Розробка вебсайтів з використанням фреймів.
Мета уроку • Навчальна. Познайомити учнів з поняттям фрейм та його призначенням. Вчитися структурувати вебсторінку за допомогою фреймів. • Розвиваюча. Розвивати логічне та алгоритмічне мислення, просторову уяву. • Виховна. Виховувати культуру оформлення HTMLдокументу, прививати естетичні смаки. • Тип уроку. Урок засвоєння нових знань.
Хід уроку • 1. Актуалізація опорних знань. Перевірка вивченого матеріалу. • 2. Мотивація навчальної діяльності. (проблемнопошукова бесіда). • 3. Повідомлення теми і мети уроку. • 4. Виклад нового матеріалу та виконання практичних вправ. • 5. Підведення підсумків • 6. Домашнє завдання
1. Актуалізація опорних знань. Перевірка вивченого матеріалу. • Пригадайте: • Які теги використовуються для оформлення структури сторінки? • Які теги використовуються для оформлення таблиць? • Що таке атрибут і для чого він використовується? • Які атрибути ви знаєте?
Етапи створення веб-сайтів • Веб-сайти створюються у кілька етапів: 1. Планування — визначення тематики і призначення майбутнього сайта. 2. Обробка — розробка структури сайта, добір матеріалів, вибір програмних засобів для його створення. 3. Створення окремих сторінок відповідно до структури, включення до них гіперпосилань. 4. Тестування — перевірка та редагування веб-сайта. 5. Розміщення — розміщення сайта в Інтернеті. 6. Підтримка — оновлення вмісту сайта.
Теорія. Фрейми дозволяють розбити вікно перегляду браузера на декілька прямокутних підобластей, розташованих поруч один з одним. Стандартний документ має один розділ HEAD і один розділ BODY. Документ із фреймами має розділ HEAD і розділ FRAMESET, який замінює розділ BODY. Потрібно знати: Елементи в розділ BODY, не повинні бути присутніми до першого елемента FRAMESET, інакше елемент FRAMESET буде ігноруватися. ПРИКЛАД: • <html> • <head> • <title>Фрейми</title> • <frameset rows="100, *"> • <frame src="logo. html"> • <frameset cols="150, *, 150"> • <frame src="menu 1. html"> • <frame src="content. html"> • <frame src="menu 2. html"> • </frameset> • </head> • </html>
Атрибути FRAMESET Фрейми можна розташувати поруч по горизонталі (COLS), або вертикалі (ROWS). SRC — задає ім'я файлу, що відображатиметься у фреймі; NAME — задає ім'я фрейму; SCROLLING — визначає наявність (значення yes) або відсутність (значення nо) смуг прокручування у вікні фрейму (за умовчанням — yes); NORESIZE — забороняє користувачу змінювати розміри фрейму; BORDER — визначає ширину розділювальної смуги між фреймами в пікселах; BORDERCOLOR — визначає колір розділювальної смуги між фреймами; MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселях між верхньою межею фрейму і початком тексту або графіки; MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки. Оскільки фрейми підтримують не всі браузери, необхідно помістити тег <NOFRAME>перед тегом <BODY>, а між <BODY> і </BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер непідтримує фрейми. Після </BODY> має йти</NOFRAME>.
Практична робота № 5. Розробка веб-сайтів з використанням фреймів. 1. 2. 3. 4. 5. 6. Створити та структурувати сайт фреймами. Створити папку для вмісту документів сайту. Згідно плакату “Структура сайту” своріть папку “My-site-Прізвище та ім’я”. Створіть за допомогою текстового редактора “Блокнот” порожні документи: Index. html, Menu. html, Logo. html, Content. html та дві папки: “img”, “pages”. Ці папки та документи є заготовкою для Вашого сайту. Відкрийте з допомогою “Блокнот” документ Index. html та задайте стуктуру сайту (впишіть HTML-код з плакату “Варіант 3”). Відкрийте з допомогою “Блокнот” документ Menu. html та напишіть українською мовою речення “Меню сайту. Тут будуть посилання на сторінки сайту”. Відкрийте з допомогою “Блокнот” документ Logo. html та напишіть українською мовою речення “Логотип сайту (назва сайту та відповідний малюнок)”. Відкрийте з допомогою “Блокнот” документ Content. html та напишіть українською мовою речення “Вміст сайту. Тут буде основна інформація сторінки”.
Створити та структурувати сайт фреймами. Створіть сайт з головною та двома інформацйними сторінками структурований фреймами згідно представленого зразка: У документі “Index. html” наберіть такий html-код: <html> <head> <title>Фрейми</title> <frameset rows="100, *"> <frame src="logo. html"> <frameset cols="150, *, 150"> <frame src="menu 1. html"> <frame src="content. html"> <frame src="menu 2. html"> </frameset> </head> </html>
Підведення підсумків уроку • 3. Типові запитання до уроку. • Які труднощі виникли під час виконання практичної роботи?
. Домашнє завдання. • О. Г. Пасічник, О. В. Пасічник, І. В. Стеценко “Основи веб-дизайну” (ст. 74 -81) повторити. На сайті школи • Підібрати змістовну інформацію на головну та дві інші сторінки сайту.
Скачать презентацию ПОНЯТТЯ ПРО СТРУКТУРУ ВЕБ-САЙТУ ФРЕЙМИ ТЕГИ Й АТРИБУТИ
6c2391d6810c139e32a74e2f34313380.ppt