TopStyle

Визуальные редакторы


Содержание сайта
Редакторы CSS Обзор программ /
Список программ
Namo Code Editor



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

Назначение программы - создание таблиц стилей 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 обеспечивает авто закрытие признака (Вы печатаете <a>, и TopStyle автоматически закроет признак с </a>), это также позволяет Вам легко обертывать признак 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 Pro


TopStyle Lite

Ранее с сайта программы можно было загрузить бесплатную версию программы TopStyle под названием TopStyle Lite.

Окно TopStyle Lite показано ниже.



На рисунке - TopStyle Lite v 3.5 (1999 - 2006 гг). Интерфейс и справка на англ. языке. Вес 20,5 Мб. Бесплатная программа.

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

Скачать TopStyle Lite: Поиск в Интернете


Вернуться к обзору
Последнее обновление: март 2016 г.