План-конспект урока по информатике "Создание фрагмента сайта" (11 класс)

Тема урока: Создание фрагмента сайта

Цели и задачи урока:

• Обучающая (когнитивная) цель: закрепление умений и навыков создания сайтов в редакторе визуального веб-конструирования (создание в редакторе FrontPage фрагмента сайта из нескольких станиц, оформление сайта, использование таблиц для структурирования информации на веб-странице, вставка изображений, использование внутренних, внешних, внутристраничных гиперссылок, просмотр фрагмента сайта в браузере).

• Задачи личностного развития: создавать условия для формирования умения структурировать информацию, содействовать формированию представлений о веб-конструировании как области профессионального самоопределения;

• Задачи здоровьесбережения: создавать условия, не наносящие ущерба здоровью учащихся.

Тип урока: урок закрепления умений и навыков.

Форма проведения: практическая работа.

Учебно-методическое обеспечение: учебное пособие «Информатика» для 11 класса общеобразовательных учреждений с белорусским (русским) языком обучения /Г. А. Заборовский, А. Е. Пупцев. Минск: Народная асвета, 2010; система управления компьютерным классом NetopSchool, карточки-инструкции для практической работы, браузер, редактор визуального веб-конструирования FrontPage, тестер «Десятибалльный мониторинг», тест.

План урока

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

Приветствие.

Запись в тетрадях даты и темы урока.

2. Целемотивационный этап (3 мин.)

Учитель:

– На уроках информатики вы изучали язык HTML, сейчас учитесь создавать веб-страницы в редакторе Front Page. А как вы думаете, для чего основы веб-конструирования изучаются в школе?

Ответы учащихся, беседа, в процессе которой учащиеся делают вывод:

– Чтобы выпускники могли сознательно выбирать профессию, связанную с веб- и интернет-технологиями.

Учитель:

– Сегодня на уроке вы продолжите работать с редактором Front Page, создадите фрагмент сайта, посвященный профессиям, которые непосредственно связаны с веб-конструированием.

3. Актуализация опорных знаний и умений (5 мин.)

Повторение порядка создания веб-узла, вставки гиперссылок (внутренней, внешней, внутристраничной). В зависимости от уровня подготовки группы:

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

2. учащиеся предлагают ответы и комментируют действия, учитель демонстрирует названные учениками действия и ответы на вопросы теста с помощью системы управления компьютерным классом NetopSchool.

Тест в среде «Десятибалльный мониторинг»

Разработка веб-страниц с помощью редактора FrontPage - это реализация:

• Визуального метода веб-конструирования

• Программного (ручного) метода веб-конструирования

Задание № 2

Выберите в данном списке основные режимы работы редактора FrontPage:

• Просмотр

• Конструктор

• Код

• С разделением

• Без разделения

Задание № 3

В зависимости от элемента привязки выделяют следующие виды гиперссылок:

• текстовые

• графические

• внешние

• внутренние

• внутристраничные

Задание № 4

Установите правильное соответствие между видами гиперссылок (по способу перехода) и их назначением.

внутренние

ссылки на страницы или иные документы данного сайта

внешние

ссылки на страницы или иные документы других сайтов

внутристраничные

ссылки на определенное место данной страницы

Задание № 5

При создании веб-узла в редакторе FrontPage в папке сайта автоматически создается папка images, предназначенная:

• для сохранения файлов изображений данного веб-узла

• для сохранения веб-страниц данного веб-узла

• для сохранения темы оформления данного веб-узла

Задание № 6

Расположите в правильном порядке этапы разработки сайта (в режиме оффлайн):

1. Определение тематики, целей и задач сайта

2. Проектирование структуры сайта

3. Разработка дизайна веб-сайта

4. Подготовка материала (графики, текста)

5. Конструирование страниц сайта

6. Тестирование и размещение (публикация) сайта в сети

4. Инструктаж по выполнению практической работы (5 мин.)

Обсуждаются этапы разработки сайта (карточки-инструкции для практической работы).

5. Практическая работа (25 мин.)

Учитель следит за работой учащихся, контролирует ее, при необходимости корректирует действия учащихся.

Учащиеся выполняют практическую работу.

Карточка-инструкция для практической работы

Создание фрагмента сайта

Этап 1. Определение тематики сайта, его целей и задач.

Тема «Веб-конструирование как профессиональная деятельность». Цель: профориентация школьников. Задачи: ознакомить аудиторию с профессиями, связанными с веб-конструированием, а также с учебными заведениями, обеспечивающими профессиональную подготовку в данной области.

Этап 2. Проектирование структуры сайта, определение разделов и связей между страницами.

Этап 3. Разработка дизайна сайта. Выбираем одну из стандартных тем (Формат → Тема).

Этап 4. Подготовка текста и графики для размещения на веб-страницах.

Используйте текстовый и графический материал, предложенный учителем либо подберите самостоятельно, используя ресурсы сети Интернет.

Этап 5. Конструирование страниц сайта.

1. Создайте в папке своего класса папку с названием «Веб_Фамилия».

2. Загрузите редактор FrontPage.

3. Выполните команду Файл → Создать → Одностраничный веб-узел → Обзор (указать расположение нового веб-узла – папку, созданную в п.1).

4. Выберите тему для оформления страниц сайта и примените ее как тему по умолчанию.

5. Сконструируйте страницу index.htm в соответствии с макетом (см. Этап 2). Сохраните страницу в папке вашего веб-узла. Не забывайте сохранять внедренные изображения в папке image.

6. Сконструируйте страницу professii.htm в соответствии с макетом:

   • создайте пустую страницу (Файл → Создать → Пустая страница);

   • текст и таблицу скопируйте из файла Профессии Web.docx (возможен самостоятельный поиск данных в сети Интернет);

   • создайте гиперссылку на главную страницу index.htm;

   • создайте внутристраничную гиперссылку в начало страницы (Вставка → Закладка, Вставка → Гиперссылка → Связать с: местом в документе → указать закладку);

   • сохраните страницу professii.htm в папке вашего веб-узла.

7. Сконструируйте страницу vuzy.htm в соответствии с макетом:

   • информацию о вузах самостоятельно найдите в сети Интернет;

   • создайте гиперссылку на главную страницу;

   • создайте гиперссылки на сайты вузов (Вставка → Гиперссылка → Связать с: файлом, веб-страницей → в строку Адрес: скопировать адрес сайта вуза);

   • сохраните страницу professii.htm в папке вашего веб-узла.

8. Создайте гиперссылки с главной страницы index.htm на страницы professii.htm, vuzy.htm.

9. Просмотрите созданный фрагмент в браузере, проверьте работоспособность ссылок, ознакомьтесь с материалами сайта.

Пример страницы index.htm

Пример страницы vuzy.htm

Этап 6*. Размещение сайта в сети (публикация), управление сайтом.
Публикация сайта – это размещение его на сервере или локальном компьютере с возможностью вызова из сети (Файл → Опубликовать узел).

Дополнительное задание*

Сконструируйте страницу kursy.htm. Информацию о курсах веб-дизайна в вашем городе найдите в сети Интернет. Свяжите созданную страницу гиперссылками с главной страницей, создайте внешние ссылки на сайты курсов.

6. Подведение итогов урока (3 мин.)

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

– В роли каких веб-специалистов побывали сегодня вы? (веб-дизайнер, html-верстальщик, веб-программист)

– В роли каких веб-специалистов выступил учитель? (администратор, менеджер проекта, контент-менеджер)

Даже если вы не станете профессиональными разработчиками, знание основ веб-конструирования, несомненно, будет полезным современному человеку.

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

Критерии оценивания:

1-2 балла – загрузка редактора FrontPage;

3-4 балла – ответы на вопросы теста;

5-6 баллов – выполнение заданий пунктов 1-5 Этапа инструкции;

7-8 баллов – выполнение заданий пунктов 6-7 Этапа 5 инструкции;

9 баллов – выполнение заданий пунктов 8-9 Этапа 5 инструкции.

10 баллов – выполнение дополнительного задания.

7. Информация о домашнем задании. Повторить §5, подготовить краткую информацию о своей будущей профессии (текст и изображения), продумать структуру и дизайн фрагмента сайта (3-4 страницы), посвященного этой профессии.

Профессии Web.docx

Web-программист

Создает программы, способные функционировать в сети Интернет. Создает динамические страницы. Должен знать HTML, языки веб-программирования JAVA, JAVAScript, РНР, Perl, иметь опыт работы с Dreamweaver, Flash и ColdFusion. Эти языки и программы расширяют возможности сайтов, помогают вносить разнообразие: элементы анимации, звук, интерактивные игры, онлайновые анкеты и функции интернет-торговли.

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

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

Web-дизайнер

Web-дизайнер это разновидность дизайнера. Ему должны быть присуще все классические качества дизайнера, потому, что его задача – сделать логичное и приятное глазу оформление информации, которая будет размещена на сайте. Кроме сайтов, веб-дизайнеры разрабатывают баннеры, интернет-открытки, электронные презентации, т.е. все то, что так или иначе касается графического отображения на страницах Интернета.

От людей этой профессии требуется чутье художника и эстетический вкус. Однако креативность веб-дизайнера должна сдерживаться четкими представлениями о том, какого рода информация будет представлена на заказанном ему сайте. Умение находить общий язык с коллегами также важно, ведь кроме него над сайтом трудятся и другие специалисты.

Высшее образование приветствуется, как и профильные курсы, но если такового нет, работодатели обращают внимание на портфолио. Необходимо знать: Adobe Photoshop, желательно знать: Corel Draw, Illustrator, Macromedia Flash, HTML/СSS.

Администратор web-сайта

Администратор web-сайта следит за работоспособностью сервера (серверного оборудования и программ), на котором находится web-сайт. Администратор web-сайта несет ответственность за сетевую безопасность. В некоторых случаях он равняется веб-мастер (мастер на все руки) и может заниматься раскруткой web-сайта, вести статистику посещаемости, выполнять обязанности контент-менеджера, следя за своевременным обновлением информации.

Так же как и любому администратору, администратору web-сайта приходится решать множество самых разных вопросов и проблем. Поэтому главным его качеством должно быть спокойствие и выдержка. Кроме того, web-администраторами должны быть серьезные, практичные люди, обладающие логикой и предпочитающие порядок в работе.

Этот специалист должен иметь навыки инсталляции и конфигурирования серверного ПО, пользования специальными программами-утилитами для контроля работоспособности и управления режимами работы сервера и программ, поддерживающих проект.

Менеджер интернет-проектов

Возглавляет группу разработчиков сайта, руководит созданием сайта от момента появления идеи до ее воплощения в Интернете. Составляет концепцию будущего сайта, разрабатывает его структуру, продумывает информационную составляющую (контент). Подсчитывает сроки исполнения и затраты всех ресурсов, пишет техническое задание для разработчиков, следит за ходом выполнения работ.

Нужно быть широко эрудированным человеком, постоянно учиться и пополнять свои знания. Не помешает и здоровый профессиональный скептицизм. Нужно не бояться брать на себя ответственность и уметь отстаивать свое мнение.

С одной стороны, необходимо знать классический и интернет-маркетинг, специфику рекламы в сети Интернет и принципы построения web-сайтов. С другой, нужно разбираться в интернет-технологиях (языках, протоколах, аппаратной части).

Редактор сайта

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

Здесь необходима мобильность, стрессоустойчивость, а для успешного сотрудничества с авторами материалов, рекламодателями и респондентами – контактность и общительность. Часто возникает необходимость поздно вечером или в выходной день срочно опубликовать какую-то новость – и тогда редактор «выходит в сеть» из дома или из интернет-кафе.

Гуманитарные вузы. Редактору сайта необходимо владеть разными литературными стилями, быть продвинутым пользователем ПК, иметь начальные представление о web-дизайне, владеть английским языком, знать основы HTML, понимать принципы раскрутки сайта и поисковой оптимизации.

HTML-верстальщик

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

Работа HTML-кодера довольно рутинная. Она требует от исполнителей усидчивости, аккуратности и внимательности, которыми, как правило, обладают люди со спокойным характером. Естественно, что все эти качества должны присутствовать у обладателя на фоне структурного мышления. 

От людей этой профессии специального образования не требуется, главное здесь знания и опыт, подкрепленные портфолио. Необходимо знать: HTML (вручную), CSS, JavaScript, Dreamweaver, Front Page. Желательно знать: Photoshop, PHP, MySQL, XML\XSL. 

Контент-менеджер

Управляет содержанием и структурой web-сайта. Контролирует появление/удаление разделов web-сайта и следит за информационным наполнением. Подбирает и редактируют материалы (графические или текстовые) в соответствии с тематикой сайта, следит за актуальностью публикуемой на web-сайте информации. Занимается поддержкой форума. Учитывает статистику посещаемости web-сайта.

Выбирая эту профессию, человек должен обладать спокойным характером и быть готовым к монотонной однообразной работе. Здесь важны кропотливость и ответственное отношение к срокам. От контент-менеджера требуется личная заинтересованность в вопросах, которым посвящен вверенный ему сайт. Только тогда он сможет сделать его привлекательным для посетителей.

Помимо хорошего владения русским языком от контент-менеджера требуется знание предметной области, редактируемого им web-сайта. Иначе постоянно будут возникать вопросы о компетентности и необходимости той или иной информации. Контент-менеджер должен быть уверенным пользователем ПК. Крайне желательно знание HTML и графических редакторов, таких как PhotoShop.