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

Применение встроенных вариантов поведения JavaScript

  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. Выявленные неполадки

 

 

Изучите этот раздел, чтобы понять, как применять встроенные варианты поведения JavaScript в Adobe Dreamweaver.

Применение встроенных вариантов поведения

Варианты поведения в составе Dreamweaver предназначены для функционирования в современных браузерах. В ранних версиях браузеров обработка поведения завершается неудачей, но без ошибки.

Примечание.

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

Хотя действия Dreamweaver обеспечивают максимальную совместимость с различными браузерами, некоторые браузеры вообще не поддерживают JavaScript, кроме того, многие пользователи отключают поддержку JavaScript в своих браузерах. Для обеспечения максимальной межплатформенной совместимости необходимо предусмотреть дополнительный интерфейс, заключенный в теги <noscript>, в результате сайт будет функционировать и без поддержки JavaScript.

Применение поведения «Вызов JavaScript»

Поведение «Вызов JavaScript» выполняет пользовательскую функцию или строку кода JavaScript, когда возникает событие. (Можно самостоятельно записать сценарий или использовать код, предоставляемый различными бесплатными библиотеками JavaScript в Интернете.)

  1. Выберите объект и укажите «Вызов JavaScript» в меню «Добавить поведение» на панели «Поведения».
  2. Добавьте правильный код JavaScript или имя функции.

    Например, чтобы обеспечить функционирование кнопки «Назад», необходимо ввести if (history.length > 0){history.back()}. Если код содержится в функции, необходимо просто ввести имя функции (например, hGoBack()).

  3. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Изменить свойство»

Необходимо использовать поведение «Изменить свойство», чтобы изменить значение одного из свойств объекта (например, цвет фона раздела или действие формы).

Примечание.

Это поведение можно использовать только при высоком уровне знания HTML и JavaScript.

  1. Выберите объект и укажите «Изменить свойство» в меню «Добавить поведение» на панели «Поведения».
  2. В меню «Тип элемента» выберите тип элемента, чтобы просмотреть все идентифицированные элементы этого типа.
  3. Выберите элемент в меню «Идентификатор элемента».
  4. Выберите свойство в меню «Свойство» или введите имя свойства в поле.
  5. Введите новое значение созданного свойства в поле «Создать значение».
  6. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Проверка подключаемого модуля»

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

Примечание.

Определить специфические внешние модули Internet Explorer с помощью JavaScript невозможно. Однако выбор Flash или Director добавит на страницу код VBScript, определяющий эти внешние модули Internet Explorer в ОС Windows. Обнаружение подключаемых модулей невозможно в браузере Internet Explorer для Mac OS

  1. Выберите объект и укажите «Проверить подключаемый модуль» в меню «Добавить поведение» на панели «Поведения».
  2. Выберите внешний модуль в меню «Подключаемый модуль» или нажмите кнопку Enter и введите точное имя внешнего модуля в соответствующем поле.

    Необходимо использовать точное имя внешнего модуля, указанное жирным шрифтом на странице «О внешних модулях» в Netscape Navigator. (в Windows выберите команду «Navigator’s Help» > «About Plug‑ins»; в Mac OS выберите «About Plug‑ins» в меню «Apple»).

  3. В поле «Если найдено, перейдите к следующему URL» укажите URL-адрес для посетителей, имеющих установленный внешний модуль.

    При указании удаленного URL-адреса, необходимо добавить перед ним префикс «http://». Если поле не будет заполнено, посетители останутся на той же странице.

  4. В поле «В противном случае перейдите по следующему адресу» укажите альтернативный URL-адрес для посетителей, не использующих внешний модуль. Если поле не будет заполнено, посетители останутся на той же странице.
  5. Укажите действие для случая, если невозможно определить внешний модуль. По умолчанию если определение невозможно, посетитель будет направлен по URL-адресу, указанному в поле «В противном случае». Чтобы направить посетителя по первому («Если найдено») URL-адресу, выберите параметр «Если определение невозможно, всегда переходить по первому URL-адресу». Выбор этого параметра фактически означает: «посетитель имеет внешний модуль, если браузер явно не указывает, что внешний модуль отсутствует» Обычно следует выбирать этот параметр, если содержимое внешнего модуля является неотъемлемой частью страницы, если модуль выбран.
    Примечание.

    Этот параметр применим только к Internet Explorer; Netscape Navigator всегда может определять внешние модули.

  6. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Перетаскивание элемента AP»

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

Можно указать направление перемещения элемента AP (по горизонтали, по вертикали или в любом направлении), место, куда будет перемещен элемент AP, должен ли привязываться элемент AP к месту назначения, если он находится в нескольких пикселах от него, что делать, когда элемент AP достигает места назначения и т. д.

Так как поведение «Перетаскивание элемента AP» должно быть вызвано до перемещения посетителем элемента AP, необходимо назначить поведение «Перетаскивание элемента AP» объекту body (с помощью события onLoad).

  1. Выберите «Вставка» > «Объекты макета» > «Слой AP» или нажмите кнопку «Рисовать слой AP» на панели «Вставка» и нарисуйте слой AP в представлении «Дизайн» окна документа.
  2. Щелкните объект <body> в селекторе тегов в левом нижнем углу окна «Документ».
  3. Выберите поведение «Перетаскивание элемента AP» в меню «Добавить поведение» на панели «Поведения».

    Если поведение «Перетаскивание элемента AP» недоступно, то, возможно, выделен элемент AP.

  4. Во всплывающем меню «Элемент AP» выберите элемент AP.
  5. Выберите «Ограниченный» или «Неограниченный» во всплывающем меню «Перемещение».

    Неограниченное перемещение предназначено для пазлов и других подобных игр. Для элемента управления «ползунок» и подвижных декораций, например ящиков с картотекой, экранов и мини-шторок, выберите ограниченное движение.

  6. Для ограниченного движения введите значение (в пикселах) в полях «Вверх», «Вниз», «Влево» и «Вправо».

    Значения применяются относительно начального положения элемента AP. Чтобы ограничить движение в пределах прямоугольной области, введите положительные значения во все четыре поля. Чтобы разрешить движение только по вертикали, введите положительные значения в поля «Вверх» и «Вниз», а в поля «Вправо» и «Влево» — значение 0. Чтобы разрешить движение только по горизонтали, введите положительные значения в поля «Влево» и «Вправо», а в поля «Вверх» и «Вниз» — значение 0.

  7. Введите значения (в пикселах) для целевого пункта перемещения в полях «Влево» и «Наверх».

    Целевой пункт перемещения — это участок, куда посетитель переместит элемент AP. Считается, что элемент AP достиг целевого пункта перемещения, если его координаты левой и верхней стороны совпадают со значениями, введенными в поля «Влево» и «Наверх». Значения применяются относительно верхнего левого угла окна браузера. Нажмите кнопку «Получить текущее положение», чтобы автоматически заполнить текстовые поля значениями текущего положения элемента AP.

  8. Введите значение (в пикселах) в поле «Привязать, если внутри», чтобы определить, какая часть элемента AP должна войти в целевой пункт перемещения, чтобы выполнить к нему привязку.

    Большие значения облегчают посетителям поиск целевого пункта перемещения.

  9. Для несложных пазлов и управления декорациями можно остановиться на этом. Чтобы определить рукоять перемещения для элемента AP, отследите движение элемента AP при перемещении и инициируйте действие, когда элемент AP будет отпущен, затем щелкните вкладку «Дополнительно».
  10. Чтобы определить специальную область, за которую посетитель может перетаскивать элемент AP, выберите «Область» в пределах элемента в меню «Перемещение рукояти»; затем введите координаты верхнего и левого края, а также ширину и высоту этой области.

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

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

    • Введите код JavaScript или имя функции (например, monitorAPelement()) в поле «Вызов JavaScript», чтобы многократно выполнить код или функцию во время перемещения элемента AP. Например, можно написать функцию, которая контролирует координаты элемента AP и отображает подсказки в текстовом поле типа «теплее» или «целевого пункта перемещения нет поблизости».

  12. Введите код JavaScript или имя функции (например, evaluateAPelementPos()) в другое поле «Вызов JavaScript», чтобы выполнить код или функцию, когда элемент AP будет отпущен. Выберите «Только если есть привязка», если JavaScript должен быть выполнен только при достижении элементом AP целевого пункта перемещения.
  13. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Сбор сведений о перетаскиваемом элементе AP

При назначении поведения «Перетаскивание элемента AP» объекту Dreamweaver добавляет функцию MM_dragLayer() в раздел head документа. (Функция поддерживает старое соглашение об именах для элементов AP [то есть «Слой»], таким образом слои, созданные в предыдущих версиях Dreamweaver, остались доступными для редактирования.) В дополнение к регистрации элемента AP как перетаскиваемого, эта функция определяет три свойства для каждого такого элемента: MM_LEFTRIGHT, MM_UPDOWN и MM_SNAPPED, которые можно использовать в собственных функциях JavaScript, чтобы определить относительное горизонтальное и вертикальное положение элемента AP, а также определить, достиг ли элемент AP целевого пункта перемещения.

Примечание.

Предоставленные здесь сведения предназначены только для опытных программистов JavaScript.

Например, следующая функция отображает значение свойства MM_UPDOWN (текущее вертикальное положение элемента AP) в поле curPosField формы. (Поля формы полезны для отображения постоянно изменяющейся информации, потому что они являются динамическими, то есть их содержимое можно изменять после загрузки страницы.)

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Также значение MM_UPDOWN или MM_LEFTRIGHT поля формы можно использовать и в других целях. Например, можно написать функцию, которая отображает сообщение в поле формы в зависимости от того, насколько близко значение к зоне места назначения, или же можно вызвать другую функцию, показывающую или скрывающую элемент AP в зависимости от значения.

Это особенно полезно при чтении свойства MM_SNAPPED, если имеется несколько элементов AP на странице и все они должны достигнуть места назначения до перехода посетителя к следующей странице или задаче. Например, можно написать функцию, чтобы посчитать, сколько элементов AP содержат в свойстве MM_SNAPPED значение true, и вызывать ее каждый раз, когда элемент AP отпущен. Когда связанный счетчик достигает необходимого значения, можно отправить посетителя на следующую страницу или отобразить сообщение с поздравлениями.

Применение поведения «Переход к URL-адресу»

Поведение «Переход к URL-адресу» открывает новую страницу в текущем окне или в указанном фрейме. Это поведение полезно для изменения содержимого нескольких фреймов одним щелчком.

  1. Выберите объект и укажите «Переход к URL-адресу» в меню «Добавить поведение» на панели «Поведения».
  2. Выберите фрейм для URL-адреса в списке «Открыть в».

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

    Примечание.

    Это поведение может привести к неожиданным результатам, если какой-нибудь фрейм имеет имя top, blank, self или parent. Браузеры иногда воспринимают эти имена как зарезервированные.

  3. Нажмите «Обзор», чтобы выбрать документ для открытия, или введите путь или имя файла документа в поле URL-адреса.
  4. Повторите шаги 2 и 3, чтобы открыть дополнительные документы в других фреймах.
  5. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Меню переходов»

При создании меню переходов с помощью «Вставка» > «Форма» > «Меню переходов» Dreamweaver создает объект меню и назначает ему поведение «Меню переходов» (или «Выполнение меню переходов»). Обычно нет необходимости назначать поведение «Меню переходов» объекту вручную.

Можно отредактировать существующее меню переходов двумя способами.

  • Можно редактировать и изменять порядок пунктов меню, изменять файлы для перехода, изменять окно, в котором открыты эти файлы, дважды щелкнув существующее поведение «Меню переходов» на панели «Поведение».

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

  1. Создайте объект меню переходов, если его нет в документе.
  2. Выберите объект и укажите «Меню переходов» в меню «Добавить поведение» на панели «Поведения».
  3. Сделайте необходимые изменения в диалоговом окне «Меню переходов» и затем нажмите кнопку «ОК».

Применение поведения «Выполнение меню переходов»

Поведение «Выполнение меню переходов» тесно связано с поведением «Меню переходов»; «Выполнение меню переходов» позволяет связать кнопку «Перейти» с меню переходов. (Перед использованием этого поведения меню переходов должно содержаться в документе.) Нажатие кнопки «Перейти» приводит к открытию ссылки, которая выбрана в меню переходов. Меню переходов обычно не требуется кнопка «Перейти»; выбор пункта в меню переходов заставляет загружаться URL-адрес без каких-либо действий пользователя. Но если посетитель выбирает пункт, уже выбранный в меню переходов, переход не происходит. Обычно это не имеет значения, но если меню переходов находится во фрейме, а пункты меню переходов ссылаются на страницы в других фреймах, то кнопка «Перейти» может быть полезна, чтобы повторно выбрать пункт, уже выбранный в меню переходов.

Примечание.

При использовании кнопки «Перейти» вместе с меню переходов она становится единственным механизмом, который направляет пользователя к URL-адресу, связанному с выбором в меню. Выбор пункта в меню переходов больше не перенаправляет пользователя автоматически на другую страницу или фрейм.

  1. Выберите объект для использования в качестве кнопки «Перейти» (обычно изображение кнопки) и укажите «Выполнение меню переходов» в меню «Добавить поведение» на панели «Поведения».
  2. В меню «Выберите меню перехода» выберите пункт, чтобы активировать кнопку «Перейти» и нажмите кнопку «ОК».

Применение поведения «Открытие окна браузера»

Используйте поведение «Открытие окна браузера», чтобы открыть страницу в новом окне. Можно указать свойства нового окна, включая его размер, атрибуты (будет ли оно иметь изменяемый размер, главное меню и т. д.) и имя. Например, можно использовать это поведение, чтобы открыть увеличенное изображение в отдельном окне, когда посетитель щелкает миниатюру; с помощью этого поведения можно создать новое окно по размеру изображения.

Если атрибуты для окна не указаны, то оно будет иметь тот же размер и атрибуты, что и окно, открывающее его. Указание любого атрибута для окна автоматически отключает все атрибуты, которые явно не включены. Например, если не установлено никаких атрибутов для окна, оно может иметь размер 1024 x 768 пикселов, содержать панель навигации (кнопки «Назад», «Вперед», «Домашняя» и «Перезагрузить»), панель адреса (отображает URL-адрес), строку состояния (отображает сообщения о состоянии внизу окна) и меню («Файл», «Правка», «Просмотр» и другие пункты). Если явно установлена ширина 640 и высота 480, а другие атрибуты не установлены, окно при открытии будет иметь размер 640 x 480 пикселов и не будет содержать панелей инструментов.

  1. Выберите объект и укажите «Открытие окна браузера» в меню «Добавить поведение» на панели «Поведения».
  2. Нажмите кнопку «Обзор», чтобы выбрать файл, или введите URL-адрес.
  3. Установите параметры для окна: ширину и высоту (в пикселах) и параметры для объединения различных панелей инструментов, полос прокрутки, изменяющих размеры рукоятей и т. п. Задайте имя окна (не используйте пробелов или специальных символов), если необходимо использовать его как объект назначения ссылок или управлять им с помощью JavaScript.
  4. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Вывод сообщения»

Поведение «Вывод сообщения» отображает предупреждение JavaScript с указанным текстом. Так как предупреждения JavaScript имеют только одну кнопку (ОК), используйте это поведение для предоставления пользователю информации, а не для выбора.

Можно добавить любой допустимый вызов функции JavaScript, свойство, глобальную переменную или другое выражение в тексте. Чтобы вставить выражение JavaScript, заключите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, необходимо указать перед ней символ обратной косой черты (\{).

Пример.

The URL for this page is {window.location}, and today is {new Date()}.
Примечание.

Браузер управляет внешним видом предупреждения. Если необходимо дополнительное управление внешним видом предупреждения, используйте поведение «Открытие окна браузера».

  1. Выберите объект и укажите «Вывод сообщения» в меню «Добавить поведение» на панели «Поведения».
  2. Введите текст в окно сообщения.
  3. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Предварительная загрузка изображений»

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

Примечание.

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

  1. Выберите объект и укажите «Предварительная загрузка изображений» в меню «Добавить поведение» на панели «Поведения».
  2. Нажмите кнопку «Обзор», чтобы выбрать файл изображения, или введите путь или имя файла изображения в поле «Исходный файл изображения».
  3. Нажмите кнопку со знаком «плюс» (+) в верхней части диалогового окна, чтобы добавить изображение в список «Загрузка изображений».
  4. Повторите шаги 2 и 3 для всех остальных изображений, которые необходимо предварительно загрузить на текущей странице.
  5. Чтобы удалить изображение из списка «Предварительная загрузка изображений», выберите его и нажмите кнопку со знаком «Минус» (–).
  6. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Задать текст фрейма»

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

Хотя поведение «Задать текст фрейма» изменяет форматирование фрейма, можно выбрать «Сохранять цвет фона», чтобы сохранить фон страницы и цвет текста.

Можно добавить любой допустимый вызов функции JavaScript, свойство, глобальную переменную или другое выражение в тексте. Чтобы вставить выражение JavaScript, заключите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, необходимо указать перед ней символ обратной косой черты (\{).

Пример.

The URL for this page is {window.location}, and today is {new Date()}.
  1. Выберите объект и укажите «Задать текст» > «Задать текст фрейма» в меню «Добавить поведение» на панели «Поведения».
  2. В диалоговом окне «Задать текст фрейма» выберите целевой фрейм в меню «Фрейм».
  3. Нажмите кнопку «Получить текущий HTML», чтобы скопировать текущее содержимое раздела body целевого фрейма.
  4. Введите сообщение в поле «Новый HTML».
  5. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Задать текст контейнера»

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

Можно добавить любой допустимый вызов функции JavaScript, свойство, глобальную переменную или другое выражение в тексте. Чтобы вставить выражение JavaScript, заключите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, необходимо указать перед ней символ обратной косой черты (\{).

Пример.

The URL for this page is {window.location}, and today is {new Date()}.
  1. Выберите объект и укажите «Задать текст» > «Задать текст контейнера» в меню «Добавить поведение» на панели «Поведения».
  2. В диалоговом окне «Задать текст контейнера» используйте меню «Контейнер», чтобы выбрать целевой элемент.
  3. Введите новый текст или HTML в поле «Новый HTML».
  4. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Задать текст строки состояния»

Поведение «Задать текст строки состояния» показывает сообщение в строке состояния в левом нижнем углу окна браузера. Это поведение можно использовать, чтобы показывать описание места назначения ссылки в строке состояния вместо простого отображения URL-адреса. Посетители часто игнорируют или пропускают сообщения в строке состояния (не все браузеры обеспечивают полную поддержку вывода текста в строку состояния); если сообщение важно, можно отобразить его как всплывающее сообщение или как текст элемента AP.

Примечание.

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

Можно добавить любой допустимый вызов функции JavaScript, свойство, глобальную переменную или другое выражение в тексте. Чтобы вставить выражение JavaScript, заключите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, необходимо указать перед ней символ обратной косой черты (\{).

Пример.

The URL for this page is {window.location}, and today is {new Date()}.
  1. Выберите объект и укажите «Задать текст» > «Задать текст строки состояния» в меню «Добавить поведение» на панели «Поведения».
  2. В диалоговом окне «Задать текст строки состояния» введите тест сообщения в поле «Сообщение».

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

  3. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Задать текст текстового поля»

Поведение «Задать текст текстового поля» заменяет содержимое текстового поля формы указанным содержимым.

Можно добавить любой допустимый вызов функции JavaScript, свойство, глобальную переменную или другое выражение в тексте. Чтобы вставить выражение JavaScript, заключите его в фигурные скобки ({}). Чтобы отобразить фигурную скобку, необходимо указать перед ней символ обратной косой черты (\{).

Пример.

The URL for this page is {window.location}, and today is {new Date()}.

Создание именованного текстового поля

  1. Выберите «Вставка» > «Форма» > «Текстовое поле».

    Если Dreamweaver предлагает добавить тег формы, нажмите кнопку «Да».

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

Применение «Задать текст текстового поля»

  1. Выберите текстовое поле и укажите «Задать текст» > «Задать текст текстового поля» в меню «Добавить поведение» на панели «Поведения».
  2. Выберите нужное текстовое поле в меню «Текстовое поле» и введите новый текст.
  3. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Применение поведения «Показать-скрыть элементы»

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

  1. Выберите объект и укажите «Показать-скрыть элементы» в меню «Добавить поведение» на панели «Поведения».

    Если пункт «Показать-скрыть элементы» недоступен, возможно, выбран элемент AP. Так как элементы AP не поддерживают события в обоих браузерах версии 4.0, необходимо выбрать другой объект, такой как тег <body> или ссылка (тег <a>).

  2. В списке «Элементы» выберите элемент, который необходимо показать или скрыть, и нажмите кнопку «Показать», «Скрыть» или «Восстановить» (восстанавливает видимость по умолчанию).
  3. Повторите шаг 2 для всех остальных элементов, видимость которых необходимо изменить. (Можно изменить видимость нескольких элементов с помощью одного поведения.)
  4. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Начиная с Dreamweaver CS5, это поведение устарело.

Применение поведения «Замена изображения»

Поведение «Замена изображения» заменяет одно изображение другим, изменяя атрибут src тега <img>. Используйте это поведение, чтобы создать меняющуюся кнопку и другие эффекты с изображениями (с помощью замены нескольких изображений за короткий момент времени). Вставка замещающего изображения автоматически добавляет поведение «Замена изображения» на страницу.

Примечание.

Так как поведение влияет только на атрибут src, заменяющие изображения должны иметь такие же размеры (высота и ширина) как и оригинал. В противном случае, заменяющее изображение сжимается или расширяется по размерам оригинала.

Поведение «Восстановление замененных изображений» возвращает предыдущие исходные файлы. Это поведение автоматически добавляется всякий раз, когда поведение «Замена изображения» назначается объекту; если параметр «Восстановить» выбран во время назначения поведения «Замена изображения», нет необходимости выбирать поведение «Восстановление замененных изображений» вручную.

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

    Назначать имена изображениям необязательно, так как им даются имена автоматически при назначении поведения объекту. Однако изображения в диалоговом окне «Замена изображения» проще различать, если предварительно назначить им имена.

  3. Повторите шаги 1 и 2, чтобы вставить дополнительные изображения.
  4. Выделите объект (например, изображение, которое необходимо заменить) и выберите «Замена изображений» в меню «Добавить поведение» на панели «Поведения».
  5. В списке «Изображения» выберите изображение, источник которого необходимо поменять.
  6. Нажмите кнопку «Обзор», чтобы выбрать новый файл изображения, или введите путь и имя файла изображения в поле «Задать источник».
  7. Повторите шаг 5 и 6 для всех остальных изображений, которые необходимо изменить. Используйте действие «Замена изображений» для всех изображений, которые необходимо заменить одновременно; иначе соответствующее действие «Восстановление замененных изображений» не сможет восстановить их одновременно.
  8. Выберите параметр «Предварительная загрузка изображений», чтобы кэшировать новые изображения, когда страница загружена.

    Это предотвращает задержку при загрузке, когда изображение должно появиться.

  9. Нажмите кнопку «ОК» и убедитесь в том, что событие по умолчанию верно.

Использование поведения «Проверить форму»

Поведение «Проверить форму» проверяет содержимое указанных текстовых полей, гарантируя правильность типов данных, введенных пользователем. Необходимо назначать это поведение отдельным текстовым полям с событием onBlur, чтобы проверять поля, когда пользователь заполняет форму, или назначать его форме с событием onSubmit, чтобы проверять отдельные поля одновременно, когда пользователь нажимает кнопку «Отправить». Назначение этого поведения форме предотвращает ее отправку с недопустимыми данными.

  1. Чтобы вставить форму, выберите «Вставка» > «Форма» или нажмите кнопку «Форма» на панели «Вставка».
  2. Чтобы вставить текстовое поле, выберите «Вставка» > «Текстовое поле» или нажмите кнопку «Текстовое поле» на панели «Вставка».

    Повторите эти шаги, чтобы вставить дополнительные текстовые поля.

  3. Выберите метод проверки.
    • Чтобы проверить отдельные поля, когда пользователь заполняет форму, выберите текстовое поле и выберите пункт «Окно» > «Поведение».

    • Чтобы проверить несколько полей, когда пользователь отправляет форму, щелкните тег <form> в селекторе тегов в левом нижнем углу окна «Документ» и выберите «Окно» > «Поведение».

  4. Выберите «Проверить форму» в меню «Добавить поведение».
  5. Выполните одно из следующих действий.
    • При проверке отдельных полей выберите такое же поле, как и поле, выбранное в окне «Документ» в списке «Поля».

    • При проверке нескольких полей выберите текстовое поле в списке «Поля».

  6. Выберите параметр «Обязательно», если поле обязательно должно содержать какие-либо данные.
  7. Выберите один из следующих вариантов «Принять».

    Любой элемент

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

    Используйте адрес электронной почты

    Проверяет, что поле содержит символ «@».

    Число

    Проверяет, что поле содержит только числа.

    Число, начиная с

    Проверяет, что поле содержит число из заданного диапазона.

  8. Если выбрана проверка нескольких полей, повторите шаги 6 и 7 для остальных полей, которые необходимо проверить.
  9. Нажмите кнопку «ОК».

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

  10. Если проверяются отдельные поля, убедитесь, что onBlur или onChange являются событиями по умолчанию. В противном случае выберите какое-либо из них.

    Оба события вызывают поведение «Проверить форму», когда пользователь покидает поле. Их различие в том, что событие onBlur происходит, когда пользователь вводит текст, а событие onChange — только когда он изменяет содержимое поля. Событие onBlur предпочтительнее использовать, когда поле является обязательным.

 Adobe

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

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

Adobe MAX 2024

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

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

Adobe MAX

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

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

Adobe MAX 2024

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

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

Adobe MAX

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

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