Программа элективного курса по информатике и ИКТ
«Создание Web-сайтов»
Автор: , учитель информатики и ИКТ МОУ лицей №7
Пояснительная записка
Одна из задач профильной школы - подготовка учащихся к жизни в информационном обществе. Умение представлять информацию в виде, удобном для восприятия и использования другими людьми – одно из условий образовательной компетентности ученика. Web-сайт – это наиболее популярное и доступное средство предоставления текстовой, графической, звуковой и видео информации в сети Internet.
Элективный курс «Создание Web-сайтов» является предметом по выбору для учащихся 9-11 классов и рассчитан на 34 часа.
В течение учебного года отдельные темы курса впервые были предложены учащимся. Из опыта пятилетней работы можно сделать вывод, что ученики не только активно посещают занятия, но и с интересом работают над созданием своих Web-страничек. Каждый учащийся, помимо приобретения новых знаний и умений из области компьютерных технологий, может развивать и применять свои художественные способности, создавать сайт по любой, интересующей его теме. Курс предполагает интеграцию с другими учебными предметами по принципу: технология работы с информацией – из информатики, конкретные примеры и задачи – из смежных предметов.
Таким образом, можно сделать вывод, что курс позволяет учащимся более полно выявить свои способности в изучаемой области знаний, дает возможность применить освоенные способы представления информации в других учебных курсах и подготовить себя к осознанному выбору интернет-профессий, связанных с созданием Web-сайтов и Web-дизайном.
Цели курса - формировать целостное представление об информационной
картине мире средствами Интернет;
- научить способам представления информации в сети Интернет;
- реализовать коммуникативные и технические способности учащихся в ходе проектирования и конструирования сайтов.
Задачи курса - познакомить с видами Web-сайтов, их функциональными,
структурными и технологическими особенностями;
- сформировать навыки элементарного проектирования, конструирования и размещения Web-сайта;
- научить основам программирования на языке HTML.
В результате изучения данного спецкурса учащиеся должны
знать:
- принципы и структуру устройства Всемирной Паутины;
- виды Web-сайтов, определять их структуру, содержание, дизайн;
- приемы организации работы по созданию сайта;
- принципы безопасности и защиты сайта.
уметь:
- найти, сохранить и систематизировать необходимую информацию из Сети;
- спроектировать, изготовить и разместить в Интернет Web-сайт;
- программировать на языке HTML.
Формы организации занятий
Основной тип занятий – практикум, который выполняется с помощью персонального компьютера и необходимых программных средств. Отдельные занятия используют доступ в Интернет. Курс разбит на главы, каждая из которых охватывает изучение отдельной информационной технологии или ее части. Каждая тема начинается с объяснения нового материала в форме лекции и постановки задачи для дальнейшего ее практического выполнения. Результатом курса является проектная работа по разработке и созданию Web-сайта.
Содержание курса
I. Web-страничка (6 часов).
В этой главе вы узнаете, как создаются Web-страницы, что такое браузер и принцип его работы. Рассмотрите структуру HTML-документа и познакомитесь с основными тегами – командами языка НTML. Научитесь редактировать и форматировать HTML-текст. Создадите свою Web-страничку.
Содержание главы:
1. Введение.
Глобальная сеть Интернет: ресурсы, функции, службы Интернет. Понятие IP-адреса и URL-адреса. Поиск информации в Сети.
2. Основы языка HTML.
Структура HTML-страницы. Форматирование текста. Списки. Цвета и атрибуты.
3. Творческая работа «Моя первая страничка».
II. Графика (4 часа).
В этой главе вы познакомитесь с основными понятиями обработки графической информации; с форматами графических файлов, их достоинствами и недостатками; возможностями использования графики на Web-страницах. Узнаете, как размещать изображения в HTML-документах, управлять их размерами и положением на странице. Дополните свою Web-страничку графическими элементами.
Содержание главы:
1. Технологии обработки графической информации.
Понятие о цветоделении. Цветовые модели (RGB и CMYK).Схема цветовых моделей. Спектры цветовых моделей. Типы форматов графических файлов, преобразование форматов. Графические данные: пиксели, пиксельные данные, разрешающая способность. Типы графических данных.
2. Рисунки на Web-странице.
Основные атрибуты редактирования и форматирования графических изображений.
3. Творческая работа «Сделай красиво!».
III. Гипертекстовый документ (10 часов).
В этой главе вы познакомитесь со способами организации информации на сайте; научитесь располагать информацию в необходимом месте на странице, делить экран на отдельные окна и управлять содержимым этих окон, устанавливать гипертекстовые связи между страницами, создавать различные интерактивные элементы, рассмотрите дополнительные возможности по оформлению Web-страниц. Выполните творческую работу по разработке элементов сайта и обеспечите интерактивное взаимодействие с посетителями вашего сайта.
Содержание главы:
1. Гиперссылки.
Понятие гипертекста и гиперссылки. Виды гиперссылок: внутренние и внешние, ссылка по якорю. Абсолютные и относительные адреса. Задание цвета ссылок. Ссылка на электронный адрес.
2. Таблицы.
Создание таблицы, форматирование строк и столбцов. Разметка Web-страницы при помощи таблицы.
3. Фреймы.
Фреймы и фреймсодержащие документы. Расположение фреймов. Управление в окне фрейма.
4. Формы.
Формы, назначение и виды. Способы интерактивного взаимодействия с пользователем.
5. Дополнительные возможности оформления Web-страниц.
Анимация текста. Расположение текста колонками. Разрыв строки.
6. Творческая работа «Web-сайт».
V. Размещение сайта в Сети (2 часа).
В этой главе вы научитесь размещать созданные вами сайты в сети Интернет, тестировать их и регистрировать в поисковых системах. Рассмотрите вопросы безопасности публикуемых сайтов.
Содержание главы:
1. Тестирование сайта.
Удобство навигации. Целостность данных. Корректность ссылок. Орфография. Графика. Скорость загрузки.
2. Размещение сайта у провайдера.
Необходимые данные для публикации сайтов. Технологии публикации сайтов. Бесплатные и коммерческие серверы.
3. Регистрация сайта в поисковых системах.
V. Проектирование сайта (2 часа).
В этой главе вы узнаете как правильно оформить свой сайт, чего надо стараться избегать при оформлении, чтобы ваш сайт удовлетворял общепринятым критериям.
Содержание главы:
1. Концептуальное проектирование.
Основные и второстепенные цели. Назначение сайта. Аудитория вашего сайта.
2. Логическое проектирование.
Тип структуры сайта (линейная, иерархическая, контекстная, другая). Разделы сайта, названия разделов. Организация и связь разделов между собой.
3. Физическое проектирование.
Применяемые при создании сайта технологии. Используемое программное обеспечение. Управление сайтом в процессе обновления информации.
VI. Проектная работа «Создание Web-сайта» (10 часов).
Итогом изучения курса является создание комплексного проекта Web-сайта на выбранную вами тему. От вас потребуется применить полученные знание и умения по проектированию, созданию и размещению сайта в Сети. Выполненный проект необходимо защитить перед одноклассниками и учителем.
Содержание главы:
1. Организация проектов.
Формулировка темы, постановка задачи, выбор методов и средств реализации проекта.
2. Выполнение проектов.
3. Защита проектов.
Поурочное тематическое планирование
№ урока | Тема |
Web-страничка (6 часов). | |
1 | Введение. Глобальная сеть Интернет: ресурсы, функции, службы Интернет. Понятие IP-адреса и URL-адреса. |
2 | Поиск информации в Сети. |
3 | Основы языка HTML. Структура HTML-страницы. Форматирование текста. |
4 | Списки. Цвета и атрибуты. |
5-6 | Творческая работа «Моя первая страничка». |
Графика (4 часа). | |
7 | Технологии обработки графической информации. Понятие о цветоделении. Цветовые модели (RGB и CMYK).Схема цветовых моделей. Спектры цветовых моделей. Типы форматов графических файлов, преобразование форматов. |
8 | Графические данные: пиксели, пиксельные данные, разрешающая способность. Типы графических данных. |
9 | Рисунки на Web-странице. Основные атрибуты редактирования и форматирования графических изображений. |
10 | Творческая работа «Сделай красиво!». |
Гипертекстовый документ (10 часов). | |
11 | Гиперссылки. Понятие гипертекста и гиперссылки. Виды гиперссылок: внутренние и внешние, ссылка по якорю. Абсолютные и относительные адреса. Задание цвета ссылок. Ссылка на электронный адрес. |
12-13 | Таблицы. Создание таблицы, форматирование строк и столбцов. Разметка Web-страницы при помощи таблицы. |
14 | Фреймы. Фреймы и фреймсодержащие документы. Расположение фреймов. Управление в окне фрейма. |
15 | Формы. Формы, назначение и виды. Способы интерактивного взаимодействия с пользователем. |
16 | Дополнительные возможности оформления Web-страниц. Анимация текста. Расположение текста колонками. Разрыв строки. |
17-20 | Творческая работа «Web-сайт». |
Размещение сайта в Сети (2 часа). | |
21 | Тестирование сайта. Удобство навигации. Целостность данных. Корректность ссылок. Орфография. Графика. Скорость загрузки. |
22 | Размещение сайта у провайдера. Необходимые данные для публикации сайтов. Технологии публикации сайтов. Бесплатные и коммерческие серверы. Регистрация сайта в поисковых системах. |
Проектирование сайта (2 часа). | |
23-24 | Концептуальное проектирование. Основные и второстепенные цели. Назначение сайта. Аудитория вашего сайта. Логическое проектирование. Тип структуры сайта (линейная, иерархическая, контекстная, другая). Разделы сайта, названия разделов. Организация и связь разделов между собой. Физическое проектирование. Применяемые при создании сайта технологии. Используемое программное обеспечение. Управление сайтом в процессе обновления информации. |
Проектная работа «Создание Web-сайта» (10 часов). | |
25-26 | Организация проектов. Формулировка темы, постановка задачи, выбор методов и средств реализации проекта. |
27-33 | Выполнение проектов. |
34 | Защита проектов. |
Литература
Для учителя:
1. «Настольная книга Web-мастера», М., «КноРус», 2000г.
2. «Интернет для школьников», М., «Десс Ком», 2000.
3. Л. Татарникова «Web-конструирование», Томск, 2003.
4. «INTERNET для школьников и начинающих», М., «Аквариум», 1999.
5. «Информатика: учебник», М., «Финансы и статистика», 2000.
6. Н. Угринович «Информатика и информационные технологии: учебное пособие для 10-11 классов», М., Лаборатория Базовых Знаний АО «Московские учебники», 2001.
7. Н. Петрова «Компьютерная графика и анимация», М., 1996.
8. А. Мещеряков «Теория компьютерной графики».
9. Интернет – ресурсы:
1. http://www. *****/books//fragment. html
2. http://ec. *****/lib/ibusiness/products/pageI2.htm
3. http://www. *****/navigation/*****. html
4. http://antonio. *****/composed/adress_ip. html
5. http://jim. *****/helps/internet/tcp-ip. htm#1
CD –ресурсы:
1. Практический Курс Internet Explorer 5.0.
2. Настольная книга Web-мастера (приложение к изданию книги).
Для учащихся:
1. Методическое пособие «Компьютерная графика».
2. Методическое пособие и электронный учебник «Основы языка HTML».
3. Методическое пособие «Глобальная сеть Интернет».
Конспект лекций «Создание, оформление, тестирование и публикация сайтов. Принципы безопасности и защиты сайта».Пример уроков
Автор , учитель информатики и ИКТ
Образовательное учреждение МОУ лицей №7
Предмет Информатика и ИКТ
Урок №11.
Тема урока: Гиперссылки. Понятие гипертекста и гиперссылки. Виды гиперссылок: внутренние и внешние, ссылка по якорю. Абсолютные и относительные адреса. Задание цвета ссылок. Ссылка на электронный адрес.
Учебно-методическое обеспечение: Н. Угринович «Информатика и информационные технологии: учебное пособие для 10-11 классов», М., Лаборатория Базовых Знаний АО «Московские учебники», 2001.
Время реализации занятия: 45 минут
Авторский медиапродукт:
среда - язык HTML; вид - электронный учебник; структура - гипертекстовый документ,
система навигации – файл index. htm переход по гиперссылке на главу Гиперссылки. Чтобы увидеть примеры, щелкнуть по гиперссылке Посмотреть. Возврат на главу Гиперссылки с помощью кнопки Назад на пенели инструментов.
Целесообразность использования:
недостаточное количество информационного материала в существующих учебно-методических пособиях (в учебниках нет текстов и примеров); эффективность индивидуального подхода к работе учащихся на данном этапе урока (продуктивная самостоятельная творческая деятельность, индивидуальная траектория освоения материала, индивидуальное время освоения, уровневая дифференциация при выполнении практических заданий); интенсификация учебно-воспитательного процесса (увеличение количества предлагаемой информации, уменьшение времени подачи материала); развитие понятийного мышления за счет возможности и необходимости самостоятельно обобщать материал, выделять смысловые группы, выстраивать логические связи, определять алгоритм работы, систематизировать весь предлагаемый материал.Задачи урока:
Образовательные: 1. продолжение изучения основ языка разметки гипертекста (HTML) и ознакомление с понятием «гиперссылка»;
2. овладение учащимися способами использования гиперссылок на HTML –страницах.
Воспитательные: способствовать формированию умений саморегуляции и саморегулирования своей учебно-познавательной деятельности.
Развивающие: способствовать развитию познавательных и творческих способностей учащихся, их способностей к самообучению.
Необходимое оборудование и материалы для занятия: персональные компьютеры.
План занятия:
Этапы занятия | Временная реализация |
Организационный момент. Приветствие. | 2 мин |
Сообщение темы и разъяснение целей урока. | 3 мин |
Сообщение нового материала. | 7 мин |
Самостоятельная работа учащихся по изучению нового материала. | 15 мин |
Выполнение заданий на закрепление изученного материала. | 15 мин |
Заключение. | 3 мин |
Ход урока
I. Организационный момент. Приветствие.
II. Сообщение темы и разъяснение целей урока.
На предыдущих занятиях мы рассмотрели структуру языка разметки гипертекста HTML, научились форматировать текст, располагать на HTML–страницах графические изображения и сделали 2-3 странички.
Сегодня мы узнаем, как «связать» эти странички между собой, сделав возможным переход с одной на другую.
Итак, тема урока «Гипрессылки».
Цели урока: познакомиться с понятием «гиперссылка», рассмотреть виды гиперссылок, научиться их использовать на HTML-страницах.
III. Сообщение нового материала.
Давайте повторим, что такое гипертекст?
Ответ: Гипертекст - информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому.
На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки).
Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки бывают внешними и внутренними. Если с гиперссылкой связан другой Web-документ, имеющий собственный URL-адрес, то это внешняя гиперссылка. Однако для очень длинных Web-документов авторы нередко создают внутренние гиперссылки, позволяющие переходить из одной части документа в другую, не прокручивая весь документ в окне броузера. Такие гиперссылки еще называют ссылками по якорю.
А сейчас вы сядете за компьютеры и с помощью электронного учебника «HTML» разберете, с помощью каких тэгов и атрибутов задаются гиперссылки на HTML-страницах, виды гиперссылок, рассмотрите пример использования гиперссылок и выполните предложенные задания.
IV. Самостоятельная работа учащихся по изучению нового материала.
Учащиеся рассаживаются за компьютеры и в индивидуальном режиме работают с электронным учебником, обращаясь к учителю в случае необходимости с вопросами.
V. Выполнение заданий на закрепление изученного материала.
Рассмотрев представленные в учебнике примеры, обучающиеся выполняют предложенные задания в индивидуальном режиме, консультируясь с преподавателем в случае необходимости.
VI. Заключение.
Итак, мы рассмотрели сегодня с вами возможность установления связей между отдельными HTML-страничками с помощью гиперссылок. Получившаяся единая структура является HTML-документом.
Подумайте дома, какую еще информацию вы бы добавили в свой документ, а на следующем уроке мы рассмотрим, какие способы оформления HTML-страниц существуют еще.
Урок №12
Тема урока: Таблицы. Создание таблицы, форматирование строк и столбцов.
Учебно-методическое обеспечение: Н. Угринович «Информатика и информационные технологии: учебное пособие для 10-11 классов», М., Лаборатория Базовых Знаний АО «Московские учебники», 2001.
Время реализации занятия: 45 минут
Авторский медиапродукт:
1. среда - язык HTML;
2. вид - электронный учебник;
3. структура - гипертекстовый документ,
4. система навигации – файл index. htm переход по гиперссылке на главу Таблицы. Чтобы увидеть примеры, щелкнуть по гиперссылке Посмотреть. Возврат на главу Таблицы с помощью кнопки Назад на пенели инструментов.
Целесообразность использования:
1. недостаточное количество информационного материала в существующих учебно-методических пособиях (в учебниках нет текстов и примеров);
2. эффективность индивидуального подхода к работе учащихся на данном этапе урока (продуктивная самостоятельная творческая деятельность, индивидуальная траектория освоения материала, индивидуальное время освоения, уровневая дифференциация при выполнении практических заданий);
3. интенсификация учебно-воспитательного процесса (увеличение количества предлагаемой информации, уменьшение времени подачи материала);
4. развитие понятийного мышления за счет возможности и необходимости самостоятельно обобщать материал, выделять смысловые группы, выстраивать логические связи, определять алгоритм работы, систематизировать весь предлагаемый материал.
Задачи урока:
Образовательные: 1. продолжение изучения основ языка разметки гипертекста (HTML) и ознакомление с возможностью использования таблиц на HTML -страницах;
2. овладение учащимися использованием таблиц, изменением их структуры.
Воспитательные: способствовать формированию умений саморегуляции и саморегулирования своей учебно-познавательной деятельности.
Развивающие: способствовать развитию познавательных и творческих способностей учащихся, их способностей к самообучению.
Необходимое оборудование и материалы для занятия: персональные компьютеры.
План занятия:
Этапы занятия | Временная реализация |
Организационный момент. Приветствие. | 2 мин |
Сообщение темы и разъяснение целей урока. | 3 мин |
Сообщение нового материала. | 7 мин |
Самостоятельная работа учащихся по изучению нового материала. | 15 мин |
Выполнение заданий на закрепление изученного материала. | 15 мин |
Заключение. | 3 мин |
Ход урока
I. Организационный момент. Приветствие.
II. Сообщение темы и разъяснение целей урока.
На предыдущих занятиях мы рассмотрели структуру языка разметки гипертекста HTML, научились форматировать текст, располагать на HTML–страницах графические изображения и соединили с помощью гиперссылок созданные странички.
Сегодня мы узнаем, как использовать таблицы на HTML-страницах и продолжим создавать HTML-документ, добавляя новые странички.
Итак, тема урока «Таблицы».
III. Сообщение нового материала.
Вопрос: Каковы отличительные особенности табличной структуры?
Ответ: У любой таблицы есть в наличии строки и столбцы.
Вопрос: Что образуется на пересечении строки и столбца?
Ответ: На пересечении строки и столбца образуется ячейка.
Ячейки таблицы подразделяются на ячейки-заголовки и ячейки с данными.
Сейчас вы сядете за компьютеры и с помощью электронного учебника «HTML» разберете, с помощью каких тэгов и атрибутов задаются таблицы на HTML-страницах, чем отличаются тэги для ячеек-заголовков и для ячеек с данными, как изменять структуру таблицы, размеры ячеек, их цвет, как редактировать и форматировать текст внутри ячейки.
IV. Самостоятельная работа учащихся по изучению нового материала.
Учащиеся рассаживаются за компьютеры и в индивидуальном режиме работают с электронным учебником, обращаясь к учителю в случае необходимости с вопросами.
V. Выполнение заданий на закрепление изученного материала.
Рассмотрев представленные в учебнике примеры, обучающиеся выполняют предложенные задания в индивидуальном режиме, консультируясь с преподавателем в случае необходимости.
VI. Заключение.
Итак, мы рассмотрели сегодня с вами возможность использования таблиц на HTML-страницах.
Подумайте дома, как можно использовать таблицы для создания структуры всей HTML-cтраницы.
Урок №13
Тема урока: Разметка Web-страницы при помощи таблицы.
Учебно-методическое обеспечение: Н. Угринович «Информатика и информационные технологии: учебное пособие для 10-11 классов», М., Лаборатория Базовых Знаний АО «Московские учебники», 2001.
Время реализации занятия: 45 минут
Авторский медиапродукт:
1. среда - язык HTML;
2. вид - электронный учебник;
3. структура - гипертекстовый документ,
4. система навигации – файл index. htm переход по гиперссылке на главу Разметка Web-страницы при помощи таблицы. Чтобы увидеть примеры, щелкнуть по гиперссылке Посмотреть. Возврат на главу Разметка Web-страницы при помощи таблицы через гиперссылку Вернуться на сайт.
Целесообразность использования:
1. недостаточное количество информационного материала в существующих учебно-методических пособиях (в учебниках нет текстов и примеров);
2. эффективность индивидуального подхода к работе учащихся на данном этапе урока (продуктивная самостоятельная творческая деятельность, индивидуальная траектория освоения материала, индивидуальное время освоения, уровневая дифференциация при выполнении практических заданий);
3. интенсификация учебно-воспитательного процесса (увеличение количества предлагаемой информации, уменьшение времени подачи материала);
4. развитие понятийного мышления за счет возможности и необходимости самостоятельно обобщать материал, выделять смысловые группы, выстраивать логические связи, определять алгоритм работы, систематизировать весь предлагаемый материал.
Задачи урока:
Образовательные: 1. продолжение изучения основ языка разметки гипертекста (HTML) и ознакомление с возможностью использования таблиц для разметки HTML - страниц;
2. овладение учащимися использованием таблиц для разметки web-страничек - расположения на них иллюстраций, фотографий, форматирования текста.
Воспитательные: способствовать формированию умений саморегуляции и саморегулирования своей учебно-познавательной деятельности.
Развивающие: способствовать развитию познавательных и творческих способностей учащихся, их способностей к самообучению.
Необходимое оборудование и материалы для занятия: персональные компьютеры.
План занятия:
Этапы занятия | Временная реализация |
Организационный момент. Приветствие. | 2 мин |
Сообщение темы и разъяснение целей урока. | 3 мин |
Сообщение нового материала. | 7 мин |
Самостоятельная работа учащихся по изучению нового материала. | 15 мин |
Выполнение заданий на закрепление изученного материала. | 15 мин |
Заключение. | 3 мин |
Ход урока
I. Организационный момент. Приветствие.
II. Сообщение темы и разъяснение целей урока.
На предыдущих занятиях мы рассмотрели структуру языка разметки гипертекста HTML, научились форматировать текст, располагать на HTML–страницах графические изображения, соединили с помощью гиперссылок созданные странички и научились использовать на страничках таблицы.
Сегодня мы узнаем, как делать разметку HTML-страниц при помощи таблиц и продолжим создавать HTML-документ, используя новые возможности при оформлении страничек.
Итак, тема урока «Разметка Web-страницы при помощи таблицы».
III. Сообщение нового материала.
Очень часто при оформлении HTML-странички нам хотелось бы структурировать публикуемый материал, а возможностей по форматированию текста не всегда хватает.
Использование таблиц для разметки web-страниц позволяет задать структуру не только для текстовой информации, но и для графических объектов, а также дает возможность определить взаиморасположение текста и графики, сделать страницу более красочной в цветовом оформлении.
Сейчас вы пройдете за компьютеры, откроете электронный учебник HTML и изучите раздел Разметка Web-страницы при помощи таблицы, а затем выполните предложенное задание.
IV. Самостоятельная работа учащихся по изучению нового материала.
Учащиеся рассаживаются за компьютеры и в индивидуальном режиме работают с электронным учебником, обращаясь к учителю в случае необходимости с вопросами.
V. Выполнение заданий на закрепление изученного материала.
Рассмотрев представленные в учебнике примеры, обучающиеся выполняют предложенное задание в индивидуальном режиме, консультируясь с преподавателем в случае необходимости.
VI. Заключение.
Итак, мы рассмотрели сегодня с вами варианты использования таблиц для разметки HTML-страничек и изменили первую страничку ваших сайтов с учетом новых возможностей оформления.
Подумайте, какие изменения вы хотели бы внести в оформление других страниц.
Список использованной литературы.
1. «Информатика и информационные технологии», М., «Лаборатория Базовых Знаний», 2001г.
2. , , «Практикум по информатике и информационным технологиям», М., «Лаборатория Базовых Знаний», 2001г.
3. «Интернет для школьников», М., «Десс Ком», 2000.
4. «Настольная книга Web-мастера», М., «КноРус», 2000г.
