Редактор веб-страниц

Редактор веб-страниц

Редактор

В редакторе производится наибольшая часть работы по редактированию. С помощью панели инструментов можно установить для текущего документа просмотр одновременно в виде WYSIWYG и в виде исходного текста с разделением по горизонтали или по вертикали. Также можно выбрать просмотр либо только в виде WYSIWYG, либо только в виде исходного текста (на рисунке показано представление одновременно в виде WYSIWYG и исходного текста с разделением). При выборе элемента оба представления синхронизируются.

Палитра

Палитра

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

Вкладки Проектирование/Предварительный просмотр

Предварительный просмотр

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

Панель инструментов

Панель инструментов

На панели инструментов доступны следующие функции:

Панель Свойства

Свойства

Панель Свойства позволяет просматривать и изменять атрибуты выделенного элемента. Вкладка "Быстрое редактирование" обеспечивает доступ к атрибутам, которые редактируются часто, а вкладка "Атрибуты" обеспечивает доступ ко всем атрибутам.

Навигация по элементам

Навигация по элементам

Выпадающий список навигации по элементам позволяет выбрать родительские элементы выбранного элемента для их редактирования на панели Свойства.

Панель Схема

Контекстное меню Схема

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

Строка состояния

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


Работа с элементами в представлении WYSIWYG

Просмотр элементов

Просмотр элементов

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

Выбор элементов

Выбор элементов

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

Изменение элементов с помощью контекстного меню

Контекстное меню

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

Просмотр и выделение неотображаемых дочерних компонентов

Просмотр дочерних компонентов

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

Выделение дочерних компонентов

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