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

Вуль Владимир Абрамович

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

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

Панель вызывается с помощью одноименной подкоманды View | Toolbars | Navigation команды Toolbars (см. рис. 6.3). Эти инструменты позволяют рационально разместить в пределах панели представления даже достаточно сложные структуры сайтов. Кстати, те страницы, которые в дальнейшем окажутся бесполезными, можно легко удалить. Для этого страница выделяется в режиме Navigation (панель представления в этом режиме показана на рис.6.5) и нажимается клавиша Del на клавиатуре компьютера.

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

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

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

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

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

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

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

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

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

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

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

Эта палитра с помощью 16 различных инструментов позволяет включать в состав страницы различные элементы, в частности, по порядку расположения кнопок в палитре в направлении слева направо и сверху вниз: Image (Изображение), Rollover Image (Анимированную кнопку), внешний вид которой изменяется при подведении к ней курсора мыши, Table (Таблицу), Tabular Data (таблицу с занесенными в нее данными, подготовленными заранее в другом

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

Палитра Objects раздел Characters (Шрифтовые элементы) позволяет добавить на Web-страницы один из 12 различных специальных символов, в том числе: Line break (переход на новую строку), Copyright (знак авторского права), Trademark (зарегистрированный торговый знак), денежные знаки, в том числе, Pound (фунт стерлингов), Yen (иена), Euro (евро), а также Right & Left Quote (открывающие и закрывающие кавычки), Em-dush (тире) и другие знаки (рис. 6.11).

Палитра Objхects раздел Foхrms (Формы), показанная на рис. 6.12, служит для создания форм (см. разд. 2.8) и содержит следующие кнопки: Form (Форма), Text field (текстовое поле), Button (Кнопка), Checkbox и Radio Batton (Переключатели), List/menu (Список/меню), File field (Поле для передачи файлов) и Image field (Поле для передачи изображений), Hidden field (Скрытое поле) и Jump menu (Указатель гиперссылки для перехода на другой сайт).

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

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

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

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

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

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

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

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

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

6.2.2. Последовательность проектирования сайта в пакете Dreamweaver

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