Программы создания Web документов

Глава 2. Программы  создания Web документов

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть Tea, Note Tab Pro, Dream Weaver  или обыкновенный блокнот(Notepad).

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

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

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

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

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

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

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

Новые возможности Macromedia Flash: 
 
- Улучшенные градиенты 
- Новый метод рисования объектов (object drawing model) 
- Продвинутый анти-алиасинг для текста 
- Ассистент по скриптам (script assist mode) 
- Расширяющаяся рабочая область 
- Улучшенный интерфейс 
- Undo (отмена) для каждого отдельного объекта 
- Редактор плавности движения 
- Графические фильтры 
- Режимы наложения клипов 
- Улучшенная обработка растровых объектов 
- Новый видео формат (+On2 VP6 кодек) 
- Поддержка альфа канала в видео 
- Область перерисовки 

 
Macromedia Fireworks

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

 
Что такое Fireworks 

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

  Однако возможности Macromedia Fireworks 8 этим не ограничиваются. В Macromedia Fireworks есть возможность создавать анимированную графику и редактировать макеты веб-страниц. Например, в Fireworks можно открыть графический файл на всю ширину будущего сайта, нарисовать необходимое графическое оформление, а затем разрезать его инструментом Slice Tool так, как должна выглядеть будущая таблица HTML-документа. После этого можно начинать доработку отдельных графических элементов и, в том числе, создавать активную графику, реагирующую на курсор, совсем не зная языка программирования (JavaScript).

 
Подробней о панели инструментов.  
 
 Панель с инструментами вы всегда видите слева в окне программы. Инструменты здесь разделены на группы – Select (выбор, выделение), Bitmap (побитовое отображение), Vector (вектор), Web, Color (цвет), View (вид). Каждая группа предназначена для конкретной цели: выделение объекта, работа с растровым объектом (обычно фото), работа с векторными изображениями, подготовка файла для Веб (нарезка или hotspot), работа с цветом, работа с различными видами файлов. 
 
 Если на значке инструмента есть черный треугольник в углу, как, например, на Ellips Toll, значит, под ним скрыты еще подразделы. Нужно навести указатель мыши на значок и нажать. После этого откроется окно с набором этих скрытых инструментов. 
 
 Там, где нарисовано ведро с выливающейся краской, можно указать заливку объекта. В списке несколько видов заливок: Solid - сплошная, Linear - линейная, Cone – коническая и другие. 
 
 Нарисованный карандаш означает обводку или же, если точно перевести с английского языка, штрих (Stroke) вокруг объекта. Щелкнув по маленькому треугольнику, можно открыть список с различными вариантами обводки: 1-Pixel Soft (1 мягкий пиксель), 1-Pixel Hard (1 твердый пиксель) и другие. Если вы видите перечеркнутый красной полосой знак, значит, обводка отключена. Заливку объекта также можно отключить. Далее и в заливке (Fill), и в штрихе (Stroke) можно указать текстуру: Grain (земля), Sand (песок) и прочее. В самой правой части инспектора можно придать объекту эффекты или же прозрачность (Opacity). По умолчанию прозрачность всегда отключена (100%). Если начать уменьшать это значение, то объект будет обретать прозрачность. 
 
 Раздел "Эффекты" (Effects) в программе Macromedia Fireworks также присутствует. С помощью этого раздела можно производить коррекцию изображения. Например, с помощью эффектов Bevel and Emboss (скашивание и выдавливание) и Shadow and Glow (тень и сияние) можно делать оригинальные кнопки навигационной панели.  

Adobe Dreamweaver CS

  Лучший выбор для профессиональных веб-разработчиков. Создавайте веб-сайты и приложения мирового уровня с помощью одного из передовых средств разработки. Просматривайте создаваемые страницы в реальном браузере посредством функции интерактивного просмотра Dreamweaver с сохранением доступа к коду.    Создавайте страницы в Dreamweaver так, чтобы конечные пользователи могли редактировать их без вашего вмешательства или дополнительного программного обеспечения с помощью онлайн-услуги InContext Editing. Дизайнеры, работающие в Dreamweaver, могут ограничить возможности внесения изменений в проекты определенными областями страницы. Программное обеспечение Adobe Dreamweaver CS4 идеально подходит для веб-дизайнеров и разработчиков, а также специалистов по визуальному дизайну. 

 
Создание веб-проектов нового поколения 
 Работайте с реалистичными представлениями CSS, javascript, SWF и динамического содержимого непосредственно в программе Dreamweaver. Быстро интегрируйте в свои страницы веб-виджеты сторонних производителей из наиболее распространенных каркасов javascript. 
 
Интерактивный просмотр Adobe Dreamweaver  
 Просматривайте создаваемые страницы в реальном браузере посредством функции интерактивного просмотра Dreamweaver CS4 с сохранением доступа к коду. Изменения в коде немедленно отображаются на экране. 
 
Подсказки по коду для каркасов Ajax и javascript 
 Быстрее и эффективнее создавайте код javascript с помощью улучшенной поддержки основных объектов и простых типов данных javascript. Используйте в работе расширенные функции Dreamweaver CS4 по созданию кода, применяя популярные каркасы javascript, включая jQuery, Prototype и Spry. 
 
Связанные файлы Adobe Dreamweaver  
 Эффективно управляйте различными файлами, составляющими веб-страницы, в программе Dreamweaver CS4, используя функцию "Связанные файлы". Щелкните любой связанный файл, чтобы увидеть его источник в представлении "Код" и родительскую страницу в представлении "Дизайн". 
 
Adobe Dreamweaver Встроенные средства создания кода 
 Воспользуйтесь встроенными подсказками для более быстрого и аккуратного создания кода в HTML, javascript, таких каркасах Ajax, как Spry, jQuery и Prototype, и на некоторых серверных языках. 
 
Навигатор по коду Adobe Dreamweaver  
 Новая функция навигатора по коду показывает все исходные коды CSS, относящиеся к выделенному фрагменту: правила CSS, серверные включения, внешние функции javascript, шаблоны Dreamweaver, исходные файлы объектов Iframe, и т.д. 
 
Поддержка авторинга Adobe AIR™ 
 Создавайте приложения Adobe AIR™ на основе HTML и javascript непосредственно в Dreamweaver. Просматривайте приложения AIR, не выходя из программы Dreamweaver. Готовьте приложение Adobe AIR к развертыванию с помощью функций компоновки и подписи кода AIR. 
 
Поддержка FLV 
 Легко интегрируйте файлы FLV в любые веб-страницы и создавайте соответствующий стандартам код — для этого не требуются навыки работы в Adobe Flash®. Создавайте проекты, воспроизводя фильмы FLV в новом режиме интерактивного просмотра. 
 
Поддержка ведущих технологий 
 Проектируйте и создавайте код с помощью средства, поддерживающего большинство ведущих технологий веб-разработки, включая HTML, XHTML, CSS, XML, javascript, Ajax, PHP, ПО Adobe ColdFusion® и ASP. 
 
Изучайте наработки Adobe Dreamweaver  
 Визуально создавайте проекты, используя готовые наработки CSS, сопровождаемые описанием практических принципов, написанные доступным языком. Создавайте интерактивные элементы на основе Ajax, используя наработки. 
 
Наработки CSS 
 Применяйте наработки CSS, избавляющие от необходимости написания кода. Создавайте новые правила CSS на панели "Свойства" и получайте простые и ясные пояснения о месте применения каждого свойства в каскаде стилей. 
 
Всеобъемлющая поддержка CSS 
 Создавайте стили для сайтов с помощью улучшенных средств реализации CSS в Dreamweaver CS4. Быстро определяйте и изменяйте правила CSS с помощью панели "Свойства" с мгновенным отображением изменений в представлении "Дизайн" и "Интерактивный просмотр". Используйте связанные файлы и навигатор по коду, чтобы установить, где определены правила CSS. 
 
Adobe Dreamweaver Обучающие ресурсы 
 Совершенствуйте свои навыки создания веб-сайтов с помощью полных руководств, встроенных в Dreamweaver CS4. Следите за новыми веб-технологиями с помощью справочной системы, управляемой сообществом пользователей. 
 
Расширенное сообщество Adobe Dreamweaver  
 Воспользуйтесь преимуществами расширяемого сообщества Dreamweaver, включая интерактивную службу Adobe Design Center и Adobe Developer Connection, обучение и семинары, программы сертификации разработчиков и пользовательские форумы. 
 
Онлайн-услуги 
 Получите доступ к онлайн-услугам из среды Dreamweaver для обмена рабочими макетами на экране с коллегами или клиентами с помощью нескольких щелчков мыши; быстрее получайте более точные результаты поиска ресурсов онлайн-сообщества и идеи для создания новых проектов. 
 
Управляйте содержимым Adobe Dreamweaver  
 Сделайте так, чтобы клиенты могли вносить изменения в разработанные страницы непосредственно из браузера. Добавляйте на сайт динамические данные без применения баз данных или сложного кода. 
 
Смарт-объекты Adobe Photoshop 
 Вставляйте любые документы Photoshop PSD в Dreamweaver для создания смарт-объектов изображений. Смарт-объекты тесно связаны с исходным файлом. Вносите изменения в исходное изображение и обновляйте его в Dreamweaver, не запуская программу Photoshop. 
 
Наборы данных HTML 
 Интегрируйте возможности динамических данных в веб-страницы, не изучая управление базами данных или код XML. Наборы данных Spry распознают содержимое в простой таблице HTML как интерактивный источник данных. 
 
Новый пользовательский интерфейс 
 Работайте быстрее и эффективнее во всех компонентах Adobe Creative Suite® с помощью общего пользовательского интерфейса. Переключайтесь между рабочими средами с помощью переключателя рабочих пространств. 
 
Интеграция между продуктами 
 Воспользуйтесь возможностями интеллектуальной интеграции и мощностью Dreamweaver и других инструментов Adobe, включая Adobe Flash® Professional, Fireworks® , Photoshop® и Device Central , за счет прямого взаимодействия продуктов линии. 
 
Интеграция Subversion 
 Обновляйте свой сайт и проверяйте наличие изменений непосредственно в Dreamweaver. Программа Dreamweaver связана с программным обеспечением Subversion, системой контроля версий с открытым кодом, что позволяет обеспечить более мощные возможности возврата/извлечения документов. 
 
Межплатформенная поддержка 
 Работайте так, как вам удобно: программное обеспечение Dreamweaver доступно для компьютеров Mac на базе PowerPC® и Intel®, а также для операционных систем Microsoft® Windows® XP и Windows Vista®. Создавайте проекты в одной системе, а затем передавайте их на другие платформы с сохранением надежности, стабильности и качества результатов. 
 
Коротко о новых возможностях Adobe Dreamweaver : 
- Интерактивный просмотр в реальном браузере с сохранением доступа к коду 
- Подсказки по коду для каркасов Ajax и javascript 
- Функция "Связанные файлы" для эффективного управления различными файлами, составляющими веб-страницы 
- Навигатор по коду, показывающий все исходные коды CSS 
- Поддержка авторинга Adobe AIR™ 
- Наработки CSS, избавляющие от необходимости написания кода 
- Создание смарт-объектов изображений, с помощью вставки любых документов Adobe Photoshop в DreamWeaver 
- Наборы данных HTML 
- Новый пользовательский интерфейс 
- Интеграция Subversion 
 
Коротко об улучшенных возможностях Adobe Dreamweaver : 
- Поддержка FLV 
- Встроенные средства создания кода 
- Всеобъемлющая поддержка CSS 
- Обучающие ресурсы 
- Расширенное сообщество Dreamweaver.

Adobe Photoshop

  Широко известный графический редактор растровой графики , являющиися составной частью программной линейки компании  Adobe . Более подробно можно ознакомиться на напшем же сайте в разделе посвящённом ГИС системам. Компания Adobe выпустила новый Adobe Photoshop . Всегда интересно узнать, чем порадует новая версия Фотошопа на этот раз. Итак, что же нового в Photoshop ? 
 
Палитра "Маски" в Photoshop  
 Используйте усовершенствованную панель «Маски», содержащую большой набор инструментов для создания масок, изменения их плотности и растушевки. Вы сможете легко и просто создавать собственные маски или изменять уже существующие.    

Усовершенствование  палитры "Коррекция" 
 Так как теперь есть новая удобная панель инструментов по коррекции цвета и тона выбранных изображений, огромный выбор всевозможных стилей и средствами управления изображения – Вы способны творить в полном объеме. Все это благодаря усовершенствованию палитры «Коррекция»! 
 
Автоматизировано наложение изображений  
 Используя "Автоматическое наложение слоев" Вы создадите единое целое изображение из большого количества схожих фотографий. Благодаря тому, что эта команда корректирует недостатки при съемке, аккуратно смешивает цвета и прорабатывает тени - Вам понравится конечный результат! 
 
Самые последние разработки помогают в создании 3D графики 
 Ваши возможности в преобразовании двухмерных изображений в реальные трехмерные модели стали безграничными! Все это достигается довольно несложными способами: преобразование градиентов, создания глубины и объема к текстовым слоям, возможности переноса в 3D форматы и с помощью новейшего технологии рендеринга получения высокое качество печати. 
 
Усовершенствована обработка изображений в формате RAW 
 Изображения в формате RAW стало еще более качественно, благодаря модулю Adobe Photoshop Camera Raw 5. Он поддерживает более180 моделей фотокамер, обеспечивает коррекцию, виньетирование после кадрирования, обработку изображений в формате TIFF и JPEG. 
 
Редактирование свойств 3D объектов 
 Используя оптимизированный интерфейс без надоевших окон, Вы сможете не только редактировать трехмерных изображений, но и перемещать их. А кроме того, и улучшить качество изображения, изменяя потоки света, исходные материалы и обзор камеры, применяя движение трехмерных осей. 
 
Ускорение поворота 
 Только один клик мышкой и ваш холст повернут под нужным углом для его просмотра. Вам не требуется искривлять шею для прорисовки деталей! 
 
Очень легкие и плавные прокрутка изображения и масштабирование 
 Теперь перейти от одной части рабочей области к другой стало очень просто и удобно. Новые функции масштабирования и прокрутки отвечают за это. Всегда сохранится четкое изображение даже при максимальном его увеличении. Это благодаря «Пиксельной сетке» - новой удобной опции. 
 
В Photoshop оптимизировано автовыравнивание слоев 
 Ваши работы станут еще более реалистичными, так как функция автовыравнивание слоев перешла но новый уровень. Теперь Вы изменяете, переворачиваете и деформируете слои как только пожелаете. Для ценителей панорамной съемки существует способ сферического выравнивания изображения. 
 
Новое в масштабировании изображения  
 Используйте исключительную опцию масштабирование с учетом содержания изображения для облегчения Вашего труда по коррекции и перестройки композиции. Вы сможете оставить наиболее важные детали, не изменяя масштаб нового изображения. Один клик мыши и Вам не требуется долгая и кропотливая работа с кадрами и ретушью. 
 
Совершенствование глубины резкости 
 Вы можете объединить в одно несколько изображений с различной цветовой гаммой, фокусом, экспозицией. Результат превзойдет все ожидания, так как сохраниться основной тон и цвет в работе, но резкость станет глубже.  
 
Качественно новый уровень печати в Photoshop  
 Ваши снимки не потеряют ни сколько после печати, благодаря новым средствам обработки изображения, в следствии теснейшей интеграции с моделями ведущих производителей принтеров. Сейчас есть возможность обработать цвет, просмотреть области, выходящие за пределы цветового охвата. Поддержка 16-разрядной печати на Mac OS обеспечивает улучшенную глубину цвета и повышает качество изображения. 
 
Нововведения в редактировании анимационной графики 

  Используя простые клавиатурные сокращения, редактировать анимационную графику стало гораздо проще. Синхронизировать видеоэффекты с участками аудиозаписи так же просто, благодаря инструментам аудиосинхронизации. 
 
Автоматизирована интеграция с другим программами Adobe 
 В Adobe Photoshop работать стало еще интереснее вследствие автоматизированного взаимодействия между Photoshop Extended и другими приложениями Adobe, включая Adobe After Effects, Adobe Premiere Pro и Adobe Flash Professional. 
 
Еще более усовершенствованная технология Adobe Photoshop Lightroom 
 Adobe Photoshop Lightroom приобретается отдельно. Идеально подойдет для создание панорамных съемок. Выбираете столько, сколько необходимо отдельных кадров в Adobe Photoshop Lightroom, автоматически открываете в Photoshop и объединяете в панораму, фотоизображение с диапазоном (HDR) или в многослойный документ Photoshop. И все готово!  
 
Усовершенствованы инструменты коррекции цвета 
 В Adobe Photoshop усовершенствованы инструментов по коррекции цвета - "Осветлитель", "Затемнитель" и "Губка". Они предназначены для интеллектуального изменения цвета и подбора оттенка. 
 
Новое в работе с файлами 
 Вы выбираете тип окна для удобства работы с многочисленными открытыми файлами. Это может быть окно в виде вкладок или мозаичное расположение открытых изображений. 
 
Дополнительные возможности Adobe Photoshop Creative Suite Extended 
 Новые панели Adobe Flash помогут Вам в выполнении повторяющихся задач. Вы можете получить ценный совет или подсказку от комьюнити любителей Photoshop, если воспользуетесь интерактивной службой помощи Adobe Community Help.

Axure RP Pro

  Axure RP Pro - быстрое макетирование для приложений вебсайта, ориентированное под каркасные прототипы веб-сайтов. Продукт предназначен для снижения издержек проектирования веб-сайтов. Это решение поможет быстро в визуальном режиме создать рабочий прототип будущего сайта, затем выгрузить прототип в html и просмотреть его через браузер. Качество вполне приемлемо для дальнейшей постановки задач дизайнерам и программистам, а также для понимания заказчика конечного результата. Интерфейс программы аналогичен Microsoft Office 2003. "Blank" для создания веб-страниц похож на формы в ресурс-билдерах, подобных используемому в Delphi. В результате генерирования прототипа получается статический сайт, широко использующий javascript. Качественная документация и учебные материалы в свободном доступе на сайте производителя. Axure RP Pro может оказаться очень полезным средством для проектирования небольших, но функционально-насыщенных проектов, а также больших проектов на начальном этапе. 
 
Возможности программы: 
» Простое использование 
» Быстрое применение изменений 
» Мгновенное создание функциональных прототипов 
» Создание интерактивных прототипов с аннотациями 
» Настраиваемость 
» Управление версиями 
» Создание эффективного дизайна 
» Экспериментирование с вашим дизайном для достижения максимального результата 
» Автоматизация спецификаций для избежания утомительной документации.