Загрузка...
Категории:

Загрузка...

Урок-практикум по теме «создание сайта»

Загрузка...
Поиск по сайту:


Скачать 95.95 Kb.
Дата08.03.2012
Размер95.95 Kb.
ТипУрок
Содержание
Ход урока
3. Изучение нового материала
Поясняющий текст
2.Инструментальные средства создания сайтов
Ход работы
Давайте знакомиться – компьютер
Программное обеспечение
Графический редактор
4.Подведение итогов.
2.Тема урока: Создание сайта
4.Тип урока
6. Место урока в плане
7.Этапы урока
9.В классе
10.На уроке была создана деловая атмосфера, способствующая разрешению целей и задач урока. 11.ВЫВОД
Ход работы
Подобный материал:

УРОК-ПРАКТИКУМ ПО ТЕМЕ «СОЗДАНИЕ САЙТА»

11 КЛАСС ( 2 УРОКА)


ЦЕЛИ И ЗАДАЧИ УРОКА:

  • Освоить основные этапы построения веб-ресурса

  • Освоить основные методы создания веб-ресурса

  • Иметь представление об особенностях оформления информационных блоков страницы

  • Освоить требования к созданию веб-страниц

  • Познакомиться с инструментальными средствами создания сайтов

  • Научиться создавать HTML – файлы

  • Оформлять заголовки

  • Размещать гиперссылки и графику на веб-страницах


^ ХОД УРОКА

1. Организационный момент

2. Актуализация знаний. Постановка целей урока.

Мы продолжаем изучать тему «Основы языка гипертекстовой разметки документов». И сегодня мы закрепим знания по гипертекстовой структуре созданием сайта. Давайте повторим материал, который мы прошли на прошлом уроке.

  1. На доске записать основные тэги HTML – стандарта

  2. Рассказать , что представляют собой веб-страница и веб-сайт.

Фронтальный опрос :

На прошлом уроке мы рассматривали различные сайты и обсуждали их технические характеристики. Скажите:

  1. Что такое веб-дизайн?

  2. Что мы понимает под понятием «юзабилити»?

  3. Перечислите «золотые правила» оформления сайта.

  4. С помощью каких приемов автор сайта старается повысить юзабилити? ( на примере представленного сайта)

  5. По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице. Почему?

^ 3. Изучение нового материала

1. Разработка сайта «Компьютер».

Наш сайт будет посвящен компьютеру, программному обеспечению, будет содержать терминологический словарь и содержать информацию о ценах на комплектующие компьютера.

Каждая страница должна содержать заголовок, поясняющий текст, иллюстрацию и панель навигации. Сайт будет состоять из 4 страниц. Две страницы мы сделаем сегодня на уроке, а две другие вы самостоятельно сделаете дома и внесете в них свое оформление.

Главная страница содержит: (Показ слайдов)

Заголовок – Давайте знакомиться – компьютер

^ Поясняющий текст : Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.Вы получите информацию о ценах на компьютерные комплектующие.

Иллюстрацию : рисунок компьютера

Навигационную панель : Гиперссылки на 3 другие страницы <Программы, Словарь, Комплектующие >

Вторая страница: (Показ слайдов)

Заголовок – Программное обеспечение

Поясняющий текст : Информацию об основных типах ПО в форме вложенного списка

Иллюстрацию : рисунок дискет

Навигационную панель : Гиперссылки на 3 другие страницы <Главная, Словарь, Комплектующие >

^ 2.Инструментальные средства создания сайтов

Для создания сайта используются специальные инструментальные средства позволяющие создавать страницы имея минимальные знания по основам программирования. В качестве самого удобного и распространенного инструментального средства следует отметить Microsoft Front Page , который входит в состав Microsoft office. (Показать на слайде). Также для создания сайта используют привычный и удобный текстовый редактор БЛОКНОТ.

3.Практическая работа

Цель работы: Научиться

  • создавать, просматривать и редактировать HTML-документы;

  • оформлять заголовки;

  • управлять размером шрифта;

  • выделять и выравнивать абзацы;

  • размещать графику на web-странице.

  • Оформлять гиперссылки

^ ХОД РАБОТЫ

1. Создайте папку site (Файл-Создать-Папку).

2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

3. Наберите следующий HTML-код:



Компьютер


Давайте знакомиться – компьютер



4. Сохраните под именем index.htm в папке site.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

8. Оформим фразу “Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы:

9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.Вы получите информацию о ценах на компьютерные комплектующие»

11. Добавим на нашу страницу картинку.

12.Вставим гиперссылки и посмотрим на полученную страницу

1 СТРАНИЦА САЙТА





Компьютер





^

Давайте знакомиться – компьютер









Страницы этого сайта позволят Вам больше узнать о компьютере,

его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас

с компьютерными терминами.

Вы получите информацию о ценах на компьютерные комплектующие.


ПРОГРАММЫ            

СЛОВАРЬ            

КОМПЛЕКТУЮЩИЕ





13. Откройте текстовый редактор Блокнот .

14. Наберите следующий HTML-код:



Компьютер


Программное обеспечение



15. Сохраните под именем index1.htm в папке site.

16. Закройте текстовый редактор Блокнот.

17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

19. Оформим фразу “Программное обеспечение” как заголовок. Для этого откроем HTML-код нашей страницы:

20. Зададим выравнивание заголовка “по центру”:

21. Создадим главный нумерованный список основных категорий ПО

22. Добавим вложенный список.

23. Добавим на нашу страницу картинку.

24.Вставим гиперссылки и посмотрим на полученную страницу


2 СТРАНИЦА САЙТА





Компьютер





^

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ










  1. СИСТЕМНЫЕ ПРОГРАММЫ

  2. ПРИКЛАДНЫЕ ПРОГРАММЫ



    • ТЕКСТОВЫЙ РЕДАКТОР

    • ^ ГРАФИЧЕСКИЙ РЕДАКТОР

    • ЭЛЕКТРОННАЯ ТАБЛИЦА

    • СУБД



  3. СИСТЕМЫ ПРОГРАММИРОВАНИЯ




ГЛАВНАЯ            

СЛОВАРЬ            

КОМПЛЕКТУЮЩИЕ






^ 4.Подведение итогов.


5.Домашнее задание : п.13.2-13.5, самостоятельно разработать 2 страницы сайта.


Самоанализ урока:

1.Раздел программы: Коммуникационные технологии. Подраздел: Основы языка гипертекстовой разметки документов

^ 2.Тема урока: Создание сайта

3.Цели урока:

Обучающая : Осмысление и усвоение алгоритмического подхода к построению собственной деятельности по созданию Web-сайта.Иметь представление об особенностях оформления информационных блоков страницы.Освоить требования к созданию веб-страниц. Познакомиться с инструментальными средствами создания сайтов.Научиться создавать HTML – файлы.

Развивающая: формирование умений применять алгоритмы создания сайтов в конкретных ситуациях, развитие мыслительной деятельности при проектировании, анализе,синтезе и структурировании материала.

Воспитательная: формирование информационной грамотности ученика, способствовать расширению информационного кругозора, трудолюбия и навык самостоятельности при выполнении практической работы, воспитывать ответственность за результат своего труда.

^ 4.Тип урока: комбинированный

5.Вид урока: компьютерный практикум .

В ходе урока использовались методы организации и осуществления учебных действий:

  • Словесные

  • Наглядные

  • Практические

Эти методы позволяют расширить зону познавательного интереса и общеучебных умений и навыков.

^ 6. Место урока в плане: Данный урок является предпоследним в данном разделе. На прошлом уроке были рассмотрены основные тэги языка гипертекстовой разметки, обсуждались технические характеристики сайтов и дизайн сайтов.

^ 7.Этапы урока:

Урок содержит несколько этапов.

1 этап. Проверка домашнего задания : фронтальный и индивидуальный опрос были направлены на подготовку учащихся к практическому выполнению работы по созданию сайта.

2 этап.Усвоение новых знаний и способов действий. Лекция с элементами беседы.

3 этап.Закрепление знаний. Практическая работа.Это главный этап урока. На этом этапе учащиеся самостоятельно применяли полученные знания в процессе практической деятельности. В процессе выполнения практической работы осуществлялась корректировка знаний, умений учащихся. По окончанию практической работы проводилось тестированием двух страниц сайта и выявление ошибок учащихся при его составлении.Были соблюдены дидактические принципы от простого к сложному, от известного к неизвестному , от легкого к трудному.

4 этап. Инструктаж по выполнению домашнего задания.

5 этап. Подведение итогов занятия.Выставление оценок.

8.Время на уроке использовалось таким образом. Чтобы основная часть времени была выделена на выполнение практической работы и подведению итогов.

^ 9.В классе обучается 5 человек. Из них на «4» и «5» занимаются 3 человека. Особенно сильных и увлекающихся информатикой учащихся нет. Два слабых ученика, которые в полной мере не справляются с программой варианта Б.

^ 10.На уроке была создана деловая атмосфера, способствующая разрешению целей и задач урока.

11.ВЫВОД:

Считаю, что обучение на уроке наглядное, доступное, систематическое и последовательное, развивающее, познавательное и проблемное, что позволило развить у учащихся внимание, воображение, мышление, память.

Учащиеся освоили алгоритмический подход к построению сайта. Научились оформлять блоки страницы Усвоили требования к созданию веб-страниц. Познакомились с инструментальными средствами создания сайтов. Научились создавать HTML – файлы.

Знания полученные на этих уроках позволят учащимся 11 класса создать веб-страницы к школьному сайту www.kam2005.boom.ru


Раздаточный материал

Практическая работа

Цель работы: Научиться

  • создавать, просматривать и редактировать HTML-документы;

  • оформлять заголовки;

  • управлять размером шрифта;

  • выделять и выравнивать абзацы;

  • размещать графику на web-странице.

  • Оформлять гиперссылки

^ ХОД РАБОТЫ

1. Создайте папку site .

2. Откройте текстовый редактор Блокнот.

3. Наберите следующий HTML-код:



Компьютер


Давайте знакомиться – компьютер



4. Сохраните под именем index.htm в папке site.

5. Закройте текстовый редактор Блокнот.

6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

7. Откройте файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

8. Оформим фразу “Давайте знакомиться – компьютер” как заголовок. Для этого откроем HTML-код нашей страницы:

9. Зададим выравнивание заголовка “по центру”:

10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о компьютере, его программном и аппаратном обеспечении. Терминологический словарь познакомит Вас с компьютерными терминами.Вы получите информацию о ценах на компьютерные комплектующие»

11. Добавим на нашу страницу картинку.

12.Вставим гиперссылки и посмотрим на полученную страницу

13. Откройте текстовый редактор Блокнот .

14. Наберите следующий HTML-код:



Компьютер


Программное обеспечение



15. Сохраните под именем index1.htm в папке site.

16. Закройте текстовый редактор Блокнот.

17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

19. Оформим фразу “Программное обеспечение” как заголовок. Для этого откроем HTML-код нашей страницы:

20. Зададим выравнивание заголовка “по центру”:

21. Создадим главный нумерованный список основных категорий ПО

22. Добавим вложенный список.

23. Добавим на нашу страницу картинку.

24.Вставим гиперссылки и посмотрим на полученную страницу.

25.Закрыть все окна и проверить работу двух созданных страниц

Скачать, 111.51kb.
Поиск по сайту:

Добавить текст на свой сайт
Загрузка...


База данных защищена авторским правом ©ДуГендокс 2000-2014
При копировании материала укажите ссылку
наши контакты
DoGendocs.ru
Рейтинг@Mail.ru