Визуальный редактор веб-страниц, редактор CSS. TopStyle. Визуальный редактор веб-страниц, редактор CSS Что же он умеет

Многие уже давно им пользуются, однако часто лишь для редактирования CSS-файлов. Я же использую его в качестве своего основного HTML -редактора (речь идет о версии Pro) при изготовлении макетов страниц.

Инструмент

На win платформе существует очень много разных (профессиональных) HTML-редакторов, и выбрать «system of choice» бывает совсем не легко. Код я пишу вручную, поэтому WYSIWYG -редакторы мне никогда не были интересны. Исключение — только последний Dreamweaver, который я использую для создания сложных таблиц.

Я долгое время пользовался Homesite (в связке с TopStyle Lite), но он уже давно не развивается — его автор Nick Bradbury сейчас как раз занимается разработкой TopStyle. Поэтому, в свое время, я и решил попробовать его новое детище.

Что же он умеет

В первую очередь, редактор TopStyle конечно же для редактирования CSS. Однако, его старшая (платная) версия прекрасно подходит и для XHTML-верстки.

Редактор имеет настраиваемую подсветку, автодополнение тегов (даже автоматическую подстановку аттрибутов class и id из файла стилей), встроенные функции валидации (с использованием валидаторов W3C или скачиваемого CSE). В общем, почти все, что и остальные нормальные редакторы. Но есть у него и свои особенности, которые делают разработку сайтов при помощи CSS очень удобной.

Например, он умеет строить отчеты по использованным классам, то есть показывает какие классы где использовались, а какие классы вообще оказались «потерянными» (см. рисунок), т. е. не используются нигде на сайте.

TopStyle имеет отличный механизм предпросмотра: вы можете настроить его так, чтобы изменения в отдельном CSS-файле показывались на примере нужного вам файла HTML. То есть, редактируя один файл, просматривать изменения на другом! И все это на двух движках (Mozilla и IE), да еще с возможностью задания любого размера окна — хоть 6000×3000 пикселей.

Редактор имеет функции «причесывания» старых документов, в которых оформление вынесено в HTML-атрибуты, а также экспорта правил CSS для различных браузеров/версий CSS.

TopStyle строит очень удобное дерево селекторов, избавляющее вас от необходимости вручную расставлять элементы в алфавитном порядке. В этом дереве выводятся сначала все правила для чистых элементов, затем классы, а потом ID.

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

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

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

В общем, полезных функций много и без перегрузки, как у html-kit , к примеру. Нет панелей вставки тегов, но есть возможность многое настроить под себя. Я, например, назначил горячие клавиши на обертку текста в теги H1 ... H4 по нажатию Ctrl-1 ... Ctrl-4 . И так можно задать любые комбинации.

Заключение

В общем, все кто еще не пользуется TopStyle Pro — идите и качайте его с сайта производителя .

Программа недешевая — продается за 80 долларов, но она того стоит. Верстка по стандартам станет намного приятнее. В конце концов, попросите своего начальника купить вам нормальный инструмент!

На рисунке - TopStyle Pro v 3.5 (1999 - 2006 гг). Интерфейс и справка на англ. языке (имеется русификатор). Цена 79,95 долл.
Последняя версия программы - TopStyle v 5. Вес 71 Мб.

Назначение программы - создание таблиц стилей CSS для веб-страниц.

Некоторые функции программы :

Поддержка CSS3 и HTML5. Вы получите доступ ко всем последним признакам и свойствам тэгов.

Предварительным просмотр HTML и CSS, в то время, как Вы пишете это

TopStyle поддерживает браузеры IE, Chromium, Firefox и Safari.

Создание ссылок в TopStyle"s делает проще навигацию между документами. Щелкните признаком класса HTML, чтобы провести к определению того класса во внешнем листе стиля, или щелкните признаком якоря, чтобы открыть связанный файл для того, чтобы редактировать.

Умная копия (Smart Copy) и вставка. Все, что Вы должны сделать - нажать сочетание клавиш Ctrl+C (или Ctrl+X) и TopStyle выяснит, что выбрать и скопировать.Умная копия и вставка заменит текущее слово.

Проверка правильности W3C + CSE + HTML5, чтобы документ правильно отражался в различных браузерах

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

Группа селекторов CSS (CSS Selector Panel) показывает все селекторы в Вашем документе. Щелчок по любому селектору в списке переносит к нужному месту в длинном документе.
Группа Структуры HTML

Группа структуры HTML появляется ниже редактора кода и показывает иерархию признаков HTML. Отбор родительского признака легок - когда Вы нажмете на одну из кнопок в Группе структуры HTML, TopStyle 5 выберет соответствующий тэг HTML (и его содержание) в редакторе.

Группы CSS
Проблемой может быть поиск нужного места в огромных, неорганизованных листах стиля. Одна из самых сильных особенностей TopStyle"s - способность сгруппировать CSS selectors в структуру папок.
Выберите некоторые правило (а) CSS и затем нажмите: CSS> New CSS Group - Новая Группа CSS:
Введите имя для Вашей группы CSS, и TopStyle вставит следующее в Ваш документ:

/* @group GroupName1 */

/* @end */
Если Вы не используете CSSEdit или TopStyle, эти комментарии группы - только безопасные небольшие комментарии. В TopStyle однако, Вы можете сворачивать Ваши группы CSS в редакторе, и рассматривать их в основанном на папке расположении.

Рабочее пространство:

TopStyle 5 имеет меню, которое отличается от меню предыдущих версий TopStyle.

Панель инструментов HTML - TopStyle идет с конфигурируемой пользователем панелью инструментов HTML.
Рабочие пространства (Workspaces) помнит Ваши ранее открытые документы, и затем восстанавливает те при запуске. Когда Вы переключаетесь на другое рабочее пространство, документы относительно того рабочего пространства открыты, и если Вы переключаетесь назад на прежнее рабочее пространство, Ваши ранее открытые документы восстановлены. Это чрезвычайно полезно, воздействуя на несколько проектов в то же самое время.

Вы можете создать новое рабочее пространство (Файл> Новое Рабочее пространство) или открыть другое рабочее пространство (Файл> Открыть Рабочее пространство). Сохранение нового рабочего пространства точно так же как сохраняет нормальный документ - Вы просто выбираете название для рабочего пространства.

TopStyle 5 имеет панель быстрого доступа (Quick Access Panel).

TopStyle проверяет ошибки правописания, когда Вы печатаете, и отмечает их волнистыми красными линиями.

Поддержка Unicode. Когда Вы сохраняете Ваш (X) документ HTML, Вы можете произвольно выбрать кодирование для своего документа (UTF-8, UTF-16, ANSI, и т.д).

TopStyle 5 создает резервную копию каждый раз, когда Вы обновляете и сохраняете документ. Благодаря новому окну History Вы можете открыть резервную копию, сравнить различия или восстановить к резервной копии (восстановите предыдущий предварительный просмотр).

Карты изображения - изображение, которое разделено на области, или "горячие точки". Когда пользователь щелкает горячей точкой, происходит действие (например, переход к другой Веб-странице). TopStyle 5 идет с редактором карты изображения.

Prefixr
Не каждый web-браузер полностью поддерживает CSS3, и сам CSS3 не разработан окончательно. Именно поэтому некоторые web-браузеры требуют так называемых предустановленных свойств. Prefixr гарантируют, что браузеры будут поддерживать экспериментальные свойства CSS.
Но в реальности веб-разработчики должны использовать на послушных стандартам свойствах CSS только.
Prefixr будет фильтровать Ваши (послушные стандартами) свойства CSS3 и динамически обновлять их, добавляя свойства для совместимости браузера.

Генератор Градиента CSS.
CSS3 и HTML5 имеют особенность определить градиенты, используя чистый CSS3, не имея необходимость создавать любые изображения. Градиенты могут использоваться для создания фона веб-страниц. Возможно создание линейного градиента (горизонтального, вертикального или по диагонали) и цвета, которые составляют градиент.

Генератор текстовой тени (Text Shadow Generator).
У CSS3 есть свойство создания текстовой тени. Выбирается цвет тени и отступ тени (по типу 2px 2px).

Улучшенные варианты для Файлов предварительного просмотра (CSS-только), начинаясь с TopStyle 5:
переместите последний раз используемый файл (ы) предварительного просмотра в вершину списка
включайте документы HTML, которые находятся в том же самом справочнике (как Ваш документ CSS)
включайте документы HTML, которые открыты (в других счетах)

HTML5
TopStyle 5 включает новое определение HTML5.
Провека качества HTML5 (HTML5 Validator)
Группа структуры HTML (HTML Structure Panel) появляется ниже кодового редактора, и показывает иерархию тэгов.
Когда Вы нажмете на одну из кнопок в Группе структуры HTML, TopStyle 5 выберет соответствующий тэг HTML (и его содержание) в кодовом редакторе:

TopStyle обеспечивает авто закрытие признака (Вы печатаете , и TopStyle автоматически закроет признак с ), это также позволяет Вам легко обертывать признак HTML:

Используйте Google Chrome как внутренний браузер
TopStyle всегда поддерживала и Internet Explorer и Mozilla Gecko (Firefox). Теперь TopStyle 5 вводит Google Chrome как внутренний браузер. Другими словами: предварительный просмотр будет возможен, даже если у Вас не устанавлен Хрома Google на Вашем компьютере.

XRAY - помогает Вам визуализировать расположение Вашей страницы (показывает положение, края, дополнение, и измерения элемента). В дополнение к этим деталям группа XRAY также показывает селекторы CSS, которые относятся к элементу. Когда Вы нажмете на такой селектор CSS в группе XRAY, TopStyle автоматически проведет к этому правилу CSS в группе селекторов (даже если это правило CSS будет в некотором другом документе!)

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

TopStyle 5 включает (и объединяется) с CSS Tidy, а также с анализатором и оптимизатором (optimiser) CSS. Благодаря оптимизации CSS у Вас есть более быстрые страницы. Вы можете также использовать CSS Tidy, чтобы отформатировать Ваши листы стиля для совместимости браузера.

TopStyle 5 показывет изображения совместимости браузера для каждого свойства.

Google обеспечивает много высококачественных веб-шрифтов (Google Web Fonts), которые работают в большинстве браузеров. TopStyle 5 теперь поддерживает автоматическую вставку этих шрифтов в Вашу страницу (ы).

Улучшенное редактирование цвета CSS - TopStyle 5 показывает небольшой цветной образчик цвета ниже каждого свойства CSS. Когда Вы нажимаете на этот цветной образчик, цветной диалог появляется. Отсюда, Вы можете легко изменить цветную ценность.
При тройном щелчке на цветной ценности в редакторе, цветной диалог появляется. Отсюда, Вы можете легко изменить цвет под курсором мыши.

Цветной контрастный Анализатор (Color Contrast Analyser) позволяет Вам определять цвета переднего плана и цвета фона и затем определять, обеспечивают ли они действительно контраст:
Различие яркости (должно быть больше чем 125)
Цветное различие (должно быть больше чем 500)
Контрастное отношение (должен быть по крайней мере 5:1)

В дополнение к ПРОГРАММЕ ПЕРЕДАЧИ ФАЙЛОВ (ранее введенный в TopStyle 4), TopStyle 5 теперь включает поддержку SFTP.
История Файла - File History

В TopStyle 5 добавлена помощь для элементов HTML! Нажмите клавишу F1, в то время как знак вставки находится в признаке HTML, и детализированная помощь на элементе HTML появится.

Улучшенный поиск и замена (Find/Replace) в Файлах
Вы можете вести поиск и замену на удаленном сайте (сайте на сервере в сети) в той же самой манере, как и в местной папке.
Начинаясь с TopStyle 5, мы добавили следующие новые варианты поиска и замены в Файлах:
в папке текущего документа
в папке текущего документа и его подпапках

Улучшенная автозамена (Auto-Replace)
многострочные пункты - теперь Вы можете заменить свой текст многократными строками
использование переменных
поддержка типа документа (CSS или HTML); теперь у Вас могут быть отдельные пункты для CSS и HTML

TopStyle - редактор каскадных таблиц стилей (CSS), написанный Nick Bradbury, создателем HomeSite. TopStyle содержит все, что вам нужно для создания таблиц стилей, корректных по отношению ко всем броузерам. Легко портируется в ваш HTML-редактор и используется по умолчанию на уровне системы для всех файлов с расширением.css. Незаменим для создания и поддержки больших проектов. Так, например, функция Link Wizard позволяет связать все страницы проекта с файлом стилей, который сама же программа и создаст. Вам просто необходимо указать место, где хранятся все страницы сайта. Можно отметить еще две другие полезные функции пакета - Style Checker и Orphan Styles. Первая позволяет проверить любой css-файл на наличие ошибок, вторая просматривает существующие страницы сайта на предмет "затерявшихся" стилей. В случае если вы запутались в ваших стилях и на html-страницах происходит многослойное наложение различных шрифтов и цветовых решений для линков, TopStyle может удалить все внутристраничные шрифтовые теги и заменить их единым каскадным стилем. И это только малая часть того, что умеет программа TopStyle.

Выпускается в двух версиях:
TopStyle Lite - бесплатная, упрощенная версия
TopStyle Pro - полная () версия с множеством дополнительных функций.

	Скачать TopStyle Pro платная (topstyle.exe) с www.bradsoft.com
	Размер файла: 3.7 МБ Время загрузки: -	| поиск зеркала
	Скачать TopStyle Lite бесплатная (ts3lite.exe) с www.bradsoft.com
	Размер файла: 1.8 МБ Время загрузки: -	| поиск зеркала

Ваш комментарий и обсуждение программы TopStyle Pro

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

Но для чего нам нужны редакторы CSS? Каждое введение новой технологии имеет две стороны медали, в CSS это отобразилось на поддержке некоторых свойств CSS в браузерах IE. И поэтому веб-дизайнер должен найти хак, чтобы исправить отображение в браузерах IE.

Редакторы CSS помогают писать код быстрее и избегать множества ошибок.

1. STYLIZER

STYLIZER — это редактор CSS, который позволяет редактировать CSS и видеть изменения в реальном времени. Вы можете просто ввести адрес веб-страницы и слева увидите веб-страницу, а справа — CSS код, который можно изменять и изменения будут видны слева. Можно изменять как вручную, прописывая свойства, так и с помощью кнопок WYSIWYG редактора.

Изменить цвет текста можно также динамически. При изменении цвета, появляется спектр цвета, похожий на тот, который есть в Adobe Photoshop.

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

2. TopStyle

Редактор TopStyle показывает стили поддерживаемые браузерами Firefox, IE, Safari и даже iOS 2.0. Данная возможность может быть применена при кросс-платформенной разработке дизайна.

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

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

3. Style Master

Как заявляет разработчик, Style Master это редактор, который можно использовать при любом уровне знаний CSS. В программе можно использовать не только WYSIWYG редактор, но и писать код вручную(очень странно было бы если это было не так:)), с подсветкой каждого свойства, для более опытных разработчиков.

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

4. Rapid CSS редактор

Редактор Rapid CSS является удобный, легконастраиваемой программой для редактирования CSS файлов. Он имеет текстовый редактор с подсветкой синтаксиса, автозавершение кода и другие.

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

5. CSSEdit 3

Сразу скажу о том, что данный редактор поддерживает только MAC OS. Редактор имеет красивый дизайн, но он не предназначен для начинающих пользователей. Также данных редактор позволяет видеть изменения динамически, в реальном времени.

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

6. EngInSite CSS редактор

Если вы серьезный веб-дизайнер, который заботится о правильном написании CSS, правильном размещении свойств, но данный редактор вам понравится.

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

Также в редакторе присутствует функция автозавершения кода.

7. Stylish Maker

Стандартный CSS редактор, который позволяет установить font, color, margin, border и другие свойства.