"Стильные" редакторы - обзор программ для создания CSS

Статья «CSS для начинающих» (опубликованная в № 10, 11’2000) вызвала огромное количество откликов читателей. Меня буквально засыпали письмами с вопросами – по существу и на отвлеченные темы. Поначалу вопросы типа «А в каком редакторе лучше создавать CSS?» вызывали у меня некоторое удивление: ведь внешняя таблица стилей – это обычный текстовый файл с расширением .css, который можно создать в любом текстовом редакторе, даже в «Блокноте»! К счастью, один из читателей пояснил, что специальный редактор нужен ему для более близкого знакомства с возможными свойствами CSS (безусловно, книжки – хорошо, а на практике постигать все же лучше!). Но окончательно решение написать эту статью оформилось, когда мне пришло письмо с вопросом: «У меня ничего не работает. Что я сделал не так?» К письму прилагался файл с расширением .css, начиненный обрывками жуткой тарабарщины. При ближайшем рассмотрении выяснилось, что автор письма аккуратно создал таблицу стилей в Word’e, сохранил полученный результат в формате «документ», после чего изменил расширение на .css. Логика его была неоспоримой: сказали, что годится любой текстовый редактор, вот он и воспользовался своим любимым! Вопрос оказался куда более животрепещущим, чем казалось вначале. Итак, вашему вниманию предлагается небольшой обзор известных мне редакторов каскадных таблиц стилей.

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

TopStyle

Безусловно, наилучший редактор каскадных таблиц стилей – программа TopStyle Pro от Bradsoft (http://www.bradsoft.com/). Те, кто работал в HomeSite 4.5, наверняка уже ознакомились с ее lite-вариантом. Цена полной профессиональной версии программы – $49,95, upgrade с предыдущей версии обойдется вам в $19,95. Последний релиз – 2.0, пробная версия отсутствует. Зато вы можете скачать пробную версию TopStyle 1.52 и абсолютно бесплатно – программу TopStyle Lite 2.0, которая почти не уступает профессиональной. Я, например, настолько привыкла к облегченному варианту 1.5, что переход на TopStyle Pro 2.0 прошел далеко не безболезненно, и до сих пор иногда возникает желание установить старую версию обратно.

Давайте рассмотрим несколько подробнее, что же представляет собой этот редактор.

При первом запуске программы появляется мастер настройки интерфейса (рис. 1). Даже если вы не любитель мастеров, в первый раз лучше пройти всю пошаговую процедуру настройки до конца. Если при этом вы снимете флажок «Always show this welcome screen at startup» («Всегда показывать это окно при запуске программы») на первом шаге, то программа запомнит ваши настройки и в следующий раз применит их, не обременяя запуском мастера. Справедливости ради стоит заметить, что все настройки легко меняются непосредственно в самой программе.

Мастер состоит из семи шагов. На первом этапе вам предлагается ознакомиться с «обучалкой», если вы новичок в этой программе. При этом доступна ссылка «skip welcome» («пропустить введение») в правом верхнем углу окна. Если нажать на нее, работа мастера будет прекращена, и вы сразу окажетесь в рабочем окне редактора. Если же проследовать за мастером дальше, то вам будет предложено выбрать из выпадающего списка стилевую спецификацию, которая определит в дальнейшем, какие свойства CSS допустимы в вашей работе, а какие – не поддерживаются в настоящий момент. Список довольно велик, помимо официальных спецификаций CSS 1.0 и 2.0 он включает в себя варианты написания стилей для разных версий всех популярных браузеров – вместе и по отдельности, а также такие экзотические вещи, как стили для мобильных телефонов и WebTV. Однако помните о том, что чем большей совместимости вы добьетесь, тем ближе к минимальным окажутся ваши возможности.

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

Затем мастер предложит вам на выбор три варианта интерфейса: обычный, компактный или минимальный. Естественно, наиболее удобен для изучения программы обычный интерфейс.

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

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

И, наконец, вы можете выбрать файл, с которым вам предстоит работать: будет ли это новая таблица стилей — или вы откроете для редактирования одну из ранее созданных. На этом работа мастера завершена, и перед вами открывается непосредственно окно редактора (рис. 2).

Обратите внимание на то, что как только вы начнете писать текст таблицы стилей, вам сразу же будет предложена масса всевозможных подсказок по свойствам CSS и их значениям – именно поэтому TopStyle, бесспорно, может считаться лучшим редактором CSS. Ведь это не только редактор с множеством мастеров, удобным поиском и другими встроенными средствами – это фактически учебник по каскадным таблицам стилей, снабженный превосходной справкой! Воспользовавшись этой программой, вы очень быстро освоите синтаксис таблиц стилей, а окно встроенного просмотра приучит вас быстро «на глазок» определять нужный кегль шрифта и размеры блоковых элементов.

На рис. 3 вы можете увидеть, как работает окно предпросмотра.

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

Macromedia Dreamweaver

Те, кто пользуется для создания страничек популярным визуальным редактором Macromedia Dreamweaver, с успехом могут применять его и для создания CSS. Особенно удобно создавать в нем внедренные таблицы стилей – Dreamweaver сам создаст пару тегов <style>...</style> и ее содержимое в соответствии с вашими желаниями.

Чтобы создавать и редактировать стили в Dreamweaver’e, нужно вызвать окно «CSS styles» через меню Window. После двойного щелчка по элементу (none) появится следующее диалоговое окошко, в котором с помощью кнопки «New» создайте новое правило CSS – для нужного вам тега или селектора. После этого откроется большое диалоговое окно, в котором вы сможете назначить данному тегу или селектору требуемые свойства CSS (рис. 4).

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

Any News Visual CSS

На своем любимом сайте бесплатных и условно-бесплатных программ я наткнулась на описание программы Any News Visual CSS (www.listsoft.ru/programs/pr2414.htm). Программа условно-бесплатная, за регистрацию автор просит $15. Насколько я поняла из описания, интерфейс у этой программы русский. К сожалению, программа отказалась работать без регистрации, а выкладывать 15 долларов за кота в мешке мне почему-то совсем не захотелось (при том, что описанная выше TopStyle стоит $50, а облегченная версия вообще бесплатна!). Но ссылку на программу даю, чтобы потом меня не обвиняли в отсутствии объективности.

CSS creator

Эту программу вы можете скачать практически на всех русских софт-серверах. Я нашла ее по адресу freeware.ru/program.pl?prog_id=3012. Безусловно, CSS creator’у далеко до TopStyle или Dreamweaver’а, но она обладает двумя неоспоримыми достоинствами: во-первых, программа абсолютно бесплатная, а во-вторых, русскоязычная.

При запуске программы сразу открывается рабочее окно, в котором в одну кучу свален небогатый набор свойств CSS, поддерживаемых ею (рис. 5).

Программа подойдет для оформления несложных страниц, но при этом следует учесть, что многие из приведенных свойств либо вовсе не поддерживаются Netscape Navigator’ом, либо имеют «ограниченную поддержку» (см. сноску к описанию TopStyle). У некоторых свойств не все значения доступны (например, font-weight). Очень мало тегов HTML, для которых можно задать стили. Палитра цветов отсутствует, так что название цвета или его шестнадцатеричный код придется вводить по памяти (вы знаете наизусть таблицу безопасных цветов, не говоря уже о шестнадцатимиллионной палитре?). С цветом связана еще одна опасность: как вы можете видеть, в окне программы по умолчанию приведены только коды цветов, без предшествующего знака #, который в синтаксисе CSS обязателен. При этом программа не вставляет этот знак в код автоматически, поэтому вы должны будете вставить его сами.

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

Collie CSS Wizard

Еще один простой бесплатный русскоязычный мастер CSS, который можно скачать по адресу collie.agava.ru/Programms.html вместе с простейшим текстовым редактором HTML (343 Kбайт) или отдельно (135 Kбайт). Возможности этой программы еще более ограничены, автоматически можно задать только цвет и тип шрифта, а также цвет фона для очень малого количества тегов HTML (рис. 6). Правда, как и в предыдущей программе, можно создавать классы. Если вы решите использовать этот редактор, он поможет вам также автоматически добавлять открывающие и закрывающие символы комментариев, фигурные скобки и тому подобные мелочи (хотя я не вижу разницы между двумя нажатиями клавиш на клавиатуре и одним нажатием кнопки мыши – кроме той, что мышью еще надо попасть по нужной кнопке... но это уж кому как удобнее).

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

SNK Visual HTML Workshop 3

По адресу http://www.snkey.net/ предлагается скачать набор разработчика сайтов под громким названием «SNK Visual HTML Workshop 3». Регистрация этого набора обойдется вам в $6. Автор утверждает, что «SNK Visual HTML Workshop 3 – мощный комплекс для создания сайтов, поддерживающий самые передовые технологии – такие как XHTML и CSS2». Если у вас есть книга под названием «Настольная книга веб-мастера» с компакт-диском, то вы наверняка ознакомились с пробной версией этого «комплекса». Это, конечно, дело вкуса, но меня не впечатлил ни Workshop, ни книга – я лишь пожалела о напрасно потраченных деньгах, поэтому платить 6 долларов за новую версию у меня желания не возникло. Но, может быть, любителям визуальных редакторов понравится эта недорогая отечественная разработка – с ее подробным описанием вы можете ознакомиться на сайте автора программы.

Вместо заключения

Я постаралась ознакомить вас со всеми известными мне редакторами CSS. Безусловно, лучшим из них является TopStyle, хотя кто-то, возможно, выберет для себя другой редактор. Я искренне надеюсь, что данный обзор поможет вам не писать больше таблиц стилей с помощью MS Word или хотя бы сохранять их в текстовом формате. Желаю удачи!

Людмила Бандурина,
blv@elsite.ru