Цели урока:
1) закрепить пройденный материал;
2) выработать у учеников мышление на уровне проекта сайта.
Комментарий к заданию
Создание сайтов предполагает не только наличие знаний и умений по использованию соответствующих программных средств, но и умения мыслить на уровне проекта своей работы. Трудно развить такое мышление, выполняя лишь небольшие задания в рамках изучаемых тем.
Обычно сайт – это не просто несколько страниц, связанных друг другом при помощи гиперссылок. Кроме технических деталей и элементов оформления, хороший сайт должен включать в себя тщательно продуманную, отобранную и структурированную информацию. Часто оказывается так, что учащийся, изучив тот или иной инструмент для создания web-сайтов, смутно представляет себе с чего начинать работу. Чтобы ученик смог составить представление о том, как происходит процесс создания, он должен сделать несколько сайтов самостоятельно. Причём от начала и до конца.
В качестве первых таких работ могут быть небольшие 3–4-х страничные сайты. На дальнейших уроках объём может увеличиваться. В первых таких заданиях материал может быть подготовлен преподавателем, чтобы ученик не отвлекался на смысловое содержание сайта, а сосредоточился на технических деталях. Подобные задания можно выдавать в ходе изучения темы. Они одновременно будут закрепляющими и обобщающими.
Вашему вниманию предлагается одно из таких заданий по языку HTML. В нём обобщаются такие темы как основы HTML, форматирование текста и гиперссылки. В зависимости от способностей учеников задание рассчитано на 45–90 минут.
Ученики создают не полностью весь сайт. Часть страниц выдаётся в готовом виде. При создании новых страниц, чтобы не печатать основные теги, можно воспользоваться шаблоном (файл template.htm (Приложение 2)). На некоторых страницах нужно сделать редактирование и (или) форматирование. Прежде всего, ставиться цель, чтобы ученики в ходе данной работы выполнили каждую из операций при создании сайта: создание новой страницы; редактирование уже существующей страницы; набор и форматирование текста; использование готового набранного текста и вставка его в станицу; создание гиперссылок между страницами. В итоге стараемся добиться у учащихся понимания принципов работы со структурой сайта. Задание разработано таким образом, чтобы ученики не выполняли повторяющихся операций. Хотя при желании учителя часть заданий можно расширить за счёт уменьшения количества заготовок.
В архиве Приложение 1 можно найти образец выполненного задания. В архиве Приложение 2 находятся необходимые для выполнения задания заготовки.
Ход работы
Ваша задача создать небольшой сайт, на котором будет размещено стихотворение А. Усачёва «Жучок».
1) Создайте главную страницу сайта.
2) Файл главной страницы назовите index.htm.
3) Введите текст строки заголовка: «Стихи А. Усачёва».
4) Фон страницы – жёлтый.
5) Вверху страницы вставьте бегущую строку.
6) Текст бегущей строки: «Андрей Усачёв».
7) Бегущая строка двигается от одного края к другому и обратно.
8) Цвет текста бегущей строки – синий.
9) Фон бегущей строки – красный.
10) Введите остальной текст страницы.
11) Оформите его как в образце.
12) Проверьте, как выглядит страница в браузере. (Рисунок1.jpg).
Рисунок1.jpg
1) Создайте новый файл f1.htm (Приложение 2).
2) Наберите и оформите текст стихотворения как в образце (Рисунок2.jpg).
3) Текст строки заголовка: «1-й куплет».
4) Проверьте, как выглядит страница в браузере.
5) Откройте в блокноте файл index.htm.
6) Преобразуйте текст Прочитать в гиперссылку на файл f1.htm.
7) Проверьте работу гиперссылки.
Рисунок2.jpg
1) Закройте файлы предыдущих заданий.
2) Создайте файл f2.htm (Рисунок3.jpg). Текст стихотворения этой страницы можно найти в файле f2.txt (Приложение 2).
3) Текст строки заголовка – «2-й куплет».
4) Цвет текста на странице – зелёный.
5) Оформите текст списком, пронумерованным римскими цифрами.
6) Текст «А на том значке» преобразуйте в гиперссылку на файл f3.htm (Приложение 2).
7) Проверьте, как выглядит страница в браузере.
8) Проверьте работу гиперссылки.
9) Откройте в блокноте файл f1.htm.
10) Преобразуйте текст «А на том значке» в гиперссылку на файл f2.htm.
11) Проверьте работу гиперссылки.
Рисунок3.jpg
Рисунок4.jpg
1) Закройте файлы предыдущих заданий.
2) Откройте в блокноте файл f4.htm (Приложение 2). Оформите текст как в образце (Рисунок5.jpg).
3) Проверьте, как выглядит страница в браузере.
Рисунок5.jpg
1) Откройте файл index.htm и проверьте оформление всего сайта и работу гиперссылок.
2) Продемонстрируйте результаты работы преподавателю.
3) Разместите полученный сайт на web-сервере и проверьте его работу.