ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Государственное образовательное учреждение

высшего профессионального образования

«ДАЛЬНЕВОСТОЧНЫЙ ГОСУДАРСТВЕННЫЙ ГУМАНИТАРНЫЙ УНИВЕРСИТЕТ»

 

Кафедра информатики и ИТ

 

 

 

Комплект учебно-методических материалов   к учебному курсу: «Педагогическое проектирование электронных учебных материалов»

 

 

 

 

 

 

 

 

 

 

 

ПРАКТИКУМ (Модуль 3)

 

Курс рассчитан

1. На студентов старших курсов педагогических специальностей, в частности:

·       032300 – Химия;

·       032400 – Биология;

·       031001 – Филология, квалификация учитель русского языка и литературы;

·       032600 – История

2. Магистрантов и аспирантов педагогических специальностей, в частности, 13.00.01, 13.00.02, 13.00.08

 

 

 

 

 

 

 

Хабаровск

2007


Модуль 3

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 7

 

Тема: Проектирование файловой структуры ЭУМ, построение графа связей между страницами ЭУМ

Продолжительность 2 часа

 

1. Учебная и воспитательная цель.

Осуществить переход от общей структуры ЭУМ к файловой структуре с указанием возможных связей между файлами.

Сформировать у слушателей представление о файловой структуре разрабатываемых ЭУМ и возможных связях между отдельными файлами;

В результате проведенного занятия слушатели

Ø     Смогут создать систему каталогов для размещения файлов ЭУМ;

Ø     Будут знать понятие имени и расширения файла;

Ø     Смогут осознанно размещать файлы ЭУМ различного типа в подготовленной системе папок;

Ø     Будут знать понятие абсолютного и относительного пути к файлу;

Ø     Смогут записать путь к любому файлу ЭУМ относительно рабочего каталога;

Ø     Смогут представить в виде графа файловую структуру ЭУМ.

2. Краткие теоретические, справочно-информационные материалы по теме занятия.

Файлы, файловая структура, путь доступа к файлу

Файлом называется поименованная область памяти на внешнем запоминающем устройстве (ВЗУ). Иными словами, файл – это информация, которая хранится на диске (жестком, CD, DVD, магнитном) или другом электронном носителе, доступ к которой осуществляется по имени. Имя файла заносится в файловую систему, которая обязательно существует на каждом запоминающем устройстве.

Организуемая на  ВЗУ система файлов представляет собой систему каталогов (папок или директорий) различного уровня, начиная с самого верхнего «корневого» каталога. Каждый каталог может содержать файлы или другие каталоги. Таким образом, создается иерархическая структура, которую можно изобразить в виде дерева (см. рис.1).

Имя файла – одно из основных свойств файла. Принято различать в имени файла основное имя и расширение. Например, document.doc, picture.jpg, index.htm. В этих примерах основными именами являются: document, picture, index. Расширение имени файла, как правило, указывает на тип хранимой информации; программу, в которой файл был создан, а также программу, с помощью которой он может быть открыт. Обычно расширение имени состоит из трех букв, и указывается после основного имени файла через точку. Как правило, при сохранении файла каждая программа автоматически устанавливает стандартное расширение. В различных операционных системах существуют свои правила именования файлов. Поскольку мы заранее не можем знать, с какой операционной системой будет работать пользователь, необходимо выработать общее (для выполнения нашего проекта) правило именования:

  1. в именах файлов будем использовать только строчные (маленькие) латинские буквы, цифры и знак подчеркивания, причем первым символом не будем использовать цифру;
  2. имена файлов не должны быть слишком длинными, договоримся давать имена длиной не более чем 16-20 символов;
  3. все имена файлов должны иметь стандартные расширения.

Рис.1 Отображение файловой структуры в виде системы папок (справа) и дерева (слева)

При обращении к файлу следует указывать его полное имя, т.е. основное и расширение через точку. Например, glava1_test.htm, picture1.jpg, literature.doc.

Имена папок. Для именования папок будем использовать те же правила за исключением расширения имени. Для имен папок расширение не устанавливается, следовательно, в именах папок будем использовать только строчные (маленькие) латинские буквы, цифры и знак подчеркивания, причем рекомендуется не начинать имя с цифры. Например, pictures, dop_material, glava1.

Путь к файлу. Файл, к которому необходимо обратиться может находиться в одной из папок, которая в свою очередь может быть вложена еще в одну папку и т.д. Примером такого описания может служить сюжет из сказки про Кащееву смерть: «На высокой горе стоит дуб, на дубе – сундук, в сундуке – заяц, в зайце – утка,  в утке – яйцо, в том яйце – игла, на конце той иглы – смерть Кащеева».

Для того чтобы найти файл в системе вложенных папок необходимо указать путь к этому файлу. Полный путь к файлу начинается с указания имени диска, на котором он находится, после двоеточия, через знак «\» перечисляются все папки, начиная с верхнего уровня, до тех пор, пока не будет «открыта» последняя папка, в которой файл и находится. Например, c:\papka1\papka2\papka3\document.doc.

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

Мы будем использовать относительную адресацию. Почему? Абсолютная адресация предполагает наличие некой точки отсчета. Для файловой структуры – это имя диска и его корневой каталог. Допустим, что Ваши ЭУМ будут записаны на CD. В случае использования полного пути к файлу, содержащего имя диска, например, E (как это часто бывает), достаточно того, что на другой машине окажется другое количество дисков, а, следовательно, CD-привод будет иметь в общем списке дисков другое (отличное от E) имя. В результате этого файл не будет найден, хотя физически он находится на диске.

Для размещения ЭУМ необходимо создать специальную папку – «рабочий каталог». Все файлы следует размещать в этом рабочем каталоге. Обращаться к этим файлам мы будем «не выходя за пределы» рабочего каталога, т.е. использовать относительную адресацию: относительно рабочего каталога. В этом случае перенос ЭУМ на другую машину будет заключаться в переносе всей папки, содержащей ЭУМ. Поиск нужных файлов и на другой машине будет производиться по-прежнему в рамках той же самой  папки.

Связи между файлами в Web-приложении. Поскольку реализация ЭУМ предполагается в виде Web-приложения, следует обсудить, каким образом реализуются связи между отдельными страницами (файлами). Большая часть страниц должна быть реализована в html формате. Просмотр таких страниц возможен через браузер. Переход от одной страницы к другой реализуется с помощью гипертекстовых ссылок. Какие виды гипертекстовых ссылок могут встретиться в наших ЭУМ?

Ссылка на страницу, размещенную в Интернете. Для того чтобы обратиться к странице, размещенной в Интернете, нам нужно знать путь доступа к этой странице, при этом нужно иметь в виду, что страница эта расположена на удаленном компьютере. Для установления связи с этим компьютером и обращения к информационному ресурсу, который там расположен, необходимо знать URL (Uniform Resource Locator, унифицированный указатель ресурса). URL каждой страницы, размещенной в Интернете, указывается в строке адреса браузера (см. рис. 2). Этот адрес можно скопировать, а затем использовать в тексте ЭУМ или для настройки гиперссылки на данную страницу.

Ссылка на страницу, размещенную на Вашем компьютере. Страницы ЭУМ, размещенные в рабочем каталоге на Вашем компьютере, так же должны быть «прошиты» гиперссылками. Для доступа к этим страницам необходимо указать путь доступа к ним. В этом случае мы будем использовать путь доступа относительно рабочего каталога, в котором все страницы (файлы) ЭУМ размещаются. Для того чтобы правильно записать путь к файлу при настройке гиперссылки, нам потребуется пример организации рабочего каталога. Пусть наш рабочий каталог (папка), где размещаются страницы ЭУМ, называется resurs. В эту папку поместим файл index.html и еще две папки, например, glava1 и glava2.  Соответственно в каждую из этих папок поместим по 2 файла: tema11.html, tema12.html, tema21.html, tema22.doc. Получим структуру, изображенную на рис. 3.


Рис. 2. Ссылка на страницу, размещенную в Интернете

 

 

 

 

 

 

 

 


Рис. 3. Пример структуры рабочего каталога

Рассмотрим возможные связи между страницами:

1. Из страницы index.html необходимо вызвать страницу tema11.html. Ссылка в этом случае будет выглядеть следующим образом: glava1/tema11.html. Обратите внимание, что в этом случае мы должны сначала указать, какую папку нужно «открыть», а затем – какой именно файл в ней «взять», при этом для формирования пути к файлу используется знак «/».

2. Из страницы tema12.html необходимо вызвать страницу index.html. В этом случае ссылка будет выглядеть следующим образом: ../index.html. Две точки в начале ссылки означают, что первым делом нужно «выйти» из папки (в данном случае из папки glava1), а уже затем открыть нужный файл.

3. Из страницы tema11.html вызвать страницу tema12.html. В этом случае ссылка будет выглядеть совсем просто: tema12.html. На самом деле для того, чтобы вместо одного файла найти и загрузить другой в этой ситуации не требуется «открывать» и «закрывать» папки, переходить из одной папки в другую. Оба файла находятся в одной папке, достаточно просто указать имя файла.

4. Из страницы tema11.html необходимо вызвать страницу tema22.doc. В этом случае ссылка будет выглядеть следующим образом: ../glava2/tema22.doc. Описание данной ссылки означает следующее: две точки в начале ссылки указывают, что, прежде всего, нужно «выйти» из папки glava1, далее следует /glava2 – это означает, что нужно «войти» в папку glava2, а уже затем открыть файл tema22.doc.


Обратите внимание, что с помощью гиперссылок можно ссылаться не только на Web-страницы (формат html), но и на файлы других форматов. В этом случае для их загрузки и просмотра будет вызвано соответствующее приложение, а на экране появится диалоговое окно (см. рис. 4)

Рис. 4. Пример открытия текстового документа из Web-страницы

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

Бывают ситуации, когда гиперссылки действуют внутри одной страницы. Такие ссылки называются внутренними. Использование внутренних ссылок бывает необходимо в тех случаях, когда содержимое одной страницы имеет некую внутреннюю структуру, текст данной страницы велик и не помещается на экране. Чтобы пользователь долго не крутил полосу прокрутки, которая неизбежно в таких случаях появляется, можно расставить метки (закладки) по тексту, и с помощью внутренних гиперссылок быстро перемещаться по этим меткам (закладкам).

Информационно-логическая модель

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

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

Термин «граф» неоднозначен, это легко заметить, сравнивая приводимые в разных книгах определения. Однако во всех этих определениях есть кое-что общее. В любом случае граф состоит из двух множеств – множества вершин и множества ребер, причем для каждого ребра указана пара вершин, которые это ребро соединяет. Вершины и ребра называются элементами графа. Для разных областей применения виды графов могут различаться направленностью, ограничениями на количество связей и дополнительными данными о вершинах или рёбрах.

Граф — это совокупность объектов со связями между ними. Объекты представляются как вершины, или узлы графа, а связи — как дуги, или ребра.

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

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

Для задания определенной последовательности прохождения страниц учебного материала используются ориентированные ребра или дуги, графически они изображаются линиями со стрелкой. Для построения информационно-логической модели учебного материала будем использовать 3 типа отношения между вершинами, обозначим их латинскими буквами a, n и p.

 

 

 


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

Ребро типа p связывает последующую страницу с предыдущей. Переходы по p-ребрам соответствуют навигации в обратном направлении.

Для организации ветвления служат ребра типа a. В точке ветвления n-ребро задает базовый путь навигации, а ребра типа a – альтернативные (дополнительные) пути.

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

Пример 1.

 

 

 

 

 

 


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

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

Пример 2.

 

 

 

 

 

 

 


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

Охарактеризуем основные типы ветвлений в информационно-логических моделях:

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

2.     Обращение к вершине, декомпозируемой на нижележащем уровне иерархии, из опорной вершины, содержащей перечень декомпозируемых элементов. Порядок проработки декомпозируемых вершин отражает просмотровая последовательность, в которую они входят, a-ребра, указывающие на данные вершины из выделенной опорной вершины, позволяют оперативно обращаться к соответствующим структурным единицам, без прохождения длительных путей, ведущих к ним по ребрам типа n или p. Это удобно при повторении содержания курса, изучения его локальных частей, восстановлении и закреплении знаний, поиске информации и т.п.

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

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

5.     Переход по результатам работы. Подобные переходы реализуются a-ребрами и играют роль обратных связей, активируемых по результатам выполнения контрольных мероприятий.

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

3. Перечень (образцы) раздаточного материала, используемого на занятии. Не требуется

4. Перечень и краткое описание технических (программных) средств, необходимых для проведения занятий.

 

Наименование

Назначение

Примечание

Комплект мультимедийной проекционной техники

Сопровождение выступлений слушателей

Рекомендуется использование интерактивной доски

Компьютерный класс

Выполнение практических заданий

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

 

5. Рекомендации слушателям по подготовке к занятию с указанием литературы.

При подготовке к занятию необходимо изучить теоретические и справочно-информационные материалы по теме занятия (п. 2) и/или литературу:

  • Башмаков А. И., Башмаков И. А. Разработка компьютерных учебников и обучающих систем. – М.: «Филинъ», 2003.
  • Соловов А. В. Электронное обучение: проблематика, дидактика, технология. – Самара: «Новая техника», 2006.

Подготовить ответы на контрольные вопросы;

На основании подготовленной на предыдущем практическом занятии схемы, отражающей общую структуру разрабатываемых ЭУМ, продумать файловую систему ЭУМ с указанием возможных переходов (ссылок) от одного файла к другому.

6. Рекомендации по использованию информационных технологий (при необходимости).

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

7. Практические задачи, задания, упражнения

Ø     Создать рабочий каталог для размещения файлов ЭУМ;

Ø     В зависимости от продуманной общей схемы разрабатываемых ЭУМ создать в рабочем каталоге вложенные папки;

Ø     Переместить уже готовые файлы ЭУМ в соответствующие папки, при необходимости переименовать их;

Ø     Создать в рабочем каталоге временную папку для хранения рабочих материалов, переместить в нее все рабочие материалы;

Ø      Заполнить таблицу:

 

Название (для файла обязательно с расширением)

Описание

 

Рабочий каталог для ЭУМ

Вложенные файлы и папки

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ø     На рисунке предложена файловая структура ЭУМ и граф с указанием связей между файлами. Записать все указанные стрелками ссылки.


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

Граф связей между файлами

 

 

 

 

 

 

 

 

 

 

 


Ø     Используя заполненную таблицу файловой структуры ЭУМ, разработанную на предыдущем практическом занятии схему ЭУМ, продумать и нарисовать граф связей между файлами (страницами) ЭУМ;

Ø     Подготовить выступление-отчет на 10 минут о проделанной на занятии работе: файловая структура ЭУМ, граф связей между страницами ЭУМ.

8. Задания слушателям для самостоятельной работы.

Самостоятельно завершите работу над описанием и созданием файловой структуры ЭУМ (рабочего каталога, вложенных папок и их содержимого), а также графа с указанием связей между страницами, результаты работы разместите в портфолио.

9. Контрольные вопросы по теме занятия.

Ø     Что называется файлом?

Ø     Перечислите основные правила именования файлов (принятые для реализации ЭУМ);

Ø     Перечислите основные правила именования папок (каталогов);

Ø     Что представляет собой файловая система на внешнем запоминающем устройстве?

Ø     Что представляет собой полный путь к файлу?

Ø     В чем заключается различие между абсолютной и относительной адресацией?

Ø     Почему для реализации ЭУМ предпочтительнее использование относительной адресации (относительно рабочего каталога)?

Ø     Как реализуются связи между страницами (файлами) ЭУМ в Web-приложении?

Ø     Какие виды гиперссылок вы знаете, в чем их различие?

Ø     С помощью какой структуры представляется информационно-логическая модель учебного курса?

Ø     Какие типы отношений между структурными единицами учебного курса Вы можете назвать?

Ø     Какие типы ветвлений в информационно-логической модели могут быть реализованиы?

10. Рекомендации для преподавателей по проведению занятия

Занятие рекомендуется построить следующим образом

Первый этап: постановка целей и задач занятия, описание плана проводимого занятия. Обсуждение контрольных вопросов. Планируемое время – 15 минут.

Второй этап: фронтальное выполнение практических занятий индивидуально или в мини-группах (в зависимости от типа выполняемого проекта) под руководством преподавателя.

Третий этап: заслушивание выступлений-отчетов слушателей о проделанной на занятии работе, обсуждение полученных результатов, ответы на вопросы слушателей;

Четвертый этап: подведение итогов занятия. Задание слушателям для подготовки к следующему занятию и по формированию портфолио.

 

 Модуль 3

ЛАБОРАТОРНАЯ РАБОТА № 6

Тема: Знакомство с программой Dreamweaver 8. Создание Web-страницы.

Продолжительность 2 часа

1. Учебная и воспитательная цель.

Осуществить практическую подготовку слушателей к созданию простейших Web-страниц в программе Dreamweaver. В результате проведения занятия слушатели

Ø     Получат представление о программе Dreamweaver, основных приемах работы в ней;

Ø     смогут создать простую web-страницу, содержащую текст;

Ø     смогут осуществить форматирование текста;

Ø     смогут создать списки, осуществить вставку рисунка, применить простейшие приемы оформления Web-страницы.

2. Краткие теоретические или справочно-информационные материалы.

 

Запуск программы Dreamweaver.


При запуске программы Dreamweaver  на экране появляется Главное окно программы:

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

·       Open a Recent Item (Открыть последние файлы). Если уже работали в программе, то слева будет список из последних открытых файлов для осуществления быстрого перехода к ним. Если программа открывается впервые после установки, то там будет пусто.

·       Create New (Создать новый). Ниже идет список файлов, которые можно создать: HTML, GoldFusion, PHP, …, CSS b и т.д., большая часть которых в данной работе не понадобится.

·       Create from Samples (Создать по образцам). В программу включены уже готовые образцы (шаблоны) каскадных таблиц стилей (CSS), фреймовой структуры и дизайна сайта в целом.

Начнем создание нового сайта с выделенного пункта списка Create NewDreamweaver Site.  Далее выполняем следующие действия по шагам:


шаг 1                                                                    шаг 2


шаг 3                                                                    шаг 4

 

 

 

 

шаг 5

 


После нажатия кнопки Done (Готово), панель Files (Файлы) примет следующий вид:

 

Создание первой страницы сайта.


Первое, что нужно сейчас сделать – создать новую web-страницу, которую будем наполнять содержимым. Для создания первой страницы сайта выполним команду Create New ® HTML  (Создать новый ® HTML). В результате появится совершенно чистая страница, на которой будем работать:

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

Ввод и форматирование текста.

Ввод текста и его форматирование в Dreamweaver мало чем отличается от хорошо знакомых нам графических редакторов. Устанавливаете курсор мыши в нужном месте и, используя клавиатуру, набираете текст. Форматирование текста – расстановка заголовков, выравнивание текста, выделение части текста жирным шрифтом или курсивом и пр.


Также по аналогии с текстовыми редакторами есть несколько путей форматирования текста – с помощью главного меню, панели инструментов и контекстного меню. Наиболее удобно и наглядно использовать панель инструментов (редактор свойств):

 Форматирование абзацев. Чтобы превратить обычный абзац в заголовок, нужно воспользоваться раскрывающимся списком Format. Пункт Paragraph этого списка форматирует текст как обычный абзац. А пункты Heading 1, …, Heading 6 позволяют превратить его в заголовок определенного уровня. Таких уровней язык HTML предусматривает шесть – от самого главного, которым озаглавливаются сами web – страницы, до самого нижнего, пригодного для отдельных параграфов.

Выравнивание абзаца помогают осуществить кнопки выравнивания  , расположенные в редакторе свойств. Или выравнивание абзаца можно задать, выполнив команду Text ® Align ® Left (выравнивание по левому краю), Center (по центру), Right (по правому краю), Justify (по ширине).

Для преобразования набранных строк в список – маркированный или нумерованный, пользуются кнопками редактора свойств: . Или выполнив команду Text ® List ® Unordered List (маркированный список), Ordered List (нумерованный список).

Форматирование фрагментов текста. Для изменения начертание текста, сделать его полужирным, курсивным помогут кнопки . Для смены самого шрифта используется раскрывающийся список Font, а для смены его размера – список Size.

Откроем раскрывающийся список Font:

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

Пункт Default Font этого списка сбрасывает шрифтовые установки, точнее, возвращает их к установкам по умолчанию. Тогда выбор шрифта отдается на откуп web–обозревателю. Это значит, что если при создании сайта у вас в данном списке было выбрано Default Font, то ваша страница в разных программах – браузерах будет выглядеть по-разному!

В раскрывающемся списке Size отображены все доступные размеры шрифтов. Пункты xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger расположены в порядке от самого мелкого  до самого крупного. Пункт None сбрасывает размер шрифта в установки по умолчанию.

Для выделения шрифта цветом используется так называемый селектор цвета: . Селектор цвета состоит из 2-х частей. Справа находится поле ввода, где вводится код нужного цвета в формате RGB. А в левой части селектора находится кнопка вызова окна выбора цвета.

Графика на web-страницах.

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

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

В web-графике популярны три графических формата: GIF, JPEG и PNG.

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

·       Формат JPEG замечательно подходит для хранения полутоновых изображений. Поэтому картины и сканированные фотографии хранят только в этом формате.

·       Формат PNG объединил возможности  GIF  и JPEG, не "прихватывая" заодно с собой их недостатки. В PNG можно сохранять и штриховые и полутоновые изображения без потери качества.

Надо заметить, что кроме трех перечисленных, применяются также и другие форматы графики. Но, в отличие от GIF, JPEG и PNG, эти форматы не поддерживаются web-обозревателями напрямую и требуют дополнительных программ, а для помещения их на web-страницы требуются другие приемы.

Вставка графических изображений


Для размещения картинки на странице сайта, поместим текстовый курсор в то место, куда эту картинку необходимо вставить. На вкладке Common инструментария объектов нажмем кнопку Image.

В появившемся на экране меню выберем пункт Image. После этого на экране появится диалоговое окно Select Image Source:

Раскрывающийся список папок и список файлов позволяет выбрать нужную папку и файл.

 


После нажатия кнопки OK, появится следующее окно:

          

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

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

Параметры графического изображения.

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

Параметры изображения вводятся с помощью редактора свойств при выделенном изображении:

 

 

 

 

1.    

Поля ввода W и H – ширина и высота изображения.

2.     Поля ввода V Space и H Space – вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба равны нулю.

3.     Поле ввода Src – Интернет-адрес файла, где хранится графическое изображение.

4.     Поле ввода Low Src  - аналогично полю Src задает имя файла, где сохранено "черновое" изображение. Черновое изображение имеет меньший размер за счет более низкого качества, и придумано, для владельцев низкоскоростных каналов. Web-обозреватель первым делом загрузит "черновик", так как он имеет значительно меньший размер, и выведет его на странице. А потом постепенно загружается основное изображение и подменяет собой черновик.  Рекомендуется применять тогда, когда оригинальное изображение очень велико.

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

6.     Alt – краткий текст замены.

7.     Раскрывающийся список Align – задает выравнивание изображения, фактически – относительное местоположение его и текста, в котором оно находится. Список содержит следующие пункты:

·       Default – расположение по умолчанию, обычно аналогично пункту Baseline;

·       Baseline – низ изображения совпадает с базовой линией текста  (воображаемой линией, на которой находится строка текста) строки, в которой оно находится;

·       Top – верх изображения совпадает с верхом текста строки, в которой оно находится;

·       Middle – середина изображения совпадает с базовой линией текста;

·       Botton – низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);

·       TextTop – верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Top);

·       Absolute Middle – середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);

·       Absolute Batton – низ изображения совпадает с низом самого нижнего символа текста;

·       Left – изображение "прижимается" к левому краю страницы, а текст "обтекает" его справа;

·       Right – изображение "прижимается" к правому краю страницы, а текст "обтекает" его слева.

Вставка графических изображений


Новую таблицу можно создать с помощью команды меню Insert ® Table или с помощью инструмента Table на панели Common:

 

Далее появится диалоговое окно:


·       Ширину таблицы (Table width), здесь же можно выбрать одну из двух систем измерения этой ширины – проценты (percent) или пикселы (pixels);

·     Толщина границ (Border thickness) для макета страницы установим 0, так как таблица выделяться не должна.

·     Cell padding – поля между содержимым ячейки и ее границами и Cell spacing – интервал между ячейками. Для примера можно взять 5.

·     В группе Header (Заголовок) можно выбрать один из 4-х  вариантов задания заголовка таблицы:

o      None – нет заголовка;

o      Left – в виде первой колонки;

o      Top – в виде первой строки;

o      Both – в объединенном виде (первая колонка и первая строка).

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

·     В группе Accessibility (Доступность) можно задать заголовок, который будет отображаться над таблицей (Caption), а также один из пяти вариантов его выравнивания (Align caption)

·     Для создания макета ни один из заголовков не понадобится, поэтому эти поля оставляем незаполненными. После того как все параметры указаны, нажимаем кнопку OK.

В результате получаем на "чистом листе" таблицу с одинаковыми ячейками. Для получения нужного нам каркаса, надо таблицу немного изменить. Принцип работы с таблицей такой же, как и в текстовом редакторе Word. Изменяем границы ячеек, где необходимо, ячейки объединяем или делим.

Выделим таблицу и посмотрим на панель Properties (Свойства), расположенную внизу. С помощью этой панели можно менять начальные установки таблицы: количество строк, колонок, ширину и т.д. Также можно установить цвет фона и границ и выбрать фоновый рисунок. Если установить курсор в одну из ячеек таблицы, панель Properties станет выглядеть иначе. Здесь параметры самой ячейки перенесены в нижнюю часть, в верхней же размещена информация о свойствах текста, который будет размещен в этой ячейке.

Настройка гиперссылок.

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

Чтобы создать гиперссылку, необходимо:

1.     Выделить слова, которые непосредственно и будут ссылаться на тот или иной сайт в Интернете. Или некоторый графический объект

2.     Заполнить поле ввода Link расположенное в редакторе свойств. Внесем Интернет-адрес сайта, на который будет ссылка.

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

Ø     Для подготовки к занятию рекомендуется изучить краткие справочные и информационные материалы (п. 2), а также ознакомиться с литературой:

Название

Автор

Вид издания (учебник, учебное

пособие)

Место издания, издательство, год издания, кол-во страниц

Macromedia Dreamweaver 8

Дронов В.А.

самоучитель

Санкт-Петербург, 2006. – 320 с.

Создай свой супер-сайт в Dreamweaver 8

Морозова О. М.

Учебное пособие

Санкт-Петербург, 2006. – 256 с.

Dreamweaver MX 2004

Джанин Уорнер,

Сюзанна Гарднер

Учебное пособие

Издательский дом "Вильямс", 2004. – 352 с.

Ø     Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3. Учебно-методическое пособие. – СПб ИТМО, 2007. – 112. Электронная версия представлена в папке «Модуль 3/ DreamweaverCS3.pdf»

4. Описание лабораторного оборудования

Класс персональных компьютеров, подключенных в локальную и глобальную сети.

Установленная программа Dreamweaver.

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

1.     Создать новую web-страницу, которую необходимо заполнить следующим содержимым:

1.1.  Ввести и форматировать текст следующего содержания:

Заголовок страницы. Оформление текста.

Подзаголовок 1 . Общие сведения.

 

Абзац. Текст, как правило, состоит из абзацев и заголовков.

Обычно тест выравнивается по левому краю.

 

Но иногда есть необходимость расположить текст по правому краю.

 

Или по центру.

 

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

Подзаголовок 1 . Цветовые сочетания.

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

 

·       Белый + черный + серый - официальное "скучное" оформление

 

·       Контрастные цвета - утомляет

 

·       Оттенки одного цвета - наиболее удобное для посетителя сайта оформление

Подзаголовок 2. Каким должен быть фон?

 

·       Светлый фон — наиболее часто используемый прием в оформлении сайтов. На белом, светлом фоне информация воспринимается в несколько раз лучше, чем на темном.

·       На темном фоне читать текст, написанный белыми буквами, непривычно и утомительно. Глаза быстро устают, текст начинает расплываться... Масса отрицательных эмоций.

 

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

 

Подзаголовок 1 . Оформление шрифтов.

В данном абзаце рассмотрим различное оформление шрифтов: курсив, жирный, жирный курсив. Текст можно выделить цветом, например: зеленый, красный, коричневый. Можно увеличить и уменьшить размер.

Внимание! По ходу создания html-страницы промежуточный результат в программе браузере можно посмотреть,  нажав клавишу F12

 

1.2.  Вставка графического изображения на html-странице.

1.3.  Создание таблиц на html-странице. Добавить следующую таблицу:

 

Тип шрифта

Название шрифта

Пример

Комментарии

Шрифт с засечками

Times New Romans

Так выглядит текст с засечками

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

Garamond

Так выглядит текст с засечками

Шрифт без засечек

Arial

Так выглядит текст без засечек

Рекомендуется использовать для текста очень большого или очень маленького объема.

Impact

Так выглядит текст без засечек

Декоративный шрифт

Matilda

Так выглядит декоративный шрифт

Уместно использовать в заголовках, логотипах и т.д.

Рукописный шрифт

Monotype Corsiva

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

Рекомендуется использовать для отдельных фраз или небольших фрагментов текста.

 

2.     Работа с  фоном страницы.

2.1.  заливка фона однотонным цветом;

2.2.  добавление фонового рисунка (из коллекции или создать самостоятельно);

3.     Создание гиперссылки на странице.

3.1.  текстовая ссылка

3.2.  картинка-гиперссылка

4.     Сохраните полученную html-страницу под именем test.html

6. Ход выполнения лабораторной работы.

1.     Запустить программу Dremweaver 8. Создать новый  сайт Site, выполнив ряд шагов описанных выше. Создать первую чистую страницу сайта.

1.1.  Ввод и редактирование текста осуществляется так же как и в текстовом редакторе Microsoft Word.

1.2.  Размещение картинки. Установить текстовый курсор в конце предложения "При выборе цветового сочетания для Вашего сайта, удобно пользоваться цветовым кругом". Выполнить команду Insert ® Image. Выбрать картинку krug.gif. Подкорректировать размер рисунка.

1.3.  Поместить текстовый курсор в самом низу страницы, выполнить команду Insert ® Table. Выбор параметров таблицы и ее заполнение описаны выше.

Посмотрите полученный результат в программе – браузере (нажмите F12).

 

2.     Задание фона на странице осуществляется в окне Page Properties (Свойства страницы), вызываемом с панели редактора свойств. Выбираем цвет или рисунок фона соответственно в:   или .

 

v    Создание фона в программе  Photoshop:

Ø     в виде кирпичиков:

§       Создать новый документ со следующими параметрами: ширина и высота – 200 пикселов, разрешение – 72 пиксела на дюйм, режим – RGB, фон на изображении – белый.

§       С помощью инструмента Заливка окрашиваем холст в нужный цвет;

§       Получаем кирпичики, воспользовавшись фильтром. Выполним команду Фильтр ® Текстура ® Текстуризатор. В выпадающем меню опции Текстура  выбрать Кирпич. Воспользовавшись функциями Масштаб и Рельеф и Свет в окне предварительного просмотра, добиться желаемого результата.

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

§       С помощью коррекции Тона\Насыщенности, баланса цветов, Яркости\Контраста можно существенно изменить вид изображения.

§       Сохранить картинку с расширением JPEG

Ø     в виде облаков.

§       создать новый документ с теми же параметрами, как в упражнении выше;

§       залить голубым цветом;

§       Применить фильтр Фильтры ® Рендеринг ® Облака.

§       Сохранить картинку с расширением JPEG

 

3.     Создание гиперссылок.

3.1.  Текстовую ссылку Дополнительно сделаем на сайт, содержащий учебники по HTML, дизайну, графике и т.д. - http://www.htmlbook.ru/ .

3.2.  Единственную картинку на странице сделаем гиперссылкой на http://wellstyled.com/tools/colorscheme2/index-en.html. Здесь можно в режиме Online подобрать цветовое сочетание.

 

4.     Выполнив команду File ® Save As,  сохраните работу под именем test.html Просмотрите полученные вариант, проверьте работают ли гиперссылки.

 

5.     Подберите цветовую гамму для своего сайта.

7. Задание слушателям для самостоятельной работы

Самостоятельно создать страницу «Об авторе», разместив на ней основные сведения об авторе ЭУМ и свою фотографию. Сохранить страницу в рабочем каталоге ЭУМ с именем avtor.html. Результат работы разместить в портфолио.

8. Техника безопасности.

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

9. Исходные данные для работы.

Исходные данные представлены в папке primer: krug.gif , фоновые рисунки

http://www.htmlbook.ru/

http://wellstyled.com/tools/colorscheme2/index-en.html

10. Методика анализа полученных результатов

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

11. Порядок оформления отчета по лабораторной работе и его защиты.

Отчет по лабораторной работе проводится в конце занятия. Слушатели демонстрируют созданные Web-страницы.

Все результаты работы размещаются в портфолио в специальной папке (например, web_project). Обратите внимание на то, что папка web_project создается для размещения результатов лабораторных работ, а не самого ЭУМ.

12. Рекомендации для преподавателей по проведению занятия

Лабораторная работа проводится по подгруппам.

Занятие рекомендуется построить следующим образом:

Первый этап: постановка целей занятия, описание хода проведения занятия. Примерное время – 5 минут.

Второй этап: знакомство с программой Dreamweaver (запуск, открытие нового файла, панели инструментов и т.д.). Рекомендуется на данном этапе использовать мультимедийный проектор для демонстрации основных действий, окон и  панелей на экране, сопровождая демонстрацию комментариями. На данном этапе рекомендуется преподавателю организовать учебную деятельность слушателей по принципу «Делай, как я, делай вместе со мной».

Примерное время – 10-15 минут.

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

Примерное время – 1 час.

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

В конце занятия следует выдать слушателям задание для самостоятельной работы (п. 7) и план подготовки к следующему занятию.

Примерное время – 10 минут.

 

Модуль 3

ЛАБОРАТОРНАЯ РАБОТА № 7

Тема: Внутренние и внешние гиперссылки

Продолжительность 2 часа

 

1. Учебная и воспитательная цель

Закрепить и развить навыки работы с программой Dreamweaver.

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

Ø     Будут знать отличие внутренних и внешних гиперссылок;

Ø     Будут знать отличие абсолютной и относительной адресации;

Ø     Смогут создавать внутренние и внешние гиперссылки в программе Dreamweaver;

Ø     Смогут установить гипертекстовые связи между Web-страницами;

Ø     Будут иметь представление о возможности открытия страниц в других окнах.

2. Вопросы (задачи), подлежащие исследованию

Ø     Возможности программы Dreamweaver для создания гипертекстовых ссылок различного типа.

3. Краткие теоретические или справочно-информационные материалы.

Гипертекст это текст с гиперссылками.

Гиперссылка - слово или изображение в электронном документе, содержащие ссылку на другие файлы или части документа, на которые можно перейти щелчком «мыши» по гиперссылке. Гиперссылки в тексте, как правило, выделяются цветом, подчеркиванием и изменением указателя мыши при наведении.

Существуют гиперссылки нескольких видов:

-      Внешние – ссылки из текущего документа на другой документ (Интернет-страницу или локальную страницу, расположенную на компьютере);

-      Внутренние – ссылки, позволяющие перемещаться по тексту внутри текущего документа;

-      Абсолютные – указывается полный путь к объекту (URL адрес Web-страниц, электронный адрес).

-      Относительные – указывают внутренние файлы сайта. Используются для корректного перемещения папки с файлами сайта (размещение в локальной сети, запись на CD).

Для разработки Web-страниц используются языки разметки, наиболее часто применяется специально разработанный язык разметки гипертекстовых документов – HTML. Все описания разметки страницы в HTML оформляются с помощью тегов – специальных конструкций языка HTML. Обычно теги являются парными, т.е. имеют открывающий тег, заключенный в угловые скобки <>, и закрывающий тег </>. Такая конструкция образует контейнер.

Связь между HTML-документами  и фрагментами документов организуется с помощью тегов  <A> ... </A>  (от английского anchor - якорь). 

Тег  <A>  употребляется в двух формах. 

·     В первом случае  при создании гиперссылки на внешний документ обязательным является атрибут

HREF = url     - адрес целевого документа.

Текст и изображения, размещенные между тегами  <A> ... </A>, становятся активной зоной документа, чувствительной к щелчку мыши, который вызывает загрузку целевого документа.  Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тега <BODY>  (либо цветом по умолчанию).

Из необязательных атрибутов здесь упомянем один:

TARGET = имя     - имя кадра или окна для вывода целевого документа.

·     Во втором случае для создания внутренней ссылки – якоря (метки) фрагмента – обязателен атрибут

NAME = имя   - имя идентификатора фрагмента.

Созданный в некоторой точке документа якорь служит для того, чтобы была возможность ссылаться не на весь документ целиком, а на его фрагмент.  При создании ссылки на этот фрагмент используется тег <A> с атрибутом HREF. Имя идентификатора фрагмента дописывается к адресу целевого документа через символ #.

Вот пример совместного использования якоря и гиперссылки.  Представим себе длинный документ  book.htm , состоящий из нескольких глав.  Создадим в точке начала каждой главы метку-якорь и дадим этим меткам удобные имена, например:

.......

<A NAME="chapter1"></A> Глава 1.  ........

.......

<A NAME="chapter2"></A> Глава 2.  ........

.......

Теперь можно создать гиперссылки из этого же документа или из любого другого на указанные фрагменты.  Приведем, например, гиперссылки на точку документа, с которого начинается Глава 2.

Гиперссылка из того же документа :

<A HREF="#chapter2">переход к Главе 2</A>

Гиперссылка из другого документа,  находящегося в том же каталоге:

<A HREF=" book.htm#chapter2">переход к Главе 2</A>

Отметим, что тег <A> позволяет сделать активной зоной текстовый фрагмент или изображение целиком;  для того же, чтобы разные фрагменты одного изображения ссылались на разные целевые документы, придется использовать тег <MAP>, реализующий чувствительное изображение-карту.

Программа Dreamweaver позволяет работать в режиме визуального проектирования и создает HTML-код страницы сама. Разработчику необходимо, пользуясь панелями инструментов, правильно настроить свойства объектов. Рассмотрим примеры создания и настройки гиперссылок разного типа.

Для создания ссылок нам потребуется панель инструментов и свойства Link и Target:

 

 

 

 

 

 

 

 

 

 


Для того чтобы создать ссылку необходимо выделить на странице слово или словосочетание, которые будут выполнять роль ссылки (в тексте будут выделены цветом, подчеркиванием, при наведении будет меняться вид курсора), затем в панели инструментов в поле Link записать URL Интернет-страницы или путь доступа к файлу.

Проиллюстрируем эту последовательность действий:

  1. Размещаем текст на странице; в тексте выделяем слово или словосочетание, которые будут выполнять роль гиперссылки;
  2. В поле Link записываем адрес страницы, которая будет загружаться при активизации гиперссылки. В качестве адреса могут выступать URL страницы Интернета или путь доступа к файлу, находящемуся на компьютере;

  3. Настраиваем атрибут ссылки Target. Значение этого атрибута позволяет управлять окнами и областями экрана, в которых будет осуществляться загрузка вызываемой страницы. Обычно при активизации гиперссылки новая страница загружается в том же окне, замещая прежнюю страницу. Устанавливая различные значения атрибута ссылки Target, мы можем открывать новую страницу в новом окне (blank), в родительском окне (parent), в определенном фрейме (для этого необходимо каждому фрейму дать имя  -  NAME).

Внутренние ссылки. Часто содержимое страницы не помещается на экране, что влечет за собой появление вертикальной полосы прокрутки справа. Иногда разработчики размещают на одной странице большой фрагмент учебного материала, содержащий подтемы, параграфы и т.п. В этом случае фрагменты страницы можно пометить специальными «якорями» (anchor), которые будут выступать в роли закладок, а внутренние ссылки позволят быстро перемещаться по тексту страницы, переходя на нужную закладку.

Рассмотрим последовательность создания закладок и внутренних ссылок на примере создания страницы глоссария (фрагмент).

  1. Разместим на странице перечень понятий и их толкований. Отформатируем текст, выделив понятия начертанием;
  2. В верхней части страницы разместим буквы алфавита, которые будут выступать в роли ссылок;
  3. По тексту глоссария разместим буквы алфавита, которые будут выступать в роли закладок.


Страница будет иметь следующий вид:

  1. Настраиваем закладки, для этого около каждой буквы внутри текста необходимо поставить «якорь» и дать ему правильное имя, используя латинские буквы, цифры и знак подчеркивания. Для нашего примера можно дать имена, совпадающие с буквами: a, b, g.  Устанавливаем курсор в то место, где будет закладка. В главном меню выбираем опцию Insert, в ниспадающем меню – опцию Invisible Tags, а в ней 

    Named Anchor. Или нажимаем сочетание клавиш Ctrl+Alt+A. Появится диалоговое окно, где в поле ввода необходимо вписать имя «якоря» (закладки).

  2. Последовательно необходимо установить и именовать все «якоря», после чего на странице появятся обозначения – символические изображения якорей. Эти символы не отображаются в браузере.
  3. Теперь нам необходимо настроить внутренние гиперссылки, которые позволят нам из верхней части страницы быстро перемещаться по тексту, переходя к помеченным закладкам. Для этого выделяем слово или словосочетание в тексте (в нашем примере букву в верхней части страницы), которые будут выполнять роль гиперссылки. В поле ввода Link необходимо указать знак # и имя «якоря».

  4. Можно использовать «якорь»-закладку и для перехода на другую страницу, сразу на помеченный «якорем» фрагмент, т.е. совмещать внешние и внутренние ссылки. В этом случае в поле ввода Link указывается адрес ссылки следующего формата: путь_доступа_к_файлу#имя_якоря. Например:

 

 

 


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

Ø     Повторить теоретические сведения, приведенные в п.2 к практическому занятию №7 «Файлы, файловая структура, путь доступа к файлу»

Ø     Изучить краткие справочные и информационные материалы (п. 2), а также ознакомиться с литературой:

Название

Автор

Вид издания (учебник, учебное

пособие)

Место издания, издательство, год издания, кол-во страниц

Macromedia Dreamweaver 8

Дронов В.А.

самоучитель

Санкт-Петербург, 2006. – 320 с.

Создай свой супер-сайт в Dreamweaver 8

Морозова О. М.

Учебное пособие

Санкт-Петербург, 2006. – 256 с.

Dreamweaver MX 2004

Джанин Уорнер,

Сюзанна Гарднер

Учебное пособие

Издательский дом "Вильямс", 2004. – 352 с.

Ø     Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3. Учебно-методическое пособие. – СПб ИТМО, 2007. – 112. Электронная версия представлена в папке «Модуль 3/ DreamweaverCS3.pdf»

Ø     Подготовить терминологический словарь по теме ЭУМ;

Ø     Для выполнения заданий лабораторной работы потребуется страница, выполненная на предыдущей лабораторной работе test.html.

5. Описание лабораторного оборудования

Компьютерный класс, оборудованный мультимедийными компьютерами с установленным ПО Dreamweaver 8, подключение к локальной вычислительной сети и Интернету. Проекционная техника, интерактивная доска или экран для демонстрации образцов выполнения заданий преподавателем и слушателями.

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

В ходе выполнения лабораторной работы слушатели должны создать html-страницу, содержащую терминологический словарь (глоссарий). Настроить внутренние гиперссылки. На странице, выполненной на предыдущей лабораторной работе (test.html) настроить ссылку на новую страницу, на помеченный «якорем» фрагмент. Добавить на странице глоссария ссылку на Википедию.

 

7. Порядок выполнения заданий

1) Запустить Dreamweaver, создать новую страницу;

2) Выполнить настройку свойств страницы: кодировка, фон или фоновый рисунок (см. описание лабораторной работы №6);

3) Скопировать из файла глоссарий.doc весь текст и вставить его на новой странице;

4) В верхней части страницы вставить таблицу, содержащую 2 строки, 14 столбцов. Свойство border таблицы установить равным 0 (невидимая сетка таблицы). В ячейки таблицы вписать заглавные русские буквы А-Я, исключая Ё, Й, Ъ, Ы, Ь. Получить страницу вида:


5) Отформатировать текст глоссария таким образом, чтобы термины выделялись в тексте, применив полужирное начертание и цвет;

6) Вставить заглавные буквы русского алфавита по тексту страницы так, чтобы выделить группы понятий (терминов), начинающихся на одну букву;

7) Расставить «якоря», настроить ссылки (см. п.2 «Справочно-информационные материалы по теме занятия»);

8) Сохранить файл в папке (специально созданной для выполнения лабораторных работ) web_project с именем slovar.html;

9) Запустить браузер, открыть страницу slovar.html и проверить работу ссылок;

10) Вернуться к странице глоссария в Dreamweaver, напротив понятия «графический дизайн» установить «якорь» с именем gr_d, сохранить изменения;

11) Открыть в Dreamweaver страницу test.html, найти в тексте словосочетание «графический дизайн», настроить ссылку на глоссарий, на понятие «графический дизайн». Адрес ссылки должен выглядеть следующим образом: slovr.html#gr_d. Установить в поле Target значение _blank (в новом окне). Сохранить изменения.

12) Запустить браузер, открыть страницу test.html и проверить работу ссылок, обратить внимание на то, в каком окне будет открыт глоссарий.

13) На странице глоссария, внизу страницы добавить надпись: «Дополнительные материалы, а также разъяснения понятий, не содержащихся в данном глоссарии, Вы можете найти в свободной энциклопедии Википедии». На слово «Википедии» настроить внешнюю ссылку на Интернет-ресурс: ru.wikipedia.org. Сохранить изменения, проверить работу ссылки в браузере.

14) Подготовить отчет о проделанной работе.

8. Техника безопасности.

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

9. Исходные данные для работы.

Исходными данными для лабораторной работы являются: Web-страница, созданная слушателями на лабораторной работе №6 (test.html), а также текстовый документ расположенный в папке «Модуль 3/Лабораторные работы/глоссарий.doc»

10. Методика анализа полученных результатов.

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

11. Порядок оформления отчета по лабораторной работе и его защиты.

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

Все результаты работы размещаются в портфолио в специальной папке (например, web_project). Обратите внимание на то, что папка web_project создается для размещения результатов лабораторных работ, а не самого ЭУМ.

12. Задания слушателям для самостоятельной работы

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

13. Рекомендации для преподавателей по проведению занятия

Лабораторная работа проводится по подгруппам.

Занятие рекомендуется построить следующим образом:

Первый этап: постановка целей занятия, описание хода проведения занятия. Ответы на вопросы слушателей по теоретическим и справочно-информационным материалам. Примерное время – 10 минут.

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

Примерное время – 1 час.

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

В конце занятия следует выдать слушателям задание для самостоятельной работы (п. 12) и план подготовки к следующему занятию.

Примерное время – 20 минут.

 

Модуль 3

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 8

 

Тема: Проектирование пользовательского интерфейса

Продолжительность 2 часа

 

1. Учебная и воспитательная цель.

Осуществить переход от общего представления об интерфейсе ЭУМ к конкретным шаблонам. Сформировать у слушателей представление о пользовательском интерфейсе, его основных элементах и способах реализации.

В результате проведенного занятия слушатели

Ø     Будут знать понятие пользовательского интерфейса (ПИ);

Ø     Смогут обосновать требование унификации ПИ;

Ø     Смогут охарактеризовать дружественный интерфейс;

Ø     Смогут описать практические приемы достижения дружественности ПИ;

Ø     Сформируют систему навигации по ЭУМ;

Ø     Осуществят отбор элементов оформления, включая элементы управления;

Ø     Разработают краткую информационную справку об используемых в ЭУМ обозначениях.

2. Краткие теоретические, справочно-информационные материалы по теме занятия.

Схема пользовательского интерфейса (ПИ)

Понятие пользовательского интерфейса до сих пор не имеет однозначного толкования. Более удачным на наш взгляд является определение данное А. К. Гультяевым и В. А. Машиным: «Интерфейс – это совокупность информационной модели проблемной области средств и способов взаимодействия пользователя с информационной моделью, а также компонентов, обеспечивающих формирование информационной модели в процессе работы программной системы» [ГультяевА.К., МашинВ.А. Проектирование и дизайн пользовательского интерфейса. – СПб: Изд-во Коронапринт, 2000. – 352 с.].

При разработке схемы ПИ необходимо выработать базовые решения, которые затем применяются при формировании информационных компонентов ЭУМ. Многоступенчатая организация ПИ обусловлена двумя причинами. Во-первых, она направлена на его унификацию. Унифицированный ПИ создается на основе типовых элементов, приемов и правил, которые являются едиными для всех прикладных программных систем, рассчитанных на определенную вычислительную платформу. Такой интерфейс развивает у пользователей простую модель взаимодействия с компьютерной программой: ожидание одинаковых реакций системы на одинаковые действия. В результате унифицированный ПИ легко осваивается любыми категориями пользователей. Кроме того, при переходе от одного известного приложения к другому отсутствуют потери времени на адаптацию к ПИ, т.к. все они построены по общим принципам. Особенно это важно при разработке ЭУМ, когда необходимо сосредоточить усилия на изучаемом предмете, и минимизировать затраты на овладение применяемыми при этом средствами.

Подчеркнем, что унификация является неотъемлемым требованием к ПИ. Грамотно спроектированный унифицированный ПИ существенно повышает качество и ценность продукта.

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

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

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

  • Применение интуитивно понятных пользователям терминов, изображений и обозначений;
  • Наличие развитой ситуативной справочной системы;
  • Снисходительность к ошибкам пользователей;
  • Адаптируемость интерфейса к пользователям (их уровням знаний, предпочтениям и физиологическим особенностям);
  • Возможность совмещения изучения и применения ПИ от простого к сложному.

Концептуальное проектирование ПИ включает решение следующих основных задач:

·       Определение состава и атрибутов окон;

·       Разработка схем представления информации;

·       Определение средств ПИ, обеспечивающих навигацию по учебному материалу;

·       Разработка схем диалога;

·       Определение набора управляющих элементов, применяемых в ЭУМ;

·       Выделение настраиваемых параметров ПИ.

Окна подразделяются на первичные и вторичные. Первичным называется главное окно приложения, отображаемое непосредственно после запуска. Прочие порождаемые окна относятся ко вторичным, которые могут быть реализованы различным способом.

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

В рассматриваемую задачу входит определение назначения используемых типов окон в ЭУМ и отношений между ними. Иными словами, нужно спланировать, какие типы окон следует применять для предоставления информации различного характера в тех или иных ситуациях, и какие связи между ними должны быть реализованы.

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

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

·       Блок содержания;

·       Обзор главы;

·       Заключение по главе;

·       Обзор раздела;

·       Фрагмент основного учебного материала;

·       Фрагмент основного учебного материала, включающий гиперграфику или интерактивное трехмерное представление;

·       Фрагмент основного учебного материала, включающий видеофрагмент или анимацию;

·       Фрагмент дополнительного учебного материала;

·       Компактная дополнительная информация (пояснение, указание, уточнение, совет и т.п.), рассчитанная на представление в модальном окне;

·       Фрагмент, содержащий УТЗ для закрепления знаний;

·       Перечень ключевых понятий раздела;

·       Набор УТЗ для самопроверки по разделу;

·       Литература по разделу;

·       Страница входа в блок контроля;

·       Страница, представляющая блок контроля;

·       Страница с результатами блока контроля;

·       Глоссарий;

·       Справка по работе с программой.

Обобщенная схема расположения основных панелей в окне может быть представлена следующим образом:

Заголовок окна                                        стандартные элементы для манипулирования окном

Меню

Панель управления

Название текущей структурной единицы учебного материала

Панель ссылок

 

 

 

 

 

Рабочая область

Панель статуса

Основная часть учебного материала выводится в рабочей области окна. Как правило, слева и/или сверху (снизу) размещается панель ссылок на опорные структурные единицы. При этом панель ссылок может соответствовать всему учебному курсу или к текущей структурной единице. Панель ссылок играет роль блока содержания и обеспечивает навигацию по учебному материалу, поэтому она должна быть доступна пользователю в любой момент. Бывает целесообразно сверху размещать панель ссылок, соответствующую всему учебному курсу, при этом выбираются ссылки на основные опорные единицы содержания. А слева размещать панель ссылок текущей структурной единицы. В этом случае верхняя панель ссылок остается неизменной на протяжении работы с ЭУМ и изучения всего учебного курса, а левая панель ссылок меняется при смене раздела или темы.

В заголовке окна отображается название продукта. Меню содержит перечень основных команд, которые могут быть реализованы с помощью программного приложения, к которому данное окно относится. Обычно основные опции меню дублируются с помощью быстрых кнопок на панели управления. Нижняя строка – панель статуса используется для отображения сообщений и состояния процесса (например, загрузки страницы и т.п.). Нижнюю панель статуса можно отключить для увеличения рабочей области. На рис. 1 представлен пример окна, содержащий фрагмент учебного курса.


Рис. 1. Пример стандартного окна и схемы размещения учебного материала

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

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

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

Следует отметить, что пиктограммы включаются не только в представление учебного материала, но и в управляющие элементы (кнопки, меню, списки и др. Разработчик ЭУМ должен из всего многообразия пиктограмм выбрать необходимый минимум интуитивно понятных пользователю изображений, но даже в этом случае следует сделать отдельную страницу с описанием условных обозначений, используемых в ЭУМ. Например:

Пиктограмма

Значение

Переход на предыдущую страницу

Переход на следующую страницу

Информация на диске

Инструменты настройки

Информация, требующая записи в тетрадь

Электронная почта

Литература

Домашняя страница

Иллюстрация

Дополнительный материал

Результаты контроля знаний

Помощь

Переход наверх

Индивидуальная работа

Групповая работа

Вычисления

 Разумеется, что в таблице приведены лишь примеры пиктограмм и их значений. В ЭУМ могут использоваться и другие наборы символических изображений. Не следует увлекаться пиктограммами, их не должно быть слишком много, не допускается изменять значение пиктограмм в рамках одного учебного курса.

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

Помимо навигации прочие компоненты диалога связаны с выполнением УТЗ и контрольных мероприятий, реализацией дидактических приемов, регистрацией и идентификацией обучаемого, настройкой ЭУМ и пр.

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

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

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

3. Перечень (образцы) раздаточного материала, используемого на занятии. Не требуется

4. Перечень и краткое описание технических (программных) средств, необходимых для проведения занятий.

Наименование

Назначение

Примечание

Комплект мультимедийной проекционной техники

Сопровождение выступлений слушателей, демонстрация ПИ ЦОР

Рекомендуется использование интерактивной доски

Компьютерный класс

Выполнение практических заданий

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

 

5. Рекомендации слушателям по подготовке к занятию с указанием литературы.

При подготовке к занятию необходимо изучить теоретические и справочно-информационные материалы по теме занятия (п. 2), а также литературу:

  • Башмаков А. И., Башмаков И. А. Разработка компьютерных учебников и обучающих систем. – М.: «Филинъ», 2003. – стр. 270-284;
  • Соловов А. В. Электронное обучение: проблематика, дидактика, технология. – Самара: «Новая техника», 2006;
  • Кузнецов А. М., Мартынов В. В. Требования к графическому дизайну и юзабилити образовательных порталов. – Электронный ресурс «Модуль 3/ Martinov.pdf»

Подготовить ответы на контрольные вопросы;

Из представленных в папке «Модуль 3/ Элементы для оформления» коллекций иконок, пиктограмм, фоновых рисунков, кнопок выбрать необходимые для разработки ЭУМ. Создать в папке рабочего каталога ЭУМ специальную папку с именем, например, images. Скопировать в эту папку все отобранные элементы оформления.

6. Рекомендации по использованию информационных технологий (при необходимости).

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

7. Практические задачи, задания, упражнения

Ø     Анализ ПИ ЦОР. В ходе анализа ПИ заполнить таблицу:

Характеристики

Оценка

1

Интуитивная ясность интерфейса (действия пользователя не требуют инструкций)

 

2

Гармоничность интерфейса (не перегружен, легко воспринимается)

 

3

Оптимальность расположения управляющих элементов интерфейса

 

4

Оптимальность размеров управляющих элементов

 

5

Удобство навигации

 

6

Дружественность интерфейса (подсказки, надписи, справки)

 

7

Возможность настройки отдельных параметров ПИ

 

8

Реализация элементов диалога

 

Ø     Создание информационной справки о принятых в ЭУМ обозначениях и управляющих элементах. Примерный формат справки:

Общее описание программы

Данные ЭУМ «__________________________(тема)» предназначены для ____________________________________________________________________________________________________________________________________________________

Для установки программного приложения необходимо ______________________________________________________________________________________________________________________________________________________________________________________________________________________________

Для запуска программного приложения необходимо открыть файл ___________

Принятые в ЭУМ обозначения

Вид

Обозначение

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

В таблицу необходимо вставить все отобранные Вами пиктограммы и кнопки и описать их значение. Полученный файл сохранить в рабочем каталоге ЭУМ с именем, например, spravka.doc.

Ø     Проектирование макета ЭУМ (экраны, размещение элементов содержания на экране и пр.), детерминированной и контекстной навигации.

8. Задания слушателям для самостоятельной работы.

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

9. Контрольные вопросы по теме занятия.

Ø     Дайте описание понятия «пользовательский интерфейс»;

Ø     Как Вы понимаете понятие «унифицированный интерфейс»;

Ø     Какие характеристики присущи дружественному интерфейсу?

Ø     Какие основные задачи решаются на этапе проектирования ПИ?

Ø     Каким образом работа с окнами в программном приложении может влиять на качество продукта и эффективность представления учебной информации?

Ø     Перечислите типовые структурные единицы учебного материала, существенные для разработки схемы представления учебной информации?

Ø     Приведите пример типового экрана для ЭУМ, опишите назначение панелей;

Ø     Каким образом в ЭУМ может быть реализован диалог с пользователем?

Ø     С какой целью в ПИ предусматриваются элементы настройки? Какие параметры ПИ могут быть настраиваемыми?

10. Рекомендации для преподавателей по проведению занятия

Занятие рекомендуется построить следующим образом

Первый этап: постановка целей и задач занятия, описание плана проводимого занятия. Планируемое время – 5-7 минут.

Второй этап: фронтальное выполнение практического задания №1: анализ ПИ ЦОР. Преподавателю рекомендуется для выполнения данного задания выбрать  один-два ЦОР. В качестве положительного примера реализации ПИ рекомендуется взять ЦОР производителя ЗАО «1С» (предметная область в данном случае роли не играет) ЦОРы данного производителя отличаются унифицированным ПИ. По возможности рекомендуется подобрать контрпример.

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

Примерное время выполнения – 15-20 минут.

Третий этап: Выполнение практического задания №2: создание информационной справки о программе и принятых обозначениях. Для выполнения данного задания следует воспользоваться подготовленными предварительно слушателями коллекциями элементов оформления, а также в качестве примеров следует предложить печатные или электронные версии материалов, сопровождающих разработанные ЦОРы.

Во время выполнения слушателями задания преподаватель осуществляет контроль и консультационную помощь.

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

Примерное время выполнения – 30 минут.

Четвертый этап: выполнение практического задания №3: проектирование макета ЭУМ, навигации. Для выполнения данного задания следует воспользоваться построенным на предыдущем практическом занятии графом, выделить в нем основные просмотровые последовательности, а также отдельные (например, литература, справка, страница об авторе и т.п.) страницы, просмотр которых  в ЭУМ предполагается, но не является обязательным и не входит в последовательность представления учебного материала. Рекомендуется ссылки на основные просмотровые последовательности (модули учебного материала, крупные разделы) и «изолированные» страницы разместить в основную панель навигации.

Каждая просмотровая последовательность или декомпозируемая страница (начальная для раздела/темы) предполагает навигацию внутри данной просмотровой последовательности (раздала/темы). Для каждой такой декомпозируемой точки следует продумать и спланировать набор ссылок, образующих панель навигации по модулю, теме или разделу.

Для упрощения создания макета ЭУМ слушателям можно предложить бумажный макет с заготовками шаблонов (эскизы представлены в папке «Модуль 3/ Макет ЭУМ»). Считаем целесообразным выполнить этот макет в виде своеобразного блокнота, при этом нижнюю страницу (общий макет) оставить неизменной, а все остальные вырезать по размерам рабочей области.

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

Примерное время выполнения – 30 минут.

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

Примерное время – 5-7 минут.

Модуль 3

ЛАБОРАТОРНАЯ РАБОТА № 8

Тема: Создание фреймовой структуры

Продолжительность 4 часа

 

1. Учебная и воспитательная цель. Изучение и практическое приобретение навыков создания Web-страниц, с использованием фреймов.

В результате проведения занятия слушатели должны знать:

-       интерфейс и инструменты редактора Macromedia Dreamweaver 8, позволяющие создавать «простейшие» Web-страницы,

-       формирование фреймовой структуры сайта,

-       использование гипертекста при создании Web-страниц.

2. Вопросы, подлежащие исследованию

ü     Формирование фреймов в Macromedia Dreamweaver 8.

ü     Использование гиперссылок в документе, имеющем фреймовую структуру, с помощью средств Macromedia Dreamweaver 8.

ü     Макетирование сайтов.

3. Краткие теоретические или справочно-информационные материалы

Macromedia Dreamweaver 8 – на сегодняшний день один из мощнейших редакторов для создания Web-страниц. Его возможности шире по сравнению с обычными функциями подобных редакторов. Dreamweaver позволяет создавать объекты и страницы с использованием языка HTML, поддерживает каскадные таблицы стилей, а также разработчику Web-проекта предлагаются гибкий и мощный инструментарий управления сайтом, включая встроенный FTP-клиент, контроль над ссылками  и визуальные карты сайтов. Новые возможности Dreamweaver 8 значительно облегчают процесс создания страниц и управления сайтом.

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

Профессиональный инструмент для создания web-сайтов и приложений.

 

Основные понятия, принятые в работе:

Сайт - это раздел интернета, который определяется своим адресом, имеет своего владельца и состоит из Web-страниц, которые воспринимаются как единое целое.

Web-страница - самостоятельная часть сайта. Web-страница может иметь статическое или динамическое построение. Обычно Web-страницы организуется в виде гипертекста с включениями текста, графики, звука, видео или анимацию. В сети Интернет просмотр Web-страниц осуществляется посредством браузера.

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

Гиперссылка - слово или изображение в электронном документе, содержащие ссылку на другие файлы или части документа, на которые можно перейти щелчком «мыши» по гиперссылке. Гиперссылки в тексте, как правило, выделяются цветом.

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

На лабораторной работе в качестве вспомогательного материала предполагается использовать бумажный макет ЭУМ, подготовленный (созданный) на практическом занятии №8.

Для выполнения заданий лабораторной работы требуются страницы, созданные на предыдущих лабораторных работах №6-7, а именно test.html и slovar.html.

Для подготовки к занятию рекомендуется изучить краткие справочные и информационные материалы (п. 2), а также ознакомиться с литературой:

1.     Dreamweaver 8. Базовый курс. Божко А. Н., 2007

2.     Dreamweaver 8. Библия пользователя Джозеф В. Ловери, Джозеф В., 2006

3.     http://firststeps.ru/ - Cайт «Первые шаги» поможет примером начинающим программистам, и подскажет опытным нестандартное решение тривиальной задачи.

4.     http://realsoft.hostmos.ru/journals.htm - Данный раздел сайта «Реальный софт» посвящен офф-лайновым электронным журналам.

5.     Алленова Н. Учебник по html , css и формам. http://htmlbook.narod.ru/

6.     Якушина Е.В. Словарь по HTML

7.     Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3. Учебно-методическое пособие. – СПб ИТМО, 2007. – 112. Электронная версия представлена в папке «Модуль 3/ DreamweaverCS3.pdf»

5. Описание лабораторного оборудования

Компьютерный класс, оборудованный мультимедийными компьютерами с установленным ПО Dreamweaver 8, подключение к локальной вычислительной сети и Интернету. Проекционная техника, интерактивная доска или экран для демонстрации образцов выполнения заданий преподавателем и слушателями.

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

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

Условия задания:

-       Сайт должен содержать не менее 4 страниц, содержащих информацию любого типа

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

-       Меню должно быть реализовано в виде гиперссылок.

-       Результат выполнения задания (сайт) должен быть представлен отдельной папкой со всеми файлами, которые использовались в проекте.

Тема сайта может быть выбрана слушателем самостоятельно!

Основные этапы выполнения работы

2.      Планирование сайта

3.      Настройка свойств Web-страницы

4.      Создание фреймовой структуры

5.      Размещение текста на Web-странице

6.      Создание элементов навигации

7. Исходные материалы для работы

Web-страницы, выполненные на предыдущих двух лабораторных работах (test.html, slovar.html), а также файлы с результатами выполнения  лабораторных работ «Обработка звука» и «Обработка видео материалов».

8. Ход выполнения лабораторной работы

Ø     Настройка свойств Web-страницы

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

На панели свойств выбираем кнопку Page Properties

1) В окне выбираем пункт Title/Encoding. Устанавливаем кодировку Кириллица (Windows) – для корректного отображения русского текста.


2) В том же окне выбираем пункт Appearance. Устанавливаем фон сайта Background color.

3) Нажмите клавишу ok.

 

Ø     Создание фреймовой структуры

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

 

 

topFrame - заголовок сайта, логотип и основное меню.

 

 

 

mainFrame – основная информация сайта.

 

 

bottomFrame - сведения об авторе сайта.

1.    

Для создания фреймов выбираем на панели объектов Layout.

 

2.     Используя подменю Frame последовательно строим схему сайта.

Заголовок сайта -  Top Frame:

В появившемся окне выбираем TopFrame и выбираем кнопку Ok.

Будет создан верхний фрейм с заголовком.

Далее аналогично строим Bottom Frame - Сведения об авторе.

 

 

 

3.         

Выделив мышью границу фрейма можно увеличить или уменьшить фрейм, в свойствах (нижняя часть окна) установить цвет и размер границы.

4.          Установим курсор последовательно во фреймы и назовем их: top, main, bottom.

5.          Сохраним структуру сайта. Для сайта  нужно создать отдельную папку, в нее и будем сохранять, используя команду file ® save all… Сначала сохраним начальный файл сайта под именем index.html, затем последовательно программа предлагает сохранить фреймы (внимательно смотрите какой фрейм выделен) соответственно под именами topframe.html, mainframe.html, bottomframe.html. 

Ø     Размещение текста на Web-странице

1.          Вводим заголовок сайта «Заголовок ЭУМ» в поле title инструментария документа.

2.          Размещение текста на сайте начнем с нижнего фрейма – bottom – сведения об авторе.

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

Оформим текст, следующего содержания: Ó Организация, автор, год создания

Для символа Ó необходимо использовать специальную вставку. На панели объектов Text ® Characters®Copyright

 

 

 

 

 

 

 

 

 

 

 

3.          Создадим страницу main по следующему образцу:

 

Представляем вашему вниманию  ЭУМ «Название ЭУМ». Который посвящен ….  

 

 

При форматировании текста пользуемся панелью свойства по общим свойствам Windows.

4.          Размещение текста «Заголовок ЭУМ» в верхнем фрейме top.


Центрируем текст через панель свойств, и применим тег «h1» для заголовков Web-страниц из панели объектов Text.

 

5.     Заполняем строку основного меню в верхнем фрейме, ниже заголовка, со следующим текстом: Главная    страница 1    страница 2         Глоссарий

6.          Сохраним все изменения, используя команду file ® save all

 

Ø     Создание основного меню

1.                   

Гипертекстовое меню.  Используем относительные ссылки. Во фрейме Тор выделяем первую строчку «Главная» и на панели свойств указываем Linkmainframe.html через значок папки указываем файл mainframe.html,  для свойства target определяем место размещения открывающейся по ссылке странице mainframe.

Аналогично формируем оставшиеся ссылки меню во фрейме Top:

Ссылка

Link

Target

Главная

Test.html

Mainframe

Страница1

Audio.html

Mainframe

Страница2

Video.html

Mainframe

Глоссарий

slovar.html

blank

 

2.                    Ссылка на Web-страницу. Используем абсолютную ссылку. Выделим слова «Организация» в нижнем фрейме bottomframe. На панели свойств в пункте link http://iso.khspu.ru  (Сайт «ДВГГУ в проекте ИСО»). Для атрибута Target установим _blank (открывать страницу в новом окне).

3.                    Ссылка на электронный адрес. Выделим слова «Автор» в нижнем фрейме bottomframe. В пункте link панели свойств mailto: iso@khspu.ru  (ссылка формируется по маске mailto: электронный адрес). Для атрибута Target установим _blank.

4.                    Сохраним документ file ® save all

5.                    Проверка работы ссылок. При просмотре документа обязательно необходимо проверить работоспособность всех ссылок (Правильно ли настроены? Открываются ли там, где вы предусматривали? и т.д.)

9. Порядок оформления отчета по лабораторной работе и его защиты

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

Все результаты работы размещаются в портфолио в специальной папке (например, web_project). Обратите внимание на то, что папка web_project создается для размещения результатов лабораторных работ, а не самого ЭУМ.

10. Методика анализа полученных результатов

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

11. Задания слушателям для самостоятельной работы

Самостоятельно разработать и создать макет ЭУМ, подключить уже существующие страницы, например, avtor.html, spravka.doc, slovar.html. Продолжить работу по созданию страниц основных просмотровых последовательностей учебного материала.

12. Техника безопасности

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

 

13. Рекомендации для преподавателей по проведению занятия

Лабораторная работа проводится по подгруппам. На проведение лабораторной работы отводится 4 часа.

Занятие рекомендуется построить следующим образом:

1-е занятие

Первый этап: постановка целей занятия, описание хода проведения занятия. Примерное время – 5 минут.

Второй этап: рекомендуется на данном этапе использовать мультимедийный проектор для демонстрации примеров и образцов html-страниц, имеющих фреймовую структуру.

 Примерное время – 10-15 минут.

Третий этап: пошаговое выполнение слушателями заданий лабораторной работы рекомендуется осуществлять совместно с преподавателем. Действия преподавателя рекомендуется проецировать на экран или интерактивную доску, сопровождая демонстрацию комментариями. На данном этапе рекомендуется преподавателю организовать учебную деятельность слушателей по принципу «Делай, как я, делай вместе со мной». На данном этапе преподаватель выступает в роли инструктора.

Примерное время – 1 час.

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

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

Примерное время – 10 минут.

2-е занятие

Первый этап: постановка целей занятия, описание хода проведения занятия: на втором занятии слушатели должны по аналогии реализовать фрагмент разрабатываемых ЭУМ

Примерное время – 5 минут.

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

Примерное время – 1 час 15 минут.

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

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

Примерное время – 10 минут.

 

Модуль 3 

ЛАБОРАТОРНАЯ РАБОТА № 9

Тема: Создание html-страниц с помощью табличного шаблона

Продолжительность 6 часов

1. Учебная и воспитательная цель.

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

Ø     Смогут осуществить разметку страницы с помощью табличного шаблона;

Ø     Смогут на основе подготовленного шаблона создать последовательность страниц, связанных гиперссылками;

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

2. Вопросы (задачи), подлежащие исследованию.

Ø     Возможности программы Dreamweaver для табличной верстки страниц;

Ø     Преимущества и недостатки табличной верстки;

Ø     Особенности создания страниц на основе шаблонов.

3. Краткие теоретические или справочно-информационные материалы.

Табличный дизайн

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

Для табличного способа разметки характерно то, что Web-страница создается на основе большой таблицы (так называемой таблицы разметки), в ячейки (они называются ячейками разметки) которой могут помещаться и название сайта, и набор гиперссылок, и сведения об авторских правах, и, конечно, основное содержимое. Мы уже создали основной макет сайта, выделив фреймы. В верхнем фрейме у нас размещается основное название и основные пункты навигации. В нижнем фрейме – сведения об авторских правах и ссылка на страницу об авторе. Не размеченным у нас осталось основное рабочее поле, в котором будут выводиться страницы с основным содержанием учебного материала. Для размещения основного содержания учебного материала также важно отобразить заголовок раздела или темы, создать панель ссылок на главы, подтемы, контрольные вопросы и т.п.

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

Заголовок

 

Логотип

Заголовок

М
Е
Н
Ю

Основная

часть

 

Меню

Меню

Основная

часть

Изображения

Copyright

 

В первом случае надо задать таблицу, состоящую из 3-х строк и 2-х столбцов, объединить ячейки верхней и нижней строк и задать размеры строк и столбцов. Во втором случае таблица разметки создается на основе таблицы, состоящей из 3-х строк и 3-х столбцов.

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

Режим разметки страниц.

Чтобы переключится в режим разметки страниц, надо нажать кнопку-переключатель Layout, расположенную на вкладке Layout инструментария объектов.

 


Выбрав кнопку Draw Layout Cell (создание ячейки разметки) рисуем первую ячейку, как правило это ячейка основного содержимого. После этого Dreamweaver сформирует таблицу разметки и находящуюся в ней ячейку. Получившаяся таблица будет отображена в виде большого серого прямоугольника с зеленой рамкой, а ячейка – в виде меньшего белого прямоугольника с синей рамкой, расположенного внутри серого. Структура таблицы разметки тоже будет видна – если присмотреться, то можно заметить тонкие белые линии – границы других ячеек этой таблицы.

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

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

Создание шаблонов

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

Шаблон – это своеобразный образец, "скелет" web-страницы, содержащий общие для всех страниц элементы: заголовок сайта, набор гиперссылок, фон, сведения об авторских правах и пр. 

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

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

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

Ø     Для подготовки к лабораторной работе необходимо изучить теоретические и справочно-информационные материалы по теме занятия, ознакомиться с литературой;

Название

Автор

Вид издания (учебник, учебное

пособие)

Место издания, издательство, год издания, кол-во страниц

Macromedia Dreamweaver 8

Дронов В.А.

самоучитель

Санкт-Петербург, 2006. – 320 с.

Создай свой супер-сайт в Dreamweaver 8

Морозова О. М.

Учебное пособие

Санкт-Петербург, 2006. – 256 с.

Dreamweaver MX 2004

Джанин Уорнер,

Сюзанна Гарднер

Учебное пособие

Издательский дом "Вильямс", 2004. – 352 с.

Ø     Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3. Учебно-методическое пособие. – СПб ИТМО, 2007. – 112. Электронная версия представлена в папке «Модуль 3/ DreamweaverCS3.pdf»

Ø     Подготовить весь рабочий материал по одному из разделов ЭУМ для разработки рабочего фрагмента;

Ø     Продумать и спланировать макет подготовленного раздела: заголовок, панель ссылок (содержание раздела, навигация по разделу), область экрана для вывода основного контента и т.д.

5. Описание лабораторного оборудования

Компьютерный класс, оборудованный мультимедийными компьютерами с установленным ПО Dreamweaver 8. Проекционная техника, интерактивная доска или экран для демонстрации образцов выполнения заданий преподавателем и слушателями.

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

1.     Создание новой версии сайта "Оформление текста". Новый сайт назовем Site2.  Информацию с первого сайта разобьем на 3 части (по подзаголовкам 1).

1.1.  Создадим табличный дизайн страницы нового сайта.

·       Заголовок страницы Site "Оформление текста" сделаем заголовком сайта Site2.

·       Подзаголовки 1 сайта Site сделаем пунктами меню сайта Site2.

·       Добавим логотип.

Новая  html-страница будет выглядеть так:

Оформление текста

Выполнили студенты ДВГГУ

Общие сведения

ТЕКСТ

Цветовое сочетание

 Оформление шрифтов

1.2.  Создание шаблона для страниц сайта Site2. Сохранить шаблон под именем dizain.dwt

1.3.  На основе шаблона dizain.dwt создать первую (главную, начальную) html-страницу сайта Site2, сохранить под именем index.html

1.4.   Аналогичным образом сделать оставшиеся две страницы и сохранить их под именами 2.html и 3.html соответственно.

1.5.  Настроить гиперссылки между страницами.

1.6.  Посмотреть результат.

2.     Создание более сложного табличного дизайна в режиме разметки страницы.

3.     Выполнение студентами своего сайта.

3.1.  На бумаге продумайте структуру сайта, который будете  реализовывать.

3.2.  Создание шаблона сайта.

3.3.  Наполнение страниц на основе созданного шаблона.

7. Порядок проведения лабораторной работы.

1.               Начните новый сайт, назовите его Site2. Откройте новую чистую страницу.

·      
Откройте окно Page Properties (Свойства страницы) и в обязательном порядке заполните два поля:

 

·       Вставьте таблицу с 2-мя столбцами и 2-мя строками. Развести границы ячеек так, как показано на рисунке. Заполните ячейки содержимым. Поместив курсор в верхнюю левую ячейку, вставьте картинку-логотип.

 

Оформление текста

Выполнили студенты ДВГГУ

Общие сведения

ТЕКСТ

Цветовое сочетание

 Оформление шрифтов

2.      Прежде чем сохранить созданную страницу как шаблон, необходимо отметить на ней редактируемые области.  Для этого необходимо:

·       Выделить ячейку

·       Выполнить команду Insert ® Template Objects ® Editable Region.

Выполнить команду Save As Template… В появившемся окне в нижней строке ввести имя, под которым шаблон надо сохранить. Например, dizain.dwt.

3.              

Создать

 

Выполнить команду File ® New. Появится окно, в котором надо выбрать вкладку Template:

Выбрав нужный шаблон, нажмите кнопку Create.

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


Сохраните первую страницу, выполнив команду File ® Save As… задайте имя index.ru

4.       Аналогичным образом создаем еще две страницы и сохраняем под именами 2.html и 3.html. В результате получим:

     

5.   Создание гиперссылок:

·       Откройте шаблон dizain.dwt.

·       Выделите первый пункт меню Общие сведения выполните команду Insert ® Hyperlink:

 

 

·       В открывшемся окне выберете страницу, на которую должны ссылаться Общие сведения. В нашем случае это index.html.

Аналогичным образом настройте ссылки Цветовые сочетания на страницу 2.html и Оформление шрифтов – на 3.html.

 

 

 

·       Сохраните измененный шаблон, выполнив команду Save. После чего будет предложено обновить все страницы созданные на базе этого шаблона. Выполняем Update. и  Save All.

 

 

6.     Смотрим результат. Запускаем index.html. Оцениваем, что получилось.

7.     Создание шаблона html-страницы для разрабатываемых ЭУМ в режиме разметки. Создать страницу следующего вида (или придумать шаблон самостоятельно):

Название структурной единицы учебного материала

тема 1

тема 2

тема 3

контрольные вопросы

Тест

ОСНОВНОЙ

ТЕКСТ

Картинки (цитаты)

8. Разработать на основе созданного шаблона последовательность страниц по выбранному разделу ЭУМ

8. Техника безопасности.

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

9. Исходные данные для работы.

Страница, созданная на лабораторной работе №6 (test.html).

10. Методика анализа полученных результатов.

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

11. Порядок оформления отчета по лабораторной работе и его защиты.

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

Все результаты работы размещаются в портфолио в специальной папке (web_project). Обратите внимание на то, что папка web_project создается для размещения результатов лабораторных работ, а не самого ЭУМ.

12. Рекомендации для преподавателей по проведению занятия

Лабораторная работа проводится по подгруппам. На проведение лабораторной работы отводится 6 часов.

Занятие рекомендуется построить следующим образом:

1-е занятие

Первый этап: постановка целей занятия, описание хода проведения занятия. Примерное время – 5 минут.

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

 Примерное время – 10-15 минут.

Третий этап: пошаговое выполнение слушателями заданий лабораторной работы рекомендуется осуществлять совместно с преподавателем. Действия преподавателя рекомендуется проецировать на экран или интерактивную доску, сопровождая демонстрацию комментариями. На данном этапе рекомендуется преподавателю организовать учебную деятельность слушателей по принципу «Делай, как я, делай вместе со мной». На данном этапе преподаватель выступает в роли инструктора.

Примерное время – 1 час.

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

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

Примерное время – 10 минут.

2-3е занятия (рекомендуется проведение сдвоенного занятия)

Первый этап: постановка целей занятия, описание хода проведения занятия: на втором занятии слушатели должны по аналогии реализовать фрагмент разрабатываемых ЭУМ

Примерное время – 5 минут.

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

Примерное время – 2 часа 30 минут. Во время работы следует организовать 15-минутный перерыв.

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

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

Примерное время – 10 минут.

 

 

Модуль 3

ЛАБОРАТОРНАЯ РАБОТА № 10

Тема: Размещение мультимедийных объектов. Интерактивные элементы.

Продолжительность 4 часа

 

1. Учебная и воспитательная цель. Изучение и практическое приобретение навыков размещения мультимедийных объектов, создания интерактивных элементов и управления ими.

В результате проведения занятия слушатели должны знать:

-       правила размещения мультимедийных объектов,

-       возможности создания интерактивных элементов,

-       виды интерактивных элементов и их настройка.

2. Вопросы, подлежащие исследованию

ü     Возможности Macromedia Dreamweaver 8 для размещения мультимедийных объектов.

ü     Использование интерактивных элементов при создании веб-страниц в Macromedia Dreamweaver 8.

3. Краткие теоретические и справочно-информационные материалы по теме занятия

Широкое распространение мультимедиа пришлось на период, когда служба World Wide Web уже существовала, так что язык HTML не сразу приспособился к появлению на Web-страницах мультимедийных объектов. Файлы аудио и видео до сих пор рассматриваются как «внешние» объекты, воспроизводимые через встроенные и вспомогательные приложения.

Самый простой способ вставить мультимедийный объект на Web-страницу — это использовать гиперссылки, в этом случае мультимедийный файл не отвлекает пользователей от остального содержимого документа HTML.

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

 

Основные понятия, принятые в работе:

Интерактивные элементы веб-страницы – элементы веб-страницы, с помощью которых происходит обмен данными между пользователем и сервером. Различные блоки, позволяющие пользователю совершить какое-либо действие, не уходя с сайта. К интерактивным элементам относятся: формы для голосования, для отправки e-mail, для регистрации, для подписки и др.

Мультимедийная информация – сочетание звука, текста и образов в цифровой форме, пригодное для воспроизведения на ЭВМ, прямое воспроизведение звука и видео в браузерах.

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

Ø     Для подготовки к лабораторной работе следует изучить теоретические и справочно-информационные материалы по теме занятия, а также литературу:

1.     Dreamweaver 8. Базовый курс. Божко А. Н., 2007

2.     Dreamweaver 8. Библия пользователя Джозеф В. Ловери, Джозеф В., 2006

3.     http://firststeps.ru/ - Cайт «Первые шаги» поможет примером начинающим программистам, и подскажет опытным нестандартное решение тривиальной задачи.

4.     http://realsoft.hostmos.ru/journals.htm - Данный раздел сайта «Реальный софт» посвящен офф-лайновым электронным журналам.

5.     Алленова Н. Учебник по html , css и формам. http://htmlbook.narod.ru/

6.     Якушина Е.В. Словарь по HTML

7.     Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3. Учебно-методическое пособие. – СПб ИТМО, 2007. – 112. Электронная версия представлена в папке «Модуль 3/ DreamweaverCS3.pdf»

Ø     Подобрать и подготовить для размещения на страницах ЭУМ необходимые мультимедийные объекты.

5. Описание лабораторного оборудования

Класс персональных компьютеров, подключенных в локальную и глобальную сети. Программный пакет Macromedia Dreamweaver 8. Проекционная техника, интерактивная доска или экран для демонстрации образцов выполнения заданий преподавателем и слушателями.

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

1.     Добавить мультимедийный объект на веб-страницу.

2.     Разместив графический объект на веб-странице, разбить его на фрагменты и настроить гиперссылки.

3.     Создать форму для ввода комментария по сайту, с использованием поля ввода текста и кнопки отправки сообщения на сервер.

4.     Интегрировать созданную страницу в макет сайта, настроить на данную страницу ссылку.

7. Ход выполнения лабораторной работы

 

Добавление мультимедийного объекта

1.     Скопировать предварительно подготовленный мультимедийный файл в папку сайта.

2.     Открыть в Macromedia Dreamwever 8 файлы сайта index.html (страница запуска сайта нужна для предварительного просмотра изменений).

3.     Создаем новую страницу mult.html через команду File ® New. Обязательно нужно настроить кодировку страницы через свойства страницы (см. лаб. работу №1).

4.     Разместим файл «Умный в гору…», созданный в Macromedia Flash.

a.     Введем текст - пояснение  «Задание №1: Мультимедийный объект.».

b.     Курсор устанавливаем ниже на строку.

c.    

На панели объектов Common  выбираем объект Flash.  

d.     В окне Select file выбираем файл Ymniy_v_gory.swf . На странице появится поле объекта Flash, в нижней части экрана отобразятся свойства объекта.


5.     Для сохранения работы выполним команду file ® save all

6.     Посмотрим результат. Для этого нужно перейти на страницу index.html и нажать «F12».

 

Настройка гиперссылок на фрагментах объектов

Иногда необходимо уметь настроить ссылки на фрагменты рисунков (например, на карте при наведении курсора на регион России, можно перейти на страницу региона). Вам будет предложен файл «Цветик - семицветик», разделим его фрагментарно на лепестки и допустим, установим гиперссылки на сайты сотовых компаний MTS, BeeLine, Megafon в Хабаровске согласно цветам их логотипов.  

1.     Поместим подготовленный графический файл в папку сайта.

2.     На странице mult.html поместим графический файл. 

a.      Введем текст - пояснение  «Задание №2: Интерактивная графика.».

b.     Курсор устанавливаем ниже на строку.

c.      Выполним команду Insert ® Image.

3.    

На панели свойств графического объекта выбираем инструмент «многоугольный фрагмент» и аккуратно обводим контур красного, желтого и зеленого лепестка.

 

4.     Настраиваем для каждого лепестка свои параметры:

Цвет

Link

Target

Красный

http://www.khv.mts.ru

_blank

Желтый

http://www.khabarovsk.beeline.ru/index.wbp

_blank

Зеленый

http://www.megafondv.ru/khb/

_blank

Атрибут Target  _Blank  указывает на то, что страницы сайтов сотовых провайдеров будут открываться в новом окне браузера.

5.     Для сохранения работы выполним команду file ® save all

6.     Посмотрим результат. Для этого нужно перейти на страницу index.html и нажать «F12».

 

Создание формы для отправки сообщений

1.     Введем текст - пояснение  «Задание №3: Комментарии.».

2.     Создадим форму. 

a.    

На панели объектов Forms  выбираем объект Form.

b.     Далее внутри формы располагаем объекты Text Field (поле ввода строки) и Textarea (поле ввода многострочного текста). В окне Input Tag Accessibility Attributes в поле  Label  печатаем «Ваше имя» и для Textarea «Ваши комментарии», затем кнопка «Ок».  

 

c.     Создадим кнопку «Отправить» аналогично предыдущим объектам только поле Label не прописываем. Нажимаем кнопку «Ок». На созданной кнопке будет надпись Submit.

d.    

Выделим кнопку и на панели свойств в поле Value  печатаем «Отправить».

e.     Форма создана.

 

3.     Для сохранения работы выполним команду file ® save all

4.     Посмотрим результат. Для этого нужно нажать «F12».

 

8. Техника безопасности.

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

9. Исходные данные для работы

Макет сайта, созданный на лабораторной работе №8, папка с результатами выполнения лабораторных работ web_project.

Графический файл, мультимедийный файл созданный в Macromedia Flash (можно использовать любой другой мультимедийный объект объемом до 10 Mб).

10. Методика анализа полученных результатов.

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

11. Порядок оформления отчета по лабораторной работе и его защиты.

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

Все результаты работы размещаются в портфолио в специальной папке (web_project). Обратите внимание на то, что папка web_project создается для размещения результатов лабораторных работ, а не самого ЭУМ.

12. Рекомендации для преподавателей по проведению

Лабораторная работа проводится по подгруппам. На проведение лабораторной работы отводится 4 часа.

Занятие рекомендуется построить следующим образом:

1-е занятие

Первый этап: постановка целей занятия, описание хода проведения занятия. Примерное время – 5 минут.

Второй этап: рекомендуется на данном этапе использовать мультимедийный проектор для демонстрации примеров и образцов html-страниц, содержащих мультимедийные объекты, интерактивные элементы.

 Примерное время – 10-15 минут.

Третий этап: пошаговое выполнение слушателями заданий лабораторной работы рекомендуется осуществлять совместно с преподавателем. Действия преподавателя рекомендуется проецировать на экран или интерактивную доску, сопровождая демонстрацию комментариями. На данном этапе рекомендуется преподавателю организовать учебную деятельность слушателей по принципу «Делай, как я, делай вместе со мной». На данном этапе преподаватель выступает в роли инструктора.

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

Примерное время – 1 час.

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

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

Примерное время – 10 минут.

2-е занятия

Первый этап: постановка целей занятия, описание хода проведения занятия: на втором занятии слушатели должны по аналогии выполнить вставку мультимедийных объектов на страницы ЭУМ.

Примерное время – 5 минут.

Второй этап: работа над творческими проектами, размещение мультимедийных объектов на страницах ЭУМ. На данном этапе работа ведется индивидуально или в мини-группах, в зависимости от типа реализуемого проекта. Преподаватель на этом этапе осуществляет контроль деятельности слушателей, а также оказывает консультационную помощь.

Примерное время – 1 час 15 минут.

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

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

Примерное время – 10 минут.

 

 

Модуль 3

ЛАБОРАТОРНАЯ РАБОТА № 11

Тема: Создание тестов с помощью Macromedia CourseBuilder.

Продолжительность 4 часа

1. Учебная и воспитательная цель

Осуществить теоретическую и практическую подготовку слушателей к созданию тестовых заданий в Веб-приложении, используя бесплатное дополнение к Dreamweaver CourseBuilder. В результате проведения занятия слушатели

Ø     Смогут реализовать тестовое задание для разрабатываемых ЭУМ;

Ø     Будут иметь представление о возможностях CourseBuilder для создания тестов различного типа.

2. Вопросы (задачи), подлежащие исследованию.

Ø     Возможности дополнительного приложения CourseBuilder для создания интерактивных тестовых заданий и их интеграции в разрабатываемые ЭУМ.

3. Краткие теоретические материалы.

Пакет JavaScript-программ Macromedia CourseBuilder является дополнением к HTML-редактору Macromedia Dreamwever и предназначен для создания на HTML-страницах тестовых заданий и других интерактивных элементов. Интерактивные элементы CourseBuilder можно размещать в любом месте HTML-документа.

Для размещения интерактивного элемента CourseBuilder на HTML-странице  необходимо выполнить команду Insert ® CoursBuilder Interaction.


Диалоговое окно  CourseBuilder выглядит так:

Категории, на которые разделены интерактивные элементы:

·       Multiple-choice Interactionsэлементы с множественным выбором, на основе которых создаются тестовые задания в закрытой форме;

·       Drag-and-drop Interactionsэлементы с перетаскиванием, на основе которых создаются тестовые задания на соответствие и установление правильной последовательности;

·       Explore Interactionsэлементы с интерактивными переходами;

·       Button Interactions – элемент-кнопка;

·       Timer Interactions – элемент-таймер;

·       Slider Interactions – элемент-ползунок;

·       Action Manager Interactions – элемент управления событиями.

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

Создание тестовых заданий

Создание тестовых заданий в закрытой форме.

Для создания тестовых заданий в закрытой форме, выбирается  категория Multiple-choice. Выбрав нужный интерактивный элемент в данной категории, появятся дополнительные закладки для настройки выбранного элемента: General, Choices, Action Mgr.


Закладка General -  здесь расположены параметры, определяющие правила проверки тестового задания.

1 – поле имени интерактивного элемента, назначается автоматически. Не менять!

2 – окно для записи тестового задания;

3 – группа переключателей


4 – задание критерия правильно выполненного тестового задания:

All Correct and None Incorrect – тестовое задание будет считаться выполненным правильно, если при ответе выбраны все альтернативные варианты ответов, помеченные автором как правильные.

Any Correct and None Incorrect – тестовое задание будет считаться выполненным правильно, если будет выбран хотя бы один из альтернативных вариантов ответов, помеченный автором как правильный;

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

6,7 – ограничение количества попыток и время, отводимое на выполнение тестового задания. По умолчанию – Unlimited  (неограниченно);

8 – флажок включает в "скелет" тестового задания кнопку для приведения его в исходный вид;

9 – включение данного флажка "скелет" тестового задания разместит на отдельном слое.


Закладка Choices – предназначена для создания и изменения параметров вариантов ответов на тестовое задание.

Закладка Action Mgr – средство управления событиями интерактивных элементов CourseBuilder. На этой закладке на псевдоязыке программирования отображается программа предъявления реакции на различные действия теста: на выполнение тестового задания, на окончание количества попыток и отведенного  времени. Эти действия собраны в сегменты, которые могут быть развернуты или свернуты. Команды псевдопрограммы можно вырезать, копировать и вставлять с помощью традиционных кнопок Cut, Copy, Paste. С помощью кнопки Add в псевдопрограмму можно добавлять новые сегменты и действия, которые перечислены в списке справа от этой кнопки.

При создании тестовых заданий CourseBuilder назначает приемлемые алгоритмы обработки событий. В качестве реакции на ответ, на окончание количества попыток или отведенного времени используется небольшое диалоговое окно с сообщением (Popup Message). Сообщения появляются достаточно скупые и на английском языке, поэтому при конструировании теста их необходимо отредактировать. Для этого из списка действий надо выбрать пункт Popup Message и в зависимости от контекста изменить  текст сообщения.  Например, в случае правильного ответа вместо сообщения на английском языке: "Correct" можно ввести "Правильно" или "Ответ правильный" или другое.  Аналогично неправильный ответ: вместо "Incorrect" – "Неправильно" или "Ответ неверный". В случае если учащийся еще не дал ответ, но уже нажал кнопку "Проверить", то сообщение "Unknown Response" надо заменить на "Задание не выполнено" или "Выберите ответ".

После заполнения всех закладок, нажмите кнопку OK. После этого можно посмотреть, как выглядит тестовое задание в окне браузера.


При необходимости можно вернуться в режим редактирования тестового задания. Для этого необходимо выделить иконку       , которая расположена после тестового задания и нажать кнопку Edit…появится необходимое для изменения параметров диалоговое окно. Эту иконку также используют для копирования,  переноса или удаления соответствующей ей интерактивного элемента  CourseBuilder.

 

Создание последовательности тестовых заданий.

При создании системы тестирования тестовые задания должны быть объединены в цепочку. Первый способ создания набора тестов – самый простой – размещение их на одной странице друг за другом. В конце подводится итог. При таком построении тестирующей системы есть недостаток - невозможность контроля за порядком ответа на отдельные задания и невозможность запрета пропуска заданий.


Второй вариант организации тестирующей системы – все задания появляются по очереди друг за другом. В конце – итог.  Для организации такой цепочки требуется все задания  создать в одном файле , но на отдельном слое. Для этого, при создании отдельных заданий, необходимо устанавливать опцию Layer на закладке General. Слои можно сделать невидимыми. Для этого необходимо на панели свойств слоя для параметра Vis выбрать значение hidden:

Видимым нужно оставить только первое задание в цепочке, а все остальное спрятать. Затем необходимо организовать последовательность смены слоев. Для этого необходимо после проверки задания и предъявления реакции вставить действие Show-Hide Layrs (показать\спрятать слои).

 

 

В появившемся диалоговом окне в списке Named Layers перечислены все слои, присутствующие в документе. В этом списке нужно выделить тот слой, который нужно спрятать (т.е.слой с текущим тестовым заданием), и нажать кнопку Hide (спрятать). Слой со следующим вопросом нужно наоборот сделать видимым – его надо выделить и нажать кнопку Show (показать).

 

 

 

 

Организация подсчета и вывода результатов

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

Для того чтобы организовать вывод результата после выполнения учащимся нескольких тестовых заданий, необходимо, чтобы все задания находились в одном файле. В каждом тестовом задании, для каждого из вариантов ответов должен быть указан балл в поле Score (для элементов Multiple-choice – закладка Сhoices; для элементов Drag-and-dropзакладка Pairs)

В диалоговом окне  CourseBuilder из списка Category выбрать тип элемента Action Manager:


Появятся закладки General и Action Mgr. На закладке General необходимо организовать выполнение действий по нажатию на кнопку. Для этого необходимо выбрать соответствующий переключатель:

Остальные элементы управления оставить без изменений.

На закладке Action Mgr необходимо задать действия для вычисления интегрированной оценки.

1) Необходимо создать новый сегмент. Для этого:


 

 

 

 

 

 

Появится окно Segment Editor.  В поле Segment Name необходимо задать имя сегмента, например Segment: Result:


2) Необходимо осуществить в этом сегменте вызов диалогового окна с сообщением. Для этого:

В появившемся диалоговом окне необходимо написать текст сообщения и формулы для вычисления результатов тестирования:

 


Для примера: для теста, состоящего из 5 заданий с суммарной оценкой за каждое задание в 5 баллов, в поле Message можно написать следующее:

Вы набрали

{G01.score+G02.score+G03.score+G04.score+G05.score} баллов, что составляет

{(G01.score+G02.score+G03.score+G04.score+G05.score)*100/25}%

Здесь все математические выражения заключаются в фигурные скобки { }. G01? G02,… G05 – имена интерактивных объектов. G01.score, G02.score, G03.score, G04.score, G05.score – числовые значения, равные оценке за выполнение тестового задания.

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

Для подготовки к лабораторному занятию необходимо

Ø     Изучить теоретические и справочно-информационные материалы по теме занятия;

Ø     Разработать по теме ЭУМ систему тестовых заданий и методику их оценивания, тест, ключи к тесту и методические рекомендации подготовить в текстовом документе и сохранить в папке с рабочими материалами для ЭУМ с именем test.doc.

Ø     Челышкова М.Б. Теория и практика конструирования педагогических тестов: Учебное пособие. – М.: Логос, 2002. – 432с.

Ø     Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Adobe Dreamweaver CS3. Учебно-методическое пособие. – СПб ИТМО, 2007. – 112. Электронная версия представлена в папке «Модуль 3/ DreamweaverCS3.pdf»

5. Описание лабораторного оборудования

Класс персональных компьютеров, подключенных в локальную и глобальную сети. Программный пакет Macromedia Dreamweaver 8 и установленное приложение CourseBuilder. Проекционная техника, интерактивная доска или экран для демонстрации образцов выполнения заданий преподавателем и слушателями.

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

1.     Создать тест "Геометрические фигуры" с помощью Macromedia CourseBuilder в двух исполнениях:

1.1.  Весь тест расположить на одной странице.

1.2.  Вопросы появляются по одному.

Тест "Геометрические фигуры".

1.     Множество точек плоскости, равноудаленные от одной, образуют:

·       круг

·       окружность

·       сферу

·       шар

2.     Фигура на плоскости, состоящая из 4 сторон и 4 вершин, называется:

·       параллелограммом

·       квадратом

·       ромбом

·       четырехугольником.

3.     Квадрат, это:

·       четырехугольник с равными сторонами

·       четырехугольник с равными углами

·       прямоугольник с равными сторонами

·       ромб с равными углами

4.     Часть прямой, ограниченная двумя точками, лежащими на этой прямой, называется:

·       отрезком

·       лучом

·       осью

5.     "Две прямые не имеют общих точек и не являются параллельными". Верно ли это утверждение?

·       Да

·       Нет

2.     По аналогии создать собственный тест для ЭУМ.

7. Порядок проведения лабораторной работы.

1.     Создание теста "Геометрические фигуры",  расположенного на одной странице.

     1.1.       Создайте новую web-страницу, на которой будет размещен тест. Сделайте заголовок "Геометрические фигуры". (Не забудьте на новой странице сразу поменять кодировку с Западноевропейской на Кириллица (Windows)!)

     1.2.        Вызовите диалоговое окно CoursBuilder, для  этого выполните команду Insert ® CoursBuilder Interaction или на вкладке  CoursBuilder Interaction инструментария объектов, нажмите иконку       .

     1.3.       В диалоговом окне CoursBuilder из списка категорий выберите Multiple Choice. Выберите интерактивный элемент нужного вида, например,  который имеет условное имя MultCh_Radios.

     1.4.      

Закладку General заполнить следующим образом:

     1.5.       Закладку Choices заполнить по образцу:


вариант заполнения для правильного ответа

вариант заполнения для неправильного ответа

     1.6.      

Закладку Action Mgr не заполнять. Нажмите ОК.

     1.7.       Поместите текстовый курсор на web­-странице в самом низу – под иконкой  и повторите действия 1.2. – 1.6. для остальных тестовых заданий.

     1.8.       Организация подсчета и вывода результатов. Вызовите диалоговое окно CoursBuilder. В диалоговом окне CoursBuilder  из списка категорий выберите Action Manager.

     1.9.      

Закладку General заполнить следующим образом:

 

    1.10.      Заполнение закладки Action Mgr подробно описано для этого примера в теории выше.

    1.11.      Нажмите клавишу F12, просмотрите результат. Тестовые задания всегда можно подкорректировать. Сохраните как test-1.html

2.     Создание теста "Геометрические фигуры" вторым способом: тестовые задания появляются  по одному. Тест создадим таким способом, чтобы учащийся отвечая на вопросы имел возможность видеть сразу – правильно или неправильно ответил на вопрос.

     2.1.       Создайте новую web-страницу, на которой будет размещен тест. Сделайте заголовок "Геометрические фигуры".

     2.2.        Вызовите диалоговое окно CoursBuilder.

     2.3.       В диалоговом окне CoursBuilder из списка категорий выберите Multiple Choice.

     2.4.       Закладку General заполните как на рисунке.

     2.5.       Закладку Choices заполните как в первом примере.

     2.6.       Закладку Action Mgr немного подредактируем. Исправим текст, который будет появляться при нажатии на кнопку "проверить" с английского языка на русский:

·       Выделите первую команду Popup Message, нажмите кнопку Edit… В появившемся окне находится текст – "Correct". Исправим на "Правильно".

·       Выделите вторую команду Popup Message, нажмите кнопку Edit… В появившемся окне находится текст – "Incorrect". Исправьте на "Неправильно".

·       Выделите третью команду Popup Message, нажмите кнопку Edit… В появившемся окне находится текст – "Unknown Response ". Исправьте на "Задание не выполнено".

     2.7.       Нажмите ОК. Ваше тестовое задание будет расположено в отдельном слое, которое выделено синей рамочкой. Потянув за маркеры, придайте рамочке нужный вам размер.  Нажав клавишу F12 посмотрите результат в браузере.

     2.8.       Поместите текстовый курсор под иконкой  (или рядом) и повторите действия 2.2. – 2.7. для остальных тестовых заданий. Но эти задания делать уже невидимыми! Чтобы сделать слой невидимым необходимо на панели свойств слоя для параметра Vis выбрать значение hidden.

     2.9.       Организуйте подсчет и вывод результатов, как в первом примере, но на отдельном слое. Этот слой также сделайте невидимым.

    2.10.      После того как все слои созданы, необходимо организовать последовательность смены слоев. Для этого:

·       Правим первый слой (выделите его иконку  и нажмите Edit…) Откройте закладку  Action Mgr. Здесь необходимо вставить действие показать/спрятать слои. Для этого в списке в верхней части закладки Action Mgr необходимо выбрать действие Show-Hide Layers и нажать кнопку Add. В появившемся списке перечислены все слои, присутствующие в документе. В этом списке нужно выделить тот слой, который нужно спрятать (т.е. слой с текущим тестовым заданием), и нажать кнопку Hide (спрятать). Слой со следующим вопросом нужно наоборот сделать видимым – его надо выделить и нажать кнопку Show (показать).

·       Подобным образом исправьте  последовательно все слои.

    2.11.      Сохраните тест под именем test-2.html

8. Техника безопасности

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

9. Исходные данные для работы

Разработанная заранее слушателями система тестовых заданий для ЭУМ.

10. Методика анализа полученных результатов

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

11. Порядок оформления отчета по лабораторной работе и его защиты

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

Все результаты работы размещаются в портфолио в специальной папке (web_project). Обратите внимание на то, что папка web_project создается для размещения результатов лабораторных работ, а не самого ЭУМ.

12. Рекомендации для преподавателей по проведению занятия

Для проведения лабораторной работы необходимо заранее установить бесплатное дополнение к Dreamweaver CourseBuilder, по возможности распечатать или предоставить слушателям электронную версию руководства пользователя по работе с CourseBuilder, проверить работоспособность приложения.

Лабораторная работа проводится по подгруппам и рассчитана на 4 часа.

Занятие рекомендуется построить следующим образом:

1-е занятие

Первый этап: постановка целей занятия, описание хода проведения занятия. Примерное время – 5 минут.

Второй этап: рекомендуется на данном этапе использовать мультимедийный проектор для демонстрации примеров и образцов html-страниц, содержащих тестовые задания.

 Примерное время – 10-15 минут.

Третий этап: пошаговое выполнение слушателями заданий лабораторной работы рекомендуется осуществлять совместно с преподавателем. Действия преподавателя рекомендуется проецировать на экран или интерактивную доску, сопровождая демонстрацию комментариями. На данном этапе рекомендуется преподавателю организовать учебную деятельность слушателей по принципу «Делай, как я, делай вместе со мной». На данном этапе преподаватель выступает в роли инструктора.

Примерное время – 1 час.

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

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

Примерное время – 10 минут.

2-е занятия

Первый этап: постановка целей занятия, описание хода проведения занятия: на втором занятии слушатели должны по аналогии создать страницу с тестовыми заданиями по теме ЭУМ.

Примерное время – 5 минут.

Второй этап: работа над творческими проектами, создание тестовых заданий для ЭУМ. На данном этапе работа ведется индивидуально или в мини-группах, в зависимости от типа реализуемого проекта. Преподаватель на этом этапе осуществляет контроль деятельности слушателей, а также оказывает консультационную помощь.

Примерное время – 1 час 15 минут.

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

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

Примерное время – 10 минут.

 

Модуль 3 

Лабораторная работа № 12

Тема: Запись ЭУМ на диск (на примере программы Burn4Free)

 

Продолжительность 2 часа

 

1. Учебная и воспитательная цель. Изучение и практическое приобретение навыков записи информации на CD/DVD диски. В результате проведения занятия слушатели должны знать основные инструменты и функциональные возможности программы для записи информации на CD/DVD диски Burn4Free.

2. Краткие теоретические или справочно-информационные материалы

Burn4Free – свободно распространяемое программное обеспечение, поддерживает работу более чем с 1900 различными записывающими CD/DVD приводами. Запись осуществляется на следующих форматах дисков: CD-R/CD-RW/DVD-R/DVD+R/DVD-RW/DVD+RW/DVD-RAM. Предусмотрена возможность сохранять ISO образы (эта функция выделена отдельно; запись ISO образа осуществляется несколькими кликами мыши). Кроме того, Burn4Free поддерживает работу с различными музыкальными форматами: WAV, FLAC, WavPack, WMA, MP3, MP2, MP1 OGG и CDA, что позволяет использовать эту программу для создания музыкальных дисков.

Форматы CD  и  DVD

http://www.ultradisk.ru/info/

Если диски формата CD могут хранить только до 700 Mb, то DVD способны вместить до 17 GB информации (приблизительно в 24 раза больше).

Диски форматов CD и DVD делятся на "ROM", "R" и "RW". Это разделение основано на предназначении каждой разновидности дисков. Разновидность "ROM" - это диски, которые записываются на фабрике и сделаны только для "чтения" данных. Диски формата "R" (Read - в переводе обозначает "считывание") продаются чистыми и предназначаются для однократной записи. Диски формата "RW" (Rewritable - в переводе означает "перезаписывание") можно многократно перезаписывать. Это разделение характерно как для CD, так и для DVD.

Записываемые и перезаписываемые DVD-диски тоже делятся на два типа: "DVD-плюс" и "DVD-минус". Их аббревиатуры различаются знаками ("+" и "-") между буквами DVD и R(RW): DVD+R, DVD+RW и DVD-R, DVD-RW. Диск "DVD-минус" обладает хорошей совместимостью с DVD-проигрывателями и стоит дешевле, чем "DVD-плюс". "DVD-плюс" же - более надежен и "считывается" с большими скоростями.

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

 

CD-R (CD-Recordable): технология записи CD-данных и музыки с использованием дешевых дисков с однократной записью. Для записи диска емкостью 650 МБ требуется от 5 до 74 минут в зависимости от скорости вращения привода. CDR-приводы и носители поддерживают UDF-формат.

CD-ROM (Compact Disc Read Only Memory): формат компакт-диска используется для хранения текстовой, графической и звуковой (стерео-Hi-Fi) информации. Звуковые CD-проигрыватели не могут воспроизводить диски CD-ROM, а компьютерные CD-ROM-приводы могут воспроизводить и звуковые диски.

CD-RW (CD ReWritable): технология перезаписываемых CD. CD-RW-приводы могут также быть использованы для записи дисков CD-R и могут читать диски CD-ROM. Диски CD-RW могут быть перезаписаны более тысячи раз и читаются на универсальных (MultiRead) CD-ROM-приводах или совместимых с CD-RW звуковых CD-проигрывателях. CD-RW поддерживают UDF-формат. Сегодня имеются CD-RW с однократной и повышенной скоростями записи.

DVD (Digital Versatile Disc): появившийся в 1996 году оптический диск имеет те же самые размеры, что и CD, но значительно большую емкость: DVD-диск в зависимости от конструкции может хранить информации в 4–28 раз больше.

DVD-Audio: запущен в середине 2000 года и предназначен для записи звука, подобно формату CD-Audio. Однако поддерживает сэмплирование 16, 20 и 24 бита с различной частотой выборки от 44,1 до 192 кГц в отличие от фиксированных 16 бит и 44,1 кГц для CD. DVD-Audio-диск может также содержать музыкальные видео, графику и другую информацию.

DVD Video: популярный формат для высококачественного видео (MPEG2)
с многоканальным звуковым сопровождением (цифровым). Поддерживает множество потребительских функций, включая многоязыковое звуковое сопровождение и субтитры, многоракурсность и т.д.

DVD Forum: международная ассоциация производителей оборудования и носителей, программ и фильмов и других пользователей Digital Versatile Discs; создана в целях расширения использования и распространения идей и информации о формате и DVD. DVD Forum работает по продвижению DVD-RAM в качестве стандарта для индустрии информационных технологий и DVD-RW —
индустрии развлечений и потребительской электроники.

DVD Multi: DVD Multi — это логотип программы, которая поддерживает совместимость с DVD-RAM и DVD-RW. Это не привод, но определение методов тестирования, которые подтверждают способность привода фактически работать с дисками RAM и -RW. Основной акцент делается на возможность чтения, но не записи. Спецификации записи/воспроизведения представлены DVD Forum в июне с точки зрения использования DVD-RAM. Они должны воспроизводить диски, записанные в форматах DVD-ROM, DVD-Video, DVD-Audio, DVD-RW и DVD-R. Запись должна обеспечиваться на дисках DVD-ROM, DVD-RW и DVD-R. Производители других отраслей техники планируют поддержать эту спецификацию.

DVD-R (DVD Recordable): оригинальный диск (R/A, 635 нм) был представлен в 1998 году фирмой Pioneer, и формат общего применения (R/G, 650 нм) был принят DVD Forum’ом в 2000 году. DVD-R — формат оптической памяти с однократной записью и многократным воспроизведением, подобный CD-R. DVD-R(А) используется в качестве мастеров при производстве DVD-Video и DVD-ROM-дисков.

DVD-RAM (DVD Random Access Memory): перезаписываемый DVD-диск, который поддерживают Panasonic, Hitachi и Toshiba. В этой технологии для записи и воспроизведения данных используется диск, помещенный в картридж. Последняя версия предлагает уже диск без картриджа, но незащищенный DVD-RAM-диск очень подвержен внешним воздействиям и не гарантирует сохранности данных. Впервые DVD-RAM-привод был представлен весной 1998 года и имел емкость 2,6 ГБ (односторонний диск) или 5,2 ГБ (двухсторонний диск). Вторая версия DVD-RAM емкостью 4,7 ГБ появилась в конце 1999 года, а двухсторонняя емкостью 9,4 ГБ — в 2000 году. DVD-RAM-приводы обычно читают DVD-Video, DVD-ROM и CD-носители. Существующие компьютерные DVD-ROM-приводы и DVD-видеопроигрыватели не могут читать DVD-RAM-носители.

DVD-ROM (Read Only Memory): впервые появившийся в 1997 году этот только читаемый DVD-диск используется для хранения данных и интерактивных звуковых и видеопрограмм. Диски DVD-ROM читаются на DVD-ROM- или DVD-RAM-приводах, но не воспроизводятся DVD-видеопроигрывателями, подключенными к телевизору и домашнему кинотеатру. Однако большинство компьютерных DVD-ROM-приводов воспроизводит фильмы на DVD-Video.

DVD-RW (DVD ReWritable): перезаписываемый DVD-формат, разработанный фирмой Pioneer, очень похож на формат DVD+RW, но его возможности работать в режиме с произвольной выборкой несколько хуже. На диск можно записать до 4,7 ГБ.

DVD+RW (DVD ReWritable): разработанный совместно группой фирм (см. DVD+RW Alliance) единственный перезаписываемый формат (диск без картриджа), который обеспечивает полную совместимость с существующими DVD-проигрывателями и DVD-ROM-компьютерными приводами, как для видеозаписей в реальном времени, так и для компьютерных программ.

DVD+RW Alliance: добровольное объединение восьми фирм Dell, Hewlett-Packard, Mitsubishi Chemical, Philips, Ricoh, Sony, Thomson и Yamaha, направленное на продвижение формата DVD+RW. При этом все фирмы являются участниками DVD Forum’а.

OSTA (Optical Storage Technology Association): эта ассоциация объединяет ведущих производителей приводов для оптических дисков. Основные задачи — разработка стандартов и поддержка использования оптических носителей.

 

Диски формата CD-R

Техническая характеристика CD-R диска.

CD-R представляет собой тонкий диск из прозрачного пластика — поликарбоната — толщиной 1,2мм, диаметром 120мм (стандартный) или 80мм (мини). Ёмкость стандартного CD-R составляет 74 минуты аудио или 650МБ данных. Однако, на данный момент (2006 год) стандартным можно считать CD-R ёмкостью 702МБ данных (точнее 736 966 656 байт) или 79 минут 59 секунд и 74 фрейма. Такая ёмкость достигается небольшим превышением допусков, описанных в стандарте «Оранжевой Книги» (CD-R/CD-RW). Также на рынке имеются 90 минутные / 790МБ и 99 минутные / 870МБ диски, которые получили гораздо меньшее распространение.

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

Чистый CD-R не является полностью пустым, на нём имеется служебная дорожка с сервометками ATIP — Absolute Time In Pregroove — абсолютное время в служебной дорожке. Эта служебная дорожка нужна для системы слежения, которая удерживает луч лазера при записи на дорожке и следит за скоростью записи (т. е. следит, чтобы длина пита была постоянной). Помимо функций синхронизации, служебная дорожка также содержит информацию об изготовителе этого диска, сведения о материале записывающего слоя, длине дорожки для записи и т. п. Служебная дорожка не разрушается при записи данных на диск и многие системы защиты от копирования используют её для того, чтобы отличить оригинал от копии.

Первыми компаниями, которые начали выпуск «болванок» CD-R были Taiyo Yuden, Kodak, Maxell и TDK. С тех пор стандарт CD-R подвергался дальнейшему развитию для обеспечения всё больших скоростей записи и в настоящее время (2006) максимальная возможная скорость записи CD-R равна 52x, т. е. в 52 раза больше чем та, которая определена в стандарте «Оранжевой Книги» (1x = 150 КБ/с). Эти доработки заключаются, в основном, в новых материалах для записывающего слоя, лучшей геометрии дорожки и технологии нанесения записывающего слоя. Низкоскоростная запись 1х используется до сих пор для записи особых «аудио CD-R», т. к. записывающие деки на компакт-дисках были стандартизованы именно на эту скорость.

Чистые «болванки» CD-R имеют служебную дорожку с записанными данными. Эта дорожка содержит временные метки и используется при записи, чтобы луч лазера записывал по спиральной дорожке, как и на обычных компакт дисках. Вместо печати питов как физических углублений в материале «болванки» как в случае CD, при записи CD-R данные записываются на диск лучом лазера повышенной мощности, чтобы физически «прожечь» органический краситель записывающего слоя. Когда краситель нагревается выше определённой температуры, он разрушается и темнеет, изменяя отражательную способность «прожжённой» зоны. Таким образом при записи, управляя мощностью лазера, на записывающем слое получают чередование тёмных и светлых пятен, которые при чтении интерпретируются как питы.

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

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

CD-R, однако, можно записывать по частям, которые называют сессиями.

Используется три основных типа записывающего слоя для CD/DVD:
Цианин (англ. Cyanine) — Цианиновый краситель обладает сине-зелёным (цвет «морской волны») оттенком рабочей поверхности. Этот материал использовался в самых первых «болванках» CD-R и запатентован фирмой Taiyo Yuden. Этот краситель химически нестоек, что является причиной короткого срока гарантированного хранения записанной информации. Краситель может выцвести за несколько лет. Хотя многие производители используют дополнительные химические добавки для увеличения стабильности цианина, такие диски не рекомендуется использовать в целях резервного копирования и долговременного хранения архивных данных.
Azo — Металлизированный азо-краситель, имеет тёмно-синий цвет. Его формула запатентована фирмой Mitsubishi Chemicals. Этот краситель химически стоек и его способность хранить информацию исчисляется десятилетиями (сами фирмы пишут о 100 годах).

Фталоцианин (англ. Phthalocyanine) — Чуть более поздняя разработка активного записываемого слоя. Фталоцианин практически бесцветен, с бледным оттенком салатового или золотистого цвета, из-за чего диски на основе фталоцианинового активного слоя часто называют «золотыми». Фталоцианин — несколько более современная разработка. Диски на основе этого активного слоя менее чувствительны к солнечному свету и ультрафиолетовому излучению, что способствует увеличению долговечности записанной информации и несколько более надежному хранению в неблагоприятных условиях (фирмы утверждают о сотнях лет).

К сожалению, многие производители используют различные добавки в записывающий слой, чтобы цианиновые болванки были похожи по цвету на фталоцианиновые. Поэтому нельзя просто по цвету определить материал записывающего слоя. Также и отражающий слой «золотого» цвета не гарантирует, что это фталоцианиновый CD-R.

Существует несколько методов записи данных на CD-R:
Disc-At-Once, DAO (Диск за раз) — весь диск записывается одной сессией, от начала до конца без перерывов. Сначала на диск записывается специальная информация, обозначающая начало записи (англ. lead-in), после этого «прожигаются» данные, а затем диск «закрывается», т. е. записывается специальная последовательнось битов, которая сообщает о невозможности добавления информации на эту «болванку» (англ. lead-out). Такой способ хорошо подходит для записи концертных выступлений «вживую», без пауз между песнями, а также в качестве мастер-дисков для последующего тиражирования на заводе.

Track-At-Once, TAO (Дорожка за раз) — данные пишутся по одной дорожке (сессии) за раз и оставляется «открытым» (т. е. запись о «закрытии» диска не делается), что говорит о возможности дальнейшей записи информации на этот диск. Кроме того, это позволяет записывать аудио-диски с дополнительной «компьютерной» дорожкой. Аудио-диск сможет читаться на CD-плеере только после того, как будет записана таблица содержания (TOC - Table Of Content). После записи TOC добавление дорожек становится невозможным.

Packet Writing (Пакетная запись) — не очень распространённый вид записи, при котором диск «форматируется» и в дальнейшем на него можно записывать данные или делать ранее записанные данные «невидимыми», т. е. такой CD-R становится похожим на диски с произвольным чтением и записью. Однако при любом изменении данных (удаление, запись, изменение) на диске необходимо записывать дополнительные пакеты, и после того как все пакеты будут записаны, диск станет недоступным для дальнейших изменений — только для чтения. Поддерживается не всеми приводами, что приводит к проблемам совместимости.

Session-At-Once, SAO (Сессия за раз) — режим SAO применяется при записи формата CD-Extra. При использовании данного формата, на диске возможна запись как аудио-информации (CD-DA), так и программной части. При записи сначала «прожигаются» аудио-треки, а затем данные.

Multisession (Мультисессия) — режим записи, позволяющий в дальнейшем добавлять информацию на диск. Каждая сессия содержит информацию начала сессии (lead-in), затем данные и информацию о конце сессии (lead-out). При записи в режиме мультисессии, информация о структуре предыдущих записей копируется в новую сессию и может быть отредактирована. Таким образом, пользователь может уничтожить информацию о структуре уже ненужных или устаревших записей, не включив ее в новую таблицу содержания (TOC — Table Of Content). Есть возможность «стирать» ненужную ему информацию с компакт-диска, хотя на самом деле физически она продолжает оставаться на CD диске. Информация может быть восстановлена с помощью специального программного обеспечения.

Условия хранения и средний срок жизни записанных CD-R.

На данный момент (2006) среднее время жизни CD-R только оценивается на основании ускоренных тестов старения, т. к. данная технология оптических носителей слишком молодая и не имеет практических данных на этот счёт. Считается, что при должном уходе CD-R должны выдерживать не менее тысячи циклов чтения и хранить записанную информацию несколько сотен лет. К сожалению, некоторые общепринятые практики неправильного обращения с дисками могут уменьшить эту цифру до одного - двух лет. Поэтому, если основная цель записи — долговременное хранение информации, следует бережно обращаться с «болванками» CD-R.

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

Многие дешёвые записываемые «болванки» малоизвестных фирм, равно как и безымянные, «лысые», «технологические» болванки, имеют срок жизни порядка двух лет. Некоторые такие «болванки» более высокого качества имеют более длительный срок службы — около пяти лет. Отличить низкокачественные «болванки» от высококачественных весьма сложно, так как лишь немногие производители (например, Taiyo Yuden) заботятся о сроке жизни своих изделий. Из-за ценовых войн качество дисков часто приносится в жертву достижению как можно более низкой себестоимости.

Рекомендации по хранению и работе с «болванками» CD-R:

Хранить вертикально, каждый в отдельном футляре или слим-футляре. Находясь в них, диски не соприкасаются поверхностью с записывающим слоем о стенки футляра.

Избегать изгибания «болванки». Чтобы вынуть диск из футляра, ни в коем случае нельзя «стягивать» его за края. Вместо этого нужно нажать на шпиндель, на котором он держится, что позволит вынуть диск без усилий и изгибания.

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

Хранить в прохладном сухом месте. Оптимальная температура 5—20°C (41—68°F), влажность 30—50%. Также нежелательны резкие перепады этих значений.

Избегать прямого солнечного света. Он может нагреть футляр и диск, который в нём находится. Продолжительное воздействие прямого ультрафиолетового света (в том числе солнечного) на диск также негативно сказывается на его характеристиках. Однако, небольшие дозы рентгеновского излучения, например, при проходе контроля в аэропорту, или магнитные поля не должны оказывать существенного ущерба дискам.

Если возможно, использовать фломастеры или маркеры с водяными растворителями и мягким пером, при написании пометок на поверхности для записей. Лучшее место для пометки — это небольшое пространство на диске вокруг центрального отверстия шириной порядка одного сантиметра, обычно полностью прозрачного. Фломастеры на спиртовых растворителях считаются менее вредными для диска, чем на ксиленовых или толуоловых. Обычно перманентные маркеры делаются на основе ксилена или толуола, и поэтому использовать их для пометок на диске не рекомендуется. Многие производители выпускают фломастеры, специально разработанные для нанесения надписей на оптические носители (CD/DVD).

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

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

Контакт с водой также нежелателен для диска, особенно для «технологических» «болванок».

Очистка дисков

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

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

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

Никогда не следует использовать ацетон, растворитель лака для ногтей, керосин, бензин или другие растворители на основе нефтепродуктов. Такие агрессивные растворители могут буквально растворить сам диск или сделать его поверхность мутной и непригодной для работы. Используйте только спиртовые растворители.

Диски формата CD-RW.

Техническая характеристика.

CD-RW (Compact Disc-ReWritable, Перезаписываемый компакт-диск) — разновидность компакт-диска, разработанный в 1997 году для многократной записи информации.

CD-RW является дальнейшим развитием записываемого лазерного компакт-диска CD-R, однако, в отличие от него, позволяет не только записывать информацию, но и многократно стирать уже записанные данные. Этот формат был представлен в 1997 году, и в процессе разработки назывался CD-Erasable (CD-E, Стираемый Компакт Диск). CD-RW во многом похож на своего предшественника CD-R, но его записывающий слой изготавливается из специального сплава, который можно нагреванием приводить в два различных устойчивых агрегатных состояния - аморфное и кристаллическое. Этот сплав обычно изготавливается из серебра (Ag), индия (In), сурьмы (Sb) и теллура (Te). При записи (или стирании) луч лазера нагревает участок дорожки и переводит его в одно из устойчивых агрегатных состояний, которые характеризуются различной степенью прозрачности. Читающий луч лазера имеет меньшую мощность и не изменяет состояние записывающего слоя, а чередующиеся участки с различной прозрачностью формируют картину аналогичную питам и площадкам обычных штампованных CD.

"Болванки" CD-RW позволяют перезаписывать информацию порядка 1000 раз. За исключением возможности стирать записанную информацию, для пользователя работа с "болванками" CD-RW очень похожа на работу с однократно записываемыми CD-R. Данные записываются сессиями, можно дописывать новые файлы и "прятать" уже записанные. С каждой новой сессией свободное место на диске уменьшается, и когда оно закончится, можно будет полность стереть информацию со всего диска или её часть, после чего он вновь будет доступен для записи новой. Позднее появился новый формат записи болванок CD-RW - Universal Disk Format (UDF, Packet Writing), который скрывает от пользователя технические сложности и позволяет "отформатировать" "болванку" и работать с ней как с обычной большой дискетой доступной на чтение/запись/удаление/изменение. Объём таких UDF форматированный болванок равен примерно 530МБ, в отличие от обычных 700МБ при записи сессиями (точнее, записать 700МБ можно только одной сессией на весь диск).

Записанный CD-RW не полностью удовлетворяет требованиям, описанным в стандартах «Red Book» (CD-ROM) и «Orange Book Part II» (CD-R) - конкретнее, они имеют более слабый отражённый сигнал. И поэтому такие диски не читаются в старых приводах компакт дисков, выпущенных до 1997 года. CD-R считается более подходящим стандартом носителей для резервного копирования, т.к. записанная на них информация уже не может быть изменена и производители "болванок" указывают большее время хранения данных для дисков CD-R, чем для CD-RW.

При обычной записи на CD-RW - не UDF, периодически нужно полностью стирать диск. Существует два вид стирания – «полное» и «быстрое». Как следует из названия, при «полном» стирании вся информационная дорожка перезаписывается, грубо говоря, нулями, и старая информация уничтожается. А «быстрое» стирание очищает только небольшую часть диска с начала, что происходит гораздо быстрее, но существует техническая возможность восстановить данные. Поэтому если есть необходимость сохранения конфиденциальности информации, то нужно использовать полное стирание.


Диски формата CD-ROM.

Компакт-диск («CD», «CD-ROM», «КД ПЗУ») — оптический носитель информации в виде диска с отверстием в центре, информация с которого считывается с помощью лазера. Изначально компакт-диск был создан для цифрового хранения аудио (т. н. Audio-CD), однако в настоящее время широко используется как устройство хранения данных широкого назначения (т. н. CD-ROM). Аудио-компакт-диски по формату отличаются от компакт-дисков с данными и CD-плееры обычно могут воспроизводить только их (на компьютере, конечно, можно прочитать оба вида дисков). Встречаются диски, содержащие как аудиоинформацию, так и данные — их можно и послушать на CD-плеере, и прочитать на компьютере. С развитием mp3 производители бытовых CD-плееров и музыкальных центров начали снабжать их возможностью чтения mp3-файлов с CD-ROM’ов.

Аббревиатура «CD-ROM» означает «Compact Disk Read Only Memory» и обозначает компакт-диск как носитель информации широкого применения (в отличие от аудио-компакт-диска). «КД ПЗУ» означает «Компакт-диск, постоянное запоминающее устройство». CD-ROM’ом часто ошибочно называют привод для чтения компакт-дисков.

 

Диски формата DVD-R/RW.

Техническая характеристика DVD-R диска

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

Вся информация на DVD хранится в файловой системе MicroUDF (Micro Universal Disk Format). Ее официально утвердили в 2000 году. MicroUDB поддерживает носители большой емкости и файлы больших размеров. Имена файлов записываются в формате unicode, что обеспечивает совместимость DVD со всеми операционными системами для ПК, а также с разнообразной бытовой техникой.

Существенным отличием DVD от CD является возможность двухслойной записи дисков. На одном одностороннем диске (бывают и двухсторонние, с информационной поверхностью на каждой стороне) можно хранить в два раза больше информации. Оба слоя имеют отражающую поверхность, только один из них обладает высокой прозрачностью (до 40%). При записи/чтении луч просто меняет фокусировку, что позволяет не попадать на оба слоя одновременно.

Более высокой емкости DVD-диски обязаны не только возможностью двухслойной записи дисков, но и большей плотностью записи информации. Более высокая плотность записи была достигнута за счет уменьшения расстояния между информационными дорожками на спирали. Это расстояние у CD-дисков составляет 1,6 мкм. У дисков DVD - 0,74 мкм. Объем DVD-дисков, в зависимости от их конкретного типа, может быть от 4,7 до 17 Гб.

Типы DVD:

DVD по структуре данных бывают трёх типов:

Ø     DVD-Video — содержат фильмы (видео и звук);

Ø     DVD-Audio — содержат аудиоданные высокого качества (гораздо выше, чем на аудио-компакт-дисках);

Ø     DVD-Data — содержат любые данные.

DVD как носители бывают четырёх типов:

Ø     DVD-ROM — штампованные на заводе диски;

Ø     DVD+R/RW — диски однократной (R — Recordable) и многократной (RW — ReWritable) записи;

Ø     DVD-R/RW — диски однократной (R — Recordable) и многократной (RW — ReWritable) записи;

Ø     DVD-RAM — диски многократной записи с произвольным доступом (RAM — Random Access Memory).

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

·       однослойные односторонние (DVD-5) вмещают 4,7 гигабайта информации,

·       двухслойные односторонние (DVD-9) вмещают 8,7 гигабайта информации,

·       однослойные двусторонние (DVD-10) вмещают 9,4 гигабайта информации,

·       двухслойные двусторонние (DVD-18) вмещают 17,4 гигабайта информации.

Вместимость можно определить на глаз — нужно посмотреть, сколько рабочих (отражающих) сторон у диска и обратить внимание на их цвет: двухслойные стороны обычно имеют золотой цвет, а однослойные — серебряный, как компакт-диск. Любой из носителей может иметь любую структуру данных (см. выше) и любое количество слоёв (двухслойные DVD-R и DVD-RW появились в конце 2004 года).

Стандарт записи DVD-R(W) был разработан DVD-Forum’ом как официальная спецификация (пере)записываемых дисков. Однако цена лицензии на эту технологию была слишком высока, и поэтому несколько производителей пишущих приводов и носителей для записи объединились в «DVD plus RW Alliance», который и разработал стандарт DVD+R(W), стоимость лицензии на который была ниже. Поначалу «болванки» (чистые диски для записи) DVD+R(W) были дороже, чем «болванки» DVD-R(W), но теперь цены сравнялись.

Стандарты записи «+» и «-» частично совместимы. В настоящее время они одинаково популярны — половина производителей поддерживает один стандарт, половина — другой. Идут споры, вытеснит ли один из этих форматов своего конкурента или они продолжат мирно сосуществовать. Все приводы для DVD могут читать оба формата дисков, и большинство пишущих приводов также могут записывать оба типа «болванок».

В отличие от компакт-дисков, в которых структура аудиодиска фундаментально отличается от диска с данными, в DVD всегда используется файловая система UDF.

Скорость чтения/записи DVD указывается кратной 1350 Кб/с, то есть 16-скоростной привод обеспечивает чтение (или запись) дисков в 16 ? 1350 = 21600 Кб/с (21,09 Мб/с).

Региональная привязка DVD.

Киностудии заинтересованы в контроле над распространением своих фильмов, выпущенных на DVD, в разных странах. Это обусловлено тем, что время выхода фильмов в кинотеатре и время выхода их в широкий видеопрокат в разных странах разные. Принято считать, что в видеопрокат кино должно выходить только после того, как пройдёт его премьера в кинотеатрах. Так, например, фильм, вышедший в видеопрокат в США, может только начать показываться в кинотеатрах Европы, что нарушает это правило.

Именно поэтому при утверждении стандарта DVD был введён код, ограничивающий использования диска DVD-Video в пределах одной зоны.

Таким образом, диску DVD-Videо и DVD-проигрывателю присваивается региональный код. И если при проигрывании диска эти коды не совпадают, фильм воспроизводиться не будет.

Региональная защита является опциональной и может быть использована по усмотрению изготовителя диска. Она не является какой-либо криптографической системой, а всего лишь одним байтом в заголовке диска, который проверяется перед началом воспроизведения диска. DVD-плеер может иметь несколько региональных кодов, в этом случае он может проигрывать диски нескольких разных «зон». Многие китайские плееры вообще игнорируют региональную защиту.

Всего было введено 8 региональных зон:

Код

Территория

0

Универсальный код для воспроизведения во всех регионах.

1

Бермуды, Канада, США

2

Западная Европа, Центральная Европа, Средний Восток, Египет, Гренландия, Япония, Лесото, Южная Африка, Швейцария

3

Восточная Азия, Гонконг, Макау, Южная Корея, Тайвань

4

Центральная Америка, Острова Тихого Океана, Южная Америка, Мексика, Австралия, Новая Зеландия

5

Африка, Восточная Европа, Южная Азия, Монголия, Северная Корея,

6

Китай

7

Зарезервировано для использования в будущем

8

Для специального международного использования (самолёты, круизные лайнеры и т.п.)

Снять ограничение можно редактированием прошивки (firmware) привода, что однако ведёт к потере гарантии. Обычно при прошивке код региона меняется на 0. Однако существуют DVD диски с особой проверкой кода региона, которые не могут быть воспроизведены с кодом такой зоны. DVD плееры с изменяемой DVD зоной могут решить эту проблему (обычно смена возможна только до 5 раз, дальше менять можно только после перепрошивки firmware).

Такая защита используется только в дисках DVD-Video.


Диски формата Blu-Ray Disc.

Blu-ray Disc или сокращённо BD (от англ. blue ray — голубой луч и disc — диск) — это следующие поколение формата оптических дисков — используемый для хранения видео высокой чёткости (с разрешением 1920X1080 точек) и данных с повышенной плотностью.

Стандарт Blu-ray был совместно разработан группой компаний по производству бытовой электроники и компьютеров во главе с Sony, которые вошли в Ассоциацию Blu-ray дисков (BDA). По сравнению со своим основным конкурентом, форматом HD DVD, Blu-ray имеет бо?льшую информационную ёмкость на слой — 25 вместо 15 гигабайт, но в тоже время он более дорогой в использовании и поддержке.

Blu-ray (букв. «голубой-луч») получил своё название от коротковолнового 405 нм «синего» (технически сине-фиолетового) лазера, который позволяет записывать и считывать намного больше данных, чем на DVD, который имеет те же физические объёмы, но использует для записи и воспроизведения красный лазер большей длины волны (650 нм).

На международной выставке потребительской электроники Consumer Electronics Show (CES), которая прошла в январе 2006 года, было объявлено о том, что коммерческий запуск формата Blu-ray пройдёт весной 2006 года.

Техническая характеристика BD.

Односторонний диск Blu-ray (BD) может хранить 23.3, 25, или 27 Гб — этого объёма достаточно для записи приблизительно четырёх часов видео высокой чёткости со звуком. Двухслойный диск может вместить 46.6, 50, или 54 Гб — достаточно для записи на него приблизительно восьми часов HD-видео. Также в разработке находятся диски вместимостью 100 Гб и 200 Гб с использованием соответственно четырёх и восьми слоёв. Корпорация TDK уже анонсировала прототип четырехслойного диска объёмом 100 Гб.

Стандарт BD-RE (перезаписываемые BD) будет доступен наравне с BD-R (записываемые) и BD-ROM форматами. Почти все производители оптических носителей заявили о готовности выпустить в продажу перезаписываемые и записываемые диски одновременно с выходом формата BD-ROM на рынок.

В дополнение к стандартным дискам размером 12 см, будут выпущены варианты дисков размером 8 см для использования в цифровых фото- и видеокамерах, планируется что их объём будет 15 Гб для двухстороннего варианта.

В таблице ниже приведены размеры текущих и запланированных на ближайшее время дисков формата Blu-Ray.

Физический
размер

Однослойная
вместимость

Двухслойная
вместимость

12 см

23.3/25/27 Гб

46.6/50/54 Гб

8 см

7.8 Гб

15.6 Гб

В технологии Blu-ray для чтения и записи используется сине-фиолетовый лазер с длиной волны 405 нм. Обычные DVD и CD используют красный и инфракрасный лазеры с длиной волны 650 нм и 780 нм соответственно.

Такое уменьшение позволило сузить дорожку вдвое по сравнению с обычным DVD-диском — до 0,32 микрон — и увеличить плотность записи данных.

Более короткая длина волны сине-фиолетового лазера позволяет хранить больше информации на 12 см дисках того же размера, что и у CD/DVD. Эффективный «размер пятна» на котором лазер может сфокусироваться ограничен дифракцией и зависит от длины волны света и числовой апертуры линзы используемой для его фокусировки. Уменьшение длины волны, использование большей числовой апертуры (0,85, в сравнении с 0,6 для DVD), высококачественной двухлинзовой системы, а также уменьшение толщины защитного слоя в шесть раз (0,1 мм вместо 0,6 мм) предоставило возможность проведения более качественного и корректного течения операций чтения/записи. Это позволило записывать информацию в меньшие точки на диске, а значит, хранить больше информации в физической области диска, а также увеличить скорость считывания до 36 Мбит/с. В дополнение к оптическим улучшениям диски Blu-ray также имеют улучшенную технологию кодирования данных, позволяющую хранить больший объём информации.

Технология твёрдого покрытия.

Из-за того, что на дисках Blu-Ray данные расположены слишком близко к поверхности, первые версии дисков были крайне чувствительны к царапинам и прочим внешним механическим воздействиям из-за чего они были заключены в пластиковые картриджи. Этот недостаток вызывало много неуверенности относительно того сможет ли формат Blu-ray противостоять стандарту HD DVD — своему основному конкуренту. HD DVD помимо своей более низкой стоимости может нормально существовать без картриджей, также как форматы CD и DVD, что делает его более понятным для покупателей, а также более интересным для производителей и дистрибьюторов, которые могут быть обеспокоены дополнительными затратами из-за картриджей.

Решение этой проблемы появилось в январе 2004, с появлением нового полимерного покрытия, которое дало дискам невероятную защиту от царапин и пыли. Это покрытие, разработанное корпорацией TDK, получило название «Durabis», оно позволяет очищать BD при помощи бумажных салфеток — которые могут нанести повреждения CD и DVD. Формат HD DVD имеет те же недостатки, так как эти диски производятся на основе старых оптических носителей. По сообщению в прессе «голые» BD с этим покрытием сохраняют работоспособность даже будучи поцарапанными отвёрткой.


Диски формата HD DVD.

HD DVD (англ. High Definition DVD — DVD высокой чёткости) — технология записи от компании Toshiba (в содружестве с компаниями NEC и Sanyo). HD DVD подобен соперничающей технологии Blu-ray Disc, которая также использует такие же диски стандартного размера (120 миллиметров в диаметре) и синий лазер с длиной волны 405 нанометров. К альянсу HD DVD присоединились Microsoft и Intel, а также возможна неэксклюзивная поддержка трёх основных киностудий: Paramount Pictures, Universal Studios и Warner Bros.

Однослойный HD DVD имеет ёмкость 15 GB, двухслойный — 30 GB. Toshiba также анонсировала трёхслойный диск, который будет хранить 45 GB данных. Это меньше, чем ёмкость основного соперника Blu-ray, который поддерживает 25 GB на один слой и 100 GB на четыре слоя, но защитники HD DVD утверждают, что многослойные диски Blu-ray ещё до сих пор в разработке. Оба формата обратно совместимы с DVD и оба используют одни и те же методики сжатия видео: MPEG-2, Video Codec 1 (VC1, базируется на формате Windows Media 9) и H.264/MPEG-4 AVC. HD DVD часто неправильно пишется «HD-DVD», так как люди думают, что это название аналогично предыдущему поколению «DVD-R/RW».

Blu-ray Disc или сокращённо BD (от англ. blue ray — голубой луч и disc — диск) — это следующие поколение формата оптических дисков — используемый для хранения видео высокой чёткости (с разрешением 1920?1080 точек) и данных с повышенной плотностью.

Стандарт Blu-ray был совместно разработан группой компаний по производству бытовой электроники и компьютеров во главе с Sony, которые вошли в Ассоциацию Blu-ray дисков (BDA). По сравнению со своим основным конкурентом, форматом HD DVD, Blu-ray имеет большую информационную ёмкость на слой — 25 вместо 15 гигабайт, но в тоже время он более дорогой в использовании и поддержке.

Blu-ray (букв. «голубой-луч») получил своё название от коротковолнового 405 нм «синего» (технически сине-фиолетового) лазера, который позволяет записывать и считывать намного больше данных, чем на DVD, который имеет те же физические объёмы, но использует для записи и воспроизведения красный лазер большей длины волны (650 нм).

Диски формата HVD

Голографический диск (Holographic Versatile Disc) — это улучшенная технология производства оптических дисков, до сих пор находящаяся в разработке, которая значительно увеличит объём хранения данных по сравнению с Blu-ray и HD DVD. Она использует технологию известную как голография, которая использует два лазера, один — красный, а второй — сине-зелёный, коллимирующие в один луч. Сине-зелёный лазер читает данные, закодированные в виде сетки с голографического слоя близкого к поверхности диска, в то время как красный лазер используется для чтения серво-сигналов с регулярного CD-слоя в глубине диска. Серво-информация используется для отслеживания позиции чтения, наподобие системы CHS в обычном жёстком диске. На CD или DVD эта информация внедрена в данные.

Эти диски имеют информационную ёмкость до 3.9 терабайт (TB), что сравнимо с 6000 CD, 830 DVD или 160 однослойными дисками Blu-ray. HVD также имеет скорость передачи данных 1 Гбайт/сек. Optware собирается выпустить 200GB диск в начале июня 2006 года и Maxell в сентябре 2006 с ёмкостью 300GB.

Структура голографического диска (HVD)

1. Зеленый лазер чтения/записи (532nm)
2. Красный позиционирующий/индексный лазер (650nm)
3. Голограмма (данные)
4. Поликарбонатный слой
5. Фотополимерный (рhotopolimeric) слой (слой содержащий данные)
6. Разделяющий слой (Distans layers)
7. Слой отражающий зеленый цвет (Dichroic layer)
8. Алюминиевый отражающий слой (отражающий красный свет)
9. Прозначная основа
P. Питы (PIT)

Виды печати по дискам  

На данный момент на рынке технологий представлены следующие виды печати на поверхности дисков формата CD/DVD-R:

Офсетный способ печати.

Шелкография.

Термопечать на CD/DVD-R дисках.

Струйная печать (Ink-Jet) на CD/DVD-R дисках.


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

Термопечать на CD, DVD дисках.

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

Важнейшим преимуществом CD, DVD термопринтеров над струйными является то, что практически все они могут печатать на любых компакт-дисках, не нуждаясь в особых покрытиях, а так же высокая влагостойкость и долговечность полученных изображений.
Струйная печать ( Ink-Jet) на CD, DVD дисках.

Это самый качественный и быстрый способ печати на CD, DVD – дисках, идеально подходящих также для создания небольших тиражей. При использовании данного метода становится возможным точное отображение фотографий с мелкими элементами, сложного орнамента или мелкого текста.

Струйная печать возможна не на любых, а только на специальных, «печатаемых» CD/DVD дисках, имеющих микрошероховатое покрытие (Ink-Jet Printable), хорошо впечатывающее чернила, распыляемые печатающей головкой. Попытка печатать на болванках, на упаковках которых не написано «Printable», даже если внешне они для печати вроде бы и подходят, скорей всего закончатся плачевно: капельки чернил не смогут впитаться в поверхность диска и «расползутся» по сторонам, едва он будет вставлен в дисковод. Кроме того, отпечатанная поверхность очень чувствительна к влаге. Для закрепления изображения диски можно покрыть специальным лаком или ламинировать, при этом поверхность диска становиться глянцевой. Однако многих потребителей, особенно «печатающих» диски для личного использования, вполне устраивает изображение и без закрепления лаком.

 

3. Рекомендации студентам по подготовке к лабораторной работе

Ø     Для подготовки к лабораторной работе ознакомьтесь с домашней страницей программы Burn4Free  - http://www.burn4free.com/, файлом справки;

Ø     Ознакомьтесь с теоретическими и справочно-информаицонными материалами по теме занятия;

Ø     Подготовьте полный пакет ЭУМ, проверьте правильность размещения всех страниц ЭУМ в рабочем каталоге;

Ø     Проверьте работоспособность разработанного программного приложения ЭУМ;

Ø     Подготовьте файлы графических изображений, созданных для нанесения на диск и обложку диска;

Ø     Подготовить чистый CD или DVD-диск (в зависимости от объема данных ЭУМ), желательно с печатной основой, конверт или пластиковую упаковку для диска.

4. Описание лабораторного оборудования

Класс персональных компьютеров, имеющие приводы для записи дисков. Программный продукт Burn4Free.

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

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

Основные этапы выполнения записи диска

-            Подготовка файлов и папок для записи на диск

-            Запустить программу

-            Вставьте в привод диск

-            Добавление файлов и папок в рабочую область

-            Запись диска

6. Ход выполнения лабораторной работы

Пример записи информации на CD/DVD диски

1.     Подготовьте файлы и папки для записи на диск. Убедитесь, что в папках отсутствуют временные файлы. Если Вы планируете автоматический запуск диска, то создайте в блокноте текстовый файл Autorun.inf со следующим содержимым:

[autorun]

OPEN="explorer.exe index.html"

В этом случае, при каждом запуске диска автоматически будет запускаться Internet Explorer (или другой браузер) и открываться файл index.html.

 

2.     Запустите программу записи на диск Burn4Free. Для этого зайдите в меню Пуск, выберите последовательно пункты Программы -> Burn4Free CD and DVD -> Burn4Free

После выполненных действий откроется главное окно программы.