Конспект урока
план-конспект урока на тему
Конспект урока по теме "Создание веб-сайта", расчитан на 2 часа. Обучающиеся узнают принципы создания различных веб-проектов, ставят цели создания и учатся разрабатывать проекты различными и нструментами.
Скачать:
| Вложение | Размер |
|---|---|
 urok_sozdanie_veb-sayta.doc | 67 КБ |
 prilozhenie_1.rar | 1.46 МБ |
| prilozhenie_2.doc | 52.5 КБ |
| prilozhenie_3.doc | 23 КБ |
Предварительный просмотр:
Урок-обобщение с проектной деятельностью
"Разработка тематического проекта Web-сайта различными инструментами"
Аннотация к уроку:
Урок разбит на 2 часа. На первом уроке обучающиеся повторяют создание Web – страниц на языке гипертекстовой разметки, а на втором учатся разрабатывать сайты уже с помощью программы Macromedia Dreamweaver.
Дисциплина: МДК.02.01 Установка и настройка аппаратных и программных средств доступа в сеть Интернет.
Уровень образования обучающихся: второй год изучения модуля.
Раздел программы: создание и работа Web-сайта .
Форма учебной работы – классно-урочная.
Тип урока: комбинированный.
Продолжительность урока: 2 часа.
Методы обучения: фронтальный, групповой, наглядно-практический.
Приобретаемые навыки обучающихся: обучающиеся должны знать и понимать принципы создания различных Web-проектов; уметь ставить цели создания Web-сайтов, уметь разрабатывать Web-проекты различными инструментами.
Цель: сформировать у обучающихся творческий подход, способность к самостоятельному и инициативному решению проблем; закрепить навыки создания Web-страниц; выполнить проектную работу по созданию сайта.
Задачи урока:
Обучающие: показать актуальность и значимость Web-страниц и Web-сайтов в сети Интернет; показать основные аспекты и принципы создания Web-сайтов в современном мире.
Развивающие: накопление полезной информации для дальнейшего её использования и применения в области Web-технологий; развитие способностей к техническому творчеству.
Воспитывающие: воспитать чувство ответственности за создание Web-проектов, которые могут просмотреть разные люди; продолжить формирование понимания социальной значимости проектной деятельности и понимания полезности накапливаемого опыта в дальнейшей жизни.
Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2007, Adobe Dreamweaver CS3, браузер Internet Explorer 7.0 или выше , раздаточный материал, программа для просмотра видео Winamp.
Методическое обеспечение урока: презентация, видеоролики, раздаточный материал (приложение 5,6).
План конспект - урока
I. Организационный момент (2 мин.)
II. Сообщение темы и целей урока (3 мин.)
- Повторение ранее изученного материала по данной теме (10 мин.)
- Практическая работа (20 мин.)
- Подготовка к проектной работе (10 мин.)
- Работа в группах (30 мин.)
- Представление полученных результатов (10 мин.)
- Подведение итогов, выставление оценок (5 мин.)
Ход урока (2 часа)
I. Организационный момент (2 мин.) Вступительное слово преподавателя.
Здравствуйте ребята. Перед тем как перейти к изучению новой темы проверим отсутствующих в группе.
II. Сообщение темы и целей урока (3 мин.)
Запускается презентация (Слайд 1)
Тема сегодняшнего урока: “Разработка тематического проекта web-сайта различными инструментами”.
Создание сайта - это сложный как с технической, так и с организационной стороны процесс. Обычно разработка сайтов поручается опытным дизайнерам и высоко квалифицированным программистам. При создании сайтов используют самые современные технологии программирования. Мы тоже попробуем разработать свои сайты, но сначала должны разобрать несколько способов разработки сайтов.
Начнем просмотр презентации. Рассмотрим цель урока.
(Слайд 2) Создание Web-сайта
Итак, цель сегодняшнего урока разобрать несколько способ разработки сайтов. С одним мы уже знакомы (на языке HTML). Другой способ с помощью программы Macromedia Dreamweaver.
III. Повторение ранее изученного материала по данной теме (10 мин.)
Сначала нужно повторить методику создание сайтов на языке HTML.
В ходе повторения вспоминаем основные понятия и определения, используем конкретные примеры:
(Слайд 3) Вопросы на повторение (ученики отвечают на вопросы устно)
Актуализация знаний
(Слайд 4, просмотр приложения 2)
Теперь перейдем к просмотру видео на котором наглядно показывается, как создается сайт с помощью HTML. (Во время просмотра видео учитель комментирует этапы создания сайта.)
IV. Практическая работа (20 мин.) После просмотра видео переходим к практической работе. Учащиеся садятся за компьютеры. Попробуем разработать сайт с помощью блокнота.
обучащиеся разрабатывают проекты с помощью «Блокнота» записывая HTML- коды. Учитель показывает слайды, а учащиеся выполняют задания.
(Слайд 5) Создание сайта с помощью HTML. Поэтапно начнем создание сайта. Кто забыл, можете посмотреть на доску. Для помощи раздаю вам словарики основных HTML- кодов (приложение 5)
- Запустить текстовый редактор «Блокнот » и создать пустую страничку.
Теперь у кого возникли вопросы поднимите руки? На слайде показаны этапы создания и сохранения документа как HTML-страничка.
(Слайд 6) Форматирование шрифта. Дальше введем текст. Отформатируем так чтобы он выглядел лучше для просмотра . Также на доске есть HTML тэги, с помощью которых можно изменить текст.
- Ввести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий.
(Слайд 7) Списки
- Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений. Смотрим на доску, там показаны HTML тэги для создания списков.
(Слайд 8) Внесение изменений и дополнений в Web-страницу.
- В процессе создания web-страницы приходится добавлять новые тэги и просматривать получаемый результат. Слайд комментируется преподавателем.
(Слайд 9-10) Перейдем к разработке сайта используя новую не знакомую нам программу Macromedia Dreamweawer. Она относиться к инструментальным средствам создания Web-страниц и является системой с использованием технологии WYSIWYG (“What You See Is What You Get” - “Что видишь, то и получишь” )
Macromedia Dreamweawer - это программа, для облегчения написания HTML- кода Web-страниц. Нажатием на кнопку вы можете получить готовую часть кода, движением мыши можно получить серию изменений, которые при попытке произвести вручную заняли бы много времени и главное вам необязательно подробно знать код. Также эта программа отображает код в процессе создания. Позволяет строить таблицы наглядно
(Слайд 11) Перед тем как приступить к созданию сайта, сначала мы изучим интерфейс программы, просмотрим видео на котором рассматриваются инструменты работы в программе (приложение 3).
Запускается видео, содержащие комментарий. Для прослушивания включаются мультимедиа устройства (колонки).
Все запомнили основные инструменты? преподаватель повторно объясняет интерфейс программы. обучающиеся записывают в тетради.
Переходим к примеру создания странички.
Итак, начнем создавать новый документ.
(Слайд 12) Создание Web-страниц с помощью Macromedia Dreamweawer .
(Слайд 13-14, приложение 5) Далее показан процесс создания Web-страниц
Войти в меню файл или сразу в открывшемся окне можно выбрать «создать новый» и выбрать вид документа принадлежащего этим категориям. (Комментируется педагогом)
IV. Подготовка к проектной работе (10 мин.) (второй урок)
Работая над проектом, обучающиеся должны определить цель, задачи, этапы реализации.
Организационный момент
Учащиеся в группе делятся на четыре-пять подгрупп (примерно по 2-3 обучающегося в каждой, зависит от количества компьютеров в классе), дают название своей команды, выбирают тему проектного задания;
Для эффективной работы в проектной группе предлагается распределить роли примерно следующим образом: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер;
Перед каждой группой ставится задача – согласно полученному заданию необходимо определить функции сайта, спроектировать карту сайта, разработать внешний вид страниц, создать Web-сайт, используя выбранные инструментальные средства.
Теперь вам нужно поделимся на группы из 2-3 человек. Придумайте название ваших групп, и распределите кто за что отвечать будет: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер. Выберите тему, на которую будете разрабатывать свои проекты.
V. Работа в группах (30 мин.)
(Слайд 15)
Темы задания:
ТЕМЫ ЗАДАНИЯ: “Моё село”, “Моя семья”, “Мои интересы”, “Моя малая родина Кубань”, “Мой техникум”, “Моя группа”. (Название темы может модифицироваться самими обучающимися, но с обязательной аргументацией)
Выполняя эти задания, учащимся раскрывают, например, темы проектов:
“Моё село” - история, проблемы, перспективы.
“Мои интересы” - как я смогу реализовать себя.
“Моя группа” – об одногруппниках, успехи, взаимопомощь, досуг, интересы.
- В ходе выполнения работ студентам предлагаются критерии оценок для каждого вида работы.
- Все работы сохраняются в именной тематической папке. Обучающиеся имеют возможность редактировать свои работы.
Пояснения к выполнению задания: (Педагог диктует требования к разработке сайтов)
- Определите цель создания сайта, продумайте, кто может быть его потенциальным посетителем, т.е. кого может заинтересовать информация, размещенная на сайте.
- Обдумайте содержание. Если вы решили создать официальный сайт техникума, то в нем должна быть история техникума, изучаемые предметы, специализация, фотографии техникума, кабинетов, лабораторий, педагогов, обучающихся и т.п. Если это сайт об одногруппниках, или сайт выпускников, то наверное интересно объединить в этом сайте домашние странички обучающихся.
- В соответствии с отобранным материалом продумайте названия страниц (ссылок, пунктов меню) сайта.
- Откройте текстовый процессор WORD и подготовьте письменную концепцию сайта, кратко описав все этапы работы (цель, контингент посетителей, формы представления информации, названия рубрик).
В процессе работы групп преподаватель, координирует проектную деятельность, т.е. решает возникшие организационные вопросы, технические проблемы, но не влияет на результат.
VI. Представление полученных результатов (10 мин.)
Руководитель каждой группы представляет проект. Обучающиеся других групп участвуют в проверке работы своих соперников.
После защиты своих проектов, преподаватель демонстрирует возможные варианты разработок и обращает внимание учащихся на положительные стороны их проекта, анализируются недостатки и дают рекомендации по их устранению.
(Слайд 16) Раздаются карточки, которые заполняются обучающимися (приложение 6). Заполненные карточки сдаются преподавателю.
VII. Итог урока. (5 мин.)
По проверке проектной работы выставляются оценки, учитываются данные по заполненным карточкам.
***
Используемая литература:
- Самоучитель Macromedia Dreamweaver 8. / Дронов В.А., - СПб.: БХВ – Петербург. 2006 г.
- http://dreamweaver3.narod.ru/rus/video/ - создание сайтов и web- страниц
Подписи к слайдам:
*
Урок – обобщение с проектной деятельностью учащихся разработан преподавателем спец.дисциплинГБПОУ КК БАТТ Чубукиной Л.А.
*
Создание Web-сайта
Цель урока - закрепить навыки по созданию web-страниц, сайтов различными инструментами (на языке HTML, MacroMedia Dreamweaver ) и дать сравнительный анализ этих способов.Создание сайта – это сложный как с технической, так и с организационной стороны процесс. Мы повторим методику создания страниц и способы автоматизации разработки web-сайтов, и выполним проекты по выбранным темам:персональный сайтшкольный сайттематический сайт
*
*
Вопросы на повторение
Какие функции выполняют сервисные службы WWW?Назначение языка HTMLТеги HTMLФункциональные разделы документаФорматирование HTML документаСсылки на другие документы и файлыСпискиИнструментальные средства создания Web-страниц
*
*
Теперь вспомним как создается сайт с помощью HTML (прил. 2)
*
Создание сайта с помощью HTML
Запустить текстовый редактор Блокнот [Пуск - Программы - Стандартные - Блокнот]. ввести HTML-код, задающий структуру Web-страницы:
*
*
Форматирование шрифта.
Разделительная линия:
Форматирование шрифта: ЖирныйКурсивПодчеркнутыйЖирный подчеркнутый курсив РавноширинныйВыделение:ВыделениеУсиленное выделение
*
*
Списки
Нумерованный список:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- ТЕРМИН 1
- Пояснение к термину 1
- ТЕРМИН 2
- Пояснение к термину 2
- ТЕРМИН 3
- Пояснение к термину 3
*
*
Внесение изменений и дополнений в Web-страницу
Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл – Сохранить]. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница.
*
*
Инструментальные средства разработки Web-страниц и Web-сайтов
В настоящее время имеется большое количество различных инструментальных средств разработки Web-страниц и Web-сайтов, от простейших HTML-редакторов до систем с использованием технологии WYSIWYG ("What You See Is What You Get" - "Что видишь, то и получишь"). программа Macromedia Dreamweawer
*
*
Macromedia Dreamweaver
Dreamweaver является профессиональным редактором Web-сайтов, отличается простотой создания как отдельных Web-страниц, так и многостраничных Web-сайтов. В нем поддерживаются основные современные направления Web-дизайна (использование каскадных стилей, динамический HTML, язык XML т.п.). Редактор позволяет быстро и наглядно (в режиме Drag&Drop) изменять структуру сайта.
*
*
Интерфейс программы Macromedia Dreamweawer (прилож. 3)
*
*
Создание сайта с помощью Macromedia Dreamweaver
*
*
Выбрать «Создать новый»
*
Создание Web-страниц (прил. 4)
*
Темы задания:
«Моё село», «Моя семья», «Мои интересы», «Моя малая родина - Кубань», «Мой техникум», «Моя группа». (Название темы может модифицироваться самими обучающимися, но с обязательной аргументацией)
*
*
Оценка обучающегося за работу на уроке
Карточка рефлексииФамилия ___________________________ группа ________________ Оцените свою работу в группе: ___________________________ Оцените работу группы № ____ ___________________________ Оцените работу группы № ____ ___________________________ Оцените работу группы № ____ ___________________________ 2. Что было для тебя трудного при изучении темы «Создание Web-сайта»?_________________________________________________ 3. Оцени по пятибалльной шкале понятность изложения темы «Создание Web-сайта»____________________________________
*
*
Предварительный просмотр:
- Приложение 1.
- Основные теги HTML.
Тег | / | Описание и назначение |
служебные | ||
+ | «голова» html-документа, здесь располагается служебная информация | |
+ | «тело» документа link – цвет гиперссылки alink – цвет активной гиперссылки vlink – цвет посещённой гиперссылки text – цвет основного текста bgcolor – цвет фона страницы background – адрес графического файла, который будет использован в качестве фона страницы | |