сайт школы от замысла до создания

Организация занятий для учителей информатики при МОБУ СОШ с.Аркаулово
на январь-февраль месяц 2009г
Разработала учитель информатики ИКТ
МОБУ СОШ с.Аркаулово Шамсутдинова Л.Р.
Сайт школы от замысла до создания.
План занятий.
Урок 1-4.
Теория. Техника безопасности. Сайт школы от замысла до создания.
Изучаемые вопросы:
Школьный сайт – визитная карточка школы.
Каким должен быть хороший школьный сайт?
Начинаем с подготовки:
 Организация команды разработчиков
 Технические и программные средства
Практика.


На сайте по адресу iit.metodist.ru ознакомится с web-сайтами, участниками московских конкурсов ученических
компьютерных проектов;
Ознакомиться с сайтами школ РБ.
Урок 5-8
Теория. Сайт школы от замысла до создания.
Изучаемые вопросы:
Создаем сайт






Проектирование.
Написание контента.
Разработка визуальной составляющей сайта.
Написание кода.
Тестирование.
Публикация.
Разработка структуры




Плоская структура.
Линейная структура.
Древовидная структура
Комбинированная структура.
Практика.

Ознакомиться с сайтами школ Салаватского района, РБ.
Урок 9-12.
Теория. Сайт школы от замысла до создания.
Изучаемые вопросы:
Принципы построения системы навигации
 Презентационная страница
 Информационная страница
Подготовка контента.
Практика.

Создать титульную страницу вашего сайта.
Урок 13-16.
Теория. Сайт школы от замысла до создания.
Изучаемые вопросы:
Дизайн сайта




Формат GIF
Формат JPG
цветовая схема Web-сайта
графическое оформление сайта
Практика.

Создать титульную страницу вашего сайта.
Урок 17-20.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Структура HTML-документа.
 С чего начинается HTML
 С чего начинается работа
Заголовок HTML-документа
 Элементы, относящиеся к заголовку документа:


HEAD
TITLE


STYLE
LINK


META
BODY
Практика.

Создать титульную страницу вашего сайта.
Урок 21-24.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Гиперссылки
Текстовые блоки
Элементы:
- H1,H2,...H6
- P
- DIV
- ADDRESS
- BLOCKQUOTE
- BR
- HR
- PRE
Используются для создания заголовков текста
Используется для разметки параграфов.
Отделяет блок HTML-документа от остальной его части
Оформляет текст как почтовый адрес
Оформляет текст как цитату
Осуществляет перевод строки
Вставляет в текст горизонтальную разделительную линию.
Включает в документ (моноширинным шрифтом) блок предварительно
отформатированного текста
- LISTING, PLAINTEXT, XMP Включают в документ (моноширинным шрифтом) блок предварительно
отформатированного текста (устаревшие элементы)
Форматирование текста
Элементы форматирования текста:
- BASEFONT Определяет основной шрифт, которым должен отображаться текст документа
Позволяет изменять цвет, размер и тип шрифта текста
- FONT
Выделяет текст курсивом
- I
Используется для смыслового выделения текста (курсивом)
- EM
Выделяет текст жирным шрифтом
- B
Усиленное выделение текста (жирным)
- STRONG
Выделяет текст подчеркнутым
- U
Выделяет текст перечеркнутым
- S, STRIKE
Отображает текст увеличенным шрифтом (относительно текущего)
- BIG
Отображает текст уменьшенным шрифтом (относительно текущего)
- SMALL
- SUP
- SUB
- CODE, SAMP
- TT
- KBD
- VAR
- CITE
Практика.

Отображает текст со сдвигом вверх (верхний индекс)
Отображает текст со сдвигом вниз (нижний индекс)
Оформляют текст как формулу или программный код
Отображает текст моноширинным шрифтом
Выделяет текст, который предлагается набрать на клавиатуре
Используется для обозначения в тексте переменных
Оформляет текст как цитату или ссылку на источник
Создать титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением
графики. Задайте для страницы фон.
Урок 25-29.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Списки
Элементы:
Создает неупорядоченный список
- UL
Создает упорядоченный список
- OL
Создает пункт меню внутри элементов OL или UL
- LI
- MENU, DIR Создает неупорядоченный список, подобный UL
Открывает и закрывает список определений
- DL
Создает термин в списке определений внутри элемента DL
- DT
Cоздает определение термина внутри элемента DL
- DD
Объекты
Элементы:
IMG
Используется для вставки в HTML изображений
EMBED
Используется для вставки в HTML различных объектов
NOEMBED Используется, если браузер не поддерживает элемент EMBED
APPLET
Используется для вставки в HTML Java-апплетов
PARAM
Используется для передачи параметров Java-программе (см. элемент APPLET)
Практика.


Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Разместить на web-странице вложенный список, содержащий разные типы списков.
Урок 30-33.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Таблицы
Элементы для создания таблиц:
Создает таблицу
- TABLE
Задает заголовок таблицы
- CAPTION
Создает новый ряд (строку) ячеек таблицы
- TR
Создает ячейку с данными в текущей строке
- TD и TH
- Примеры таблиц
Практика



Создать титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением
графики. Задайте для страницы фон.
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Разместить на web-странице вложенный список, содержащий разные типы списков.
Урок 34-37.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Формы
Элементы для создания форм:
Создает заполяемую форму
- FORM
- TEXTAREA Создает поле для ввода нескольких строк текста
Создает меню в заполняемой форме
- SELECT
Создает отдельные пункты в меню (см. SELECT)
- OPTION
Создает поле в форме
- INPUT
Практика



Создать титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением
графики. Задайте для страницы фон.
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Разместить на web-странице вложенный список, содержащий разные типы списков.
Урок 38-41.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Фреймы
Элементы для создания фреймов и работы с ними:
- FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов
на странице
Определяет фрейм и его свойства внутри FRAMESET-структуры
- FRAME
- NOFRAMES Определяет что показывать, если браузер не поддерживает фреймы
Практика



Создать титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением
графики. Задайте для страницы фон.
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Разместить на web-странице вложенный список, содержащий разные типы списков.
Урок 42-45.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Скрипты
Элементы для работы со скриптами:
Вставляет скрипт в HTML-документ
- SCRIPT
- NOSCRIPT Определяет текст, который будет отображен, если браузер не поддерживает скрипты
Практика



Создать титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением
графики. Задайте для страницы фон.
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Разместить на web-странице вложенный список, содержащий разные типы списков.
Урок 46-49.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Навигационные карты
 AREA
Что такое CSS и для чего это нужно?
 Связывание
 Внедрение
Встраивание в теги документа
 MAP
 CSS: Свойства шрифта
 CSS: Цвет элемента и цвет фона
 CSS: Свойства текста
 CSS: Позиционирование
 CSS: Границы
Практика





Создайте web-страницы вашего сайта. Поэкспериментируйте с форматированием текста и размещением
графики. Задайте для страницы фон.
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Разместить на web-странице вложенный список, содержащий разные типы списков.
Используя инструментальное средство разработки web-сайта, попробуйте улучшить дизайн вашего сайта.
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
Урок 50-53.
Теория. Сайт школы от замысла до создания
Изучаемые вопросы:
Загрузка сайта на wев-сервер
Практика


Практическое освоение CSS
Найдите в Интернете сервер, которые предлагают услуги по размещению сайтов, и опубликуйте
разработанный вами сайт.
Урок 54-57.
Теория. Сайт школы от замысла до создания Практическое освоение CSS
Изучаемые вопросы:
Каскадные таблицы стилей, или CSS для начинающих (практикум "правильного" HTML)
Начертание
Текст







межбуквенные расстояния,
высота строк,
выравнивание,
отступ в первой строке параграфа,
преобразования начертания,
Форма "пулек"
"Пульки"- картинки
Практика


Практическое освоение CSS
Используя инструментальное средство разработки web-сайта, попробуйте улучшить дизайн вашего сайта.
Урок 58-61.
Теория. Сайт школы от замысла до создания Практическое освоение CSS
Изучаемые вопросы:
Координаты и размеры
 Абсолютные координаты
 Относительные координаты
Линейные размеры блока
Управление видимостью
Порядок наложения и область видимости

Порядок наложения блоков. z-index.
Наследование и переопределение

Область видимости блока. clip.
 Блочные и строковые элементы
 Элемент DIV
 Элемент SPAN
Практика


Практическое освоение CSS
Используя инструментальное средство разработки web-сайта, попробуйте улучшить дизайн вашего сайта.
Урок 61-64.
Теория. Сайт школы от замысла до создания Практическое освоение CSS
Изучаемые вопросы:
Пример использования тега DIV
Свойства блоков
Отступы(margin)
Набивка(padding)
Граница(border)
Обтекание блока текста
Практика


Практическое освоение CSS
Используя инструментальное средство разработки web-сайта, попробуйте улучшить дизайн вашего сайта.
Урок 65-68.
Теория. Сайт школы от замысла до создания Практическое освоение CSS
Изучаемые вопросы:
Управление цветом в CSS
 Цвет текста
 Цвет фона текста
Шрифт
Гарнитура(font-family)
Кегль(font-size)
Практика


Практическое освоение CSS
Используя инструментальное средство разработки web-сайта, попробуйте улучшить дизайн вашего сайта.
Урок 69-72.
Теория. Сайт школы от замысла до создания Практическое освоение CSS
Изучаемые вопросы:
Начертание
CSS: Курсоры
CSS: Полосы прокрутки
CSS: Размер элемента
CSS: Отступы
CSS: Свойства таблицы
Практика


Практическое освоение CSS
Используя инструментальное средство разработки web-сайта, попробуйте улучшить дизайн вашего сайта.
Урок 73-80.
Теория. Зачет по практической работе «Сайт школы»
Изучаемые вопросы: Практическое освоение HTML
Структура HTML документов
Вставка комментариев
"Шапка" документа
Заголовок
HEAD
TITLE
BASE
STYLE
LINK
META
Фреймы
FRAMESET
FRAME
NOFRAMES
Скрипты
SCRIPT
NOSCRIPT
Навигационные карты
MAP
AREA
Тело документа
BODY
Гиперссылки
A
Текстовые блоки
H1,H2,...H6
P
DIV
ADDRESS
BLOCKQUOTE
BR
HR
PRE
LISTING, PLAINTEXT, XMP
Форматирование текста
BASEFONT
FONT
I
EM
B
STRONG
U
S, STRIKE
BIG
SMALL
SUP
SUB
CODE, SAMP
TT
KBD
VAR
CITE
Списки
UL
OL
LI
MENU, DIR
DL
DT
DD
Объекты
IMG
EMBED
NOEMBED
APPLET
PARAM
Таблицы
TABLE
CAPTION
TR
TD и TH
Примеры таблиц
Формы
FORM
TEXTAREA
SELECT
OPTION
INPUT
Урок 80-96.
Теория. Сайт школы от замысла до создания. Практическое введение в HTML.
Изучаемые вопросы:
Практическое введение в JavaScript

















Управление просмотром страниц Web-узла. JavaScript
Модель объектов JavaScript - объекты Navigator'а
Методы объектов и свойства объектов. Управление потоком вычислений
События
Массивы
Графика
Стеки гипертекстовых ссылок
Фреймы и окна
Наследование кода скриптов различными страницами
Java, JavaScript и Plug-ins
Встраивание в HTML-документ
Примеры скриптов
Единство в многообразии
Приемы программирования на JavaScript
Примеры манипулирования окнами
Гипертекстовые ссылки и картинки
Macromedia Flash
Практика
Практическое введение в HTML:
Введение в HTML
Нужные программы
Шрифты, размер
Гиперссылки
Цвет
Таблицы
Вставляем картинку
Работаем с фоном
Спецсимволы
Фреймы
Слои
стили, CSS
SSI
Локальный сервер
JavaScript
специальные теги:
title=
alt=
Тег <A>
Атрибуты:
Гиперссылки
Графика
Таблицы
Теги форматировния
документа
Теги физического
форматирования текста
Теги логического
форматирования текста
Списки
Элементы управления
Фреймы
Звук
Другие теги
Таблица базовых цветов BgColor
Организация занятий для учителей Аркауловской СОШ на апрель-май месяц 2007г
План занятий.
Урок 1-2.
Теория. Техника безопасности. Назначение и устройства компьютера. Пользовательский
интерфейс.
Изучаемые вопросы:
 Персональный компьютер – компьютер для личного пользования.
 Основные устройства персонального компьютера.
 Минимальный комплект устройств.
 Различие внутренней и внешней памяти компьютера.
 Основная характеристика оперативной памяти.
 Характеристики устройств внешней памяти.
 Пользовательский интерфейс.
 ТБ.
Практика. Знакомство с комплектацией устройств ПК, включение и выключение ПК.
Выполнение практического задания № 1.
Приобретаемые умения и навыки:
 Включение и выключение компьютера.
 ТБ работы за компьютером.
Практика. Знакомство с операционной системой: работа с окнами, запуск программ.
Выполнение практического задания №2.
Приобретаемые умения и навыки:
 Запуск приложений.
 Изменение размеров окна.
 Перемещение окна.
 Переключение между запущенными приложениями.
 Сворачивание окна и его восстановление.
 Закрытие окна и завершение работы приложения.
Урок 3-4.
Теория. Файлы и файловые структуры.
Изучаемые вопросы:
 Файл – информация, хранящаяся на внешнем носителе и объединенная общем имением.
 Имя файла, правила формирования имени.
 Понятие логического диска.
 Файловая структура диска, понятие каталога.
 Путь к файлу – координата местоположения файла на диске.
Практика. Работа с файловой структурой операционной системы.
Выполнение практического задания №3.
Приобретаемые умения и навыки:
 Смена устройства (логического диска).
 Смена папки.
 Создание папок.
 Копирование файлов и папок.
 Перемещение файлов и папок.
 Переименование файлов и папок.
 Удаление файлов и папок.
 Изменение вида содержимого папки.
 Сортировка файлов и папок.
 Использование Корзин для удаления файлов и ее очистка.
Урок 5-6.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы. Сохранение и загрузка файлов. Основные приемы ввода
Изучаемые вопросы:
 Понятия текстового редактора и текстового процессора.
 Среда текстового редактора.
Практика. Сохранение и загрузка файлов. Основные приемы ввода и редактирования текста.
Выполнение практического задания №4.
Приобретаемые умения и навыки:
 Использование русского алфавита при наборе текста.
 Переключение клавиатуры на латинский алфавит и обратно.
 Вставка символов.
 Удаление символов.
 Объединение строк.
 Разделение строк.
 Загрузка файла.
 Сохранение файла на диске.
Урок 7-8.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы.
Практика. Сохранение и загрузка файлов. Основные приемы ввода и редактирования текста.
Орфографическая проверка текста. Работа со шрифтами, Выполнение практического задания
№5
Приобретаемые умения и навыки:
 Задание параметров страницы.
 Орфографическая проверка текста с использованием встроенного словаря.
 Выделение фрагмента текста.
 Задание шрифта, его размера и начертания.
Урок 9-10.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы.
Практика. Использование буфера обмена для копирования и перемещения текста. Основные
приемы ввода и редактирования текста, приемы форматирования текста.
Выполнение практического задания №6
Приобретаемые умения и навыки:
 Установка параметров абзаца и его форматирование.
 Выравнивание абзацев.
 Удаление фрагментов текста.
 Копирование фрагмента текста.
 Перемещение фрагмента текста.
Урок 11-12.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы.
Практика. Многооконный режим работы. Режим поиска и замены. Выполнение практического
задания №7
Приобретаемые умения и навыки:
 Использование многооконного режима для параллельной работы с несколькими
документами.
 Поиск заданного фрагмента текста и его замена на другой.
Урок 13-15.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы.
Практика. Работа с таблицами. Вставка рисунков в текст. Выполнение практического задания
№8
Приобретаемые умения и навыки:
 Создание таблицы.
 Удаление строк и столбцов таблицы.
 Вставка строк и столбца.
 Вставка рисунка в текст.
 Использование объектов WordArt.
Урок 16-18.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы.
Практика. Маркированные и нумерованные списки. Понятие шаблонов и стилей.
Выполнение практического задания №9
Приобретаемые умения и навыки:
 Создание нового шаблона документа и его использование.
 Создание нового стиля абзаца и его использование.
 Создание маркированного списка и изменение типа маркера.
 Создание нумерованного списка.
Урок 19-20.
Теория. Текстовые редакторы и текстовые процессоры: назначение, возможности, принцип
работы.
Практика. Вставка формул .Сканирование и распознавание текста. Печать текста.
Выполнение практического задания №10
Приобретаемые умения и навыки:
 Включение в документ формул.
 Сканирование и его распознавание с помощью специальных программ.
 Сканирование изображения
 Копирование, перемещение и удаление фрагментов изображения
 Изменение размеров объектов.
Урок 21-25.
Теория. Служба WWW. Способы поиска информации в Интернет.
Изучаемые вопросы:
 Что такое Интернет.
 Гиперссылки
 Понятия браузера
 Способы поиска информации в Интернете.
 Поисковые системы.
Практика. Работа с WWW: использование URL-адреса и гиперссылок, сохранение информации на
локальном диске. Выполнение практическое задания.
Приобретаемые умения и навыки:
 Загрузка Web- страницы с указанного URL-адреса. Навигации по Web- страницам сайта с
использованием гиперссылок.
 Сохранение Web- страниц на локальном диске и их просмотр.
 Использование панели инструментов браузера (кнопки Стоп, Обновить, Назад, Вперед.)