Использование пакета Dreamweaver


Использование сценариев


ГЛАВА 13 Использование сценариев
ГЛАВА 13. Использование сценариев В главе 12, когда говорилось об анимации на Web-страницах и способах ее создания, очень часто упоминались Web-сценарии. В этой главе мы их рассмотрим подробне...
Webсценарии — подход Dreamweaver Поведения
Web-сценарии — подход Dreamweaver. Поведения Сейчас, когда все объяснено, вам может показаться, что писать Web-сценарии проще простого. Однако это совсем не так. Web-программирование — штука о...
Таблица 13 2 Поведения поддерживаемые Dreamweaver
Таблица 13.2. Поведения, поддерживаемые Dreamweaver Название в терминологии Dreamweaver Описание...
Таблица 13 3 События поддерживаемые Dreamweaver
Таблица 13.3. События, поддерживаемые Dreamweaver Название Описание onAbort onBlur...
Работа с поведениями
Работа с поведениями Здесь мы изучим приемы работы с поведениями в нашем любимом Dreamweaver. Изучать мы их будем на примере страницы default2.htm, созданной в качестве новой главной страницы...
Панель Behaviors
Панель Behaviors Вся работа с поведениями будет протекать в специальной панели Behaviors. Чтобы вызвать ее на экран, включите пункт-выключатель Behaviors меню Window или нажмите комбинацию кл...
Рисунок 13 3 Панель Behaviors
Рисунок 13.3. Панель Behaviors Большую часть этой панели занимает список уже созданных к этому време,-ни поведений, привязанных к выделенному в окне документов элементу страницы. Наименование...
Рисунок 13 4 Меню событий панели Behaviors
Рисунок 13.4. Меню событий панели Behaviors Чтобы отобразить в этом меню только события, поддерживаемые какой-либо программой Web-обозревателя, выберите пункт Show Events For. На экране появи...
Таблица 13 4 Пункты подменю Show Events For меню событий
Таблица 13.4. Пункты подменю Show Events For меню событий Пункт подменю Отображаемые события...
Рисунок 13 5 Диалоговое окно Play Timeline
Рисунок 13.5. Диалоговое окно Play Timeline...
Внимание
Внимание Когда будете изменять событие или параметры поведения, не забудьте выделить в окне документа нужный элемент страницы. В верхней части панели Behaviors находятся четыре кнопки: +,...
Рисунок 13 6 Меню поведений панели Behaviors
Рисунок 13.6. Меню поведений панели Behaviors Итак, чтобы создать новое поведение, сначала выделите нужный элемент страницы. Вы также можете привязать поведение к самой странице, для чего щел...
Создание поведений
Создание поведений Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver, их создание и все их параметры, которые вы можете задать. Название поведения в терминологии с...
Вызов JavaScriptкода (CallJavaScript)
Вызов JavaScript-кода (CallJavaScript) Если вы хотите, чтобы в ответ на какое-либо событие, произошедшее в том или ином элементе страницы, выполнялся некий JavaScript-код, создайте для этого э...
Рисунок 13 7 Диалоговое окно Call JavaScript
Рисунок 13.7. Диалоговое окно Call JavaScript В этом окне находится единственное поле ввода JavaScript, в котором вводится нужный программный код. Это может быть, например, вызов какой-либо ф...
Изменение значения свойства (Change Property)
Изменение значения свойства (Change Property) Чтобы изменить в ответ на происшедшее событие значение какого-либо свойства того или иного объекта, воспользуйтесь поведением change Property. Выб...
Рисунок 13 8 Диалоговое окно Change Property
Рисунок 13.8. Диалоговое окно Change Property Набор переключателей Property позволяет выбрать способ задания нужного свойства. Если выбран переключатель Select, вы сможете выбрать нужное сво...
Перенаправление на другую страницу
Перенаправление на другую страницу в зависимости от версии Web-обозревателя (Check Browser) Несовместимость различных Web-обозревателей уже давно стала притчей во языцех. В качестве решения эт...
Рисунок 13 9 Диалоговое окно Check Browser
Рисунок 13.9. Диалоговое окно Check Browser Интернет-адрес "основной" страницы задается в поле ввода URL. Интернет-адрес "альтернативной" страницы — в поле ввода Alt URL....
Проверка наличия модуля расширения (Check Plugin)
Проверка наличия модуля расширения (Check Plugin) В главе 4, посвященной графическим изображениям и мультимедийным элементам, помещаемым на Web-страницы, говорилось о модулях расширения Web-об...
Рисунок 13 10 Диалоговое окно Check Piugin
Рисунок 13.10. Диалоговое окно Check Piugin Группа переключателей Piugin задает способ, которым выбирается модуль расширения. Если вы включите переключатель Select (он, кстати, включен по умо...
Управление фильмом Shockwave или
Управление фильмом Shockwave или Flash (Control Shockwave or Flash) Видеоролики разной длины и различного качества часто используются на современных Web-страницах. Нередко они управляются Web-...
Рисунок 13 11 Диалоговое окно Control Shockwave or Flash
Рисунок 13.11. Диалоговое окно Control Shockwave or Flash Прежде всего, выберите соответствующий нужному фильму элемент <EMBED> или <OBJECT> в раскрывающемся списке Movie. Имейте...
Перетаскивание свободно позиционируемого
Перетаскивание свободно позиционируемого элемента (Drag Layer) Мы уже говорили об анимированных элементах страницы. Однако вы можете предоставить возможность пользователю самому перетаскивать...
Рисунок 13 12 Диалоговое окно Drag Layer (вкладка Basic)
Рисунок 13.12. Диалоговое окно Drag Layer (вкладка Basic) В раскрывающемся списке Layer выбирается свободный элемент, который вы хотите позволить посетителю перемещать. Вы можете выбрать ог...
Рисунок 13 13 Диалоговое окно Drag Layer (вкладка Advanced)
Рисунок 13.13. Диалоговое окно Drag Layer (вкладка Advanced) По умолчанию, чтобы перетащить свободный элемент на другое место, посетитель должен "ухватиться" мышью за любое его мест...
Подробнее о Webсценариях
Подробнее о Web-сценариях Здесь будет рассказано о задачах, успешно решаемых с использованием Web-сценариев. Далее будет дан краткий урок основ JavaScript, после чего мы с вами перейдем к рас...
Переход на заданный кадр анимации (Go To Timeline Frame)
Переход на заданный кадр анимации (Go To Timeline Frame) При создании анимации на Web-страницах иногда бывает очень полезно "перескочить" на заданный кадр анимационной дорожки. Напри...
Рисунок 13 14 Диалоговое окно Go To Timeline Frame
Рисунок 13.14. Диалоговое окно Go To Timeline Frame Прежде чем задать кадр анимации, нужно выбрать саму анимацию. Это делается в раскрывающемся списке Timeline. Номер же кадра вводится в поле...
Переход на другую Webстраницу (Go to URL)
Переход на другую Web-страницу (Go to URL) Иногда бывает нужно загрузить в текущем окне Web-обозревателя другую страницу, не дожидаясь, пока это сделает посетитель. Для таких случаев Dreamweav...
Рисунок 13 15 Диалоговое окно Go To URL
Рисунок 13.15. Диалоговое окно Go To URL Сам интернет-адрес задается в поле ввода URL. Вы также можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File. В списке...
Скрытие меню гиперссылок (Hide PopUp Menu)
Скрытие меню гиперссылок (Hide Pop-Up Menu) Это поведение скрывает выведенное ранее на экран меню гиперссылок (о создании меню гиперссылок см. ниже). Как правило, Dreamweaver создает его сам,...
Открытие нового окна Webобозревателя (Open Browser Window)
Открытие нового окна Web-обозревателя (Open Browser Window) Это поведение аналогично поведению GO to URL за тем исключением, что оно открывает новую страницу в новом окне Web-обозревателя. При...
Рисунок 13 16 Диалоговое окно Open Browser Window
Рисунок 13.16. Диалоговое окно Open Browser Window В поле ввода URL to Display задается интернет-адрес страницы, которая будет показана в новом окне. Вы можете нажать кнопку Browse и выбрать...
Проигрывание аудиоклипа (Play Sound)
Проигрывание аудиоклипа (Play Sound) В свете последних тенденций к наполнению Интернета мультимедийной информацией Dreamweaver предоставляет вам возможность в ответ на какое-либо событие проиг...
Рисунок 13 17 Диалоговое окно Play Sound
Рисунок 13.17. Диалоговое окно Play Sound Это диалоговое окно содержит одно-единственное поле ввода Play Sound, предназначенное для ввода имени аудиофайла, который будет проигран. Вы также мо...
Запуск проигрывания анимации (Play Timeline)
Запуск проигрывания анимации (Play Timeline) Конечно же, Dreamweaver предоставляет специальные поведения для управления проигрыванием анимации в ответ на какое-либо событие. Это реализуется с...
Вывод предупреждения (Popup Message)
Вывод предупреждения (Popup Message) Очень часто для сообщения пользователю о чем-либо (например, необходимости ввести данные в поле ввода на странице) используются окна-предупреждения. Они пр...
Рисунок 13 18 Диалоговое окно Popup Message
Рисунок 13.18. Диалоговое окно Popup Message Введите текст предупреждения в область редактирования Message и нажмите кнопку ОК. Вы можете использовать в тексте предупреждения любой JavaScri...
Предварительная загрузка графических
Предварительная загрузка графических изображений (Preload Images) Как вы помните из материала предыдущей главы, на Web-страницах часто используются анимированные картинки, представляющие собой...
Рисунок 13 19 Диалоговое окно Preload Images
Рисунок 13.19. Диалоговое окно Preload Images Файлы, которые должны быть предварительно загружены, перечислены в списке Preload Images. Чтобы добавить файл в этот список, введите его имя в по...
Изменение изображенияэлемента
Изменение изображения-элемента полосы навигации (Set Nav Bar Image) О полосе навигации речь шла в главе 7, посвященной фреймам и фреймовому дизайну. Как вы помните, при создании полосы навигац...
Рисунок 13 20 Диалоговое окно
Рисунок 13.20. Диалоговое окно Set Nav Bar Image (вкладка Basic)...
Рисунок 13 21 Диалоговое окно
Рисунок 13.21. Диалоговое окно Set Nav Bar Image (вкладка Advanced) В списке Also Set Image выбирается элемент полосы навигации, вид которого вы хотите изменить. В поле ввода То Image File...
Задание нового содержимого фрейма (Set Text of Frame)
Задание нового содержимого фрейма (Set Text of Frame) Dreamweaver позволяет вам поместить новое содержимое в любой из фреймов текущего набора. Для этого выберите пункт Set Text of Frame в подм...
Зачем нужны Webсценарии
Зачем нужны Web-сценарии Web-сценарии могут быть применены везде, где не может быть использован "чистый" HTML, т. е. там, где элементы страницы должны вести себя так, как стандартом...
Задание нового содержимого
Задание нового содержимого свободно позиционируемого элемента (Set Text of Layer) Dreamweaver позволяет вам поместить новое содержимое в любой из свободно позиционируемых элементов, имеющихся...
Вывод текста в строке статуса
Вывод текста в строке статуса окна Web-обозревателя (Set Text of Status Bar) Dreamweaver также позволяет вам вывести любой текст в строке статуса текущего окна Web-обозревателя. Это может быть...
Рисунок 13 22 Диалоговое окно Set Text of Status Bar
Рисунок 13.22. Диалоговое окно Set Text of Status Bar Это диалоговое окно содержит единственное поле ввода Message, в котором вводится текст, отображаемый в строке статуса. Введя его, нажмите...
Внимание
Внимание Учтите, что помещать посторонний текст в строку статуса окна Web-обозревателя сейчас считается дурным тоном. Поэтому используйте эту возможность только тогда, когда без нее дейст...
Вывод на экран меню гиперссылок (Show PopUp Menu)
Вывод на экран меню гиперссылок (Show Pop-Up Menu) В последнее время в моду вошли меню гиперссылок, раскрывающиеся после наведения курсора мыши на какой-либо элемент Web-страницы или щелчка по...
Внимание
Внимание Перед тем как создать меню гиперссылок, дайте элементу страницы, к которому оно привязывается, уникальное имя. Выберите в меню поведений пункт Show Pop-Up Menu. На экране появитс...
Рисунок 13 23 Диалоговое окно
Рисунок 13.23. Диалоговое окно Show Pop-Up Menu (вкладка Contents) Чтобы создать новый пункт меню гиперссылок, введите его текст в поле ввода Text. В поле ввода Link вводится интернет-адрес с...
Внимание
Внимание Dreamweaver и в этом случае верен своему кредо!.. Если вы введете русский текст в поле ввода Text, он будет искажен до неузнаваемости. Поэтому либо задавайте для пунктов меню гип...
Рисунок 13 24 Кнопка Indent Item
Рисунок 13.24. Кнопка Indent Item вкладки Contents диалогового окна Show Pop-Up Menu Результат показан на Рисунок 13.25. В данном случае пункт Links станет единственным пунктом подменю, раск...
Рисунок 13 25 Подменю в меню гиперссылок
Рисунок 13.25. Подменю в меню гиперссылок Чтобы вернуть пункт из подменю в основное меню или подменю более высокого уровня, нажмите кнопку Outdent Item (Рисунок 13.26)....
Рисунок 13 26 Кнопка Outdent Item
Рисунок 13.26. Кнопка Outdent Item вкладки Contents диалогового окна Show Pop-Up Menu Вкладка Appearance диалогового окна Show Pop-Up Menu (Рисунок 13.27) позволит вам настроить внешний вид...
Рисунок 13 27 Диалоговое окно
Рисунок 13.27. Диалоговое окно Show Pop-Up Menu (вкладка Appearance) С помощью раскрывающегося списка, расположенного выше всех остальных элементов управления, вы можете выбрать расположение...
Рисунок 13 28 Диалоговое окно
Рисунок 13.28. Диалоговое окно Show Pop-Up Menu (вкладка Advanced) В поле ввода Border Width вводится толщина границы меню и подменю в пикселах. Селектор цвета Border Color задает цвет грани...
Рисунок 13 29 Диалоговое окно
Рисунок 13.29. Диалоговое окно Show Pop-Up Menu (вкладка Position) По умолчанию меню гиперссылок убирается с экрана сразу же после того, как посетитель уберет курсор мыши с элемента страницы,...
Внимание
Внимание При создании на странице меню гиперссылок Dreamweaver помещает в корневую папку сайта файл mm_menu.js, содержащий необходимые сценарии, и графическое изображение arrows.gif. Не у...
Показ и скрытие свободно позиционируемых
Показ и скрытие свободно позиционируемых элементов (Show-Hide Layers) Показ и скрытие свободно позиционируемых элементов страницы можно использовать в разных целях. Например, показывать различ...
Рисунок 13 30 Диалоговое окно ShowHide Layers
Рисунок 13.30. Диалоговое окно Show-Hide Layers Все имеющиеся на странице свободно позиционируемые элементы перечислены в списке Named Layers. Вы можете выбрать в этом списке любой из них и з...
Останов проигрывания анимации (Stop Timeline)
Останов проигрывания анимации (Stop Timeline) Поведение stop Timeline позволяет вам остановить проигрывание анимации, запущенной ранее поведением Play Timeline. Для его создания воcпользуйтесь...
Рисунок 13 31 Диалоговое окно Stop Timeline
Рисунок 13.31. Диалоговое окно Stop Timeline Это диалоговое окно содержит только раскрывающийся список Stop Timeline. В этом списке выбирается анимация, которую нужно остановить. Пункт ** ALL...
Изменение графического изображения (Swap Image)
Изменение графического изображения (Swap Image) Dreamweaver предоставляет вам возможность изменить рисунок, отображающийся в любом имеющемся на странице элементе графического изображения. Для...
Рисунок 13 32 Диалоговое окно Swap Image
Рисунок 13.32. Диалоговое окно Swap Image Все имеющиеся на странице графические изображения перечислены в списке Images. Выберите нужное. После этого введите имя файла нового изображения в по...
Восстановление всех изначальных
Восстановление всех изначальных изображений (Swap Image Restore) Если вы хотите после вызова поведения swap image восстановить изображения, отображавшиеся на странице изначально, создайте пове...
Внимание
Внимание Создавать поведение Swap image Restore можно только после создания поведения Swap Image....
Написание своих Webсценариев
Написание своих Web-сценариев Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web-сценариев, которые могут быть созданы на страницах. Конечно, они пок...
Особые случаи создания поведений
Особые случаи создания поведений Итак, создание поведений и привязку их к элементам страницы и событиям мы рассмотрели. Но все это были весьма тривиальные случаи. Сейчас же поговорим кое о чем...
Привязка поведений к тексту
Привязка поведений к тексту Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его, к фрагменту т...
Язык JavaScript
Язык JavaScript Выше автор предупреждал, что не будет давать вам полный курс JavaScript. Эта книга не о JavaScript, а о Macromedia Dreamweaver MX, а все остальное вторично. Если вы хотите поб...
Поведения и анимации
Поведения и анимации Вы познакомились с двумя, можно сказать, "детищами" Dreamweaver: анимацией и поведением. Они называются так потому, что не являются возможностями ни HTML, ни Ja...
Рисунок 13 33 Кадр анимации в
Рисунок 13.33. Кадр анимации в канале поведений, к которому привязано поведение...
Рисунок 13 34 Поведение привязанное
Рисунок 13.34. Поведение, привязанное к кадру анимации, в списке панели Behaviors Таким образом, вы можете создать сколько угодно поведений, привязанных к кадрам анимации. Чтобы просмотреть п...
Отладка Webсценариев
Отладка Web-сценариев Но прежде, чем мы начнем говорить об отладке Web-сценариев, поговорим об ошибках и о том, как они выявляются....
Какие ошибки бывают в программах
Какие ошибки бывают в программах Очень часто только что написанная программа содержит ошибки. Более того, если она имеет объем более десяти строк, будьте уверены — хоть одна ошибка там обязате...
Рисунок 13 35 Сообщение о синтаксической
Рисунок 13.35. Сообщение о синтаксической ошибке Internet Explorer Логические ошибки — это ошибки в логике работы программы. Программный код выглядит абсолютно правильным, но работает непр...
Встроенный отладчик Dreamweaver
Встроенный отладчик Dreamweaver Чтобы вызвать встроенный в Dreamweaver отладчик JavaScript-кода, нажмите комбинацию клавиш <Alt>+<F12> или <Ctrl>+<Alt>+<F12>. Пер...
Внимание
Внимание Для того чтобы запустить отладчик Dreamweaver, вы должны иметь на своем компьютере установленную виртуальную машину Java фирмы Microsoft. Будьте внимательны: в составе Windows XP...
Альтернативные технологии
Альтернативные технологии О недостатках Web-сценариев и их преодолении было написано в главе 12. Здесь же можно только кое-что добавить. А именно, опишем две альтернативные технологии, которы...
Что дальше?
Что дальше? Ох, сколько всего можно сотворить на обычной Web-странице! Просто глаза разбегаются... Кстати, насчет глаз... То, что делалось до этого, в большинстве случаев затрагивает внешний...
Объекты
Объекты Выше были рассмотрены два вида переменных: обычные переменные, иначе говоря, скаляры и массивы. Скаляры могут содержать только одно значение, массивы же — множество пронумерованных зна...
Таблица 13 1 Некоторые методы класса Date
Таблица 13.1. Некоторые методы класса Date Метод Описание getDate ( )...
Объектная модель документа (DOM)
Объектная модель документа (DOM) А теперь настало время поговорить о классах и объектах Web-обозревателя подробнее. Давайте посмотрим на какую-нибудь Web-страницу. Что она собой представляет?...
Как пишутся Webсценарии
Как пишутся Web-сценарии Вот и закончился ликбез по JavaScript и объектной модели документов. Пришло время поговорить о том, как же пишутся Web-сценарии. Прежде всего, выясним, как JavaScrip...
Простейший Webсценарий
Простейший Web-сценарий Давайте создадим простейшую Web-страничку, содержащую работающий Web-сценарий. Этот сценарий будет выводить текущие дату и время. <HTML> <HEAD> <ТIТLЕ...
Рисунок 13 1 Текущая дата на Webстранице
Рисунок 13.1. Текущая дата на Web-странице Давайте рассмотрим наш пример подробнее. Если мы отбросим весь маловажный код, у нас останется единственный текстовый абзац <р>, внутри кото...
Более сложный Webсценарий
Более сложный Web-сценарий В прошлой главе говорилось об анимации. Давайте же рассмотрим Web-сценарий, анимирующий какой-либо элемент страницы, а именно, заставляющий его двигаться по горизонт...
Рисунок 13 2 Анимированный элемент страницы
Рисунок 13.2. Анимированный элемент страницы Уже не раз говорилось, что анимация всегда привязывается к системному таймеру. Это позволяет проигрывать одно и то же "кино" и на самых...








- Начало -    


Книжный магазин