Электронные издания

Рис. 6.3. Интерфейс пакета MS FrontPage с активной командой Toolbars

Панель Pictures (Рисование) значительно отличается от аналогичной в пакете MS Word 2000. Это подтверждает даже простое перечисление используемых в ней инструментов. На рис. 6.4 активизирован рисунок на Web-странице, в результате чего активными стали инструменты панели Pictures (Рисование), которая размещена в нижней части рабочего окна пакета. Первый инструмент дублирует имеющийся в панели Стандартные кнопку Insert Picture from File (Вставить рисунок из файла). Нажатие его приводит к появлению диалогового окна, в котором и осуществляется выбор графического файла.

Рис. 6.4. Интерфейс пакета MS FrontPage с активными элементами панели Pictures

Следующий инструмент Text (Текст) позволяет сделать подпись к рисунку, а третий – Auto Thumbnail (Миниатюра) – создать миниатюру изображения, которую используют в сетевых фотоальбомах. Четвертый инструмент позволяет задать положение рисунка на Web-странице в абсолютных координатах. Следующие две кнопки выполняют стандартные функции – Bring Forward (Поместить поверх) и Send Backward (Поместить позади), т. е. меняют содержимое переднего и заднего плана графической композиции. Подобные инструменты имеются не только во всех графических редакторах, но также и в текстовом редакторе Word.

Группа из следующих 4 кнопок характерна для редакторов векторной графики. Это Rotate Left (Поворот влево), Rotate Right (Поворот вправо), Flip Horizontal (Отражение горизонтальное) и Flip Vertical (Отражение вертикальное) т. е. от зеркала, ориентированного вдоль вертикали или горизонтали соответственно.

Следующая группа из 4 кнопок обеспечивает простые операции, связанные с тоновой коррекцией рисунка. Это More Contrast (Увеличить контраст), Less Contrast (Уменьшить контраст), More Brightness (Увеличить яркость) и Less Brightness (Уменьшить яркость).

Далее размещается группа из 6 инструментов, предназначенных для обработки иллюстраций. В нее входят Crop (Кадрирование), Set Transparent Color (Установка прозрачного цвета), Black And White (Преобразовать в черно-белый рисунок), Wash Out (Размытие), Bevel (Эффект объемности) и Resample (Просмотр изображения с другим разрешением).

В следующей группе содержится 5 инструментов: Select (Выбор), Rectangular Hotspots (Выделение прямоугольных пикселов), Circular Hotspots (Выделение круглых пикселов), Polygonal Hotspots (Выделение пикселов в виде многоугольников), Highlight Hotspots (Выделение наиболее ярких пикселов). Наконец, последний инструмент Restore (Восстановить) позволяет отменить преобразование, сделанное с помощью предыдущего инструмента.

6.1.2. Технология подготовки новых Web-сайтов

Как уже говорилось ранее, для просмотра структуры Web-узла следует перейти в режим Navigation (Навигация), щелкнув указателем мыши по соответствующей одноименной кнопке в панели Views . В результате панель представления примет вид, показанный на рис. 6.5.

Иерархическая структура организации страниц Web-узла соответствует их логической организации или соподчиненности. Логическая структура связана с именами отдельных страниц сайта, которые обычно не совпадают с именами соответствующих HTML-файлов. В частности, в приведенном примере роль начальной или домашней страницы играет страница Index , на которой размещены ссылки на многие другие страницы. Ее внешний вид представлен на рис. 6.6.Для того, чтобы добавить в структуру логического узла новую страницу, надо вначале определить Parent Page (Страницу-родителя), щелкнув по ней указателем мыши. Затем выбирается в позиции меню File команда New и подкоманда Page (Страница). Новые страницы создаются со стандартными именами, поэтому их целесообразно переименовать таким образом, чтобы имена соответствовали назначению страницы. В частности, на рис. 6.7 представлена структура сайта с двумя дополнительными страницами. Первая из них подчинена странице что_такое , которая описывает особенности электронных изданий. Новая страница посвящена описанию форматов и носит имя Formats . Вторая – подчинена странице institute и носит название SecEdu , так как на ней описываются услуги, оказываемые в Институте Печати по получению второго высшего образования. На рис. 6.7 показана лишь часть интерфейса, точнее – фрагмент панели представления, который занят представлением структуры сайта.

Рис. 6.5. Интерфейс пакета MS FrontPage в режиме Navigation (Навигация)

Наряду с общей структурой сайта можно просмотреть и структуру гиперссылок на какой-либо странице сайта. Для этого отображается нужная страница, а затем на панели Views нажимается кнопка Hyperlinks . В частности, на рис. 6.8 показаны гиперсвязи лицевой страницы сайта – Index . И в этом случае представлена лишь часть панели представления, на которой размещаются гиперсвязи между страницами. Приведена также внешняя связь с сайтом фирмы Microsoft. Если в процессе проектирования общей структуры сайта количество страниц настолько возрастет, что они не поместятся по ширине в панели представления, то можно будет использовать небольшую панель инструментов Navigation (Навигация), где имеется инструменты Zoom (Масштаб) и Portrait/Landscape (Книга/Альбом). Панель вызывается с помощью одноименной подкоманды View | Toolbars | Navigation команды Toolbars (см. рис. 6.3). Эти инструменты позволяют рационально разместить в пределах панели представления даже достаточно сложные структуры сайтов. Кстати, те страницы, которые в дальнейшем окажутся бесполезными, можно легко удалить. Для этого страница выделяется в режиме Navigation (панель представления в этом режиме показана на рис.6.5) и нажимается клавиша Del на клавиатуре компьютера.

Рис. 6.6. Внешний вид лицевой или домашней страницы сайта

Рис. 6.7. Структура сайта с двумя добавленными страницами

Рис. 6.8. Гиперссылки от лицевой страницы сайта

Следующий этап работы связан с оформлением отдельных Web-страниц. Для этого в панели Folder List (Список папок) выбирается одна из созданных страниц и разрабатывается ее дизайн теми же средствами, которые мы рассматривали при изучении HTML-редакторов, работающих в WYSIWYGрежиме. Можно использовать соответствующие инструменты и команды, чтобы поместить на страницу текст, графику, GIF-анимацию, различные звуковые и видеоэлементы. Желающим подробнее изучить и освоить работу в этом программном пакете можно рекомендовать литературные источники [28, 30].

6.2. Назначение и общая характеристика пакета Dreamweaver

Программный пакет Dreamweaver, как и FrontPage, предназначен для проектирования различных сайтов, в том числе и сайтов издательств, одной из задач которых является распространение электронных изданий. Он пригоден как для создания небольших, так и очень больших сайтов. В первом случае разработкой занимается единственный специалист – Web-мастер. В последнем случае над проектом работает целый коллектив, включающий администратора проекта, Web-дизайнера, HTML-верстальщика, Web-программиста, корректора, менеджера рассылок. Многие специалисты утверждают, что профессиональные Web-дизайнеры в своей работе чаще всего используют Adobe Photoshop для подготовки графики и Macromedia Dreamweaver – для дизайна отдельных Web-страниц. Знакомство с этим пакетом показывает, что это утверждение имеет под собой прочную основу. По обыкновению начнем изучение пакета с его интерфейса.

6.2.1. Интерфейс пакета Dreamweaver

Интерфейс пакета Dreamweaver 4.0 показан на рис. 6.9. Помимо строки заголовка, строки меню, панели инструментов и стандартного рабочего окна программы отметим наличие нескольких палитр, которые, как и в графических редакторах, размещаются в рабочем окне программы. Кстати, названия открытых 3 палитр Object (Объекты), Properties (Свойства) и Launcher (Загрузить) соответствуют первым трем командам меню Window (Окно).

Рис. 6.9. Интерфейс пакета Dreamweaver 4.0 с командами меню Window

Данный пакет интегрирован с точки зрения используемых технологий в группу программных продуктов фирмы Macromedia, которая завоевывает все более прочные позиции на рынке средств Web-дизайна. Другие программы этой группы: Macromedia Director и Flash – рассмотрены в следующих разделах этой главы. В совокупности они обеспечивают основные направления Web-дизайна, а каждая в отдельности специализирована в одном конкретном направлении. Вначале изучения интерфейса Macromedia Dreamweaver 4.0 остановимся на палитре Object (Объекты), внешний вид которой представлен на рис. 6.10. Внешний вид палитры изменяется в зависимости от типа объекта, выбранного в раскрывающимся списке, расположенного в ее верхней части; таким образом палитру можно назвать адаптивной. По умолчанию в списке устанавливается раздел Common (Основные). На рис. 6.10 выбран именно этот вариант.

Рис. 6.10. Палитра Objects раздел Common  

Эта палитра с помощью 16 различных инструментов позволяет включать в состав страницы различные элементы, в частности, по порядку расположения кнопок в палитре в направлении слева направо и сверху вниз: Image (Изображение), Rollover Image (Анимированную кнопку), внешний вид которой изменяется при подведении к ней курсора мыши, Table (Таблицу), Tabular Data (таблицу с занесенными в нее данными, подготовленными заранее в другом программном пакете), Draw Layer (Новый изобразительный слой), Navigation Bar (Навигационную панель со специальными кнопками для перемещения по сайту), Horizontal Rule (Горизонтальную линейку), E-mail Link (Ссылку на электронный адрес), Date (Текущую дату), Server-Side Include (Активизацию серверной стороны), Flash Button (Анимированную Flash-кнопку), Flash Text (Анимированный Flash-текст), Shockwave (Анимационный файл в Shockwave-формате), Generator (средства, делающие Web-страницы динамическими, в частности, апплеты и элементы ActiveX, объекты, воспроизводимые с помощью дополнительных модулей) и пр. (См. также разд. 2.9.)

Палитра Objects раздел Characters (Шрифтовые элементы) позволяет добавить на Web-страницы один из 12 различных специальных символов, в том числе: Line break (переход на новую строку), Copyright (знак авторского права), Trademark (зарегистрированный торговый знак), денежные знаки, в том числе, Pound (фунт стерлингов), Yen (иена), Euro (евро), а также Right & Left Quote (открывающие и закрывающие кавычки), Em-dush (тире) и другие знаки (рис. 6.11).Палитра Objхects раздел Foхrms (Формы), показанная на рис. 6.12, служит для создания форм (см. разд. 2.8) и содержит следующие кнопки: Form (Форма), Text field (текстовое поле), Button (Кнопка), Checkbox и Radio Batton (Переключатели), List/menu (Список/меню), File field (Поле для передачи файлов) и Image field (Поле для передачи изображений), Hidden field (Скрытое поле) и Jump menu (Указатель гиперссылки для перехода на другой сайт).

Рис. 6.11. Палитра Objects раздел Characters  

Рис. 6.12. Палитра Objects раздел Form

Отметим, что в нижней части всех палитр группы Object (Объект) предусмотрены поля Layout (Выравнивание) и View (Просмотр), которые позволяют наблюдать и управлять размещением объектов на Web-странице. Палитра Objects раздел Frames (Фреймы) (рис. 6.13) позволяет с помощью соответствующей кнопки выбирать определенный вид фреймовой структуры страницы с двумя, тремя и четырьмя различным образом расположенными фреймами. Общее число вариантов размещения фреймов на Web-странице равно 8.

Рис. 6.13. Палитра Objects раздел Frames  

Рис. 6.14. Палитра Objects раздел Head

Палитра Objects раздел Head (Заголовочная часть), показанная на рис. 6.14, позволяет добавлять в заголовочную часть HTML-документа соответствующие тэги и значения параметров, в том числе: Meta (тэги метаинформации) и Keywords (ключевые слова), Description (описание), Refresh (параметры обновления сайта), Base (значение базовой ссылки или ссылки по умолчанию), Links (ссылки для связей документов). Палитра Objects раздел Invisibles (Невидимые объекты) (рис. 6.15) позволяет разместить на странице Named Anchor (закладки) (см. также разд. 4.2 и 4.3), Script (сноски) и Comment (комментарии) (см. разд. 2.5).

Рис. 6.15. Палитра Objects раздел Invisibles 

Рис. 6.16. Палитра Objects раздел Special

Последний раздел, входящий в состав комплексной адаптивной палитры Objects (Объекты), носит название Special (Специальный). В ней, как показано на рис. 6.16, имеются 3 пиктограммы или кнопки, а именно: Applet (апплеты), Plugin (плагины) и ActiveX (элементы ActiveX).