Руководство пользователя Отмена

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

 

 

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

Интерактивный просмотр работает на основе механизма визуализации 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.

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

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

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

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

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

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

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

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

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

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

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

Примечание.

Инспектор свойств режима интерактивного просмотра недоступен на страницах с «резиновым» макетом.

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

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

  • HTML
  • CSS
  • Image
  • Table
  • Media — только аудио HTML5 и видео HTML5
  • Anchor
  • Form
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric
Примечание.

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

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

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

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

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

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

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

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

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

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

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

Примечание.

Результаты нажатия клавиши Enter после входа в режим редактирования зависят от положения указателя вставки перед нажатием клавиши Enter. Изменения похожи на действия, которые происходят при нажатии клавиши Enter во время редактирования текста в представлении «Дизайн».

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

Оранжевая рамка указывает на режим редактирования
Оранжевая рамка указывает на режим редактирования

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

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

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

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

Поддерживается

Не поддерживается

Все элементы HTML, которые могут содержать текст и семантические теги

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

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

 

Файлы HTML, полученные из шаблонов в интерактивном просмотре

Редактирование страниц jQuery.

Структурные теги, содержащие внутренние элементы; они представлены вместе в одном окне для редактирования

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

Статический текст на динамических страницах

 

Текст, содержащий сущности

 

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

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

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

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

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

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

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

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

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

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

  1. Переключитесь в режим интерактивного просмотра.

  2. На панели Вставка щелкните необходимый элемент и перетащите его в документ. Кроме этого, можно просто щелкнуть необходимый элемент на панели Вставка.

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

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

    Элемент будет вставлен на страницу и выделен.

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

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

Примечание.

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

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

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

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

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

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

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

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

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

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

  1. Откройте документ в окне «Документ» и выберите «Просмотр» > «Проверка».

    Примечание.

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

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

  3. (Дополнительно.) Нажмите клавишу со стрелкой влево на клавиатуре, чтобы выделить родительский элемент текущего выделенного элемента. Нажмите клавишу со стрелкой вправо, чтобы снова выделить дочерний элемент.

  4. (Дополнительно.) Щелкните элемент, чтобы зафиксировать выделение.

    Примечание.

    При щелчке элемента для фиксации выделения режим проверки отключается.

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

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

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

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

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

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

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

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

Выбирается текст, выделенный жирным шрифтом
Выбирается текст, выделенный жирным шрифтом.

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

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

Выделяется селектор, находящийся в фокусе
Рамка селектора в фокусе выделена янтарным цветом.

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

Примечание.

Для выбора родительского элемента используйте сочетание клавиш Ctrl+[ или Cmd+[, для выбора дочернего элемента — сочетание клавиш Ctrl+] или Cmd+].

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

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

Сочетания клавиш:

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H
  1. Перейдите в режим интерактивного просмотра и выберите «Вид» > «Параметры интерактивного просмотра».

  2. Выберите «Скрыть отображения интерактивного просмотра».

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

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

Получайте помощь быстрее и проще

Новый пользователь?