МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. DHTML 2. Редакторы web- документов

Компания является ведущим производителем программного обеспечения для графического дизайна, публикации, веб и продукции печати. В 2005 г. компания купила лидера в области разработок для веб и мультимедиа Macromedia Inc.

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

Характеристики программы Adobe GoLive : графический пользовательский интерфейс, в том числе вкладка для поддержки предыстории; специальные масштабируемые панели; позиционирование с точностью до пиксела, перетаскивание объектов, а также связывание файлов путем указания мышью; наличие простых средств взаимодействия с базами данных и возможность создания приложений электронной коммерции; возможность преобразовывать файлы, созданные посредством таких программ, как Illustrator, LiveMotion и Photoshop, в соответствующие web-форматы;

поддержка средств SWF, что позволяет добавлять к данным интерактивные средства Flash; встроенный интерпретатор JavaScript; возможность одновременного просмотра WYSIWYG-представления и HTML-кода в отдельных окнах; простые средства управления web-узлом; средства управления исходным кодом; защита кода от нежелательных изменений.

Adobe Dreamweaver Adobe Dreamweaver CS5

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

Особенности: пользовательский интерфейс редактора настраивается в соответствии с требованиями разработчика и уровнем его подготовки; разработчику доступны средства Dynamic HTML; разработчик может создавать собственные объекты и команды, модифицировать меню, писать фрагменты JavaScript-кода; HTML-дескрипторы выделяются цветом; позволяет создавать web-страницы, не зависящие от браузера и платформы;

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

Также разработчику надо выбрать программы для создания и редактирования изображений. Эти программы ориентированы на работу либо с растровой, либо с векторной графикой. С растровыми изображениями работают Adobe Photoshop, Macromedia Fireworks и Corel Photo-Paint. Такие программы, как Adobe Illustrator, Macromedia FreeHand и CorelDraw, предназначены для работы с векторной графикой.

Microsoft FrontPage

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

Программа обладает следующими характеристиками: пользовательский интерфейс подобен приложениям Microsoft Office; в состав приложения входит средство проверки орфографии; оформление всего узла можно изменять, выбрав библиотеку тем; программа позволяет интегрировать web- узел с базами данными Access и создавать динамические web-страницы;

ряд операций выполняется автоматически; поддержка анимации Dynamic HTML; FrontPage позволяет легко переключаться между режимами HTML, WYSIWYG и режимом предварительного просмотра; в процессе работы можно создать диаграмму, отражающую структуру узла; содержит средства проверки корректности ссылок и генерации статических данных; разработчик может создать список задач, что упрощает управление проектом.

Средства разработки web-графики

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

Характеристики программы: изображение состоит из слоев и для каждого из них можно создавать специальные эффекты; многочисленные фильтры и инструменты рисования позволяют реализовать требуемые визуальные эффекты; изображение можно сохранять в одном из форматов, пригодном для публикации в Интернете - GIF, JPEG, PNG; разработчику предоставляется богатый выбор кистей, текстур и средств для создания специальных эффектов; средства управления цветом позволяют добиться корректного изображения на экране монитора компьютера.

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

Подготовка рисунков к публикации в Adobe PhotoShop Изображение / Режим / RGB цвет

Изображение / Настройки

Команда Изображение / Размер изображения

Команда Изображение / Размер холста

С Photoshop (до версии 9.0 CS2 включительно) интегрирован продукт Adobe ImageReady, предназначенный для поддержки web-графики. Он предоставляет мощные средства разделения изображений на части, экспортирования и оптимизации, а также инструменты, позволяющие быстро создавать навигационные кнопки.

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

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

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

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

Анимации Image Ready сохраняются в формате GIF и могут воспроизводиться заданное число раз, а также повторяться в цикле. Однако они не допускают присоединения аудиофайлов для звукового сопровождения.

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

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

Палитра «Анимация»

Перед расчетом промежуточных кадров следует выделить один или несколько последовательных кадров. Затем выбирается команда Tween (Промежуточный) либо выполняется щелчок по одноименной кнопке палитры Animation (Анимация). В открывшемся окне Tween (Расчет промежуточных кадров) задаются параметры.

Чтобы выполнить предварительный просмотр анимации в окне документа Image Ready, достаточно щелкнуть на кнопке Play (Воспроизвести) палитры Animation (Анимация).

Оптимизация необходима для уменьшения размера файла формата GIF, который является единственным форматом в Image Ready, позволяющим демонстрировать анимацию на Web-странице. File > Save Optimized As (Файл > Сохранить как оптимизированный)

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

Adobe Fireworks Adobe Fireworks (FW) растровый и векторный графический редактор для веб- дизайнеров и разработчиков, позволяющий быстро создавать, редактировать и оптимизировать изображения для веб-сайтов, эскизы веб- сайтов и веб-приложений.

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

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

Используется выборочное JPEG-сжатие, когда в одном изображении можно задавать различное качество для разных его частей. Fireworks дает возможность создавать векторные изображения, используя набор инструментов для работы с векторной графикой. Совместно с Photoshop программа позволяет использовать слои, маски объектов и эффекты. Fireworks дает возможность экспортировать данные в Adobe GoLive и Microsoft FrontPage, также программа полностью интегрирована с другими продуктами Macromedia, например, Dreamweaver, Flash, FreeHand.

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

Photo-Paint предоставляет следующие возможности: удобные средства доступа к инструментам и объектам; имеются панели инструментов в верхней части окна; в программе можно управлять элементами интерфейса, цветами и опциями; поддержка различных эффектов при генерации текста; при оптимизации изображений различные их варианты могут одновременно отображаться для сравнения; возможность преобразования графических изображений в web-совместимый формат, а также поддержка всех форматов web-графики, за исключением SVG; возможность интегрирования с программой векторной графики CorelDraw.

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

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

Открытие SWF-файла в окне броузера путем перетаскивания

Для браузера Internet Explorer внедрение выполняется с помощью тэга, а для Netscape - посредством тэга.

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