Коллеги - педагогический журнал Казахстана
Наша библиотека
| Главная » Файлы » В помощь учителю » Профессиональное образование |
Работа с web-страницами. Создание фреймов
| [ Скачать с сервера (1.43 Mb) ] | 2012-11-17, 10:10 AM |
| _______12_№ Сабак/Урок_______ Сабақ жоспары/План урока №12 Группа Ф221 Дата 16.11.12 Сабақтың тақырыбы/ Тема урока Работа с Web-страницами. Создание фреймов Сабақтың мақсаты/ Цель урока Білімділік/ Образовательная Сформулировать основные принципы использования фреймов в HTML-документе; познакомить студентов с тегами создания фреймов в HTML; продемонстрировать их на конкретных примерах. Дамытушылық /Развивающая Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль. Тәрбиелік /Воспитательная Пропаганда здорового образа жизни, расширение знаний о вреде курения Сабақтың түрлері/ Тип урока Комбинированный Әдіс- тәсілдер/ Методы 1. Словесный 2. Наглядный 3. Практический 4. Исследовательский 5. Репродуктивный 6. Частично-поисковый 7. Обяснительно-иллюстративный 8. Проблемный 9. Эвристический Материалдар, оқу-әдістемелік әдебиет, аңықтамалық әдебиет / Материалы, учебно-методическая литература, справочная литература «Программирование Web-страниц» С.В.Глушаков, Харьков; 2002 «Начала Web-дизайна» Е.И.Смирнова, БХВ-Петербург, 2005 «Создание вэб-сайта для чайников» Дэвид Кроудер, Диалектика, 2009 Құрал-жабдықтар, көрнекті құралдар / Оборудование, наглядные пособия проектор, слайды, компьютер, раздаточный материал (практическая работа), карточки с основными понятиями темы, плакат «О вреде курения». Программное обеспечение: Блокнот, браузер, POWERPOINT, Tester-программа Пәнаралық байланыс / Межпредметные связи пропаганда ЗОЖ + информатика+ статистика Сабақ барысы / Ход урока Сабақ кезеңдері / Этапы урока Оқытушы іс-әрекеті / деятельность преподавателя Оқушылар іс-әрекеті / деятельность учащихся Құрал-жабдықтар, көрнекті құралдар / оборудоние, наглядные пособия 1. Үйымдастыру-мақсаттық кезені / организационно-целевой этап • Организационный момент. • Постановка цели урока. • Мотивация учебной деятельности. • Организация учебной работы на уроке • Психологическая подготовка учащихся к проверке знаний. Создание эмоционального настроя. Приветствие. Проверка присутствующих Сегодня у нас необычный урок. Тема урока Работа с Web-страницами. Создание фреймов. А девизом урока послужат слова: «Я выбираю здоровый образ жизни». Этому девизу соответствуют проспекты «О вреде курения». Цели нашего урока – сформулировать основные принципы использования фреймов в HTML-документе; ознакомиться с тегами создания фреймов в HTML; продемонстрировать их на конкретных примерах; а также показать с помощью созданной веб-страницы, что курение наносит вред здоровью, разрушает не только разум, но и технику, портит внешность. Слайд1 2. Операция-танымдық кезеңі / операционно-познавательный этап 2.1 Үй тапсырмасын тексеру. Этап проверки домашнего задания: Вопросы для повторения: o Назначение HTML-языка ? o Что такое разметка HTML-документа? o Как обозначаются теги? Что означает парный тег? o Запишите структуру HTML-документа? o Как вставить в документ HTML фоновый рисунок? o Какие форматы графических рисунков поддерживают браузеры? o Как сжать рисунок для помещения на веб-страницу? o Как поместить бегущую строку на веб-страницу? Индивидуальная работа по тестам. На листах ответа зашифрованы слова, обозначающие части тела, на которые пагубно влияет курение. Вы можете их разгадать, ответив на вопросы теста. Ответы: сердце, легкие, уши, глаза, рот, кожа. Ребята, а вы знаете, как курение влияет на эти части тела? (слайд 3) Итак, при курении ухудшается внешность, теряются зрение и слух, развиваются заболевания дыхательных путей, внутренних органов, повышается раздражительность, неуравновешенность, из-за быстрой утомляемости резко ухудшается успеваемость. HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Под разметкой понимается вставка в текст специальных кодов, определяющих то, как итоговый гипертекстовый документ должен отобразиться специальной программой – браузером. Тег – это набор символов, заключенных в угловые скобки. Парный тег состоит из открывающего <имя_тега> и закрывающего </имя_тега> тегов. <BODY BACKGROUND=”1.gif”> .gif, .jpg (.jpeg), .png. Чтобы сжать рисунок для помещения его на веб-страницу надо, выделить рисунок правой кнопкой мыши и в контекстном меню выбрать команду «Открыть с помощью» - Picture Manager. В меню «Рисунок» выбрать «Сжать рисунок». Выбрать «Параметр сжатия рисунка» «веб-страница» <marquee>...</marquee> Список вопросов на слайде 2 Тесты с листами ответов 2.2 Жаңа материалды белсенді меңгеруге оқушыларды даярлау кезеңі / Этап подготовки учащихся к активному усвоению нового материала (актуализация): Назначение фреймов. Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ. Фреймы прекрасно подходят для оформления следующих документов: Оглавление. Если вы поместите на Web-страницу оглавление в виде вертикального столбца, то пользователь сможет обратиться к нему в любой момент, и ему не нужно будет постоянно щелкать на кнопке возврата к предыдущей странице. Поскольку, находясь во фрейме, оглавление всегда будет под рукой, пользователю нужно будет просто выбрать другой его пункт и сразу же получить нужную информацию. Неподвижные элементы интерфейса. Можно зафиксировать на экране какое-то графическое изображение, например, логотип фирмы, в то время как остальная часть страницы будет прокручиваться в другом фрейме. Формы и результаты. Можно создать форму в одном фрейме, а в другом отобразить результаты запроса. Запись в тетрадь Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ. Фреймы прекрасно подходят для оформления следующих документов: - Оглавление; - Неподвижные элементы интерфейса; - Формы и результаты. Слайд 4 2.3 Жаңа білімді меңгеру / Этап усвоения новых знаний: Пример фреймовой структуры Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом: <html> <head> <title>Фреймы в html</title> </head> <frameset rows="30%, 10%, 60%" > <frame src=”fr1.html”> <frame src=”fr2.html”> <frame src=”fr3.html”> </frameset> </html> В окне браузера это будет выглядеть так (слайд 6) Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги <body></body>. Вместо них используются теги <frameset></frameset>, которые и указывают браузеру разбить окно на несколько областей - фреймов. Сколько будет таких областей и как они будут расположены зависит от двух параметров тега <frameset></frameset>: • rows - указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows="30%, 10%, 60%" , т.е. три горизонтальные области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%. • cols - указывает разбить окно на вертикальные области. Существуют еще несколько атрибутов этого тега: FRAMEBORDER. Определяет наличие рамок, т.е. границ фреймов. Принимает значения "yes" или "no". BORDER. Определяет ширину рамки в пикселях. BORDERCOLOR. Определяет цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Рассмотрим пример (слайд 9) Рассмотрим достоинства и недостатки фреймов. (слайд 10) Пример фреймовой структуры записать в тетрадь Атрибуты записать в тетрадь Слайд 5 Слайд 7 Слайд8 2.4 Жаңа білімді бекіту / Этап закрепления новых знаний: Первичное закрепление понятий: работа в парах по карточкам. Задание: дан пример фреймовой структуры. Необходимо разбить экран документа на требуемые области. (слайд 11) (3 мин) Правильный ответ на слайде 12. Сейчас закрепим полученные знания выполнив практическую работу №7. 1. Создать веб-страницу с тремя фреймами, используя пример из теоретической части, материалы для веб-страниц находятся в папке «Фреймы» на рабочем столе. 2. Для содержания 1 фрейма использовать материал из файла «Факты в цифрах». Во 2 фрейм вставить материал из файла «Курение и техника», а в 3 фрейм вставить диаграмму «Причина смертности от табака в %» типа – гистограмма, вида – объемный. 3. Что должно находиться в каждой части фрейма подробно описаны в задании. Удачи Проверка практической работы Дополнительное задание: выполнить на ПК тестовую работу по теме «Web-страницы» (максимум 10 минут), оценки за тест выставляются автоматически. На карточках рисуют правильный ответ. Садятся за компьютеры, выполняют практические задания (раздаточный материал на каждый комп) 3. Рефлексивті бағалау кезеңі / рефлексивно-оценочный этап 3.1 Үй тапсырмасы бойынша мәлімет беру кезені / Этап информации учащихся о домашнем задании: Разработать веб-страницу с 2-4 фреймами на тему «Первый президент РК» Разработать кроссворд на тему «О вреде курения», количество слов не менее 10. Слайд 13 3.2 Сабақты қорытындылау / Подведение итогов урока: Я надеюсь, что начатая сегодня работа пригодится в вашей будущей профессии. Действительно, с работой справился ______, активно работала ________, упорно шел к цели ______, очень внимательно работал ______, неоднократно помогал мне ________. Ответьте на вопросы: 1. Что нового мне удалось сегодня узнать, выполнить? 2. Какие трудности я испытывал и какими способами, за счет чего я их преодолевал? 3. Как бы вы продолжили предложение? - Прежде чем закурить, … - Курить – Оценки за работу на уроке… Сегодня каждый из вас поднялся на новую ступень развития своего мышления. Я вас поздравляю с этим событием! Всем спасибо! Урок окончен. Ответы учащихся Слайд14 | |
| Просмотров: 1871 | Загрузок: 160 | Комментарии: 2 | | |
Суббота, 2024-04-27, 0:21 AM
Приветствую Вас Гость
Приветствую Вас Гость
Форма входа |
|---|
Категории раздела | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Социальные закладк |
|---|
Поиск |
|---|
Друзья сайта |
|---|
Теги |
|---|
Статистика |
|---|