Редактирование в режиме интерактивного просмотра

Интерактивный просмотр работает на основе механизма визуализации Chromium, благодаря чему ваше содержимое будет выглядеть в Dreamweaver точно так же, как оно выглядит в ваших любимых веб-браузерах. Во время работы, чтобы быстро просмотреть страницу, можно переключиться на интерактивный просмотр. А для экономии времени при переключении между различными режимами отображения (режимами отображения кода и конструктора) можно редактировать элементы HTML непосредственно в режиме интерактивного просмотра.

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

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

• Панель DOM («Окно» > «DOM») — отображает HTML-структуру документа и позволяет копировать и вставлять, дублировать, удалять элементы и изменять их порядок в представлении. Дополнительные сведения см. в разделе Панель DOM.
• Отображение элемента: отображается над выбранным элементом HTML в интерактивном просмотре. Отображение элемента позволяет связать элементы HTML с классами и идентификаторами. Дополнительные сведения см. в разделе Связывание элементов HTML с классами и идентификаторами.
• Быстрый инспектор свойств: отображается при щелчке значка с тремя полосками в отображении элемента или выделенной области текста. Быстрый инспектор свойств позволяет редактировать атрибуты изображений и форматировать текст в интерактивном просмотре. Дополнительные сведения см. в разделе Быстрый инспектор свойств.
• Инспектор свойств интерактивного просмотра: отображается под окном Документы и позволяет редактировать различные свойства HTML и CSS в интерактивном просмотре. Дополнительные сведения см. в разделе Инспектор свойств интерактивного просмотра.
• Панель «Вставка» (Окно > Вставка): позволяет перетаскивать элементы из панели непосредственно в окно интерактивного просмотра. Дополнительные сведения см. в разделе Вставка элементов непосредственно в режиме интерактивного просмотра.

Советы

• Если представление «Интерактивный просмотр» становится пустым при редактировании страницы, выключите и повторно включите это представление.
• Если внесенные изменения не отображаются на странице, нажмите кнопку обновления в представлении «Интерактивный просмотр».

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

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

Таблицы можно форматировать также с помощью функций отображения элемента. Дополнительную информацию см. по ссылке.

Связывание элементов HTML с классами и идентификаторами

Щелкните нужный элемент в режиме интерактивного просмотра. Появляется Отображение элемента и показывает связанный в данный момент класс и идентификатор.

В интерактивном просмотре можно также щелкнуть элемент HTML на панели DOM, чтобы открыть для него представление Отображение элемента.

• Чтобы удалить связь элемента HTML из класса или идентификатора, щелкните «x» рядом с классом или идентификатором.
• Чтобы изменить класс или идентификатор, связанные с элементом HTML, щелкните в окне. Отобразится список доступных классов и идентификаторов. Щелкните нужное событие.
• Чтобы добавить класс или идентификатор и применить его к элементу, щелкните «+» и введите название. Чтобы сохранить изменения, щелкните «+» или нажмите клавишу Enter.

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

Быстрый инспектор свойств

Быстрый инспектор свойств для изображений

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

Чтобы отобразить или скрыть быстрый инспектор свойств, нажмите сочетание клавиш CTRL+ALT+H (Win)/CMD+CTRL+H (Mac).

Быстрый инспектор свойств также содержит параметры для настройки изображений в документах Bootstrap.

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

Быстрый инспектор свойств для текста

Быстрый инспектор свойств для текста в режиме интерактивного просмотра позволяет быстро отформатировать текст, а также создать для него отступы и гиперссылки. Быстрый инспектор свойств для текста отображается при щелчке по значку с тремя полосками для следующих текстовых элементов: h1–h6, pre и p.

• Параметр форматирования позволяет быстро заменить текущий тег элемента на один из следующих: h1-h6, p и pre. 
• Параметр «Ссылка» позволяет вставить гиперссылку в текстовый элемент. 
• Значки для полужирного и курсивного начертания позволяют добавить теги <strong> и <em> в текстовый элемент.
• Значки отступа позволяют добавлять или удалять отступы для текста. При этом тег <blockquote> добавляется в код или удаляется из него, соответственно.

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

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

Инспектор свойств интерактивного просмотра

Инспектор свойств интерактивного просмотра представляет собой традиционный инспектор свойств, который находится под окном Документ.

Инспектор свойств интерактивного просмотра позволяет проверить и отредактировать наиболее распространенные свойства для выбранного элемента страницы, такого как текст или вставленный объект. Содержимое инспектора свойств интерактивного просмотра меняется в зависимости от выбранного элемента.

Чтобы вызвать справку по определенному инспектору свойств, нажмите кнопку «Справка» в правом верхнем углу окна Инспектор свойств или выберите в меню Параметры инспектора свойств пункт Справка. 

Следующие элементы можно редактировать с помощью этого инспектора свойств интерактивного просмотра:

Редактирование атрибутов HTML

Можно быстро добавлять, редактировать или удалять атрибуты HTML изображений непосредственно в режиме интерактивного просмотра с помощью быстрого инспектора свойств.

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

Для редактирования атрибутов щелкните значок с тремя полосками в быстром инспекторе свойств. Можно изменить исходный файл изображения вместе с другими атрибутами, такими как заголовок и альтернативный текст (title и alt), и эти изменения отражаются незамедлительно. Аналогичным образом можно изменить атрибуты ширины и высоты (width и height) изображения в режиме интерактивного просмотра.

Чтобы сохранить внесенные изменения, выполните одно из следующих действий.

• Щелкните в любом месте за пределами инспектора свойств.
• Нажмите клавишу Enter.
• Нажмите клавишу Tab для редактирования другого атрибута в инспекторе свойств.
• Сохраните файл.
  

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

Редактирование текста непосредственно в режиме интерактивного просмотра

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

Оранжевая рамка вокруг текстового элемента указывает на то, что режим изменен на режим редактирования. 

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

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

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

В следующей таблице перечислены поддерживаемые и неподдерживаемые сценарии во время редактирования текста в режиме интерактивного просмотра.

Форматирование текста

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

Вставка элементов непосредственно в представлении «Интерактивный просмотр»

С помощью панели Вставка можно непосредственно перетаскивать элементы в нужные места документа в интерактивном просмотре. Визуальные подсказки в режиме интерактивного просмотра, например значки «Интерактивные направляющие» и DOM, помогают расположить перетаскиваемый элемент относительно элемента, на который наведен указатель.

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

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

• Слева и справа. Появляются при наведении курсора на фрагмент со встроенными тегами (например, <a>, <span>) или тегами, для которых установлено свойство плавающего объекта.

При задержке указателя мыши на некоторое время перед окончательным перемещением элемента появится значок DOM (</>). Если навести курсор на этот значок, то откроется панель DOM, после чего можно будет переместить элемент внутрь структуры DOM документа.

Чтобы вставить объекты непосредственно в интерактивном просмотре, выполните следующие действия.

Выделение области

Выделение области позволяет легко выбрать блок текста, щелкнув и перетащив его внутри тега в интерактивном представлении. Если щелкнуть и перетащить блок текста в версиях Dreamweaver до 2014.1, то элемент перемещается целиком. 

Выделение и перетаскивание элементов

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

Щелкнув имя тега в интерактивном представлении, можно выбрать все содержимое этого тега в представлении кода.

Проверка кода в режиме «Интерактивный просмотр»

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

Помимо визуального представления модели фрагмента в режиме проверки также можно использовать панель «Конструктор CSS» при наведении указателя мыши на элементы в окне «Интерактивный просмотр».

Если панель «Конструктор CSS» открыта в режиме «Текущий», то при наведении указателя мыши на элемент страницы содержимое панели «Конструктор CSS» автоматически обновляется, показывая правила и свойства для этого элемента.

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

Использование клавиатуры в интерактивном просмотре

Можно перемещаться по элементам или селекторам на странице в режиме отображения элемента, используя клавиатуру для ускорения процесса редактирования. 

Перемещение по элементам на странице

Клавиши со стрелками вверх и вниз помогают переместиться по элементам на странице в режиме интерактивного просмотра. Перемещение основывается на DOM-структуре документа.

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

Когда вы открываете элемент с помощью стрелок вверх или вниз на клавиатуре, появляется представление «Отображение элемента» для этого элемента. Затем можно перейти к селекторам в режиме отображения элемента или нажать клавишу Enter для редактирования текста непосредственно в интерактивном просмотре.

Перемещение по селекторам

Нажмите клавишу Tab для перемещения по селекторам в режиме отображения элемента. Рамка селектора в фокусе отображена янтарным цветом, как показано ниже. 

При нажатии клавиши Tab после последнего использованного селектора появляется текстовое поле добавления селектора. 

Отключение редактирования в режиме интерактивного просмотра

Неподдерживаемые сценарии

• Файлы шаблонов Dreaweaver нельзя редактировать в режиме интерактивного просмотра.
• Теги со статическим и динамическим содержимым. Редактирование селекторов для этих тегов возможно, однако редактировать текст в режиме интерактивного просмотра нельзя. Если дважды щелкнуть эти элементы в режиме интерактивного просмотра, то вокруг них появится серая рамка, которая означает, что редактирование текста не поддерживается.
• Теги с псевдоселекторами. При попытке изменения этих элементов в режиме интерактивного просмотра могут возникнуть непредвиденные результаты.
• Сетки CSS поддерживаются в интерактивном просмотре только в Dreamweaver 2019 и более поздних версиях.