Сергеева Диана Лазаревна учитель информатики средней школы №10 г. Ярцево 2007 г. Содержание: пояснительная записка

Вид материалаПояснительная записка

Содержание


IV. Закрепление материала.
Дополнительное задание.
Вид-Просмотр HTML-кода
V. Итог занятия.
Занятие 9. Контрольный творческий проект «Изображения и таблицы на Web-странице»
План занятия
Деятельность учащихся
I. Орг.момент.
IV. Домашнее задание.
План занятия
Деятельность учащихся
Ход занятия.
Сборка файлов сайта.
Тестирование сайта.
IV. Закрепление нового материала.
План занятия
Деятельность учащихся
Подобный материал:
1   2   3   4   5   6   7   8   9
отобразит таблицу в синей рамке толщиной 5 пикселей.


IV. Закрепление материала.

Лабораторная работа «Табличная разметка Web-страницы».

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

1

Создать HTML-документ под именем index.php

2

Набрать содержимое HTML-документа под именем index.php.





Табличная разметка страницы















Название страницы
Навигационная панель Информационное содержимое страницы







3

Сохранить изменения в файле index.php

4

Просмотреть созданную Web-страницу.

Результат

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

Фон Web-страницы голубой, рамка – синяя.



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

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

Цель работы:
  • научиться вносить изменения в оформление Web-страницы.




1

Открыть HTML-документ index.php, созданный на сегодняшнем занятии.

2

Выполнить команду меню Вид-Просмотр HTML-кода для перехода в Блокнот.

3

Внести в HTML-код документа необходимые изменения для обновления Web-дизайна страницы (изменить размеры, цвет фона и рамки таблицы по вашему усмотрению).

4

Сохранить новый вариант страницы, выполнив команду Файл-Сохранить.

5

Закрыть окно программы Блокнот командой меню Файл-Выход.

6

В браузере нажать кнопку Обновить и просмотреть заново содержимое страницы.

Результат

В окне браузера высветилось содержимое обновленной страницы.


V. Итог занятия.
  • Для каких целей используют таблицы на Web-страницах?
  • Каким образом можно задать цвет и фон всей таблицы или отдельных ячеек?
  • Каким образом можно задать цвет и толщину рамки таблицы?
  1. Домашнее задание.

Ребята, на следующем занятии вы будете создавать контрольный творческий проект по учебному модулю «Изображения и таблицы на Web-странице». Творческий проект нужно будет создать по одной из тем: «Мои знаменитые земляки», «Ярцевчане, именами которых названы улицы нашего города», «Знаменательные события на ярцевской земле», «Ярцево во время Великой Отечественной войны». Поэтому, к следующему занятию подготовьте материал по выбранной теме.


Занятие 9. Контрольный творческий проект «Изображения и таблицы на Web-странице»

Цели занятия:
  • Отработать навык использования графических изображений и таблиц на Web-странице.

План занятия

Этап занятия

Деятельность учителя

Деятельность учащихся

Орг.момент.

Приветствует учащихся, проверяет их готовность к занятию.

Ученики готовятся к занятию, приветствуют учителя.

Вступительное слово учителя.

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

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

Выполнение творческого проекта.

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

Ученики самостоятельно работают над контрольным творческим проектом по выбранной теме.


Домашнее задание.








Ход занятия.

I. Орг.момент.

II. Вступительное слово учителя.

Ребята, мы закончили изучать модуль «Графические изображения и таблицы на Web-странице». Теперь вы можете дополнять текстовое содержимое страницы графическими изображениями и таблицами. Также вы научились применять таблицу для оформления страницы. Сегодня на занятии вы должны будете создать творческий проект по выбранной вами теме. Защита создаваемого проекта будет происходить в начале следующего занятия.


Требования к создаваемому проекту:
  • Проект должен содержать информацию о г.Ярцево
  • В проекте должно быть показано умение применять изображения и таблицы на Web-странице
  • Проект должен содержать не менее двух страниц, связанных ссылками.

III. Выполнение творческого проекта.

IV. Домашнее задание.

Закончить работу над созданием творческого проекта по учебному модулю «Изображения и таблицы на Web-странице».


Учебный модуль «Планирование и размещение Web-сайта в Интернете».

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

Развивающие цели:
  • формирование и развитие логических приемов: анализа, синтеза, абстрагирования, обобщения;
  • развитие творческой активности.

Воспитательные:
  • формировать ответственное отношение к своей работе;
  • формировать познавательный интерес;
  • формировать эстетическое восприятие.

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


Занятие 10. Основные этапы создания Web-сайта.

Цели занятия:
  • проверить знания учащихся по модулю «Изображения и таблицы на Web-странице»;
  • познакомить с основными этапами работы над созданием Web-сайта.


План занятия

Этапы занятия

Деятельность учителя

Деятельность учащихся

Орг.момент

Приветствует учащихся, проверяет их готовность к занятию.

Ученики готовятся к занятию, приветствуют учителя.

Защита контрольного творческого проекта.

Учитель оценивает творческие проекты учащихся по критериям.

Отмечает лучшие проекты.

Ученики демонстрируют свои проекты, сопровождая демонстрацию рассказом.

Просматривают проекты других учащихся. Учатся оценивать проекты. Отмечают лучшие, на их взгляд, проекты.

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

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


Ученики самостоятельно изучают теоретический материал. В случае необходимости обращаются к учителю за разъяснением.

Закрепление нового материала.

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

Корректирует ответы учащихся.

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


Ход занятия.

1 Орг.момент.

II Защита контрольного творческого проекта.

Учащиеся демонстрируют контрольные творческие проекты по модулю «Изображения и таблицы на Web-странице». Демонстрация проектов сопровождается поясняющим рассказом.

Учитель оценивает продемонстрированный проект по следующим критериям.

Критерии для оценки творческого проекта.
  • Содержание Web-страницы соответствует заявленной теме
  • Наличие заголовка на странице
  • Информация структурирована в отдельные логические блоки
  • Цветовая палитра не утомляет сочетанием цветов
  • Единый стиль оформления страниц
  • Гармоничное расположение элементов на странице
  • Правильная работа системы навигации.
  1. Изучение нового материала.

Этапы работы над сайтом:
  • проектирование сайта
  • написание HTML-кода
  • тестирование
  • публикация на Web-сервере
  • поддержка (дополнение и изменение содержания)

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

Приступая к разработке сайта, нужно четко определить его назначение и круг его потенциальных посетителей.

Следующим этапом будет подбор материала. Не нужно публиковать в Интернете весь имеющийся у вас материал по теме сайта. Необходимо оценить качество материала и его пользу для посетителей. Отобранный материал следует разделить по темам – эти темы определят разделы будущего сайта.

Для проектирования структуры сайта рекомендуется сначала нарисовать эскиз структуры сайта от руки. Прежде всего, нужно определить:
  • Сколько страниц будет включать в себя сайт.
  • Какая связь будет между страницами

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

Если дерево окажется слишком широким, то посетителю будет трудно удерживать в памяти множество вариантов выбора.

Начальная страница







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


Начальная страница
















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

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

Особое внимание следует уделить разработке первой страницы сайта. Именно эта страница представляет сайт в целом, является его визитной карточкой. Кроме прочего, на ней будут размещены ссылки на другие страницы сайта.

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


Сборка файлов сайта.

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

Если в процессе формирования папки сайта вы вносили изменения в имена фалов, проследите, чтобы соответствующие изменения были внесены и в HTML- код страницы.

Тестирование сайта.

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


IV. Закрепление нового материала.

Вопросы для закрепления материла.
  • Из каких этапов состоит работа по созданию сайта?
  • Что происходит на этапе:
  1. проектирования сайта
  2. написания HTML-кода
  3. тестирования сайта
  4. публикации сайта на Web-сервере
  5. поддержки сайта?


Занятие 11. Особенности Web-дизайна.

Цели занятия:
  • познакомить с основными требованиями к оформлению Web-сайта;
  • научить качественно оценивать Web-сайты.

Материалы: мультимедийная презентация «Правила оформления Web-дизайна».

План занятия

Этап занятия

Деятельность учителя

Деятельность учащихся

Орг.момент.

Приветствует учащихся, проверяет их готовность к занятию.

Ученики готовятся к занятию, приветствуют учителя.

Актуализация опорных знаний.

Учитель задает вопросы для повторения знаний, усвоенный на прошлом занятии.

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

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

Учитель проводит лекцию, сопровождая ее мультимедийной презентацией.

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

Закрепление материала.

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

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

В случае необходимости обращаются за консультацией к учителю.

Итог занятия

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

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