ТГПУ Центр новых образовательных технологий семинар

ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Модуль 2(часть №1)Создание страниц книги с помощью визуального редактора NVU
Настройка панели инструментов программы NVU.
Запускаем программу двойным щелчком мыши на значок
. Сразу после запуска
программы перед нами рабочее пространство: наверху – панель управления с меню,
кнопками вызова нужных команд.
Все кнопки – стандартные для windows-приложений. Наведя курсор на кнопку, получим
подсказку – что этой кнопкой делается. Можно легко добавить кнопки «Копировать» и
«Вставить». Щелчок правой кнопкой мыши по свободной части панели вызовет
всплывающее меню только с одной командой – «Настроить».
Щелчок по ней левой кнопкой мыши откроет окно, в котором можно выбрать, каких кнопок на
панели инструментов нам не хватает.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Кнопки можно добавлять, удалять, передвигать на панели туда, где кажется удобным их
расположение. Можно выбрать режим отображения – только сами значки, значки с текстом
или только текст. Кнопка «Готово» сохранит изменения. Кнопка «По умолчанию» вернет
панель инструментов в исходное состояние.
Наша книга будет состоять из нескольких страниц. Это будут страницы с текстовым
материалом, рисунками, возможно, со звуком или видео. Все это нужно будет сохранить в
одном месте.
1. Создайте папку для вашего будущего учебника. Папка может размещаться там, где
вы обычно храните документы: в «Мои документы» или на рабочем столе. Название
папки – латиницей, маленькими буквами – например: Manual. Можно папку назвать и
на русском, NVU это позволяет. Но в этом случае, при загрузке готового учебника в
интернет есть шанс получить «крокозябры» в названиях. Чтобы их избежать и не
переименовывать потом вручную нечитаемые названия, лучше сразу напишем
латиницей.
2. В папке Manual создаем еще одну, где будем помещать рисунки и другие файлы,
которые будем использовать. Название этой папки - Pictures (рисунки) – так же
латиницей.
Можно их подготовить и загрузить в эту папку заранее, а можно
добавлять по мере необходимости.
Назначение основных инструментов и их применение для создания страниц.
Рассмотрим внимательнее рабочее пространство: оно разделено на два окна, оба пока
пустые. В правой части будем работать, поэтому окно больше. Левое окно – меньше, это –
менеджер сайтов. Наш учебник тоже будет иметь структуру обычного сайта. С главной
страницей, с навигацией. Если левого окна нет, то вероятно вы нечаянно его закрыли.
Заходим в меню Вид -Показать/Скрыть.
Здесь стоят галочки у тех элементов, которые показаны на экране. Менеджер сайтов последняя строка. Если здесь нет галочки - щелкаем левой кнопкой мыши по пункту меню,
окно
Менеджера появится. Можно
в Меню
не заходить, а воспользоваться
функциональной клавишей F9.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Щелкнув по кнопке «Редактировать сайты» увидим окно, где в самую верхнюю строку
введем название нашей будущей книги.
Информацию о сервере не заполняем – она нужна в случае, когда создаваемые страницы
сразу из программы предполагается загружать на сервер. Мы не будем этого делать. С
помощью кнопки «Выбрать директорию» указываем путь к папке, которую создали для
нашей книги. Пользователь-пароль нам не нужны, жмем Ok
Название нашего учебника появилось в панели менеджера сайтов. Слева от него – плюсик.
Щелчок по нему левой кнопкой мыши развернет структуру нашего каталога. В каталоге пока
только одна вложенная папка.
Научимся создавать страницы сайта. Прежде чем начнем создавать страницы, поменяем
кодировку. Считаю, что лучше будет с кодировкой UTF-8 – ее и установим. Если оставить ту,
что по умолчанию – Windows-1251 –ничего страшного не произойдет. Потому, если решили
следовать совету преподавателя, то изменим кодировку страницы: Заходим в меню Вид-
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Кодировка. Затем выбираем Юникод (UTF-8). Это стандартная кодировка, потому будет
корректно отображаться в любом браузере.
Инструменты верхней панели знакомы всем, они такие же как инструменты Office, нижнюю
часть правого окна рассмотрим: внизу расположены вкладки представления нашей
страницы(«обычный», «html-теги», «код») и предварительный просмотр страницы в
браузере
Перейдя на вкладку «Код», увидим
Вернемся в Обычный режим, продолжим работу.
Простая табличная верстка. Создание новых страниц.
Для правильного отображения содержимого окна в браузере лучше всего подходит
табличная структура содержимого.
Щелчком левой кнопки таблицы по значку вставки таблицы (или через меню Вставка Таблица) переходим к первичной настройке таблицы.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Сразу перейдем на вкладку Точная и сделаем точный выбор – Нам нужно 5 строк, 1
столбец. Ширину таблицы зададим в процентах – тогда в зависимости от выбранного
разрешения экрана, наша таблица сожмется или растянется – она будет «резиновой».
Рамка таблицы нам не нужна – поставим значение 0.
Для того, чтобы задать поля для содержимого нашей таблицы перейдем на вкладку
«Ячейка» и поставим отступ от границ ячеек и расстояние между соседними ячейками по 5
px. В строках нашей таблицы выравнивание будет задано различное, потому здесь
оставляем значение «Не определено».
Теперь – Ok, таблица появилась в рабочем окне. Сейчас она сдвинута влево – по
умолчанию все содержимое страницы выравнивается по левому краю. Для выравнивания
по центру дважды щелкнем левой кнопкой в любом месте таблицы, появится меню
«Свойства таблицы»
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Выберем вкладку «таблица». В открывшемся окне выберем выравнивание по центру. Здесь
же можно выбрать цвет фона таблицы. Или оставить так, как есть – таблица будет
прозрачной.
Вернемся на вкладку «Ячейки». Наша таблица состоит из строк. В выпадающем меню в
модуле «Выделение» в выпадающем меню выбираем «Строки».В случае на рисунке в
настоящий момент выделена нижняя строка – именно в ней мы щелкнули левой кнопкой
мыши, когда переходили к свойствам таблицы. Для этой строки зададим выравнивание
содержимого как на рисунке – горизонтальное – влево, вертикальное – посередине.
Нажимаем кнопку «Применить»
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Переходим к предыдущей строке. Жмем на кнопку
в окне «Свойства таблицы»
Область выделения в таблице при этом переместится на одну строку выше. Здесь зададим
оба отступа по центру и посередине. Ставим галочки в окошки, нажимаем – Применить.
Снова Жмем на кнопку
влево. Применяем изменения.
Ставим выравнивание как в нижней строке – посередине и
Еще раз жмем на кнопку
. Снова – посередине и по центру. Применяем изменения.
Переходим в верхнюю строку. Выравниваем содержимое горизонтально вправо,
вертикально – посередине.
Теперь – Ok, наша таблица по горизонтали сместилась в центр. Вертикальное
выравнивание для всей таблицы задавать не будем – по умолчанию таблица будет
смещена к верхнему краю.
Еще раз рассмотрим наши пять строк.
1. На верхней строке мы поместим логотип или заголовок нашего учебника, а может
быть и то и другое. Выравнивание – вправо, посередине .
2. Во второй будет заголовок страницы. Выравнивание по центру.
3. В третьей строке поместим основное содержимое (текст, рисунки, схемы, видео).
Выравнивание поставим, когда будем размещать содержимое.
4. В четвертой будет находиться навигационный блок, предусмотрим возможность
быстрого перехода между страницами нашего учебника. Выровняли по центру.
5. В самой нижней строке, как обычно, копирайт. Выровняем по левому краю.
Наполнение содержанием(текст, картинки, анимация)
В «Обычном режиме» с таблицей можно работать так же, как любом другом редакторе,
никакие коды-команды нам не понадобятся.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
В верхнюю ячейку вставляем логотип. Это рисунок (конечно, придуман, нарисован и
помещен в папку он должен быть заранее). Вставляется рисунок через меню Вставка Изображение или щелчком левой кнопки мыши по значку в панели инструментов.
Наше изображение должно находиться в папке, которую мы создавали специально для
рисунков. С помощью кнопки Выбрать файл указываем к нему путь.
Если мы хотим, чтобы при наведении курсора на изображение появлялась какая-то
подсказка – ее текст вводим в соответствующее поле. В случае с логотипом это не нужно.
Альтернативный текст – это описание изображения, текст, который будет выводиться на
экран вместо рисунка при невозможности отобразить. Если такой альтернативный текст мы
показывать не хотим – ставим метку – Не использовать альтернативный текст. Вместо
рисунка в таком случае будет показана только рамка, обозначающая его положение на
странице.
Если на рисунке размер изображения не задан, то используется исходный. При
необходимости можно жестко задать размер изображения. Для этого – вторая вкладка в
окне настроек. Размер можно и не задавать цифрами – можно потом просто увеличить или
уменьшить рисунок, как делаем это обычно – сдвинуть его границы уже в ячейке, размер в
пикселях будет прописан в соответствующие поля автоматически.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
На вкладке Внешний вид можно задать отступы рисунка от границ ячейки или текста. Пока
нам это не нужно, мы уже задали поля для всех ячеек таблиц. А при размещении рисунков в
тексте к этой вкладке мы еще обратимся.
Последняя вкладка в этом окне дает возможность привязать ссылку к изображению. Это
может быть ссылка на какой-то сайт, как в случае на рисунке, на файл, на конкретное место
на текущей странице или на другую страницу нашей книги. К логотипу, конечно, привязывать
что-то, кроме ссылки на сайт, вряд ли уместно. Применительно к рисункам в тексте –
поговорим подробнее, когда будем их вставлять.Нажимаем Ok, наш рисунок появился в
верхней ячейке. Он смещен вправо, как мы и задали.
Во второй строке будет заголовок страницы. Для заголовка нужно задать тип и размер
шрифта. Идем в меню Формат - Шрифт. Теоретически мы можем выбрать любой из
имеющихся шрифтов в списке, лишь бы он кириллицу поддерживал. А практически следует
иметь ввиду, что выбранный нами какой-нибудь красивый шрифт типа AnastasiaScript - или
Venski Sad Two - может быть не установлен в компьютере ученика и заголовок у него
будет отображаться совершенно иначе.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Для заголовков уместны шрифты с засечками, а для основного текста – без засечек, т.к.
читать с экрана удобнее именно его – глаз не «цепляется» за лишние черточки. И размер –
не меньше 12 пунктов для основного текста, не меньше 16 для заголовков страниц, не
меньше 14 для заголовков в тексте. При этом для печатного текста рекомендации
разворачиваются наоборот – легче и проще читается текст, набранный шрифтом с
засечками. Текст должен быть хорошо читаем и контрастность цветов фона и текста не
должна раздражать.
Мы взяли для заголовка шрифт Bookman Old Style в полужирном начертании, для
основного текста выбрали Verdana. Настроим величину шрифта с помощью инструментов
Увеличения и Уменьшения
В четвертой строке сделаем навигационную панель. Для этого в строку вставим таблицу из
одной строчки и трех столбцов. В ячейках напишем: Предыдущая, Содержание,
Следующая. Здесь будут ссылки на соответствующие страницы, подбираем нужный шрифт
и его размер. В последней строке обозначим авторство. В классическом варианте строка
будет такой - © 2010. Имя автора. С активной ссылкой на сайт автора или на электронный
адрес, по которому с автором можно связаться. Активная ссылка – это ссылка, по которой
можно перейти, щелкнув по ней мышкой. Значок копирайта вставляется Вставка- Буквы и
символы . Можете скопировать значок из этой лекции.
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
Сейчас границы таблицы выделены красным. Это – только рамка для удобства работы. В итоговом
варианте в браузере границы не будут видны. Фон страницы можно оставить белым, а можно
использовать в качестве фона картинку, текстуру, просто задать фон цветом.Для этого нужно зайти в
меню Формат - Цвета и фон страницы.
На этой странице определяем цвет основного текста, цвета ссылки в обычном, активном
(при наведении курсора) и посещенном виде. Для выбора цвета нужно нажать на кнопку с
цветным прямоугольником. Откроется палитра доступных цветов. Можно выбрать
стандартный, а можно задать цвет с помощью кода Фон самой страницы задается здесь же.
Если это будет какой-то цвет – он выбирается из предложенной палитры. А можно
использовать любое изображение. Кнопка Выбрать файл поможет указать к нему путь.
Рисунок должен находиться в той же папке рисунков. Жмем на кнопку нижней панели
«Предварительный просмотр»
Очень полезный сайт http://www.lenagold.ru/ , большое количество рисунков, фонов, тем.
Если что-то в виде страницы нас не устраивает – возвращаемся к настройкам цвета и фона.
Заходим в меню Формат - Заголовок и свойства страницы. Здесь проверяем кодировку
выбираем UTF-8, выбираем русский язык. В поле автор вносим свои имя и координаты,
заполняем поле Описание. Заголовок мы впишем при сохранении страницы. Пока это поле
оставим пустым. Здесь же можно отметить, что эта страница – шаблон. То есть на ее
ТГПУ Центр новых образовательных технологий
семинар «Электронный учебник как инструмент обучения. Создание электронного учебника»
основе мы можем создавать другие страницы. Для первой страницы пока оставим это
окошко пустым.Снова Ok.
Сейчас в левом верхнем углу страницы видим красный значок. Это значит, что наша
страница еще не сохранена. В панели инструментов выбираем кнопку Сохранить. На
предложение ввести заголовок страницы можно просто оставить поле пустым и нажать Ok.
Но тогда при редактировании страниц в дальнейшем будет не очень удобно
ориентироваться – на ярлыке листа названия не будет. Если мы предполагаем только 1
рабочий лист – это, конечно, не проблема. Но если таких страниц много – это создает
лишние поводы для ошибок. Потому пока дадим странице нейтральный заголовок – 001.
Страницу сохраняем в основную папку, которую создавали. Пусть файл называется 001.
Это – не заголовок. Заголовок страницы мы изменим при наполнении ее контентом, а имя
файла останется таким. Теперь в нашей папке book есть папка с рисунками – pic и один
html-файл с названием 01.Сохраним!
Отчет Заархивируйте папку Вашего учебника, прикрепите в поле для отчета.