Московский государственный университет печати

Гасов В.М.
Цыганенко А.М.


         

Методы и средства подготовки электронных изданий

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


Гасов В.М.
Методы и средства подготовки электронных изданий
Начало
Печатный оригинал
Об электронном издании
Оглавление

Введение

1.

Глава 1. Основные компоненты электронных изданий

1.1.

Текстовая информация

1.2.

Полутоновые и цветные иллюстрации

1.3.

Анимационная графика

1.4.

Видеоинформация

1.5.

Аудиоинформация

2.

Глава 2. Технологии гипертекстовых изданий

2.1.

Функции гипертекстовых электронных изданий

2.2.

Принципы построения гипертекстовых изданий

2.3.

Математическая модель гипертекста

2.4.

Гипертекстовые Web-документы

2.5.

Подготовка публикаций в среде Adobe Acrobat

2.6.

Технология Help-файлов

2.7.

Средства доставки электронных изданий

2.8.

Классификация и общие принципы оформления электронных изданий

3.

Глава 3. Цифровое представление текстовой информации

3.1.

Стандарты кодирования символов ASCII, ANSI, КОИ-8 и UNICODE

3.2.

Формат PDF

3.3.

Формат разметки текста RTF

4.

Глава 4. Графические форматы

4.1.

Растровый формат GIF

4.2.

Формат графических файлов PNG

4.3.

Графический формат JPEG

4.4.

Формат TIFF

4.5.

Программные средства преобразования форматов

5.

Глава 5. Представление анимационной, видео- и звуковой информации

5.1.

Семейство форматов MPEG

5.1.1.

Компрессия видеоданных в MPEG

5.1.2.

Формат MPEG-1

5.1.3.

Формат MPEG-2

5.1.4.

Формат MPEG-4

5.1.5.

Формат MPEG-7

5.2.

Звуковые форматы

5.3.

Анимационные файловые форматы FLI, FLC, CEL

6.

Глава 6. Программы просмотра Web-публикаций

6.1.

Доступ к Web-странице в Internet

6.2.

Программа просмотра MS Internet Explorer

6.3.

Программа просмотра Netscape Navigator

7.

Глава 7. Языки разметки гипертекста и программирования скриптов

7.1.

Язык разметки гипертекста НТМL

7.2.

Расширенный язык разметки XML

7.3.

Язык Java

7.4.

Язык JavaScript

7.5.

Язык программирования сценариев PHP

7.6.

Язык Perl

7.7.

Язык моделирования виртуальной реальности VRML

8.

Глава 8. Программирование Web-страниц в языковой среде HTML

8.1.

Структура и форматирование HTML-документа

8.2.

Таблицы

8.3.

Изображения и навигационные карты

8.4.

Формы

8.5.

Фреймы

8.6.

Фреймы и таблицы

8.7.

Объекты

8.8.

Гиперссылки

8.9.

Таблицы стилей

9.

Глава 9. Автоматизация создания Web-публикаций. Программный пакет Macromedia Dreamweaver

9.1.

Назначение и функциональные возможности пакета

9.2.

Структурная схема программного пакета

9.3.

Интерфейс пользователя и принципы его организации

9.4.

Некоторые типовые процедуры пакета Dreamweaver

9.4.1.

Работа с текстом

9.4.2.

Вставка изображений

9.4.3.

Создание карты изображения

9.4.4.

Работа с таблицами

9.4.5.

Создание форм

9.4.6.

Работа с фреймами

9.4.7.

Работа со слоями

9.5.

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

9.6.

Создание Web-сайта

10.

Глава 10. Программный пакет MS FrontPage

10.1.

Функциональные возможности программного пакета

10.2.

Структурная схема пакета

10.3.

Пользовательский интерфейс FrontPage

10.4.

Типовые процедуры работы с пакетом

10.5.

Пример создания Web-страницы

11.

Глава 11. Создание мультимедийных изданий. Программный пакет Macromedia Director

11.1.

Функциональные возможности программной среды

11.2.

Интерфейс пользователя

11.3.

Работа с мультимедийными элементами

11.3.1.

Элементы труппы

11.3.2.

Спрайты

11.3.3.

Изображения

11.3.4.

Текст

11.3.5.

Анимация

11.3.6.

Аудиоинформация

11.3.7.

Создание проекторов

11.3.8.

Цифровая видеоинформация

11.4.

Пример мультимедийного гиперграфического издания

Заключение

Библиографический список

Указатели
695   предметный указатель
434   указатель иллюстраций
45   указатель компаний
Рис. 09.01. Обобщенная структурная схема Dreamweaver Рис. 09.02. Рабочее окно документа в программном пакете Dreamweaver Рис. 09.03, а. Меню второго уровня команды «Файл (File)» Рис. 09.03, б. Меню второго уровня команды «Просмотр (View)» Рис. 09.03, а. Меню второго уровня команды «Файл (File)» Рис. 09.03, б. Меню второго уровня команды «Просмотр (View)» Рис. 09.04. Пример меню третьего уровня Рис. 09.05. Поле ввода тегов в тело HTML-документа Рис. 09.06, а. Меню команд «Вставка (Insert)» Рис. 09.06, б. Меню команд «Команды (Commands)» Рис. 09.04. Пример меню третьего уровня Рис. 09.06, а. Меню команд «Вставка (Insert)» Рис. 09.06, б. Меню команд «Команды (Commands)» Рис. 09.07. Плавающее меню Рис. 09.08. Панель «Управление проектом» рабочего окна Рис. 09.09. Панель «Управление проектом» Рис. 09.10. Окно «Сайт (Site)» Рис. 09.11. Панель контроллера поведения (свойств) Рис. 09.12. Панель контроллера поведения в развернутом состоянии Рис. 09.13. Меню выбора функциональной панели в палитре «Объекты» Рис. 09.14. Панель «Общие (Common)» Рис. 09.15. Панель «Формы (Forms)» Рис. 09.16. Панель «Фреймы» Рис. 09.17. Панель специальных символов Рис. 09.18. Панель «Невидимые (Invisible)» Рис. 09.19. Меню «Редактирование (Edit)» Рис. 09.20. Диалоговое окно «Preferences» Рис. 09.21. Диалоговое окно «Preferences» в режиме Fonts/Encoding Рис. 09.22. Окно настройки параметров документа «Page Properties» Рис. 09.23. Палитра цветов Рис. 09.24. Диалоговое окно «Цвет» Рис. 09.23. Палитра цветов Рис. 09.25. Панель контроллера поведения (свойств) для текста Рис. 09.26. Фрагмент текстового HTML-документа в окне Dreamweaver Рис. 09.27. Фрагмент текстового HTML-документа в виде HTML-кодов (тегов) Рис. 09.28. Кнопка «Insert Image» Рис. 09.29. Диалоговое окно «Select Image Source» Рис. 09.29. Диалоговое окно «Select Image Source» Рис. 09.30. Вставка изображения в публикацию Рис. 09.31. HTML-код вставленного изображения Рис. 09.32. Панель контроллера поведения (свойств) Рис. 09.33. Панель контроллера поведения (свойств) изображения в развернутом виде Рис. 09.34. Режимы выравнивания Рис. 09.35. Создание активных областей различной формы Рис. 09.36. Панель контроллера активной области Рис. 09.37. Диалоговое окно выбора параметров таблицы Рис. 09.37. Диалоговое окно выбора параметров таблицы Рис. 09.38. Диалоговое окно «Insert Tabular Data» Рис. 09.37. Диалоговое окно выбора параметров таблицы Рис. 09.39. Подменю работы с таблицами Рис. 09.40. Пример объединения ячеек Рис. 09.41. Пример встраивания таблиц в таблицу Рис. 09.42. Фрагмент HTML-кода сложной таблицы Рис. 09.43, а. Панель «Forms» Рис. 09.43, б. Подменю команды «Insert/Form Object» Рис. 09.44. Контур размещения формы Рис. 09.45. Панель контроллера свойств в режиме работы с формой Рис. 09.46. HTML-код создания формы Рис. 09.47. Панель контроллера свойств в режиме многострочных полей ввода Рис. 09.48. Пример полей ввода текста Рис. 09.49. Пример фрагмента HTML-кода описания создаваемых полей ввода Рис. 09.50. Примеры объектов форм, создаваемых в среде Dreamweaver Рис. 09.51. Панель «Frames» палитры «Objects» Рис. 09.52. Меню команды «Insert/Frames» Рис. 09.53. Меню «View» Рис. 09.54. Меню команды «Modify/Frameset» Рис. 09.55. Пример родительских и дочерних (вложенных) фреймов Рис. 09.56. Панель контроллера свойств фрейма Рис. 09.57. Окно редактирования HTML-кода Рис. 09.58. Пример HTML-кода для трех фреймов Рис. 09.59. Диалоговое окно «Preferences» (режим «Layers») Рис. 09.59. Диалоговое окно «Preferences» (режим «Layers») Рис. 09.60. Многофункциональное окно в режиме «Layers» Рис. 09.61. Панель «Layers» палитры «Объекты» (в рабочем окне программы) Рис. 09.62. Панель контроллера свойств слоя Рис. 09.63. Панель контроллера поведения («Behavior») Рис. 09.64. Меню «Действия» Рис. 09.65. Подменю «Timeline» Рис. 09.66. Пример диалогового окна Рис. 09.67. Панель контроллера Timeline Рис. 09.68. Контекстное меню контроллера Timeline Рис. 09.69. Ключевые кадры Рис. 09.70. Визуализация слоя в панели контроллера Timeline Рис. 09.71. Траектория перемещения слоя Рис. 09.72. Создание промежуточного кадра Рис. 09.72. Создание промежуточного кадра Рис. 09.73, а. Результаты моделирования - рабочее окно Dreamweaver) Рис. 09.73, б. Результаты моделирования - окно браузера Internet Explorer) Рис. 09.64. Меню «Действия» Рис. 09.74. Диалоговое окно «Call JavaScript» (Вызов JavaScript) Рис. 09.75. Пример структуры Web-сайта Рис. 09.76. Диалоговое окно «Определение сайта» Рис. 09.77. Диалоговое окно «Site Definition» Рис. 09.78. Вид электронного издания в окне браузера Рис. 09.79. Реализация ссылки на изображение Рис. 09.80. Титульный лист электронного издания «Ассоциации электронных технологий» Рис. 09.81. Электронное учебное пособие Рис. 09.82. Вторая страница учебного пособия

Web-публикацииWeb-публикации в WWW реализуются в виде Web-страницаWeb-страниц и Web-серверWeb-серверов. В современной литературе наряду с термином Web-сервер часто используется термин Web-cайт или Web-узел.

Для подготовки этих электронных изданий создано множество программных продуктов - от простейших HTML-редакторов до средств проектирования Web-страниц и Web-серверов.

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

В традиционной печати сроки выпуска изданий определяются графиками работ типографий и структур распространения. Как правило, новая интересная информация появляется в InternetInternet гораздо раньше. Это объясняется наличием средств автоматизации проектирования Web-страниц и более сложных информационных структур - Web-серверов. Именно в этом особая роль и значение программных пакетов Macromedia DreamweaverMacromedia Dreamweaver и Microsoft FrontPage.

В данной главе рассмотрен один из наиболее распространенных программных пакетов автоматизированного проектирования Web-публикаций Macromedia Dreamweaver.

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

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

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

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

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

Считается, что Dreamweaver является первым средством визуальной HTML-верстки, созданным с учетом основных потребностей профессиональных Web-дизайнеров. В последнее время в адрес этого программного пакета раздается много хвалебных слов. В области Web-дизайна Dreamweaver претендует на место, которое занимает Adobe PhotoshopAdobe Photoshop в области обработки изображений. Кстати, с Adobe Photoshop его роднит и методология использования подключаемых модулей. Начиная с первой версии программного пакета компания Macromedia реализовала замысел - вынести HTML «за скобки» Web-дизайна, не принуждая при этом разработчиков совсем отказываться от контроля над исходными текстами. Создатели программного пакета поняли, что многие разработчики узлов Web отвергают приложения в стиле WYSIWYG, поскольку для Web не совсем подходит принцип «что вижу - то и получаю». В ответ на это в пакет Dreamweaver были интегрированы два текстовых редактора для HTML: BBedit for Macintosh компании Bare Bone Software и HomeSite for Windows компании Allaire.

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

Dreamweaver - это среда, открытая на всех уровнях для сторонних разработчиков. Возможности программного пакета (который сам в значительной степени создан с использованием JavaScript и HTML) можно расширять, не дожидаясь выхода новой версии. Аналогичную картину можно увидеть при расширении функциональных возможностей Photoshop путем установки новых plug-in модулей. Для Dreamweaver этот процесс реализуется значительно проще. Существуют, например, расширения для поддержки QuickTime, G2, OpenPix, IBM HotMedia и т. д.

У этого редактора очень удобный и привычный для профессионалов-верстальщиков и дизайнеров интерфейс, в стиле PageMaker/Illustrator/Photoshop. Этим он отличается от другого известного HTML-редактора HomeSite с его Delphi-подобным интерфейсом, ориентированным на профессионалов-программистов.

Для Dreamweaver в отличие от многих других приложений не существует «запретных тем», поскольку он поддерживает максимально возможное число тегов (управляющих элементов) и корректно обходится со всеми современными Web-технологиями.

К функциональным возможностям программного пакета Dreamweaver относятся:

    Dreamweaver представляет собой профессиональный редактор для создания Web-сайтов (серверов) и управления ими. С помощью Dreamweaver можно создавать Web-сайты, независимые от серверной платформы и браузера конечного пользователя.

    Создание и редактирование WWW-документов с помощью стандарта языка HTML. Dreamweaver позволяет использовать возможности Dynamic HTML, например анимированные таблицы, слои, формы, фреймы, объекты, и задавать поведение объектов без необходимости написания кода HTML вручную.

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

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

    Создание комплексной компоновки страницы (complex page layout).

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

    Возможность прямого доступа к HTML-коду (в отдельном окне) и параллельного ручного редактирования.

    Поддержка русского языка (включая КОИ-8 и т. п.). Можно указать в настройках набор символов и раскладку клавиатуры (обычно эта возможность реализуется в момент создания новой чистой страницы).

    Работа с таблицами.

    Возможность работы со слоями. Поддержка позиционируемых динамических слоев (DIV, SPAN, LAYER, ILAYER).

    Возможность взаимной конвертации таблиц и слоев.

    Встраивание изображений. Контроль над соответствием атрибутов height и width реальным размерам изображения.

    Трассировка изображений.

    Работа с палитрами цветов.

    Работа с формами, фреймами.

    Управление объектами.

    Поддержка внешних объектов ActiveX, JavaJava, Flash, Shockwave, QuickTime, RealSystem G2.

    Автоматизация работы с метаэлементами.

    Выделение «потерянных» и неуместных тегов.

    Встраивание анимационных Flash-роликов.

    Средства контроля за интерактивными анимационными роликами (Timeline).

    Функция очистки и оптимизации кода (актуальна при обработке страниц, созданных в редакторах типа FrontPage).

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

    Возможность применять единый шаблон (template) для всего сайта (сервера) или его части.

    Применение нескольких шаблонов к одной Web-странице.

    Задание линии поведения (behavior) для элементов страницы.

    Проверка кода на совместимость со спецификациями HTML 2.0/3.2/4.0, WebTV и с версиями браузеров Netscape, Explorer, Opera.

    Трансляция серверных технологий Server Side Includes (SSI).

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

    Удобный менеджер сайтов и обновления по FTP.

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

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

    Плавающие панели (палитры) с доступом к свойствам объектов.

    Меню в строке состояния для передвижений по иерархии тегов.

    Арсенал событий, генерируемых при загрузке страницы, в том числе зависимости от версии браузера.

    Интеграция с другими приложениями.

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

Macromedia DreamweaverMacromedia Dreamweaver был задуман разработчиками не для редактирования отдельных документов, а для создания крупных Web-узлов и управления ими. Поэтому от пользователя требуется определенная квалификация, в частности знакомство с основными Internet-технологиями.

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

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

Dreamweaver позволяет изменять готовые конструкции до, в процессе и после завершения создания страницы. Программный пакет автоматически обновит с учетом внесенных пользователем изменений каждую страницу, созданную при помощи данного шаблона. Например, чтобы изменить общие элементы, такие, как неудачный цвет фона, значки на панели навигации или неверно размещенный логотип, достаточно откорректировать исходный шаблон и выбрать команды Modify (Изменить), Templates (Шаблоны), Update Pages (Обновить страницы).

Открытая архитектура Dreamweaver позволяет интегрировать этот пакет с другими программами, типа iCat E-commerce, и сопровождать весь электронный Web-магазин средствами Dreamweaver.

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

Весьма интересна функция трассировки изображений. Многие разработчики Web-узлов начинают свою работу в иллюстративных программах, таких, как Adobe IllustratorAdobe Illustrator или Macromedia FreeHand, а затем повторяют нарисованный макет в HTML при помощи специализированных пакетов типа Dreamweaver. Разработчики компании Macromedia учли эту тенденцию и ввели в программный пакет функцию трассировки изображений, которая позволяет поместить изображение на страницу, сделав его «фоном» страницы, изменить степень прозрачности, а затем «прорисовать» поверх макета готовую страницу, как по кальке. Изображение для трассировки в действительности не является фоном и не отображается при просмотре страницы через браузер.

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

Структурная схема программного пакета Dreamweaver приведена на рис. 9.1Рис. 09.01. Обобщенная структурная схема Dreamweaver.

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

Ядро системы управляет всеми подсистемами и согласует действия периферийных устройств.

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

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

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

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

База данных объектов хранит все визуальные и невизуальные объекты, а также некоторые связи между объектами.

Поступление данных из базы данных в ядро осуществляется посредством модуля настройки свойств объекта. Модуль обеспечивает изменение всех свойств объекта.

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

В программном пакете имеется также один или более встроенных редакторов (например, Allaire HomeSiteAllaire HomeSite).

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

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

Несколько компонентов рабочего пространства программного пакета используются практически постоянно:

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

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

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

    Контроллер поведения (свойств) отображает свойства выбранного объекта.

    Система главного и поддерживающих меню (более низких уровней).

    Контекстные меню отображают необходимые команды, относящиеся к текущему объекту.

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

Остановимся более подробно на некоторых аспектах построения интерфейса данного программного пакета.

Рабочее окно документа

Рабочее окно документа отображает текущий документ приблизительно так, как он будет выглядеть в окне Web-браузера (рис. 9.2Рис. 09.02. Рабочее окно документа в программном пакете Dreamweaver). Заголовок окна документа отображает название документа. В скобках приводится имя файла. Визуализация звездочки (asterisk) осуществляется в том случае, если рабочий файл содержит несохраненные изменения в документе.

В строке статуса визуализируется путь от тега <BODY> до вы-бранного объекта.

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

Набор кнопок-пиктограмм в нижней правой части окна документа называется Панелью управления проектом (запуска). Кнопки панели проекта включают команды открытия окна сайта (Site window), палитры библиотек (Library palette), палитры стилей (Style palette); контроллеры поведения (свойств) (Behavior inspector), просмотра (Timeline inspector) и кода HTML (HTML inspector) и т.д.

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

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

Главное меню. В строке под названием Web-документа размещено девять команд главного меню программного пакета: Файл (File), Редактирование (Edit), Просмотр (View), Вставка (Insert), Изменение (Modify), Команды (Commands), Сайт (Site), Окно (Windows) и Справка (Help).

Каждая из команд поддерживается соответствующим меню второго уровня. На рис. 9.3 (аРис. 09.03, а. Меню второго уровня команды «Файл (File)», бРис. 09.03, б. Меню второго уровня команды «Просмотр (View)») приведены примеры меню второго уровня для команд Файл и Просмотр.

Как следует из рис. 9.3 (аРис. 09.03, а. Меню второго уровня команды «Файл (File)», бРис. 09.03, б. Меню второго уровня команды «Просмотр (View)»), перечень опций меню второго уровня для этих команд главного меню в основном соответствует традиционной для программных средств обработки текстовой и графической информации в допечатных процессах. Вместе с тем появились и новые специфические опции, связанные с выводом информации в окне браузера и редактированием HTML-документа на уровне тегов.

Некоторые команды меню второго уровня поддерживаются опциями меню последнего, третьего уровня. Ниже приведен пример (рис. 9.4Рис. 09.04. Пример меню третьего уровня) такого меню, поддерживающего команду Граничные линии (Rulers).

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

Оставшиеся команды, как правило, при их активизации вызывают появление диалоговых окон различного функционального назначения. Так, на рис. 9.5Рис. 09.05. Поле ввода тегов в тело HTML-документа приведен вид поля ввода тегов в тело HTML-документа путем выбора необходимого варианта из предлагаемого списка либо ввода кода тега вручную с клавиатуры (команда Modify/Quick Tag Editorial).

Меню второго уровня команд Главного меню - Вставка (Insert), Изменение (Modify), Команды (Commands) и Сайт (Site) - в основном содержат специфические для данного программного пакета опции. В качестве примера на рис. 9.6 (см. Рис. 09.06, а. Меню команд «Вставка (Insert)», Рис. 09.06, б. Меню команд «Команды (Commands)») приведен общий вид меню команд Вставка (Insert) и Команды (Commands).

Большинство опций меню Просмотр (View), Вставка (Insert), Команды (Commands) и Сайт (Site) (рис. 9.4Рис. 09.04. Пример меню третьего уровня, 9.6 аРис. 09.06, а. Меню команд «Вставка (Insert)», бРис. 09.06, б. Меню команд «Команды (Commands)»), работающих с изображениями, таблицами, слоями, формами, фреймами, мультимедийными компонентами, гиперссылками, списками и скриптами и осуществляющих компоновку Web-страниц и Web-серверов (Web-сайтов), вынесены в специальные панели или палитры. Это объясняется тем, что данные команды используются достаточно часто и разработчики программного пакета упростили доступ к ним. Ниже эти панели и включенные в них команды будут рассмотрены более подробно.

При щелчке правой клавишей мыши в поле рабочего окна появляется меню, представленное на рис. 9.7Рис. 09.07. Плавающее меню.

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

Рассмотрим основные контроллеры, панели и палитры команд данного программного пакета.

Панель Управление проектом (Launcher). В правой части нижней строки рабочего окна размещается панель (палитра) Управление проектом, включающая семь кнопок-пиктограмм (рис. 9.8Рис. 09.08. Панель «Управление проектом» рабочего окна).

В качестве альтернативы активизацией команды Window/Launcher на экран выводится та же панель со статическими ярлыками включенных в ее состав команд (рис. 9.9Рис. 09.09. Панель «Управление проектом»).

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

При щелчке курсором мыши по любой пиктограмме открывается соответствующее диалоговое окно. Например, при щелчке по пиктограмме Сайт (Site) на экране визуализируется диалоговое окно, представленное на рис. 9.10Рис. 09.10. Окно «Сайт (Site)».

Контроллер Поведения (Свойств). Контроллер Поведения (Properties) отображает свойства выбранного объекта. Вид панели этого контроллера для текстовой информации приведен на рис. 9.11Рис. 09.11. Панель контроллера поведения (свойств).

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

В исходном положении панель контроллера поведения отображает наиболее общие свойства объекта. Для доступа ко всем свойствам следует щелкнуть на стрелке расширения в нижнем правом углу панели контроллера. На рис. 9.12Рис. 09.12. Панель контроллера поведения в развернутом состоянии приведен вид развернутого окна контроллера для того же объекта (текст).

Палитра Объекты. Палитра Объекты содержит кнопки-пиктограммы для вставки в Web-документ разнообразных объектов, например таблиц, слоев, изображений и т.д. Палитра объектов включает шесть специализированных панелей с группами пиктограмм, объединенных по функциональному принципу (рис. 9.13Рис. 09.13. Меню выбора функциональной панели в палитре «Объекты»).

Для переключения между функциональными панелями используется всплывающее меню, раскрывающееся щелчком курсора мыши по треугольной кнопке, размещенной под строкой заголовка палитры объектов. Это меню включает набор панелей: Общие (Common), Параметры (Characters), Формы (Forms), Фреймы (Frame), Заголовок (Head), Невидимые (Invisibles).

Панель Общие содержит пиктограммы, позволяющие работать с наиболее часто используемыми объектами, такими, как рисунки, таблицы и слои. Панель Символы включает специальные типы символов, например, символы авторского права, изогнутых кавычек, марки изготовителя и т.д. На панели Формы находятся пиктограммы для создания форм и их элементов. Панель Заголовок содержит пиктограммы для включения в заголовок документа таких тегов, как <META>, <TITLE> и <BASE>. Панель Невидимые содержит кнопки-пикто-граммы для создания элементов документа, которые не видны в рабочем окне документа (такие как, якоря ссылок, скрипты, апплеты и т.д.). Для визуализации подобных элементов используется команда View / Invisible Elements.

Для выбора объекта или изменения его свойств используется щелчок на нем курсором мыши. При введении в документ таких объектов, как таблицы, сценарии и элементы заголовка (HEAD), программная среда формирует диалоговое окно, в котором необходимо ввести дополнительную информацию. Можно исключить появление этих диалоговых окон, изменив в установках параметр (Show Dialog When Inserting Objects). Для изменения свойств объектов после их вставки используется панель контроллера поведения. Можно отображать содержимое палитры объектов как только текст (Text only), только значки (Icons only) или текст и значки (Text and icons). Можно изменять объекты в палитре и вставить свои собственные. Для создания определенного объекта нажимается соответствующая кнопка-пикто-грамма и объект перетаскивается в окно документа.

Панель Общие (Common). По умолчанию панель Объекты раскрывается в виде функциональной панели Общие (Common). В составе этой панели используется восемнадцать кнопок-пиктограмм, соответствующих наиболее часто применяемым командам (рис. 9.14Рис. 09.14. Панель «Общие (Common)»).

Укажем значение некоторых кнопок-пиктограмм данной панели.

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

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

Пиктограмма значка Insert HR (Horizontal Ruler) вставляет в позицию курсора горизонтальную разделительную линию.

Пиктограмма значка Insert Layer создает слой. Нажатием курсора мыши на этом значке обозначается слой в окне документа в том месте, где необходимо разместить объект. По умолчанию Dreamweaver создает слой, используя тег <DIV>. Для задания другого тега используется панель контроллера поведения объектов. Аналогичный результат можно получить путем изменения установок в параметрах слоя.

Разрыв строки. Помещает тег конца строки (< br) > в месте вставки. Можно также использовать нажатие клавиш shift +.

Пиктограмма значка Insert Applet вставляет значок Java-апплета в место расположения курсора. Для задания исходного файла Java-апплета используется панель контроллера поведения (свойств).

Пиктограмма значка Insert ActiveX используется для вставки в позицию курсора элемента управления ActiveX. Для определения исходного файла элемента управления ActiveX используется панель контроллера поведения.

Пиктограмма значка Insert Plug-in осуществляет вставку внедренного объекта (plug-in) Netscape в позицию курсора, используя тег <EMBED>.

Пиктограмма значка Insert Flash используется для вставки в документ Flash-роликов с помощью тегов <OBJECT> и <EMBED>.

Пиктограмма значка Insert Shockwave встраивает в документ Shock-wave-ролик, использует теги <OBJECT> и <EMBED>.

Панель «Формы» (Forms). Эта панель включает кнопки-пиктограммы, используемые для создания элементов интерактивного взаимодействия пользователя с Web-публикацией: текстовых полей, кнопок, элементов управления, полей файла и рисунка и др. Общий вид этой панели иллюстрируется рис. 9.15Рис. 09.15. Панель «Формы (Forms)».

В ее состав входят следующие кнопки-пиктограммы.

Пиктограмма значка Insert Form вставляет форму в позицию курсора. Форму можно рассматривать как контейнер для ее элементов. Формы не видны в окне документа до тех пор, пока не активизирована команда View/Invisible Elements.

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

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

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

Пиктограмма значка Insert Radio Button служит для введения в документ элемента управления типа кнопки (в позицию курсора). Курсор должен размещаться в границах формы, иначе эта кнопка не будет отображена в окне браузера. Имя, размер и начальное значение задаются в контроллере поведения.

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

Пиктограмма значка Insert File Field помещает поле файла в позицию курсора в границах создаваемой формы. Имя, размер и начальное значение задаются в контроллере поведения.

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

Пиктограмма значка Insert Hidden Field вставляет скрытое поле в месте вставки (в позицию курсора). Курсор размещается в границах формы, иначе элемент не будет отображен в браузере. Имя, размер и начальное значение задаются в контроллере поведения.

Пиктограмма значка Insert Jump Menu помещает всплывающее URL-меню в место вставки. Установка значений списка осуществляется в появляющемся диалоговом окне.

Панель Фреймы (Frames). Панель фреймов (кадров) в палитре объектов содержит кнопки для размещения фреймов. Общий вид этой панели приведен на рис. 9.16Рис. 09.16. Панель «Фреймы».

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

Пиктограмма значка Insert Left Frame служит для создания узкого пустого фрейма слева от текущего (активного) фрейма (кадра).

Пиктограмма значка Insert Right Frame служит для добавления узкого пустого фрейма справа от текущего (активного) фрейма.

Пиктограмма значка Insert Top Frame cоздает два фрейма: добавляет узкий пустой фрейм, расположенный выше текущего (активного) фрейма.

Пиктограмма значка Insert Bottom Frame создает два фрейма: добавляет узкий пустой фрейм, расположенный ниже текущего (активного) фрейма (или кадра).

Пиктограмма значка Insert Left, Top-Left Comer and Top Frames создает четыре фрейма: добавляет узкий пустой фрейм слева от текущего (активного) фрейма, узкий пустой фрейм выше текущего фрейма и маленький пустой фрейм в верхнем левом углу рабочего поля экрана.

Пиктограмма значка Insert Top and Nested Left Frames используется для создания трех фреймов слева и в верхней части поля экрана: добавляет узкий пустой фрейм выше текущего фрейма и другой фрейм слева от обоих кадров фреймов.

Пиктограмма значка Insert Left and Nested Top Frames Top Frame используется для создания трех фреймов: основного и узких пустых фреймов слева и выше текущего фрейма.

Пиктограмма значка Insert Top Frame используется для разбиения поля экрана на четыре фрейма. В результате создается три новых пустых фрейма в четвертях экрана. При этом текущий (активный) фрейм размещается в нижнем правом квадранте.

Панель Заголовки (Head). Панель Заголовки содержит объекты, встраиваемые в заголовок документа.

Пиктограмма значка Insert Meta вставляет тег <META> в заголовок документа. Cвойства тега устанавливаются в контроллере свойств.

Пиктограмма значка Insert Keywords добавляет ключевые слова в публикацию, используя тег <META> в заголовке. При этом ключевые слова вводятся в специальном диалоговом окне.

Пиктограмма значка Insert Description вставляет описание документа, используя тег <META> в заголовке. Текст, описывающий документ, вводится в специальном диалоговом окне.

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

Пиктограмма значка Insert Base вставляет тег <BASE> в заголовок документа. Основа URL для связей документа задается в раскрывающемся диалоговом окне.

Пиктограмма значка Insert Link служит для задания в текст публикации гиперссылок, используя тег гиперссылки <LINK> в заголовке документа. Атрибуты тега задаются в раскрывающемся диалоговом окне.

Панель специальных символов (Character) (рис. 9.17Рис. 09.17. Панель специальных символов).

Панель символов в палитре объектов содержит некоторые специальные символы:

Пиктограмма значка Insert Copyright (Авторское право) служит для введения в публикацию символа авторского права. Место вставки определяется позицией курсора.

Пиктограмма значка Insert Registered TradeMark (регистрационный символ) служит для введения в публикацию специального регистрационного символа изготовителя. Место вставки символа определяется положением курсора.

Пиктограмма значка Insert TradeMark (Марка изготовителя) помещает символ марки изготовителя в место вставки, определенное положением курсора.

Пиктограмма значка Insert Pound (Фунт) помещает символ фунта (валюты) в место вставки, заданное курсором.

Пиктограмма значка Insert Euro (Евро) помещает символ Euro (валюты) в место вставки.

Пиктограмма значка Insert Em - Dash (Длинное тире) используется для введения в публикацию длинного тире в место вставки, определенное положением курсора.

Пиктограмма значка Insert Left Quate (Левая кавычка) используется для помещения в документ изогнутой двойной кавычки (открытие кавычек) в месте вставки.

Пиктограмма значка Insert Right Quate (Правая кавычка) служит для введения в публикацию изогнутой двойной кавычки (закрытие кавычек) в месте вставки, определенном курсором.

Пиктограмма значка Insert Other Сharacter (Другие) используется для введения в текст документа любого из представленного набора специальных символов. После выбора символа в специальном окне щелчком по исполняющей кнопке выбранный символ вводится в поле публикации в месте вставки.

Панель Невидимые (Invisible). На этой панели (рис. 9.18Рис. 09.18. Панель «Невидимые (Invisible)») располагаются кнопки-пиктограммы, создающие элементы (объекты), невидимые в окне документа.

Для отображения значков, определяющих положение невидимых объектов, используется команда View / Invisible Elements. Изменение свойств таких объектов осуществляется с помощью щелчка на соответствующем значке.

Пиктограмма значка Name Anchor вставляет поименованный «якорь» (A NAME = « ») в позицию курсора. Для изменения имени используется контроллер поведения (свойств).

Пиктограмма значка Comment вставляет комментарий в код HTML в позицию курсора. Текст комментария вводится с помощью контроллера поведения.

Пиктограмма значка Script вставляет сценарий в позицию курсора. Для определения языка сценариев и текста сценария используется контроллер поведения.

Пиктограмма значка Non- breaking Space вставляет разрыв строки (теги <BR>) в позицию курсора. Аналогично разрыв строки можно вставить, нажав Shift + Enter.

Установка параметров

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

Общие параметры. Эти параметры используются для задания основных компонентов пользовательского интерфейса Dreamweaver. Для выхода в этот режим используется команда Edit / Preferences (рис. 9.19Рис. 09.19. Меню «Редактирование (Edit)»).

Этой командой раскрывается диалоговое окно, представленное на рис. 9.20Рис. 09.20. Диалоговое окно «Preferences».

Информация, вводимая в это диалоговое окно, изменяется в зависимости от выбранной опции в списке Category. Для доступа к общим параметрам выделим строку General. При этом появятся поля ввода, кнопки и переключатели, соответствующие общим параметрам.

Поле ввода Update Links (Обновить ссылки) служит для введения значения, определяющего операции со ссылками при перемещении, переименовании или удалении документа в пределах Web-сайта: всегда (always) обновлять ссылки автоматически, никогда (never) не обновлять ссылки или изменять по запросу об обновлении (prompt).

В поле ввода Dictionary (Словарь) вводится значение, показывающее список словарей, доступных в папке Configuration/Dictionary, расположенной в корневой папке приложения Dreamweaver. Если словарь содержит несколько диалектов или различные написания слов, они отображаются отдельно.

Данные, введенные в поле ввода Цветовая схема (Color Scheme), определяют цвета для палитр и контроллеров Dreamweaver. Доступны следующие опции: Dreamweaver Two-Tone, Desktop Two-Tone и Desktop Standard.

Поле ввода Object Palette предоставляет возможность выбора содержимого палитры объектов (Object palette) в виде текста (Text) и иконок (Icons), только в виде текста (Text Only) или только иконок (Icons Only), которые зафиксированы в свернутом списке.

Опция Добавление расширения во время сохранения (Add Extension when Saving) автоматически добавляет специфицированное расширение (например, *.html, *.htm, *.asp или любое другое, которое описывает HTML-документ) к имени файла. Расширение по умолчанию добавляется только тогда, когда оно не задано явно.

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

Опция Открывать файлы в новом окне (Open Files in New Window) позволяет открывать несколько документов (только в WindowsWindows). Когда опция отключена, файлы загружаются в текущее окно вместо текущего документа.

Опция При загрузке показывать только окно карты сайта (Show Only Site Window on Startup) во время загрузки Dreamweaver показывает только карту сайта и загружает панели.

Опция Показывать диалоговое окно при вставке объектов (Show Dialog When Inserting Objects) определяет, будет ли программа просить ввести дополнительную информацию об объекте при вставке рисунков, таблиц, Shockwave-роликов с помощью палитры объектов. В том случае, если опция отключена, диалоговое окно появляться не будет, и для задания исходного файла рисунка, числа строк в таблице и т. д. следует использовать контроллер поведения. Для изображений, которые изменяются при наведении курсора (rollover images), диалоговое окно появляется постоянно при вставке объекта, независимо от данной опции.

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

Для изменения параметров Шрифт/Кодировка используется команда Edit/Preferences/Fonts/Encoding. После активизации этой команды раскрывается диалоговое окно, представленное на рис. 9.21Рис. 09.21. Диалоговое окно «Preferences» в режиме Fonts/Encoding.

Кодировка по умолчанию применяется при создании нового документа или при открытии документа, не использующего тег <META>. Тег <META> вставляется в заголовок документа и сообщает браузеру, каким образом декодировать документ и какие использовать шрифты.

Как сообщалось ранее, в России наиболее часто используются кодировки KOI-8-R и Windows-1251.

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

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

Фиксированный (моноширинный) шрифт (Fixed Fonts) используется в тегах <PRE>, <CODE> и <TT>.

Установки Строки состояния (Status Bar preferences). Размер окна (Window Sizes) предопределяет размеры окна во всплывающем меню в строке состояния. Этот параметр позволяет оптимизировать создаваемый сайт для окна определенных размеров (например, 800?600).

Параметр скорость соединения (Connection Speed) в килобитах в секунду предназначен для расчета времени загрузки документа. Загружаемый размер документа отображается в строке состояния. Для рисунка загружаемый размер отображается в контроллере поведения при выборе рисунка.

Опция Показывать мини-панель проекта (Show Mini-Launcher) отображает в строке состояния мини-панель проекта (запуска).

Наряду с приведенными выше используются установки плавающих панелей (Floating Palettes preferences), задание панелей и окон, появляющихся поверх других окон, цвета выделения и другие настройки.

Рассмотрим некоторые типовые процедуры программного пакета Macromedia DreamweaverMacromedia Dreamweaver, которые используются при создании Web-страниц. Эти процедуры касаются как общего процесса проектирования Web-страниц, так и создания отдельных компонентов, в том числе мультимедийных, и их включения в объединяющую Web-публикацию.

Текстовой HTML-документHTML-документ может создаваться как в программной среде различных HTML-редакторов, так и в программном пакете Dreamweaver. Ввод символов может осуществляться вручную с клавиатуры, подготовленные в другой среде текстовые материалы, не имеющие структуры HTML-документа, могут вставляться в пакет Dreamweaver через буфер Clipboard. HTML-документы, созданные в других HTML-редакторах, раскрываются в этом пакете командой File/Open.

Поскольку в большинстве Web-страниц, размещаемых в российских Web-сайтах, используется кириллица, необходима предварительная настройка свойств HTML-документа. Настройка свойств текстового документа в Macromedia Dreamweaver осуществляется либо в диалоговом окне Page Properties, вызываемом командой Modify/Page Properties, либо с помощью панели контроллера поведения (свойств).

Окно настройки параметров документа Page Properties представлено на рис. 9.22Рис. 09.22. Окно настройки параметров документа «Page Properties».

Для создания русифицированного текста в списковом поле ввода данного окна Document Encoding необходимо выбрать одну из четырех следующих кодировок: Cyrillic (ISO-8859-5), Cyrillic (KOI-8-R), Cyrillic (Windows-1251) или Cyrillic (Mac).

В поле ввода Title окна настройки Page Properties вводится заголовок Web-страницы. В противном случае программный пакет Dreamveawer вставляет в поле заголовка Untitled Document (Неназванный документ).

В качестве фона проектируемой страницы может использоваться изображение, которое указывается в поле Background Image в виде ссылки на конкретный графический файл с расширением *.gif или *.jpg. Это изображение может размножаться, заполняя все поле страницы.

Вместо фонового изображения в поле Background можно задать код цвета фона. Код цвета фона задается автоматически. Для этого необходимо щелкнуть курсором мыши в поле визуализации цвета фона Background. Появляется палитра цветов, представленная на рис. 9.23Рис. 09.23. Палитра цветов.

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

Для более точного задания цвета или использования расширенной палитры цветов можно воспользоваться диалоговым окном Цвет, приведенным на рис. 9.24Рис. 09.24. Диалоговое окно «Цвет».

Визуализация этого окна осуществляется щелчком курсора мыши по пиктограмме Палитра, находящейся в правом нижнем углу окна рис. 9.23Рис. 09.23. Палитра цветов.

Цвет может выбираться в основной дискретной палитре цветов, в центральном поле цветовой гаммы с помощью курсора, имеющего вид крестика, либо задаваться вручную, путем ввода числовых значений в поля Red, Green, Blue, c соответствующей коррекцией оттенка, контраста и яркости цвета.

Рассмотренный способ визуального кодирования цветом используется для визуализации символов текста (поле Text), а также цветового выделения ссылок: новой (Link), посещенной (Visited) и выбранной (Active) в данный момент времени.

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

Общий вид панели контроллера представлен на рис. 9.25Рис. 09.25. Панель контроллера поведения (свойств) для текста.

Параметр Format определяет стиль блока текста. Стили Heading (Заголовок) используются для создания стандартной иерархической структуры форматированного текста. Меньшие цифры соответствуют большему размеру шрифта заголовка. Так, Heading 1 определяет самый большой заголовок.

Параметр Size задает размер шрифта (от 1 до 7) или относительный размер (от +/- 1 до +/- 7) - по отношению к размеру базового шрифта (BASEFONT - по умолчанию 3). Размер символов внутри тега HTML невозможно задать в традиционных для допечатных процессов единицах измерения; вместо этого используются таблицы стилей (для задания размеров символов для различных типов текста).

Пиктограммы Bold (Жирный) и Italic (Курсив) используются, как и в текстовых редакторах и пакетах верстки, для задания стиля текстового материала.

Выравнивание текста традиционно: Left (по левому краю), Center (по центру) и Right (по правому краю).

Опция Link преобразует выделенный текст в гиперссылку. Для этого в поле ввода Link вводится URL-адрес.

Параметр Target (цель) определяет фрейм или окно, в которое должна загружаться созданная текстовая страница. Для этого предварительно должен быть создан список имен всех фреймов Web-страницы (документа).

Если заданного фрейма во время загрузки не окажется в документе, страница загрузится в новое окно с заданным именем. Можно также воспользоваться зарезервированными именами для атрибута target:

    blank загружает страницу в новом окне без имени;

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

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

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

Параметр Text Color задает цвет выделенному тексту. Цвет выбирается из палитры цветов (рис. 9.23, 9.24) или задается шестнадцатеричное значение его кода.

Значки-пиктограммы в правом нижнем углу окна служат для создания списков (две пиктограммы - превращают выделенный параграф в элемент маркированного или нумерованного списка) и задания отступов (две кнопки: Indent - прямой отступ и Outdent - обратный отступ).

Кнопка List Item (Элемент списка) открывает диалоговое окно Свойства списка.

Форматирование текста в программном пакете Dreamweaver подобно форматированию текстового материала в стандартных текстовых редакторах. Инструменты форматирования также похожи на инструментарий стандартных редакторов.

Для форматирования текста используются команды меню Text или контроллер поведения (свойств). Чтобы изменить стилевое оформление текста, заданное по умолчанию (Paragraph, Preformatted, Heading 1, Heading 2 и т.п.), используется ниспадающее меню Format контроллера свойств или команда Text/ Format. Команды меню Text и контроллера свойств выполняют форматирование, используя стандартные теги HTML (такие, как B, FONT и CODE).

Для применения тега абзаца или заголовка:

    1. Выделяется абзац или его часть.

    2. В меню Format контроллера свойств или в главном меню Text/Format выбирается стиль абзаца. Для удаления стиля используется параметр None.

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

Выравнивание текста. Выровнять текст можно, воспользовавшись всплывающим меню в контроллере свойств или меню Text/Alignment.

Параметры выравнивания: Left, Right, Center (по левому и правому краю, по центру).

Для того чтобы задать отступ текста:

    1. Выделите нужный текст.

    2. Выберите Text/Indent, чтобы сдвинуть весь текст вправо, или Text/Outdent - чтобы сдвинуть текст влево.

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

В программном пакете Dreamweaver существует три типа стилей:

    Стиль тегов HTML переформатирует текст, заданный с помощью определенного тега, например HI. При создании стиля для данного тега изменяется весь текст в документе, к которому применяется данный тег.

    Каскадная таблица стилей (CSS) переопределяет форматирование для определенной комбинации тегов (например, TD H2 применяет переформатирование всякий раз, когда тег H2 встречается в ячейке таблицы) или для всех тегов, содержащих характерный атрибут ID (например, #myStyle применяется ко всем тегам, содержащим параметр ID=»myStyle»).

    Пользовательский стиль напоминает операции в текстовом процессоре над фрагментами текста. Стиль можно применить к любому текстовому блоку или фрагменту текста. Если применять стиль к текстовому блоку (абзацу или списку), то в HTML-код автоматически добавляется атрибут class в тег блока (например, <P class=»myStyle»> - для абзаца). А в случае фрагмента текста текст обрамляется тегами <SPAN> с атрибутом class.

Таблицы стилей. Спецификация CSS (Каскадные таблицы стилей) предложена консорциумом WWW. Программный пакет Dreamweaver позволяет задать любое свойство, описанное в данной спецификации.

Таблицы стилей работают в Браузербраузерах версий 4.0 и выше. В Microsoft Internet ExplorerMS Internet Explorer 4.0 можно изменить стили, используя язык сценариев JavaScript или VBScript, даже после загрузки страницы. В браузере Netscape Navigator 4.0Netscape Navigator 4.0 не предусмотрено изменение свойств стилей после загрузки страницы, но имеется возможность изменять свойства позиционирования.

Таблицы стилей располагаются в заголовке HTML-документа и определяют серию стилей.

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

Пример внешней таблицы (содержимое файла):

i { color: #33CC00}

td { font-family: Arial, Helvetica, sans-serif; color:#CCFF99}

b { color: #FF6600}

На рис. 9.26Рис. 09.26. Фрагмент текстового HTML-документа в окне Dreamweaver приведен пример созданного текстового HTM-документа в окне пакета Dreamweaver.

На рис. 9.27Рис. 09.27. Фрагмент текстового HTML-документа в виде HTML-кодов (тегов) приведен фрагмент этого же документа в виде последовательности HTML-кодов (тегов).

При вставке изображения в HTML-документ в программной среде Dreamweaver пакет автоматически генерирует ссылку на графический файл в HTML-коде. Эта ссылка на файл изображения предусматривает размещение файла в папке разрабатываемой Web-страницы или Web-сайта (сервера). В противном случае Dreamweaver формирует запрос на копирование графического файла в папке текущего сайта. При вставке внешних изображений может быть указан их URL-адрес.

Для вставки изображения в документ выполняется последовательность операций.

В поле рабочего окна документа курсором мыши отмечается место вставки изображения. Затем выбирается команда Insert/Image (Вставка/Изображение) или нажимается кнопка-пиктограмма Insert Image на панели Общие (Common) палитры объектов (рис. 9.28Рис. 09.28. Кнопка «Insert Image»).

В результате на экране визуализируется диалоговое окно Select Image Source (рис. 9.29Рис. 09.29. Диалоговое окно «Select Image Source»).

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

Возможна также вставка изображения путем перемещения кнопки Insert Image от палитры объектов (в режиме Common) до места будущего расположения вставляемого изображения в окне документа. В этом случае также появляется диалоговое окно вставки изображения Select Image Source, рассмотренное выше (рис. 9.29Рис. 09.29. Диалоговое окно «Select Image Source»).

В этом диалоговом окне с помощью переключателя Preview Images можно включать или выключать режим предварительного просмотра вставляемого графического файла.

Таким образом, выполнение рассмотренной последовательности операций приводит к встраиванию изображения в создаваемый документ. На рис. 9.30Рис. 09.30. Вставка изображения в публикацию показан вид рабочего окна программного пакета Dreamweaver с вставленным изображением.

В процессе вставки изображения в несохраненный документ пакет Dreamweaver формирует ссылку на файл изображения. Если документ сохраняется в сайте (site), Dreamweaver использует в ссылке относительный путь.

На рис. 9.31Рис. 09.31. HTML-код вставленного изображения приведен вид HTML-кода с вставленным изображением.

Атрибуты изображения задаются в панели контроллера поведения (свойств), приведенной на рис. 9.32Рис. 09.32. Панель контроллера поведения (свойств).

Панель раскрывается командой Windows/Properties при выделенном изображении.

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

В составе панели используются следующие элементы:

Поле Name (Имя). Это поле служит для задания имени изображения.

Поля W and H (Ширина и Высота). Эти два поля задают размеры пространства для размещения изображения на создаваемой странице. При загрузке изображения в окно просмотра Dreamweaver автоматически заполняет эти поля значениями исходных размеров изображения. Единицы размерности значений атрибутов по умолчанию и непомеченные значения задаются в пикселах. В дальнейшем можно также определять размеры в дюймах (in), миллиметрах (mm), сантиметрах (cm) и комбинациях этих единиц, например 2 in + 5 mm. Пакет Dreamweaver преобразует используемые значения в пикселы в HTML-коде.

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

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

Поле Src. Определяет исходный файл изображения. При щелчке по пиктограмме-иконке папки Browse for File (справа от поля) раскрывается рассмотренное ранее диалоговое окно Select Image Source, в котором указывается путь к исходному графическому файлу.

Поле Link (Связь). Определяет гиперссылку на изображение.

Поле Align (Выравнивание). Выравнивает изображение и текст по строке вставки. Режимы выравнивания приведены на рис. 9.34Рис. 09.34. Режимы выравнивания.

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

Поля V Space and H Space используются для задания пустого пространства вокруг изображения (в пикселах) с целью реализации режима обтекания рисунка текстом.

Поле Target (Адрес). Определяет фрейм или окно, в котором должна загрузиться связанная страница. В списке представлены имена всех фреймов в текущем документе.

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

    _blank - загружает связанный файл в новое, неименованное окно просмотра.

    _parent - загружает связанный файл в родительский тег <frameset> или окно фрейма, на который указывет связь. Если фрейм, содержащий связь, не вложен, загрузка файла осуществляется в полное окно просмотра.

    _self - осуществляет загрузку связанного файла в фрейм или окно, установленное связью.

    _top - загружает связанный файл в полное окно просмотра, удаляя при этом все фреймы.

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

Поле Border (Рамка). Используется для задания ширины рамки вокруг изображения в пикселах. При отсутствии рамки задается 0.

Map Name Field (Поле имени карты). Используется при создании клиентских карт изображения.

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

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

В процессе их создания используется панель контроллера свойств изображения (см. рис. 9. 33).

Клиентские карты изображений сохраняют информацию о гиперссылках в самом HTML-документе.

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

С клиентскими картами изображений работают практически все Браузербраузеры: Netscape NavigatorNetscape Navigator, NCSA MosaicNCSA Mosaic, Microsoft Internet ExplorerMicrosoft Internet Explorer.

Пакет Dreamweaver способен работать как с клиентскими, так и с серверными картами изображений.

Рассмотрим создание клиентских карт изображений.

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

Итак, выбираем изображение.

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

В поле Map вводится имя клиентской карты изображения. При наличии в одном документе нескольких карт изображений каждая карта должна иметь уникальное имя.

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

Активные области изображения могут иметь вид овала (окружности). Для их создания используется инструмент Овал. Курсором мыши выбирается этот инструмент, и перемещением курсора над изображением создается овальная активная область необходимых размеров (рис. 9.35Рис. 09.35. Создание активных областей различной формы).

    Активная область прямоугольной формы. Для ее создания используется инструмент Прямоугольник (Rectagular). Процедура построения прямоугольника подобна приведенной выше.

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

    После выбора активной области панель контроллера свойств визуально преобразуется в панель контроллера активной области (рис. 9.36Рис. 09.36. Панель контроллера активной области).

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

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

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

Активная область карты изображения может быть не единственной. Например, изображение можно разбить на квадранты, каждый из которых имеет ссылку на свой HTML-документ или его фрагмент.

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

Таблицы состоят из трех базисных компонентов:

    Строки (горизонтальный интервал).

    Столбцы (интервал между строками).

    Ячейки (контейнер, когда строка и столбец пересекаются).

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

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

При использовании пакета Dreamweaver можно преобразовывать размещение таблицы и размещение слоя (уровня). Таблицы и слои позволяют управлять позиционированием элементов страницы.

Вставка таблицы. Для того чтобы в HTML-документ добавить таблицу, необходимо выбрать объект таблица на панели объектов либо активизировать команду Insert/Table.

При этом появится окно для настройки параметров таблицы. (рис. 9.37Рис. 09.37. Диалоговое окно выбора параметров таблицы).

Тот же результат может быть получен и с помощью палитры объектов. В этом случае в рабочем окне документа курсором отмечается место вставки таблицы, а затем нажимается кнопка Table на панели Общие палитры объектов.

Можно просто переместить кнопку-пиктограмму Table от объектной палитры до будущего места вставки таблицы на создаваемой странице HTML-документа.

Все эти действия эквивалентны и приводят к появлению диалогового окна Insert Table (Вставка таблицы) (рис. 9.37Рис. 09.37. Диалоговое окно выбора параметров таблицы).

В форме выбирается количество строк (Rows) и столбцов (Columns) требуемой таблицы. Можно также задать ширину таблицы в процентах или пикселах (Width), толщину бордюра (Border), отступы внутри ячеек (Cell Padding) и между ними (Cell Spacing).

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

Нажатием кнопки ОК данного окна создается таблица с заданными параметрами и размещается в предварительно вы-бранном месте.

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

Для добавления текста к таблице:

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

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

    Вставьте текст, скопированный из другого документа. При этом рекомендуется использовать команду Insert/Text (Вставка/Текст), которая позволяет сохранить маркеры абзаца.

Напомним, что при вводе кириллицы необходимо выбрать кодировки символов в соответствии с рекомендациями, данными выше.

Перемещение по ячейкам таблицы можно осуществлять курсором мыши, клавишей tab (для последовательного доступа к ячейкам) или нажатием клавиш shift + tab (для возвращения в предыдущую ячейку). Нажатием клавиши табуляции в последней ячейке таблицы автоматически добавляется дополнительная строка таблицы.

Вставка изображения в таблицу:

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

    Нажимается кнопка-пиктограмма Insert Image в панели Общие объектной палитры или активизируется команда Insert/Image (Вставка/Изображение).

    В раскрывшемся диалоговом окне Select Image Source (рис. 9.29) выбирается файл изображения.

Процедура установки атрибутов изображения была рассмотрена ранее.

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

Для импортирования данных таблицы выполняется одна из следующих операций:

    Выберите команду File/Import/Import Table Data(Файл/ Импорт/Данные импорта таблицы).

    Выберите Insert/Tabular Data (Вставка/ Табличные данные).

На экране появляется диалоговое окно Import Table Data (Данные импортируемой таблицы) или Insert Tabular Data, в целом идентичные (кроме их заголовков). Их вид иллюстрируется рис. 9.38Рис. 09.38. Диалоговое окно «Insert Tabular Data».

В поле File Data (Файл данных) вводится имя импортируемого файла. При нажатии кнопки-пиктограммы Browse… раскрывается стандартное диалоговое окно Open, в котором можно выбрать импортируемый файл для автоматической вставки в поле File Data.

Для задания ширины таблицы используется одна из следующих опций:

    Fit to Data. Служит для создания таблицы, ширина которой кореллирует с самой длинной текстовой строкой в каждом столбце таблицы.

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

Выбираются опции форматирования таблицы:

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

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

В поле Format Top Row осуществляется выбор одной из четырех опций форматирования: отсутствие форматирования, полужирный, курсивный или полужирный курсив.

В поле Border задается ширина рамки таблицы в пикселах. При отсутствии рамки вводится значение 0.

Завершается процесс определения параметров щелчком по кнопке OK.

Выбор элементов таблицы осуществляется традиционными для пакетов электронных таблиц или текстовых редакторов способами:

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

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

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

Для выделения можно воспользоваться командами:

Щелкнем курсором мыши в поле таблицы. Активизируем команду Modify/Table/Select Table (Изменение/Таблица/Выбор таблицы). В результате выделяется вся таблица.

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

Форматирование текста в таблицах осуществляется в соответствии с общими правилами форматирования текста.

Добавление, объединение и удаление строк, столбцов и ячеек. В процессе создания таблицы, отвечающей требованиям размещения конкретной информации на странице, может возникнуть необходимость в модификации регулярной таблицы, задаваемой в диалоговом окне рис. 9.37Рис. 09.37. Диалоговое окно выбора параметров таблицы. Для этого используют команды подменю Modify/Table (рис. 9.39Рис. 09.39. Подменю работы с таблицами).

Команды приведенного подменю традиционны. Они предусматривают объединение ячеек (Merge Cells), разбиение ячеек (Split Cell…), вставку строк и столбцов (Insert Row, Column, Rows или Columns), их удаление (Delete Row, Column), увеличение размеров строки и столбца (Increase Row Span, Column Span), уменьшение размеров строки и столбца (Decrease Row Span, Column Span).

В качестве примера модификации элементов таблицы на рис. 9.40Рис. 09.40. Пример объединения ячеек приведена таблица с объединенными ячейками.

С помощью подменю Modify/Table и команды Insert Table могут создаваться и более сложные структуры, например в ячейки таблицы могут вставляться вложенные таблицы. На рис. 9.41Рис. 09.41. Пример встраивания таблиц в таблицу приведен пример встраивания двух таблиц в модифицированные ячейки первичной таблицы.

Ниже приведен фрагмент HTML-кода последнего примера (рис. 9.42Рис. 09.42. Фрагмент HTML-кода сложной таблицы).

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

ФормыФормы служат для организации интерактивного взаимодействия с электронным изданием и сбора информации о посетителях Web-сервера (сайта).

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

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

Объекты формы. В пакете Dreamweaver элементы формы называются объектами формы. В этой программной среде можно вставлять объекты формы, используя панель форм палитры объектов, или с помощью команд Insert/Form (Вставка/Форма) и Insert/Form Object (Вставка/Объекты формы). Ниже приведено подменю команды Insert/Form Object (рис. 9.43Рис. 09.43, а. Панель «Forms» Рис. 09.43, б. Подменю команды «Insert/Form Object»).

В программной среде Dreamweaver используются следующие объекты форм:

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

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

      1. Кнопки отправки. При активизации этих кнопок производится отправка данных формы. В форме может быть несколько кнопок отправки.

      2. Кнопки сброса. При их активизации для всех элементов формы устанавливаются исходные значения.

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

    Radio Button (кнопки с зависимой фиксацией). Эти объекты формы называют также флажками. Флажки или кнопки с зависимой фиксацией - это переключатели вкл./выкл., которые могут переключаться пользователем. Выбор определенной кнопки внутри группы отменяет выбор всех других кнопок в группе. Если одна кнопка включена, другие обязательно выключены.

    Checkbox (переключатель). Переключатели позволяют получить множественные ответы в группе опций.

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

    Image field (поле изображения). В форму могут вставляться изображения. Поля изображения используются вместо обычных кнопок. Их называют «графические кнопки».

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

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

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

    Задается курсором мыши место вставки формы и выбирается команда Insert/Form (Вставка/Форма).

    Задается курсором мыши место вставки формы и нажимается кнопка Form на панели форм объектной палитры.

    Перемещается кнопка Form к месту ее расположения на Web-странице. При этом курсор преобразуется в стрелку с двумя маленькими квадратами, в одном из которых размещен знак плюс.

В результате на экране в окне документа появляется красный штрихпунктирный контур (рис. 9.44Рис. 09.44. Контур размещения формы), в который в дальнейшем будет помещаться объект формы.

Если нет видимых результатов, необходимо проверить состояние опции View/Invisible (Просмотр/Невидимые элементы).

Выбирается объект формы, и устанавливаются его атрибуты на панели контроллера свойств.

Вызов панели контроллера свойств осуществляется двойным щелчком курсора мыши в поле созданной рамки. Ее вид иллюстрируется рис. 9.45Рис. 09.45. Панель контроллера свойств в режиме работы с формой.

В поле Form Name (Имя формы) контроллера свойств вводится уникальное имя объекта формы.

В поле Action (Действие) задается URL-адрес приложения, которое обработает информацию формы.

В поле Method (Метод) определяется, как обрабатываются данные формы. Возможны следующие варианты:

    Post. Используется для пересылки значения формы в теле сообщения (Post-запрос Web-серверу).

    Get. Используется для передачи набора данных формы в виде добавления к URL-адресу. Объединенное значение формы с URL посылается серверу в виде GET-запроса.

    Default. Использует заданный по умолчанию метод программы просмотра.

Фактически операции с формой используются для введения в HTML-документ тега (управляющего элемента) <Form>…</Form> (рис. 9.46Рис. 09.46. HTML-код создания формы). В дальнейшем форма должна приобрести физический смысл в виде конкретного объекта или элемента формы.

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

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

Помещаем место вставки внутри контура формы. Затем выполняем одну из следующих операций:

    Выбираем команду Insert/Form Object/Text Field (Вставка/Объект формы/Текстовое поле).

    В панели форм палитры объектов нажимаем иконку Insert Text Field (Вставка текстового поля).

Текстовое поле появляется в документе.

В панели контроллера свойств (для текстового поля) вводится уникальное имя этого поля. Имя набирается без пробелов, например, first_name.

В поле Char Width:

    Можно использовать настройку по умолчанию, которая устанавливает длину текстового поля в 24 символа.

    Можно ввести число, определяющее длину текстового поля.

В поле Max Chars можно:

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

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

Для выбора типа используются три флажка: Single-line, Multi- line и Password.

В поле Init Val вводится текст, который будет отображаться в текстовом поле при загрузке формы в окно просмотра пользователя.

Рядом с объектом формы можно ввести текстовое пояснение.

Ниже на рис. 9.48Рис. 09.48. Пример полей ввода текста приведены поля ввода текста в окне браузера.

На рис 9.49Рис. 09.49. Пример фрагмента HTML-кода описания создаваемых полей ввода воспроизведен фрагмент HTML-документа с созданными текстовыми полями ввода.

По аналогии создаются и другие объекты форм. На рис. 9.50Рис. 09.50. Примеры объектов форм, создаваемых в среде Dreamweaver приведены примеры кнопок, переключателей, списков и полей ввода файлов, созданных в рассматриваемой среде программного пакета Dreamweaver.

Фрейм. Создание в Macromedia Dreamweaver Создание фреймов. В программной среде Macromedia DreamweaverMacromedia Dreamweaver имеются два способа создания фреймов с помощью тега <Frameset>: можно вставлять фреймы непосредственно или можно выбрать один из предложенных вариантов. В последнем случае автоматически устанавливается весь набор фреймов, необходимых для организации размещения информации в фреймах Web-страницы.

Автоматическая вставка фреймов базируется на использовании панели Frames палитры Objects (рис. 9.51Рис. 09.51. Панель «Frames» палитры «Objects»).

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

Для вставки в документ одного из фреймов курсором отмечается место вставки.

Затем выполняется одно из следующих действий:

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

    Вставку фреймов можно производить с помощью меню команды Insert/Frames (рис. 9.52Рис. 09.52. Меню команды «Insert/Frames»). В этом случае активизируется одна из команд, соответствующая необходимому фрейму: Insert/Frames (Вставка/Фрейма)/Left (Слева), Right (Справа), Top (Вверху), Bottom (Снизу), Left and Top (Слева и вверху), Left Top (Слева вверху), Top Left (Вверху слева) или Split (Разбиение).

При создании фреймов (или вставки тега <frameset> в HTML-документ) можно сделать видимыми рамки фрейма в окне документа. Для этого используется команда View/Frame Border (Рамка фрейма). В режиме визуализации фрейма команда отмечена галочкой (рис. 9.53Рис. 09.53. Меню «View»).

Для создания фреймов можно использовать меню команды Modify/Frameset: Split Frame Left, Split Frame Right, Split Frame Up, Split Frame Down (рис. 9.54Рис. 09.54. Меню команды «Modify/Frameset»). Эти команды позволяют создавать дополнительный фрейм слева, справа, вверху и внизу существующего фрейма.

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

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

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

Разбивка имеющегося фрейма (или отмеченного в существующих фреймах) создает новый (вложенный) набор фреймов внутри текущего набора. Набор фреймов внутри другого набора называется дочерним (nested). Для создания дочернего набора фреймов:

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

    В выбранном фрейме командой Modify/Frameset/Split Frame Up (Down, Left или Right) создается дочерний фрейм.

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

На рис. 9.55Рис. 09.55. Пример родительских и дочерних (вложенных) фреймов приведен пример родительских и дочерних фреймов, созданных последовательным (двукратным) применением иконки-пиктограммы Insert Top and Nested Left Frame. Фреймы, созданные при вторичном использовании указанной иконки-пиктограммы, иногда называют вложенными.

Для удаления фрейма следует перетащить границу фрейма за пределы страницы или к границе родительского фрейма.

Сохранение файлов в фреймах и наборах фреймов. Web-cтраница с фреймами содержит несколько файлов. Поэтому нужно выбрать такую опцию, которая бы сохраняла необходимую информацию: файл фрейма, набор фреймов или содержимое всех файлов фреймов.

Для сохранения HTML-документа, расположенного внутри фрейма, курсор размещается внутри фрейма и активизируется команда File/Save.

Чтобы сохранить набор фреймов, используется команда File/Save Frameset или File/Save Frameset As.

Для сохранения фреймов вместе с содержимым активизируется команда File/Save All.

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

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

    Удерживая клавишу Alt, щелкнуть курсором мыши в поле фрейма.

    Можно активизировать команду Window/Frames, а затем выбрать фрейм в панели контроллера свойств фреймов (рис. 9.56Рис. 09.56. Панель контроллера свойств фрейма).

    При нажатой клавише Alt с помощью клавиши «стрелка вправо» осуществляется выбор следующего фрейма.

    Для выбора родительского набора фреймов нажимаются клавиши Alt и «стрелка вверх».

    Для выбора дочернего фрейма нажимаются клавиши Alt и «стрелка вниз».

Для выбора набора фреймов выполняется одно из следующих действий:

    Можно щелкнуть на границе фрейма, входящего в набор.

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

После выбора набора фреймов в окне документа все фреймы в этом наборе будут выделены пунктирной линией.

Контроллер фреймов (Ctrl+F10) отображает наборы фреймов в текущем документе и позволяет выбрать набор фреймов или конкретный фрейм для доступа к его свойствам.

С помощью пиктограммы Quick Tag Editor панели контроллера свойств фрейма можно просматривать и редактировать HTML-код вставки фреймов (рис. 9.57Рис. 09.57. Окно редактирования HTML-кода).

В заключение приведем пример HTML-кода, описывающий три пустых фрейма, соответствующих действию иконки-пикто-граммы Insert Top and Nested Left Frame (рис. 9.58Рис. 09.58. Пример HTML-кода для трех фреймов).

Для размещения информации в Web-сайте могут использоваться слои.

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

Свойства слоя, задаваемые по умолчанию (используемый тег (tag), видимость (visibility), высота (height) и ширина (width) и т.д.), определяются в параметрах слоя. Чтобы изменить установки по умолчанию, используется команда Edit/Preferences, режим Layers (Слои). По этой команде раскрывается диалоговое окно, представленное на рис. 9.59Рис. 09.59. Диалоговое окно «Preferences» (режим «Layers»).

В данном диалоговом окне визуализируются значения параметров, заданные по умолчанию. Так, Dreamweaver создает слои, используя тег <DIV>, и вставляет HTML-код слоя в текущую позицию курсора или при рисовании слоя в начало страницы, после тега <BODY>. При создании дочернего (nested) слоя Dreamweaver вставляет код в тело тега родительского слоя.

В представленном на рис. 9.59Рис. 09.59. Диалоговое окно «Preferences» (режим «Layers») диалоговом окне производится установка следующих параметров:

    Параметр Tag определяет тег, используемый при создании слоя. SPAN и DIV создают CSS-слои; LAYER и ILAYER - слои для Netscape NavigatorNetscape Navigator.

    Параметр Visibility определяет видимость слоев.

    Параметр Width and Height (ширина и высота) задает ширину и высоту слоя при создании его с помощью команды Insert/Layer.

    Параметр Background Color (цвет фона) определяет цвет фона по умолчанию.

    Параметр Background Image задает фоновое изображение по умолчанию.

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

Для исключения перекрывания слоев при их создании нужно использовать команду Modify/Arrange/Prevent Layer Overlaps.

Для непосредственного редактирования свойств тега на панели Слои нажмите на кнопку . Появляется фрагмент HTML-документа, касающийся вставки слоя.

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

    Для вставки слоя курсором отмечается место вставки слоя в рабочем окне документа. Затем активизируется команда Insert/Layer.

    При перетаскивании слоя щелкните мышью на значке слоя (Draw Layers) в палитре объектов и перетащите курсором в окно документа. Слой будет размещен в том месте, где была отпущена левая кнопка мыши.

    Для рисования слоя необходимо щелкнуть мышью на значке Draw Layers (Слой) на палитре объектов. Затем в окне документа рисуется прямоугольник (как в графических пакетах) требуемого размера. В окне документа появится метка слоя (в верхнем левом углу). Если метка не видна, активизируется команда View (Вид) /Invisible Elements (Невидимые элементы). На панели слоев (рис. 9.60Рис. 09.60. Многофункциональное окно в режиме «Layers») имя слоя отображается в колонке Name. По мере создания новых слоев они отображаются как стековый список (вновь создаваемые слои появляются вверху списка).

Панель слоев - это визуальная карта слоев документа. Выберите Window/Layers, чтобы открыть панель слоев. Слои отображаются как список имен, первые слои отображаются в конце, а слои, созданные позднее, в начале списка. Дочерние слои отображаются как имена, соединенные с родительскими.

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

Управлять параметрами слоя можно и с помощью панели Layers палитры Объекты.

На рис. 9.61Рис. 09.61. Панель «Layers» палитры «Объекты» (в рабочем окне программы) приведено рабочее окно документа с двумя созданными слоями, один из которых выделен.

Дочерние (Nesting) слои. Дочерний слой - это слой, созданный внутри другого слоя. Создать дочерний слой можно теми же способами, что и слои.

Дочерние слои используются для их группировки. Они могут сдвигаться вместе с родительским и наследуют свойства видимости. В Netscape Navigator слои, созданные с помощью тегов LAYER и ILAYER, могут расширяться, чтобы поместить дочерние слои.

Пример кода HTML для дочерних слоев:

<div id="Parent" style="position:absolute; left:56px; top:54px;

width:124px; height:158px; z-index:1;">

Содержимое родительского слоя.

<div id="Nested" style="position:absolute; left:97px; top:114px;

width:54px; height:69px; z-index:1;">

Содержимое дочернего слоя.

</div>

</div>

Для создания дочернего слоя выполняется одно из следующих действий:

    Для вставки дочернего слоя поместите курсор в существующий слой и выберите команду Insert/Layer.

    Для создания дочернего слоя перетаскиванием щелкните на значке Layer в палитре объектов и, не отпуская кнопки мыши, перетащите в существующий слой.

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

Свойства слоев. Для изменения свойств слоев, таких, как имя, расположение, а также других, используется панель контроллера свойств (рис. 9.62Рис. 09.62. Панель контроллера свойств слоя). Layer ID задает идентифицирующее имя слоя, используемое в панели слоев и в сценариях. В имени позволяется использовать буквенно-цифровые символы. Не рекомендуется использовать спецсимволы, такие, как пробелы, слэш и знаки степени.

Параметр Tag определяет тип слоя (CSS или Netscape). Теги SPAN и DIV создают слои CSS; LAYER и ILAYER создают слои Netscape.

Значение Overflow (только CSS-слои) определяет реакцию CSS-слоя, если содержимое превышает размеры слоя.

Параметр Clip определяет, какая часть слоя будет видимой.

Параметры L и T задают позицию относительно верхнего левого угла страницы или родительского слоя.

Параметры W и H задают ширину и высоту слоя. Эти параметры игнорируются, если содержимое имеет определенные размеры.

Для CSS-слоев расположение по умолчанию и размер задаются в пикселах (px). Можно также использовать следующие единицы размерности: pc (picas), pt (points), in (дюймы), mm (миллиметры), cm (сантиметры) или % (в процентах от значения родительского слоя).

Параметр Overflow определяет реакцию CSS-слоя, если содержимое превышает размеры слоя.

Параметр Z-Index определяет z-индекс (приоритет) слоя. Слои с более высоким значением z-индекса появляются над слоями с более низким значением. Значения могут быть и отрицательными. Для изменения данного параметра рекомендуется использовать панель слоев.

Слои Netscape (использующие теги LAYER или ILAYER) могут взаимно перекрываться. При использовании слоя Netscape в правом нижнем углу контроллера свойств появляются два дополнительных параметра.

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

Возможны следующие значения:

    Default (по умолчанию) не задает свойств видимости, но многие Браузербраузеры интерпретируют этот параметр как наследуемое свойство.

    Inherit (наследование) использует свойство видимости родительского слоя.

    Visible (видимый) отображает содержимое независимо от значения родительского слоя.

    Hidden (скрытый) скрывает содержимое слоя независимо от значения родительского слоя.

Параметры Bg Image и Bg Color задают фоновое изображение и цвет для слоя. Можно оставить поле пустым, если необходимо, чтобы фон был прозрачным.

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

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

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

В среде Dreamweaver существует несколько возможностей придания интерактивности электронным изданиям и использования в них средств анимации.

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

Для создания анимаций используется специальная функция Timelines. Она не требует внедрения объектов (plugins), элементов управления ActiveX или Java-апплетов. Timelines используют динамический (dynamic) HTML для изменения местоположения слоя или исходного файла изображения с течением времени или вызова линии поведения после загрузки страницы.

В то же время можно использовать Java-апплеты, Shockwave и Flash Player ролики, любые элементы управления ActiveX или Netscape-plugins для внедрения в электронное издание анимационных роликов, интерактивных схем навигации и других мультимедийных элементов.

Применение линии поведения. Можно применить линию поведения как к целому документу (<BODY>), так и к ссылке, изображению, элементу формы или к любому из нескольких управляющих элементов HTML. Какие из управляющих элементов HTML могут воспринимать линии поведения, зависит от используемых браузеров. Microsoft Internet Explorer 4.0Internet Explorer 4.0, например, имеет несколько больший набор событий для каждого управляющего элемента, чем Netscape Navigator 4.0 или любой браузер версии 3.0.

Можно определить более одного действия для каждого из событий. События происходят в порядке расположения.

Применение линии поведения:

Выбираем объект. Для применения линии поведения к целой странице необходимо щелкнуть на теге <body> в нижней левой части рабочего окна документа.

Активизируем команду Window/Behaviors. При этом раскрывается панель контроллера поведения (рис. 9.63Рис. 09.63. Панель контроллера поведения («Behavior»)).

Аналогичный результат можно получить, щелкнув курсором мыши на кнопке Behavior панели управления. Тег HTML выбранного объекта отобразится в заголовке панели.

Щелкнем на кнопке + панели и выберем необходимое действие из меню Действия (рис. 9.64Рис. 09.64. Меню «Действия»).

Действия, которые не могут быть использованы в данном документе, недоступны в меню. Например, любые действия с Timeline в этом случае недоступны (рис. 9.65Рис. 09.65. Подменю «Timeline»).

В раскрывшемся диалоговом окне вводим соответствующие параметры и нажимаем кнопку OK. Например, на рис. 9.66Рис. 09.66. Пример диалогового окна приведено диалоговое окно Change Property (Изменить свойства).

Все приведенные в меню действия работают в браузерах версий 4.0 и выше.

В колонке событий (Events) появится событие, заданное по умолчанию. В меню События (треугольная стрелка справа от названия события) можно вызвать другое событие. Появляющийся список событий зависит от выбранного объекта и используемого браузера (в подменю Show Events For). Если ожидаемого события в списке нет, необходимо убедиться в правильности выбора объекта или изменить браузер в подменю Show Events For. При применении линии поведения к изображению такие события, как onMouseOver и onMouseDown, появляются в скобках. Эти события доступны только для ссылок. При выборе одного из них Dreamweaver обрамляет тегами <A> изображение для определения ссылки. Не следует удалять знак (#), впоследствии появляющийся в параметре Link в контроллере свойств, иначе вместе в ним будет удалена линия поведения.

Timeline. В программном пакете Macromedia DreamweaverMacromedia Dreamweaver используется Dynamic HTML (DHTML), который открывает возможности изменения стиля и свойств позиционирования объектов, используя язык сценариев.

В частности, функция Timelines пакета Dreamweaver использует Dynamic HTML для изменения свойств слоев или изображений в нескольких кадрах в течение заданного интервала времени. Проиллюстрируем использование функции Timelines для создания анимаций.

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

Контроллер Timeline. Контроллер Timeline (рис. 9.67Рис. 09.67. Панель контроллера Timeline) отображает свойства изображений и слоев на определенном интервале времени. Чтобы открыть панель контроллера Timeline, активизируется команда Window/Timeline.

Шкала воспроизведения панели контроллера Timeline показывает, какой слой в данный момент отображен на странице.

Щелчком правой кнопки на панели контроллера Timeline открывается контекстное меню, представленное на рис. 9.68Рис. 09.68. Контекстное меню контроллера Timeline.

Контекстное меню определяет, какой Timeline объекта в данный момент отображен на панели контроллера Timeline.

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

Ключевые кадры - это кадры в полоске анимации, в которых заданы определенные свойства объекта (например, местонахождение). Dreamweaver вычисляет средние значения для кадров, находящихся между ключевыми. Ключевые кадры обозначаются кружочками (рис. 9.69Рис. 09.69. Ключевые кадры).

Канал поведения - это канал для линий поведения, которые должны быть исполнены в определенном кадре Timeline.

Timelines создает анимацию, изменяя позицию, размер, видимость и взаимное расположение слоев на странице. Timelines может перемещать только слои. Для перемещения текста, изображения или любого другого объекта их следует поместить внутрь слоя.

Для создания Timeline анимации используются следующие операции:

    Помещаем слой в начальное положение.

    Активизируем команду Window/Timeline. На экране появляется панель контроллера Timeline.

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

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

Длина полоски слоя (число кадров) определяется установками поля Fps панели. В данном случае используется установка в 15 кадров.

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

    Щелкнем на конце полоски в панели контроллера Timeline. В конечном кадре появляется красная метка.

    Переместим слой в место конечного расположения. При этом от пиктограммы слоя (в рабочем окне) к левому верхнему углу поля слоя визуализируется прямая линия (рис. 9.71Рис. 09.71. Траектория перемещения слоя).

    Если необходимо, чтобы слой передвигался по более сложной дуге, выбираем его полоску анимации (animation bar) и, удерживая клавишу Ctrl, щелкаем в середине полоски для добавления еще одного ключевого кадра. На рис. 9.72, аРис. 09.72. Создание промежуточного кадра, бРис. 09.72. Создание промежуточного кадра приведены панель контроллера и вид встроенного кадра в рабочем окне программного пакета.

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

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

Длина полоски слоя (т.е. число кадров) может корректироваться. Для этого достаточно нажать курсором на точке последнего кадра и перетащить влево или вправо (уменьшая или увеличивая число кадров).

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

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

Создание Timeline заданием траектории:

    Выберем команду Insert/Layer для создания слоя.

    Щелкнув на пиктограмме, выбираем слой (или рисунок) для анимации.

    Выберем команду Modify/Timeline/Record Path of Layer.

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

    В конце траектории отпускаем кнопку мыши. Dreamweaver добавит полоску анимации в Timeline с соответствующим числом кадров.

    В панели Timeline контроллера нажимаем на кнопке-пиктограмме Play. После некоторой задержки начинается процесс предварительного просмотра анимации.

Ниже приведен пример (рис. 9.73 Рис. 09.73, а. Результаты моделирования - рабочее окно Dreamweaver) Рис. 09.73, б. Результаты моделирования - окно браузера Internet Explorer)) моделирования движения космического объекта в зоне радиовидимости наземного УКВ-пункта.

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

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

JavaScript. Вызов JavaScriptJavaScript в контроллере поведения позволяет определить пользовательскую функцию или подпрограмму JavaScript, которая выполняется после определенного события.

Для того чтобы воспользоваться вызовом JavaScript, необходимо в меню Действия (см. рис. 9.64Рис. 09.64. Меню «Действия») активизировать команду Call JavaScript (Вызов JavaScript).

В поле JavaScript раскрывшегося диалогового окна Call JavaScript (рис. 9.74Рис. 09.74. Диалоговое окно «Call JavaScript» (Вызов JavaScript)) вводится выполняемая подпрограмма JavaScript или имя соответствующей функции.

Например, для создания кнопки Назад можно ввести if (history.length >0) {history.back()}. Для выполнения функции введите ее имя (например, goBack()).

Нажимаем кнопку OK.

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

Программный пакет Macromedia DreamweaverMacromedia Dreamweaver предназначен для создания и редактирования сайтов и управления ими.

Web-сайтWeb-сайт - это набор связанных HTML-документов, объединенных предметной областью, тематикой и целями.

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

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

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

В пакете Dreamweaver термин «сайт» может относиться как к Web-сайту в целом, так и к локальной странице документа, принадлежащей Web-сайту.

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

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

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

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

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

Необходимо иметь в виду, что некоторые теги HTМL и их атрибуты по-разному воспроизводятся в различных браузерах. Например, ряд браузеров в настоящее время не воспроизводит теги типа <Object>, неадекватно воспринимает некоторые атрибуты тегов. Разметка страницы, базирующаяся на задании областей экрана в пикселах, в различных по разрешению мониторах воспроизводится по-разному. Поэтому при разработке Web-сайта необходимо учитывать особенности среды пользователя. Более того, перед профессиональными Web-мастерами заказчики ставят задачу обеспечения идентичности визуального вида Web-страниц в любых современных браузерах и компьютерах. В связи с этим необходимы взвешенное использование возможностей языка HTMLHTML и последующая проверка созданных страниц Web-сайтов на адаптацию к существующим аппаратно-программным средствам потенциальных клиентов.

Программная среда Dreamweaver программно и информационно совместима с широко распространенным браузером Netscape Navigator. Программа FrontPage - с браузером Microsoft Internet Explorer. Обычно именно в этих браузерах проверяется правильность интерпретации созданного HTML-кода. Некоторые разработчики отправляют по электронной почте сообщения с просьбой просмотреть созданный сайт, реализуя тем самым обратную связь с широкой аудиторией.

Немаловажное значение имеет носитель, который используется для хранения Web-сайтов. Например, в Web-сайте, размещенном на Web-сервере в сети, вставленные изображения оптимизируются с учетом пропускной способности сети. В Web-сайтах на CD-ROM могут размещаться полноцветные изображения с глубиной цвета 24 и 32 бит/пиксел.

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

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

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

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

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

Ниже приведен пример структуры локального Web-сайта и иерархической структуры хранения информации (рис. 9.75Рис. 09.75. Пример структуры Web-сайта).

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

Процесс проектирования структуры в данной программной среде рекомендуется осуществлять, базируясь на использовании программного обеспечения типа Macromedia FreeHandFreeHand или Fireworks, заменяющих ручное рисование на бумаге.

Рекомендуется, чтобы все страницы Web-сайта имели идентичный набор средств навигации.

Проектирование схемы навигации. При проектировании Web-сайта большое значение имеет оценка знаний и опыта потенциальных посетителей. Необходимо продумать вопрос, как посетитель Web-сайта будет перемещаться от одной области сайта к другой; проработать рациональную систему «отката». Обычно используются два способа: ссылки по глубине Web-страницы и горизонтальные ссылки внутри раздела или темы. Возвращение с любого уровня в исходную точку не всегда целесообразно. Конкретное решение принимается исходя из анализа предметной области.

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

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

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

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

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

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

Создать сайт можно, задав корневую директорию, с помощью команды Site/Define Sites (Определить Web-сайт). Связать локальный сайт с удаленным можно, задав дополнительные параметры диалогового окна Define Sites.

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

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

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

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

Определение Web-сайта. Для того чтобы определить Web-сайт:

    Выбирается команда Site/Define Sites.

    В появившемся диалоговом окне (рис. 9.76Рис. 09.76. Диалоговое окно «Определение сайта») нажимается кнопка New или выбирается существующий сайт и нажимается Edit.

    В результате на экране появляется диалоговое окно Site Definition (рис. 9.77Рис. 09.77. Диалоговое окно «Site Definition»).

    В панели Local Info (Локальная информация) вводится имя сайта (поле Site Name). Имя сайта появляется в окне сайта и в подменю Site/Open Site. В дальнейшем это имя будет использоваться для ссылок.

    Щелчком на значке папки (справа от поля Local Roof Folder) указывается локальная корневая директория сайта (задающая верхний уровень сайта).

    Для опции Refresh Local File List Automatically указывается положение флажка. Галочка в поле флажка указывает на автоматический режим обновления локального списка файлов при копировании в локальный сайт. В противном случае предусматривается ручной режим обновления.

    В поле HTTP Address вводится URL-адрес нового сайта. Например, адрес сайта Macromedia: http://www.dreamcentral.com. Введенное значение используется контроллером ссылок (Link Checker) для определения, относится ли ссылка, заданная абсолютным путем, к данному сайту или другому.

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

    Нажимается кнопка ОК.

На этом процесс определения сайта завершается и открывается окно Site Files.

Редактирование существующего Web-сайта. Dreamweaver можно использовать и для редактирования существующего Web-сайта на локальном диске, даже если этот сайт создавался без применения Dreamweaver.

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

Использование системы резервирования и освобождения файлов (check in/check out system). При корпоративной работе по созданию сайта вы можете зарезервировать файлы при передаче между удаленным и локальным компьютерами.

Резервирование файла (check out) эквивалентно предупреждению: «В данный момент этот файл используется». При резервировании файла рядом с иконкой файла в окне сайта изображается галочка. Зеленая галочка означает, что файл был зарезервирован вами (т.е. вы последний его редактировали), а красная - то, что его зарезервировал другой разработчик (его имя отображается рядом).

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

При резервировании Dreamweaver сохраняет в файле с расширением *.lck имя того, кто в данный момент зарезервировал файл (имя файла, сходное с именем зарезервированного файла). Файлы с расширением *.lck не видны в окне сайта.

Dreamweaver не присваивает зарезервированным файлам атрибут «только для чтения». При передаче с помощью другого приложения можно перезаписать зарезервированные файлы. Однако другие приложения (FTP-клиенты) отображают файл *.lck, следующий за зарезервированным файлом, для предотвращения подобных коллизий. Можно разрешить или запретить резервирование для конкретных сайтов.

Приведем несколько примеров электронных изданий, созданных студентами кафедры «Информационные технологии» Московского государственного университета печати в рамках курсовой работы по электронным изданиям. Представленные работы выполнены в среде программного пакета Macromedia DreamweaverMacromedia Dreamweaver.

В качестве первого примера укажем электронное издание «Руководство по HTML». Титульный лист выполнен по классической форме и состоит из трех фреймов: фрейма заголовка, фрейма меню и главного фрейма, в поле которого визуализируется содержание издания. Заголовок издания размещен в верхней части окна, в котором постоянно визуализируется название работы. Видимая граница между фреймом заголовка и главным фреймом отсутствует. Левую сторону рабочего окна занимает фрейм меню, в котором приведено содержание работы. Каждая позиция меню связана с соответствующим фрагментом в материале издания. Поскольку электронное издание невелико по объему, меню выполнено в виде списковой структуры (без разворачивающихся списков). Выбор раздела осуществляется щелчком мыши на соответствующем пункте оглавления. При этом происходит автоматическое перемещение текстового материала в фокус. Как альтернатива, предусмотрено пролистывание разделов с помощью системы скроллинга. Общий вид электронного издания в окне браузера просмотра Internet Explorer приведен на рис. 9.78Рис. 09.78. Вид электронного издания в окне браузера. Навигация внутри документа базируется на локальных ссылках типа метка-фрагмент, фрагмент-фрагмент, метка-рисунок и т.д.

На рис. 9.79Рис. 09.79. Реализация ссылки на изображение приведен пример ссылки (рис. 9.78) на рисунок. При щелчке курсором мыши по изображению происходит возврат в место ссылки на рисунок и может продолжаться дальнейший просмотр материала документа.

Второе электронное издание «Ассоциации электронных технологий» выполнено с титульным листом в виде двух фреймов: главный кадр и кадр меню (рис. 9.80Рис. 09.80. Титульный лист электронного издания «Ассоциации электронных технологий»). В поле фрейма меню вставлено изображение.

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

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

Строка авторов (выделенная подчеркиванием) выполнена в виде текстовой ссылки на оглавление учебного пособия.

Предложенный выше материал характеризует функциональные возможности программного пакета Macromedia DreamweaverMacromedia Dreamweaver и особенности работы в данной программной среде при создании электронных изданий и их компонентов. Некоторые функции Macromedia Dreamweaver по созданию Web-сайтов и Web-страниц, интегрированные в среду Microsoft FrontPage, будут рассмотрены в следующей главе.

© Центр дистанционного образования МГУП