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

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

  1. Руководство пользователя Dreamweaver
  2. Введение
    1. Основы гибкого веб-дизайна
    2. Новые возможности Dreamweaver
    3. Веб-разработка с помощью Dreamweaver: обзор
    4. Dreamweaver / распространенные вопросы
    5. Сочетания клавиш
    6. Системные требования Dreamweaver
    7. Обзор новых возможностей
  3. Dreamweaver и Creative Cloud
    1. Синхронизация настроек Dreamweaver с Creative Cloud
    2. Библиотеки Creative Cloud Libraries в Dreamweaver
    3. Использование файлов Photoshop в Dreamweaver
    4. Работа с Adobe Animate и Dreamweaver
    5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
  4. Рабочие среды и представления Dreamweaver
    1. Рабочая среда Dreamweaver
    2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
    3. Поиск файлов по названию или содержимому | Mac OS
  5. Настройка сайтов
    1. О сайтах Dreamweaver
    2. Настройка локальной версии сайта
    3. Подключение к серверу публикации
    4. Настройка тестового сервера
    5. Импорт и экспорт параметров сайта Dreamweaver
    6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
    7. Специальные возможности в Dreamweaver
    8. Дополнительные настройки
    9. Настройка установок сайта для передачи файлов
    10. Задание параметров прокси-сервера в Dreamweaver
    11. Синхронизация настроек Dreamweaver с Creative Cloud
    12. Использование Git в Dreamweaver
  6. Управление файлами
    1. Создание и открытие файлов
    2. Управление файлами и папками
    3. Получение файлов с сервера и размещение их на нем
    4. Возврат и извлечение файлов
    5. Синхронизация файлов
    6. Сравнение файлов
    7. Скрытие файлов и папок на сайте Dreamweaver
    8. Включение заметок разработчика для сайтов Dreamweaver
    9. Предотвращение использования уязвимости Gatekeeper
  7. Макет и оформление
    1. Использование средств визуализации для создания макета
    2. Об использовании CSS для создания макета страницы
    3. Создание динамичных веб-сайтов с помощью Bootstrap
    4. Создание и использование медиазапросов в Dreamweaver
    5. Представление содержимого в таблицах
    6. Цвета
    7. Гибкий дизайн с использованием «резиновых» макетов
    8. Extract в Dreamweaver
  8. CSS
    1. Общие сведения о каскадных таблицах стилей
    2. Создание макетов страниц с помощью конструктора CSS
    3. Использование препроцессоров CSS в Dreamweaver
    4. Установка настроек стиля CSS в Dreamweaver
    5. Перемещение правил CSS в Dreamweaver
    6. Преобразование встроенного CSS в правило CSS в Dreamweaver
    7. Работа с тегами div
    8. Применение градиентов к фону
    9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
    10. Форматирование кода
  9. Содержимое страницы и ресурсы
    1. Задание свойств страницы
    2. Задание свойств заголовка CSS и свойств ссылки CSS
    3. Работа с текстом
    4. Поиск и замена текста, тегов и атрибутов
    5. Панель DOM
    6. Редактирование в режиме интерактивного просмотра
    7. Кодировка документов в Dreamweaver
    8. Выбор и просмотр элементов в окне документа
    9. Задание свойств текста в инспекторе свойств
    10. Проверка орфографии на веб-странице
    11. Использование горизонтальных линеек в Dreamweaver
    12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
    13. Работа с ресурсами
    14. Вставка и обновление даты в Dreamweaver
    15. Создание и управление избранными ресурсами в Dreamweaver
    16. Вставка и редактирование изображений в Dreamweaver
    17. Добавление мультимедийных объектов
    18. Добавление видео Dreamweaver
    19. Добавление видео HTML5
    20. Вставка файлов SWF
    21. Добавление звуковых эффектов
    22. Добавление аудио HTML5 в Dreamweaver
    23. Работа с элементами библиотеки
    24. Использование текста на арабском языке и иврите в Dreamweaver
  10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
  11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
  12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
  13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
  14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
  15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
  16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
  17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
  18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver
  19. Устранение неполадок
    1. Исправленные ошибки
    2. Выявленные неполадки

 

 

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

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

 Adobe

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

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

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн