ПРАКТИЧЕСКОЕ ЗАНЯТИЕ ПО ПУБЛИКАЦИИ ЭЛЕКТРОННЫХ РЕСУРСОВ

Фреймовая структура электронного ресурса

Фреймовая структура предполагает наличие html-документа, позволяющего отображать в нем несколько документов одновременно.

На рис. 30 приведена заготовка такой фреймовой структуры, ориентированная на электронные учебные пособия по экономике.

Рис. 30. Фреймовая структура

Естественно сюда необходимо внести ряд изменений:

1.      Изменить логотип в верхней части окна с наименованием ресурса.

2.      Создать оглавление.

Это не требует титанических усилий. Заготовка содержит следующие файлы, расположенные в каталоге frames:

index.html

файл с фреймовой структурой

cnt.html

заготовка оглавления

logo.html

оформление верхней панели логотипа

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

Начинаем с файла index.html с фреймовой структурой, в нем меняем только наименование электронного ресурса, отображаемое в заголовке окна браузера. Сделать это можно в любом текстовом редакторе, я обычно использую EditPlus, т.к. он осуществляет цветовое выделение элементов html, каскадных таблиц стилей css, xml и javascript (рис.31).

Рис.31. Изменение  наименования электронного ресурса (выделено инверсным цветом), отображаемого в заголовке окна браузера

Теперь необходимо исправить наименование ресурса в графическом логотипе окна. Сделать это можно в любом текстовом редакторе, я воспользовался бесплатно распространяемым редактором Paint.net. Для него в подкаталоге images имеется файл LeftLogo.pdn.

Последовательность действий такова:

1.      Открываем LeftLogo.pdn, дважды щелкнув на нем кнопкой мыши.

2.      Удаляем слой, содержащий надпись.

3.      Вставляем новый слой, выбрав в меню Layers | Add New Layer.

4.      Выбираем в панели инструментов (Tools) инструмент для редактирования текста (кнопка с изображением буквы А), в палитре выбираем белый цвет для отображения текста, устанавливаем курсор на место начала надписи и вводим с клавиатуры Публикация ЭОР (на более длинную надпись нет места).

5.      Сохраняем изменения, выбрав в меню File | Save. Таким образом, мы сохранили изменения в формате программы Paint.net.

6.      Теперь преобразуем изображение в формат, отображаемый в браузере, выбрав в меню File | Save As, в появившемся диалоговом окне из списка  Тип файла выбираем PNG (*.png), в поле имени файла вводим LeftLogo.png. Нажимаем кнопку Сохранить.

Результат наших усилий изображен на рис.32.

Рис.32. Измененный логотип электронного ресурса

Теперь нам осталось создать оглавление ресурса, внеся изменения в файл cnt.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<style type="text/css">

.tall{width:100%; height:100%} /*таблица с полным заполнением*/

body{padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; line-height:16px; }

.l1{color:navy; font-weight:bold; font-family:Verdana;sans-serif; font-size:12;padding-left:5px;}

.l2{color:navy; font-weight:bold; font-family:Tahoma;sans-serif; font-size:11;padding-left:10px;}

.l3{color:navy; font-weight:bold; font-family:Tahoma;sans-serif; font-size:11;padding-left:15px;}

</style>

</HEAD>

<BODY bgcolor="#d6dfff">

<!-- Начало оглавления -->

<a href="title0.htmtarget="right" title="Практическое занятие по публикации электронных образовательных ресурсов"><span class="l1">Публикация ЭОР</span></a>

<br><a href="intro.htm" title="Введение"  target="right"><span class="l2">Введение</span></a>

<br><a href="instr.htm" title="Что нам понадобится для работы"  target="right"><span class="l2">Инструменты</span></a>

<br><a href="tuning.htm" title="Настраиваем Word"  target="right"><span class="l2">Настраиваем Word</span></a>

<br><a href="template.htm" title="Использование шаблонов для публикации электронных образовательных ресурсов"  target="right"><span class="l2">Шаблоны</span></a>

<br><a href="building.htm" title="Сборка электронного образовательного ресурса из разделов"  target="right"><span class="l2">Сборка ресурса</span></a>

<br><a href="req.htm" title="Требования к оформлению электронного ресурса"  target="right"><span class="l2">Требования</span></a>

<br><a href="href.htm" title="Создание и редактирование гиперссылок"  target="right"><span class="l2">Гиперссылки</span></a>

<br><a href="print.htm" title="Создание версии электронного ресурса для распечатки"  target="right"><span class="l2">Для печати</span></a>

<br><a href="modification.htm" title="Внесение изменений в электронный ресурс"  target="right"><span class="l2">Изменения</span></a>

<br><a href="transform.htm" title="Преобразование электронного ресурса в формат html"  target="right"><span class="l2">В HTML</span></a>

<br><a href="BuildHTML.htm" title="Сборка электронного образовательного ресурса в формате html"  target="right"><span class="l2">Сборка</span></a>

<br><a href="frames.htm" title="Фреймовая структура электронного ресурса"  target="right"><span class="l3">Использование фреймов</span></a>

<br><a href="ctl.htm" title="Использование web-приложения каталога"  target="right"><span class="l3">Web-приложение</span></a>

<br><a href="concl.htm" title="Заключение"  target="right"><span class="l2">Заключение</span></a>

<br><a href="lit.htm" title="Литература"  target="right"><span class="l2">Литература</span></a>

<!-- Начало оглавления -->

 

</BODY>

</HTML>

Правке подлежат следующие элементы оглавления:

1.      Значение атрибута href=””. В нем необходимо указать имя html-файла, содержащего раздел ресурса.

2.      Значение атрибута title=””. В нем задается наименование раздела, отображаемое, если курсор мыши задержать на элементе оглавления.

3.      Наконец внутри элемента <span>…</span> указывается краткое наименование раздела, отображаемое в оглавлении.

Рис 33. Собранный электронный ресурс, использующий фреймовую структуру

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

 
СборкаК началу страницыПубликация ЭОРWeb-приложение  В системе пользователей: 0 Написать администратору © НИУ МЭИ, 2007-2012