Персональный сайт Д.И.Карелина ГБПОУ МО "Орехово-Зуевский железнодорожный техникум имени В.И.Бондаренко"

Персональный сайт Д.И.Карелина — ПубликацииЭлектронное обучениеСоздание электронного курса

СОЗДАНИЕ ЭЛЕКТРОННОГО КУРСА

Разберем порядок создания страницы электронного курса.

Для начала подберем текстовый и графический материал, подлежащий размещению. Текст лучше создавать в текстовом редакторе, например, Microsoft Word. Изображения следует сохранять в форматах .JPG (.JPEG), либо .PNG. Графические файлы, содержащие анимированные изображения, сохраняются в формате .GIF.

Запускаем программу для создания web-страниц, например, Macromedia HomeSite+. Можно также использовать любой простой текстовый редактор, например, Блокнот или Notepad++, однако в этом случае все теги гипертекстовой разметки придется вводить вручную.

Программа запустится и на ее рабочем поле уже будут размещены базовые теги гипертекста. Нажмем кнопку "Сохранить" на панели инструментов и присвоим нашей странице имя, например, lesson1.html.

Между тегами <title> и </title> введем заголовок страницы. Это название будет отображаться в заголовке окна браузера:

<title>Урок № 1</title>

Из подготовленного нами текстового документа копируем фрагмент текста и вставляем его между между тегами <body> и </body>:

<body>
УСТРОЙСТВО ЖЕЛЕЗНОДОРОЖНОГО ПУТИ
Железнодорожный путь является важнейшим сооружением инфраструктуры железнодорожного транспорта. Строение железнодорожного пути принято подразделять на верхнее и нижнее. К верхнему строению пути относят рельсы и рельсовые скрепления, шпалы и балластный слой. К нижнему строению пути относят земляное полотно с водоотводными устройствами и искусственные сооружения (мосты, эстакады, трубы, тоннели и пр.)
</body>

Обозначим название нашего документа, заключив соответствующую строку в теги заголовка 1 уровня: выделяем строку и на панели инструментов на вкладке "Fonts" ("Шрифты") нажимаем кнопку "H1":

<H1>УСТРОЙСТВО ЖЕЛЕЗНОДОРОЖНОГО ПУТИ</H1>

Следующий за заголовком фрагмент текста оформляем как абзац, для чего выделяем текст и на панели инструментов на вкладке "Common" ("Общая") нажимаем кнопку "¶":

В местах, где необходимо принудительно перейти на новую строку, вставляем тег <br> с помощью кнопки "BR" вкладки "Common" ("Общая"):

<p>Железнодорожный путь является важнейшим сооружением инфраструктуры железнодорожного транспорта. Строение железнодорожного пути принято подразделять на верхнее и нижнее. <br>К верхнему строению пути относят рельсы и рельсовые скрепления, шпалы и балластный слой. <br>К нижнему строению пути относят земляное полотно с водоотводными устройствами и искусственные сооружения (мосты, эстакады, трубы, тоннели и пр.)</p>

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

Если нас не устраивает цветовое оформление документа, мы можем внести некоторые изменения. Для этого щелкнем правой кнопкой мыши по тегу <body>, выберем пункт "Edit Current Tag" ("Редактировать тег") и в открывшемся окне Редактора тегов выполним необходимые изменения в полях "Background Color" ("Цвет фона") и "Text Color" ("Цвет текста"), нажмем кнопку "ОК". Посмотрим внесенные изменения, для этого сохраним документ, перейдем в окно браузера и обновим его содержимое (F5).

Для выделения в тексте определений и терминов воспользуемся кнопками "B" ("Полужирный") и "I" ("Курсив") вкладки "Fonts" ("Шрифты"), предварительно выделив необходимый фрагмент текста. Можно использовать сочетание выделений:

<p>Строение железнодорожного пути принято подразделять на <i>верхнее</i> и <i>нижнее</i>.<br> К <b><i>верхнему строению</i></b> пути относят <i>рельсы</i> и <i>рельсовые скрепления</i>, <i>шпалы</i> и <i>балластный слой</i>.<br> К <b><i>нижнему строению пути</i></b> относят <i>земляное полотно</i> с <i>водоотводными устройствами</i> и <i>искусственные сооружения</i> (мосты, эстакады, трубы, тоннели и пр.)</p>

Сохраним изменения, обновим содержимое окна браузера, посмотрим результат.

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

Вставим текст следующего абзаца и создадим в нем нумерованный список. Для этого выделим весь текст, который будет являться частью списка, на вкладке "Lists" ("Списки") нажмем кнопку "OL" ("Нумерованный список") и в появившемся окне нажмем кнопку "ОК". Наш текст будет заключен в тег-контейнер нумерованного списка. Теперь каждый фрагмент текста, являющийся отдельным пунктом списка, заключаем в теги <li> ... </li> с использованием соответствующей кнопки вкладки "Lists" ("Списки"), создавая тем самым структуру списка:

<p>Чтобы земляное полотно исправно служило, к нему предъявляются следующие технико-эксплуатационные требования: <ol><li>прочность - способность выдерживать нагрузку от подвижного состава (передаваемую через верхнее строение) без разрушений;</li> <li>устойчивость - неизменность формы и положения, как от воспринимаемой нагрузки, так и от влияния природно-климатических воздействий;</li> <li>надежность и долговечность;</li> <li>ремонтопригодность;</li> <li>экономичность в части расходов на его устройство, содержание и ремонт.</li></ol></p>

Сохраним изменения, обновим окно браузера и проверим полученный результат.

В следующем фрагменте текста создадим маркированный список. В качестве маркера будем использовать квадрат. Копируем текст в редактор. Выделяем область текста, включаемую в список, и нажимаем на панели инструментов на вкладке "Lists" ("Списки") кнопку "UL" ("Маркированный список"). В появившемся окне в поле "Type" ("Тип") выбираем тип маркера - "Square" ("Квадрат"). Нажимаем кнопку "ОК". Создаем пункты списка, выделяя нужные фрагменты текста и заключая их в теги <li> ... </li>. Не забываем выделять ключевые понятия и термины, используя полужирное выделение, курсив или их сочетание:

<p>Спланированная часть земляного полотна, на которую укладывается верхнее строение пути, называется <b>основной площадкой</b>. В зависимости от положения основной площадки относительно поверхности земли различают следующие <b><i>виды земляного полотна</i><b>: <ul type="square"><li><i>насыпь</i> - основная площадка выше уровня земли и имеются два откоса (а); <li><i>выемка</i> - основная площадка ниже уровня земли и имеются два откоса (б); <li><i>полунасыпь</i> - основная площадка выше уровня земли, но откос один (в); <li><i>полувыемка</i> - основная площадка выше уровня земли, но откос один (г); <li><i>полунасыпь-полувыемка</i> - основная площадка частично находится выше уровня земли и в этой части земляного полотна закладывается откос насыпи; другая часть основной площадки находится ниже уровня земли с откосом выемки (д);</li><li>место перехода насыпи в выемку называют <i>нулевым местом</i> (е).</li></ul></p>

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

Добавим в наш документ изображение. Исходное изображение - графический файл в формате .jpg (.jpeg), .png, либо .gif необходимо поместить в ту же папку, где находится файл создаваемой нами страницы. Однако лучше для хранения изображений создать специальную папку, например, «IMAGES». Чтобы узнать формат файла изображения необходимо щелкнуть правой кнопкой мыши по файлу и в раскрывшемся меню выбрать пункт "Свойства". В появившемся окне на вкладке "Общие" расширение файла будет показано в строке "Тип файла". Если перейти на вкладку "Подробно", мы можем узнать размер нашего изображения.

Установим курсор в то место документа, где необходимо вставить изображение. В нашем случае установим курсор перед абзацем, содержащим ранее созданный нами маркированный список (можно создать для этого отдельную строку нажатием клавиши Enter на клавиатуре). Для вставки изображения нажимаем кнопку на панели "Common" ("Общая"). Открывается диалоговое окно Редактора тегов. В поле "Source" ("Источник") вводим имя нашего файла с расширением. Если файл хранится в специально созданной папке, указываем путь к файлу (для этого можно воспользоваться кнопкой с изображением папки в правой части поля). В поле "Width" ("Ширина") задаем ширину изображения (в пикселах), в поле "Height" ("Высота") - высоту изображения, в поле "Align" ("Выравнивание") - способ расположения изображения относительно текста:

  • "left" - слева;
  • "right" - справа;
  • "middle" - по середине;
  • "top" - сверху;
  • "bottom" - снизу.

Соотношение значений ширины и высоты изображения должно быть пропорционально исходным во избежание получения искажений. Так, если наше исходное изображение имеет размер 1024 х 1000 пикселов, зададим пропорциональные им значения 360 х 352 пикселов (уменьшение в 2,84 раза). Оптимальную величину уменьшения можно подобрать экспериментальным путем.
Нажимаем кнопку "ОК" и в месте установки курсора получаем следующий html-код:

<img src="IMAGES/img_1.png" width="360" height="352" border="0" align="right">

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

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

Для добавления гиперссылок на вкладке "Common" ("Общая") имеется специальная кнопка . Чтобы создать гиперссылку необходимо выделить фрагмент текста, который планируется сделать гиперссылкой, и нажать на данную кнопку. В открывшемся диалоговом окне в поле "HREF" необходимо ввести адрес объекта, к которому будет осуществляться переход. Этим объектом может являться файл с другой html-страницей, файл с изображением, аудиофайл и др. Объект может размещаться как на текущем компьютере (локально), так и на другом компьютере (удаленно), доступ к которому осуществляется через сеть (в том числе интернет).

Создадим гиперссылку из фразы «Виды земляного полотна», содержащейся в абзаце, предшествующем маркированному списку. Выделим фрагмент текста и нажмем кнопку создания гиперссылки. В открывшемся диалоговом окне Редактора тегов в поле "HREF" вводим имя файла, содержащего рисунок, с указанием пути к нему (если файл находится в другой папке). Можно воспользоваться кнопкой с изображением папки в правой части поля. Чтобы рисунок открывался в новом окне, необходимо в поле "Target" ("Целевое окно") выбрать значение "_blank" ("Пустое"). В противном случае изображение откроется в том же окне, где отображается страница документа. Нажмем конпку "ОК" и получим следующий фрагмент HTML-кода:

<a href="IMAGES/img_1.png" target="_blank">виды земляного полотна</a>

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

Если мы хотим в качестве гиперссылки использовать не текст, а изображение, необходимо при создании гиперссылки вместо фрагмента текста выделить ранее созданный тег вставки изображения <img>. После нажатия на кнопку создания гиперссылки и задания необходимых параметров тег вставки изображения станет частью тега гиперссылки:

<a href="IMAGES/img_1.png" target="_blank"><img src="IMAGES/img_1.png" width="360" height="352" border="0"align="right"></a>

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

Продолжение следует...

ГлавнаяНаверхКарта сайта

© Денис Карелин 2013-

design & supervision by dencar