Подготовка и компьютерная вёрстка учебного пособия по эргономике

В качестве инструмента  оптимизации возьмем программу Adobe Photoshop и в ней рассмотрим, как  происходит процесс подготовки графических файлов для публикации в электронном учебнике рис.5. Фотографии и рисунки преобразовываем до минимального размера по следующему алгоритму: Файл – Сохранить для Веб – кадрируем изображение – проверяем цветовую модель изображение - RGB – выбираем разрешение изображения 72 ppi – меняем физический размер изображения (число точек) – сохраняем в формате jpeg для web.

 

Рис.5 Оптимизация графики

 

2.2.2. Верстка учебного  пособия в Adobe InDesign CS3

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

          Учебно-методический материал отформатирован и до верстки выглядит как файл Word. Подготовленный и обработанный наглядный материал (видео, рисунки и фотографии) разложен по папкам.

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

          Компьютерная вёрстка (англ. Desktop publishing  – «настольное издательство», сокращённо DTP)  – использование персонального компьютера и специального программного обеспечения для создания макета страниц с целью последующей печати в типографии или в электронной форме.

          Электронная верстка осуществляется с помощью различных программ. Наиболее распространенными из них являются программы для подготовки многостраничной верстки – продукты корпорации Adobe (PageMaker, FrameMaker, InDesign), QuarkXPress, Corel Ventura Publisher, TeX. Считается, что у каждой из них своя специализация. Например, FrameMaker, Ventura Publisher, TeX больше ориентированы на автоматизацию оформления сложных структур текста, нередко насыщенного таблицами, формулами, ссылками, в то время как PageMaker, InDesign и XPress рассчитаны на работу с иллюстрациями, т.е. используются в акцидентной (рекламной и др.), журнальной, книжной верстке.

         Главным фактором при выборе инструмента для верстки учебного пособия по эргономике, явилась простота реализации данного продукта, поэтому я остановила свой выбор на программе для  компьютерного макетирования и верстки Adobe InDesign CS3.

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

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

         Интерфейс Adobe InDesign CS3 рис.6 по внешнему виду похож на интерфейсы других программ Creative Suite CS3, таких как Adobe Photoshop CS3, Adobe Illustrator CS3 и других программ этой серии.

          Прежде всего, в InDesign, как и в окне любой другой программы, легко заметны стандартные элементы интерфейса программ для Windows. Это строка меню в верхней части окна, кнопки управления окнами в правой части заголовка окна, полосы прокрутки и т. д. Такие элементы присутствуют практически во всех программах операционной системы Windows и, за исключением некоторых «косметических» различий, абсолютно одинаковы по внешнему виду и функциональности. Как и во многих других графических приложениях, инструменты программы собраны в панель инструментов.

         Традиционный элемент интерфейса программ Adobe – плавающие палитры — независимые «окошки» с настройками и средствами управления, размер и положение которых можно произвольно менять, а сами палитры выводить на экран и скрывать по мере надобности.

   

Рис.6 Общий вид программы Adobe InDesign

1- строка меню; 2-Control Palette (Панель управления); 3- Toolbox (Панель инструментов);

4-линейки окна документа; 5-палитры; 6-значки палитр;

7- полосы прокрутки  окна документа; 8-монтажное поле  документа; 9-страница документа

 

          Внешнее сходство интерфейса делает удобной параллельную работу с приложениями и позволяет быстро освоить работу в программе. [15]

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

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

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

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

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

           Кнопка More options позволяет установить дополнительные установки. Все введенные параметры можно позже отредактировать с помощью меню File-Document Setup и Layout - Margins and Columns.

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

         InDesign позволяет в одном файле хранить 9999 страниц, но целесообразнее отдельные главы или разделы книг и публикаций хранить в отдельных файлах, а всю книгу собирать с помощью специальной опции – book. Она позволяет автоматически нумеровать страницы от файла к файлу, создавать оглавление и индексы для всей книги целиком, распечатывать или преобразовывать в формат PDF сразу несколько файлов.

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

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

 

2.2.3. Выбор инструментов реализации web-учебника

           Итак, для  создания электронного учебного пособия была выбрана гипертекстовая технология.

           HTML – (Hyper Text Markup Language) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

         Многие начинающие веб-дизайнеры используют именно визуальные редакторы, потому что в них легко разобраться и легко создавать html-страницы, либо по созданным в редакторе шаблонам, либо своими усилиями, где знание языка HTML разметки не является основой, т.к. все инструменты представлены в редакторе. В визуальном редакторе мы располагаем различные элементы нашего сайта (электронного учебника), как будто на листе бумаги, а редактор пишет код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь. 

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

         Adobe Dreamweaver имеет в своём арсенале множество иструментов и средств для создания и редактирования профессионального сайта, а именно: HTML, CSS, JavaScript, отладчик JavaScript, редакторы кода (просмотр кода и инспектор кода), тем самым предоставляя вам возможность редактирования HTML, JavaScript, XML и других текстовых документов, поддерживаемых данным редактором.

Пакет Dreamweaver корпорации Macromedia позволяет создавать электронные  издания в соответствии с замыслом их авторов. В Dreamweaver предусмотрены  функции для подготовки и отладки  текстов на языке Dynamic HTML (DHTML) и каскадных  таблиц стилей Cascading Style Sheets (CSS).

          Dreamweaver обеспечивает поддержку многочисленных и довольно разнородных расширений, которые принято объединять термином «динамический HTML». Объекты создаются с абсолютным позиционированием при помощи так называемых layers (слоев).         Большинство вставляемых программой тегов и сценариев настраивается, так что пользователь может приспособить свою программу к новым версиям HTML и новым версиям браузеров.

         У этого редактора очень удобный и привычный для профессионалов-верстальщиков и дизайнеров интерфейс, в стиле PageMaker, Illustrator, Photoshop. [10]

          Внешний вид программы является стандартным для операционной системы Windows. После запуска программы Dreamweaver открывается главное окно с возможностью выбора дальнейших действий пользователя. Каждый HTML-документ открывается в новой вкладке. Для более удобной работы с программой предусмотрены удобная система меню и наличие нескольких палитр, которые, как и в графических редакторах, размещаются в рабочем окне программы. Названия открытых трех палитр «Объекты» (Object), «Свойства» (Properties) и «Загрузить» (Launcher) соответствуют первым трем командам секции меню «Окно» (Window).

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

Рис.7 Рабочее пространство Dreamweaver

(A. Панель объектов, B. Панель инструментов, C. Поле документа, D. Навигатор панелей, E. Выбор HTML-тегов, F. Панель свойств объекта, G. Менеджер  сайта)

 

         Программа Dreamweaver, являясь визуальным HTML-редактором, также позволяет переключаться в режим ручного редактирования кода, осуществляя взаимосвязь между визуальным представлением страницы и ее исходным   кодом. [2]

 

2.2.4. Последовательность проектирования сайта (web-учебника) в Adobe Dreamweaver

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

Для непосредственного  создания сайта следует предварительно сделать все необходимые установки. В секции меню «Редактирование» (Edit)  выбираем команду «Установки» (Preference). В результате получим диалоговое окно, где из множества категорий, перечисленных в левой части диалогового окна, выбираем позицию «Сайт» (Site). Диалоговое окно несколько изменяет свой внешний вид: в нижней его части появляется кнопка «Определить сайты» (Define Sites). В результате генерируется новое диалоговое окно.

В этом диалоговом окне предлагается выбор из нескольких вариантов: учебный  сайт «Уроки» (Lessons), «Руководство» (Tutorial) и «Сайт без названия 1» (Unnamed Site 1). В нашем проекте выбираем первый вариант. После нажатия кнопки «Новый» (New) в правой части диалогового окна, получим новое диалоговое окно «Определение параметров сайта без названия».