Методы обучения сайтостроению

Глава X. Проектирование сайта (4 ч)

Основные понятия: концепция сайта, цели сайта, структура сайта, пользователи, навигация.

Содержание главы:

 Концептуальное проектирование

Основные и второстепенные цели

Состав пользователей 

Интересы групп пользователей 

Разделы сайта 

Критерии достижения цели

Логическое проектирование

Тип структуры сайта (линейная, иерархическая, контекстная, другая) Названия разделов

Что будет содержать в себе каждый раздел

Организация и связь разделов между  собой 

Какая информация будет размещена  на определенных страницах сайта

Физическое проектирование

Технологии, которые будут применяться  на сайте 

Используемое программное обеспечение 

Возможные проблемы и способы их устранения

Как будет обновляться информация

Обобщение

Творческая работа

Самооценка

Рефлексия

Глава XI. Зачетная работа (10 ч)

Основные понятия: тема и структура веб-сайта, проектирование, изготовление, размещение, тестирование сайта, экспертная оценка.

Содержание главы:

Выбор темы творческого проекта  — сайта

Техническое задание

Распределение работы между разными специалистами (заказчик, арт-директор, веб-мастер, кодер, программист, верстальщик, менеджер), их функции в общем проекте

Особенности коллективной (групповой) деятельности разработчиков сайта

Проектирование, создание и размещение сайта в сети

Акт сдачи-приемки работы

Защита выполненных проектов

Самооценка и оценка. Рефлексия

Глава XII. Олимпиада по веб-дизайну (2 ч)

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

Содержание главы:

Олимпиадные задания:

1. Разработайте макет своей «веб-визитки». Найдите необходимые слоганы и их графическое сопровождение.
2. Разработайте макет логотипа своей школы (класса) в формате jpg или gif. и представьте его в цветном и черно-белом вариантах.
3. Изготовьте два баннера размером 120x60 — анимированный и статичный. Цель баннеров — воздействовать на эмоциональную сферу потенциального зрителя.
4. Придумайте графическую иллюстрацию для раздела юмористического сайта. Иллюстрация необходима смешная, занимательная, оригинальная. Размер иллюстрации 130x190 пикселей. Формат файла jpg или gif.
5. Разработайте титульную веб-страницу на одну из тем: «Наш класс», «Наша школа», «Мы — фанаты!», «Интернет-газета», «Веб-клуб», «Пункт продажи мобильных телефонов», «Магазин цветов», 
   «Служба знакомств».

3.2. Календарно-тематическое планирование элективного курса «Технология сайтостроения»

 

10 класс

 

№ занятия	Примерные сроки проведения	Тема	Количество часов
		I. Моя веб-страничка (6 ч)
1-2	04-11.09	Теги HTML. Структура веб-страницы Заголовок документа Тело документа	2
3-4	18-25.09	Атрибуты тегов. Абзацы.	2
5-6	02-09.10	Творческая работа.	2
		II. Графика (4 ч)
7-8	16-23.10	Форматы графических файлов	2
9-10	30.10-13.11	Творческая работа.	2
		III. Гипертекстовый документ (6 ч)
11-12	20-27.11	Способы организации гипертекстовых документов. Разработка сценария гипертекстового  документа.	2
13-14	04-11.12	Гипертекстовые ссылки	2
15-16	18-25.12	Творческая работа.	2
		IV. Виды сайтов (4 ч)
17-18	15-22.01	Виды сайтов, их назначение. Навигация.  Скорость загрузки страниц и определяющие факторы	2
19-20	29.01-05.02	Творческая работа	2
		V. Основы HTML (8 ч)
21-22	12-19.02	Таблицы	2
23-24	26.02-05.03	Вложенные таблицы Цвета фона.	2
25-26	12-19.03	Фреймы. Формы. Метатеги	2
27-28	02-09.04	Творческая работа.	2
		VII. Дополнительные возможности создания веб-страниц   (6 ч)
29-30	16-23.04	Назначение CSS Каскадные таблицы стилей Основы CSS	2
31-32	30.04-07.05	Анимация движения Анимация формы. Кнопки Динамический HTML	2
33-34	14-21.05	Творческая работа.	2
35	28.05	Итоговый урок	1

 

	11 класс
№ занятия	Примерные сроки проведения	Тема	Количество часов
		VI. Редакторы сайтов (12 ч)
1-2	03-10.09	Создание сайта	2
3-4	17-24.09	Использование таблиц	2
5-6	01-08.10	Использование фреймов	2
7-8	15-22.10	Панель навигации	2
9-10	29.10-12.11	Доступ к HTML-коду веб-страницы	2
11	19.11	Творческая работа.	1
		VII. Дополнительные возможности создания веб-страниц   (6 ч)
12-13	26.11-03.12	Назначение CSS Каскадные таблицы стилей Основы CSS	2
14-15	10-17.12	Анимация движения Анимация формы. Кнопки Динамический HTML	2
16	24.12	Творческая работа.	1
		VIII. Основы веб-дизайна (12 ч)
17-18	14-21.01	Логотип. Фирменный стиль Цветовая гамма Макет дизайна.	2
19-20	28.01-04.02	Верстка и оптимизация веб-страниц	2
21-22	11-18.02	Информационное наполнение сайта (контент)	2
23-24	25.02-03.03	Выполнение и защита творческих работ  на выбранные темы	2
		IX. Размещение, «раскрутка» и поддержка  сайта в сети (4 ч)
25-26	10-17.03	Хостинг. Тестирование сайта.	2
27	24.03-07.04	Творческая работа.	1
		X. Проектирование сайта (4 ч)
28-29	14-21.04	Концептуальное проектирование и  физическое проектирование	2
30	28.04	Творческая работа	1
		XI. Зачетная работа (10 ч)
31	05.05	Выбор темы творческого проекта —  сайта	1
32	12.05	Проектирование, создание и размещение сайта в сети	1
33	19.05	Защита выполненных проектов	1
34	26.05	XII. Олимпиада по веб-дизайну (2 ч)	1

3.3.  Методические рекомендации  по изучению разделов курса

 

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

Глава I. Моя веб-страничка (6 часов)

Учитель: В данном разделе вы узнаете, что  такое гипертекст, как создаются  веб-страницы, что делают браузеры. Познакомитесь с некоторыми тегами - командами языка HTML. Научитесь менять цвет шрифта и фона. Создадите свою "визитку" в виде простейшей веб-страницы. 
Освоите такие понятия, как: гипертекст, HTML, тег, браузер, веб-страница, разметка, структура документа, заголовок, тело. (Приложение)

Цели  темы: Изучить язык гипертекстовой разметки HTML. Рассмотреть основные конструкции языка, приемы создания страниц.

Практические  и контрольные работы: Создание в  приложении "Блокнот" веб-страницы по каждому подразделу темы, используя  географическую информацию. Начало коллективного проекта "Сайт нашего класса".

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

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

Межпредметные связи: информатика, география.

Требования  к подготовке учащихся:

знать назначение и основные характеристики языка HTML;

знать типы и назначение основных тегов;

знать основные приемы работы по созданию элементов  веб-страниц;

уметь создавать  простую веб-страницу в основных текстовых редакторах;

уметь работать с файлами (создавать, копировать, удалять, переименовывать, осуществлять поиск, архивировать, описывать путь к файлу);

уметь работать с носителями информации;

уметь перечислять  состав и назначение основных тегов  веб-страницы.

Глава II. Графика (4 часа)

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

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

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

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

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

Межпредметные связи: Информатика, ИЗО.

Требования к подготовке учащихся:

знать основные правила и законы дизайна;

знать основные возможности графических редакторов;

знать различные форматы графических файлов;

знать различия растрового и векторного способа  представления графической информации;

уметь в  графическом редакторе создавать  и редактировать изображения.

Глава III. Гипертекстовый документ (6 часов)

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

Цели  темы: Изучить язык гипертекстовой разметки HTML. Рассмотреть основные конструкции языка, приемы создания страниц.

Практические  и контрольные работы: Создание в  приложении "Блокнот" веб-страницы по каждому подразделу темы, используя  географическую информацию. Начало коллективного проекта "Сайт нашего класса".

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