Тема урока: “Разработка тематического проекта web-сайта различными инструментами”.
Дисциплина: МДК.02.01 Установка и настройка аппаратных и программных средств доступа в сеть Интернет.
.
Тип урока: комбинированный.
Продолжительность урока: 4 часа.
Методы обучения: фронтальный, групповой, наглядно-практический.
Приобретаемые навыки обучающихся: обучающиеся должны знать и понимать принципы создания различных Web-проектов; уметь ставить цели создания Web-сайтов, уметь разрабатывать Web-проекты различными инструментами.
Цель: сформировать у обучающихся творческий подход, способность к самостоятельному и инициативному решению проблем; закрепить навыки создания Web-страниц; выполнить проектную работу по созданию сайта.
Задачи урока:
Обучающие: показать актуальность и значимость Web-страниц и Web-сайтов в сети Интернет; показать основные аспекты и принципы создания Web-сайтов в современном мире.
Развивающие: накопление полезной информации для дальнейшего её использования и применения в области Web-технологий; развитие способностей к техническому творчеству.
Воспитывающие: воспитать чувство ответственности за создание Web-проектов, которые могут просмотреть разные люди; продолжить формирование понимания социальной значимости проектной деятельности и понимания полезности накапливаемого опыта в дальнейшей жизни.
Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2007, Adobe Dreamweaver CS3, браузер Internet Explorer 7.0 или выше, раздаточный материал, программа для просмотра видео Winamp.
Методическое обеспечение урока: презентация, видеоролики, раздаточный материал (приложение 5,6).
План конспект - урока
I. Организационный момент
II. Сообщение темы и целей урока
III. Повторение ранее изученного материала по данной теме
IV. Практическая работа
V. Подготовка к проектной работе
VI. Работа в группах
VII. Представление полученных результатов
VIII.Подведение итогов, выставление оценок
Ход урока (4 часа)
I. Организационный моментВступительное слово преподавателя.
Здравствуйте ребята. Перед тем как перейти к изучению новой темы п роверим отсутствующих в группе.
II. Сообщение темы и целей урока
Запускается презентация (Слайд 1)
Тема сегодняшнего урока: “Разработка тематического проекта web-сайта различными инструментами”.
Создание сайта - это сложный как с технической, так и с организационной стороны процесс. Обычно разработка сайтов поручается опытным дизайнерам и высоко квалифицированным программистам. При создании сайтов используют самые современные технологии программирования. Мы тоже попробуем разработать свои сайты, но сначала должны разобрать несколько способов разработки сайтов.
Начнем просмотр презентации. Рассмотрим цель урока.
(Слайд 2) Создание Web-сайта
Итак, цель сегодняшнего урока разобрать несколько способ разработки сайтов. С одним мы уже знакомы (на языке HTML). Другой способ с помощью программы Macromedia Dreamweaver.
III. Повторение ранее изученного материала по данной теме (10 мин.)
Сначала нужно повторить методику создание сайтов на языке HTML.
В ходе повторения вспоминаем основные понятия и определения, используем конкретные примеры:
(Слайд 3) Вопросы на повторение (ученики отвечают на вопросы устно)
Актуализация знаний
(Слайд 4, просмотр приложения 2)
Теперь перейдем к просмотру видео на котором наглядно показывается, как создается сайт с помощью HTML. (Во время просмотра видео учитель комментирует этапы создания сайта.)
IV. Практическая работа После просмотра видео переходим к практической работе. Учащиеся садятся за компьютеры. Попробуем разработать сайт с помощью блокнота.
обучащиеся разрабатывают проекты с помощью «Блокнота» записывая HTML- коды. Учитель показывает слайды, а учащиеся выполняют задания.
(Слайд 5) Создание сайта с помощью HTML. Поэтапно начнем создание сайта. Кто забыл, можете посмотреть на доску. Для помощи раздаю вам словарики основных HTML- кодов (
1. Запустить текстовый редактор «Блокнот » и создать пустую страничку.
Теперь у кого возникли вопросы поднимите руки? На слайде показаны этапы создания и сохранения документа как HTML-страничка.
Форматирование шрифта. Дальше введем текст. Отформатируем так чтобы он выглядел лучше для просмотра. Также на доске есть HTML тэги, с помощью которых можно изменить текст.
2. Ввести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий.
Списки
3. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений. Смотрим на доску, там показаны HTML тэги для создания списков.
Внесение изменений и дополнений в Web-страницу.
4. В процессе создания web-страницы приходится добавлять новые тэги и просматривать получаемый результат. Слайд комментируется преподавателем.
Перейдем к разработке сайта используя новую не знакомую нам программу Macromedia Dreamweawer. Она относиться к инструментальным средствам создания Web-страниц и является системой с использованием технологии WYSIWYG (“What You See Is What You Get” - “Что видишь, то и получишь”)
Macromedia Dreamweawer - это программа, для облегчения написания HTML- кода Web-страниц. Нажатием на кнопку вы можете получить готовую часть кода, движением мыши можно получить серию изменений, которые при попытке произвести вручную заняли бы много времени и главное вам необязательно подробно знать код. Также эта программа отображает код в процессе создания. Позволяет строить таблицы наглядно
Перед тем как приступить к созданию сайта, сначала мы изучим интерфейс программы, просмотрим видео на котором рассматриваются инструменты работы в программе (приложение 3 ).
Запускается видео, содержащие комментарий. Для прослушивания включаются мультимедиа устройства (колонки).
Все запомнили основные инструменты? преподаватель повторно объясняет интерфейс программы. обучающиеся записывают в тетради.
Переходим к примеру создания странички.
Итак, начнем создавать новый документ.
Создание Web-страниц с помощью Macromedia Dreamweawer.
Далее показан процесс создания Web-страниц
Войти в меню файл или сразу в открывшемся окне можно выбрать «создать новый» и выбрать вид документа принадлежащего этим категориям. (Комментируется педагогом)