Визуальный веб редактор. Основные элементы интерфейса FrontPage. Общее представление о веб-конструировании

Розгляд теми: Ідентифікація ПК в мережі. Принцип адресації.

ГЛАВА 3. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3.1. Общее представление о веб-конструировании

Всемирная информационная паутина (WWW – World Wide Web) является в настоящее время популярной и удобной службой сети Интернет.
Веб-страницы и веб-сайты широко применяются во Всемирной паутине.

Для создания веб-сайтов используется язык разметки гипертекстовых документом HTML (HyperText Markup Language).
Методы конструирования веб-сайтов и инструменты, с помощью которых выполняется конструирование, очень разнообразны, их можно классифицировать по различным признакам. Важнейшими из них являются степень автоматизации конструирования сайта и методика процесса разработки.

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

Визуальный метод позволяет конструировать веб-сайт с высокой степенью автоматизации. Этот метод возник из необходимости уменьшить трудоемкость создания сайта и сократить сроки выполнения работ.

Главным принципом визуального метода является принцип «Что вижу, то и получаю» - WYSIWYG (от англ. предложения “What you see is what you get”). При создании сайтов с использованием визуального метода необходимо выбрать инструменты – редакторы визуального конструирования.

Наиболее известными такими редакторами являются: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive и др. Во время создания веб-сайта эти редакторы обеспечивают пользователю возможность работать без непосредственного подключения к сети Интернет. В дальнейшем созданный веб-сайт можно разместить в сети Интернет.

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

Для конструирования веб-сайтов могут использоваться системы управления содержанием CMS (Content Management System), которые предоставляются некоторыми специальными платными или бесплатными сервисными службами. Системы CMS представляют собой своего рода конструкторы, позволяющие создавать сайт и сопровождать его в дальнейшем. При создании структуры и навигации по сайту в системе CMS обычно не требуется глубоких знаний языка HTML. Примеры систем CMS можно найти на сайтах Narod.ru и Boom.ru.

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

Для непосредственной работы с HTML-кодом могут использоваться специальные инструменты разработки, например программы Hotdog, HomeSite и др. Эти программы облегчают разработчику веб-сайта ввод и редактирование основных конструкций языка HTML.

Вводить основные конструкции языка HTML можно в программе Блокнот. Об этом способе работы мы поговорим позже.

Кроме языка разметки гипертекстовых документов HTML для создания веб-сайтов используются другие языки программирования, например Java Script и PHP.

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

Методика веб-конструирования предполагает выполнение проектирования сайта за несколько основных этапов:

1. Разработка тематики сайта, его целей и задач.
2. Логическое проектирование, которое включает в себя: формирование структуры сайта (линейный, иерархический), название разделов, связь между ними, подготовка информации, размещаемой на каждой веб-странице сайта.
3. Непосредственное создание сайта, которое включает в себя определение методов проектирования и выбор инструментов для него.
Методы и инструменты конструирования веб-сайтов очень разнообразны, например можно создавать сайты динамические и статические.

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

Статический сайт не обновляется в режиме реального времени.

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

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

?
1. Какие два основных метода веб-конструирования вам известны?
2. Какие инструменты могут использоваться при создании веб-сайтов?
3. В чем разница между визуальным и программируемым методами веб-конструирования?
4. Для чего используются скрипты?
5. Какие этапы следует выполнять при проектировании веб-сайта?


3.2. Основные понятия HTML. Представление о структуре HTML-документа

3.2.1. Структура HTML-документа

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

Суть языка HTML - в разметке текста с помощью управляющих символов - тегов, которые располагаются в угловых скобках.

Большинство тегов парные, т.е. имеют открывающий элемент <> и закрывающий элемент .

Между ними и находятся коды, которые распознает браузер.

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

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

В блоке заголовка размещается тег текст . Текст, указанный в этом теге отображается в заголовке окна браузера.
В HTML-документе можно разместить комментарии, которые браузером не отображаются: .

Пример 1. Создать простой HTML-документ в Блокноте. Сохранить созданный файл prim1.htm. Открыть созданный документ в браузере.
Структура такого документа представляется следующим образом:



Заголовок


Текст первой странички

Результат отображения HTML-документа в браузере представлен на рис. 3.1.

3.2.2. Оформление HTML-документа

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

<тег атрибут1=значение атрибут2=значение …>

Тег определяет внешний вид всей веб-станицы, в то время как отдельные ее элементы, например заголовки, таблицы могут иметь свое особенное оформление.
Выбор цвета страницы, фонового рисунка и цвета текста на ней является весьма важным, так как от этого зависит визуальное восприятие всего сайта.
Цвет страницы задается атрибутом bgcolor, а цвет текста - text. Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом.

Пример 5. В этом примере задан синий цвет страницы двумя способами:


или

Результат отображения HTML-документа в браузере представлен на рис. 3.2.

?
1. С помощью чего создается HTML-документ?
2. Для чего предназначены теги и атрибуты в языке HTML?

Упражнения

1. Просмотрите текст HTML-документа:

а) Какой цвет фона и текста будет на веб-странице?
б) При выводе заголовков на веб-странице размер их уменьшается или увеличивается?

3.3. Работа с редактором визуального конструирования FrontPage

3.3.1. Основные элементы интерфейса FrontPage

Редактор Microsoft FrontPage относится к редакторам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате.html. Выполняемые при этом действия напоминают работу в текстовом редакторе Word.

Интерфейс редактора FrontPage достаточно прост, чтобы пользователь смог быстро освоить основные приемы работы. После запуска FrontPage открывается окно, основные элементы которого представлены на рис. 3.3.

Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели текстового редактора Word.

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

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

3.3.2. Создание веб-сайта в редакторе FrontPage

Рассмотрим этапы и приемы работы в редакторе FrontPage на примере разработки веб-сайта «Беларускія пісьменнікі» (см. Рис. 3.3).
Для создания этого веб-сайта необходимо уяснить его структуру, и предполагаемое содержание, т.е. подготовить проект сайта. Фрагмент структуры сайта для наглядности изобразим в виде двухуровневой схемы (рис. 3.5).

Рис. 3.5.
На первой странице (верхний уровень) размещается заголовок сайта «Беларускія пісьменнікі», текстовые гиперссылки и гиперссылки с изображением писателей и поэтов, позволяющие открыть страницы второго уровня.

На втором уровне разместим три страницы одинаковой структуры, содержащие следующую информацию, как показано на рисунке 3.6.

Рис. 3.6.
После просмотра любой страницы второго уровня внизу расположим гиперссылки для возврата на главную (первую) страницу сайта и две гиперссылки для движения вперед и назад по сайту.

При проектировании сайта «Беларускія пісьменнікі» мы будем использовать методику построения сверху вниз, то есть конструировать от верхнего уровня к нижнему уровню. При создании веб-страниц сайта с помощью редактора FrontPage мы будем для удобства создавать страницы снизу вверх, то есть начнем создавать страницы нижнего уровня.

Файлы всех веб-страниц сайта размещаются в отдельной папке. Это в дальнейшем поможет упростить размещение сайта в сети Интернет. Файлу главной веб-страницы принято давать имя index или main с расширением.htm, хотя это требование не является обязательным.

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

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

В редакторе FrontPage для оформления документов разработаны шаблоны – Темы.

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

С помощью меню Файл → Создать в появившемся окне Шаблоны веб-узлов выберем Одностраничный веб-узел (рис. 3.7).

Для облегчения подбора элементов оформления и цветовых схем используем готовый шаблон оформления – тему.

С помощью меню Формат → Тема в появившемся диалоговом окне выберем, например, тему Горизонт и укажем Применить как тему по умолчанию.
Тему можно применять к отдельным страницам, а также ко всему сайту. В последнем случае при создании каждой новой страницы тема устанавливается автоматически.

?
1. Для чего предназначен редактор FrontPage?
2. Назовите основные элементы интерфейса редактора FrontPage. Каково их назначение?
3. Для чего используется Тема при оформлении веб-страницы?

3.4. Форматирование текста и вставка изображений в редакторе FrontPage

3.4.1. Форматирование текста

Форматирования текста в редакторе FrontPage осуществляется с помощью панели инструментов Форматирование, а также окон Формат (рис. 3.8) и Абзац (Рис. 3.9).

Рис. 3.8 Рис. 3.9
Выделив текст в редакторе FrontPage (выполняется аналогичноWord) в окне Шрифт можно выбрать его имя, начертание и указать размер, а в окне Абзац указать выравнивание, отступы и межстрочный интервал. Примеры форматированного текста представлены на рисунках 3.8 и 3.9. Важно помнить, что отображение веб-страницы на экране зависит от разрешения монитора и настройки браузера. Поэтому размер шрифта принято задавать в условных единицах от 1 до 7. Если размер шрифта не указан, то по умолчанию он принимается равным 3, что при установке в браузере Размер шрифта средний соответствует 12 пунктам.
Для привлечения внимания к информации создается бегущая строка с помощью цепочки действий: Вставка → Веб-компонент → Бегущая строка. В окне Cвойства бегущей строки (Рис 3.10) вводится текст, задается направление и скорость движения, время задержки и другие параметры.


Рис. 3.10

3.4.2. Вставка изображений

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


Рис. 3.11
В зависимости от обтекания текстом вставляемые изображения могут располагаться различными способами (Рис. 3.12).


Регулирование позиции изображения относительно других элементов веб-страницы, например текста, осуществляется в диалоговом окне, которое активизируется с помощью меню Формат→ Положение.
В редакторе FrontPage предусмотрена возможность простейшей обработки изображений (коррекция яркости и контрастности, повороты, обрезка и т.д.). Для этого используется панель Рисунки аналогичная текстовому редактору Word.

?
1. Какие возможности по форматированию текста имеет FrontPage?
2. Как задается размер шрифта на веб-страницах?
3. Как создать бегущую строку?
4. Как выполняется размещение изображения на веб-странице?
5. Каким образом выполняется настройка изображения?

Упражнения

1. Наберите и оформите в редакторе FrontPage текст следующего диалога:

Давайте улыбнемся!
На работу пришла новая Мышь. Вечером она решила расспросить Клавиатуру о работниках.
Слушай, Клав, а кто у Вас главный?
А сама как думаешь?
Ну, Сервер, наверное…
Нет, судя по зарплате, он не является главным.
Тогда Принтер… Цветной, лазерный световой…
Нет, Мышь, опять мимо. Вот видишь, на столе маленький с красными глазками? Ладно, скажу - Модем. Он является самым главным, так как связывает нас со всем миром.

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



3.5. Вставка таблицы в редакторе FrontPage

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

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


Рис. 3.13

?
1. Для чего используются таблицы на веб-страницах?
2. Как вставить таблицу в редакторе FrontPage?

Упражнение

Создайте в редакторе FrontPage фрагмент сайта «Беларускія пісьменнікі» из четырех веб-стран:
а) главная веб-страница – «Беларускія пісьменнікі» (файл index.htm), как показано на рисунке 3.3;
б) веб-страница - «Якуб Колас» (файл Kolas.htm), как показано на рисунке 3.6;
в) веб-страница «Янка Купала» (файл Kupala.htm), как показано на рисунке 3.14;



Рис. 3.14.

г) веб-страница «Максім Багдановіч» (файл Bagdanovich.htm), как показано на рисунке 3.15.


Рис. 3.15

3.6. Создание гиперссылок в редакторе FrontPage

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

Перед созданием внутристраничных ссылок нужно сначала расставить закладки. Для этого курсор устанавливается на нужное место веб-страницы. С помощью меню Вставка→Закладка вызывается диалоговое окно Закладка, в котором вводится имя закладки, например Вниз (рис. 3.16).

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



Рис. 3.16
По умолчанию новый документ открывается в текущем окне браузера, однако из окна Добавление гиперссылки можно щелкнуть по кнопке Выбор рамки и в открывшемся окне Конечная рамка задать открытие нового документа в новом окне (Рис. 3.17).


Рис. 3.17
Заметим, что в редакторе FrontPage создание гиперссылок выполняется в режиме Конструктор, а проверить работу гиперссылок можно в режиме Просмотр.

?
1. Какие элементы могут выступать в качестве гиперссылки?
2. На что может указывать гиперссылка?
3. В чем различие внутренней, внешней и внутристраничной гиперссылок?

Упражнение

Создайте в редакторе FrontPage текстовые и графические гиперссылки между страницами веб-сайта «Беларускія пісьменнікі», как показано на рисунке 3.18


Рис.3.18

3.8. Публикация сайта

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

Некоторые серверы бесплатно предоставляют дисковое пространство под сайт, например, www.narod.ru. Процесс публикации сайта заключается в переносе файлов вашего сайта на этот сервер. Адрес перенесенного сайта может иметь вид, например, www.belpisateli.narod.ru.

Для публикации сайта, подготовленного в редакторе FrontPage, необходимо с помощью меню Файл → Опубликовать узел вызвать диалоговое окно Свойства удаленного веб-узла (рис. 3.19).
Для размещения созданного сайта на сервере narod.ru в строке Расположение удаленного веб-узла следует указать адрес ftp-узла сервиса narod.ru, который для всех пользователей является одинаковым: ftp://ftp.narod.ru (рис. 3.19).



Рис. 3.19.

В дальнейшем пользователю необходимо ввести имя и пароль в окне Требуется имя и пароль (рис. 3.20).


Рис. 3.20
В открывшемся новом окне слева будут размещены файлы и папки созданного локального веб-узла, а справа файлы и папки удаленного веб-узла, например странички сайта «Беларускія пісьменнікі» (рис. 3.21).



Рис. 3.21

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

Когда копирование всех файлов завершится, пользователь может просмотреть размещенный в сети сайт. Для этого в строке браузера вводится адрес, например www.belpisateli.narod.ru

?
1. Что понимают под публикацией сайта?
2. Как опубликовать сайт?

Упражнение

Опубликуйте сайт «Беларускія пісьменнікі» на локальном компьютере или доступном бесплатном сервере, который укажет учитель.

Надіслано учителем інформатики Міжнародного ліцею "Гранд" Чебаном Л.І.

Інформатика скачати , завдання школяру 11 класу, матеріали з інформатики для 11 класу онлайн

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

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

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

Что же означает WYSIWYG ?
В таких редакторах можно изменять не исходный код ваших документов, а его представление, которое (по-возможности) будет опубликовано в итоговом документе. Таким образом, вместо написания блоков кода вручную, вы управляете проектированием при помощи компонентов, используя окно редактора. Это означает, что Вы видите что-то очень похожее на конечный результат, хотя документ или изображение еще только создается.
Примечание : эта статья содержит рецензии только desktop-ориентированные WYSIWYG-редакторы, которые работают под Windows, Linux или Mac. Она не дает обзор WYSIWIG-редакторов на JavaScript, но вы можете найти обширный обзор таких редакторов на или .

Adobe Dreamweaver

Dreamweaver (Win / Mac)

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

Dreamweaver также предоставляет различные полезные инструменты, такие как, библиотеки фрагментов кода, ftp управление, сервер отладки и комплексного кодирования. Например, Вы можете просматривать CSS информацию в единой, унифицированной CSS панели, что позволяет легко увидеть стили применительно к конкретным элементам, определить, где атрибуты определяются и редактировать существующие стили. Смотрите также наш список обучающих материалов по Dreamweaver . Цена: $ 400 (версия CS3).

Некоторые из многочисленных возможностей Dreamweaver:
* Расширенное CSS редактирование
* Integrated coding environment
* Spry framework для Ajax
* Проверка совместимости браузеров.
* Интеграция с Photoshop CS3 и Fireworks.
* Code snippets (например, CSS форматов)
* Управление FTP
* Поддержка XML
* Поддержка FLV
* Обучающие ресурсы (например, Adobe CSS Advisor)
* Многочисленные расширения для Dreamweaver.
Amaya
Amaya (Win / Mac / Linux)
Что действительно делает Амайя непохожей на остальных, то что это гибрид веб-браузера и редактора веб-страниц, таким образом, Вы можете просмотреть страницы в Интернете и редактировать Ваши страницы в одном и том же приложении. Созданный WWW-консорциомом, этот инструмент позволяет управлять веб-сайтами, изменять и обновлять их содержание, добавить новые изображения и ссылки. Конечно, если Амайя сможет отображать эти страницы.

Последняя версия редактора, Амайя 10 , была выпущена в феврале 2008 года. Он способен работать с нескольких документах одномременно ((X)HTML, MathML(. Mml) и SVG (. Svg) документы, могут быть отображаться и редактироваться одновременно). Например Вы можете вставить математические формулы, с помощью pop-up: Амайя преобразует их через Math-ML "на лету".

Амайя также включает в себя объединенное приложение аннотаций (аннотации, внешние комментарии, примечания, замечания, которые могут быть прикреплены к любому веб-документу или отдельной части документа) и он поддерживает SVG, RDF и XPointer. Open-source.

Rapidweaver
RapidWeaver (Mac)
RapidWeaver является мощным, основанным на шаблонах, инструментом для создания веб-сайтов, который может генерировать страницы разного рода, такие как, например, текстовые страницы, блоги, контактные формы, графические галереи и Flash слайд-шоу, а также имеет встроенный в FTP-менеджер и интеграция с iPhoto и.Mac.

Редактор включает в себя подкастинг, встроенные комментарии, RSS-ленты, permalink и поддержку тегов. RapidWeaver также будет SEO-дружелюбен. Он также имеет много мощных функций, таких как модифицирование тем, php-рендеринг, mix and match WYSIWYG and HTML, smart publishing, XHTML and CSS based site output, просмотр исходного кода, встроенная проверка ошибок. Все шаблоны основаны на XHTML и CSS. Что является замечательным так это то, что RapidWeaver генерирует код валидный. Цена: $ 49.

Adobe Contribute
Adobe Contribute

Основная цель Adobe Contribute, является возможность редактирования веб-сайтов и блоги для пользователей не имеющих каких-либо технических знаний. Contribute CS3 позволяет авторам обновить существующие сайты и блоги, сохраняя целостность сайта. Contribute предлагает интеграцию с Dreamweaver, дает возможность размещения материалов с Microsoft Office и редактирования из IE 7 и Firefox.

С этим WYSIWYG-редактором, авторы могут изменять или обновлять любой веб-сайт или блог без необходимости изучать HTML. Цена: $ 169 (версия CS3).

Adobe Golive
Adobe Golive (Win / Mac)

В апреле Adobe прекратила разработку и продажу GoLive 9. Adobe GoLive рекомендует пользователям перейти на Dreamweaver, после чего Вам, вероятно, не следует рекомендовать GoLive (на самом деле удивительно мощный инструмент редактирования, (см. ниже) для ваших клиентов.

Некоторые Adobe GoLive 9 возможности:
* Designer styles
* Visual CSS layout
* Place command
* Adobe InDesign® integration
* Color management
* Platform support
* Site management tools
* Publish Server
* Smart Objects

Microsoft Expression Web
Microsoft Expression (Win)

В свое время подвергшийся резкой критике за его действительно плохой веб-редактор (Frontpage), Microsoft недавно создал редактор, Expression, который кажется, наследовал многое из его предшественников. Expression попытался создать комфортную обстановку для интернет-пользователей, с чертами, которые являются чрезвычайно похожими на Adobe Dreamweaver. Однако, при прямом сравнении Dreamweaver предлагает больше и производит более чистой код. Тем не менее, Expression производит достойный, совместимый со стандартами код и знает, как работать с CSS и CSS-макетами.

Studio edition с прочими программными приложениями (graphic design tool, video encoding tool т.д.) стоит прим. $500. Одна лицензия Expression стоит $350. Вы можете получить Expression, обновив Frontpage и тем самым сэкономив деньги. Trial-версию на 60 дней можно загрузить бесплатно, однако требуется регистрация.

Обратите внимание: Expression не преемник Frontpage, это довольно разные инструменты разработки. Microsoft Expression имеет большее сходство с Microsoft SharePoint Designer, это скорее конструктор ориентированный и направленный на обеспечение общей веб-разработки. Microsoft SharePoint Designer делает акцент на разработке и адаптации к SharePoint-based сайтах, его можно рассматривать как старшего брата Frontpage.


Некоторые Microsoft Expression возможности:
* ASP.NET 2.0 Integration
* Advanced CSS rendering
* XPath Expression Builder
* Build and format views of industry-standard XML data
* Tag Property Grid
* Accessibility Checking
* Real-time Standards Validation
* Full Schema Support

NVU (Win / Mac / Linux)

Этот редактор должен стать реальной альтернативой доминирующим продуктам: WYSYWIG-редактор для Linux, Microsoft Windows и Mac, мог бы соперничать с FrontPage и Dreamweaver. А в некоторых аспектах Nvu действительно предоставляет больше возможностей, чем можно было ожидать от абсолютно бесплатного программного обеспечения.

Nvu (произносится как N-view, от "new-view - новый взгляд") предлагает интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов, и он действительно очень прост в использовании. CaScadeS, хорошо известный редактор CSS, как дополнительный модуль интегрируется в Nvu и позволяет легко создавать и управлять стилями и видеть как применяются Ваши стили "на лету" в документе Вы изменяете.

Nvu является open source и выпускалась под Mozilla Public License (MPL). К сожалению, развитие NVU не продолжается в последние лет. Усовершенствованную версию NVU можно взять тут - KompoZer .

Некоторые из возможностей NVU:
* Сайт-манаджер позволяет просматривать сайты, которые вы создаете.
* Поддержка XML.
* Встроенный валидатор.

Kompozer
KompoZer (Win / Mac / Linux)

Этот инструмент является ответвлением от NVU, которая была разработана после того дальнейшее развитие NVU замедлилось. KompoZer является веб-авторской системой, которая сочетает в себе менеджер для веб-файлов и WYSIWYG-редактор.

KompoZer чрезвычайно прост в использовании, что делает его подходящим решением для пользователей, которые хотят создавать сайты без получения технических знаний. По сравнению с NVU, Kompozer производит чистый код разметки.

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

Namo WebEditor 2006
Namo WebEditor 2006 (Win)
Namo WebEditor сочетает в себе практически все инструменты, необходимые для создания веб-сайтов в простой и интуитивно понятный интерфейс. Элементы интерфейса являются чрезвычайно понятными, простыми и удобными в использовании. Вы можете переключаться между дизайн-редактором, HTML-браузером и просмотром фотографий. Вы можете также использовать ряд мастеров, чтобы автоматизировать рабочий процесс. Namo является мощным, однако его WYSIWYG-возможности ограничены. Редактор не обновлялся с 2006 года в связи с чем генерирование исходного кода иногда чрезвычайно странно. Веб-редактор Namo Pro поставляется с Flash-редактором, а также с графическими программами. Тест-версия доступна. Цена: $ 99,95.


Некоторые из Namo Webeditor возможностей:
* Code Helpers для авто закрытия тегов
* Quick Tag Editor
* Tag Selector
* HTML/CSS Reference

Evrsoft First Page 2006
Evrsoft First Page 2006 (Win)
На самом деле этот редактор очень недооценивается. Он не очень популярный и он не обновлялся с 2006 года, но у него есть много весьма полезных функций, которые можно было бы включить в современные WYSIWYG-редакторы. Например, функция Auto History - история помнит все атрибуты и значения, которые использовались и предлагает " правильное" значение автоматически.

Dual Preview Engine позволяет Вам просматривать веб-документы в нескольких браузерах с помощью First Page 2006. Вы можете просмотреть вашу работу в Internet Explorer, Mozilla или просматривать страницы в обоих браузерах бок о бок (горизонтальные / вертикальные панели). И в режиме реального времени просматривать код и редактировать документы.

First Page является бесплатной. Аналогичная бесплатная альтернатива (тоже не обновлялась с 2005): Selida HTML Editor.

Некоторые из возможностей First Page:
* CSS Class Support & Auto Detection
* Syntax Highlighting
* Tag Document Selection Tool
* Tag Auto Completion
* Tidy HTML Power Tools
* Preview in IE as you type
* Image Mapper
* CSS Style Sheet Designer
* Server Side Includes Support
* Highly customizable Toolbars and Interface
* FTP client
* Advanced Find & Replace In Files

Microsoft SharePoint Designer
Microsoft SharePoint Designer 2007 (Win)

Это преемник Microsofts Frontpage. SharePoint Designer является стандартом WYSIWYG-редактора. Помимо поддержки интерактивных страниц ASP.NET, он не предлогает что-то революционное. Бесплатные trial-версия доступна. Существует online-версия, которая требует Internet Explorer и большого терпения.

Некоторые из возможностей Sharepoint:
* support for interactive ASP.NET pages
* create Data Views from RSS, XMl, Office XML
* collaborate with the built-in Workflow Designer
* CSS tools
* track customized pages
* spelling checker
* SharePoint Server 2007 integration

NetObjects Fusion
NetObjects Fusion
Этот редактор когда-то был, вероятно, худшим, но тем не менее очень популярным WYSIWYG-редактором. Он генерировал ужасный исходный код (только MS Word делал это хуже), но часто использовался у веб-хостинговых компаний и провайдеров. NetObjects Fusion позволяет создавать веб-сайты без каких-либо технических знаний. Особенно, если вы хотите создать визитную карточку, Вы можете сделать это в считанные минуты. Но если вы хотите создать профессиональный веб-сайт, NetObjects это не вариант который заслуживает рассмотрения.

В настоящее время доступена 10 версия NetObjects Fusion. Качество генерируемого исходного кода, возможно, изменилось, однако это не имеет большого значения. Существует trial-версия, которая требует от вас зарегистрироваться в магазине. Вот почему у нас нет screenshot-a этого продукта. Цена: ? 100.

Quanta Plus

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

Редактор поддерживает как handcoding, так и WYSIWYG-интерфейс. Он имеет следующие возможности: авто завершение тегов по мере ввода и редактирования тегов в рамках диалогового интерфейса, управление проектами, возможность выполнять от отлаживать PHP-код. Он также имеет визуальный редактор CSS, автодополнение для CSS, предлагает высокую расширяемость и предварительный просмотр.

Редактор также интересные особенности для управления проектами, включая поддержку для локального и удаленного (через сеть) проектов. Проекты могут быть загружены с различных серверов с использованием различных протоколов. CVS поддержка включена, поддержка Subversion возможна за счет внешних подключаемых модулей. Quanta базируется на KDE. Выпускается в соответствии с GPL-лицензией.

Freeway
Freeway (Mac)

Freeway (первоначально Uniqorn) поставляется в двух вариантах, Freeway Pro и Freeway Express. Freeway 5 Pro может быть использована для создания CSS макетов с использованием абсолютного позиционирования. В расширенным варианте, например, подключение к базе данных MySQL, используя скриптовый язык, такой как PHP, производится с помощью подключаемых модулей называемый "Actions". Некоторые Actions могут быть загружены бесплатно на нескольких веб-сайтах, но есть и коммерческие, такие как 3rd Party Actions.

Существует trial-версия, которая требует от вас заполнить довольно долгую веб-форму. Freeway был номинирован на Macworld 2008 Awards в номинации Creative Web Product года. Если вы используете Mac, то Freeway вместе с RapidWeaver является с первым вариантом, который заслуживает рассмотрения.

Некоторые из возможностей Freeway:
* Multiple Master Pages
* Layout Tools
* Link Map
* Link Styles
* Integrated .Mac upload
* Internet Explorer Compatibility
* Support for Sliced Background Images
* Built-in preview within Freeway (Safari/Webkit)
* Full EPS (Panther & later), Illustrator, Photoshop layered file import
* Freeway Shop
* Work with Blogger Templates

Seamonkey Composer
SeaMonkey Composer (Win / Mac / Linux)
Этот редактор является простой, но очень мощной альтернативой, крупных коммерческих приложений. Будучи наследником Netscape Composer, SeaMonkey Composer в действительности не имеют ничего общего с ним.

Редактор является мощным и одновременно простым и предлагает динамичные изображения и table resizing, быструю вставку и удаление из ячеек таблицы, расширеную CSS-поддержку, и поддержку позиционированных слоев. WYSIWYG-редактор встроен в SeaMonkey.

Create
Create (Mac)
Create сочетает в себе основные функции приложений таких как Illustrator, InDesign, Pages, GoLive, Canvas, Dreamweaver, QuarkExpress, и упорядочил их для удобного использования, он недорогой, предназначен для OS X. Среди прочего, вы можете добавить ссылки на текст и графику с помощью drag-n-drop, имееется инструмент который автоматически создает навигацию и индекс, и вы можете создавать PDF и веб-сайты из одного документа.

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

PayPal eCommerce Tools интегрирован; имеется RSS Feed объект, блог с встроенным RSS и SiteMap генератор совместимый с Google. Редактор также имеет множество расширений, таких как защита паролем, RSS канал, RSS парсер, фотоальбом и lightboxes.

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

Каждый веб дизайнер и кодер нуждается в хорошем редакторе веб страниц для создания и редактирования HTML, CSS и JavaScript кода. Notepad (Windows) и TextEdit (Mac) — отличные инструменты для начала, но вскоре по мере накопления опыта работы захочется использовать более солидный и удобный инструмент.

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

  • WYSIWYG редакторы. Это графические редакторы, которые позволяют строить макет страницы и задавать стили визуально, как в хорошо известном текстовом процессоре MS Word. Они являются удобным инструментом для построения дизайна страницы, хотя, как известно каждому опытному веб дизайнеру, код все равно придётся "причесывать" для достижения отличного результата.
  • Текстовые редакторы. Это инструмент для непосредственного редактирования HTML и CSS кода. Некоторые редакторы имеют общее назначение и в них нет специальных опций поддержки веб кода. Другие специализированы для использования веб языков, таких как HTML, CSS, JavaScript и PHP, и имеют встроенные свойства для быстрого ввода HTML тегов, CSS свойств, и так далее. Многие из таких редакторов позволяют просматривать веб страницу в отдельном окне.

KompoZer (Windows, Mac, Linux)

KompoZer — отличный выбор, если вам нужен визуальный редактор в условиях ограниченного бюджета

Komodo Edit - хороший редактор, простой в освоении, но мощный и расширяемый

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

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

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

Очень полезная функция Code > Select Block . Она выделяет текущий основной блок HTML, например, текущий закрытый элемент div или ul . Очень удобная функция, когда нужно выделить целую секцию на странице для копирования или перемещения.

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

Aptana Studio (Windows, Mac, Linux)

Aptana Studio - это полноценная интегрированная среда разработки веб приложений с большим набором плагинов. Хотя вы можете использовать ее только как редактор HTML/CSS/JavaScript кода

Notepad++ - отличная замена для Notepad из Windows. Несмотря на то, что у него нет такого набора опций, как у других редакторов, он отлично подходит для редактирования HTML, CSS, JavaScript и других файлов с кодом

PSPad - другой редактор общего назначения для Windows с большим набором функций полезных для HTML и CSS кодеров

jEdit - это кросс-платформенный редактор текста с мощными функциями макро команда и плагинов. Установите плагин XML, если вам нужно редактировать веб страницы

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

Vim определенно сложен для освоения, но если вы преодолеете трудности, то никогда не захотите вернуться обратно!

Дедушка редакторов текста для программистов Vim (прямой потомок редактора vi) - это консольный редактор текста с открытым кодом. Он устанавливается редактором по умолчанию в почти всех разновидностях Unix, включая Linux и Mac OS X. Также редактор доступен для использования в Windows и многих других системах.

Vim не является системой, которую можно поставить и начать использовать сразу, до этого никогда не имев с ней дела. Большинство команда редактирования включают странные сочетания наподобие:wq и / . Он также имеет три режима редактирования: режим вставки , в котором вводится текст; визуальный режим для выделения текста; и командный режим для ввода команд. Такое функционирование является наследием Unix тех дней, когда не было ни окон ни мышки.

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

существует большое количество макросов и плагинов для Vim, которые облегчают работу с кодом HTML, CSS и JavaScript, включая подсветку синтаксиса, автозавершение, HTML Tidy, и просмотр в браузере. Вот большой список полезных ссылок:

  • Vim Omni автозавершение
  • HTML/XHTML редактирование в Vim
  • домашней страницы

Fraise (Mac)

Fraise - интуитивный редактор для Mac, с набором функций, достаточных для веб редактирования

Как и TextWrangler и gedit, Fraise - чудесный легкий редактор, который приятно использовать. Он является ответвлением от редактора . Он относительно новый и у него нет нормального веб сервера. В настоящее время он поддерживается только в Mac OS X 10.6 (Snow Leopard), то есть, если вы используете версию 10.5, то вам придется загрузить Smultron.

Fraise имеет несколько чудесных опций для веб редактирования:

  • Подсветка кода для HTML, CSS, JavaScript, PHP и нескольких других языков программирования.
  • Команду Close Tag(Command-T) для закрытия текущего тега. Это реально сохраняет время при вводе списков.
  • Удобный предварительный просмотр встроенным браузером (с использованием WebKit), с очень удобной опцией Live Update? которая обновляет браузер как только изменилась разметка и CSS на редактируемой странице.
  • Опцию Advanced Find, которая поддерживает поиск/замену с использованием регулярных выражений.
  • Поддержка блоков для быстрого ввода тегов HTML и свойств CSS.
  • Некоторые удобные команды для манипулирования текстом, такие как проверка HTML и конвертация символов в элементы HTML.

Fraise стоит изучить, если вы используете Mac и вам нужен удобный редактор с большими возможностями, чем встроенный TextEdit.

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

Попадание в десяточку

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

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

(https://notepad-plus-plus.org/)

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

PSPad (http://www.pspad.com/)

Также как и предыдущая программа, PSPad – это инструмент общего назначения, который подсвечивает css и html текст, автоматически сохраняет изменения после завершения программы, проверяет правильность написанного кода, позволяет включить режим предпросмотра разрабатываемых страниц в . Данный визуальный редактор содержит в себе больше полезных функций, чем Notepad++, однако он все еще относится к простым средствам разработки.

KompoZer (http://www.kompozer.net/)

Программный продукт относится к WYSIWYG-редакторам, что означает «что ты видишь, то ты и получишь». KompoZer входит в список лидеров среди визуальных редакторов и неспроста. Он позволяет разработчикам и дизайнерам работать вместе, так как наделен 3-мя режимами работы. Начнем с моего любимого – режима кода.

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

Komodo Edit (http://www.activestate.com/komodo_edit/)

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

Ко всему этому хочу добавить, что возможности программы можно значительно расширить при помощи специальных утилит!

jEdit (http://www.jedit.org/)

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

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

Aptana Studio (http://www.aptana.com/)

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

Fraise (https://www.assembla.com/home)

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

Gedit (http://projects.gnome.org/gedit/)

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

  • Автозавершение парных элементов;
  • Генерация временного текста;
  • Проверка синтаксиса кода;
  • Предпросмотр в любом браузере.

Vim (http://www.vim.org/)

Тяжелый в освоении консольный редактор, обладающий множеством плюсов для программистов. Оснащен 3-мя режимами работы.

ICEcoder (https://icecoder.net/downloads)

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

Что касается меня, то я часто меняю WYSIWYG-программы, пробуя новые версии и продукты разных компаний.

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

С уважением, Роман Чуешов

Существует множество способов создания собственного сайта - от использования готовых шаблонов на Narod.ru до обращения по объявлению типа "создание сайтов за два дня от 300 рублей". Создать свой собственный блог или простенькую домашнюю страницу может даже ребенок. Именно поэтому похвастаться наличием своего сайта в Сети может почти каждый. Различные сервисы предоставляют в распоряжение любого желающего сайты-конструкторы, которые за считанные секунды создают простенькую личную страницу пользователя. Таких страниц в Интернете сотни и сотни тысяч. Как правило, они похожи друг на друга и не запоминаются. Для тех, кто использует бесплатные онлайновые инструменты для создания личной интернет-страницы, собственный сайт - чаще всего забава, люди создают страничку и забывают про нее. Содержание на ней в большинстве случаев сводится к публикации фотографий своей собаки и нескольких сведений "о себе".

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

Визуальные web-редакторы - хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. С одной стороны, для создания web-проекта с помощью подобной программы не нужно иметь специальных знаний и быть программистом. С другой стороны, приложения такого типа дают простор для творчества и гарантируют, что сайт не будет выглядеть точно так же, как тысячи других. В основе работы визуальных web-редакторов лежит свойство WYSIWYG - What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.

⇡ WYSIWYG Web Builder 7.1.0

  • разработчик: Pablo Software Solutions
  • размер дистрибутива: 5,5 Мб
  • распространение: shareware
  • русский интерфейс: нет

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

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

Для этого можно использовать многочисленные инструменты, размещенные на вертикальной панели. Для удобства они разбиты по категориям: навигация (дерево сайта, меню навигации), рисование (линия, кривая, многоугольник), мультимедийные инструменты (Flash-плеер, плеер YouTube, Java, OLE-объект), средства для работы с web-формами (поле для вставки кода CAPTCHA, флажок, кнопка для загрузки файла, поле для ввода текста), Paypal (различные кнопки для работы с этой системой электронных платежей) и пр. Если какая-либо категория средств вам не нужна в работе, ее можно свернуть, чтобы освободить место на экране для более востребованных инструментов.

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

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

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

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

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

⇡ Web Page Maker 3.21

  • разработчик: www.webpage-maker.com
  • размер дистрибутива: 3,66 Мб
  • распространение: shareware
  • русский интерфейс: нет

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

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

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

Основную часть окна программы занимает рабочая область, а справа находится панель Site Contents. При помощи этой панели удобно управлять страницами сайта, а также отдельными элементами страниц. На вкладке Elements отображаются все блоки страницы, и щелкая по каждому из них, можно сразу же видеть, где он находится. Кроме этого, тут же можно вызвать окно свойств каждого элемента или удалить ненужные блоки. Что касается набора инструментов для создания структуры сайта, то тут стоит отметить возможность создания новой страницы на основе уже существующего в Интернете ресурса. Стоит указать его адрес, и Web Page Maker загрузит страницу, разобьет ее на блоки и сделает их доступными для редактирования.

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

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

⇡ CoffeeCup Visual Site Designer 6.06

  • разработчик: CoffeeCup Software
  • размер дистрибутива: 17,6 Мб
  • распространение: shareware
  • русский интерфейс: нет

Разработчики CoffeeCup Visual Site Designer, вероятно, по жизни руководствуются лозунгом "заработай на всем, на чем только можно заработать". Поэтому нужно иметь в виду, что, покупая этот визуальный редактор за $49, вы не получите в свое распоряжение все те функции, на которые можно рассчитывать после приобретения большинства других подобных программ.

Так, программа поставляется вместе с десятью шаблонами, а для загрузки остальных предлагается проследовать на сайт разработчика. Открыв соответствующую страницу, можно обнаружить, что дополнительные шаблоны платные и продаются по цене $9 за штуку. Подобные "сюрпризы" ждут пользователя и в процессе работы с приложением. Нажмите кнопку инструмента для создания web-форм, и вы обнаружите, что для работы с ним нужно заплатить еще $39, попробуйте добавить на сайт фотогалерею, и вы увидите, что и эта возможность предоставляется за дополнительную плату.

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

Такие часто встречаемые элементы web-страниц, как счетчики и web-формы, в программе можно создавать только при помощи инструмента для вставки пользовательского HTML-кода.

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

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

⇡ WebSite X5 Evolution 8

  • разработчик: Incomedia
  • размер дистрибутива: 15,3 Мб
  • распространение: shareware
  • русский интерфейс: есть

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

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

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

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

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

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

На четвертом этапе WebSite X5 Evolution предложит указать некоторые дополнительные настройки, например, определить внешний вид вводной страницы, задать параметры отображения flash-рекламы, добавить на сайт блог и ленту RSS-новостей.

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

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

Пожалуй, единственным неудобством при работе с WebSite X5 Evolution является невозможность предварительного просмотра страниц в браузере. Если нужно увидеть, как будет выглядеть сайт, можно использовать функцию "Тест", однако на генерацию проекта требуется некоторое время. Кроме того, программа генерирует страницы в собственном просмотрщике, созданном на движке Internet Explorer.

⇡ KompoZer 0.7.10

  • разработчик: Fabien Cazenave
  • размер дистрибутива: 7,9 Мб
  • распространение: бесплатно
  • русский интерфейс: есть

KompoZer - бесплатный визуальный web-редактор с открытым кодом. Программа доступна не только для Windows, но и для Mac, а также для Linux. Редактор создан на движке Gecko, на котором работает широко известный браузер Firefox. Это дает ряд преимуществ: во-первых, движок прекрасно поддерживает современные web-стандарты, такие как XML, CSS и JavaScript. Во-вторых, возможности редактора, основанного на Gecko, могут быть расширены за счет подключаемых модулей.

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

В программу интегрирован FTP-клиент, причем, его можно использовать не только для загрузки готового проекта, но и для быстрого редактирования страниц уже размещенного на сервере сайта. Указав данные для входа на сервер, можно перемещаться по дереву каталогов и выбирать страницы для редактирования. Их содержимое будет загружаться в окне KompoZer, и редактировать их можно прямо "на лету".

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

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

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

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

⇡ BestAddress HTML Editor 17

  • разработчик: Multimedia Australia
  • размер дистрибутива: 7,1 Мб
  • распространение: shareware
  • русский интерфейс: нет

Когда пользователь решает изучить какую-нибудь область, например, компьютерную графику, видеомонтаж или программирование, он часто задает вопрос более опытным товарищам - с какой программы лучше начинать осваивать новое ремесло. В некоторых случаях, действительно, лучше в начале использовать простые инструменты, а затем, разобравшись с их возможностями, переходить к более продвинутым редакторам. Что касается BestAddress HTML Editor 2010 Professional, можно сказать, что эта программа имеет все шансы стать первым и последним инструментом для начинающего веб-разработчика.

Работа в режиме визуального построения веб-страницы напоминает работу с конструктором - можно самостоятельно задавать размеры и цвет элементов, размещать по своему усмотрению кнопки, графику, меню и прочие компоненты сайта. Удобное форматирование, почти как в текстовом редакторе, может использоваться для управления положением любых элементов страницы. Шаблонов в BestAddress HTML Editor 2010 Professional вы не найдете, зато есть возможность загрузки веб-страницы, расположенной по указанному адресу. Открыв страницу в программе, можно затем отредактировать ее.

Редактор может автоматически загружать проект на сервер - для этого программа использует прилагающийся к ней FTP-клиент Digital FTP Access.

В BestAddress HTML Editor 2010 Professional имеются и профессиональные инструменты для написания кода. Новички, желающие понять принципы работы и написания HTML, CSS, Java и PHP-кода, могут обратиться к документации. В ней изложены самые главные правила написания кода, такие как - назначение тегов, примеры простейших операций и т.д. Несложные и понятные уроки дают краткое представление о структуре HTML и вводят новичка "в курс дела".

⇡ Заключение

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