Создание сайта учителя физики и ОБЖ

Образовательные ресурсы Интернета огромны и постоянно пополняются. Созданы образовательные порталы, среди которых крупнейший – Российский портал открытого образования. На нём преподаватель сможет не только найти для себя интересные разработки, но и разместить свои учебные материал, создав собственный сайт.

Сайт – современное и доступное средство представления информации, мультимедийной в том числе. Это делает его привлекательной формой представления учебных материалов, которыми можно пользоваться в локальной сети или Интернете [1].

Российский общеобразовательный портал позволяет создать сайт школы, группы преподавателей или личную страницу педагога или учащегося при помощи интерфейса, реализованного в виде веб-форм. Для этого надо обратиться к конструктору образовательных сайтов (рис.1).

Рис.1. Российский общеобразовательный портал

Для участия в проекте необходимо заполнить форму-заявку с первоначальными данными о директории и ее держателе, размещенную на главной странице Конструктора - http://www.edu.of.ru/ (рис.2).

Рис.2. Заявка

Рис.3. Заявка заполнена

Рис.4. Заявка принята.

Администрация конструктора рассматривает присланную заявку (рис.5) и в случае положительного решения высылает участнику данные для доступа с правами локального администратора к созданной директории (логин и пароль). При входе в «публикатор» по полученным данным (http: // www.edu.of.ru/admin, рис.6) участник попадает в общую административную часть сайта конструктора, где в разделе «Созданные сайты» находится подраздел - запись о его директории (рис.7).

Рис.5. Ответ от администрации конструктора.

Рис.6. Авторизация создателя сайта

Рис.7. Страница в «публикаторе»

Хорошо виден адрес страницы (URL): http://edu.of.ru/tungusebv2.

Теперь необходимо обратить внимание на пиктограммы, расположенные слева от названия нашей страницы. Первая из них – «Свойства страницы» (рис.8). При нажатии на эту пиктограмму мы попадаем на страницу свойств главной страницы сайта (рис.9).

Рис.8. Свойства.

Рис.9. Свойства главной страницы.

Чтобы сделать сайт видимым в сети, необходимо установить флажок «Видимость». В поле «Верхний заголовок» печатается текст, который знакомит посетителей с Вашим сайтом. Этот текст будет виден при открытии страницы. Нажимаем «Ок» в левом нижнем углу окна. В публикаторе справа от нашей страницы появится галочка видимости сайта (рис.7). Следующая пиктограмма - «Перейти в раздел» (рис.10). При нажатии на эту пиктограмму мы попадаем в каталог созданного сайта. По умолчанию там созданы подразделы «Новости», «О школе», «Форум», «Опросы» (рис.11).

Рис.10. Пиктограмма «Перейти в раздел».

Рис.11. Подразделы сайта по умолчанию.

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

Например: сделаем невидимым подраздел «Форум». Для этого нажимаем на пиктограмму «Свойства» слева от строчки «Форум». В окне свойств данной страницы отключаем флажок видимости. Далее – «ОК». Эту же операцию повторим для подразделов «Опросы» и «Новости». Флажки видимости справа от подразделов пропадают (рис.13). При открытии сайта мы увидим следующее ( рис.14).

Рис.12. Подразделы на странице сайта.

Рис.13.

Видимость подразделов снята.

Рис.14. На созданной странице подразделы не видны.

Займёмся добавлением подразделов. Обратимся к строке «Подразделы - Добавить» (рис.15). Нажимаем – Добавить. Открывается страница свойств нового подраздела (рис.16). Вписываем название – Физика. Ставим галочку видимости. Далее – «ОК».

Рис.15. Добавить подраздел.

Рис.16.

Название и видимость подраздела.

Аналогично создадим подраздел ОБЖ. Оба созданных подраздела появляются в каталоге (рис.17).

Рис.17.

Созданные подразделы в каталоге.

Откроем сайт (рис.18). Подразделы Физика и ОБЖ видны и здесь.

Рис.18. Подразделы на главной странице сайта.

Внесём информацию в подраздел «О школе». В каталоге публикатора находим подраздел «О школе» и входим в его свойства (рис.19).

Рис.19. Свойства «О школе».

З аполним информацией верхний заголовок и «ОК» (рис.20).

Рис.20.

Заполнение информацией вкладки «О школе».

Откроем сайт http://edu.of.ru/tungusebv2, вкладка «О школе». Появилась информация, которую мы внесли в поле верхнего заголовка страницы свойств «О школе» (рис.21).

Рис.21. Информация на странице сайта.

Рассмотрим следующую пиктограмму – «Добавить изображения» (рис.22).

Р ис.22. Пиктограмма «Добавить изображения».

Добавим изображение на вкладку «О школе» (рис.21). Открываем публикатор и нажимаем пиктограмму «Добавить изображение» в подразделе «О школе» (рис.17). Открывается страница публикатора для добавки изображения (рис.23).

Рис.23. Добавить изображение.

Кнопка «Добавить изображение» (1) позволяет начать выбор файла для вставки. Перед нажатием кнопки обратим внимание на выпадающий список, в котором устанавливаем «Картинка для текста (для ручной вставки)» (2). Нажатие на кнопку «Добавить изображение» выводит диалоговое окно для выбора необходимого файла на диске (рис.24).

Рис.24. Выбор файла.

Производим стандартную процедуру открытия файла: находим его, щелчок левой кнопкой и нажимаем кнопку «Открыть» (рис.25).

Рис.25. Открытие файла.

Название файла с полным адресом его местонахождения появляется в строке «Файл» (рис.26). Теперь это изображение надо сохранить в Сети. Для этого служит кнопка «Сохранить» в левом нижнем углу.

Рис.26. Сохранение файла.

После сохранения графический файл появляется в специальной таблице на странице публикатора (рис.27).

Рис.27. Файл сохранён.

Щ ёлкаем по файлу (ш(5). JPG) левой кнопкой мыши и видим вставляемое изображение и его параметры (рис.28).

Рис.28.

Параметры файла.

Это изображение перенесём на страницу «О школе». Порядок действий:

1. Щёлкаем по изображению правой кнопкой мыши и выбираем «Свойства» (рис.29).

Рис.29. Контекстное меню изображения: Свойства.

2 . В свойствах копируем адрес изображения в Сети (URL) (рис.30). Закрываем окно «Свойства».

Рис.30.

Копирование адреса изображения.

3. В правом верхнем углу открываем выпадающий список «Изображения» и нажимаем «Свойства» (рис.31).

Рис.31. Изображения – Свойства.

4. Мы попали на уже знакомую страницу свойств вкладки «О школе». Верхний заголовок уже был заполнен информацией. Туда же добавим строку:

<img src="http://edu.of.ru/attach.asp?a_no=46085" align="center"/> и «ОК» (рис.32).

Рис.32. Добавление строки изображения.

Если теперь открыть вкладку «О школе» нашего сайта, то мы увидим следующую картину: рисунок 33.

Рис.33. Вкладка «О школе» с изображением.

Подробнее рассмотрим строку вставки пункта 4. Здесь используется язык HTML для разметки документов при публикации их в Интернете. Основой этого языка являются тэги. На них мы остановимся ниже. Для нашего случая:

img src= вставка картинки, "http://edu.of.ru/attach.asp?a_no=46085" – скопированный нами адрес изображения, align="center" – вставка картинки по центру. Знаки < > показывают, что это тэг HTML.

Ещё одна пиктограмма – «Добавить файлы» (рис.34).

Рис.34. Пиктограмма «Добавить файлы».

Для примера рассмотрим добавление файла в подраздел «Физика 7 класс». Обращаемся к пиктограмме «Добавить файлы» данного подраздела (рис.35). После нажатия на пиктограмму выходит специальное окно (рис.36). Нажимаем кнопку «Добавить файл». Теперь мы имеем возможность выбрать необходимый файл с помощью кнопки «Обзор» (рис.37).

Рис.35. Добавить файл в подраздел «Физика 7 класс».

Рис.36. Окно для добавления файла.

Рис.37. Кнопка «Обзор» для выбора файла.

С помощью стандартного окна находим файл и открываем его (рис.38).

Рис. 38. Находим файл – Открыть.

В ыбранный файл появляется в строке «Файл». Нажимаем «Сохранить» (рис.39).

Рис.39. Сохранение файла.

После сохранения публикатор информирует нас о параметрах файла (рис.40).

Рис.40. Файл сохранён.

Если мы перейдём на страницу «Планирование» публикатора, то увидим, что пиктограмма «Добавить файлы» поменяла цвет (рис.41), т.е. стала активной. Это означает, что в данном подразделе имеется прикреплённый файл, который может открыть или сохранить на диск своего компьютера любой пользователь, пользующийся создаваемой страницей (рис.42).

Рис.41. Активность пиктограммы «Добавить файлы».

Рис.42. Прикреплённый файл на создаваемой странице.

Вернёмся к HTML. Информация на странице свойств в верхний заголовок вставляется с учётом этого языка (рис.20). HTML не является языком программирования [2]. Он предназначен для разметки текстовых документов. HTML странички состоят из тэгов (пример: <hr> - горизонтальная линия), т.е. все, что находится между < и > называется тэгом. Все HTML документы начинаются с тэга <html> и заканчиваются тэгом </html>. Тэги бывают разными: только открывающимися и открывающимися/закрывающимися. Пример только открывающегося тэга <hr> - горизонтальная одиночная линия. Пример открывающегося /закрывающегося тэга: <html> </html>.

Тэг <html> означает, что текст действительно написан на языке HTML [3]. Открывающим тэгом <html> страница начинается и закрывающим - заканчивается </html>.

Перечислю тэги, которые будут необходимы при использовании конструктора образовательных сайтов:

1. <p> </p> - тэги абзаца. Каждый последующий абзац должен начинаться <p> и заканчиваться </p> такими тэгами.

2. <br> - переход на следующую строку, незакрывающийся тэг.

3. Нумерованный список:

<OL>

<LI> Текст 1

<LI> Текст 2

<LI> Текст 3 и т.д.

</OL>

4. Список определений:

<DL>

<DT> Термин 1

<DD> Пояснение термина 1

<DT> Термин 2

<DD> Пояснение термина 2 и т.д.

</DL>

5. <img src="http://edu.of.ru/attach.asp?a_no=здесь номер вставляемого изображения" align="center"/> - вставка изображения (рис.30).

6. <font> </font> - изменение атрибутов текста.

Например: <font color=”#RRGGBB”> Тут текст </font>. Color – атрибут цвета шрифта. RRGGBB – шестнадцатеричное представление цвета.

Виды шрифта: <i> </i> - курсив,

<b> </b> - жирный,

<u> </u> - подчёркнутый.

7. Вставка ссылки: <a href=”Ссылка”> Тут текст, по которому будут щёлкать для перехода по ссылке </a>.

Конструктор образовательных сайтов допускает работу без HTML форматирования, но страницы при этом выглядят не слишком привлекательно. Некоторое время Вам вполне хватит три первых приведённых пункта, но через некоторое время Вы сами захотите узнать больше. Пособий по работе с HTML много и их можно бесплатно скачать из Сети. Примеры: [2] и [3].

Литература

1. Соловьёва Л.Ф. Компьютерные технологии для преподавателя / Л.Ф. Соловьёва. – Санкт-Петербург: БХВ-Петербург, 2008. – 453с.

2. www.igorenat.hut.ru. Нормурадов И. HTML для начинающих.

3. http://www.jbooks.biz. Александр. Иллюстрированный самоучитель по созданию сайтов.