Планирование узла

Члены команды

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

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

Информационный архитектор. Это — относительно новая роль, однако она становится все более критичной в процессе разработки. Он работает с техническим директором, творческим руководителем и клиентом над созданием среды, в которой будет размещено содержание. Он определяет, как будет структурирована информация на узле, как она будет распределена по страницам узла, а также разрабатывает технологическую инфраструктуру. Никогда не стоит забывать, что целью создания любого узла является донесение информации до пользователя. Задачей информационного архитектора является обеспечение доступности и понятности информации. По этой теме Джекобом Нильсеном (Jakob Nielson), Джефри Вином (Jeffrey Veen) и Стивом Крагом (Steeve Krug) были написаны прекрасные книги, хотя бы пару из которых нужно обязательно иметь любому агентству или фирме, занимающимся Web-дизайном.

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

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

Главный технолог. Эту личность многие называют "Big Geek", однако давайте не попадаться в ловушку следования стереотипам. Этот член команды отвечает за то, как работает узел. Он должен составить документ, в котором описываются технические и функциональные спецификации. Также он должен подготовить формы, наборы покупателя, базы данных, системы управления содержанием (CMS) и, в большей или меньшей мере, программную поддержку.

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

Flash-разработчик. Подчиняется творческому директору и отвечает за создание Flash-анимации и перевод графики из Freehand в содержание Flash. Он также отвечает за организацию содержания и оптимизацию его для отображения в Web.

Программист Actionscript. Еще три года назад такой должности не существовало. Переход Ationscript (языка программирования Flash) к 4-й версии приложения Flash вызвал рождение этой профессии. Этот член команды отвечает за взаимодействие с пользователем через графический интерфейс и создание динамических страниц.

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

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

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

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

Что нужно создать

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

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

Существует ли более эффективный способ представления материала? Иногда может оказаться более эффективным создание такого интерфейса, как рисунок-карта (Image map) в приложении Fireworks, чем создание Flash-анимации, требующей для своей загрузки как минимум 20 секунд. Аналогично, серия кнопок, изначально созданная в JavaScript, может быть сделана более эффективно во Flash.

После того как клиент согласится с аудитом содержания, можно разработать план, который отвечает на простой вопрос: "Сколько времени потребуется на создание каждого элемента?"

Сроки

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

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

Средства для создания содержания

В условиях Web- разработки гарантированным источником ошибок служит технология, а не процесс. В пакете MX Studio все вращается вокруг процессов. Компания Macromedia объединила пакеты Fireworks MX, Flash MX, Dreamweaver MX и Freehand для создания содержания узла и его дизайна. Например, любое из этих приложений поможет вам создать кнопки для страницы. Только от вас зависит решение вопроса, какая из этих утилит будет более эффективна в вашей работе. Только от вас зависит, как вы будете внедрять кнопки в страницу — с помощью Dreamweaver или Flash. Решение не должно приниматься с оглядкой на пользователя, так как того меньше всего будет заботить, какой инструмент был использован для создания кнопки: Flash или Dreamweaver. Его будет волновать только то, отрабатывает ли кнопка те действия, для которых она предназначена.

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

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

Формирование команды

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

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

Один из авторов этой книги участвовал в Web-проекте в качестве Flash-разработчика. Команда была небольшой, сроки— сжатыми, а технические требования — достаточно сложными. За два дня до презентации продукта член команды, ответственный за редактирование цифрового видео и подготовку его к запуску в потоковом режиме, внезапно слег с гриппом. Это могло стать серьезной проблемой, если бы его не заменил сотрудник, который смог подготовить видео для презентации. Две совершенно не смежные квалификации, но пересекающиеся в области видео, позволили проекту не остановиться.

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

Использование расширения Calendar пакета Dreamweaver

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

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

Одним из лучших поставщиков расширений является не кто иной, как сама компания Macromedia. На момент написания настоящей книги она выпустила более 500 расширений для пакета Dreamweaver. Все они доступны для загрузки с узла компании. Прежде чем вы начнете штурмовать узел Macromedia и загружать с него расширения, установите на своем компьютере утилиту Extension Manager (если она еще у вас не установлена).

Утилита Extension Manager создана компанией Macromedia для установки и обслуживания расширений пакетов Dreamweaver MX, Fireworks MX и Flash MX. Расширения имеют формат . mxp и после загрузки на компьютер открываются с помощью утилиты Extension Manager, которая помещает их в соответствующие папки каталога Dreamweaver. Если после загрузки дважды щелкнуть на расширении, будет запущена утилита Extension Manager и начнется процесс установки.

У пользователей Dreamweaver MX утилита Extension Manager уже установлена. Это значит, что единственной их задачей остается загрузка расширений.

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

Замечание
На узел Macromedia Dreamweaver Exchange можно попасть и сразу из приложения Dreamweaver MX. Если это приложение уже запущено, выберите в его меню команду Command=>Get More Commands. При этом будет запущен броузер, установленный на вашем компьютере по умолчанию, в котором откроется главная страница Dreamweaver Exchange.


1. Зайдите с помощью своего броузера на узел http://www.macromedia.com/exchange/Dreamweaver. Если это— ваш первый визит на узел Macromedia Exchange, вам будет предложено зарегистрироваться. Регистрация выполняется только один раз. После регистрации вы будете перенаправлены на главную страницу.

2. В текстовом поле Search Extensions введите Calendar (рис. 1.1). Список, представленный в этом поле, содержит множество категорий расширений. Он может вас несколько запутать, особенно если вы его видите впервые. Во избежание путаницы, выполните поиск по ключевому слову Calendar. Это — намного быстрее.

3. Щелкните на кнопке Go. Будет выведен список расширений, в которых содержится введенное вами ключевое слово.

4. Чтобы перейти на страницу самого расширения, щелкните на гиперссылке Calendar. На открывшейся странице щелкните на кнопке Download, соответствующей вашей платформе (рис. 1.2). Хотя многие предпочитают сохранять загружаемые расширения на рабочем столе, вы можете их загрузить сразу в папку Downloaded Extensions каталога установки Dreamweaver MX.



Рис. 1.1. Главная страница узла Dreamweaver Exchange. Если вы не знаете категорию, в которой расположено нужное вам расширение, выполните поиск по ключевому слову

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

1. Чтобы открыть приложение Extension Installer, дважды щелкните на файле . mхр на рабочем столе (или в папке, куда вы его загрузили). Если этого не произойдет, откройте приложение Extension Manager и выберите в меню команду File=>Open. Если приложение Dreamweaver MX уже открыто, выберите в его меню команду Commands=>Manage Extensions. Откроется приложение Extension Manager. Щелкните на кнопке File, чтобы перейти в папку Extenions и выбрать в ней устанавливаемое расширение. Щелкните на кнопке Install.

Замечание

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


2. Следующий экран, который вы увидите, содержит лицензионное соглашение (Agreement and Disclaimer). Расширения обычно созданы сторонними производителями, так что вам будет предложено внимательно прочесть это соглашение (что является стандартной составной частью любого процесса установки). Щелкните на кнопке Agree (Согласен).



Рис. 1.2. На странице расширения выберите нужную платформу

Замечание

Большая часть расширений разрабатывалась не самой компанией Macromedia. Это — продукты сторонних производителей. В частности, расширение Calendar было создано сотрудниками компании Macromedia в свободное от работы время.

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

Расширение Calendar устанавливается в папку Extension каталога Dreamweaver Configuration. Для того чтобы использовать расширение Calendar, выполните следующие действия.

1. Откройте новый документ Dreamweaver.

2. В нижней части меню Insert выберите пункт Calendar.

Откроется диалоговое окно Insert Calendar (рис. 1.4). Внешний вид календаря можно изменить, выполнив несколько интуитивных действий. Когда закончите, щелкните на кнопке ОК.

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



Рис. 1.3. Macromedia Extension Manager устанавливает, загружает и активизирует все расширения, содержащие в имени файла .МХР. При выборе расширения в верхней панели окна Extension Manager в нижней панели выводится информация о нем



Рис. 1.4. Диалоговое окно Insert Calendar позволяет настроить внешний вид календаря



Рис. 1.5. Расширение Calendar позволяет создавать детализированные графики работ и благодаря своему HTML-форматированию может быть просто вставлено в узел проекта

Использование старых данных

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

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

Крайние сроки

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

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

Важность соблюдения сроков

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

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

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

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

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

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

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

Манифест

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

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

Дизайн Web-узла сети магазинов JTC Clothing

Манифест от 29.01.02 г. Общие сведения

JTC Clothing — сеть популярных магазинов одежды стилей "хип-хоп", MTV и Gen-X. Эти магазины обычно размещены в дорогих районах. Несмотря на принадлежность одной фирме, каждый из магазинов имеет свой собственный уникальный стиль. Этот стиль можно в общем охарактеризовать как "урбанистический хип". Магазины оформлены с применением граффити, в залах звучит громкая музыка, что создает оригинальную атмосферу. Эти магазины известны своим индивидуальным подходом. Целью создания Web-узла является формирование имиджа компании в Internet, а также представление аудитории широкого ассортимента одежды, предлагаемой ее магазинами.

Целевая аудитория

Покупатели этой сети магазинов попадают в возрастную категорию 15-22 лет, с преобладанием мужского состава. В ассортимент товаров входит также и широкий выбор женской одежды спортивного стиля. Так как целевой аудиторией компании JTC является молодежь, типичный посетитель Internet-узла пользуется домашним подключением к Internet, следовательно:

97% потенциальных посетителей узла подключаются к Internet по коммутируемой линии 56К или с помощью кабельного модема;

62% из них используют компьютеры Мае, 22% — PC, 10% — ноутбуки;

используются всевозможные броузеры (от Netscape и IE до Opera);

96% из них говорят, что им нравится Flash-анимация и узлы, насыщенные ей.

Общий тон узла

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

энергия, масса энергии;

удовольствие и развлечения;

тесное переплетение рекламы кибермагазинов JTC и ее универмагов;

приятно для глаз.

Стратегия обмена информацией

Целью создания узла компании JTC является концентрация на четырех категориях одежды, которые имеют наибольший успех в магазинах компании. Это — обувь, майки, джинсы и кепки. Еще одной, неявной целью Web-узла является привлечение покупателей в магазины JTC, чтобы они увидели все многообразие представленной в них продукции. На узле должен прослеживаться лозунг: Если ты крут и любишь хип-хоп — заходи в JTC-шоп!

Позиционирование на рынке

Так как целевой аудиторией компании JTC является довольно конкретная группа молодежи, найдется немного магазинов, которые способны достичь степени уникальности одежды, которой известна компания JTC. Большинство сетей магазинов предлагает вышедшие из моды или надоевшие модели, хотя и в широком ассортименте. Целью компании JTC является зарядка энергетикой и шокирующими эффектами поколения экстремалов, так как именно они хотят выделяться своим стилем одежды. Реклама, реклама, и еще раз реклама! Мы должны заставить головы людей поворачиваться в нашу сторону! Это — основная цель создания Web-узла. Мы — разные! Мы — шумные! Мы хотим удовольствий!

Краткий лозунг

Хип! Классно! Раскрась!

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

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

Форма манифеста не имеет каких-либо стандартов. Каждый из них уникален в своем роде. Попытайтесь представить себе, как будет работать узел. Дайте прочитать манифест любому постороннему, желательно творческой личности, и вы сможете учесть мнение как бы постороннего посетителя узла. Убедитесь, что при чтении манифеста улавливается смысл цели проекта и (в некоторых случаях) цели маркетинга, рекламы и PR, стоящих за проектом.

Навыки, необходимые для создания узла

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

Такие навыки членов команды, как программирование, обработка изображений, дизайн и пр., могут быть названы производственными (hard skills). Речь идет о работниках, результатом работы которых является материальный продукт. Но управление такой командой требует особого набора талантов, которым редко отдается должное внимание. Среди них — способность сплотить команду, создать мотивацию выполнения работы каждым членом команды в срок, ясно донести цели проекта до всех членов команды, а также собрать в команде именно таких людей, работа которых способна удовлетворить потребности и ожидания клиента. Это — организаторские навыки (soft skills) Web-разработки. Они вступают в игру, когда состав работ проекта уже определен, и не менее важны, чем основные навыки, необходимые для создания продукта. Организаторские навыки можно разбить на три широкие области: планирование проекта, управление проектом и обеспечение взаимодействия.

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

Описание проекта

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

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

В современной динамичной среде существует опасная ловушка — постоянно добиваться предельной насыщенности узла новшествами, всякими там каскадными меню и вращающимися глобусами, которые не были включены в исходный план. Web-дизайн часто ассоциируют с фактором внешней эффектности, который гласит, что дизайнеры и клиенты всегда будут стремиться делать то, что кажется им обоим более привлекательным, даже если это не несет в себе полезной нагрузки. Давление со стороны клиента, заставляющее добиваться максимальной крутизны узла, приводит к обороне на двух фронтах — от клиента и от команды. Почему бы не заменить кнопки JavaScript, которые планировались изначально, на анимированные картинки Flash, созданные на кадрах из видеоклипов? Внезапно работа, которая в бюджете планировалась как одночасовая, становится трехчасовой, и при этом приходится задействовать в ней еще одного сотрудника. В общей схеме такое изменение может показаться незначительным. На самом же деле при этом увеличивается количество создаваемых элементов, что приводит к разрастанию бюджета. Все это называется искажением проекта (project creep).

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

Итак, как избежать искажений проекта? Создайте отдельный детальный документ, фиксирующий то, что вам предстоит создать. Заставьте клиента подписать его. Некоторые агентства имеют специальный документ, называемый общим рабочим соглашением (General Working Agreement). Это соглашение, содержащее оценку всех затрат, подписывается клиентом и агентством и узаконивает рабочие взаимоотношения между заказчиком и подрядчиком. В этом документе один из главных пунктов посвящен именно искажениям проекта. Подпись клиента на рабочем соглашении гарантирует, что он ясно осознал факт, что вещи, не входящие в описание проекта, будут требовать дополнительных капиталовложений. Только из-за того, что работа выполняется на компьютере, не следует предполагать, что она не занимает времени. Некоторые агентства в дополнение вписывают в это соглашение предварительную оценку изменений. Вы даже удивитесь, как быстро клиент сменит свою позицию, когда речь зайдет о деньгах. Всегда убеждайтесь, что клиент понимает, что исключение работ из описания проекта также займет дополнительное время. У клиентов, не способных вовремя предоставить материал для размещения на узле, существует тенденция просто удалять целый раздел. Такие события ведут к перестройке проекта, что также занимает время. Если вы уже проделали часть работы над некоторым разделом, а клиент его вдруг закрывает, он должен знать, что все равно должен оплатить фактически выполненную работу.

Планирование производства Web-узла

Существует поговорка: "Планируйте работу, а затем выполняйте свой план". Часто разработка большого плана производства является далеко не творческим процессом — она требует квалификации менеджера или администратора. Хотя некоторые творческие личности ненавидят структурирование, игнорирование этой части процесса может привести к опасным последствиям.

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

После получения подписи первым делом нужно установить бюджет, так как он, образно говоря, определяет содержимое каждой комнаты дома и состав лиц, участвующих в строительстве. Бюджет обычно исходит из тех средств, которые клиент согласен вложить в проект. Но не совсем. Вы часто будете сталкиваться с тем, что клиент не представляет себе реальной стоимости создания узла, и его оценка всегда оказывается значительно ниже той, на которую указывает ваш практический опыт. Хотя разработка бюджета может быть достаточно сложной, концепция, стоящая за этим процессом, проста: стоимость базируется на фактически затраченных часах работы. Если создание одной Flash-кнопки занимает 1 час, а работник получает 50 долларов в час, — математика проста.

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

Замечание

В мире полиграфии художники и печатники привязаны к особой системе — системе сводок (docket system). В этой системе каждый час обычно разбивается на шестиминутные сегменты, называемые юнитами (units).

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

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

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

Управление созданием Web-узла

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

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

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

Взаимодействие в процессе работы над проектом

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

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

В ходе повседневного производственного процесса должны быть установлены параметры внутрикомандного и внешнего обмена информацией. Это может быть обмен электронной почтой, использование службы уведомлений (Notes) в приложениях Dreamweaver и Fireworks (будет описано в главе 2) или использование виртуальных сводок (virtual docket).

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

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

Определение узла

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

Планирование содержания

Когда-то компанией Hoffman and Associates был выпущен детский компакт-диск, называвшийся "Nicolai's Train". На диске была записана игра, в которой персонаж по имени Nicolai заблудился в лесу, и игрок должен был подобрать ряд объектов, которые помогут ему выбраться из леса. Одним из объектов было гнездо какой-то птицы. Щелкнешь мышью на гнезде, а птенец в нем начинает выкрикивать: "Я голоден!" Он успокаивается только тогда, когда к гнезду прилетает его мать и приносит ему червяка. Через несколько секунд он начинает пищать снова, и все повторяется.

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

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

На этом этапе проекта нужно проявить концептуальный подход к содержанию: "Что нам нужно?", и практический: "Что мы имеем?" Когда планируется содержание, ни на миг не нужно сводить глаз с пользователя, с этого невидимого собеседника, основной движущей силы процесса.

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

Планирование узла

Те, кто пережил эпоху раннего развития Web, вспоминая, называют ее "Wild Wild Web". Тогда стандартов не существовало. Не было и графических редакторов. Мы учились всему на собственном опыте, а наши клиенты оплачивали наше обучение. Эти дни канули в Лету.

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

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

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

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

Создание графика работ

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

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

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

Утилиты составления графика работ

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

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

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

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

Управление содержанием

Использование примечаний

Поверьте нашему опыту: трудно переоценить пользу, получаемую от использования функции Design Notes (Примечания к дизайну). Работая в коллективе, предположения неуместны. Нельзя ожидать от членов команды, что они посмотрят на страницу и точно скажут, что на ней сделали именно вы.

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

Если на всех компьютерах сконфигурирован параметр Check In/Check Out, сконфигурируйте на них также функцию Design Notes. Никогда не включайте одно без другого.

Для того чтобы сконфигурировать функцию Design Notes, выполните следующие действия.

1. Откройте диалоговое окно Site Definition, щелкните на кнопке Edit и выберите в списке категорий Design Notes. Откроется окно Design Notes, показанное на рис. 2.5.


Рис. 2.5. Включение функции Design Notes в диалоговом окне Site Definition позволяет команде прикреплять и читать примечания к файлам
2. Установите флажок Maintain Design Notes (Обслуживать примечания).

3. Если вы работаете в коллективе, установите также флажок Upload Design Notes for Sharing (Загружать примечания для совместного использования).

Кнопка Clean Up в окне Design Notes служит большой цели. Если щелкнуть на ней, то все примечания, не прикрепленные к страницам и элементам, будут удалены (если дополнительно ответить Yes на предупреждение).

Добавление примечаний

Добавление примечаний Design Notes — очень простая процедура. Для этого нужно выполнить следующие действия.

1. Чтобы добавить примечания к странице, выберите в меню File=>Design Notes. Для добавления примечания к элементу страницы можно щелкнуть правой кнопкой мыши на элементе страницы и в контекстном меню выбрать пункт Design Notes. Какое бы действие вы ни выбрали, откроется диалоговое окно Design Notes, показанное на рис. 2.6.




Рис. 2.6. В списке Status содержится полный список возможных состояний текущего файла

Раздел Basic Info — это место любого руководителя проекта. Список Status содержит все возможные состояния страницы: Draft (Черновик), Revision1. .3 (Редакции от 1 до 3), Alpha, Beta, Final (Заключительная версия), Needs Attention (Требует внимания). Выберите одно из значений, и вы будете точно знать состояние страниц или элементов, к которым прикреплены примечания.

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

3. В поле Note введите свое примечание.

Если вы хотите, чтобы бланк примечаний появлялся автоматически при открытии файла, установите флажок Show when File Is Opened. Это правило можно установить только для страниц. На элементы оно не распространяется.

Вкладка All Info содержит все примечания данного файла, а их состояние видно на вкладке Basic Info. Чтобы добавить примечание, щелкните на значке со знаком "плюс". Чтобы удалить примечание, выберите его в поле Info и щелкните на знаке "минус".

Fireworks и Design Notes

Одним из главных достоинств программ пакета Macromedia MX является способность взаимодействовать друг с другом. Например, двойной щелчок на рисунке Fireworks на странице, открытой в Dreamweaver, вызовет запуск приложения Fireworks. После того как изменения внесены в рисунок, его можно экспортировать и выйти из приложения Fireworks. Если затем посмотреть на страницу в Dreamweaver, то можно увидеть, что все изменения автоматически отобразились на странице. Это свойство пакета поддерживать связь между приложениями и автоматически отражать изменения в Dreamweaver называют roundtrip feature (круговая порука).

Предположим, что Крис создал файл JTCLogo. png в Fireworks. Этот файл был помещен на страницу в Dreamweaver. На следующий день он обнаружил, что в файле допущена ошибка — логотип должен был быть помещен в формат GIF. Он дважды щелкнул на рисунке в Dreamweaver, и запустился Fireworks. Крис экспортировал JTCLogo.png в JTCLogo.gif. Пакет Fireworks создал файл JTCLogo.gif .mno (расширение . mno имеют файлы примечаний). Примечание было помещено в ту же папку, что и файл JTCLogo. gif.

Когда рисунок импортируется в Dreamweaver, вместе с ним передаются и примечания к нему.

Использование средств управления файлами в Dreamweaver MX

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

Web-узел — это набор документов: от простых копий и документов HTML до цифрового видео и Flash-анимации. Он требует большого внимания. Профессиональный Web-дизайнер перед созданием страницы подбирает материал для нее. Однако даже на этом этапе создание макета страницы позволит заранее выявить потенциальные проблемы. Создание на этом этапе официального документа поможет выявить потенциальные проблемы дизайна и создать единое хранилище для управления всеми материалами, создаваемыми и используемыми на узле.

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

Использование средств управления

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

Маскировка файлов и папок в Dreamweaver MX

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

Put, Get, Check In и Check Out;

отчеты;

операции уровня всего узла, такие как поиск и замена, выбор и изменение ссылок;

синхронизация файлов;

содержимое панели Assets; обновление библиотек и шаблонов.

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

Однако будьте осторожны с этой операцией. Можно маскировать только целые папки, а не отдельные файлы. Если вы хотите замаскировать некоторый файл .png, хорошенько подумайте, так как Dreamweaver замаскирует все файлы .png всего узла. Если элемент замаскирован, вы можете продолжить работать с ним, выбрав его на панели Site. Эта операция имеет приоритет перед маскировкой.

Маскировку можно также использовать для защиты файлов Falsh MX. Создайте замаскированную папку для файлов .f la, а все файлы .swf загрузите в незамаскированную папку. Таким образом, будут защищены исходные файлы Flash MX.

Включение и отключение маскировки

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

1. Откройте панель Site и выберите узел, с которым хотите работать.

2. Выберите в меню Site=>Cloaking для открытия подменю и сделайте выбор (рис. 2.10). Или же выберите папку на панели Site, щелкните правой кнопкой мыши (на Мае нажмите комбинацию <Соntrol>+щелчок) на папке, чтобы открыть контекстное меню.


Рис. 2.10. В меню Site выбрала маскировка
Для того чтобы замаскировать выбранную папку, выберите в меню Site=>CIoaking=>Cloack. На папке появится красная линия, означающая, что она замаскирована.

Маскировка и демаскировка файлов

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

1. Если панель Site уже открыта, щелкните на ней правой кнопкой (на Мае нажмите комбинацию <Сontrol>+щелчок). Если панель еще не открыта, откройте узел и щелкните на кнопке Edit.

2. Откроется окно Advanced Options (рис. 2.11). Выберите категорию Cloaking и установите флажок Cloak Files Ending With (Замаскировать файлы с расширением...). Введите в текстовое поле расширение нужного типа файлов и щелкните на кнопке ОК. Красной линией будут отмечены все файлы с указанным расширением. Для того чтобы снять маскировку, снимите флажок Cloak Files.



Рис. 2.11. Маскировка файлов в Dreamweaver MX. Если установить флажок Cloack Files, будут замаскированы все файлы с расширениями .pngu .fla

Для того чтобы снять маскировку со всех файлов узла, откройте узел и выберите в меню Site=>Cloaking=>Uncloack All. Маскировка будет снята со всего узла.

Общие библиотеки во Flash MX

При работе с Web всегда следуйте принципу: чем меньше, тем лучше. Когда это касается Flash, лучше иметь как можно меньшие размеры файла. Использование символов библиотек позволяет уменьшить размеры файлов, а совместное использование этих библиотек несколькими Flash-анимациями положительно сказывается на их размере. Малоизвестным аспектом работы во Flash является способность совместно использовать материалы библиотеки в нескольких анимациях. Функция Shared Library используется при проигрывании видеоматериалов в броузере, что делает доступными материалы библиотеки.

Функцию Shared Libraries можно также использовать и во время создания видеоматериалов. Например, один логотип может использоваться несколькими видеороликами узла. Эти общие материалы позволяют команде изменить или заменить любой символ в видео любым другим материалом из сети. Например, можно в общей библиотеке изменить цвета логотипа. Когда изменение внесено, имя и свойства логотипа сохраняются, но изменения в нем отражаются во всех фильмах, использующих его.

Если вы используете эту технику, поместите все общие материалы в пустой видеоролик Flash; он будет состоять только из совместно используемых материалов.

Изменение и замена совместно используемых символов

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

1. Откройте видеоролик Flash, содержащий нужный вам символ. Выберите этот символ в библиотеке, а в меню Library выберите пункт Properties. Следующие действия связывают символ этого видеоролика с библиотекой другого.

2. Когда откроется диалоговое окно Library Properties (Параметры библиотеки), щелкните на кнопке Browse и перейдите к видеоролику, содержащему символ. Щелкните на кнопке Open (Открыть). Откроется окно, содержащее список символов, используемых в открытом вами видеоролике. Щелкните на имени символа, который хотите связать, а затем щелкните на кнопке ОК (рис. 2.12).

3. Вы вернетесь в диалоговое окно Properties исходного ролика. Установите флажок Always Update Before Publishing и щелкните на кнопке ОК. Это будет указывать на необходимость автоматического обновления символа, если он будет изменяться в библиотеке источника.


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

Определение локального узла в Dreamweaver MX

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

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

При работе с Dreamweaver MX существуют три способа определения локального узла. Первый из них заключается в выборе команды меню Site=>New Site (Узел=>Новый узел), после чего откроется окно с двумя вкладками: Basic (Основной) и Advanced (Дополнительный). Щелкните на вкладке Basic, и запустится мастер (рис. 2.1), предлагающий выбрать основной или расширенный метод определения узла.


Рис. 2.1. При выборе вкладки Basic запускается мастер, который проводит через весь процесс создания узла. Если у вас нет достаточного опыта создания узлов — это ваш лучший выбор
Если вы выберете вкладку Basic, мастер проведет вас по всем стадиям создания узла Он вас попросит присвоить узлу имя и определить папку, в которой будут размещены файлы узла. Следующий экран спросит, будут ли данные динамическими (постоянно изменяющимися) или статическими. После того как вы ответите на все эти вопросы, мастер спросит, хотите ли вы, чтобы файлы оставались на вашей машине, или их следует загрузить на сервер, доступный всей рабочей группе. Если ответить Yes на вопрос о рабочей группе, мастер попросит указать способ помещения файлов на сервер и имя папки, куда их следует записать.

Второй метод заключается в выборе вкладки Advanced и пункта Local Info в списке Category (рис. 2.2).

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

Оставьте флажок Refresh Local File List Automatically (Обновлять список файлов автоматически) установленным. Этим вы гарантируете, что новые файлы будут автоматически добавлены в список локальных файлов и что вам не придется постоянно выбирать команду View=> Refresh. В последнем поле ввода нужно выбрать папку по умолчанию для хранения мультимедиа.



Рис. 2.2. Определение локального узла с использованием набора параметров Advanced устанавливает путь к файлам узла на локальном компьютере

Введите адрес HTTP. Если он есть у вас, сейчас самое время ввести полный адрес, например http://www.domainname.com. Пакет Dreamweaver MX будет использовать этот адрес для проверки, ссылаются ли абсолютные ссылки страниц на узел в Web или на страницы локального узла.

Убедитесь, что установлен флажок Enable Cache (Включить кэширование). Dreamweaver MX в некотором роде подражает Web-броузеру в том, что автоматически отслеживает некоторые файлы и материалы на узле. От этого можно получить выгоду за счет ускорения работы при обновлении связей.

Определение удаленного узла Dreamweaver MX

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

В списке Category вкладки Advanced выберите пункт Remote Info и задайте категорию, которая будет применена к узлу. Откроется диалоговое окно Site Definition (Определение узла) (рис. 2.3).


Рис. 2.3. При определении удаленного узла задается путь к файлам узла на сервере
Чтобы узел, создаваемый на компьютере, до самого конца процесса не загружался на удаленный сервер, выберите пункт None (он установлен по умолчанию). Если вы соединяетесь с сервером по протоколу FTP (File Transfer Protocol), выберите его из списка. Затем вам будет предложено ввести следующую информацию.

FTP Host. Имя соединения FTP с Web-сервером. Оно должно выглядеть так: www.mysite.com.

Host Directory. Путь к папке, содержащей ваши файлы. Если вы не уверены, проконсультируйтесь с администратором сети или поставщиком услуг Internet (ISP).

Login. Имя пользователя, назначенное вашей учетной записи.

Password. Пароль.

Use Passive FTP. Если вы отделены брандмауэром, следует установить этот флажок. Проконсультируйтесь с администратором сети.

Use Firewall (in Preferences). Это указывает пакету Dreamweaver использовать настройки брандмауэра с корректным именем (адресом) узла и порта для соединения с сервером FTP.

Выберите пункт Local/Network, если сервер, на котором будут публиковаться страницы, находится в одной с вами локальной сети (LAN). Еще раз убедитесь, что установлен флажок Refresh Local File List Automatically.

Под аббревиатурой RDS скрывается название Remote Development Services (Служба удаленной разработки). Если удаленная папка будет расположена на компьютере, на котором запущен сервер ColdFusion, выберите этот вариант.

Если вы используете систему сотрудничества, использующую стандарт WebDAV, или базу данных Visual SourceSafe (Microsoft Visual SourceSafe Client 6.0), выберите пункт WebDAV.

Отслеживание версий

С уверенностью можно сказать, что изменения будут преследовать узел всегда. То клиент захочет в качестве фона использовать стилизованную фотографию, после этого ему вдруг захочется убрать ее и т.п. Все это время рисунок фона будет курсировать между узлом и Fireworks, туда и обратно. В этом можно запутаться.

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

Одним из авторов этой книги используется несколько другая техника: перед тем как изменить какую-то страницу, он создавал ее копию, добавляя в конец имени дату. Например, если файл назывался tom_and_jord. html и копировался в резервную папку, он его переименовывал в tom_and_jord_31_12_2002. Таким образом, он всегда знал, когда было внесено последнее изменение в любой файл. Конечно, этот метод несколько громоздкий, однако это вошло у него в привычку, когда он работал дизайнером в полиграфии, создавая рекламные объявления о продаже автомобилей для местной газеты. Создание рекламы автомобилей отнимало много времени, поэтому для облегчения можно было использовать несколько основных заготовок, в которые вставлять новые машины и их цены. Чтобы управлять ситуацией, он начал сохранять файлы таким вот способом.

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

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

Панель Assets

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

Images (Рисунки). Это файлы .gif, .jpg и .png на странице.

Colors (Цвета). Все цвета, используемые для ссылок, текста, фона и т.п.

URLs. Перечисляются все ссылки узла, в том числе HTTP, HTTPS, FTP, JavaScript, gopher, ссылки электронной почты и локальные файлы.

Falsh movies (Flash-анимация). Все используемые на узле файлы . swf. В этом списке не перечисляются файлы с расширением . f la.

Shockwave. Анимация и интерактивные презентации, созданные в пакете Director.

Movies. Видеоролики QuickTime и MPEG.

Scripts. Сценарии JavaScript и VBScript, используемые на узле. Файлы HTML не отображаются на панели Assets.

Templates. Все шаблоны, используемые узлом.

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

Чтобы открыть панель Assets, выберите в меню Window=>Assets или нажмите клавишу . Когда панель откроется, обратите внимание, что на ней отображаются все материалы узла (Site Assets) и только избранные (Favorites Site). В список избранных вы сами можете внести изменения. Этот вариант используется для быстрого доступа к часто используемым объектам, так как избранные материалы включаются и в представление Site. Единственные два элемента, которые нельзя включить в список избранных, — это шаблоны и библиотека. Панель Assets работает несколько не так, как можно ожидать на первый взгляд. Состояние узла меняется, и панель Assets использует кэш узла (Site Cache) для отслеживания этих изменений. Каждый раз, когда запускается приложение и открывается панель Assets, Dreamweaver анализирует кэш и создает список. Поэтому чрезвычайно важно, чтобы в диалоговом окне Site Definition был установлен флажок Site Caching (Кэширование узла).

Если некоторый материал не отображается на панели Assets, проверьте, установлен ли флажок Site Caching в окне определения узла и какой переключатель выбран: Site или Favorites. Также можно попробовать щелкнуть на кнопке Refresh (Обновить) панели Assets.

Просмотр материалов узла прост: щелкните на имени материала, и он будет отображен на панели быстрого просмотра над списком (рис. 2.9).



Рис. 2.9. Панель Assets для узла JCT

Вставка материалов на страницу

Самым простым способом добавления материалов на страницу является обычное перетаскивание их из панели Assets в нужное место страницы в представлении Design (Конструктор). Вот как еще это можно сделать с помощью панели Assets.

1. Откройте панель Assets, выберите тип списка (Site или Favorites) и категорию материалов.

2. Поместите курсор в том месте страницы, где предполагаете разместить материал.

3. Щелкните на помещаемом материале и нажмите клавишу . Можно также щелкнуть правой кнопкой на материале и поместить его из контекстного меню.

Переименование избранного материала

Иногда имя файла не имеет никакого смыслового наполнения и не отражает истинное его содержание. Для примера предположим, что компания имеет три цветовые вариации своего логотипа, которые используются в разных местах узла. Имена их файлов— logol.gif, Iogo2. gif и 1одоЗ. gif. На самом деле в них содержатся красная, синяя и черная версии логотипа. Как различить эти файлы, когда ведется работа со списком Assets в режиме Site? Конечно, нужно было сразу выбирать имена со смыслом, но изменять названия материалов нельзя, так как на них уже могут быть созданы страницы. Для этого используются дополнительные имена, которые в продуктах Macromedia называют псевдонимами (Nickname). Для того чтобы присвоить псевдоним материалу, выполните следующие действия.

1. Откройте панель Assets, выберите категорию для своего материала в представлении Favorites и щелкните на материале.

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

3. Введите новое имя и нажмите клавишу .

Можно также щелкнуть правой кнопкой на материале и выбрать в контекстном меню пункт Edit Nickname (Редактировать псевдоним).

Копирование материалов на разные узлы

Панель Assets — довольно мощная. Имейте в виду, что панель Assets делает материалы доступными для всего узла; эта панель отображает не только материалы текущего открытого документа. Например, если файл Redlogo.gif отображается на панели Assets для узла JCT Sales, совсем не обязательно, что он относится к текущему открытому документу. Это значит, что над чем бы вы ни работали на узле компании JCT, вы все равно будете видеть в списке файл Redlogo.gif. Однако для работающих над другим узлом этот материал недоступен.

Копирование материалов на разные узлы не совсем интуитивно понятно, но достаточно просто. Для этого выделите материалы (в том числе и целые папки), которые нужно скопировать; щелкните правой кнопкой на выделении и выберите в контекстном меню пункт Copy To Site. В открывшемся в подменю списке узлов перейдите к нужному и отпустите кнопку мыши.

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

Папки

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

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

Если узел — сложный, разбейте его на категории. Например, узел, созданный нами для компании JCT, имел папку Shoes, в которой мы размещали все файлы, касающиеся этого вида продукции. По мере роста узла появились подкаталоги Men' s Shoes и Women' s Shoes.

Если узел должен содержать массу мультимедиа (например, звуки и рисунки), поместите все эти файлы в отдельную папку. Многие разработчики называют такую папку Assets. В этой папке можно создать каталоги по видам файлов: Sound, Video, Images и т.п. Если узел — сложный, папку Assets будет иметь каждый его раздел.

Не меняйте структуру на полпути. Локальный и удаленный узлы должны иметь идентичную структуру каталогов. Одним из свойств пакета Dreamweaver MX является то, что когда узел размещается на удаленном сервере, локальная структура каталогов точно копируется.

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

Соглашение об именах

Когда все материалы, от текста до видеоролика, сводятся на одном Web-узле, крайне необходимо установить единое соглашение об именах файлов и строго придерживаться его. Здесь нужно следовать логике, так как не всегда по значку можно определить тип файла. Например, QuickTime может проигрывать массу типов материалов мультимедиа: от музыки МРЗ до интерактивной графики SWF. Компьютер всегда отображает значок файла пустым, если не находит ему ассоциативного приложения. Если, например, файл называется Buzz и рядом с ним нет значка приложения, то как определить, что это — рисунок, видео, музыка — или что другое?

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

Итак, присваивая имя Web-узлу, примите во внимание следующее.

Для имен используйте исключительно строчные буквы и 4-символьные расширения, например pageone.html.

Индексную страницу всегда называйте index. html, index. cfm или index. jsp.

Если у вас имеется наряду с индексной страницей домашняя, назовите ее home . htm.

Если используется набор кадров, используйте для имени шаблон file-name_set.html, например home_set.html.

Части набора кадров должны отражать в имени свое местоположение. Если домашняя страница разбита на три кадра, их можно назвать следующим образом: home_top.html, home_right. html и home_lef t.html.

Соглашения о каталогах

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

Если существует папка Assets, создайте подкаталоги для каждой группы. Например, можно использовать имена типа Assets/Images/Employees. Если у вас нет папки Assets, поместите папку рисунков вне основного каталога и сгруппируйте их некоторым рациональным способом, например /images/shoephotos/images/icons.

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

Соглашения об именах рисунков

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

btn_name. gif — ненажимаемая кнопка;

btn_name_up. gif — нажимаемая кнопка отпущена;

btn_name_over. gif — промежуточное состояние нажимаемой кнопки;

btn_name_down. gif — нажимаемая кнопка нажата;

logo_name. gof — если используется несколько размеров логотипа, размер можно дописать после имени;

icon_name. png— значки, используемые на узле.

Создание рабочих отчетов

Функции Design Notes и Check In/Check Out с некоторой точки зрения можно рассматривать как микропредставления процесса. Большая часть информации курсирует между членами коллектива. Руководителю проекта часто требуется еще и общая картина событий, происходящих в проекте, т.е. макропредставление процесса. Именно для этого созданы отчеты.

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

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

Отчет о полученных файлах

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

1. Выберите в меню команду SiteOReports и в списке Report On выберите документы, которые вас интересуют (рис. 2.7).

2. Поставьте отметку в отчете Checked Out By и щелкните на кнопке Report Settings в нижней части окна. Введите имя члена команды в открывшемся окне. Будьте внимательны, так как регистр символов при поиске имеет значение. Если вы ищете файлы, полученные Крисом Фликом (Chris Flick), то можете ввести Chris or Flick. Если в вашей команде много людей с именем Крис, вы всех их увидите в результатах поиска. Если поле оставить пустым, в результатах будут выведены все, кто в настоящий момент работает с полученными файлами. После завершения поиска щелкните на кнопке ОК, а затем на кнопке Run в окне Reports.

Dreamweaver запускает отчет на выполнение и открывает диалоговое окно Results (Результаты), содержащее список запрошенной информации. Если дважды щелкнуть на любой записи, можно просмотреть ее содержание на экране. Если выбрать Save Report (Сохранить отчет), документ будет сохранен на удаленном сервере в формате XML. Этот документ затем можно добавить на Web-страницу, в базу данных или электронную таблицу.




Рис. 2.7. Окно Reports открывается из меню Site и позволяет выбрать тип выводимого отчета

Отчет из примечаний

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

1. Выберите в меню команду Site=> Reports, а в категории Workflow — Design Notes (рис. 2.8). Щелкните на кнопке Report Settings.

2. Откроется окно, которое может показаться немного непонятным. Обратите внимание, что средняя колонка содержит критерий для примечаний. Введите в первой колонке имя Design Note и выберите условие в списке в средней колонке. Введите значение, которое необходимо отыскать в Design Notes. Щелкните на кнопке ОК. Запустите отчет, щелкнув на кнопке Run.



Рис. 2.8. Установка критериев отчета

Вот гипотетический пример, показывающий, как работает этот процесс. Предположим, руководитель проекта хочет узнать, работа над какими файлами завершена. Для получения этого списка в первом поле он введет Status, во втором выберет Is или Contains (условие Is несколько точнее, чем Contains), а в третьем введет состояние Complete, после чего щелкнет на кнопке ОК.

Типовые расширения файлов

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

html — страница HTML. Старайтесь не использовать для страниц трехсимвольное расширение .htm.

сfm —сценарий ColdFusion.

ess — каскадная таблица стилей (Cascading Style Sheet).

jsp — страница серверных сценариев Java (Java Server Page script).

asp — активная серверная страница (Active Server Page).

pdf — документ Adobe Acrobat.

swf — видеоролик Flash MX.

gif— рисунок GIF.

png — рисунок PNG.

txt — обычный текстовый файл.

mp3 — аудиофайл МРЗ.

rm — файл потокового видео (Real media).

mov — видеоролик QuickTime.

avi — файл Windows Media.

Управление материалами мультимедиа

В современных условиях доступности скоростного доступа полноценное мультимедиа (такое как музыка и видео) на узлах становится скорее привычным, чем редким. Управление этим материалом столь же критично, как и управление папками. И снова, вместо формальных правил мы дадим лишь некоторые рекомендации.

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

Для видео и анимации Flash MX разделите файлы по типу воспроизведения. Например, все файлы Flash будут находиться в папке Flash. Внутри последней создается подкаталог МРЗ, в котором будут храниться звуковые дорожки, используемые в анимации и т.п.

Файлы интенсивного (rich) мультимедиа (QuickTime, Director, Shockwave), которые берутся из внешних источников, должны иметь копии на оптическом носителе, например на компакт-диске. Этим вы как бы создаете резервную копию того, что есть. Самый плохой способ переноса таких файлов — это прикрепления к почтовым сообщениям: файлы этого типа слишком велики для отправки по почте (в среднем — 300 Мбайт).

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

Управление содержанием

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

Что следует понимать под "правильным содержанием"? Это — весь материал страницы или узла, который соответствует целям и задачам клиента.

Нельзя забывать, что Web-дизайнеры работают в команде. В данном случае взаимодействие членов команды особенно важно. Используя панель Assets и операции Check In/ Check Out в программе Dreamweaver MX, а также ее функции Cloaking, Design Notes и Reports, команда будет обеспечена полным набором средств кооперации.

Используйте операции Check In и Check Out (Проверка занятости), и никогда не получится такого, что двое людей одновременно выполняют две различные операции над одним и тем же рисунком. Все общие элементы узла (от цветовой палитры до программ, от Flash до QuickTime) размещены в одном месте — на панели Assets (Материалы). Эта панель облегчает доступ ко всему процессу создания узла. Добавляя примечания (Design Notes) к своим изменениям, дизайнеры оставляют запись о своих действиях для других членов команды. Функция Cloaking защищает папки от доступа тех, кто на то не имеет право.

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

Установка привилегий Check In/Check Out

Каждый из вариантов удаленного узла (естественно, кроме None) содержит параметр Enable Check In and Check Out (Включить проверку "занято"). Если вы — дизайнер-одиночка, этот параметр для вас не имеет значения. Если же вы работаете в команде, этот параметр критичен. При пессимистичном сценарии всегда будут существовать два человека, работающих над одним и тем же фрагментом JavaScript (или другим ресурсом). Все знают, что два разных человека не могут программировать одинаково. Представьте себе общее разочарование, если каждый будет замещать только что выполненную работу другого (без злого умысла).

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

Файлы, отмеченные как Checked in, трактуются немного по-другому. Все они изначально считаются доступными только для чтения (это видно по значку висячего замка). Это запрещает неавторизированному персоналу вносить изменения в файл, если у него нет соответствующих разрешений на редактирование.

Поясним это на примере.

Крис — дизайнер по графике. Он открыл удаленный узел и получил страницу, так как хотел поместить на ней файл Fireworks image.jpg. Для этого он щелкнул на кнопке Check Out панели инструментов Site Window или просто открыл файл. Если он откроет файл напрямую, то получит запрос, хочет ли он получить и заблокировать (check out) этот файл. Если он откроет такие файлы, как рисунки gif, jpg, или файлы Flash-анимации, то в дополнение его спросят, хочет ли он получить также и файлы, связанные с данным.

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

Джордану тоже нужен этот файл, так как он хочет закончить работу над HTML. Он тоже щелкает на имени Криса и просит сообщить ему об окончании работы над файлом.

Крис завершает работу и щелкает на кнопке Check In для обратной пересылки файла на удаленный сервер. Том и Джордан в ответ на это событие автоматически получают сообщения.

Джордан получает (check out) файл и вносит в него свои изменения. Отметки возле имени файла на удаленных компьютерах Тома и Криса становятся красными. Закончив работу, Джордан щелкает на кнопке Check In, и все файлы, ассоциированные с этой страницей, возвращаются на удаленный сервер. Том открывает удаленный узел и замечает значок висячего замка на файле, но все равно может открыть страницу, так как для чтения она доступна. Он не может только внести в файл изменения.

Если вы используете функции Check In/Check Out, необходимо, чтобы этот параметр был активизирован на всех компьютерах членов команды.

Установка протоколов Check In/Check Out

Установка процедур Check In/Check Out относительно проста. Для этого нужно выполнить следующие действия.

1. Выберите команду SiteODefine Sites, и откроется диалоговое окно Site Definition. Выберите свой узел в окне и щелкните на кнопке Edit (Редактировать). Если вы работаете над новым узлом, щелкните на кнопке New и определите новый узел.

2. В списке категорий выберите Remote Site (Удаленный узел). Все варианты удаленного узла, кроме None, внизу будут иметь кнопку, позволяющую открыть окно параметров, показанное на рис. 2.4.

3. Установите флажок Check Out Files When Opening, если хотите автоматически получать файлы после двойного щелчка на них в окне Site. Введите свое имя в поле Check Out Name (Имя). Обычно здесь вводят не только свое имя, но и используемый компьютер. Например, у Тома может быть три компьютера: портативный, домашний и офисный. Тогда он может ввести соответственно Tom-Portable, Tom-Home и Tom-Office, чтобы любой в группе знал не только то, что именно Том получил файл, но и то, в каком месте он над ним работает. Введите в поле Email Address свой электронный адрес. Это позволит посылать сообщения в пределах рабочей группы посредством одного щелчка мышью. Для включения функции щелкните на кнопке ОК.

Получение и регистрация файлов

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

1. Откройте узел, выберите файлы, которые хотите редактировать, и выберите в меню команду Site=>Check Out. Файлы будут помечены, как только будут получены.

Замечание

Работая с компьютером, любые действия можно выполнить шестью разными способами, и это прекрасно! В данном случае можно выбрать файлы и щелкнуть на кнопке Check Out Files панели инструментов окна; выбрать файлы и щелкнуть правой кнопкой мыши для вызова контекстного меню, в котором выбрать Check Out; выбрать файлы и нажать комбинацию горячих клавиш ; дважды щелкнуть на файле в окне Site Management.

2. Если вы также хотите получить файлы, ассоциированные со страницей, на запрос ответьте Yes.

Когда закончите работу с файлами, убедитесь, что узел, с которым вы работаете, активен и файлы, которые вы хотите заблокировать, выбраны. Существует масса способов заблокировать (check in) файл.



Рис. 2.4. После того как вы укажете пакету Dreamweaver включить функцию Check In/Check Out, вам нужно ввести свое имя и адрес электронной почты

Выбрать в меню Site=>Check In.

Выбрать файлы и щелкнуть на кнопке Check In Files панели инструментов окна.

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

Выбрать файлы и нажать комбинацию клавиш .

Если вы хотите зарегистрировать также и связанные файлы, на запрос диалогового окна Check In ответьте Yes.

Совет

Здесь вступает в игру первое правило Dreamweaver: то, что получено, должно быть сдано назад. Если вы проигнорируете это правило и вместо регистрации выберете команду Check^Put, вы все равно обновите удаленный файл, но он больше не будет трактоваться как сданный, и нельзя будет удалить его статус полученного. Таким образом, чрезвычайно важно, чтобы все работники, участвующие в создании узла, использовали только Dreamweaver для передачи и получения файлов с удаленного сервера.

Если для получения выбран неверный файл или вы просто передумали, выделите этот файл и выберите в меню Site=>Undo Check Out. В этом случае файл вернется на сервер именно в том состоянии, в котором был получен.

Совместная работа

Добавление нового пользователя

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

1. На главной странице щелкните на ссылке Admin. Откроется страница Administration, на которой нужно щелкнуть на ссылке User Management. Откроется список пользователей (страница User Manageement).

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


Рис. 3.4. Страница User Management приложения Sitespring позволяет добавлять новых пользователей
3. Только поля, отмеченные звездочкой, являются обязательными для заполнения. Очень важно, чтобы все пользователи знали, что имя пользователя и пароль зависимы от регистра символов (рис. 3.5) и должны вводиться при входе точно так, как они введены на этой странице. Если прогнозировать это требование, система будет постоянно отказывать пользователю в доступе, награждая сообщениями об ошибке. Когда в поле вводится пароль, он отображается на экране звездочками. Если введенный пароль и его подтверждение не совпадают, система выдаст сообщение об ошибке.


Рис. 3.5. Страница Add User отображает информацию о пользователе и его пароль входа на узел
4. Чтобы разрешить доступ к файлам, для каждого пользователя администратор должен указать один из двух уровней прав. Уровень прав — это ограничение на доступ к определенным частям узла (например, к странице Administration). Уровень Project Manager (Руководитель проекта) открывает доступ ко всему содержимому узла. Уровень User (Пользователь) разрешает пользователю просмотр различных аспектов узла, а также добавление, изменение и удаление задач.

Корпоративная иерархия

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

Использование Sitespring для руководства проектом и взаимодействия с клиентом

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

Ключом к приложению Sitespring становится понимание его самой важной недокументированной функции — обеспечения сотрудничества (collaboration). Эта функция позволяет любому, от художника-дизайнера, раскрашивающего пиксели на экране, до клиента, оплачивающего за это счета, работать вместе для достижения цели проекта.

Если вы впервые сталкиваетесь с этим продуктом и если у вас небольшая компания, вы можете подумать, что этот инструмент — слишком сложный для вашего рабочего процесса и для потребностей вашего клиента. И ошибетесь/Авторы этой книги исколесили всю Северную Америку. Двое из нас живут в Канаде, остальные — в США. После того как мы освоились с Sitespring, мы поняли, как просто можно осветить все аспекты работы с ним в книге — от простого обмена информацией до согласования рукописей и графики. Мы разработали такой механизм обмена важными бумагами, который позволил каждому из нас быстрее и эффективнее просматривать работу друг друга, чем с помощью средств электронной почты.

Для достижения такого уровня сотрудничества нам требовался инструмент, обеспечивающий следующее:

четкие линии взаимодействия;

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

управление версиями всех элементов проекта;

легкодоступную точку обмена информацией друг с другом.

Этому списку требований вполне соответствовал Sitespring от Macromedia. Давайте ближе ознакомимся с этим приложением, и вы увидите, что оно подойдет и для вашей компании.

Короткое путешествие по Sitespring

Прелесть продукта Sitespring состоит в том, что это — Web-приложение. Это значит, что он не предъявляет каких-либо требований к программному обеспечению, установленному на компьютере, и работать с ним можно начать сразу. Все, что нужно, — это броузер IE версии 4.0 или выше (или аналогичный продукт), оснащенный интерпретатором JavaScript, поддержкой Cascading Style Sheet и модулем (plug-in) Flash 5.

Существует также и небольшое вспомогательное приложение — Sitespring Helper, — которое позволяет посетителю войти на узел проекта с помощью броузера и выбрать или открыть на нем файл. Это приложение автоматически загружается на компьютер пользователя, как только он впервые пытается открыть файл в приложении Sitespring.

После входа в Sitespring на экране открывается интерфейс, показанный на рис. 3.1.


Рис. 3.1. Страница входа в Sitespring. Имя и пароль предоставляются пользователям администратором узла
Домашняя страница Sitespring

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

Панель инструментов расположена вверху страницы и используется для навигации по узлу Sitespring. Кнопки на панели интуитивно понятны (они перечислены ниже).

Ноmе. Переход на домашнюю страницу Sitespring.

Projects. Отображает названия всех проектов, над которыми в настоящий момент работает команда.

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

Рис.3. 2. На домашней странице Sitespring показано все, что можно выполнить с этим приложением

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

Reports. Открывает страницу Create Report. На ней можно создать прикладные отчеты, которые будут доступны всей команде и клиенту. Любой отчет можно сохранить и запустить снова.

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

Admin. Если вам назначены права администратора или руководителя проекта при установке проекта в Sitespring, то вы увидите эту кнопку. Члены команды, которым назначена роль User, эту кнопку не увидят. Щелкните на ней, и вы попадете на экран Admin, на котором можно сделать все, начиная с добавления и удаления членов команды и заканчивая назначением паролей.

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

Модули Sitespring

Сердце и душа приложения Sitespring составлены из модулей My Projects (Мои проекты), My Tasks (Мои задачи) и My Reports (Мои отчеты). Модули поддерживают определенные аспекты рабочего процесса, но показывают пользователю только ту информацию, к которой у него открыт доступ. Например, для участия в дискуссии можно допустить клиента, только если он имеет отношение к процессу, о котором идет речь.

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

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

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

Модуль Discussion

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

Представьте себе, что Джека попросили восстановить рисунок. Он ответил, что слишком занят, и перенаправил вопрос своему коллеге Мартину по электронной почте. Тот посмотрел сообщение, но не понял сути вопроса, потом он отвлекся и забыл ответить на письмо Джека. Через несколько дней рисунок уже должен был быть готов, и Джек спросил у Мартина о состоянии дел. Мартин тупо смотрит в лицо Джека и спрашивает: "Ты разве не получил мое письмо?" В общем, вы видите, к чему привела такая дискуссия.

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

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

Второй тип обмена мнениями — открытый (public). Он публикуется на узле. В нем могут участвовать все, кто обладает достаточными для этого привилегиями, в том числе и клиент. В модуле Discussions клиент может просмотреть какую-то работу и высказать свое мнение относительно нее.

Например, клиент может просмотреть страницу и потребовать внести существенные изменения. Эти изменения будут обсуждены на дискуссии, и клиент даст свое добро окончательному решению. Четыре месяца спустя клиенту выставляется счет, в котором отображены изменения, внесенные в узле. А клиент говорит: "Какая оплата? Какие изменения? Кто вам такое сказал?" Не правда ли, знакомая ситуация. Тогда руководитель проекта может предъявить клиенту запись дискуссии, на которой тот одобрил проведение работ. В этом смысле Sitespring быстро себя окупает.

Интерфейс модуля Discussions довольно прост в использовании и содержит следующие элементы.

Topic (Общая тема дискуссии). Обычно берется из темы первого сообщения в ней.

Owner (Владелец). Имя человека, который начал дискуссию.

Posts (Количество сообщений, отправленных в дискуссию).

Latest Post (Дата последнего сообщения в дискуссии).

Status Может иметь два значения: открытая (т.е. продолжающаяся в настоящее время) и закрытая, т.е. законченная.

Published (Индикатор, свидетельствующий о том, помещена ли дискуссия на узле проекта).

Для того чтобы начать дискуссию, откройте модуль My Discussions на узле проекта и щелкните на знаке "плюс". Откроется страница Add Discussion, показанная на рис. 3.8. Введите тему, само сообщение и щелкните на кнопке Save. Дискуссия добавится в список, и все, обладающие достаточными привилегиями, получат уведомление по электронной почте об открытии новой дискуссии.

Значки на панели Discussion также могут оказаться полезны. Среди них вы увидите следующие.

+(Add) или - (Delete). Добавить или удалить дискуссию.

Висячий замок. Закрыть дискуссию.

Глобус со знаком "плюс". Опубликовать дискуссию на узле проекта.

Глобус со знаком "минус". Удалить дискуссию с узла проекта.

Кнопка с символом i. Открыть справку.

Рис. 3.8. Добавление дискуссии на страницу Add Discussion приложения Sitespring

Обратите внимание на панель инструментов Discussion. Если вы находитесь на домашней странице Sitespring, знак "плюс" будет недоступен. Щелкните на проекте, и этот знак станет видимым, но не будет доступен с этой страницы. Это говорит о том, что дискуссия не может быть удалена с домашней страницы и в то же время вы не можете ее инициировать. Еще следует обратить внимание на флажок около слова Topic: если его установить, будут выбраны все дискуссии; щелчок на значке "минус" удаляет все дискуссии.

Начало дискуссии и участие в потоковых дискуссиях

Для того чтобы начать новую дискуссию, на главной странице пользователя откройте проект и щелкните на кнопке Add под разделом My Discussions. Введите тему в поле Subject, а в поле Message — свое сообщение. Щелкните на кнопке Save.

Для того чтобы поместить свою реплику в уже ведущейся дискуссии, откройте модуль My Discussions на узле проекта, щелкните на имени получателя сообщения и на кнопке Post Reply (Послать ответ).

Совет

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

Ограничение доступа к узлу клиента

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

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

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

Создание регистрационной записи (login) в Dreamweaver MX

Создание регистрационной записи не так сложно, как может показаться на первый взгляд. Для этого нужно открыть новую страницу в Dreamweaver MX и создать на ней форму.

1. Поместите точку вставки в том месте, где вы хотите создать форму, и выберите в меню команду Insert=>Form. Если вы не увидите красный пунктирный прямоугольник, ограничивающий область формы, выберите в меню пункт View=>Visual Aids=>Invisible Elements. Окно Properties изменится и будет отражать свойства нового объекта.

2. В окне свойств задайте имя формы и не задумывайтесь о заполнении полей Action и Method. Об этом позаботится функция Log In User.

3. Добавьте два текстовых поля, в которых пользователь будет вводить имя пользователя и пароль. Выберите в меню пункт Insert=>Form Objects=>Text Field, вставьте поля и заполните название ярлыка в окне свойств.

4. Добавьте кнопку Submit. Для этого выберите в меню команду Insert=>Form Objects=>Text Field. На страницу будет помещена кнопка, на которой будет написано слово Submit. Если вы хотите заменить это назначение, выделите кнопку и измените ее ярлык в окне свойств объекта. Текст, отображаемый на кнопке, задается в поле Label окна Properties.

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

1. Откройте панель Application и выберите вкладку Server Behaviors. Щелкните на знаке "плюс" и выберите в списке значение User Authentication, Login User.

2. Откроется диалоговое окно Login User, в котором нужно либо ввести требуемую информацию, либо выбрать ее из списка.

3. В поле Get Input From Form введите имя формы, созданной ранее. Обязательно укажите страницы, сообщающие об успешной и неуспешной регистрации. При неправильной регистрации должна открываться страница, сообщающая о неверном имени пользователя или пароле и предлагающая щелкнуть на кнопке, которая переводит вас назад на страницу регистрации. Заполнив необходимые поля, щелкните на кнопке ОК.

Sitespring и обмен информацией

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

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

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

Каждый узел проекта связан с конкретным проектом. Например, если у клиента есть одна команда, работающая над кампанией распродаж, и другая команда, работающая над продвижением некоторого нового продукта, оба эти проекта будут связаны с отдельными узлами. Это — хороший способ разбить сложный узел на серию небольших управляемых проектов.

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

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

Совместная работа

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

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

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

Главным механизмом этого процесса является специально созданный узел, на котором клиент видит продвижение проекта и с помощью которого взаимодействует с командой. Такой механизм создала компания Macromedia. Это — Sitespring, пакет, который содержит полноценный набор средств управления проектом и командой, а также инструментарий клиента. Так как Macromedia в ближайшем будущем не собирается выпускать следующие версии этого продукта, пакеты Dreamweaver MX и Fireworks MX содержат на него прямые ссылки. Для перехода к пакету Sitespring в Dreamweaver MX нужно выбрать команду меню Window=>Others=>Sitespring или нажать клавишу . В Fireworks MX для этого требуется выбрать в меню Window=>Sitespring. Эти ссылки неоценимы, и если вы начнете ими регулярно пользоваться, Sitespring скоро превратится в вашего незаменимого помощника.

Создание и изменение клиента в Sitespring

Когда сформирован список команды и распределены уровни доступа, пора создавать организацию клиента. Создавая организацию клиента на раннем этапе работы с узлом Sitespring, мы позволяем в дальнейшем выбирать ее из списка при создании проекта. Информация о клиенте легкодоступна. Стоит в ней чему-либо измениться (например, адресу URL) и достаточно занести новые данные всего в одном месте узла — и изменение сразу же отразится на всем узле Sitespring.

Как вы уже убедились, Sitespring — это Web-приложение. Следовательно, создание организации клиента — это создание домашней (или индексной) страницы узла проекта.

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

1. На домашней странице узла щелкните на ссылке Clients. Откроется страница Client Organization. Щелкните на кнопке Add, и откроется страница Add Client Organization (Добавить организацию клиента) (рис. 3.6).

2. Введите информацию о клиенте (имя, адрес и т.п.) в текстовые поля. После завершения ввода щелкните на кнопке Save. Имя организации клиента появится в списке на домашней странице Sitespring.

Если в какой-то момент изменятся какие-либо реквизиты клиента, они легко могут быть изменены и на узле. На домашней странице Sitespring щелкните на ссылке Clients, и откроется страница Client Organization. Щелкните на флажке рядом с именем клиента, информацию о котором нужно изменить, а затем щелкните на кнопке Edit. После ввода новой информации щелкните на кнопке Save.

Клиенты могут быть также и удалены из узла Sitespring. Порядок выполнения этой процедуры — такой же. На домашней странице Sitespring щелкните на ссылке Clients, и откроется страница Client Organization. Щелкните на флажке рядом с именем клиента, которого нужно удалить, щелкните на значке Delete и на кнопке Delete.


Рис. 3.6. Установка организации клиента в Sitespring. Для заполнения обязательны только текстовые поля, помеченные звездочкой, остальные по необходимости могут быть заполнены позже
Предупреждение
Будьте внимательны при удалении клиентов. Хотя удаление клиента и снимает с узла часть информационной нагрузки (и, кроме того, какое моральное удовлетворение — отметить надоевшего взбалмошного клиента и щелкнуть на кнопке Delete!}, могут возникнуть проблемы, если его удаление выполняется без предварительного удаления проекта. Проект без клиента остается сиротой; узел, не имеющий клиента, теряет работоспособность. Не удаляйте клиентов, не завершив работу над связанными с ними проектами.

Создание нового файла в Fireworks из метки-заполнителя в Dreamweaver MX

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

1. Откройте страницу в Dreamweaver MX, на которой должен быть помещен рисунок. Выберите в меню команду Insert=>Image Placeholder. Откроется диалоговое окно Image Placeholder, показанное на рис. 3.21. Задайте метке-заполнителю имя, размеры и введите ее альтернативное текстовое описание, например То Macromedia. Щелкните на кнопке ОК, и на странице отобразится серый прямоугольник с заданными именем и размером.

2. Добавить рисунок на место метки-заполнителя в Dreamweaver MX можно тремя способами. Можно щелкнуть правой кнопкой мыши на метке и в контекстном меню выбрать пункт Create Image in Fireworks. Также можно/удерживая нажатой клавишу , дважды щелкнуть на метке-заполнителе. Или можно выделить метку заполнитель и щелкнуть на кнопке Create в окне Property. Каждый из этих способов вызовет запуск приложения Fireworks с новым документом, размеры которого соответствуют метке-заполнителю.

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


Рис. 3.21. Чтобы добавить метку-заполнитель для рисунка, задайте ее имя, размеры и альтернативный текст, который будет отображаться рядом с курсором, помещенным над рисунком в броузере
3. Завершив работу с рисунком в Fireworks MX, щелкните на кнопке Done в верхней части рисунка, и вы вернетесь на страницу в Dreamweaver MX. После возврата на место метки-заполнителя уже будет вставлен сам рисунок. Если страница доступна по ссылке на узле клиента, рисунок появится и на той странице.

Если вы хотите отредактировать рисунок, удерживая клавишу , щелкните на рисунке. При этом запустится приложение Fireworks с открытым в нем рисунком. Закончив редактирование рисунка, щелкните на кнопке Done.

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

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

1. Откройте модуль My Projects и щелкните на гиперссылке Create (Создать). Откроется страница Create Project Site. Просмотрите информацию о проекте и по необходимости внесите в нее изменения.

2. Теперь можно выбрать шаблон конструкции в списке Design Template. Шаблоны представляют собой Web-страницы, используемые для добавления элемента дизайна на узел проекта (рис. 3.11).

3. На странице Create Project Site вам будет предложено определить путь к папке проекта. В текстовом поле Project Path введите имя папки, которую собираетесь использовать как папку и одновременно URL проекта (рис. 3.12). Щелкните на кнопке Save, и путь к папке будет установлен. После того как выбран шаблон^все участники проекта (в том числе и на стороне клиента), которым разрешен доступ, смогут приступить к обмену информацией.

4. Создав узел проекта, можно определить, кто из списка пользователей имеет права доступа к узлу и какие модули им разрешено использовать. Для установки этих разрешений щелкните на ссылке Details рядом с именем проекта, и откроется страница Project Site {Details).

5. Когда будет открыта страница Details, щелкните на значке Grant Project Site Permissions в модуле Permitted Client Users. Для того чтобы добавить пользователя, щелкните на знаке "плюс" в модуле Grant Permission To View Project Site (рис. 3.13). Установите флажки для всех клиентов, которых хотите добавить.


Рис. 3.11. На узле проекта, созданного для этой книги, использовался шаблон Teton


Рис. 3.12. Страница Create Project Site позволяет выбрать шаблон для узла


Рис. 3.13. Новый пользователь имеет права доступа к узлу
6. Чтобы добавить клиента, щелкните .на ссылке под именем пользователя, после чего введите необходимую информацию, в том числе пароль (рис. 3.14).

7. Когда закончите, щелкните на кнопке Save. Новый пользователь отобразится на узле проекта (рис. 3.15).

Для того чтобы удалить пользователя клиента, поставьте флажок рядом с его именем и щелкните на знаке "минус". В ответ на запрос щелкните на кнопке Remove.

Выбор модулей для узла проекта

Иногда не требуется наличия всех модулей. Если, например, у клиента нет задач, в модуле Client Task также нет необходимости. Приложение Sitespring позволяет отображать только нужные модули. Это может оказаться полезным, так как по умолчанию отображаются все модули (рис. 3.16).

В области My Projects узла проекта щелкните на ссылке Details, и откроется узел проекта. После этого переместитесь вниз, к модулю Module Availability (Доступность модулей), и щелкните на ссылке Change (Изменить) в области Visibility (Видимость). Страница обновится, и все недоступные модули поменяют свое состояние на Off.

Добавление категорий документа

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

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



Рис. 3.14. Kate Small была добавлена в список авторизированных пользователей

Если вы наделены привилегиями администратора, щелкните на кнопке Admin главной панели инструментов в верхней части страницы, после чего щелкните на ссылке Project and Task, и откроется страница Status Values. Щелкните на знаке "плюс", и откроется страница Add Document Category (рис. 3.18).

В соответствующих текстовых полях введите название и описание категории. Если информация верна, щелкните на кнопке Save. Введенные данные отобразятся в модуле Document Categories (рис. 3.19).

Добавление членов команды

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

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

1. Щелкните на кнопке Add под модулем Team, после чего установите флажки Возле имен всех членов команды, которых хотите добавить. Снятие отметки удаляет члена из команды проекта.

2. Щелкните на кнопке Add. После этого все члены команды получат по электронной почте уведомление о том, что они стали членами конкретной команды, а также инструкции по входу на узел проекта.



Рис. 3.15. Окно узла проекта отображает детали узла и пользователей клиента, которым разрешен доступ к узлу



Рис. 3.16. Узел проекта отображает детали, пользователей и видимость



Рис. 3.17. Узел проекта без установленных категорий документов



Рис. 3.18. Категория документов, добавленная администратором



Рис. 3.19. В категорию документов добавлен пункт Drafts and Screen Shots

Назначение задач членам команды

Когда команда сформирована, ee членам нужно назначить, обязанности. Для этого на узле формируется список задач.

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

1. Щелкните на кнопке Add под задачей. Введите имя и описание задачи и назначьте ей одного из членов команды. Укажите состояние задачи; если для нее существуют конкретные сроки завершения, введите их в поле Due Date.

2. Если вы знаете приблизительное время выполнения задачи, введите его. Выполнение одной задачи является составной частью общих сроков проекта. Например, если Тому назначена дата, до которой он должен завершить создание рисунков, один из промежуточных этапов будет посвящен цветовой коррекции. Если член команды имеет свой URL, введите его адрес. Щелкните на кнопке Save, и задача будет назначена члену команды. Пример окна задач показан на рис. 3.20.

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

Помните, что любое загруженное содержание, относящееся к задаче, может быть связано с ее элементом. Для создания ссылки в области Linked Content (Связанное содержание) щелкните на знаке "плюс". Выберите содержание для ссылки, установив флажки рядом с соответствующими файлами. Здесь же можно добавить поток дискуссии, щелкнув на знаке "плюс" в области Discussions. При этом члены команды будут автоматически уведомлены о начале дискуссии. Свои сообщения в дискуссию можно отправить, щелкнув на кнопке Post Reply в потоке дискуссии.

Установка и использование модуля My Projects

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

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

Руководитель проекта назначает уровни ответственности и права доступа к информации. Создавать и изменять проекты могут только лица, которым назначен уровень доступа руководителя проекта. Хотя этот уровень доступа можно назначить как угодно большому количеству лиц, старайтесь ограничиваться как можно меньшим их составом. Проект в Sitespring многомерен. Основной единицей в проекте является задача с одним членом команды, ответственным за ее выполнение. Многие Web-разработчики верят в аксиому, что простое перерастает в сложное. Если сложный проект разбит на серию последовательных, небольших, легко выполнимых задач, то завершение последней задачи приводит к завершению проекта.

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

1. Если домашняя страница Sitespring открыта, щелкните на кнопке My Projects панели инструментов Sitespring. Щелкните на кнопке Add (+), и откроется страница Add Project (Добавить проект) (рис. 3.7).

2. В соответствующих текстовых полях введите имя проекта и его описание. В списке Priority выберите приоритет, присваиваемый проекту.

3. В списке Owner выберите владельца проекта. Обычно им становится руководитель проекта. Из других списков выберите организацию клиента (Client Organization) и текущее состояние проекта (Status).

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

5. Откройте модуль My Projects и щелкните на ссылке соответствующего проекта. Откроется страница проекта. В области Team (Команда) щелкните на знаке "плюс", чтобы на странице Add Team Members (Добавить членов команды) открылся список зарегистрированных пользователей. Щелкните на флажке рядом с членами команды, которых вы хотите добавить в проект.

6. Щелкните на слове Add в заголовке страницы, чтобы вернуться на страницу Project. Выбранные имена отобразятся в области команды проекта.



Рис. 3.7. Добавить проект на страницу Add Project могут только администраторы и руководители проектов

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

Установка правил в Sitespring

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

Одними из первых правил, которые следует установить, являются права доступа к узлу. Эту процедуру выполняет администратор, который зарегистрировал при установке узла свое имя и пароль. Единственным отличием администратора от остальных ролей на узле является наличие у него на экране пункта меню Admin.

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


Рис.3.3. Страница Administration доступна только администратору и руководителю проекта

Установка узла клиента в Dreamweaver MX

Хотя Sitespring можно рассматривать как пакет "все в одном", приложение Dreamweaver MX можно также использовать для создания узла клиента и выполнения множества таких же задач, как и в Sitespring. В нем узел клиента также рассматривается как некий центр обмена информацией (Communication Central) между членами команды и клиентом. Если узел создается в Dreamweaver MX, разделите его на две части, для команды и для клиента, и, разумеется, защитите паролем. Таким образом, члены команды смогут свободно общаться друг с другом, однако можно будет ограничить число сотрудников, которые имеют право вступать в контакт с клиентом. Если узел установлен правильно, сигналы не курсируют бесконтрольно, а линии взаимодействия тщательно отслеживаются.


Рис. 3.20. Членам команды назначаются задачи и сроки их выполнения Если вы решили создать узел клиента, обратите внимание на следующие важные вопросы.

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

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

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

Постройте критичные пути или другие варианты графика работ, которые будут общими для клиента и команды. Расширение Calendar пакета Dreamweaver MX мы уже рассматривали в главе 1. Это — хороший инструмент для выполнения таких задач.

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

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

Детальное описание создания узла клиента в Dreamweaver MX вряд ли будет сейчас уместным, так как эти узлы создаются программистами и никакие два узла не похожи друг на друга. Например, Келли Готто (Kelly Goto) в своей книге Web Redesign: Workflow that works, выпущенной издательством New Riders, использует довольно простой дизайн для узла клиента; а Тедд Пургасон (Tedd Purgason) в своей книге Flash deConstraction демонстрирует чрезвычайно сложную конструкцию узла. Оба эти узла работоспособны и удовлетворяют потребностям своих компаний.

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

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

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

Узел проекта

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

Если бы мы создавали узел для авторов этой книги, организацией клиента была бы некая гипотетическая компания, например Three Lost Souls. Пользователями были бы Том, Джордан и Крис. После ввода всей информации была бы создана внутренняя база данных, так что если бы информация о Джордане изменилась или сама компания Three Lost Souls переехала бы по другому адресу во время выполнения проекта, информацию нужно было бы изменить всего в одном месте.

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

1. Щелкните на кнопке Client панели инструментов Client Organization. Для того чтобы добавить клиента, щелкните на кнопке со знаком "плюс", и откроется страница Add Client Organization (Добавить организацию клиента), показанная на рис. 3.9.

2. В поле Name введите название организации. Далее в соответствующих полях введите адрес, телефон и URL компании. Если вам захочется сопроводить информацию каким-либо комментарием, введите его в поле Comment.


Рис. 3.9. Первым шагом в создании узла проекта является идентификация компании, для которой выполняется работа
3. Щелкните на кнопке Save, и введенная информация отобразится на странице Confirmation (Подтверждения).

Пользователи создаются на странице Client Organization. (Это — организация, в которой работают пользователи клиента.) Когда открыта страница Client Organization, щелкните на кнопке Add User (Добавить пользователя), и откроется страница Add Client User, показанная на рис. 3.10. В соответствующих полях, введите имя, адрес и номеров телефона пользователя. На этой странице для пользователя также задаются его регистрационное имя и пароль для входа в систему. Когда закончите, щелкните на кнопке ОК.


Рис. 3.10. Страница Add Client User помогает вывести множество пользователей организации клиента на управляемый уровень

Проверка своих идей на модели узла

Иерархическая модель навигации

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

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


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

Эскиз

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

На самом деле целью создания узла JCT является реализация примера совместного использования средств, предлагаемых пакетом Studio MX. Исходя из этого мы решили создать узел, состоящий из четырех страниц, чего вполне достаточно для демонстрации инструментария пакета. И, соответственно, задали себе вопрос: "Как страницы будут взаимосвязаны, и как они будут выглядеть?"

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

Как выбрать подходящую модель

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

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


Рис. 4.4. В полной модели практически все узлы соединены со всеми узлами
На рис. 4.5 вы видите несколько вариантов набросков, которые сделал дизайнер при с оставлении плана узла JСТ.


Рис. 4.5. Несколько предварительных набросков плана узла JCT

Конструирование информационных страниц

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

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

По этой теме написано множество прекрасных книг. Одной из наших любимых является Web Redesign: Workflow that works авторов Кэлли Готто (Kelly Goto) и Эмили Котлер (Emily Coder), выпущенная издательством New Riders Publishing. В ней отдельная глава посвящена структуре узла. Авторы отмечают, что нельзя создать узел, не посмотрев на проект с трех точек зрения: содержания, узла и страницы. Точка зрения содержания — это взгляд на информационное наполнение узла. Точка зрения узла — это карта узла, его каркасная модель (подробнее о ней рассказывается в главе 5), взгляд на структуру всех страниц. В предыдущей главе был поднят вопрос о том, что перед началом работы над узлом нужно посмотреть на весь проект со стороны. В этом разделе мы рассмотрим этот вопрос более подробно и начнем приближать точку зрения на узел до тех пор, пока не станут видны все отдельные страницы.

После того как создана модель навигации, пора задать следующий вопрос: "А как будет выглядеть узел?"

Линейная модель навигации

Линейная модель навигации показана на рис. 4.1. Она предполагает наличие прямой линии, соединяющей все страницы узла, от главной (домашней) до последней. Хорошим примером такой конструкции служит серия фотографий, иллюстрирующих семейный отпуск. Пользователь последовательно перемещается между страницами.

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


Рис. 4.1. Линейную модель можно сравнить со слайд-шоу

Модель полной навигации

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

Модель "звезда"

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

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

На рис. 4.3 показано, как бы работал узел JCT, если бы в нем была использована модель навигации типа "звезда".


Рис. 4.3. Модель типа "звезда" всегда может вернуть пользователя на главную страницу

Модели навигации

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

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

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

Проверка своих идей на модели узла

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

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

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

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

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

Можно, конечно, применить и более быстрый метод: прыгнуть в машину и выбрать общее направление к месту назначения. Если случится заблудиться, вы всегда сможете спросить у прохожих направление. Однако за время, которое вы в таком случае потратите на дорогу, я уже успею сделать все необходимые дела и вернуться домой. В случае если вы опоздаете (благодаря поддержке прохожих, которые сами не знают, куда показывают), вам придется не солоно хлебавши повторить весь свой путь, только теперь уже в обратном направлении — домой.

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

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

Планирование узла JCT

Узел, создание которого мы рассматриваем на протяжении всей этой книги, посвящен гипотетической компании JCT. Этот узел должен следовать некоторому стратегическому плану. Процесс начался с того, что была поставлена задача создать узел, в котором будут отражены основные принципы Web-дизайна: от постановки концепции до загрузки узла на сервер по протоколу FTP. Любой Web-дизайнер знаком с этим процессом, который начинается со встречи заказчика с разработчиком и с вопроса: "Вы занимаетесь Web-дизайном?"

После того как клиент выберет разработчика, начинается процесс планирования.

Спросите любого работающего в торговле, и он вам скажет, что в этом деле успех зависит от хорошей подготовки, белоснежной улыбки и удачных шуток. Разница между хорошей подборки фактов. Когда приходит время выработать стратегию для клиента, процесс сбора фактов сводится к заданию следующих вопросов: Кто составляет целевую аудиторию клиента? Естественно, стратегия будет различаться для узла сотрудников корпоративной сети и для парадной витрины компании в Internet. Корпоративная сеть имеет ограниченную аудиторию, а пользователей Internet — громадное множество. Узел, выставляемый в Internet, должен быть доступен любому вооруженному хоть каким-то броузером.

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

Что хочет сказать клиент? Никогда не забывайте, что Web — это прежде всего носитель информации. Его изначальной целью был обмен информацией между научными работниками. Если вы посетите узел рекламного агентства, он как бы вам скажет: "Мы знаем себе цену!" Если посетить узел розничной продажи, он вам как бы скажет: "Купите все, что вам нужно, именно здесь!"

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

Имеет ли клиент собственный корпоративный стандарт? В Web всем двигают торговые марки. Посетите узел фирмы Nike, и вы увидите ее эмблему (swoosh); посетите узел Кока-Колы, и вы захлебнетесь красным цветом. Посетите узел Disney, и вы сразу натолкнетесь на уши Микки-Мауса. Чем крупнее компания и чем шире ее международные связи, тем проще уловить ее корпоративный стиль, сопровождающий всю рекламу в печати и в Web. Тот же самый образ компания пытается донести и в печатных брошюрах, рекламных плакатах и ежегодных отчетах, которые публикуются в Web. Таким способом компания управляет своим имиджем на рынке. Например, продукцию Nike никто и ни с чем не спутает. И даже в этом случае пользователь после каждого щелчка на любой странице узла Nike чувствует, что он находится на узле именно этой компании. То же касается одежды и печатной продукции. Они представляют последовательный имидж компании на рынке.

В случае с компанией JCT идентичность торговой марки поддерживается с помощью логотипа и талисмана.

Что нужно клиенту? Очень важно внимательно выслушивать клиента и отличать то, что он хочет, от того, что ему нужно. Мы были знакомы с одним дизайнером, которого клиент чуть не довел до сумасшествия. Клиент ему предложил довольно элегантное решение дизайна. Тот выполнил работу, на что клиент сказал, что готовый дизайн напоминает ему 10-центовую монету и совершенно разрушает его задумку. В этом случае клиент и исполнитель утратили из виду главную цель дизайна — удовлетворение потребности, сфокусировав внимание на сверхновых техниках, которые смазали цель. В данном случае причиной было добавление на все страницы дополнительных линий.

Вам теперь предстоит довольно неординарная работа. Нужно не только разработать и реализовать дизайн, но и провести массу времени с клиентом не в роли подрядчика, а в роли учителя. В приведенном выше примере дизайнер должен был объяснить клиенту, как дополнительные линии разрушают всю концепцию дизайна. Внезапно оказалось, что только эти линии и были источником разногласий с клиентом, поэтому решение этого вопроса позволило им продолжить сотрудничество. И снова, если клиент встанет в позу и скажет: "Я за это плачу, и если я сказал, что здесь должна быть линия, значит, вы должны ее туда поставить," — вам нужно серьезно подумать о продолжении отношений с этим клиентом.

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

Создание эскиза

Эскизы фиксируют внешний вид страницы. Они варьируются от простых зарисовок, показывающих композицию элементов страницы, до многотомных изданий, описывающих создание анимационных фильмов. Эскизы начинаются с серии заготовок на странице (называемых thumbnail — отпечаток).

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

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

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

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


Рис. 4.6. На этом листке нате внимание привлекла только концепция, помещенная внизу


Рис. 4.7. Логотип и талисман, размещенные на странице


Рис. 4.8. Нам потребовалось решить множество вопросов удобства и дизайна, с которыми мы столкнулись на этом исходном эскизе композиции
Существует множество способов создания эскизов, и один из них предполагает осознание того, что мы работаем в Web и используем один из броузеров. Несколько лет назад мы открыли для себя довольно интересный подход к эскизу, который был описан в книге Designing Web Graphics Линды Вейнман (Linda Weinman), выпущенной издательством New Riders.

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

Шаблон окна броузера можно создать в Fireworks.

1. Откройте броузер и разверните его окно на весь экран. Откройте все панели инструментов броузера. Не думайте о том, что у пользователя эти панели могут быть скрытыми. Всегда планируйте худшее, и вы не разочаруетесь.

2. Переместите курсор в центр окна броузера. Его потом легко можно стереть в Fireworks. Теперь сделайте снимок экрана и выйдите из броузера.

3. Откройте Fireworks MX, а в нем — новый документ. На компьютерах PC снимок экрана будет находиться в буфере обмена, и когда вы откроете новый документ в Fireworks, его размеры по умолчанию будут установлены по размерам снимка, содержащегося в буфере обмена. В компьютерах Macintosh снимок с экрана автоматически записывается на жесткий диск под именем Picture 1 (или под другими номерами, если таких снимков несколько). На панели инструментов Fireworks выберите белый цвет заливки без маски. После этого выберите инструмент Rectangle и растяните прямоугольник от верхнего левого до нижнего правого угла экрана броузера. То же самое выполните в адресной строке URL, а затем присвойте файлу имя и сохраните его.

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

Создание карты узла в Dreamweaver MX

Функции и инструменты Macromedia Studio имеют дополнительное применение, которое ничуть не уступает по своему значению первичным функциям. Одним из примеров такой функции является окно Site Map. Это окно изначально создавалось для просмотра взаимосвязи между различными страницами узла.

Представление Site Map показывает узел в виде организационной диаграммы, представленной серией блоков, соединенных линиями со стрелками. В случае функции Site Map блоки заменены значками страниц. Если со страницей связаны вспомогательные страницы, рядом со значком страницы вы увидите знак "плюс" или "минус". Страницы с работающими ссылками выделены синим цветом, а страницы с разорванными ссылками — красным. Возможно, что вы увидите значок с изображением глобуса, указывающий на внешнюю по отношению к узлу страницу, или узел, или специальную ссылку :mailto:. Если включена блокировка (Check In/Check Out), могут отображаться красная или зеленая отметка либо значок с изображением висячего замка. Если посмотреть на карту узла, домашняя страница будет расположена на вершине структуры, а все зависимые страницы будут соединены линиями со стрелками.

Открытие окна Site Map

Введение панелей в Dreamweaver MX сократило количество окон, которые имелись в предыдущих версиях этого приложения. Для того чтобы открыть окно Site Map, выполните следующие действия.

1. Откройте страницу Index.html из папки SiteEx, которая находится на Web-узле книги. Выберите в меню Window=>Site Map. (С помощью клавиши можно также открыть окно Site Management.)

2. Когда откроется окно, выберите в списке пункт Site View. В панели Files откроется карта узла (рис. 4.13). Для того чтобы расширить это представление, щелкните на кнопке Expand/Collapse.

Главным назначением карты узла является предоставление пользователю макропредставления узла. Однако, следуя политике компании Macromedia, это — не все. Чтобы создать карту узла, подключая новые или существующие страницы, выполните следующие действия.

1. Откройте карту узла и щелкните на значке Page. Выберите в меню команду Site=>Link To A New File, или нажмите комбинацию клавиш , или щелкните правой кнопкой мыши на значке Page и выберите в контекстном меню пункт Link To a New File. В любом случае откроется диалоговое окно.

2. В диалоговом окне Link To New File введите имя нового файла (используйте только расширение .htm или .html). Нажмите клавишу <Таb>, чтобы перейти к следующему текстовому полю. Введите в нем название новой страницы, Sox Page, и снова нажмите клавишу <Таb>. В поле Text of Link введите фразу, которая будет описывать ссылку, и щелкните на кнопке ОК. На карте появится новая страница с названием Sox (рис. 4.14).

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



Рис. 4.13. Карта узла, открытая в панели. Щелкните на кнопке Expand/Collapse, и представление развернется на весь экран



Рис. 4.14. Чтобы добавить страницы в представление карты узла, воспользуйтесь меню Site либо щелкните правой кнопкой мыши и выберите в ктипекстном меню пункт Link to New File

Перевод карты узла в режим Deliverable

Перевод карты узла в документ, который может быть отправлен клиенту на утверждение, — малоизвестная функция приложения Dreamweaver MX. Обычно пользователи делают серию снимков с экрана, которые затем вставляют в документ, отправляемый клиенту. Этот процесс представляет собой действия по созданию снимков экранов и их объединение в Fireworks в единый документ. Теперь приложение Dreamweaver MX способно делать снимки экрана автоматически.

Откройте в папке siteEx страницу Index.html и выберите в меню пункт File=>Save Site Map. Откроется диалоговое окно Site Map. Выберите тип файла — BMP или PNG. (На компьютерах Macintosh нужно выбрать формат Pict или JPEG.) Щелкните на кнопке ОК.

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

Замечание

После просмотра этого раздела один из авторов задал интересный вопрос: "Зачем для создания карты узла использовать Fireworks, если это гораздо проще сделать в Dreamweaver MX?" Карта Dreamweaver похожа на организационную диаграмму корпорации. Информация подается в развороте сверху вниз. Когда дело доходит до концепций с более свободной формой, Fireworks предоставляет большую гибкость в работе. Например, его способность выделять различные фрагменты разными цветами сделает карту более наглядной. Один из способов создания карты узла без применения каких-либо программ заключается в прикреплении к стене листков с примечаниями. Этот метод позволяет быстро перемещать их, образовывая логические цепочки перехода по страницам узла. Работа в Fireworks подобна этому методу. Все элементы карты можно оперативно переместить в любое место. Этот вопрос высветил фундаментальный принцип Web-разработки. Клиента не волнует, как именно будет выполняться работа, — главное, чтобы она была сделана.

Создание карты узла в Fireworks MX

Существует множество решений карт узлов, доступных Web-разработчику. Можно использовать такие программные решения, как Inspiration (www.inspiration.com) или Visio (www.microsoft.com/office/visio). Можно создать карту узла при помощи обычной программы работы с графикой, например FreeHand 10. Можно для этого использовать издательское приложение, такое как PageMaker или QuarkXPress. Другие решения предполагают использование специализированного пакета Web-разработки, такого как Dreamweaver MX, или чистого листа бумаги и карандаша. Выбор метода зависит от сложности проекта. Такие программные решения, как Visio и Inspiration, хороши для узлов, составленных из сотен страниц, в то время как чистого листа бумаги будет достаточно для составления композиции из десятка страниц.

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

Элементы карты узла сами по себе не сложны. Все, что требуется, — это прямоугольник, линия и стрелка. Прямоугольник будет представлять страницу, а линия со стрелкой — переход от одной страницы к другой. Карту узла делает сложной количество элементов блоков, стрелок и линий. Нарисовав один блок, неизбежно задаешься вопросом: "А что дальше?" Приложение Fireworks предлагает удобную функцию библиотеки, в которой можно хранить многократно используемые элементы.

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

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

Когда объект конвертируется в символ, он автоматически помещается в библиотеку Fireworks и прикрепляется к конкретному документу. Но это еще не все. Библиотеки можно сделать доступными для всех документов Fireworks: Просто открыв библиотеку и перетянув элемент на страницу, можно создать экземпляр этого символа. Этот экземпляр имеет обратную ссылку на сам символ, что отличает его от копии объекта.

Создание и использование символов в Fireworks

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

Для того чтобы создать и использовать символы в Fireworks MX, выполните следующие действия.



Рис. 4.10. Диалоговое окно New Document в Rreworks

1. Откройте новый документ в Fireworks. Для этого выберите в меню пункт File=>New. Нажмите комбинацию клавиш , чтобы открыть диалоговое окно New Document (рис. 4.10), в котором в качестве единиц измерений уже установлены дюймы, а размеры рисунка по умолчанию составляют 14x8,5 дюйма. Это — обычный формат А4 в горизонтальной ориентации. В качестве цвета фона выберите белый и щелкните на кнопке ОК.

2. На панели инструментов выберите инструмент Rectangle и нарисуйте прямоугольник. Выделите нарисованный объект и определите для него в окне свойств заполнение как None, контур — Basic, Hard Line, а цвет контура — Black.

3. Оставив прямоугольник выделенным, выберите в меню пункт Inserts Convert To Symbol или нажмите клавишу . Откроется диалоговое окно Symbol Properties. Присвойте символу имя Box, выберите значение переключателя Graphic и щелкните на кнопке ОК.

4. Откройте панель библиотеки, выбрав в меню пункт Window=>Library, или нажав клавишу , или выбрав закладку Library на панели Assets. Ваш прямоугольник отобразится в библиотеке.

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



Рис. 4.11. Объект на странице был преобразован в символ и автоматически занесен в библиотеку. Обратите внимание, что панель Library была переведена в плавающий режим

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

Замечание

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

Вы также можете сделать, чтобы Library была отдельной панелью. Для этого выберите в меню Panel OptionsoQroup Library with=>New Panel Group. Для того чтобы вернуть панель Library назад, выполните те же действия, только выберите имя группы, отличное от New Panel Group.

В качестве альтернативы можно использовать другой метод, который, правда, не так красив. Выберите в меню команду Edit=>Insert=>New Symbol. Воспользуйтесь комбинацией клавиш , чтобы открыть окно Symbol Editor (Редактор символов). Присвойте символу имя и выберите значение переключателя Graphic. Нарисуйте прямоугольник и закройте редактор символов.

Использование и изменение символов Fireworks MX при создании карты узла

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

1. Откройте файл JTCmapex.png, расположенный в папке Chapter 3 Exercise на Web-узле этой книги, и откройте библиотеку. Найдите в библиотеке символ Box и перетащите в документ две его копии. Получившиеся блоки будут намного большими, чем остальные на странице. Различие между локальными и глобальными изменениями символов заключается в следующем. Глобальные изменения вносят коррективы во все экземпляры символа, а локальные влияют только на экземпляр, с которым проводится работа.

2. Дважды щелкните на символе Box в библиотеке, и откроется редактор символов. Выберите инструмент указателя (Pointer) и щелкните на прямоугольнике в редакторе символов. Выберите на панели инструмент Scale и перетаскивайте угловую точку прямоугольника, чтобы изменить размеры фигуры. Закройте Symbol Editor.

3. Все блоки на странице изменят свои размеры, отражая изменения, сделанные с символом. Это — глобальное изменение. Изменения, производимые с символом в библиотеке, отражаются на всех его экземплярах на страницах. Для того чтобы восстановить исходные размеры блока, выберите в меню пункт Edit=>Und=>Edit.

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

1. Удалите один-два больших блока на странице и выделите на ней маленький блок. В окне Properties будут показаны высота и ширина выбранного объекта (рис. 4.12). Запомните эти числа.

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

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

1. Выделите все элементы в разделе Jeans.

2. Нажмите и удерживайте клавишу . Курсор превратится в четырехнаправленную стрелку. Нажмите клавишу и, удерживая обе клавиши, перетащите выделенный блок вправо, пока он не встанет под разделом Shoes. Теперь отпустите кнопку мыши, сохраните файл и выйдите из Fireworks MX.



Рис. 4.12. Чтобы изменить местоположение и размеры выбранного объекта, установите точные числовые значения в окне Property

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

Создание карты узла во FreeHand

Приложение FreeHand предлагает ряд средств, которые недоступны ни в Fireworks, ни в Dreamweaver MX. К тому же, FreeHand позволяет создавать многостраничные документы. На этих страницах могут содержаться разные области узла. Если вы можете перемещать страницы при создании карты узла, а также сохранять документ в формате .pdf, для вас открываются широкие возможности для передачи документа на утверждение клиенту.

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

1. Откройте новый документ FreeHand. Выберите в меню пункт Window=>Inspectors=>Document или щелкните в панели Inspector на вкладке Document. Откроется окно параметров страницы. В списке размеров страницы выберите пункт Custom. Установите ширину, равную 400 пикселям, а высоту — 600.

2. Установите ориентацию страницы в Landscape и добавьте к документу шесть страниц с помощью пункта Add Pages списка Palette. В области Number of New Pages (Количество добавляемых страниц) введите число 6. Щелкните на кнопке ОК и установите масштаб отображения в 6%.

3. Выберите инструмент Page. Щелкните на странице 1 и перетащите ее в верхнюю часть экрана. Переместите страницы 2-4 так, чтобы под первой они образовали горизонтальную линию. Перетащите страницы 5-7 так, чтобы со второй они образовали вертикальную линию (рис. 4.15).

4. Чтобы сохранить компоновку, выберите в меню пункт View=>Custom=>New и задайте имя нового представления.

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


Рис. 4.15. Карту узла легко создать в приложении FreeHand, используя ин-струмент Page для перемещения апра-ниц по документу
Создание файла PDF в приложении FreeHand

Сохранив документ, выберите в меню пункт File=>Export. В списке Save As Type (типы файлов) выберите формат PDF. Щелкните на кнопке Set Up. Если в документ встроен адрес URL, установите флажок Export URLs. Если были использованы шрифты пользователя, установите флажок Embed Fonts и щелкните на кнопке ОК. Когда вернетесь в диалоговое окно Export, щелкните на кнопке Save.

Установив флажки Export URLs и Embed Fonts, мы сохраняем все ссылки, существующие в файле. Можно проверить, выглядит ли сохраненный документ так, как должен. Файл PDF можно вывести на печать, отправить клиенту по электронной почте и сделать доступным для клиента на его узле. Большим достоинством файлов PDF является то, что они независимы от платформы. Документы Acrobat PDF могут быть открыты на компьютерах PC и Мае, если у пользователя установлено бесплатное приложение Acrobat Reader (PC) или сменный модуль Acrobat в броузере.

Структура узла

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

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

Важность моделирования узла

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

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

Загрузилась новая страница, и тут автор понял важность написания этого раздела в книге. Эта страница содержала список времени отправления, а колонка и временем прибытия была пустой!

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

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

Эта автобусная компания не посмотрела на свой узел глазами обычного посетителя. Узел был разработан с точки зрения самой корпорации, а самым важным для нее было время отправления автобусов, как будто бы автобусы отправляются в никуда. Они ни разу не задали себе вопрос: "А что ищут на узле наши клиенты?" или "Удовлетворяем ли мы потребности клиентов" и ни разу на него не ответили другим вопросом: "Какова должна быть структура узла, чтобы удовлетворить потребности клиентов?"

Когда узел моделируется, такие вопросы сразу выплывают на поверхность, и их решение становится очевидным. Модель на рис. 4.9 показывает размещение информации на странице. Мы видим большой пробел в колонке Arrival (Прибытие). Информация отсутствует.

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



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

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

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

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

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

Каркасная модель узла

Использование Dreamweaver MX для проверки навигации

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

Чтобы добавить в каркасную модель такие активные области, выполните следующие действия.

1. Откройте страницу Imdex.html в подкаталоге FarmeNav папки Chapter 5 Exercise на рабочем столе Dreamweaver MX. Если не открыта панель свойств, выберите команду меню Window=>Properties.

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

3. Выберите инструмент Rectangular Hotspot. Щелкните на нем и перетащите на первую кнопку под заголовком окна. Как только вы отпустите кнопку мыши, панель Page Properties сменится панелью Hotspot Properties. Если вы захотите изменить размеры скрытой области, щелкните на одном из ее углов и скорректируйте ее.

4. Щелкните на значке папки в области Link Input. Откроется диалоговое окно Select File, позволяющее выбрать страницу, к которой будет осуществляться переход после щелчка на этой области. Перейдите к папке FrameNav на жестком диске и выберите файл Hats. htm. В диалоговом окне щелкните на кнопке Select, и имя файла отобразится в области Link Input.

5. Протестируйте страницу в броузере. После щелчка на этой области должна открыться следующая страница — Hats.

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

Комбинирование карты узла с каркасной моделью

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

1. Если необходимо, откройте файл Index.htm. Выберите в меню пункт Site=>Site Map или нажмите комбинацию клавиш . Теперь можно преобразовать карту узла в формат BMP или JPG. (Формат BMP является аналогом формата Pict компьютеров Мае.) Если вы рассчитываете использовать файл на компьютерах серий PC и Мае, выберите формат JPG. Если файл будет использоваться только на компьютерах PC, лучше выбрать формат BMP; а если только на компьютерах Мае — то формат JPG.

Замечание

Иногда вы будете открывать файл index.htm, система может потребовать от вас определения узла. Б таком случае используйте файл index.htm как стартовый файл узла. I Если вы но знаете, как создать узел, обратитесь к главе 2.

2. Если вы пользуетесь версией Dreamweaver MX для компьютеров PC, выберите в меню пункт Site=>Save Site Map. Если вы работаете на компьютере Мае, выберите в меню команду Site=>Site View=>Save Site Map. Приложение попросит вас указать формат сохраняемого файла. Выберите либо JPG, либо BMP, а также папку FrameNav для сохранения. Щелкните на кнопке Save.

3. Добавление в узел новой страницы — относительно простая операция. Откройте карту узла и щелкните на странице Index. htm. Выберите в меню пункт Site=>Link То A New File (или Site=>Site Map View=>Link to New File на Mac). В диалоговом окне Link To New File вам надо будет задать имя файла и ссылки. В обоих случаях введите название Main и щелкните на кнопке ОК.

4. На карте узла появится значок, указывающий на новую страницу. Чтобы открыть ее, дважды щелкните на значке. Поместите карту узла и соответствующие скрытые области на главную страницу (рис. 5.5). Сохраните страницу и откройте ее в броузере. Это позволит переходить между страницами, используя реальные имена файлов, а не значки на каркасной модели.

Совет

Шаг 3 этого примера требует довольно большой работы с мышью. Но существует еще один способ добавления ссылки на новый файл. Откройте контекстное меню, щелкнув правой кнопкой мыши. В этом меню выберите пункт Link To New File. Когда откроется диалоговое окно Link To New File, выберите нужный файл и щелкните на кнопке ОК.



Рис. 5.5. Карта узла импортируется на новую связанную страницу вместе со скрытыми областями

Использование расширения Wireframing

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

1. Откройте подкаталог DwWireframeEx в папке Chapter 5 Exercise и дважды щелкните на файле Index.htm. Запустится Dreamweaver MX. Когда откроется страница, выберите в меню пункт Insert=>Wireframing. Откроется вспомогательное меню Wireframing. Этот пункт добавляется в меню Insert при установке расширения утилитой Extension Manager.

2. Расширение Wireframing устанавливает все элементы, необходимые для создания каркасной модели. Их можно выбрать в меню Wireframing и вставить в нужное место на странице. Выберите в меню элемент Button-Border=1. На страницу будет вставлен зеленый блок с черной рамкой. Перетащите этот блок на кнопку Hats и по необходимости измените его размеры.

3. Внутри блока в квадратных скобках вы увидите слова Button Name. Выделите их и введите слово Hats. He снимая выделение со слова Hats, щелкните на области ссылки в окне Property, выберите страницу Hats в папке DwNavFrame и щелкните на кнопке Select.

4. Выберите в меню Insert=>WireframingoGray Box With Label. На странице отобразится серый блок со словами, который мы будем использовать для представления графики. Перетащите этот блок на место логотипа, измените его размеры и замените слова на Logo.

5. Добавьте кнопки Pants, Shoes, Shirts и Home. Добавьте серый блок на место логотипа и присвойте ему имя Mascot.

6. Выберите в меню пункт Insert=>Wireframing=>Text Field With Label. На странице отобразится белый блок со словами. Измените размеры блока так, чтобы слева от графики поместился текст. Добавив элементы, выделите рисунок фона и удалите его. Получившаяся страница будет похожа на показанную на рис. 5.10.

Это расширение содержит некоторые важные функции. В нижней части меню Wireframing содержатся два пункта: Page Title Bar и Wireframing Disclaimer.



Рис. 5.10. На странице создана каркасная модель с активными ссылками

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



Рис. 5.11. Неверно названный элемент Page Title Bar

Элемент Page Title Bar имеет несколько важных областей, которые позволяют управлять процессом общения с клиентом и отслеживанием хода выполнения проекта.

Client. Имя клиента.

Pg. Номер текущей страницы и общее количество страниц на узле.

Last mod. By. Имя человека, который последним вносил изменения на странице.

Creation Date. Дата создания страницы.

Title. Название проекта.

Version. Версии позволяют отслеживать изменения, внесенные на странице.

Approval. Имя клиента или руководителя проекта.

Due Date. Установленные сроки сдачи работы.

Wireframing Disclaimer — одна из тех маленьких функций, которые позволяют разрешить потенциальные споры с клиентом. Может оказаться, что клиент отнесется к каркасной модели как к набору меток-заполнителей, место которых впоследствии займет содержание. Вместо того чтобы долго ему объяснять реальные цели создания каркасной модели, можно просто добавить на страницу поясняющий текст (рис. 5.12). Он даст клиенту представление о том, как работает каркасная модель, и о целях ее создания.



Рис. 5.12. На первую страницу каркасной модели можно добавить поясняющий текст

Экземпляры

Символы — это оригиналы работ членов команды. Их копии можно использовать в рабочей области Firewroks MX. Лучше всего представить себе экземпляры как псевдонимы оригинала. При размещении в рабочей области экземпляры помечаются стрелочкой в левом нижнем углу, направленной вовнутрь объекта. Эту стрелку можно трактовать как ссылку на оригинал в библиотеке. Как вы уже знаете, двойной щелчок на экземпляре приводит к открытию окна Symbol Editor, а любые изменения символа сразу же отражаются на всех его экземплярах.

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

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

1. Откройте файл Frameit.png и библиотеку. Расширьте окно библиотеки так, чтобы в нем отображались все символы. Если вы работаете над новой копией файла Frameit.png, добавьте новый слой с именем Layer Two.

2. Откройте панель Layers, выберите этот новый слой и переименуйте его в Wireframes. После этого заблокируйте слой, содержащий рисунок фона.

3. Выберите инструмент Rectangle и нарисуйте прямоугольник, совпадающий размерами с рисунком. Установите толщину рамки, равную единице, а заливку — в None.

4. Щелкните на символе Graphic/Image и перетащите рисунок на место, на котором обычно располагают на страницах логотип, — в левый верхний угол. Выделите символ и щелкните на инструменте Free Transform. Теперь экземпляр можно растянуть до требуемых размеров.

5. Таким же образом можно перетащить на страницу любой объект и изменить его размеры. Работа эта занимает время, но оно не сравнимо с затратами по созданию всех объектов по одному. Чтобы перетащить объект, щелкните на нем в библиотеке, удерживая нажатой клавишу , и переместите объект в нужное место на странице. После этого можно изменить размеры объекта.

6. Используя рис. 5.4 как пример, перетащите на страницу объекты из библиотеки и разместите их в показанных местах. После того как закончите, выделите кадр страницы и заполните его белым цветом. Сохраните созданную каркасную модель в папке Exercise.


Рис. 5.4. Каркасная модель, созданная из символов, размещенных в библиотеке Fireworks MX

Каркасная модель узла

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

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

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

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

Каркасные модели и Freehand

Мощь пакета MX Studio становится очевидной, когда вы приступаете к созданию каркасной модели в приложении FreeHand. Оно предоставляет программисту следующие инструменты.

Векторная графика, позволяющая в точности реализовать свои идеи.

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

Совместимость с Fireworks MX. Документы, созданные во FreeHand, можно открыть в Fireworks MX. Библиотека символов, созданная во FreeHand, может быть использована в Fireworks. Также любые документы и символы, созданные во FreeHand, можно импортировать во Flash MX.

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

Нисколько не удивляет тот факт, что множество программистов своим инструментом выбрали FreeHand. Создание каркасной модели в этом приложении превращается в простую работу. Рисунки в нем можно легко разбить на части, а результат работы скорректировать в Fireworks и поместить на страницу в Dreamweaver MX для предоставления клиенту.

Кнопки

На раннем этапе развития Web основным методом интерактивной навигации были кнопки. Даже в наши дни они не потеряли своего значения.

Традиционно кнопки имеют три состояния — Up (Отжата), Down (Нажата) и Over (Указатель мыши находится над кнопкой). Каждое из них связывается с определенным событием и может управляться программно. Основным языком программирования кнопок является JavaScript. Если вы создаете кнопки в Fireworks MX и экспортируете результат в определенные состояния кнопок, программа генерируется на JavaScript. Приложение Dreamweaver MX позволяет не только генерировать программы на JavaScript, основанные на стандартных событиях кнопок, но и самостоятельно программировать поведение этих элементов.

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

Dreamweaver MX позволяет создавать Flash-кнопки непосредственно из панели инструментов и помещать их на страницу. Выделение получившейся кнопки и щелчок на элементе Flash Edit в окне Property вызывает приложение Flash MX, которое позволяет настроить новую кнопку.

Редактор кнопок Button Editor основан на использовании символов. Это значит, что вначале объекты кнопок должны быть конвертированы в символы, т.е. поведение объекта рассматривается как поведение символа (рис. 5.1). Дважды щелкните на символе в панели Library или Stage в редакторе кнопок. Здесь можно создать разные состояния кнопки, просто щелкнув на ней, после чего интерфейс создаст полностью редактируемую копию исходного состояния.


Рис. 5.1. Кнопки Fireworks MX больше не создаются в меню Insert Их поведение устанавливается при конвертировании в символы
Не забывайте о том, что Fireworks MX и FreeHand являются прекрасными утилитами, предназначенными для оформления кнопок. Благодаря множеству текстур и эффектов реального времени Fireworks MX позволяет создать довольно привлекательные кнопки. Приложение FreeHand позволяет создать не только оформление кнопок, но и собственные Flash-кнопки. Оно может экспортировать файл формата SWF. Dreamweaver MX также содержит функции для создания Flash-кнопок и Flash-текста. Хотя такое новшество приветствуется, в нем нет необходимости, если устанавливается полноценная версия Flash MX.

Меню

Во многих отношениях меню можно рассматривать как серию отдельных кнопок, выстроенных в ряд. Например, кнопка, созданная в Fireworks MX, наряду с предопределенными состояниями Up, Over и Down имеет и массу других состояний. Во Flash MX невидимые кнопки обычно используются для обеспечения визуальных эффектов, например для изменения вида курсора.

Сложнее создавать каскадные меню. В лучшем случае выпадающие меню, созданные в Dreamweaver MX, Fireworks MX и во Flash MX, повторяют своих собратьев из стандартного графического интерфейса пользователя. Все они легко узнаваемы и предсказуемы. Fireworks MX автоматизирует этот процесс при помощи мастера, а компонент ComboBox автоматизирует этот процесс в приложении Flash. Однако наибольшая точность достигается благодаря возможности создавать программы на JavaScript в Dreamweaver MX или Actionscript во Flash MX.

Определение каркасной модели

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

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

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

От FreeHand — к Fireworks и Dreamweaver MX

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

Ранее в этой главе, когда мы рассматривали приложение Fireworks, мы переместили рисунки в Dreamweaver MX и добавили на страницу активные области. Сейчас мы добавим активные области в Fireworks и экспортируем файл в Dreamweaver.

1. Откройте Fireworks MX и выберите в меню пункт File=>Open. Перейдите к созданной во FreeHand каркасной модели и щелкните на кнопке ОК. Вам будет задан ряд вопросов, касающихся обработки документа в Fireworks. Среди них нет вопросов, на которые нужно обратить внимание, поэтому щелкните на кнопке ОК. Документ откроется на странице, и если поместить указатель мыши над отдельными его элементами, они будут выделены красной рамкой.

2. Если холст прозрачен, измените цвет фона на белый (FFFFFF) в окне свойств. Если у вас не открыта библиотека, выберите в меню пункт Window=>Open или нажмите клавишу . Обратите внимание, что все символы, созданные во FreeHand, переместились в библиотеку Fireworks, а созданные слои остались без изменений. Единственное, что не переместилось, — это материалы на непечатных слоях.

Совет
Для открытия файлов FreeHand можно использовать и альтернативный метод. Можно создать новую страницу с размерами оригинала, выделить в старом файле все элементы (с помощью команды Edit=>Select All или комбинации клавиш ) и перетащить их на новую страницу в Fireworks. На странице Fireworks MX объекты следует поместить в пустой прямоугольник. После того как вы отпустите кнопку мыши, все объекты станут на свое место. К сожалению, обратный процесс невозможен. Если перемещать документ из Fireworks во freeHeind, библиотека вместе с ним не перейдет в новое приложение.


3. Выберите инструмент Rectangular Hotspot и добавьте активные области на все четыре подзаголовка в верхней части страницы. Пока не волнуйтесь относительно ссылок — их можно будет легко добавить в Dreamweaver MX. Окно Fireworks будет выглядеть, как на рис. 5.8.

Совет

Активные области можно назначить интерактивным элементам страницы, преобразовав их и сами элементы в нарезки, выделив их и выбрав команду меню Edit=>lnsert=>Slice или нажав комбинацию клавиш .

4. Щелкните на кнопке Quick Export в приложении Fireworks, которая расположена в верхнем правом углу окна Document, и выберите пункт Dreamweaver1* Export HTML. Откроется диалоговое окно Export Preview. Присвойте файлу имя и сохраните его в папке FrameNav, расположенной в подкаталоге FHFrames папки Chapter 5 Exercise жесткого диска. Когда закроется диалоговое окно, сохраните рисунок в формате PNG.



Рис. 5.8. Страница, слои и библиотека, созданные во FreeHand, переместились в Fireworks, где были добавлены скрытые области

Совет

Команда Export HTML меню Quick Export не позволяет выбрать формат экспорта. По умолчанию файл экспортируется в формате GIF. Если требуется сохранить файл , в другом формате, воспользуйтесь командой Fi!e=>Export Preview.

5. Щелкните на кнопке Quick Export и выберите в списке пункт Launch Dreamweaver. Когда запустится Dreamweaver MX, откройте только что созданную в Fireworks страницу HTML (рис. 5.9). Щелкните на одной из скрытых областей, созданных в Fireworks, и задайте ссылку на страницу каталога продукции. Повторите это действие для всех ссылок. Закончив работу, протестируйте страницу в броузере, проверяя корректность перехода на страницы по ссылкам.

Планирование элементов навигации

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

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

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

При планировании элементов навигации ориентируйтесь на целевую аудиторию. Джош Девис (Josh Davis) и Юго Накамура (Yugo Nakamura) признаны большинством Web-дизайнеров самыми крутыми Flash-дизайнерами планеты. Их узлы, www.playstation.corn и www.yugop.com, разработаны для коллег по Web-дизайну и насыщены экспериментальными работами. Элементы навигации на их узлах создавались для дизайнеров, которые готовы затратить время на исследование работы авторов. Если же попытаться внедрить их элементы навигации на узле электронной коммерции, предназначенном для розничных покупателей, это приведет к громадным проблемам.

Символы

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

1. Скопируйте папку Chapter 5 Exercise с Web-узла настоящей книги на рабочий стол и откройте файл Frameit. png.

2. Откройте панель Assets, выбрав в меню Window=>Assets. После этого щелкните на вкладке Library. Панель Assets — отличное место для хранения текстур, стилей и даже адресов URL, которые используются в нескольких местах узла. Обратите внимание, что в библиотеке уже содержатся многие простые элементы.

3. В этой библиотеке отсутствует графический символ. Для того чтобы создать графический символ, выберите инструмент Rectangle и нарисуйте черный прямоугольник с белым заполнением, Выберите инструмент Line и прочертите черную линию из верхнего левого в правый нижний угол окна. Затем прочертите линию, соединяющую два остальных угла. Размеры прямоугольника не имеют значения — он образован векторами и поэтому масштабируем.

4. Выделите прямоугольник с линиями и нажмите клавишу . Откроется окно Symbol Editor. Присвойте название рисунку Graphic/Image и установите переключатель в значение Graphic. Щелкните на кнопке ОК.

Просмотрев свою библиотеку, вы найдете в ней новый символ с названием Graphic/Image. Если вы щелкнете на нем, то сможете его отредактировать. И еще: если этот объект поместить на страницу, то в левом нижнем углу отобразится стрелка, направленная вовнутрь, указывающая на то, что этот объект — экземпляр символа.

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

Имя символа и его свойства можно изменить в диалоговом окне Symbol Properties, которое откроется после двойного щелчка на символе в библиотеке. После того как работа с символом закончена, щелкните на кнопке ОК.

Экспорт и импорт библиотеки символов в Fireworks MX

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

1. В меню Panel Options выберите пункт Export Symbols. В верхней части открывшегося диалогового окна Export Symbols (рис. 5.3) находится панель быстрого просмотра выбранного элемента, а в нижней части расположен список всех символов библиотеки. Из этого окна можно экспортировать как один элемент, так и любое выделенное количество элементов.



Рис. 5.3. Символу библиотеки могут экспортировать для использования другие члены, команды, выделив их и щелкнув на кнопке Export

2. Щелкните на кнопке Select All (Выделить все), а затем — на кнопке Export. Выберите папку, в которой должны быть сохранены выбранные элементы, и щелкните на кнопке ОК.

3. После этого любой член команды сможет выбрать команду Insert=>Symbols на панели Library или выбрать в главном меню пункт Edit=>Libraries=>Other, перейти к нужной папке, содержащей файл, выделить его и щелкнуть на кнопке Open.

Создание каркасной модели узла JCT в Fireworks MX

До сих пор проект узла JCT существовал только на бумаге. Перевод его в цифровой формат подразумевает использование Dreamweaver MX или Fireworks MX. Достоинством Fireworks по сравнению с какой-либо другой программой для работы с графикой (типа FreeHand) или компоновки страниц (типа QuarkXPress) является то, что оно предназначено для работы с Web-рисунками. Результирующий файл имеет формат, готовый для размещения в Web, такой как PNG или GIF. Это значит, что его можно легко перенести на страницу Dreamweaver MX и отправить клиенту для согласования и утверждения. Еще одно достоинство относится к области создания нарезок (slice), позволяющих пользователю перемещаться между страницами узла. Они позволяют проверить навигацию и правильно определить маршруты перемещения между фрагментами информации. Использование библиотеки позволяет создавать примитивы, которые затем будут использоваться при построении каркасной модели.

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

Создание каркасной модели в Dreamweaver MX

За годы развития Web-технологий производители программного обеспечения обращали внимание на постоянно растущие потребности программистов в новых инструментах. Чтобы удовлетворить эту потребность, в наиболее популярные приложения была заложена возможность вставки других небольших программ, расширяющих их возможности. В Photoshop это было реализовано посредством встраиваемых модулей (plug-in). В Dreamweaver MX такие модули называются расширениями (extensions). Расширения можно создать самому или загрузить с множества Web-узлов. Написание прикладных расширений выходит за рамки тематики настоящей книги, поэтому свое внимание мы сосредоточим на вставке расширений, созданных сторонними производителями. Одним из лучших источников расширений является узел компании Macromedia. На момент написания данной книги на этом узле было размещено около 450 расширений для Dreamweaver MX. Перед тем как погрузиться с головой в узел Macromedia в поиске расширений, нужно установить на своем компьютере последнюю версию программы Extension Manager (если она еще у вас не установлена).


Рис. 5.9. Страница проделала путь от приложений FreeHand и Fireworks в приложение Dreamweaver MX, где скрытым областям были присвоены ссылки
Extension Manager — это утилита, созданная компанией Macromedia, для установки расширений в приложения Dreamweaver MX, Flash MX и Fireworks MX. Расширения имеют формат .mxp и, будучи загруженными на компьютер, открываются приложением Extension Manager, которое помещает их в нужную папку. Дважды щелкните на загруженном расширении, и будет установлено приложение Extension Manager, которое выполнит все необходимые операции.

Создание каркасной модели во Free Hand

В приложении FreeHand существует много инструментов, которые можно применить при создании каркасной модели. Основным помощником в этом процессе становится панель Layers (Слои), которая разделена на две части. Слои, помещен-' ные в верхней части панели, предназначены для печати. Все, что помещено в нижней части, рассматривается приложением FreeHand как непечатаемый материал. Если поместить изображение в нижнюю часть панели, то вся работа, проводимая с ним, не отобразится на распечатке. В данном случае имеет смысл помещать эскиз каркасной модели в непечатаемую область, а создавать ее в верхней части панели. Для того чтобы создать каркасную модель на основе отсканированного рисунка, выполните следующие действия.

1. Откройте файл Wireframe.fh в папке Chapter 5 Exercise на жестком диске. Если панель Layers не открыта, выберите в меню команду Window=>Panels=>Layers или нажмите комбинацию клавиш .

2. Обратите внимание, что рисунок отображается в серых тонах. Это свидетельствует о том, что он не предназначен для печати. Чтобы увидеть это, щелкните на флажке Linear. Рисунок исчезнет. Чтобы снова отобразить рисунок, установите этот флажок. Затем щелкните на значке Lock (Блокировка). Когда слой заблокирован, он становится недоступным для редактирования.

3. Откройте панель Library, выбрав в меню пункт WindowoLibrary. Вы.увидите тот же набор символов, который вы создали во время работы с приложением FreeHand, однако символ Graphic будет отсутствовать. Создание нового символа во FreeHand и в Fireworks аналогично. Выберите инструмент Rectangle и нарисуйте на странице прямоугольник.

4. Выберите инструмент Line и начертите линию, соединяющую верхний левый и правый нижний угол прямоугольника. Затем начертите линию, соединяющую два других угла. Выберите инструмент Pointer и выделите прямоугольник и две нарисованные линии. Перетащите объект на панель Library и отпустите кнопку мыши. Присвойте созданному рисунку имя Graphic /Image (рис. 5.6).

Совместное использование библиотек FreeHand

Так же как и в Fireworks, символы библиотеки можно совместно использовать в своей рабочей группе. Например, в библиотеке можно создать папку wireframes и поместить в нее все элементы каркасной модели. После этого можно добавить логотипы, цветовые палитры и все прочие элементы, необходимые рабочей группе. Для того чтобы сохранить символ или группу выделенных символов, выберите в меню панели Library пункт Export. Откроется диалоговое окно Export, содержащее все символы библиотеки. Удерживая клавишу , отметьте все элементы, которые хотите экспортировать, после чего щелкните на кнопке Export. Присвойте файлу имя, выберите папку, в которой он будет сохранен, и щелкните на кнопке Save. Когда файл будет открыт в Fireworks или во FreeHand, он отобразится как чистая страница. При открытии в любом из этих приложений символы экспортированной библиотеки могут быть помещены в библиотеку нового документа.



Рис. 5.6. Рисунок помещен в непечатаемую область панели Layers приложения FreeHand. Символы установлены, и теперь их можно использовать в библиотеке

5. Добавьте на панель Layers новый слой graphics. Перетащите копию символа Graphic /Image на место, предназначенное для логотипа компании JCT, — в верхний левый угол. Выберите инструмент Scale и измените размеры символа.

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

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

Работа с содержимым слоев во FreeHand может немного запутать, поскольку это приложение работает со слоями несколько необычным образом. Например, если объект выделен и создается новый слой, он переместится на него. Этого можно избежать, если снять выделение со всех объектов с помощью команды меню Edit=>Select=>None или нажатия комбинации клавиш , после чего заблокировать слой. Снимите выделение со всех объектов слоя Graphics и заблокируйте его. Добавьте новый слой Text и введите на него необходимые текстовые символы. Продолжайте блокировать и добавлять новые слои, пока не заполните страницу содержанием. Последний слой назовите Frame и заключите все содержание страницы в рамку. Если отключить отображение слоя Linear, экран станет похожим на показанный на рис. 5.7. Сохраните документ под именем Fhframes в папке Exercise.

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

Для того чтобы во FreeHand добавить страницы, нужно выбрать в меню команду Window=>Inspectors=>Document и в меню панели — пункт Add Pages. Можно использовать и другой метод: выбрать инструмент Page и уменьшить масштаб до 50%. После этого нужно щелкнуть на границе страницы и выделить ее всю. Удерживая нажатой клавишу , перетащите копию страницы в свободную область. После этой операции можно удалить на новой странице все слои, поместить ее в непечатаемую область панели Layers и приступить к работе.



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

Совет

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

Ссылки

Перемещение по Web-странице оставляет нас в реалиях языка HTML. Будь то гиперссылка на странице Dreamweaver MX или карта рисунка, созданная в Fireworks MX, возникает вопрос, авторство которого во всем мире приписывается таксистам: "Куда?" Ссылки бывают абсолютные (например, http://www.gosomewhere.com/whereto/ thispage.html) и относительные, показывающие положение нового ресурса относительно текущего в структуре каталогов одного компьютера. Если вы работаете с узлом, распределенным по нескольким серверам, или сервер обслуживает множество узлов, то будете иметь дело с относительными ссылками (root-relative path).

Относительные ссылки строятся по отношению к корню узла. Если создать относительный путь для вышеприведенного примера, то он будет выглядеть следующим образом: whereto/thispage.html. Этот путь указывает, что файл thispage.html расположен в подкаталоге whereto корневого каталога узла.


Рис. 5.2. Присваивая кадрам видеоролика имя и щелкая на кнопке Named Anchor в окне Property, мы позволяем пользователям с помощью кнопок Forward и Back броузера перемещаться между ключевыми кадрами видеоролика Flash
Dreamweaver MX и Flash MX для навигации также используют закладки (anchor). Они позволяют перемещаться точно к тем фрагментам различных страниц, на которые содержится ссылка. Для примера предположим, что мы смотрим на страницу узла кулинарных рецептов. На ней содержится описание использования сорта яблок Granny Smith для приготовления пирога. Слова Granny Smith отмечены как ссылка. Вместо того чтобы содержать URL-адрес другой страницы, эта ссылка ведет к закладке. Щелкните на ссылке, и вы увидите список всех мест на странице, где упоминается сорт яблок Granny Smith. Для этой цели Dreamweaver MX использует закладки, которые обозначаются желтым знаком вопроса. Во Flash MX эти значки слегка отличаются. Эти элементы были только что введены в версии Flash MX и реализуют опыт пользователей, накопленный при работе во Flash. В предыдущих версиях узлы Flash содержали только унаследованные из броузеров кнопки Back и Forward. С версии 1 эти кнопки вызывали недовольство пользователей, перемещающихся по Flash-узлу. Добавление кнопки Named Anchor (Именованная закладка) в окно Property приложения Flash позволило пользователям использовать стандартные кнопки Forward и Back для перемещения между ключевыми кадрами видеоролика Flash.

Создать закладку во Flash очень просто. Выберите ключевой кадр в видеоролике, присвойте ему имя и щелкните на кнопке Named Anchor в окне Property (рис. 5.2). Когда видеоролик готов к публикации, щелкните на вкладке HTML диалогового окна Publish Settings. В списке Template выберите пункт Flash with Named Anchors, а также программу, необходимую для перемещения по презентации Flash с помощью кнопок броузера Forward и Back.

Установка расширения Wireframing

Extension Manager устанавливается автоматически при инсталляции пакета Dreamweaver MX. В следующем примере будет показано, как найти расширения на узле Macromedia и установить их с помощью утилиты Extension Manager.

1. Откройте броузер и введите адрес http://www.macromedia.com/exchange/dreamweaver. Если вы заходите на этот узел впервые, вам будет предложено зарегистрироваться.

2. В текстовом поле Search Extensions введите слово Wireframing и щелкните на кнопке Go. Щелкните на ссылке Wireframing, чтобы перейти на страницу этого расширения. Щелкните на кнопке Download, соответствующей интересующей вас платформе.

3. Сохраните расширение на рабочем столе.

4. Для того чтобы установить расширение, дважды щелкните на файле .mхр, в результате чего будет автоматически запущена утилита Extension Manager. В первом окне приложения будет выведено лицензионное соглашение. Щелкните на кнопке ОК. Расширение будет разархивировано, и после успешной установки появится соответствующее уведомление.

5. Завершите работу Extension Manager, откройте Dreamweaver MX и приступайте к работе.

Совет
Существует и другой способ установки расширений в Dreamweaver MX. Выберите в меню пункт Help=>Dreamweaver Exchange. Если у вас установлено соединение с Internet, вы сразу переместитесь на страницу Dreamweaver Exchange, с которой сможете загрузить и установить нужное расширение прямо из Dreamweaver MX. Правда, некоторые расширения после установки требуют перезагрузки Dreamweaver MX. Расширение Wireframing к их числу не относится.

Создание динамических страниц

Быстрое и эффективное представление данных

При планировании данных нужно мыслить категориями компьютера и логически сформировать базу данных. Говоря терминами Web-дизайнеров, исключения только подтверждают истину. Например, дизайн книжной лавки в Web должен отражать схемы покупки. Каждый раз, когда посетитель входит на узел Araazon.com (один из крупнейших узлов электронной розничной торговли. — Прим, перев.), отображаемая страница изменяется. Узел Amazon всегда старается предложить книги, наиболее полно соответствующие вкусам посетителя. Представьте себе, что произойдет, если на первой странице посетителю предложить книги по огородничеству, а он раньше всегда покупал только триллеры. Естественно, посетитель задаст себе вопрос, действительно ли он попал на узел Amazon, и при чем тут садовые культуры. Ему придется потратить лишнее время на то, чтобы найти интересующую его тематическую литературу. Если такая ситуация будет повторяться постоянно, он может уйти с узла навсегда. Время — это то, что пользователи не хотят выбрасывать на ветер, перемещая курсор между различными категориями базы данных в поиске нужной информации.

Итак, для начала задайте себе несколько вопросов.

Что будет храниться в базе данных? Не пытайтесь ответить обычным словом текст, так как это — достаточно широкое понятие. В нашем случае под текстом может пониматься описание продукции, список имен покупателей и даже пароли для входа на узел.

Как выглядит каждый фрагмент информации? Здесь имеется в виду не тип шрифта и его размеры. Если элемент — это описание продукции, в базе данных он будет представлять собой текстовое поле. Например, если в этом поле будет храниться название продукции, оно должно иметь фиксированную длину. Если в поле должен храниться текст заранее неизвестной длины, оно должно иметь тип memo.

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

Имеется ли под рукой готовая модель, удовлетворяющая потребности? Модель — это определение того, как данные будут храниться в базе. В ней должны описываться поля, хранящие отдельные фрагменты информации, а также логические группы этих полей, специфичные для конкретной функции. Хорошим примером может стать карточка покупки на узле электронной коммерции. Когда выбирается какой-либо товар, данные помещаются в поля таблицы карточки покупки. Эти данные могут состоять из идентификатора товара, его цены и покупаемого количества. Естественно, при определении цены должны учитываться скидки, рекламные кампании и прочие параметры. Например, посетитель решил купить две белые майки по цене 10 долларов за штуку. Если при этом он решил еще купить двое брюк по 25 долларов за пару, окажется, что для хранения итоговой суммы покупки нужно отдельное поле. Модель доски объявлений, подходящая для узла фотографа, демонстрирующего свои работы, совершенно не годится для узла электронной коммерции, на котором он эти же работы продает. Самая большая ошибка, которую можно допустить в этом вопросе, — это скопировать знакомую модель и построить технологию вокруг нее. Такой путь не эффективен. Модель должна в точности соответствовать поставленным перед узлом задачам.

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

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

Планирование данных

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

Создание баз данных в Microsoft Access

Когда дело доходит до создания приложений, работающих с базами данных, Microsoft Access является не самым сложным из них. Версия, которая будет описана в этом разделе, входит в состав пакета Microsoft Office XP Professional.

Также хочется заметить, что фирм, которые в пакете услуг хостинга предлагают поддержку баз данных Microsoft Access, — великое множество. (Может быть, в Америке, но не в СНГ. 99% фирм предлагают поддержку только MySQL ввиду их бесплатности. — Прим, перев.) Именно этот факт послужил основой нашего выбора именно этого пакета для демонстрации примера.

Для того чтобы создать базу данных в Access, выполните следующие действия.

1. Запустите Microsoft Access. Откроется окно создания базы данных (рис. 6.1).

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

3. После того как файл будет сохранен, откроется диалоговое окно базы данных, в котором задается структура базы данных. В меню Объекты диалогового окна выберите пункт Таблица и щелкните на кнопке Создать. Откроется диалоговое окно Новая таблица. Выберите режим конструктора (рис. 6.2). Откроется пустая таблица.


Рис. 6.1. Чтобы создать новую базу данных, установите переключатель в положение Новая база данных


Рис. 6.2. В меню Объекты выберите пункт Таблица, щелкните на кнопке Создать и в диалоговом окне Новая таблица выберите режим конструктора
4. В указанные поля введите следующую информацию: Имя поля — ProductTypeID; Тип данных — Счетчик.

5. Щелкните на первой ячейке второй строки и введите следующую информацию: Имя поля — ProductType; Тип данных — Текст.

6. Щелкните правой кнопкой на ячейке ProductTypeID и выберите в контекстном меню пункт Первичный ключ. Окно таблицы станет похожим на рис. 6.3. Закройте таблицу и сохраните ее под именем ProductType.




Рис. 6.3. Поля таблицы сформированы и установлен первичный ключ

Совет

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

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

Таблица 6.1. Состав полей таблицы Products

Field Name	Data Type
ProductID	Счетчик
ProductTypelD	Число
Product	Текст
Description	Текст
Price	Денежный

Замечание

Установите размер поля Описание так, чтобы оно вмещало по крайней мере 100 символов. ,

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



Рис. 6.4. Описание таблицы Product. Обратите внимание, что размеры текстовой области описания продукта соответствуют 100 символам

9. Выберите в меню пункт Сервис=>Схема данных. Откроется диалоговое окно Добавление таблицы. Выделите обе таблицы и щелкните на кнопке Добавить (рис. 6.5). В окне Схема данных отобразятся выделенные таблицы.

10. Чтобы установить связь между нашими таблицами, в окне Схема данных выделите поле Product Type ID в таблице Product и перетащите его на одноименное поле в таблице ProductType. Когда курсор переместится на корректное поле, он примет вид прямоугольника.

11. Отпустите кнопку мыши. Откроется окно Изменение связей (рис. 6.6). Установите в нем флажки Обеспечить целостность данных и Каскадное удаление связанных записей.



Рис. 6.5. В диалоговом окне Добавление таблицы устанавливаются связи между таблицами. В нем нужно выбрать таблицы, данные которых будут связываться



Рис. 6.6. В окне Изменение связей определяется тип связи между полями

12. Обратите внимание, что связь между полями имеет тип "один ко многим". Это значит, что несколько продуктов могут иметь один тип. В нашем случае мы знаем, что в категории рубашек единственного продукта быть не может. Щелкните на кнопке Создать, и между соответствующими полями двух таблиц отобразится линия. Закройте окно связей.

Совет

Рекомендуется распечатывать твердую копию окна Relationship. Это даст вам в руки ^удобную диаграмму, которая пригодится при создании динамического узла.

Замечание

Параметр Обеспечить целостность данных имеет многозначительное название, однако он значит только то, что в главной таблице нельзя создать записи, не имеющие ссылки на ассоциированную таблицу. При типе связи "один ко многим" (one-to-many) поле в первой таблице должно быть ее первичным ключом, а во второй — не должно.

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

Заполнение базы данных

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

1. Дважды щелкните на таблице ProductType в окне базы данных. Откроется таблица категорий продукции. Так как поле ProductTypelD заполняется автоматически, щелкните на поле ProductType и введите Shirts.

2. Перейдите в поле, расположенное под ним, и введите Hats. Поле ProductTypeID заполнится числами. Повторите те же действия для категорий Shoes и Pants.

3. Откройте таблицу Products и введите в соответствующих полях значения, приведенные в табл. 6.2. Ключевое поле ProductTypelD должно соответствовать номеру нужной категории на рис. 6.7. В данном случае мы вводим продукцию категории Shoes с номером 3.

4. Закройте базу данных и выйдите из Access. База данных теперь готова к размещению в Internet.



Рис. 6.7. Продукты вводятся в таблицу Product. Значение ключевого поля должно совпадать с полем Product-Type ID в строке Shoes

Обратите внимание, что запроса на сохранение данных при выходе из Access не было. Это приложение, равно как и большинство других СУБД, сохраняет информацию по мере ее ввода. Подтверждение сохранения это приложение потребует от вас только в случае изменения размеров полей, применяемых фильтров или порядка сортировки. В этом случае вам будет предложено подтвердить сохранение компоновки (layout).

Таблица 6.2. Значения полей таблицы Products

ProductTypelD	Product	Description	Price
3	Raven	Running shoes with racing stripe	49,95
3	Hawk	Basketball shoes	59,95
3	Falcon	Track shoes	59,95
3	Eagle	Tennis shoes	79,95

Создание базы данных

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

Создание динамических страниц

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

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

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

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

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

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

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

В этой главе будут раскрыты секреты создания динамических узлов; при этом мы обратим внимание на скрытые ловушки. По ходу повествования будет раскрыта мощь пакета Dreamweaver MX и будет показано, как не провалить проект создания Web-узла.

Создание пробного шаблона для динамических данных в Dreamweaver MX

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


Рис. 6.8. Первым делом нужно указать приложению ColdFusion источники данных


Рис. 6.9. Выбор файла базы данных
1. Откройте административную страницу ColdFusion в меню Start. В разделе Security выберите пункт RDS Password. Это — указание на использование пароля сервера разработки (Remote Development Server), что ограничит доступ к серверу ColdFusion только приложением Dreamweaver MX.

2. Когда откроется страница RDS Password, установите флажок Use an RDS Password for Dreamweaver MX or ColdFusion Studio. В текстовом поле New Password введите новый пароль (не больше 20 символов). В нашем случае, поскольку сервер ColdFusion используется не на площадке фирмы хостинга, мы можем ввести пароль администратора. В случае размещения в Internet такое не рекомендуется.

3. Подтвердите свой новый пароль в поле Confirm Password. Если введенные пароли не совпадут, вы получите сообщение об ошибке. Щелкните на кнопке Submit (рис. 6.11). Когда вы получите сообщение, что пароль принят, можно выйти из ColdFusion.


Рис. 6.10. База данных JCT, созданная в Access, теперь является источником данных приложения ColdFusion
Замечание
Никогда не используйте пароль администратора, если вы работаете с сервером в Internet. В противном случае вы откроете любому программисту беспрепятственный доступ к вашему серверу ColdFusion. Это правило аналогично другому: никогда не использовать пароль своей кредитной карточки в качестве пароля к "черному ящику" запуска ядерных ракет.

Создание страницы динамических данных в Dreamweaver MX

Итак, вы сформировали базу данных и сконфигурировали программы среднего уровня. Теперь создадим динамические страницы в Dreamweaver MX, которые с помощью ColdFusion будут получать данные из базы данных Access и помещать их в таблицу, готовую для просмотра в броузере.

Dreamweaver MX имеет много инструментов, с помощью которых через ColdFusion можно извлечь из базы данных нужные данные. Так как создаваемый узел будет использовать динамические данные, мы создадим страницу на панели Application Dreamweaver MX.

1. Откройте Dreamweaver MX и создайте новый узел JCT, выполняя действия, описанные в главе 2.

Замечание
Поскольку вы только начинаете работать с приложением Dreamweaver MX, используйте панель Basic Site Configuration диалогового окна Site Definition. Когда вы познакомитесь с Этим приложением ближе, вы сможете при создании узла использовать панель Advanced. Для нашего примера вполне достаточно будет и панели Basic.


Рис. 6.11. Установка пароля удаленного сервера разработки (RDS) в ColdFusion MX
2. В следующем окне вам будет задан вопрос о том, хотите ли вы использовать серверную технологию. Ответьте на него с помощью кнопки Yes или No. В нашем примере мы используем ColdFusion, так что на этот вопрос нужно ответить положительно. Откроется окно, в котором можно выбрать серверную технологию. Выберите ColdFusion и щелкните на кнопке Next.

3. Эта часть диалогового окна Site Definition имеет особое значение, так как на ней задается размещение файлов. Можно создать страницу на локальном компьютере, а в качестве сервера ColdFusion использовать другую машину, которая может быть расположена в вашей локальной сети или на другом континенте. В данном случае мы используем сервер ColdFusion в локальной сети. Это подразумевает то, что файлы будут редактироваться в локальных папках, а затем загружаться в готовом виде на удаленный сервер. Поэтому мы установим флажок Edit Locally Then Upload to Remote Testing Server.

4. В нижней части экрана можно указать Dreamweaver MX место размещения файлов. Щелкните на кнопке Browse, и откроется диалоговое окно File Selector. Перейдите к папке размещения файлов на жестком диске, выделите ее и щелкните на кнопке ОК. Затем щелкните на кнопке Next и перейдите к следующему окну.

5. Следующее окно позволяет определить способ соединения с тестовым сервером. Возможные способы соединения с сервером определены в списке. В данном случае вам нужно выбрать RDS (так как используется именно эта технология). Рядом с выбранным элементом отобразится кнопка параметров.

6. Щелкните на кнопке параметров и введите в поле Host Name IP-адрес сервера и номер порта (как правило, это — порт 80). Введите путь к корневой папке узла на жестком диске сервера, а также имя пользователя и пароль доступа. Если вы — администратор или единственный пользователь узла, то можете использовать административный пароль. Естественно, это не рекомендуется при работе в условиях сети. Если вы хотите сохранить пароль, установите флажок Save в нижней части экрана. Щелкните на кнопке Next.

Замечание

Если приложение ColdFusion MX используется на компьютере, на котором не установлен какой-либо Web-сервер (например, Microsoft Internet Information Services), можно использовать порт 8500 для непосредственного соединения с ColdFusion. Этот порт используется данным приложением по умолчанию.

7. Следующее окно позволяет задать адрес URL корневой папки узла на сервере. Это очень важно, так как приложение Dreamweaver MX при получении данных обращается к серверу как обычный броузер. Введите URL сервера. В нашем случае — http: //localhost/. Для того чтобы проверить корректность ввода URL, воспользуйтесь кнопкой Test URL. В небольшом всплывающем окне вы будете информированы об успешной проверке. Если же тест прошел неуспешно, откроется другое окно, предлагающее несколько способов решения проблемы. Если тест прошел успешно, щелкните на кнопке Next.

8. Теперь вас попросят решить, хотите ли вы использовать регистрацию работающих с узлом (check out и check in). Если с узлом работаете только вы один, установите флажок No, I Do Not Enable Check In and Check Out и щелкните на кнопке Next.

9. Заключительное диалоговое окно выводит на экран все введенные вами данные (и установленные флажки). Если вы уверены, что все данные введены правильно, щелкните на кнопке Done. Теперь вы готовы к созданию и тестированию динамической страницы.

Создание страницы с динамическим содержанием в Dreamweaver MX

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

1. Создайте на узле новую страницу и присвойте ей расширение .сfm, чтобы ColdFusion мог ее распознать и обработать. После того как страница будет создана, щелкните на разделе Server Behaviors панели Application. Откроется панель Server Behaviors.

2. Перед тем как создавать какое-либо динамическое содержание, нужно установить соответствующие флажки, предложенные Dreamweaver MX на панели Server Behaviors. Щелкните на соответствующих ссылках на панели в предложенной последовательности и выполните перечисленные ниже действия.

Если вы еще этого не сделали, установите тип серверной технологии, щелкнув на ссылке RDS login панели Server Behaviors. При этом используйте пароль, который задали для узла на шаге 1.

Установите источник данных ColdFusion Data Source, введя имя соединения ODBC с базой данных Access, созданный в предыдущем разделе (JCT).

Вам будет предложено создать набор записей (RecordSet), с помощью которого можно будет получать данные из базы данных Access. Щелкните на знаке "плюс" на панели Server Behaviors и добавьте новый набор записей. Присвойте ему имя (в данном случае — JTCProductList). В качестве источника данных выберите JCT.

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

4. Вставьте на страницу таблицу, состоящую из двух строк и трех столбцов. Для этого выберите в меню пункт InsertoTable (или щелкните на объекте таблицы на панели Object в разделе Common) и введите в открывшемся окне количество строк и столбцов. В верхней строке таблицы введите нужные заголовки столбцов: Product (Товар), Description (Описание) и Price (Цена).

5. Щелкните на вкладке Bindings панели Application, выберите свой набор записей (JTCProductList) и щелкните на знаке "плюс" рядом с ним. Откроется список полей базы данных, созданной ранее.

6. Выберите поле товара (Product) и перетащите его в первую ячейку второй строки таблицы. Выберите поле описания (Description) и перетащите его во вторую ячейку. Аналогично, в третью ячейку перетащите поле цены (Price). Ваша страница будет иметь такой же вид, как на рис. 6.12.



Рис.6.12. Данные, выбранные из базы данных Ассеss, будут образовывать информационные столбцы таблицы

7. Выделите строку таблицы с данными, протащив курсор мыши по этой строке или выделив первую ячейку и щелкнув на символах в нижней части окна. Щелкните на знаке "плюс" в разделе Server Behaviors панели Application и добавьте повторяющуюся область.

8. Откроется диалоговое окно Repetitive Region, в котором можно задать набор записей и способ отображения данных. Убедитесь, что выбран правильный набор записей — JTCProductList. Поскольку вам нужно отобразить все записи таблицы, установите переключатель в значение All Records и щелкните на кнопке ОК (рис. 6.13).



Рис. 6.13. В окне Repeat Region указывается количество одновременно отображаемых на странице записей базы данных

9. Щелкните на своей странице на кнопке Live Data View, и вы увидите, как данные будут отображаться на странице, открытой в окне броузера. Все данные, полученные с сервера, должны отобразиться на странице. Добавив повторяющуюся область в строку таблицы, вы позволили форматированной строке повторять саму себя, отображая данные в удобном представлении.

Только что вы создали рабочий шаблон, показанный на рис. 6.14.



Рис. 6.14. Так выглядят данные из таблицы Access в окне предварительного просмотра страницы в Dreamweaver MX. He обращайте внимание на то, что цены имеют только 2 десятичных знака, так как этот пример всего лишь демонстрирует передачу данных из Access в Dreamweaver MX

Выходим в Internet с помощью ColdFusion

Первой реакцией пользователей, когда они сталкиваются с ColdFusion, является вопрос: "А где же приложение?" А его как такового и не существует, так как это — всего лишь программный интерфейс между Web-сервером и вашей базой данных. Он берет информацию из базы данных и трансформирует ее для пользователя в формат HTML или XML. Единственным интерфейсом между вами и ColdFusion является Web-страница. Однако то, что скрывается за этой простой на вид страницей, является мощным и важным инструментом, благодаря структурному подходу к программированию которого можно создавать сложные приложения.

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

Чтобы подключить ColdFusion к своей базе данных, выполните следующие действия.

1. В меню Start откройте страницу ColdFusion Administrator. Она отобразится в броузере и запросит у вас пароль администратора. Выберите ссылку Data Sources (Источники данных) в разделе Data and Services. Откроется окно Add New Data Source (Добавить новый источник данных).

2. Введите в области Data Source Name название JCT и в меню драйверов выберите пункт Microsoft Access (рис. 6.8). Щелкните на кнопке Add, чтобы перейти к окну деталей базы данных JCT.

3. Щелкните на кнопке Browse Server (Выбрать сервер) в разделе Database File (Файл базы данных). Откроется окно выбора файла, в котором нужно выбрать только что созданный файл JCT (рис. 6.9). После того как файл выбран, щелкните на кнопке Apply.

4. Автоматически вы будете возвращены в окно Data Source. Щелкните на кнопке Submit. Будут созданы ссылки, и вы вернетесь в окно Add Data Source, в котором уже будет отображен наш файл базы данных (рис. 6.10).

Итак, наша база данных готова к использованию на страницах Dreamweaver MX с помощью ColdFusion MX. Броузер теперь можно закрыть.

Планирование внешнего вида страниц

Цвет

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

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

Градиенты

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

К счастью, пакет MX Studio эту проблему решает сам. Использование общей цветовой палитры и способность захватывать и перемещать объекты между отдельными приложениями пакета гарантирует сохранность исходных цветов. Однако существует и масса подводных камней, которые нужно обойти при подготовке к переносу объекта между FreeHand и Flash. Палитра цветов FreeHand доступна из меню Fill. Иногда пользователь должен щелкать на кнопке для перехода на другую страницу; в этом случае рисунок должен быть экспортирован в растровый формат. Если сделан именно такой выбор, палитру можно экспортировать только в формате GIF. Если вы собираетесь импортировать градиент непосредственно в Dreamweaver MX, то исходный файл и результат будут иметь совершенно разный вид (рис. 7.20).


Рис. 7.20. Графическое доказательство того, что невнимательность при переносе палитры цветов может привести к непредсказуемому результату
Исходный градиент показан в верхнем левом углу рисунка. Его экспорт в формат PNG обеспечил точную передачу цветов (справа вверху). В нижней части рисунка все происходит по-другому. Градиент FreeHand был экспортирован в формат GIF и содержал цвета, установленные двумя палитрами. Рисунок справа внизу использует палитру WebSnap, которая помещает все цвета градиента в их аналог в формате WebSaf е. На рисунке справа внизу используется палитра WebSaf e с 216 цветами.

Итак, если сохранение цветов палитры между FreeHand и Web вызывает проблемы, используйте формат PNG. Если формат должен быть GIF, используйте палитру WebSnap.

Эскиз содержания

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

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

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

Модели цветов

Термины цветовая модель (color model) и пространство цветов (color space) — взаимозаменяемы. Проще говоря, моделью, используемой на компьютерах, является пространство RGB (т.е. все цвета представляются комбинацией красного, зеленого и синего цвета). Важной характеристикой является количество цветов, отображаемых компьютером. Эта характеристика получила название цветовой гаммы (color gamut).

Прежде мы использовали цветовую гамму из 256 цветов, что соответствовало 8-битовой маске (RRGGBB). С появлением новых моделей компьютеров и операционной системы Windows гамма увеличилась до 65000 цветов (16 бит). Сегодня же мы имеем дело с 16,7 миллиона цветов (24 бита) и выше. Их именуют правдивым пространством цветов (true color space).

К сожалению, Web-дизайнеры не имеют возможности использовать все эти цвета в своих работах, так как они не точно передаются между платформами. Причиной этому является гамма, которая зависит от яркости монитора компьютера. Ее невозможно точно передать между платформами. Рисунок, созданный на компьютерах Мае, выглядит темнее на компьютерах PC. С другой стороны, рисунок, созданный на компьютере PC, выглядит более бледным на компьютерах Мае. Это происходит потому, что гамма на компьютерах Мае настроена на яркость 1,8; гамма компьютеров PC настроена на яркость 2,2. Чем больше число, тем темнее выглядит изображение на экране.

Как установить гамму в Fireworks MX

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

Если вы работаете на компьютере Macintosh, выберите в меню View=>Windows Gamma. Рисунок станет немного темнее, примерно таким, каким его увидит пользователь PC. Если вы работаете на компьютере PC, выберите в меню команду View=>Mac Gamma. Рисунок станет немного светлее.

Не обманывайте себя тем, что все так просто. То, что мы только что сделали, — просто посмотрели, как выглядит рисунок на вашем дисплее, если бы компьютер работал на другой платформе. При этом мы не настраивали яркость. Если рисунок выглядит слишком темным или светлым, это можно изменить, выделив рисунок и подправив яркость и контрастность вручную в области Effects окна свойств Fireworks MX.

Обзор шрифтов

Лучшее, на что можно надеяться, — это на то, что посетитель страницы имеет установленные шрифты Arial, Verdana, Helvetica и Sans Serif, которые используются благодаря дескрипторам и . Хотя стили CSS (Cascading Style Sheet) были призваны решить эти ограничения, они оказываются "недоразвитыми", когда речь заходит о книгопечатании, а броузеры версии 3 и ниже неверно отображают эти стили. Хорошая полиграфия, использование шрифтов и техники печати только усиливают тезис о том, что это — отдельная область искусства. Нельзя сказать, что работа по созданию шрифтов Verdana и Georgia, проделанная Мэтью Картером (Matthew Carter), была''выполнена плохо. Однако даже эти два шрифта не обеспечивают хорошего отображения вне броузера.

Так в чем же дело? Ведь пиксель — отличная стартовая точка. Графические дизайнеры, работающие в печатных изданиях, вкладывают в свои рисунки тысячи таких пикселей на дюйм. Тысячи этих точек они направляют на высококачественные лазерные принтеры при печати. Web-дизайнеры не имеют возможности использовать такие высокоточные разрешения. Наша точность измеряется сотней пикселей на дюйм, так как мы взаимодействуем с публикой через экраны их компьютеров. При нашем разрешении на букве "Т", отображенной шрифтом Times Roman, будут видны засечки на концах линий, однако вряд ли удастся отличить шрифт Stone Sans от шрифта Univers. Страница, которая хорошо смотрится при разрешении 800x600, для просмотра в разрешении 1024x768 потребует лупы.

Без технологий Postscript и TrueType увеличение шрифта просто увеличивало бы количество используемых пикселей, образующих букву. В результате полностью бы терялся стиль. Шрифт Times стал бы выглядеть угловатым и неуклюжим. Засечки потеряли бы свою элегантность. Нижняя часть буквы "k" стала бы искривленной. Короче говоря, шрифты начали бы деформироваться, пока не стали бы вообще нечитаемыми.

Для того чтобы взять на вооружение преимущества векторной графики, Web-дизайнеры конвертировали свои шрифты в рисунки или, как в случае с Flash MX, внедряли шрифты в файлы .swf. Проделывая эту работу, они все равно превращали элегантные шрифты в нечитабельные и искаженные. Ими руководило не эстетическое чувство, а просто то, что начертание шрифта выглядело привлекательным. Ситуация становилась угрожающей. Хотя тема настоящего раздела — описание средств работы со шрифтами в приложениях Fireworks, Flash и Dreamweaver, некоторые теоретические сведения помогут вам лучше понять, о чем пойдет речь.


Рис. 7.1. Семейство Univers. Это семейство разработано Адрианом Фрутиджером (Adrian Fruti-ger) и содержит 21шрифт. Все варианты были разработаны на основании шрифта Univers 55

Палитры цветов

При работе с цветом лучше сразу настроить используемую палитру цветов, которую вы будете постоянно использовать. Эти цвета будут отображаться на экране и добавят большую состоятельность внешнему виду узла. Довольно часто выбор цветов диктуется клиентом с помощью документа Graphic Standards (Стандарты графики) или утвержденного корпоративного логотипа. Будьте очень осторожны с последним. Его цветовая гамма может быть продиктована техническими условиями печати (в частности, используемой на принтере системой цветов, такой как Pantones, или смесью чернил струйного принтера). Вам никогда не удастся точно воспроизвести отпечатанные принтером цвета на цифровом носителе. Самое большее, чего вы можете достичь, — это максимально сблизить эти цвета.

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

Палитры могут быть формальными и неформальными. Формальная палитра имеет примерно такой же вид, как примеры цвета товара в каталоге некоторой компании. В ней представлены цвета и объекты, которым эти цвета могут соответствовать. Пример цветовой схемы для узла JCT в форме документов FreeHand и Fireworks представлен на Web-узле этой книги.

Создание схемы цветов в Fireworks MX

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

Щелкните на кнопке Paintbrush панели Bitmap. Установите размер кисти, цвет и другие параметры в окне свойств. Когда параметры установлены, проведите кистью линию в пустом документе. Измените цвет и форму кисти (при этом также можно изменить яркость цвета и посмотреть, как меняются значения составляющих его цветов). Снова проведите линию. Более формальным методом является разложение цветов грубой аппроксимации интерфейса, а не рисование на экране. Первый метод показан на рис. 7.18.

Создание схемы цветов во Flash MX

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

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

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



Рис. 7.18. Установка гаммы цветов в Fireworks напоминает размазывание красок пальцем. Вы видите, как цвета смотрятся рядом друг с другом



Рис. 7.19. Используйте растровые и векторные инструменты Flash MX для создания схемы цветов

Замечание

Цвета на панели образцов (swatch) во FreeHand могут быть экспортированы в другие приложения. Если создана формальная схема цветов, эту панель образцов можно использовать в других документах. Это происходит с помощью создания библиотеки цветов.

В меню панели образцов цветов выберите пункт Export и выделите все экспортируемые цвета. Щелкните на кнопке ОК. Теперь нужно задать имя библиотеки в диалоговом окне Create Color Library. В этом окне также введите количество строк и столбцов в создаваемой библиотеке. Щелкните на кнопке Browse и введите путь к папке, в которой будет сохранена создаваемая библиотека. После выбора папки щелкните на кнопке ; Save. Библиотека цветов jCTSwatches.bcf содержится на Web-узле настоящей книги.

Планирование внешнего вида страниц

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

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

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

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

Понятность и разборчивость

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

Когда мы читаем, то не обращаем внимание на отдельные буквы. Мы смотрим только на общий вид слова и сопоставляем его со списком известных нам образов слов. В первую очередь мы обращаем внимание на начертание верхних половинок букв. На рис. 7.4 прописные буквы начертаны единообразно. Данное написание заставляет читателя остановиться и дешифровать каждую букву. Однако строчные буквы на том же рисунке не так единообразны. Читатель может быстро окинуть взглядом верхушки букв и сопоставить их с выступами и углублениями известных слов, таким образом, составляя общее впечатление. Это позволяет быстро распознать все буквы слова. Еще один пример содержится на официальном Web-узле этой книги. Если открыть файл Legibility, swf, то можно увидеть, как читаются слова. Когда файл открыт, вы видите только нижние половинки букв. Если вы переместите синюю область с нижних половинок на верхние, то сразу поймете смысл сказанного.

Еще одной областью, которая формирует общее впечатление, являются стенки букв. На рис. 7.5 показано одно слово — condor, — представленное правыми и левыми половинками букв. Когда открыты правые половинки, это слово вряд ли удастся распознать. Когда открыты левые — слово легко читается.

Еще одним фактором, который влияет на читабельность текста, является дизайн букв используемого шрифта. Иногда шрифт может быть трудно распознаваемым из-за однообразия форм отдельных букв. Например, на рис. 7.6 показаны прописные буквы, набранные шрифтом Univers 55. Обратите внимание на однообразие форм. Пары букв "О-Q" и "E-F" имеют практически одинаковое начертание. Так как мы смотрим сразу на верхние половинки, то легко можно будет потерять значение букв "Q" и "Е".

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

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

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



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



Рис. 7.3. Слово Condor можно распознать, когда открыты только правые половинки букв



Рис. 7.6. Какая строка более понятна — верхняя или нижняя? Прописные буквы "О" и "F" имеют практически такое же начертание, как и "Q" и "E". Чтобы расшифровать слово, читателю придется остановиться



Рис. 7.7. Этот текст, написанный прописными буквами, практически невозможно прочитать



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

Шрифты и Macromedia MX Studio

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

Однако компоновка должна быть выполнена так, чтобы быть подвижной и концентрировать внимание на содержании, а не на оформлении. Когда вы помещаете текст на Web-страницу, сосредоточьтесь на тех параметрах, которыми вы можете управлять, — цвете, размере, начертании, расположении, — и забудьте о нюансах полиграфии. Приложение Flash использует шрифты Postscript. Это — единственная Web-утилита, которая позволяет использовать полную гамму типографских техник (от кернинга до масштабирования без потери качества (разрешения)). Причиной этому является то, что Flash позволило конструкторам внедрять шрифты Postscript в файлы .swf. Таким образом, кернинг и междустрочный интервал, использованные дизайнером для текста в шрифте Trixie, отобразятся и на любом компьютере пользователя.

В Dreamweaver MX управление текстом остается устаревшим. Размер шрифта не зависит от размеров точки на экране. Заголовки и основной текст могут иметь размеры от 1 до 7 и не более (рис. 7.12). Используя дескрипторы и , его можно сделать полужирным или курсивным. Это управляется форматом HTML, а не самим шрифтом. Это значит, что вес шрифта устанавливается системой, а не конструкцией страницы. После добавления дескриптора <1> к шрифту Times шрифт Times Italic не загружается — производится только наклон текста. Изменение цвета текста также проблематично. Нужно принять во внимание, что цветовая гамма выбирается (равно как и свет фона) при выборе самого шрифта. Цвет текста также управляется форматом HTML, и в этом помогает Dreamweaver MX.




Рис. 7.12. Управление шрифтами в Dreamweaver MX довольно устаревшее, если сравнить его с настольными издательскими системами. Размер текста выбирается из пункта меню Size и может быть установлен в значение от 1 до 7 единиц

В мире полиграфии колонки с текстом являются традиционными. В мире Web это не так. Главным отличием здесь является управление. Например, на Web-странице нельзя установить отступ целой колонки текста на одну или две точки от границы, не применив дизайнерские хитрости. Здесь можно работать только с тремя основными типами выравнивания — влево, вправо и по центру. Другие выравнивания не допускаются. При работе с этими параметрами чрезвычайно важно уделять внимание длине строк в параграфе. Длина строки, выходящая за рамки диапазона 36-70 символов, серьезно отразится на понятности текста.

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

В Dreamweaver MX существуют два способа применения стилей к тексту. Первый из них использует стили HTML, второй — CSS (Cascading Style Sheet). Первый способ — не такой удобный, как второй, и чаще всего применяется для одноразового применения стилей в небольшом тексте. Например, предположим, что слово "Jordan" используется на нескольких страницах узла. Мы хотим, чтобы это слово было выделено жирным шрифтом и красным цветом. Для этого мы можем определить специальный стиль HTML Однако применен он будет только на той странице, на которой определен. Чтобы изменить форматирование слова "Jordan" на всех страницах, нам потребуется найти все вхождения этого слова и применить к ним соответствующий стиль. Таблица CSS вносит изменения в глобальном масштабе. Допустим, что такую же операцию нам нужно выполнить со словом "Cris". Если внести изменение в стиль CSS, оно распространится (как водопад) на все страницы узла.

Стили HTML в Dreamweaver MX

Мы живем в несовершенном мире Web, где трудно что-нибудь предсказать. Мы не можем предугадать, какие шрифты будут установлены на компьютере пользователя. Мы даже не знаем, какую версию и какого броузера он будет использовать. Таблицы стилей добавляют последовательность в компоновку страниц. Проблема с ними состоит в том, что с ними работают броузеры (имеются в виду IE. — Прим, перев.) только версии 4.0 и выше.

Первым решением, которое приходит на ум, является использование стилей HTML, пока версии броузера 3.0 и ниже не исчезнут полностью с карты планеты. Стили HTML в Dreamweaver MX являются собратьями стилей CSS, но имеют фундаментальное отличие — Dreamweaver добавляет дескрипторы HTML в стиль, а не в описание CSS. При использовании стилей HTML помните о трех важных отличиях между стилями HTML и CSS.

Если меняется атрибут стиля HTML, изменение локальное, а не глобальное.

Стили HTML используют дескрипторы HTML. Например, нельзя удалить подчеркивание с фрагмента текста, что довольно просто в CSS.

Изменения в стиле HTML применяются к одному документу узла. Изменения в таблице CSS применяются ко всем страницам узла, которые не используют внешние таблицы стилей.

Тут важно устранить недопонимание. Нельзя избегать стилей HTML, поскольку они являются очень продуктивным решением и обучение им достаточно просто. Чтобы применить стили HTML в Dreamweaver MX, выполните следующие действия.

1. Запустите Dreamweaver MX и откройте в нем файл Lorem.htm, находящийся в папке DWTypography каталога Exercise на Web-узле настоящей книги.

2. Откройте панель HTML Styles. Для этого выберите в меню пункт Window=>HTML Styles (или нажмите комбинацию клавиш , или щелкните на кнопке HTML Styles панели Design).

3. В меню панели выберите пункт New. В открывшейся панели Define New Style выберите следующие установки.

Установка	Значение
Name	New Paragraph
Apply To	Selection
When Applying	Clear Existing Style
Size	4
Color	FFOOOO
Style	Bold

<


4. Щелкните на кнопке ОК.

5. Выделите первый абзац текста и щелкните на только что созданном стиле New Style панели HTML Styles (рис. 7.13). Новый стиль будет применен к выделенному абзацу. Для того чтобы вернуть текст в исходное состояние, выделите его и щелкните на кнопке Clear Selection Style панели HTML Styles. Для того чтобы удалить стиль из таблицы, выделите его и выберите в меню панели пункт Delete. Для того чтобы отредактировать стиль, выделите его и в меню панели выберите пункт Edit. Откроется редактор стилей HTML, в котором можно внести нужные изменения.

Параметры стилей HTML

Обратите внимание, какой богатый выбор параметров стиля представлен на панели New Style. Перечислим самые важные из них.

Если выбрать Paragraph, стиль будет применен к целому абзацу, независимо от того, в каком его месте вы щелкнули. Если выбрать вариант Selection, стиль будет применен только к выделенному фрагменту.

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



Рис. 7.13. Стиль определен и применен

Совет

Стандартным методом добавления текста на страницу является его создание в текстовом процессоре, выделение, копирование в буфер обмена и вставка на страницу Dreamweaver MX. Для тех из вас, у кого установлен пакет Office 2000 или хотя бы приложение Word 2000, такой вариант будет наилучшим.

Откройте файл в Word и сохраните его как Web-страницу. Для этого выберите в меню пункт File^Save As Web Page. Щелкните на том месте страницы Dreamweaver, куда вы хотите вставить новый текст, и выберите в меню команду File1*Imports Import Word HTML. Откроется серия диалоговых окон, запрашивающих выбрать методы обработки текста. Оставьте везде значения, заданные по умолчанию.

Таблицы стилей CSS в Dreamweaver MX

Если учесть тот факт, что этому вопросу посвящены целые главы и даже книги (например, Inside Dreamweaver 4 (Anne-Marie Yerks), выпущенная издательством New Riders), мы даже не пытались в данном разделе описать все возможности этого механизма. Наша цель — кратко описать работу таблиц Cascading Style Sheet и их применение с помощью Dreamweaver MX.

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

Как уже говорилось, применение таблиц CSS может привести к неоднозначным последствиям ввиду наличия у пользователей разных броузеров и устаревших их версий. Текст, который отлично смотрится в Netscape, может теряться в Internet Explorer. Однако с технической точки зрения ничего плохого о CSS сказать нельзя. Например, программно управляемые страницы, содержащие множество настроек форматирования, могут значительно замедлить загрузку. Если программу вынести во внешний документ, на который указывает страница Dreamweaver MX, процесс можно ускорить. Еще одним способом экономии времени является применение изменений в масштабах всего узла. Что касается шрифтов, то параметр размера в единицах заменяется точными размерами в пиках или точках, которые используются в традиционной полиграфии. Это позволяет задать точный размер шрифта, например 1 пику или 12 точек. Размеры также можно устанавливать и в других единицах измерения (сантиметрах, дюймах, миллиметрах), но когда речь заходит о шрифтах, они могут не приниматься в расчет.

Таблица стилей — это не более чем набор правил. Например, правило можно определить как HI (color: red). Другими словами, это правило гласит, что все заголовки первого уровня должны выделяться красным цветом. В этом примере использован синтаксис CSS. Правила CSS состоят из двух частей: переключателя (HI) и определения (color: red). Переключатель указывает, какой дескриптор будет переключать стиль, а описание сообщает, каким этот стиль должен быть.

Стили CSS могут быть внедренными в HTML, а также содержаться в отдельных файлах, на которые имеется ссылка на страницах. Например, в следующем фрагменте содержится внедренная таблица стилей, которая по очевидным причинам находится перед дескриптором :







В начале программы мы поместили атрибут стиля