Программа кружка "Сайтостроение"

Структура программы

Раздел 1. Комплекс основных характеристик программы

1. Пояснительная записка

2. Цели и задачи программы

3. Содержание программы

4. Планируемые результаты

Раздел 2. Комплекс организационно-педагогических условий

1. Календарный учебный график

2. Условия реализации программы

3. Формы аттестации

4. Оценочные материалы

5. Методические материалы

6. Календарно-тематическое планирование

Список литературы

Приложения

Глава 1. Комплекс основных характеристик программы

Пояснительная записка

Бурное развитие сети Интернет предъявляет все большие требования к знанию учащихся в области Интернет-технологий. Одной из составляющих данной области являются Web-дизайн и технологии создания сайтов. Реалии сегодняшнего дня таковы, что любой желающий может создать свой собственный Web-сайт и разместить его, абсолютно бесплатно, в сети Интернет. К сожалению, эта возможность не всегда способствует появлению в Российском сегменте сети качественно разработанных и информационно насыщенных web-ресурсов. Зачастую приходится видеть сайты, построенные по шаблонам, с запутанной навигацией и режущей глаза расцветкой. Налицо низкая подготовка начинающих создателей сайтов, возраст которых с каждым годом снижается. Данная программа рассчитана на углубление знаний учащихся в области Web-дизайна и сайтостроения и как следствие в области Интернет-технологий. Выбор именно этого направления обусловлен его востребованностью на данном этапе развития информационных технологий и призван способствовать профессиональному образованию и самоопределению школьников.

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

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

Данная программа рассчитана на учащихся 7-9 классов, не изучавших информатику и ИКТ до 7 класса. Поэтому курс начинается с непродолжительного изучения текстовых и графических редакторов.

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

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

Логическим завершением курса является объединение полученных знаний – творческая работа. На данном этапе учащиеся реализуют свой проект сайта, где каждый может проявить свои склон­ности и таланты. Темы проектов может предложить как педагог, так и воспитанни­ки кружка самостоятельно могут выбрать интересующее их направление и тему.

В курсе реализован прежде всего практический метод, который является неотъем­лемой частью дополнительного образования. Каждое занятие, рассчитанное на 2 часа, предусматривает выполнение заданий или реализацию проекта (творче­ской работы).

Срок реализации программы 1 год для детей 12-15 лет. Занятия проводятся раз в неделю по 2 академических часа с 10-минутным перерывом, общее количество часов в год составляет 68 часов.

Форма обучения – очная. Уровень сложности – стартовый, базовый.

Цели программы

• сформировать элементы информационной компетенции в области web-технологий;

• научить учащихся ориентироваться и продуктивно действовать в информационном Интернет-пространстве;

• получать и развивать теоретические знания и практические навыки в области сайтостроения и Web-дизайна;

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

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

Задачи программы

образовательные:

• изучение языка разметки страниц HTML, получение представления о структуре web-узла;

• создание творческих проектов;

• изучение технологии создания сайтов с помощью Ucoz, Wordpress;

развивающие:

• развитие логического, абстрактного и образного мышлений;

• развитие творческих способностей;

воспитательные:

• формирование творческого подхода к поставленной задаче;

• формирование представления о том, что большинство задач имеют несколько решений;

• формирование целостной картины мира; ориентирование на совместный труд.

Содержание учебного курса

№		Тема занятия	Содержание занятия
Создание и редактирование текстовых документов (4 часа)
1.		Текстовые редакторы. Создание и редактирование текстовых документов.	Понятие текстового редактора. Текстовые редакторы Блокнот, WordPad, Word,текстовый редактор пакета OpenOffice.Создание и редактирование текстов.
2		Дополнительные возможности текстовых редакторов	Проверка орфографии и грамматики, ввод формул, использование в тексте специальных символов, удаление форматирования с помощью Блокнота.
Подготовка изображений для размещения в WWW (8 часов)
3		Графические редакторы. Создание и редактирование изображений	Понятие графического редактора. Графические редакторы Paint, графические редакторы в составе MicrosoftOffice и OpenOffice. Создание и редактирование изображений
4		Использование графических изображений на Web-страницах.	Параметры графического файла. Форматы графических файлов: растровые (JPEG, GIF, PNG) и векторные форматы, их достоинства и недостатки.
5		Получение и редактирование сканированного изображения.	Технология сканирования. Понятия разрешений оригинала, экранного изображения и печатного изображения. Связь между параметрами изображения и размером файла. Редактирование сканированного изображения.
6		Подбор и оптимизация графического изображения для Web-сайта.	Использование готовых изображений на Web-странице – авторское право. Оптимизация графических файлов средствами Gimp.
Введение в технологию создания Web-сайтов (4 часа)
7		Понятие Web-сайта. Классификация Web-сайтов. Этапы разработки Web-сайта.	Интернет-служба WWW; Web-страница; Web-сайт; гипертекст; браузер. Планирование (цели, контент, структура, оформление), реализация, тестирование (на работоспособность и на удобство интерфейса) Web-сайта.
8		Навигационная схема Web-сайта. Обзор инструментальных средств.	Линейная и иерархическая структура сайтов; основные способы создания Web-страниц и сайтов. Анализ примеров (удачных и неудачных) сайтов из сети Интернет.
Язык разметки гипертекста HTML (12 часов)
9,10		Введение в HTML. Структура HTML-страницы. Теги форматирования	Назначение языка HTML. Основные разделы HTML-страницы. Теги, формат тегов, атрибуты. Теги управления отображением шрифта на экране.
11		Графика. Ее использование в HTML.	Размещение графики на web-странице. Атрибуты изображения. Фоновое изображение.
12		Создание списков и их типы.	Теги создания списков.
13		Гипертекстовые ссылки	Построение гипертекстовых связей. Ссылки в пределах одного документа. Ссылки на другой НТМL-документ. Графические ссылки.
14		Создание таблиц средствами НТМL. Таблица как элемент и основа дизайна HTML-страницы	Определение строк и ячеек таблицы. Их объединение. Выравнивание в таблице.
Разработка Web-страниц средствами CMS(20 часов)
15		Понятие CMS. Знакомство с различными CMS.	Понятие CMS. Знакомство с различными CMS.
16		Создание и регистрация сайта в системе Ucoz.	Создание и регистрация сайта в системе Ucoz.
17		Модули uCoz. Активные и неактивные модули. Панель управления в системе uСoz	Модули uCoz. Активные и неактивные модули. Панель управления в системе uСoz
18		Смена дизайна сайта. Редактирование блоков сайта.	Смена дизайна сайта. Редактирование блоков сайта.
19		Смена заголовка сайта. Установка иконки сайта. Установка счетчика сайта.	Смена заголовка сайта. Установка иконки сайта. Установка счетчика сайта.
20		Добавление текста на страницы сайта. Наполнение Блога сайта. Добавление статей в раздел Каталог статей.	Добавление текста на страницы сайта. Наполнение Блога сайта. Добавление статей в раздел Каталог статей.
21		Каталог файлов на uCoz. Обратная связь сайта. Гостевая книга.	Каталог файлов на uCoz. Обратная связь сайта. Гостевая книга.
22		Фотоальбомы, мини-чат, тесты	Создание новых страниц и подстраниц. Редактирование и удаление страниц. Редактирование меню сайта.
23		Создание новых страниц и подстраниц. Редактирование и удаление страниц. Редактирование меню сайта.	Создание новых страниц и подстраниц. Редактирование и удаление страниц. Редактирование меню сайта.
24		Администрирование сайта.	Принципы и технологии обновления сайта. Посещаемость страниц сайта, счетчик, поисковые роботы, рейтинг ресурса, баннер, метатеги, ключевые слова, баннерный обмен.
Создание сайта с помощью технологии Wordpress (10часов)
25	Понятие о технологии Wordpress		Рассмотрение структуры организации сайта при помощи технологии Wordpress
26 27	Основы технологии Wordpress		Организация БД и логических связей для построения сайта
28	Загрузка и размещение сайта на хостинге		Анализ существующих хостингов, подбор оптимального хостинга
29	Редактирование и оформление загруженного сайта		Загрузка и смена изображений, записей.
Творческая работа. Создание сайта на выбранную тему (10 часов)
30 31 32 33	Творческий проект «создание сайта в системе Ucoz»		Творческая работа по созданию, регистрации, наполнению сайта
34	Защита творческих проектов

 Учебный план

№ п/п	Раздел	Количество часов	Вид занятий(количество часов)		Формы аттестации
			Теоретические	Практические
1	Создание и редактирование текстовых документов	4	2	2	Практическая работа
2	Подготовка изображений для размещения в WWW	8	4	4	Практическая работа
3	Введение в технологию создания Web-сайтов	4	2	2	Практическая работа
4	Язык разметки гипертекста HTML	12	6	6	Практическая работа
5	Разработка Web-страниц средствами CMS	20	10	10	Практическая работа
6	Создание сайта с помощью технологии Wordpress	10	5	5	Практическая работа
7	Творческая работа. Создание сайта на выбранную тему	10	-	10	Практическая работа
Всего		68	29	39

Планируемые результаты

К концу обучения, обучающиеся должны знать:

• основные текстовые редакторы и способы форматирования в них;

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

• принципы технологии создания web-сайтов;

• правила и синтаксис языка разметки html;

• принцип и логику работы с Ucoz, Wordpress;

К концу обучения обучающиеся должны уметь:

• обрабатывать текстовую информацию, редактировать готовый текст;

• создавать, изменять и оптимизировать графические изображения, фотографии;

• ориентироваться в технологиях создания web-сайтов;

• использовать язык разметки html, создавать и редактировать web-страницы с помощью него;

• создавать, редактировать сайты с помощью Ucoz, Wordpress.

Глава 2. Комплекс организационно-педагогических условий

Календарно-учебный график

Количество учебных недель – 34 недели.

Количество учебных дней – 210 дней.

Продолжительность каникул:

Осенние каникулы (28.10.17 – 05.11.17)

Зимние каникулы (29.12.17 – 09.01.17)

Весенние каникулы (24.03.17 – 01.04.17)

Начало учебных занятий – 07.09.17

Конец учебного года – 31.05.18

Условия реализации программы

Материально-техническое обеспечение

1. Компьютерный класс.

2. Мультимедийный проектор.

3. Сканер.

В процессе обучения используется следующее программное обеспечение:

• операционная система Microsoft Windows;

• обозреватель Microsoft Internet Explorer и другие интернет браузеры

• текстовые редакторы Блокнот, WordPad, Word,текстовый редактор пакета OpenOffice.

• графические редакторы Paint, PaintNet, графические редакторы в составе MicrosoftOffice и OpenOffice;

• архиватор 7-Zip;

• раздаточный материал;

• видео;

• текстовые материалы в электронном виде;

• Web сайты по теме Web-технологии. Основы сайтостроения.

Основные методы и приемы обучения:

1) Объяснительно-иллюстрационный:

- беседа

• презентации

• видео ролики

• теоретические лекции

2) Репродуктивный:

- ответы на ключевые вопросы после теоретических занятий

• работа с текстовыми и графическими редакторами

3) Продуктивная творческая деятельность:

• создание web-страниц

• редактирование и оптимизация графических изображений

• редактирование сайта

4) Исследовательский:

• работа с использованием сети интернет

Особенности организации образовательного процесса: очно.

Формы организации учебного занятия:

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

Форма аттестации

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

Итоговая аттестация: творческий проект.

Оценочные материалы

Практическая работа №1 «Создание и редактирование текстовых документов»

Задание 1. В папке «Кружок» создать текстовый документ в текстовом редакторе Microsoft Office Word, дать имя документу - Моделирование. Выставить параметры страницы: Формат - А4, Ориентация – Книжная. Затем выставить параметры символов: Тип шрифта – Times New Roman, Размер шрифта – 14, Выравнивание – по ширине, Межстрочный интервал – 1,5.

Задание 2. Набрать текст:

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

Модели позволяют представить в наглядной форме объекты и процессы, недоступные для непосредственного восприятия (очень большие или очень маленькие объекты, очень быстрые или очень медленные процессы и др.). Наглядные модели часто используются в процессе обучения. В курсе географии первые представления о нашей планете Земля мы получаем, изучая ее модель – глобус, в курсе физики изучаем работу двигателя внутреннего сгорания по его модели, в химии при изучении строения вещества используем модели молекул и кристаллических решеток, в биологии изучаем строение человека по анатомическим муляжам и т.д.

Задание 3. Первый абзац поместить в рамку, цвет – Красный, ширина – 3 пт.

Задание 4. Предложение: «…Наглядные модели часто используются в процессе обучения…» зачеркнуть.

Задание 5. Словосочетания во втором абзаце  - «В курсе географии», «в курсе физики», «в химии», «в биологии» - оформить подчеркиванием в виде волнистой линии, цвет линии – Синий.

Задание 6. В первом абзаце слова в скобочках - установить расстояние между символами – интервал Уплотненний на 1,5 пт.

Практическая работа №2 «Подготовка изображений для размещения в WWW»

2.1

1. Откройте изображение в Gimp и выберите «Файл» - «Сохранить для Интернета и устройств».

2. В диалоговом окне «Сохранить для Интернета и устройств» щелкните вкладку «Оптимизированный».

3. В меню «Стиль» выберите «Низкое качество JPEG».

4. Щелкните вкладку «Размер изображения».

5. Убедитесь, что установлен параметр «Сохранить пропорции» и введите ширину. Для электронной почты подходит размер 400 пикселов.

6. Нажмите кнопку «Сохранить». Введите имя файла и путь для сохранения файла. Убедитесь, что в меню «Формат» выбран вариант «Только изображения». Нажмите кнопку «Сохранить».

2.2

• Откройте файл Цветок и вызовите диалог «Сохранить для Веб и устройств» (Save for Web & Devices) в меню File.

• Выберите вкладку «Оптимизированный» (Optimized)

• Откройте список «Наборы параметров» (Preset) и выберите один из 12 предлагаемых вариантов – JPEG Medium (средний)

• Оцените качество изображения и размер итогового файла

• Уровень качества, можно грубо задать в меню, а можно точно настроить ползунком «Качество» (Quality): передвиньте ползунок на 70.

• Включите флажок опции «Оптимизированный» (Optimized): позволяет чуть уменьшить размер файла в обмен на ограничение совместимости со старинными браузерами.

2.3

• Откройте файл Бабочка.

• Из «списка форматов» выберите пункт «GIF».

• Выберите (или впечатайте) количество оттенков в поле «Цвета» (Colors) и посмотрите, как это отразилось на изображении и размере итогового файла (установите 90)

• Для уменьшения исходной гаммы картинки до заданного количества, можно воспользоваться одним из 9 доступных методов редукции цвета. Выберите одну из четырёх верхних опций: установите «Ограниченная» (Restrictive)

• Смешение цветов (Dithering) отчасти компенсирует узость гаммы, «конструируя» отсутствующие цвета из набора имеющихся. Выберите «Диффузия» (Diffusion) и передвиньте ползунок Dither (степень количества полутонов) на 80.

• В таблице цветов выберите один из цветов (желтый), дважды щелкнув по цвету, и замените его другим оттенком. Для выбора можно воспользоваться Пипеткой в левой части экрана.

• Щелкните кнопку Done, чтобы сохранить параметры оптимизации в исходный документ

2.4

• Откройте файл Букет.

• Откройте файл в редакторе. Выделите фрагмент картинки (цветок) Прямолинейным Лассо или любым другим инструментом.

• Сохраните выделение в альфа-канал (Select → Save Selection (Выделение → Сохранить выделение)). Дайте ему имя (введите в поле Имя).

• Откройте диалог «Сохранить для Веб и устройств», выберите «JPEG» в качестве формата на выходе и, если нужно, настройте уровень качества.

• Щёлкните кнопку «маска» по соседству с полем «Качество» (Quality). Открывается диалоговое окно.

• Выберите в меню «Канал» (Channel) только что сохранённый альфа-канал. Настройте «Минимальное» и / или «Максимальное» значения по вкусу и нажмите Ok.

2.5

• В диалоговом окне «Сохранить для Интернета и устройств» в раскрывающемся меню «Оптимизация» выберите пункт «Изменить настройки вывода» (Edit output settings).

• Отметьте флажок Вывод XHTML: При экспорте создаются web-страницы, соответствующие стандарту XHTML.

• Щелкните по кнопке Следующая и настройте параметры в группе «Фрагменты».

• Настройте вывод фона щелкнув по Следующая.

• Щелкните ОК и сохраните оптимизированный файл.

• Просмотрите HTML-код результирующего файла.

Тест по теме «Введение в технологию создания Web-сайтов»

1. Выбери визуальные HTML-редакторы.

- Antenna

- Site Spinner

- Notepad++

- Note Tab

- WebPlus

1. Выбери текстовые редакторы, которые можно использовать для создания веб-страниц.

• RapidWeawer

• TextEdit

• Metapad

• NEdit

• KompoZer

1. Выбери верный ответ.

 Можно документ, подготовленный в текстовом процессоре (Microsoft Word, Writer), сохранить как Web — страницу (в формате __________________).

• Текстовой процессор

• Pdf

• HTML

• Инструкция

1. При наполнении страниц сайта информационными материалами следует придерживаться следующих рекомендаций:

- названия пунктов меню делайте длинными

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

- не выбирайте для страниц пёстрый фон, на таком фоне текст читается с трудом

- в каждом абзаце используйте одни и те же приёмы форматирования

- выбирайте для страниц пёстрый фон, на таком фоне текст читается очень легко

 5. Язык HTML:

 

• 

• 

Практическая работа №3 «Язык разметки гипертекста HTML»

Цель работы: формирование навыков использования основных тэгов языка HTML при создании Web-сайта в текстовом редакторе Блокнот.

Описание сайта

Web-сайт состоит из 5 связанных гиперссылками страниц:

1. Титульная страница «Времена года» - файл index.htm;

2. «Зима» – файл winter.htm;

3. «Весна» – файл spring.htm;

4. «Лето» – файл summer.htm;

5. «Осень» – файл autumn.htm.

Часть 1

Создание страницы «Зима»

Скопировать папку «Времена года» в личную папку.

1. Запустить приложение Блокнот. Создать html-код страницы «Зима», опираясь на изученный ранее материал (конспект, текст параграфа).

2. Разместить на странице теги, определяющие страницу в целом.

3. Введите заголовок первого уровня «Времена года» и заголовок второго уровня «Зима». Отцентрируйте заголовки.

4. Выполните отбивку заголовков прямыми линиями. Цвет первого заголовка – черный, цвет второго – синий.

5. Сохранить файл в папке «Времена года»: установите тип файлов – «Все файлы», укажите имя файла – winter.htm.

6. Просмотрите страницу в браузере.

7. Установите фоновый цвет страницы (голубой, bgcolor="ccccff").

8. Поместите рисунок, выравнивая его по правому краю документа.

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

10. Создайте панель навигации по сайту.

11. Сохраните файл. Просмотрите страницу в браузере. Она должна иметь вид, соответствующий образцу.

Часть 2

Создание страницы «Весна»

1. Запустить приложение Блокнот. Создать html-код страницы «Весна».

2. Заголовки и их отбивку выполнить аналогично странице «Зима», цвет второго заголовка – зеленый.

3. Цвет фона – бирюзовый (bgcolor="00ffcc").

4. Стихи разместить аналогично странице «Зима», начертание символов определить как полужирный курсив.

5. Рисунок разместить аналогично странице «Зима», установив размеры изображения по вертикали и горизонтали: 450 на 600 пикселей.

6. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – spring.htm

7. Открыть файл spring.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 3

Создание страницы «Лето»

1. Запустить приложение Блокнот. Создать html-код страницы «Лето».

2. Заголовки и их отбивку выполнить аналогично, цвет заголовков – черный.

3. Разместить объекты на странице, согласно образцу. Цвет фона – зеленый (bgcolor="00cc66").

4. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – summer.htm.

5. Открыть файл summer.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 4

Создание страницы «Осень»

Запустить приложение Блокнот. Создать html-код страницы «Осень».

1. Заголовки и их отбивку выполнить аналогично, цвет первого заголовка – черный, второго – коричневый оттенок #993300.

2. Разместить объекты на странице, согласно образцу. Цвет фона – желтый (bgcolor="ffcc66").

3. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – autumn.htm.

4. Открыть файл autumn.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Часть 5

Создание титульной страницы

Запустить приложение Блокнот. Создать html-код титульной страницы.

1. Поместить заголовок первого уровня «Времена года», выравнивание – по центру, цвет заголовка – синий.

2. Выполнить отбивку заголовка прямой линией.

3. Поместить таблицу из 2 строк и двух столбцов. Задать ширину границ – 3 пункта, размер ячеек 300 на 200 пикселей.

4. Поместить в ячейки иллюстрации.

5. Добавить панель навигации.

6. Сохранить файл в папке «Времена года». Указать тип файлов – «Все файлы». Указать имя файла – index.htm.

7. Открыть файл index.htm с помощью браузера Internet Explorer. Вид окна должен соответствовать образцу.

Практическая работа №4 «Разработка Web-страниц средствами CMS»

Цель работы: создание студентом своего сайта на бесплатном хостинге

1. Зайдите на сайт http://www.ucoz.ru и зарегистрируйтесь там (кнопка Регистрация вверху сайта). Запишите на бумажку свой e-mail и пароль.

2. На сайте http://www.ucoz.ruвведитеe-mail и пароль в соответствующие текстовые поля в правом верхнем углу страницы. Вы попали в так называемый Вебтоп – оболочку для создания и работы с Вашими сайтами.

3. Нажмите кнопку Создать сайт (Create a website).

4. Введите адрес своего сайта и нажмите ОК.

5. Сделайте описание сайта – нажмите на строку с описанием и введите свое.

6. Перейдите к редактированию сайта.

Практическая работа №5 «Создание сайта с помощью технологии Wordpress»

Шаг 1. Установка локального сервера на компьютер

Для использования WordPress на своем компьютере, сначала нужно скачать бесплатное программное обеспечение XAMPP. Это среда PHP разработки, хоть и есть много других возможностей для использования WordPress локально, но это является лучшим.

Итак, устанавливаем XAMPP.

1. Загружаем XAMPP по ссылке https://www.apachefriends.org/ru/index.html

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

1. Устанавливаем XAMPP

После загрузки соответствующего файла начните установку двойным щелчком

мыши.

В процессе установки оставьте стандартные настройки и нажмите «Далее».

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

Ждем, пока XAMPP установится, чтоб перейти к следующему шагу.

Шаг 3. Запускаем XAMPP Когда XAMPP установлен на ваш компьютер, выберите «Начать загрузку панели управления сейчас» и нажмите «Готово».

После этого нажмите «Start» для Apache и MySql:

На этом этапе обычно приходит оповещение о системе безопасности от Windows, но вы можете ни о чем не беспокоиться. Убедитесь, что вы нажали на «Разблокировать», и ваш локальный сервер XAMPP будет готов к использованию.

Чтоб проверить, все ли сделано правильно, откройте браузер и перейдите по этому адресу: http://localhost

Если XAMPP настроен правильно, то вы должны увидеть следующее:

Если такого изображения не появляется, попробуйте отключить антивирусную программу и снова нажать на http://localhost.

Шаг 2. Создаем базу данных для WordPress

Так как WordPress использует базу данных, то нам нужно ее создать перед установкой WordPress. Это делается очень просто и всего в несколько шагов.

Для начала переключитесь на панель управления, нажмите на кнопку «Админ», а затем на «Старт» для MySql:

После этого в вашем браузере должна открыться админ-панель phpMyAdmin:

Здесь нажмите на «Databases», введите название вашей БД (любой набор латинских символов) и нажмите на кнопку «Создать». Так как вы можете создать несколько БД и произвести несколько установок WordPress на свой компьютер. Главное, дайте такое имя для БД, чтобы потом не перепутать, к какому сайту оно относится.

Когда вы увидите сообщение, подтверждающее создание базы данных, можете переходить к следующему шагу.

Шаг 4. Загружаем WordPress

Перейдите на WordPress.org и скачайте последнюю версию WordPress. После загрузки zip-файла, перенесите его туда, где вы установили XAMPP и сохраните в папке

«htdocs».

Затем разархивируйте этот файл, кликнув на него правой кнопкой мыши и выбрав «Извлечь в текущую папку»:

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

Шаг 5. Настраиваем WordPress

Мы практически все сделали. Осталось только отредактировать и переименовать один файл. В каталоге WordPress, который вы только что создали, найдите файл wp- config-sample.php и откройте его с помощью текстового редактора, например Notepad++ (скачать можно по ссылке https://notepad-plus-plus.org):

Отредактируйте данные в выделенной области в соответствии с названием базы данных, которую вы создали в шаге 3.

Сохраните файл и переименуйте его на wp-config.php, удалив –sample из его названия.

Шаг 6. Устанавливаем WordPress

Чтобы установить WordPress, введите в браузере адрес: http://localhost/WordPress/, где «WordPress» является названием папки, которую вы создали в шаге 5. После загрузки страницы отобразится следующее:

Затем введите необходимые данные, нажмите на «Установить WordPress», после чего на вашем компьютере появится установленный WordPress в автономном режиме.

Шаг 8. Первые шаги работы в WordPress (визуальная настройка)

1. Вход в административную панель

Для входа в панель управления нужно написать после названия сайта в строке ввода веб адреса интернет обозревателя wp-login.php. Ввести ранее зарегистрированные данные – имя пользователя и пароль, затем нажать войти.

После чего, открывается консоль управления своим сайтом.

1. Настраиваем внешний вид сайта

Для этого заходим в панель администратора WordPress и в левом меню нажимаем Внешний вид - Темы, далее заходим Установить темы и с помощью фильтров подбираем светлую, темную или любую другую тему. На скриншоте выбрана тёмная. И нажимаем на кнопку найти тему.

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

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

1. Настраиваем виджеты

Далее настроим виджеты. Виджеты – это такие вспомогательные меню, которые находятся обычно в сайдбаре (в правой или левой части сайта). Они отображают свежие записи, новые комментарии, архивы, рубрики и другие полезные элементы меню так называемого юзабилити.

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

Может быть так:

1. Рубрики – это перечисление ваших категорий, к которым относятся статьи

2. Свежие записи – перечисление новых поступивших статей.

3. Свежие комментарии – новые комментарии.

4. Мета – это список тегов/меток относящихся к тем или иным статьям или темам.

5. Архивы – количество статей за определенный месяц или срок.

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

1. Настройка пользователей

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

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

1. Настройка параметров

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

1. Создадим несколько страниц

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

Нажмите Добавить новую в разделе Страницы. впишите заголовок этой страницы – “О сайте”.

В визуальном редакторе откройте дополнительную панель, щелкнув по кнопке показать/скрыть дополнительную панель. В впишите текст в вашем сайте.

Обязательно измените название Постоянной ссылки, чтобы она была написана латиницей (на английском), иначе могут быть проблемы в поисковиках и в некоторых местах при формировании ссылки. Всегда изменяйте Постоянную ссылку. Указываем порядок – “1”. Теперь в горизонтальном меню она будет первая. И жмем кнопку Опубликовать.

На сайте есть первая страница. Теперь можно удалить стандартно созданную страницу – “Пример страницы”. Для этого щелкните Все страницы в разделе Страницы и подведите мышку к Пример страницы. Снизу появится меню выберите удалить.

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

После создания страницы О сайте, создайте страницы Об авторе и Контакты, при этом не забывая указывать их порядок (Об авторе(2-вторая), Контакты(3-третья)). В странице Об авторе напишите пару строк о себе. В странице Контакты впишите ваш адрес электронной почты и о том как связаться с вами.

1. Контент

Создадим рубрику. Для добавления рубрики зайдите в Записи - Рубрики. Придумайте название рубрики, название ярлыка – на английском языке и краткое описание.

Рубрика создается для наполнения статей.

1. Записи

Для того чтобы добавить новую запись(статью или обзор) зайдите в раздел Записи

- Добавить новую.

Введите заголовок статьи. Далее изменить постоянную ссылку на ссылку в виде латиницы(на английском). Далее вставляем основной текст в визуальный редактор. Справа выбираем, в какую рубрику поместить статью. Можно также добавить ключевые слова или тэги в раздел метки.

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

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

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

Посмотрите ваш сайт через браузер.

Можно удалить созданную по умолчанию запись Привет, мир! Для этого зайдите в Записи - Все записи и подведите курсор мышки к записи Привет, мир! Снизу появится меню в котором нужно выбрать Удалить. Запись будет удалена и перемещена в корзину которую потом можно очистить

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

Методические материалы

1. Мультимедийные презентации в формате MS Power Point

2. Заготовки рисунков, анимаций, текстов и др

3. Учебник-практикум. Л.Ф.Соловьева. Основы информатики. Сетевые технологии. Санкт-Петербург, «БХВ-Петербург», 2004.

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

Календарно-тематическое планирование (Приложение №1)

Список литературы

I Международный уровень:

1. Всеобщая декларация прав человека (Генеральная Ассамблея ООН 10 декабря 1948 г.)

2. Всемирная декларация об обеспечении выживания, защиты и развития детей (Нью-Йорк, 30 сентября 1990)

3. Конвенция о правах ребенка (Нью-Йорк, 20 ноября 1989 г.)

II Федеральный уровень:

1. Конституция РФ (принято всенародным голосованием 12 декабря 2003 г.)

2. Концепция духовно-нравственного развития и воспитания личности гражданина России (серия: «Стандарты нового поколения», Данилюк А.Я. и др. – М.: «Просвещение», 2009)

3. Федеральный закон от 29 декабря 2012 г. №273-ФЗ «Об образовании в РФ»

III Региональный уровень:

1. Закон Забайкальского края от 11 июля 2013 г. №858-ЗЗК «Об отдельных вопросах в сфере образования» (принят Законодательным Собранием Забайкальского края 3 июля 2013 г.)

IV Литература для педагога:

1. Учебник-практикум. Л.Ф.Соловьева. Основы информатики. Сетевые технологии. Санкт-Петербург, «БХВ-Петербург», 2004

Приложения

Приложение 1

№ п/п	Тема занятия	Кол во часов		Элементы содержания	Требования к уровню подготовки		Оборудование и ИКТ	Вид контроля		Дата
										план	факт
Создание и редактирование текстовых документов (4 часа)
1	Инструкция по ТБ. Текстовые редакторы. Создание и редактирование текстовых документов.	2		Понятие текстового редактора. Текстовые редакторы Блокнот, WordPad, Word,текстовый редактор пакета OpenOffice.Создание и редактирование текстов.	Знать понятие текстового редактора. Уметь создавать и редактировать тексты в различных текстовых редакторах.		Компьютер, мультимедийный проектор, текстовые редакторы.	Пр. работа
2	Дополнительные возможности текстовых редакторов	2		Проверка орфографии и грамматики, ввод формул, использование в тексте специальных символов, удаление форматирования с помощью Блокнота.	Уметь применять текстовые редакторы для проверки орфографии и грамматики, ввода формул, использования в тексте специальных символов, удаления форматирования с помощью Блокнота.		Компьютер, мультимедийный проектор, текстовые редакторы.	Пр. работа
Подготовка изображений для размещения в WWW (8 часов)
3	Графические редакторы. Создание и редактирование изображений	2	Понятие графического редактора. Графические редакторы Paint, PaintNet, графические редакторы в составе MicrosoftOffice и OpenOffice, Photoshop. Создание и редактирование изображений.		Уметь применять различные графические редакторы для создания, редактирования и сохранения изображений.		Компьютер, мультимедийный проектор, графические редакторы.	Пр. работа
4	Использование графических изображений на Web-страницах.	2	Параметры графического файла. Форматы графических файлов: растровые (JPEG, GIF, PNG) и векторные форматы, их достоинства и недостатки.				Компьютер, мультимедийный проектор, Интернет, графические редакторы	Фр. опрос. Пр. работа
5	Получение и редактирование сканированного изображения	2	Технология сканирования. Понятия разрешений оригинала, экранного изображения и печатного изображения. Связь между параметрами изображения и размером файла. Редактирование сканированного изображения.		Уметь использовать сканер для получение изображения. Уметь редактировать и оптимизировать отсканированное изображение с помощью графических редакторов.		Компьютер, мультимедийный проектор, сканер, графические редакторы	Фр. опрос Пр. работа
6	Подбор и оптимизация графического изображения для Web-сайта.	2	Использование готовых изображений на Web-странице – авторское право. Оптимизация графических файлов.				Компьютер, мультимедийный проектор, Интернет, графические редакторы	Фр. опрос Пр. работа
Введение в технологию создания Web-сайтов (4 часа)
7	Понятие Web-сайта. Классификация Web-сайтов. Этапы разработки Web-сайта.	2	Интернет-служба WWW; Web-страница; Web-сайт; гипертекст; браузер. Планирование (цели, контент, структура, оформление), реализация, тестирование (на работоспособность и на удобство интерфейса) Web-сайта.		Знать понятие Интернет-служба WWW; Web-страница; Web-сайт; гипертекст; браузер, структура сайтов и Web-страниц		Компьютер, мультимедийный проектор, Интернет, браузер, графический редактор	Фр. опрос
8	Навигационная схема Web-сайта. Обзор инструментальных средств	2	Линейная и иерархическая структура сайтов; основные способы создания Web-страниц и сайтов. Анализ примеров (удачных и неудачных) сайтов из сети Интернет.					Фр. опрос
Язык разметки гипертекста HTML(12 часов)
9 10	Введение в HTML. Структура HTML-страницы. Теги форматирования	4	Назначение языка HTML. Основные разделы HTML-страницы. Теги, формат тегов, атрибуты. Теги управления отображением шрифта на экране.		Знать Назначение языка HTML. Основные разделы HTML-страницы. Теги, формат тегов, атрибуты. Теги управления отображением шрифта на экране. Уметь использовать теги форматирования.		Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот	Фр. опрос Пр. работа
11	Графика. Ее использование в HTML.	2	Размещение графики на web-странице. Атрибуты изображения. Фоновое изображение.		Знать и использовать теги графики.		Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот	Фр. опрос Пр. работа
12	Создание списков и их типы.	2	Теги создания списков.		Знать и использовать теги создания списков.			Фр. опрос Пр. работа
13	Гипертекстовые ссылки	2	Построение гипертекстовых связей. Ссылки в пределах одного документа. Ссылки на другой НТМL-документ. Графические ссылки.		Знать и использовать теги создания гипертекстовых ссылок.			Фр. опрос Пр. работа
14	Создание таблиц средствами НТМL. Таблица как элемент и основа дизайна HTML-страницы	2	Определение строк и ячеек таблицы. Их объединение. Выравнивание в таблице.		Знать и использовать теги создания теги создания таблиц			Фр. опрос Пр. работа
Разработка Web-страниц средствами CMS (20 часов)
15	Понятие CMS. Знакомство с различными CMS.	2	Понятие CMS. Различные CMS.		Знать основные принципы создания сайтов с помощью CMS.		Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот	Пр. работа
16	Создание и регистрация сайта в системе uCoz.	2	Создание и регистрация сайта в системе uCoz.		Уметь создавать и регистрировать сайты в системе uCoz.			Пр. работа
17	Модули uCoz. Активные и неактивные модули. Панель управления в системе uСoz	2	Понятие модулей, активных и неактивных панелей, функции панели управления в системе uСoz		Уметь активировать и убирать модули, работать с панелью управления в системе uСoz.			Пр. работа
18	Смена дизайна сайта. Редактирование блоков сайта.	2	Смена дизайна сайта. Редактирование блоков сайта.		Уметь изменять дизайн сайта. Создавать, редактировать и удалять блоки сайта.			Пр. работа
19	Смена заголовка сайта. Установка иконки сайта. Установка счетчика сайта.	2	Смена заголовка сайта. Установка иконки сайта. Установка счетчика сайта.		Уметь изменять заголовок сайта, устанавливать иконку сайта, и счетчик.			Пр. работа
20	Добавление текста на страницы сайта. Наполнение Блога сайта. Добавление статей в раздел Каталог статей.	2	Добавление текста на страницы сайта. Наполнение Блога сайта. Добавление статей в раздел Каталог статей.		Уметь добавлять текст на страницы. Наполнять Блог, добавлять статьи в каталог статей.			Пр. работа
21	Каталог файлов на uCoz. Обратная связь сайта. Гостевая книга.	2	Каталог файлов на uCoz. Обратная связь сайта. Гостевая книга.		Уметь добавлять файлы в каталог файлов, уметь редактировать и удалять материалы в гостевой книге, использовать на сайте обратную связь.			Пр. работа
22	Фотоальбомы, мини-чат, тесты	2	Фотоальбомы, мини-чат, тесты		Уметь создавать разделы и категории в фотоальбомах, добавлять фотографии, редактировать и удалять сообщения в мине-чате, строить тесты.		Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот. Графические редакторы.	Пр. работа
23	Создание новых страниц и подстраниц. Редактирование и удаление страниц. Редактирование меню сайта.	2	Создание новых страниц и подстраниц. Редактирование и удаление страниц. Редактирование меню сайта.		Уметь создавать новые страницы и подстраницы. Редактировать и удалять страницы. Редактировать меню сайта.			Пр. работа
24	Администрирование сайта.	2	Принципы и технологии обновления сайта. Посещаемость страниц сайта, счетчик, поисковые роботы, рейтинг ресурса, баннер, метатеги, ключевые слова, баннерный обмен.		Знать о принципах и технологии обновления сайта, посещаемости страниц сайта, счетчик, поисковых роботах, рейтинге ресурса, баннерах, метатегах, ключевых словах		Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот.	Пр. работа
Создание сайта с помощью технологии Wordpress (10часов)
25	Понятие о технологии Wordpress	2	Понятие о Web-программировании. Назначение JavaScript. Структура HTML документа с сценарием. Расположение сценариев. Программирование как процесс описания алгоритмов на формальных языках.		Знать понятие о Web-программировании. Назначение JavaScript. Структура HTML документа с сценарием. Расположение сценариев.		Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот.		Пр. работа
26	Основы технологии Wordpress	2	Данные, переменные и оператор присваивания. Операторы: арифмети­ческие, сравнения, логические		Знать и уметь использовать операторы присваивания, арифметические и логические операторы.				Пр. работа
27	Основы технологии Wordpress	2	Операторы условного перехода. Операторы цикла. Функции		Знать и уметь использовать операторы условного перехода, операторы цикла, функции				Пр. работа
28	Загрузка и размещение сайта на хостинге	2	Примеры событий и сценариев.		Уметь вставлять на Web –страницу простые сценарии.				Пр. работа
29	Редактирование и оформление загруженного сайта	2	Загрузка и смена изображений		Уметь загружать и сменять изображения на Web –страницу с помощью сценариев.				Пр. работа
Создание сайта в системе CMS uCoz (10 часов)
30 31 32 33	Творческий проект «создание сайта в системе Ucoz»	8	Творческая работа по созданию, регистрации, наполнению сайта.		Уметь создавать сайт в системе Ucoz	Компьютер, мультимедийный проектор, Интернет, браузер, Блокнот. Графические редакторы, сканер.			Пр. работа
34	Защита творческих проектов	2	Защита творческих проектов		Уметь презентовать созданный сайт.	Компьютер, мультимедийный проектор, Интернет, браузер.			Защита проекта

42