Простые программы формата WYSIWYG (What You See Is What You Get (Дословно – «Что видите, то и получаете»). Так обозначаются программы, в окне которых уже сразу видно итоговый результат страницы, над которой ведётся работа) для веб-дизайна позволяют создавать базовые сайты с такой же лёгкостью, как если бы вы печатали документы в текстовом редакторе.

Следующий шаг комбинирует подход WYSIWYG с более детальным низкоуровневым контролем над тем, что вы делаете; довольно полезно, если вы собираетесь создать более впечатляющий сайт (с другой стороны, вам придется потратить некоторое количество времени на изучение базовых понятий в веб-вёрстке).

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

1) CoffeeCup Free HTML Editor
CoffeeCup Free HTML Editor – бесплатная версия коммерческого продукта, и, поэтому, лишена нескольких инструментов (меню дизайна CSS, загрузка через FTP и так далее). Если вы – новичок, то подобные лишения вряд ли сильно вам повредят. Вы можете использовать опцию Open From Web, чтобы открыть существующую веб-страницу, к примеру, и перенастроить её, добавив что-нибудь своё, тем самым экспериментируя и обучаясь на готовом примере.

В наличии имеется множество мощных инструментов редактирования, встроенный файл помощи, способный «провести» вас через незнакомые участки программы. Вы также можете загрузить свою тестовую страничку на платформу CoffeeCup S-Drive, где она будет бесплатно хоститься.

2) Notepad++
Notepad++ – поразительно мощный редактор исходного кода с обширным списком полезных возможностей. К примеру, подсветка синтаксиса мгновенно позволяет с удивительной лёгкостью ориентироваться в коде. Возможность свернуть отдельные участки кода позволяет вам сфокусироваться на других его участках, не отвлекаясь ни на что лишнее. Также присутствует функция автоматического завершения команд кода, что позволяет вводить его заметно быстрее и без ошибок.

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

3) PageBreeze
Опытные веб-дизайнеры не будут поражены PageBreeze’ом – он основан на старой технологии и заметно обделён функциями, но если вам нужно создать что-то очень простое, то данный редактор вам может вполне подойти.

Этот редактор типа WYSIWYG способен предоставить несколько простых шаблонов, по которым вы сможете учиться. Они, правда, крайне страшные, но для обучения – в самый раз. К тому же, мы всегда сможете добавить свой собственный шаблон, взятый на просторах Интернета.

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

4) Firebug
Допустим, вы уже заметно продвинулись в изучении веб-дизайна, создали свой сайт, написали код, разобрались с дизайном и прочее, но выглядит и работает он несколько не так, как вы рассчитывали. Возможно, написанный код оказался «кривоват» и требует отладки. Тут на помощь приходит Firebug. Это мощное расширение для браузера Firefox помогает в просмотре HTML и CSS кодов; подгоняйте стили и сразу же смотрите результат; выполняйте отладку JavaScript; управляйте куками, анализируйте время загрузки страниц, исследуйте сообщения об ошибках и многое другое.

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

5) Bluefish Editor
Bluefish - это редактор для программистов, который также включает в себя множество инструментов и опций для всего, что относится к веб-дизайну. Его возможности начинаются с простых, но, в то же время, основных фишек многих редакторов: подсветка синтаксиса (поддерживаются коды ASP.NET, CSS, HTML, JavaScript, PHP и другие), сворачивание участков кода, мощный инструмент поиска и замены, автоматическое завершение кодов и многое другое.

Программа поддерживает шаблоны документов; имеет «мастеров» для добавления CSS, форм, таблиц, аудио- и видео объектов; быстрое редактирование тегов и лёгкий предпросмотр текущего документа, совместно с многими другими «вкусняшками».

6) Brackets
Brackets – интересный open-source редактор HTML, CSS и JavaScript кодов, созданный и поддерживаемый компанией Adobe. Программа обдуманно избегает «заваливания» вашего рабочего пространства плавающими тулбарами и большими иконками, за место этого давая возможность работать непосредственно над вашим кодом с множеством вспомогательных ярлыков.

Кликните на, скажем, HTML-тег, нажмите Ctrl+E и вы увидите панель быстрого редактирования со всеми связанным с ним правилами CSS; просто выберите то, что вам нужно и вы сможете прямо на месте это отредактировать.

Точно так же легко редактировать код JavaScript. Функция Live Preview означает, что нет необходимости постоянно обновлять страницу в браузере каждый раз, чтобы увидеть изменения – они обновляются мгновенно прямо в окне этой опции. Добавьте к Brackets постоянно растущий лист расширений и данный редактор станет отличным приобретением для опытных веб-разработчиков.

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

Если вы – более продвинутый пользователь, то в распоряжении KompoZer имеются дополнительные инструменты, которые могут оказаться полезными, включая редактор HTML. К сожалению, программа уже начинает «показывать свой возраст», так что более опытные веб-дизайнеры, скорее всего, обойдут его стороной.

8) OpenBEXI
OpenBEXI – довольно интересный HTML-редактор типа WYSIWYG, позволяющий вам создавать странички просто перетаскиванием так называемых «виджетов». Так создаётся всё, начиная с текста, ссылок и изображений, заканчивая формами, графиками и блок-схемами. Точно также просто настраивать полученный результат под свои нужды.

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

И хотя вся эта «сказка» звучит просто великолепно, не обошлось и без проблем. К примеру, очень просто добавлять объекты на страничку, но чтобы заставить их работать так, как вам надо, может потребоваться некоторое время и усердие.

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

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

Управление цветами гарантирует, что ваши изображения всегда будут выглядеть отменно. Поддержка слоёв поможет контролировать, какие части изображения подвергаются редактированию, а какие остаются нетронутыми. Функциональные возможности GIMP могут сравниться разве что с Photoshop. Важно отметить, что GIMP – настолько мощный инструмент, что часто используется профессионалами фото-индустрии, в том числе множеством глянцевых журналов.

Интерфейс программы, мягко говоря, не располагает к себе новичка, как и подобает мощнейшему графическому редактору. Поначалу интерфейс программы покажется, даже, «угрожающим». Однако когда вы освоитесь, то увидите, что программа умеет практически всё, что нужно профессиональному графическому редактору.

10) BlueGriffon
BlueGriffon – один из базовых WYSIWYG веб-редакторов, включающих в себя, также, много мощных возможностей. Вы можете использовать его для набора текста, вставки изображений, таблиц, аудио-файлов, видео и так далее. Но в программе присутствуют, также, такие инструменты, как: редактор SVG, инструменты создания форм, поддержка CSS, проверка доступности, DOM Explorer и многое другое.

Одна раздражающая особенность программы состоит в том, что некоторые функции требуют комменческих адд-онов, что означает, что клик по «не той» кнопочке перенесёт вас на сайт BlueGriffon с целью «узнать больше о».
Подробнее:http://www.overclockers.ru/softnews/52852/Mini-obzory_desyati_besplatnyh_instrumentov_dlya_veb-dizajna.html