Модуль 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. *****/ , большое количество рисунков, фонов, тем.
Если что-то в виде страницы нас не устраивает – возвращаемся к настройкам цвета и фона. Заходим в меню Формат - Заголовок и свойства страницы. Здесь проверяем кодировку выбираем UTF-8, выбираем русский язык. В поле автор вносим свои имя и координаты, заполняем поле Описание. Заголовок мы впишем при сохранении страницы. Пока это поле оставим пустым. Здесь же можно отметить, что эта страница – шаблон. То есть на ее основе мы можем создавать другие страницы. Для первой страницы пока оставим это окошко пустым. Снова Ok.
Сейчас в левом верхнем углу страницы видим красный значок. Это значит, что наша страница еще не сохранена. В панели инструментов выбираем кнопку Сохранить. На предложение ввести заголовок страницы можно просто оставить поле пустым и нажать Ok. Но тогда при редактировании страниц в дальнейшем будет не очень удобно ориентироваться – на ярлыке листа названия не будет. Если мы предполагаем только 1 рабочий лист – это, конечно, не проблема. Но если таких страниц много – это создает лишние поводы для ошибок. Потому пока дадим странице нейтральный заголовок – 001. Страницу сохраняем в основную папку, которую создавали. Пусть файл называется 001. Это – не заголовок. Заголовок страницы мы изменим при наполнении ее контентом, а имя файла останется таким. Теперь в нашей папке book есть папка с рисунками – pic и один html-файл с названием 01.Сохраним!
Отчет Заархивируйте папку Вашего учебника, прикрепите в поле для отчета.
