Из этого раздела вы узнаете, как использовать инспектор свойств для редактирования кода в представлении «Дизайн» в Adobe Dreamweaver.

Dreamweaver поддерживает визуальное создание и редактирование веб-страниц без необходимости писать базовый исходный код вручную. Однако может понадобиться отредактировать код в тех случаях, когда нужен более полный контроль или требуется устранение неполадок в работе веб-страницы. Dreamweaver позволяет определенным образом редактировать код, не выходя из представления «Дизайн».

Этот раздел предназначен для тех, кто предпочитает работать в представлении «Дизайн», но хочет иметь быстрый доступ к коду.

Выбор дочерних тегов в представлении «Дизайн»

Если в представлении «Дизайн» выбрать объект, содержащий дочерние теги, например таблицу HTML, то можно быстро выделить первый дочерний тег этого объекта путем выбора в меню «Правка» пункта «Выбрать дочерний элемент».

Примечание.

Эта команда доступна только в представлении «Дизайн».

Например, тег <table> обычно имеет дочерние теги <tr>. Если в селекторе тегов выбрать тег <table>, то можно выделить первую строку таблицы путем выбора в меню «Правка» пункта «Выбрать дочерний элемент». Dreamweaver выбирает в селекторе тегов первый тег <tr>. Поскольку тег <tr> сам имеет дочерние теги, а именно теги <td>, при повторном выборе команды «Выбрать дочерний элемент» в меню «Правка» выделяется первая ячейка таблицы.

Редактирование кода в окне инспектора свойств

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

Примечание.

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

  1. Щелкните в тексте или выделите объект на странице.

    Под окном «Документ» откроется окно инспектора свойств выделенного текста или объекта. Если окно инспектора свойств не отображается, выберите меню «Окно» > «Свойства».

  2. Внесите изменения в атрибуты инспектора свойств.

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

Проверка и изменение разметки ColdFusion в представлении «Дизайн» с помощью инспектора свойств.

  1. В окне инспектора свойств нажмите кнопку «Атрибуты», чтобы изменить атрибуты тега или добавить новые атрибуты.
  2. Если между открывающим и закрывающим тегами данного тега есть какое-либо содержимое, нажмите кнопку «Содержимое» для его редактирования.

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

  3. Если тег содержит условное выражение, то его следует редактировать в диалоговом окне «Выражение».

Обзор редактора Quick Tag

Редактор тегов Quick Tag используется в случаях, когда требуется быстро проверить, вставить или изменить теги HTML, не закрывая представление «Дизайн».

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

Чтобы настроить параметры редактора тегов Quick Tag, откройте окно этого редактора. Для этого нажмите клавиши 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

  1. В представлении «Дизайн» щелкните страницу, чтобы разместить курсор вставки в том месте, куда следует вставить код.
  2. Нажмите клавиши Ctrl+T (Windows) или Cmd+T (Macintosh).

    Редактор Quick Tag откроется в режиме вставки HTML.

    Редактор Quick Tag в режиме вставки HTML
    Редактор Quick Tag в режиме вставки HTML

  3. Введите тег HTML и нажмите клавишу Enter.

    Тег будет вставлен в код вместе с соответствующим закрывающим тегом, если он нужен.

  4. Чтобы закрыть редактор без внесения каких-либо изменений в код, нажмите клавишу Escape.

Изменение тегов HTML

  1. Выберите объект в представлении «Дизайн».

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

  2. Нажмите клавиши Ctrl+T (Windows) или Cmd+T (Macintosh).

    Редактор Quick Tag откроется в режиме изменения тегов.

  3. Введите новые атрибуты, измените существующие атрибуты или измените имя тега.
  4. Для перехода к следующему атрибуту нажмите клавишу Tab, к предыдущему — клавиши Shift+Tab.

    Примечание.

    По умолчанию изменения вносятся в документ, когда пользователь нажимает клавишу Tab или клавиши Shift+Tab.

  5. Чтобы закрыть редактор Quick Tag и применить все внесенные изменения, нажмите клавишу Enter.
  6. Чтобы выйти из программы без внесения дальнейших изменений, нажмите клавишу Escape.

Заключение выделенной области кода в теги HTML

  1. Выберите неформатированный текст или объект в представлении «Дизайн».

    Примечание.

    При выделении текста или объекта, содержащего открывающий или закрывающий тег HTML, редактор Quick Tag открывается не в режиме заключения в тег, а в режиме изменения тега.

  2. Нажмите клавиши Ctrl+T (Windows) или Cmd+T (Macintosh), либо в окне инспектора свойств нажмите кнопку «Редактор Quick Tag».

    Редактор Quick Tag откроется в режиме заключения в тег.

  3. Введите один открывающий тег, например strong, и нажмите клавишу Enter (Windows) или Return (Macintosh).

    Тег будет вставлен в начале выделенного фрагмента, а в конце его будет вставлен соответствующий закрывающий тег.

  4. Чтобы выйти из программы без внесения каких-либо изменений, нажмите клавишу Escape.

Использование меню подсказок в редакторе Quick Tag

В редакторе Quick Tag есть меню подсказок по атрибутам, где перечислены все допустимые атрибуты изменяемых или вставляемых тегов.

Кроме того, можно отключить меню подсказок или настроить время задержки, после которой это меню раскрывается в окне редактора Quick Tag.

Чтобы увидеть меню подсказок, где перечислены допустимые атрибуты для тегов, сделайте короткую паузу в процессе редактирования имени атрибута в окне редактора Quick Tag. На экране появится меню подсказок с перечнем всех допустимых атрибутов для редактируемого тега.

Аналогичным образом, чтобы отобразилось меню подсказок, где перечислены допустимые имена тегов, сделайте короткую паузу в процессе ввода имени тега в окне редактора Quick Tag.

Примечание.

Установки отображения подсказок кода в окне редактора Quick Tag определяются установками отображения подсказок при вводе обычного кода. Дополнительные сведения см. в разделе Настройка параметров подсказок по коду.

  1. Выполните одно из следующих действий:
    • Начните вводить имя тега или атрибута. Выделение в меню «Подсказки по коду» переместится на первый объект, имя которого начинается с введенных букв.

    • Выберите нужный объект с помощью клавиш со стрелками вверх и вниз.

    • Найдите объект с помощью полосы прокрутки.

  2. Чтобы вставить выделенный объект, нажмите клавишу Enter. Кроме того, можно щелкнуть объект для его вставки.
  3. Чтобы закрыть меню подсказок без вставки объекта, нажмите клавишу Escape или продолжайте ввод кода.

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

  1. Нажмите «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh), а затем выберите «Подсказки по коду».

    Откроется диалоговое окно «Установки подсказок по коду».

  2. Чтобы отключить меню подсказок, отмените выбор параметра «Включить подсказки по коду».

Редактирование кода с помощью селектора тегов

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

Изменение или удаление тега

  1. Щелкните в документе.

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

  2. В селекторе тегов щелкните тег правой кнопкой мыши (Windows) или щелкните его, удерживая клавишу Ctrl (Macintosh).
  3. Для изменения тега в меню выберите пункт «Изменить тег». Внесите изменения в редакторе Quick Tag. Дополнительные сведения см. в разделе Редактирование кода с помощью редактора Quick Tag.
  4. Для удаления тега в меню выберите пункт «Удалить тег».

Выделение объекта, соответствующего тегу

  1. Щелкните в документе.

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

  2. Щелкните тег в селекторе тегов.

    Соответствующий объект будет выделен на странице.

    Примечание.

    С помощью этого приема можно выделять отдельные строки (теги tr) или ячейки (теги td) таблицы.

Написание и редактирование сценариев в представлении «Дизайн»

С клиентскими сценариями JavaScript и VBScript можно работать в представлениях «Код» и «Дизайн» следующим образом.

  • Написание сценариев для страницы на языках JavaScript или VBScript без выхода из представления «Дизайн».

  • Создайте в документе ссылку на внешний файл сценария, не закрывая представление «Дизайн».

  • Отредактируйте сценарий, не закрывая представление «Дизайн».

    Перед началом работы выберите меню «Просмотр» > «Вспомогательные элементы» > «Невидимые элементы». На странице отобразятся маркеры сценариев.

Написание клиентского сценария

  1. Поместите курсор вставки в том месте, где необходимо добавить сценарий.
  2. Выберите меню «Вставка» > «HTML» > «Сценарий».

  3. Выберите сценарий в окне выбора файлов.

    Примечание.

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

Тег сценариев для выбранного файла вставляется в документ.

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

  1. Выделите маркер сценария.
  2. В окне инспектора свойств нажмите кнопку «Изменить».

    Сценарий отобразится в диалоговом окне «Свойства сценария».

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

    Примечание.

    Если между тегами сценария имеется код, то диалоговое окно «Свойства сценария» будет открываться даже в том случае, если указана также и ссылка на внешний файл сценария.

  3. В поле «Язык» в качестве языка сценария укажите либо JavaScript, либо VBScript.
  4. Во всплывающем меню «Тип» укажите тип сценария: клиентский либо серверный.
  5. В поле «Источник» укажите связанный внешний файл (необязательно).

    Щелкните значок папки или нажмите кнопку «Обзор», чтобы выбрать файл, либо введите путь к файлу.

  6. Внесите изменения в сценарий и нажмите кнопку «ОК».

Редактирование серверных сценариев ASP в представлении «Дизайн»

С помощью инспектора свойств сценариев ASP можно просматривать и изменять серверные сценарии ASP в представлении «Дизайн».

  1. В представлении «Дизайн» выберите визуальный значок тега на языке сервера.
  2. В окне инспектора свойств сценариев ASP нажмите кнопку «Изменить».
  3. Внесите изменения в серверный сценарий ASP и нажмите кнопку «ОК».

Редактирование сценариев на странице с помощью инспектора свойств

  1. В окне инспектора свойств выберите язык сценария во всплывающем меню «Язык» или введите название языка в поле «Язык».

    Примечание.

    Если вы используете язык JavaScript, но не помните точную версию, выберите пункт JavaScript, а не пункты JavaScript 1.1 или JavaScript 1.2.

  2. Во всплывающем меню «Тип» укажите тип сценария: клиентский либо серверный.
  3. В поле «Источник» укажите связанный внешний файл (необязательно). Щелкните значок папки, чтобы выбрать файл, либо введите путь к файлу.

  4. Чтобы внести изменения в сценарий, нажмите кнопку «Изменить».

Использование вариантов поведения JavaScript

На вкладке «Поведение сервера» инспектора тегов можно легко присоединять (клиентские) варианты поведения JavaScript к элементам страниц. Дополнительные сведения см. в разделе Применение встроенных сценариев JavaScript в Dreamweaver.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет