Щелкните в тексте или выделите объект на странице.
Последнее обновление
27 апр. 2021 г.
Из этого раздела вы узнаете, как использовать инспектор свойств для редактирования кода в представлении «Дизайн» в Adobe Dreamweaver.
Dreamweaver позволяет визуально создавать и редактировать веб-страницы, не беспокоясь о базовом исходном коде, но бывают случаи, когда может потребоваться редактирование кода для большего контроля или устранения неполадок веб-страницы. Dreamweaver позволяет редактировать код при работе в режиме просмотра «Дизайн».
Этот раздел предназначен для людей, которые предпочитают работать в режиме просмотра «Дизайн», но также хотят быстрый доступ к коду.
Выбор дочерних тегов в представлении «Дизайн»
Если вы выберете объект в режиме просмотра «Дизайн», который содержит дочерние теги — например, HTML-таблицу — вы можете быстро выбрать первый дочерний тег этого объекта, выбрав «Правка» > «Выбрать дочерний элемент».
Примечание
Эта команда доступна только в представлении «Дизайн».
Например, тег <table> обычно имеет дочерние теги <tr>. Если вы выберете тег <table> в селекторе тегов, вы можете выбрать первую строку в таблице, выбрав «Правка» > «Выбрать дочерний элемент». Dreamweaver выбирает первый тег <tr> в селекторе тегов. Поскольку тег <tr> сам имеет дочерние теги, а именно теги <td>, повторный выбор «Правка» > «Выбрать дочерний элемент» выберет первую ячейку в таблице.
Редактирование кода в окне инспектора свойств
Вы можете использовать инспектор свойств для проверки и редактирования атрибутов текста или объектов на странице. Свойства, показанные в инспекторе свойств, обычно соответствуют атрибутам тегов; изменение свойства в инспекторе свойств обычно имеет тот же эффект, что и изменение соответствующего атрибута в режиме просмотра кода.
Примечание
Инспектор тегов и инспектор свойств позволяют просматривать и редактировать атрибуты тега. Инспектор тегов позволяет просматривать и редактировать каждый атрибут, связанный с данным тегом. Инспектор свойств показывает только наиболее распространенные атрибуты, но предоставляет более богатый набор элементов управления для изменения значений этих атрибутов и позволяет редактировать определенные объекты (например, столбцы таблицы), которые не соответствуют конкретным тегам.
Инспектор свойств для текста или объекта появляется ниже окна документа. Если инспектор свойств не виден, выберите «Окно» > «Свойства».
Внесите изменения в атрибуты инспектора свойств.
Изменение CFML в окне инспектора свойств
Используйте инспектор свойств для проверки и изменения разметки ColdFusion в режиме просмотра «Дизайн».
В инспекторе свойств нажмите кнопку «Атрибуты»
для редактирования атрибутов тега или добавления новых.
Если тег содержит контент между открывающим и закрывающим
тегами, нажмите кнопку «Содержимое» для редактирования содержимого.
Кнопка «Содержимое» появляется только в том случае, если выбранный тег не является пустым тегом (то есть, если он имеет как открывающий, так и закрывающий тег).
Если тег содержит условное выражение, внесите изменения
в поле «Выражение».
Обзор редактора Quick Tag
Редактор Quick Tag используется для быстрой проверки, вставки и редактирования HTML-тегов без выхода из режима «Дизайн».
Если вы вводите недопустимый HTML в редакторе быстрых тегов, Dreamweaver попытается исправить его, вставив закрывающие кавычки и закрывающие угловые скобки там, где это необходимо.
Для установки параметров редактора быстрых тегов откройте редактор быстрых тегов, нажав CTRL+T (Windows) или CMD+T (Macintosh).
Редактор Quick Tag имеет три режима.
- Режим вставки HTML используется для вставки нового кода HTML.
- Режим изменения тегов используется для изменения существующих тегов.
Режим вставки HTML используется для вставки нового кода HTML.
Режим изменения тегов используется для изменения существующих тегов.
Режим заключения в тег используется для размещения тега вокруг выделенного фрагмента кода.
Примечание
Режим, в котором открывается окно редактора Quick Tag, определяется параметром, выбранным в данный момент в представлении «Дизайн».
Во всех трех режимах порядок работы в окне редактора Quick Tag один и тот же: открыть редактор, ввести или изменить теги и атрибуты, закрыть редактор.
Когда открыто окно редактора Quick Tag, пользователь может переключаться между режимами с помощью клавиш Ctrl+T (Windows) или Cmd+T (Macintosh).
Изменение кода с помощью редактора Quick Tag
Быстрый редактор тегов («Правка» > «Редактор Quick Tag») используется для быстрой вставки и редактирования HTML-тегов, не закрывая представление «Дизайн».
Вставка тега HTML
В режиме просмотра «Дизайн» нажмите на
странице, чтобы поместить курсор в то место, где хотите вставить код.
Нажмите клавиши Ctrl+T (Windows) или Cmd+T (Macintosh).
Редактор Quick Tag откроется в режиме вставки HTML.
Введите тег HTML и нажмите клавишу Enter.
Тег вставляется в ваш код вместе с соответствующим закрывающим тегом, если применимо.
Чтобы закрыть редактор без внесения каких-либо изменений в код, нажмите клавишу Escape.
Изменение тегов HTML
Выберите объект в представлении «Дизайн».
Также можно выбрать тег, который необходимо отредактировать, из селектора тегов в нижней части окна документа. Дополнительную информацию см. в разделе Редактирование кода с помощью селектора тегов.
Нажмите клавиши Ctrl+T (Windows) или Cmd+T (Macintosh).
Редактор Quick Tag откроется в режиме изменения тегов.
Введите новые атрибуты, отредактируйте существующие атрибуты или измените
имя тега.
Нажмите кнопку TAB для перехода вперед от одного атрибута к следующему;
нажмите SHIFT+TAB для перехода назад.
Примечание
По умолчанию изменения применяются к документу при нажатии клавиши Tab или Shift+Tab.
Чтобы закрыть Quick Tag Editor и применить все изменения, нажмите клавишу Enter.
Чтобы выйти из программы без внесения дальнейших изменений, нажмите клавишу Escape.
Оберните текущее выделение в теги HTML
Выберите неформатированный текст
или объект в представлении дизайна.
Примечание
При выделении текста или объекта, содержащего открывающий или закрывающий тег HTML, редактор Quick Tag открывается не в режиме заключения в тег, а в режиме изменения тега.
Нажмите Control+T (Windows) или Command+T (Macintosh) или нажмите кнопку «Редактор быстрых тегов» в инспекторе свойств.
Редактор Quick Tag откроется в режиме заключения в тег.
Введите один открывающий тег, например strong,
и нажмите ENTER (Windows) или RETURN (Macintosh).
Тег вставляется в начале текущего выделения, а соответствующий закрывающий тег вставляется в конце.
Чтобы выйти из программы без внесения каких-либо изменений, нажмите клавишу Escape.
Использование меню подсказок в редакторе Quick Tag Editor
Редактор Quick Tag Editor включает меню подсказок по атрибутам, в котором перечислены все допустимые атрибуты редактируемого или вставляемого тега.
Можно также отключить меню подсказок или настроить задержку перед его появлением в редакторе Quick Tag Editor.
Чтобы увидеть меню подсказок со списком допустимых атрибутов тега, сделайте небольшую паузу при редактировании имени атрибута в редакторе Quick Tag Editor. Появится меню подсказок со списком всех допустимых атрибутов для редактируемого тега.
Аналогично, чтобы увидеть меню подсказок со списком допустимых имен тегов, сделайте небольшую паузу при вводе или редактировании имени тега в редакторе Quick Tag Editor.
Примечание
Настройки подсказок по коду редактора Quick Tag Editor управляются обычными настройками подсказок по коду. Дополнительную информацию см. в разделе Задание настроек подсказок по коду.
Выполните одно из действий, описанных ниже.
Начните вводить имя тега или атрибута. Выделение в меню подсказок по коду переходит к первому элементу, который начинается с введенных букв.
Выберите нужный объект с помощью клавиш со стрелками вверх и вниз.
Найдите объект с помощью полосы прокрутки.
Нажмите ENTER для вставки выбранного элемента или дважды щелкните
элемент для его вставки.
Чтобы закрыть меню подсказок без вставки элемента, нажмите
ESCAPE или продолжите ввод.
Отключить меню подсказок или изменить задержку перед его появлением
Выберите «Правка» > «Настройки»
(Windows) или Dreamweaver > «Настройки» (Macintosh)
и выберите «Подсказки по коду».
Откроется диалоговое окно «Установки подсказок по коду».
Чтобы отключить меню подсказок, снимите флажок «Включить подсказки по коду».
Редактирование кода с помощью селектора тегов
С помощью селектора тегов можно выделять, изменять или удалять теги, не закрывая представление «Дизайн». Селектор тегов находится в полосе состояния в нижней части окна «Документ» и содержит ряд тегов.
Изменение или удаление тега
Щелкните в документе.
Теги, которые применяются в точке вставки, отображаются в селекторе тегов.
Щелкните правой кнопкой мыши (Windows) или щелкните, удерживая клавишу Control (Macintosh), тег в селекторе тегов.
Для изменения тега в меню выберите пункт «Изменить тег». Внесите
изменения в Quick Tag Editor.Дополнительные сведения см. в разделе Edit
code with the Quick Tag Editor.
Для удаления тега в меню выберите пункт «Удалить тег».
Выберите объект, соответствующий тегу
Щелкните в документе.
Теги, которые применяются в точке вставки, отображаются в селекторе тегов.
Щелкните тег в селекторе тегов.
Соответствующий объект будет выделен на странице.
Примечание
Используйте этот способ для выбора отдельных строк таблицы (теги tr) или ячеек (теги td).
Написание и редактирование сценариев в режиме Design
Вы можете работать с клиентскими сценариями JavaScript и VBScript как в режиме Code, так и в режиме Design следующими способами:
Напишите JavaScript или VBScript для вашей страницы, не покидая режим Design.
Создайте ссылку в документе на внешний файл скрипта, не покидая режим Design.
Отредактируйте сценарий, не покидая режим Design.
Перед началом выберите «Вид» > «Визуальные средства» > «Невидимые элементы», чтобы убедиться, что маркеры сценариев отображаются на странице.
Написание клиентского сценария
Поместите
точку вставки в место, где нужен сценарий.
Выберите меню «Вставка» > «HTML» > «Сценарий».
Выберите сценарий в окне выбора файлов.
Примечание
Не нужно вводить открывающиеся и закрывающиеся теги сценариев.
Тег сценариев для выбранного файла вставляется в документ.
Редактирование сценария
Выделите маркер сценария.
В окне инспектора свойств нажмите кнопку «Изменить».
Сценарий отобразится в диалоговом окне «Свойства сценария».
Если вы связали внешний файл сценария, файл откроется в режиме «Код», где можно внести изменения.
Примечание
Если между тегами сценария есть код, диалоговое окно «Свойства сценария» откроется, даже если есть также ссылка на внешний файл сценария.
В поле «Язык» укажите JavaScript или VBScript
в качестве языка сценария.
Во всплывающем меню «Тип» укажите тип сценария —
клиентский или серверный.
(Дополнительно) В поле «Источник» укажите внешний связанный
файл сценария.
Щелкните значок папки или нажмите кнопку «Обзор», чтобы выбрать файл, либо введите путь к файлу.
Внесите изменения в сценарий и нажмите кнопку «ОК».
Редактирование серверных сценариев ASP в режиме «Дизайн»
Используйте инспектор свойств ASP Script для проверки и изменения серверных сценариев ASP в режиме «Дизайн».
В режиме «Дизайн» выберите визуальный значок
тега серверного языка.
В инспекторе свойств ASP Script нажмите кнопку
«Редактировать».
Внесите изменения в серверный сценарий ASP и нажмите кнопку «ОК».
Редактируйте сценарии на странице с помощью инспектора свойств
В инспекторе свойств выберите
язык разработки сценариев из всплывающего меню «Язык» или введите название языка
в поле «Язык».
Примечание
Если вы используете JavaScript и не уверены в версии, выберите JavaScript вместо JavaScript1.1 или JavaScript1.2.
Во всплывающем меню «Тип» укажите тип сценария — клиентский или серверный.
В поле «Источник» укажите связанный внешний файл (необязательно). Щелкните значок папки, чтобы выбрать файл, либо введите путь к файлу.
Чтобы внести изменения в сценарий, нажмите кнопку «Изменить».
Использование вариантов поведения JavaScript
Вы можете легко прикрепить поведения JavaScript (клиентские) к элементам страницы, используя вкладку «Поведения» инспектора тегов. Для получения дополнительной информации см. Applying built‑in JavaScript behaviors Dreamweaver.
Создание красивых веб-сайтов в Dreamweaver
Создавайте дизайн, пишите код и управляйте динамическими веб-сайтами с помощью многофункционального инструмента.
