Типовая структура школьного сайта

Министерство образования Республики Мордовия
Мордовский республиканский институт образования
Методические указания
по созданию сайта в программе
«Конструктор школьных сайтов»
Саранск 2011
ББК 32
М 54
Рецензенты:
Зубрилин А.А., канд. пед. наук, доцент каф. информатики и ВТ МГПИ
им. М.Е. Евсевьева;
Лунина Т.П., директор информационно-методического центра МРИО
Под общей редакцией Г.М. Лончина, ректора МРИО
Методические рекомендации по созданию сайта в программе
«Конструктор школьного сайта»/ сост.: Н.Н. Пивкина; под общ. ред
Г.М. Лончина; МРИО. – Саранск, 2011. – 29 с.
Методические рекомендации направлены на освоение программы
«Конструктор школьных сайтов», разработанной компанией «E-Publish». Курс
имеет практическую направленность. В результате освоения «Конструктора
школьных сайтов» работники образования смогут разработать, создать и
опубликовать сайт школьного учреждения, а также обновлять его. Кроме того,
полученные навыки позволят преподавателю создать и оформить в виде сайта
учебно-методические материалы.
Методические рекомендации адресованы учителям школ, преподавателям
средних специальных и высших учебных заведений и составлены на основе
методических материалов компании «E-Publish».
Рекомендовано к печати редакционно-издательским советом МРИО
© Пивкина Н.Н., составление, 2011
© Мордовский республиканский
институт образования, 2011
2
Введение
Национальным фондом подготовки кадров (НФПК) в качестве основной
технологии
для
ведения
Проекта Информатизация
сайтов
системы
школ
в
рамках
образования
Федерального
(ИСО)
принят
«КОНСТРУКТОР ШКОЛЬНЫХ САЙТОВ».
Множество школ по всей России уже выбрали «Конструктор» для
создания и ведения своих сайтов школ.
«Конструктор школьных сайтов» представляет собой набор программных
средств для создания структуры, оформления и наполнения содержания сайта
учреждения образования.
«Конструктор» прост в применении, имеет удобный интерфейс и
рассчитан на пользователей, не обладающих специальными техническими
навыками. С помощью Конструктора можно пошагово сформировать структуру
сайта и выбрать дизайн из уже готовых шаблонов.
В Конструкторе предусмотрено создание различных страниц, например,
«Новости», «Тесты» или «Фотоальбом» и др.
Им могут пользоваться как учителя-предметники, так и ученики
Курс составлен на основе методических материалов компании «EPublish».
Несомненным достоинством системы является и то, что она рассчитана на
работу с любыми, в том числе со слабыми каналами связи.
3
Создание школьного сайта в конструкторе E-Publish
1. Установка конструктора сайтов E-Publish
1. Запустить с диска файл Setup_4.2.1.exe.
2. Следовать указаниям меню.
3. Ответы на свои вопросы по работе с программой Вы можете найти на диске в
файле Help-Constructor.pdf или на сайте http://edusite.ru.
2. Создание проекта в E-Publish
1. Запустить программу: Пуск/ Программы/ E-Publish/ Конструктор сайтов.
2. Создать проект: Файл/ Новый проект.
3. Выбрать шаблон.
Щелкнуть по кнопке «Вперед». Появится окно «Шаг 2: Выбор расположения
объекта». Где вы можете выбрать или создать папку для сохранения проекта
вашего сайта.
4
4. Создать отдельную папку для проекта.
Для этого щелкнуть кнопку «Создать папку» и набрать ее имя. Например,
MySite. Два раза щелкнуть по «ОК». Окно с проектом загружено.
5
5. Ввод заголовка сайта.
Верхняя часть рабочего окна, выделенная пунктиром – это заголовок
сайта. Заголовок сайта отображается на каждой странице сайта.
В него помещается название ОУ, например «Школа N...». Для этого
необходимо поставить курсор в поле заголовка сайта и набрать название с
помощью клавиатуры.
6. Ввод колонтитула.
Нижняя часть рабочего окна, выделенная пунктиром, – это колонтитул
сайта. Колонтитул сайта, также как и заголовок, отображается на каждой
странице сайта. Сюда помещается контактная информация, адрес, телефоны
или авторы сайта.
7. Ввод заголовка страницы.
Каждая страница имеет заголовок, отображаемый только на этой странице.
Это выделенное пунктиром поле, расположенное под заголовком сайта.
Заголовок – это название страницы, отображающее ее содержание. В заголовке
главной страницы можно написать «Главная», «Добро пожаловать!», «О
школе» и т.п.
6
8. Добавление текста.
По умолчанию первая страница сайта имеет тип «Универсальная», такая
страница
напоминает
текстовый
редактор.
В
нее
можно
вносить
и
редактировать тексты, вставлять тексты из других источников, таблицы,
изображения, Flash-анимации и т.д.
3. Типы страниц
При добавлении новой страницы можно выбрать: универсальную
страницу, фотоальбом, новости, тест, прайс-каталог - корзину заказов, прайс из
Excel, словарь, ссылку на страницу в Internet.
1. Универсальную страницу можно использовать для публикации как
текстовой, так и графической информации. При вставке текста из документа
MS Word могут возникнуть проблемы с форматированием. Отдельные
фрагменты текста могут после копирования отличаться от других по стилю,
причем попытки изменить тип шрифта или размеры не приводят к желаемому
результату. Для решения этой проблемы есть два пути:
а) используемый документ Word предварительно сохранить в формате .txt
(только текст);
б) на странице с таким дефектом выделить проблемный фрагмент и нажать
кнопку с кисточкой «Очистить стили». После этого можно спокойно менять
шрифт.
Если на странице располагаются только текст и графика, то лучше
позиционировать их в таблице.
2. Создание и ведение фотоальбома. Добавление страниц типа
«фотоальбом».
Добавить на сайт новую страничку. Для этого щелкнуть кнопку «Добавить
страницу» на панели инструментов. Появится окно «Свойства страницы». Из
выпадающего меню «Тип страницы» выбрать «Фотоальбом».
7
Это может быть фотоальбом, содержащий фотографии школы, класса,
учителей, походов, конкурсов и т.п. Вести название для фотоальбома, например
«Наши учителя».
В окне свойств страницы надо установить количество фотографий в ряду
(например, 4), размер маленькой фотографии на странице альбома (Привью) и
реальный
размер
большой
фотографии
для
раскрывающегося
окна
(Изображение). Здесь же задаётся способ выравнивания фото в ячейке
фотоальбома и расположение подписи к ней. Нажать «Добавить».
Для вставки фото в ячейку альбома щелкнуть на ней мышью, выбрать
«Добавить/ Изменить изображение» и «Ок», в открывшемся окне найти
нужное фото и нажать кнопку «Открыть».
8
Желательно сделать подпись к фотографии. Изменить параметры
страницы фотоальбома (например, количество фото в ряду) можно, открыв в
главном меню Страница/ Свойства страницы. Добавить ячейки для новых
фото можно при помощи кнопки «Добавить блок» или Главное меню/
Страница/ Добавить блок.
«Фотоальбом», как и большинство типов страниц в Конструкторе,
является блочным типом страницы. Блоком для «Фотоальбома» является сумма
из привью, подписи под привью, ссылки на большое изображение и самого
большого изображения. Для увеличения количества блоков на странице служит
кнопка «Добавить блок». Для удаления ненужного блока необходимо поставить
курсор в текстовое поле этого блока и щелкнуть по кнопке «Удалить блок».
Как быть, если необходимо тематически разбить страницу фотоальбома?
Например, первая строчка – это учителя старших классов, или учителя
первой категории, или администрация и т.п. Как отделить следующую группу
фотографий?
Заполнить текстовое поле над первой строчкой (учителя старших классов).
9
Поставить курсор в текстовое поле последнего блока первой строки.
Щелкнуть по маленькой черной стрелке рядом с кнопкой «Добавить блок».
Раскроется выпадающее меню.
Выбрать в нем «Добавить текстовый блок после активного блока».
10
Текстовый блок вставился между рядами изображений.
Теперь можно заполнить его. Например, «Учителя младших классов».
3. Создание и ведение страницы новостей.
Для добавления новой страницы щелкнуть кнопку «Добавить страницу» на
панели инструментов. Появится окно «Свойства страницы». Из выпадающего
меню выбрать тип страницы «Новости».
11
Вести название, например, «Новости школы», «Новости класса», и
щелкнуть по кнопке «Добавить». Появится окно «Выбор даты». В нем можно
выбрать любую дату публикуемой новости. Текущая дата обведена красной
овальной рамочкой. Выбранная выделяется красным цветом шрифта и серым
фоном.
Выбрать дату и щелкнуть на «ОК». Добавилась новая страница и
появилось поле для заведения первой новости.
12
Составляющими блока для новости являются дата новости, заголовок
новости (расположен напротив даты) и тело новости (расположено под
заголовком). Дата новости проставляется в результате выбора при добавлении.
В заголовок и тело новости можно вводить или вставлять тексты, изображения,
Flash- анимации и т.п.
Для добавления следующей новости щелкнуть кнопку «Добавить блок».
Снова появится окно выбора даты. Выбрать дату и щелкнуть на «ОК». Новости
автоматически сортируются на странице по дате. Самая поздняя по дате
новость окажется на самом верху страницы.
4. Создание тестов.
Добавить новую страницу, щелкнуть кнопку «Добавить страницу» на
панели инструментов и из выпадающего меню «Тип страницы» выберем
«Тесты».
13
Выберем тип теста: «Тест для самоконтроля» или «Отправлять ответы на
почту».
«Тест для самоконтроля» используется в случае, если результаты работы
должны быть отображены проходящему тест, но не будут далее обрабатываться
преподавателем.
«Отправлять ответы на почту» - результаты работы могут быть
отображены или закрыты от проходящего тест, и они будут отправлены на
электронный адрес преподавателя для дальнейшей обработки.
14
«Показывать результаты» - при снятии галочки, результаты прохождения
теста пользователю показаны не будут.
Для обоих типов тестов доступен выбор отображения результатов
обработки ответов на тест: «результат в виде «правильно - неправильно»;
«результат в виде количества правильных ответов в вопросе».
Оставим
параметры,
установленные
по
умолчанию
(«Тесты
для
самоконтроля», «Результат в виде «правильно - неправильно»). Щелкнем
кнопку «Добавить».
Появится окно «Выбор типа вопроса», в нем отображены 4 поля для
выбора: 3 типа вопроса и возможность вставлять комментарии в тест.
Тип «несколько из...» - выбор нескольких правильных ответов из списка
предложенных. Если будут выбраны не все правильные ответы, результат будет
«неправильно».
Тип «один из...» - выбор одного правильного ответа из списка
предложенных (правильный ответ может быть только один).
Тип «вставка пропущенных букв» - пользователю предоставляется окно
для ввода ответа, после щелчка по кнопке «Ответить» ответ пользователя
сравнивается с ответом, заданным преподавателем. Учитываются регистр, язык
ввода, пробелы и знаки препинания.
Заполнение для типов тестов «один из...» и «несколько из...»:
15
Заполнить вопрос и варианты ответов (напротив правильного необходимо
поставить пометку).
16
Для добавления следующего вопроса щелкнуть кнопку «Добавить блок»
на панели инструментов.
5. Для добавления ссылки на страницу в Internet потребуется, если
необходимо опубликовать на сайте школы готовый проект, созданный в другом
редакторе сайтов. Можно поместить его в папке внутри школьного сайта. Для
публикации такого проекта используют имя и пароль основного проекта. В
окне «FTP-клиент» указать галочкой «Изменить корневой каталог» и ввести
имя папки. В основном проекта сайта включить страницу-ссылку на сайт в
Интернете. Указать адрес основного сайта, через знак «/» указать папку
встроенного сайта и имя его первой страницы — index.html.
Имена всех внешних файлов (текстовых, графических, Flash и т.д.),
используемые в проекте, должны обязательно состоять только из латинских
маленьких букв или цифр без пробелов и знаков препинания.
4. Вставка рисунка. Работа со встроенным графическим редактором
1. Установить курсор в одно из доступных полей.
2. Выбрать в главном меню: Вставка/ Рисунок или на панели
инструментов – кнопку «Изображение».
.
3. В открывшемся окне найти расположение графического файла и нажать
кнопку «Открыть».
17
4. В окне свойств изображения при необходимости настроить размер,
местоположение и рамку изображения.
Максимально допустимые размеры для изображения, размещаемого на
сайте 150 – 200 пикселей. Если установлена галочка «Пропорциональное
изменение размеров» (она выставлена по умолчанию), достаточно изменить
только один из параметров, второй будет рассчитан автоматически.
Выпадающее меню «Местоположение» дает выбрать, как текст будет
обтекать изображение. Если «Местоположение» будет выбрано «Влево», то
текст будет расположен справа от изображения.
Отступы по горизонтали и вертикали устанавливаются для того, чтобы
текст не находился вплотную к изображению. Выставить их равными 5
пикселям. Толщину рамки установить равную 2 пикселям.
При необходимости отредактировать изображение, перейдя во встроенный
графический редактор (нижняя кнопка в левой панели окна). Сохранить файл
после изменений. Закрыть редактор.
18
При необходимости в окне свойств изображения вставить подпись в поле
«Описание». Нажать кнопку ОК.
После сохранения и конвертирования проекта проверить, что файл с
использованным изображением сохранился в папках Images.
5. Управление навигацией: редактор меню
1. С редактором меню лучше начинать работать тогда, когда все страницы
уже созданы.
2. Щелкнуть мышкой по кнопке «Редактор меню» на панели инструментов.
3. В левой части расположен список всех страниц сайта, а справа
располагаются все меню с их содержимым. Чтобы увидеть список входящих в
него страниц щелкнем по плюсику рядом с ним. Раскроется список. В этом
списке можно изменить названия пунктов меню, изменить порядок их
расположения и создать подменю.
19
4. Каждый пункт меню можно переместить выше или ниже по списку.
Например, чтобы «Новости школы» стали вторым пунктом меню. Выделить его
щелчком мышки и с помощью кнопок «Переместить по меню вверх»,
«Переместить по меню вниз» переместить пункты меню и можно сделать
подпункты в меню.
5. Добавление меню (горизонтальное, вертикальное).
Для создания горизонтального меню:
 открыть «Редактор меню» на панели инструментов;
 перейти на вкладку «Состав меню»;
 выбрать расположение меню (верхнее, среднее или нижнее);
 поставить галочку «Показывать на странице»;
 можно сделать его «основным» (вновь созданные страницы будут
появляться в нем автоматически);
 вернуться на вкладку «Наполнение меню»;
 выделить в правом поле пункт «среднее (или др.) горизонтальное меню»;
20
 выделяя в левом поле необходимые страницы, перенести их в
горизонтальное меню при помощи кнопки «Страница»;
 можно часть кнопок оставить в вертикальном меню, а часть
продублировать или перенести в горизонтальное;
 если вертикальное меню хотите убрать совсем, то уберите из него все
пункты, выделяя их в правом поле и нажимая кнопку «Удалить»;
 нажать «Применить» и «ОК» и закрыть окно редактора.
6. Вставка таблиц
Использовать
таблицы
рекомендуется
тогда,
когда
необходимо
структурировать информацию, например, при вставке текстовой информации с
графическими иллюстрациями. Кроме того, использование таблиц позволяет
увеличить размеры текстового поля шаблона (в этом случае необходимо
указать нужную ширину таблицы).
1. Для вставки таблицы выбрать в главном меню Таблица/ Новая таблица
или соответствующую кнопку.
2. В открывшейся форме установить необходимое количество строк и
столбцов.
3. Ширину таблицы установить либо в пикселях, либо 100%.
4. Поставить галочку «Нефиксированная высота».
5. Выбрать цвет и толщину границы или сделать ее невидимой (установить
«толщина бордюра» - 0).
6. Можно установить цвет фона таблицы (снять галочку «прозрачный») или
фоновый рисунок (кнопка «Фон» с желтой папочкой).
7. Чтобы изменить свойства таблицы, ячейки, строки или столбца,
необходимо установить курсор в ячейку (!) и в главном меню выбрать
Таблица/ Свойства.
8. Чтобы вставить (удалить) строку или столбец, выбрать в главном меню
Таблица/ Вставить (Удалить). При этом курсор должен стоять в одной
из ячеек!
21
9. Для слияния ячеек установить курсор в одну из них и выбрать в главном
меню Таблица/ Объединить.
10.
Аналогично можно разбить ячейку.
7. Вставка гиперссылок
Выделить текст, который должен стать гиперссылкой, и выбрать в главном
меню Вставка/ Ссылка. Ссылку лучше делать на внешний файл, а после
сохранения
и
конвертирования
проекта
проверять,
что
файлы
с
использованными документами сохранились в папках DswMedia или Images
(для ссылок на рисунки).
8. Свойства проекта
1. Открыть в главном меню Проект/ Свойства проекта или вызвать правой
кнопкой мыши контекстное меню.
2. На вкладке «Основные параметры» можно включить «Возможность
поиска по сайту» и задать ключевые слова.
3. На вкладке «Дополнительные параметры» можно включить «Кнопки
последовательного перехода по страницам», «Кнопку перехода на верх
страницы» и «Кнопку печати страницы».
9. Сохранение проекта
Очень важно в течение работы периодически сохранять проект. Для этого
щелкнуть «Файл» - «Сохранить проект».
10. Конвертация страниц
Чтобы посмотреть, как будут выглядеть странички в Интернете, проведем
конвертацию.
Для этого щелкнуть кнопку «Конвертировать в HTML и просмотреть».
22
Появится окно «Выбор варианта конвертации».
Нажать на «ОК». Появится окно «Экспорт в HTML».
Когда конвертация будет закончена, появится окно браузера с первой
страницей сайта.
11. Публикация и обновление сайта в Internet
1. Сохранить проект и конвертировать его в HTML.
2. Открыть в главном меню Файл/ Сменить FTP-сервер. В открывшемся
окне вписать: edurm.ru. Закрыть окно.
3. Открыть в главном меню Файл/ Публикация в Интернете. В открывшейся
форме заполнить имя пользователя (логин) и пароль. В поле «Изменить
корневой каталог» вписать /www/ (буквы маленькие!). Расставить
галочки, как на рисунке:
23
Нажать кнопку «Начать закачку». В нижней строке формы должна
появиться информация о закачке файлов.
24
12. Рекомендации по размещению сайта c помощью программы
FileZilla на Мордовском образовательном портале edurm.ru
Для размещения сайтов можно использовать FTP-менеджер FileZilla.
Данная программа бесплатная, и можно её скачать из Интернета.
1.
Установить программу и запустить. После запуска программа имеет вид:
2. Хост: host.edurm.ru
3. Имя пользователя:
4. Пароль:
5. Нажать на «Быстрое соединение».
6. В левой колонке открыть папку с проектом и перенести все файлы в
правую колонку.
25
7. Для обновления сайта проделать те же самые действия, т.е. постоянно
копировать файлы (заменять) из левой колонки в правую все файлы
проекта.
13. Типовая структура школьного сайта
1. Визитка: адрес ОУ, телефоны, e-mail, Ф.И.О. директора, его замов,
секретаря, сведения о педколлективе (количество учителей, из них с 1
категорией, с высшей, имеющих звания, молодых специалистов),
партнеры (вузы и прочие организации, с которыми школа заключила
договор о сотрудничестве), спонсоры.
2. История школы. Страничка описывает историю школы, ее основные
достижения, известных выпускников и т.п.
3. Устав школы.
4. Правила приема. На этой страничке описываются установленные
правила приема учеников – как в 1-й класс, так и в последующие классы.
5. Правила
определяют
школьной
основные
жизни.
моменты
Правила
внутреннего
организации
распорядка
нормальной
работы
педагогического коллектива школы.
6. Программа развития школы. Для посетителей сайта (всех категорий
целевой аудитории) будет интересно узнать о планах школы. План
обычно утверждается в управлении образования.
7. Информатизация
(программа
информатизации
ОУ,
этапы
информатизации по годам, статистика по внедрению ИКТ в деятельность
ОУ, повышение квалификации в области ИКТ, техническое оснащение,
участие и достижения в проектной деятельности в рамках ИКТ от
районного уровня и выше).
8. Достижения школы. Страничка о наиболее значимых событиях в
истории школы (участие школьников и педагогов в мероприятиях от
районного уровня и выше, медалисты).
26
9. Партнеры. Страничка посвящена партнерам: вузам, с которыми
сотрудничает школа, предприятиям, где могут подрабатывать дети или
пойти работать после окончания и т.п.
10.Администрация. Директор (информация о директоре, обращение,
обратная связь), заместитель директора по УВР (информация о зам.
директора по УВР, обращение, обратная связь), заместитель директора
по ВР (информация о зам. директора по ВР, обращение, обратная связь).
11.Методические объединения (все МО и кафедры с перечислением
учителей). Персональные страницы учителей (методические разработки,
электронные курсы, вопросники).
12.Психолог. Информация школьного психолога: обращение, обратная
связь, литература, форум, часто задаваемые вопросы.
13.Учителя. Учителя младших классов, учителя старших классов, учителя
подготовительных классов (фотоальбом с краткой биографией каждого из
учителей). Фотоальбом с краткой биографией каждого из учителей. Если
учитель ведет свою рубрику, ссылка на рубрику.
14.Классы. Страницы классов школ. Каждая страница может быть закрыта
паролем для ограниченного просмотра. В каждом классе следующие
страницы:
Классный руководитель.
Фотоальбом класса.
Расписание занятий.
Текущая успеваемость.
27
Содержание
Введение
3
1. Установка конструктора сайтов E-Publish
4
2. Создание проекта в E-Publish
4
3. Типы страниц
7
4. Вставка рисунка. Работа со встроенным графическим редактором
17
5. Управление навигацией: редактор меню
19
6. Вставка таблиц
21
7. Вставка гиперссылок
22
8. Свойства проекта
22
9. Сохранение проекта
22
10. Конвертация страниц
22
11. Публикация и обновление сайта в Internet
23
12. Рекомендации по размещению сайта c помощью программы
FileZilla на Мордовском образовательном портале edurm.ru
25
13. Типовая структура школьного сайта
26
28
Методические указания по созданию сайта
в программе «Конструктор школьных сайтов»
Составитель:
Пивкина Н.Н., методист информационно-методического
центра МРИО
Печать способом ризографии.
Тираж экз.
Цена договорная
Отпечатано с оригинала-макета
В ГОУ ДПО (ПК) С «Мордовский республиканский институт образования»
430027, г.Саранск, ул.Транспортная,19
29
30