1 WYSIWYG: визуальные редакторы для создания сайтов » 3domen.com - сайт Сергея и Марины Бондаренко
Регистрация  Напомнить пароль?
 Отправлено SergeyMarina 8 ноября 2010   

WYSIWYG: визуальные редакторы для создания сайтов В Интернете миллионы сайтов. Неужели все они созданы опытными веб-разработчками, свободно владеющими HTML, PHP, CSS и javascript? Вовсе нет. Визуальные веб-редакторы, работающие по принципу What You See Is What You Get (что видишь, то и получаешь), позволяют создавать оригинальные и функциональные сайты без необходимости написания кода. Откройте подходящий шаблон, отредактируйте его под свои нужды, добавьте несколько эффектов и загрузите сайт на FTP-сервер, не покидая окна веб-редактора. Мы подробно расскажем о возможностях четырех визуальных редакторов.





Сергей и Марина Бондаренко

В Интернете миллионы сайтов. Неужели все они созданы опытными веб-разработчками, свободно владеющими HTML, PHP, CSS и javascript? Вовсе нет. Визуальные веб-редакторы, работающие по принципу What You See Is What You Get (что видишь, то и получаешь), позволяют создавать оригинальные и функциональные сайты без необходимости написания кода. Откройте подходящий шаблон, отредактируйте его под свои нужды, добавьте несколько эффектов и загрузите сайт на FTP-сервер, не покидая окна веб-редактора. Мы подробно расскажем о возможностях четырех визуальных редакторов.

WYSIWYG Web Builder

WYSIWYG Web Builder – это одна из тех программ, о предназначении которых очень легко судить по ее названию. Этот веб-редактор дает возможность создавать полноценные страницы и даже целые сайты без необходимости знания HTML-разметки, PHP-кода и прочих средств, которые используются профессиональными веб-разработчиками. Программа очень проста в использовании – есть рабочая область, на которую предлагается добавлять различные элементы сайта. Таким образом, задача пользователя сводится к подбору нужных элементов и размещению их на странице. Генерация кода происходит полностью автоматически. На любом этапе работы над проектом можно быстро посмотреть, как будет выглядеть страница в браузере, используемом по умолчанию, нажав клавишу F5. Для удобства можно также внести в список браузеров, в которых должен выполняться предварительный просмотр, все веб-обозреватели, установленные в системе.

Даже в визуальном редакторе создать веб-страницу "с нуля" достаточно сложно, особенно если это – ваш первый опыт на поприще сайтостроительства. В WYSIWYG Web Builder есть более сотни готовых шаблонов для сайтов разной направленности. Шаблоны можно использовать как основу для уникальных дизайнов, редактируя их по собственному усмотрению. Кроме этого, в программе есть готовые примеры кода javascript, которые можно использовать на своем сайте. Это отображение текущей даты и времени, ссылка для занесения страницы в закладки, прыгающие буквы, отключение меню, которое появляется при щелчке правой кнопкой мыши, мигающий текст и пр.

WYSIWYG: визуальные редакторы для создания сайтов

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

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

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

Для WYSIWYG Web Builder существует более двухсот дополнений, которые хоть и не поддерживаются официально, однако вполне работоспособны. С помощью этих дополнений можно быстро добавить на сайт такие востребованные элементы, как подписку на новости посредством RSS, поиск в Google, проигрыватель для воспроизведения MP3-файлов и т.д. Другие дополнения расширяют функциональность самой программы, например, добавляют в нее инструмент для проверки орфографии, средство для быстрого создания логотипов и даже… полноценный HTML-редактор для продвинутых пользователей, которые хотят собственноручно править код.

Web Page Maker

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

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

WYSIWYG: визуальные редакторы для создания сайтов

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

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

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

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

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

CoffeeCup Visual Site Designer

Главная цель, которую преследовали разработчики этой программы, – сделать процесс создания сайта веселым и увлекательным. Для достижения этой цели они сделали приложение максимально простым и понятным. При первом же запуске CoffeeCup Visual Site Designer пользователя встречает окно приветствия, в котором можно выбрать одну из трех возможностей: создать сайт "с нуля", на основе готового шаблона или продолжить работу над сохраненным ранее проектом. По умолчанию программа поставляется с десятью оригинальными шаблонами, но на сайте разработчиков можно найти еще целый набор дополнительных дизайнов (правда, стоит иметь в виду, что они платные). Если вы всегда используете на своих веб-страницах определенные настройки, вы можете задать те параметры, которые будут использоваться по умолчанию. Так, можно определить цвета ссылок и фона, разрешение страницы и пр.

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

WYSIWYG: визуальные редакторы для создания сайтов

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

К сожалению, многие возможности, которые в других визуальных веб-редакторах доступны по умолчанию, в CoffeeCup Visual Site Designer работают только после установки платных дополнительных модулей. Это, например, средство для добавления аудиоплеера, для преобразования видеофайлов в формат Flash и добавления их на веб-страницу, для создания фотогалереи, для создания интересных текстовых эффектов, для работы с веб-формами и добавления на сайт веб-календаря.

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

WebSite X5 Evolution

Несмотря на то, что визуальные веб-редакторы считаются гораздо более простыми в освоении, нежели обычные HTML-редакторы, все равно, впервые оказавшись один на один с рабочей областью и набором инструментов такой программы, новичок вряд ли сможет учесть все особенности создания сайта. Поэтому если вы создаете свой первый проект, попробуйте программу WebSite X5 Evolution. Работа с ней организована в виде пошагового мастера, который не даст забыть о самом важном. На первом этапе мастер предлагает указать адрес сайта, его название, определиться с тем, какой ориентации будет меню (вертикальным или горизонтальным), выбрать стиль шаблона и изменить его графические элементы. После этого нужно продумать структуру сайта: указать, сколько на нем будет страниц, как они будут называться, а также определить зависимости между ними.

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

WYSIWYG: визуальные редакторы для создания сайтов

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

Наконец, на последнем этапе необходимо сохранить готовый проект. WebSite X5 Evolution предлагает экспортировать все файлы проекта в указанную папку на жестком диске или на съемном накопителе (DVD/флешка), а также собрать все файлы, которые имеют отношение к проекту, в одну папку, и оптимизировать их, чтобы в дальнейшем перенести весь сайт на другой компьютер и завершить работу над проектом там. Третья возможность – загрузка сайта на FTP-сервер. Стоит отметить, что при редактировании проекта, который ранее уже был загружен на сервер при помощи WebSite X5 Evolution, становится доступной возможность экспорта только тех файлов, которые были изменены после последнего обращения к FTP.

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

Заключение

В рамках теста мы рассмотрели четыре визуальных веб-редактора. Любой из них может помочь в создании сайта вашей мечты и в загрузке его на FTP-сервер. CoffeeCup Visual Site Designer подойдет, скорее, для создания самых простых сайтов, содержащих небольшое число страниц. Возможности этой программы серьезно ограничены – даже средство для создания веб-форм предлагается приобрести дополнительно. Web Page Maker – это более функциональная программа, которая привлекает своей простотой и удобным режимом для просмотра элементов страниц, а также структуры сайта. Серьезным недостатком этой программы можно считать небольшое число готовых шаблонов. В WYSIWYG Web Builder можно найти практически все средства, которые могут понадобиться для создания различных сайтов. Программа выделяется на фоне других наличием большого числа бесплатных дополнений, а также невысокой ценой. WebSite X5 Evolution – самая дорогая программа обзора, однако реализованная в ней концепция пошагового создания сайта заслуживает всяческих похвал, а наличие инструментов для создания собственного интернет-магазина делают ее уникальной.

Написано для журнала Chip Сергеем и Мариной Бондаренко









Еще по теме:

  • Средства для генерации flash-галерей
  • Программы для записи DVD на компьютере
  • Создание цифровых фотоальбомов
  • Создание слайд-шоу из фотографий
  • Программы для печати постеров



  • Информация

    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

    Форум Топик Ответов
    Будьте в курсе новостей