Инструментальные средства Web-дизайна

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

В первую очередь рассмотрим HTML-редакторы.

Создавать HTML-документы в принципе можно даже с помощью обычных текстовых редакторов, например MS Word или Notepad (блокнот).

Однако специализированные HTML-редакторы значительно рационализируют процесс проектирования Web-страниц. Редакторы обладают следующими полезными возможностями:

· автозаполнение (вставка тегов и атрибутов с помощью подсказок);

· выделение цветом разных синтаксических элементов кода;

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

· наличие типовых заготовок (шаблонов) страниц;

· наличие библиотек стандартных Java-скриптов и программ DHTML;

· наличие мастеров для создания Java-скриптов, стилей CSS, таблиц и фреймов;

· наличие встроенного FTP-клиента;

· просмотр страниц при различных разрешениях монитора;

· возможность создания собственных пользовательских инструментальных панелей;

· возможность использования сниппетов — фрагментов кода, заготовленных для повторного многократного применения.

Перечислим наиболее распространенные HTML-редакторы:

HomeSite, Microsoft FrontPage, Macromedia Dreamweaver, HotDog Pro, HoTMetaL, Netscape Composer, NetObjects Fusion, Adobe GoLive, CoffeeCup.

Все HTML-редакторы можно разделить на две группы:

· редакторы, предназначенные для составления кода на языке HTML;

· редакторы для визуального проектирования страниц.

Нередко конкретные типы редакторов позволяют поочередно работать в двух режимах: писать программы традиционным способом (программировать на языке HTML) и проектировать страницы с помощью средств визуального программирования. В последнем случае документы создаются по технологии Drag and Drop (перетащи и оставь).

В различных редакторах переключение из режима кодирования на языке HTML в режимы визуального проектирования и просмотра созданной страницы осуществляется с помощью сходных управляющих элементов. На рисунке показаны соответствующие фрагменты пользовательского интерфейса: Dreamweaver (1), HomeSite (2) и FrontPage (3).

Перечислим важные особенности профессионального HTML-редактора Dreamweaver 4.0, предназначенного для визуального программирования сайтов. Редактор позволяет:

— поочередно просматривать HTML-код или внешний вид создаваемой страницы, либо одновременно наблюдать и код, и внешний вид страницы;

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

— создавать страницы из готовых шаблонов;

— создавать и редактировать каскадные таблицы стилей CSS и фреймы;

— создавать фотоальбомы (для этого на машине должна быть дополнительно установлена программа Fireworks 4);

— создавать анимацию за счет технологии слоев;

— вставлять в проектируемый документ три типа Flash-объектов: фильм, текст и анимированные кнопки;

— создавать ролловеры (Rollover) — кнопки, которые изменяют свой внешний вид при попадании на них курсора мыши;

— проверять работоспособность и корректность сделанных ссылок;

— вести отладку сценариев, написанных на языке JavaScript;

— публиковать сайты в сети.

Дадим небольшие комментарии к описанию возможностей программы Dreamweaver.

Слой (Layer) — это своеобразный контейнер, который может содержать различные элементы (объекты) страницы. Слои широко используются при создании анимации.

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

Еще один популярный редактор, FrontPage 2000 (2002), легок в освоении, так как его пользовательский интерфейс выдержан в стандартном для фирмы Microsoft стиле. Колоссальным преимуществом редактора FrontPage 2000 перед другими редакторами является то, что он русифицирован. Естественно, что это достоинство ценится только на отечественном рынке.

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

С помощью FrontPage можно вставить в проектируемую страницу некоторые DHTML-программы. Редактор обладает удобным средством для создания фреймов (с помощью шаблонов). При необходимости каждый существующий фрейм можно разделить (расщепить) по строкам или по столбцам.

Редактор Allaire HomeSite 4.5.2 стал классическим образцом для многих HTML-редакторов. Он надежно работает с кириллицей. Популярность этой программы одна из самых высоких среди HTML-редакторов.

Редактор CoffeeCup HTML Editor 8.7 может вставлять подготовленные сниппеты. Имеется встроенный FTP-клиент, с помощью которого разработанные страницы легко отправлять на сервер.

В редакторе HotDog Professional 6.2 использован удобный Recourse Manager (Диспетчер ресурсов), который позволяет настроить панель управления по индивидуальным запросам пользователя. Некоторые события в этой программе сопровождаются забавными звуками (лай собаки). Это, видимо, связано с названием программы: слово Dog в переводе с английского языка означает «собака».

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

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

Графические редакторы делятся на две группы: растровые и векторные.

К растровым графическим редакторам относятся: Corel PHOTO-PAINT, Adobe PhotoShop, Paint Shop Pro, Fractal Design Painter.

Среди векторных графических редакторов следует выделить: Corel DRAW, Adobe Illustrator, Corel Xara, PhotoImpact.

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

Программа Macromedia Flash становится стандартом в качестве инструментального средства создания векторных изображений для сети. Использованная в этой программе технология представляет собой удачное сочетание двух перспективных технологий: слоев и векторной графики. Наибольшее достоинство программы — это возможность создания анимированных векторных изображений (фильмов). Вероятно, в будущем Flash-фильмы придут на смену анимации, создаваемой в настоящее время в формате GIF.

В программе Flash 5.0 имеется множество любопытных особенностей. Например, удобным инструментом является карандаш (Pencil Tool). Он позволяет рисовать в трех различных режимах. В первом режиме (Ink) все неровности, возникающие при движении руки, остаются на изображении. Во втором режиме (Straighten) нарисованная фигура заменяется ближайшей стандартной фигурой, которая больше всего похожа на нарисованную. В третьем режиме (Smooth) линии, нарисованные рукой, сглаживаются. В результате исчезают излишние волнистости и шероховатости.

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

Если в создаваемом фильме действует несколько объектов (персонажей, героев), то каждый объект можно разместить в отдельном слое. Это позволяет создавать сценарии, по которым персонажи будут перемещаться на экране по произвольным траекториям, выходя на первый план или, наоборот, отступая в глубь сцены. Поведение персонажей фильма задается программистом в соответствии с выбранной им сюжетной линией. На отдельных слоях можно разместить фоновое изображение или записать звуковое сопровождение к фильму. Звуки могут быть заранее подготовлены в форматах WAV или MP3, а затем импортированы во Flash-фильм.

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

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

В программе имеются средства для встраивания созданного Flash-объекта в HTML-документ. Для этого следует воспользоваться командой Publish (Опубликовать).

Во Flash 5.0 существуют средства, которые позволяют изменять размеры движущихся объектов, их яркость, характер движения (равноускоренное или равнозамедленное). Для разработки сложных интерактивных фильмов в программе предусмотрен внутренний язык ActionScript.

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

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

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

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

Программа CoffeeCup Direct FTP 5.0 содержит два окна: в одном отображается содержимое локального жесткого диска клиента (My Computer), а во втором — содержимое сайта на сервере (My Site). По технологии Drag and Drop файлы разработанного сайта переносят с машины клиента на сервер. Таким образом осуществляется размещение (публикация) сайта на выбранном сервере.

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

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

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

Для редактирования Java-апплетов предназначены программы AppletAce и Activator. Программа TeraLogic Texture Maker используется для создания картинок с изображением графического фона страницы. Для создания объемных (трехмерных) надписей служит программа 3D Font FX. Редактировать звуки позволяет программа CoolEdit.

Дата добавления: 2014-01-04