Иллюстрированный самоучитель по Adobe Dreamweaver MX

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

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

    В главе 12, когда говорилось об анимации на Web-страницах и способах ее создания, очень часто упоминались Web-сценарии. В этой главе мы их рассмотрим подробнее. | Как вы уже знаете, Web-сценарии позволяют преодолеть ограничение HTML, обусловленное его природой языка разметки страницы.
  • Подробнее о Web-сценариях. Зачем нужны Web-сценарии.

    Здесь будет рассказано о задачах, успешно решаемых с использованием Web-сценариев. Далее будет дан краткий урок основ JavaScript, после чего мы с вами перейдем к рассмотрению стандартных сценариев, поддерживаемых Dreamweaver.
  • Язык JavaScript

    Выше автор предупреждал, что не будет давать вам полный курс JavaScript. Эта книга не о JavaScript, а о Macromedia Dreamweaver MX, а все остальное вторично. Если вы хотите побольше узнать о JavaScript, принципах написания программ на этом языке и, вообще, о "классическом" программировании, найдите хорошие книги по этой теме. А мы вернемся к Dreamweaver.
  • Объекты

    Выше были рассмотрены два вида переменных: обычные переменные, иначе говоря, скаляры и массивы. Скаляры могут содержать только одно значение, массивы же – множество пронумерованных значений, доступ к которым можно получить по их номеру – индексу.
  • Объектная модель документа (DOM)

    А теперь настало время поговорить о классах и объектах Web-обозревателя подробнее. | Давайте посмотрим на какую-нибудь Web-страницу. Что она собой представляет? Фактически, иерархию элементов. Мельчайшие элементы страницы, например текстовые абзацы, являются потомками более крупных и сложных элементов, например, свободно позиционируемых элементов.
  • Как пишутся Web-сценарии

    Вот и закончился ликбез по JavaScript и объектной модели документов. Пришло время поговорить о том, как же пишутся Web-сценарии. | Прежде всего, выясним, как JavaScript-код помещается в HTML-код. Для этого служит парный тег <SCRIPT>…</SCRIPT>, внутри которого помещается код сценария.
  • Простейший Web-сценарий

    Давайте создадим простейшую Web-страничку, содержащую работающий Web-сценарий. Этот сценарий будет выводить текущие дату и время. | <HTML> | <HEAD> | <TITLE>Сегодня</TITLE> | </HEAD> | <BODY> | <SCRIPT LANGUAGE="JavaScript"> | var d; | d = new Date(); | document.write(d.toString());
  • Более сложный Web-сценарий

    В прошлой главе говорилось об анимации. Давайте же рассмотрим Web-сценарий, анимирующий какой-либо элемент страницы, а именно, заставляющий его двигаться по горизонтали взад-вперед. Вы увидите, что все это делается очень просто и довольно очевидно. | <HTML> | <HEAD> | <TITLE>Анимация</TITLE>
  • Web-сценарии – подход Dreamweaver. Поведения.

    Сейчас, когда все объяснено, вам может показаться, что писать Web-сценарии проще простого. Однако это совсем не так. Web-программирование – штука очень и очень непростая. Хотя бы из-за того, что вам придется держать в голове множество имен объектов, классов, свойств, методов и событий, с помощью которых создается тот или иной эффект.
  • Работа с поведениями. Панель Behaviors.

    Здесь мы изучим приемы работы с поведениями в нашем любимом Dreamweaver. Изучать мы их будем на примере страницы default2.htm, созданной в качестве новой главной страницы первого сайта Sample site 1. Откройте ее в окне документа.
  • Создание поведений. Вызов JavaScript-кода (CallJavaScript).

    Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver, их создание и все их параметры, которые вы можете задать. | Название поведения в терминологии самого Dreamweaver приведено в скобках, так что вы сразу сможете найти его в меню поведений.
  • Изменение значения свойства (Change Property)

    Чтобы изменить в ответ на происшедшее событие значение какого-либо свойства того или иного объекта, воспользуйтесь поведением change Property. Выберите одноименный пункт меню поведений. На экране появится диалоговое окно Change Property (рис. 13.8).
  • Перенаправление на другую страницу в зависимости от версии Web-обозревателя (Check Browser)

    Несовместимость различных Web-обозревателей уже давно стала притчей во языцех. В качестве решения этой проблемы Web-дизайнеры очень часто создают различные версии одной и той же Web-страницы, предназначенные для разных Web-обозревателей.
  • Проверка наличия модуля расширения (Check Plugin)

    В главе 4, посвященной графическим изображениям и мультимедийным элементам, помещаемым на Web-страницы, говорилось о модулях расширения Web-обозревателя – специальных программах, работающих совместно с Web-обозревателем и предназначенных для обработки не поддерживаемых им непосредственно данных.
  • Управление фильмом Shockwave или Flash (Control Shockwave or Flash)

    Видеоролики разной длины и различного качества часто используются на современных Web-страницах. Нередко они управляются Web-сценариями. | Так, фильм Flash может запускаться в ответ на нажатие кнопки или наведение курсора мыши на какой-либо элемент страницы.
  • Перетаскивание свободно позиционируемого элемента (Drag Layer)

    Мы уже говорили об анимированных элементах страницы. Однако вы можете предоставить возможность пользователю самому перетаскивать свободно позиционируемые элементы по странице. Это может быть полезно, если вы делаете интерактивную игру, наподобие головоломки, учебное пособие или полноценную программу в виде Web-страницы.
  • Переход на заданный кадр анимации (Go To Timeline Frame). Переход на другую Web-страницу (Go to URL).

    При создании анимации на Web-страницах иногда бывает очень полезно "перескочить" на заданный кадр анимационной дорожки. Например, вы можете создать гиперссылку или кнопку, позволяющую посетителю сайта "перемотать" анимацию в начало.
  • Скрытие меню гиперссылок (Hide Pop-Up Menu). Открытие нового окна Web-обозревателя (Open Browser Window).

    Это поведение скрывает выведенное ранее на экран меню гиперссылок (о создании меню гиперссылок см. ниже). Как правило, Dreamweaver создает его сам, но иногда вам придется делать это самим. | После выбора в меню поведений пункта Hide Pop-Up Menu на экране появится небольшое окно-предупреждение.
  • Проигрывание аудиоклипа (Play Sound). Запуск проигрывания анимации (Play Timeline).

    В свете последних тенденций к наполнению Интернета мультимедийной информацией Dreamweaver предоставляет вам возможность в ответ на какое-либо событие проиграть аудиоклип с помощью поведения Play Sound. Для этого выберите пункт Play Sound меню поведений.
  • Вывод предупреждения (Popup Message)

    Очень часто для сообщения пользователю о чем-либо (например, необходимости ввести данные в поле ввода на странице) используются окна-предупреждения. Они представляют собой обычное стандартное предупреждение Windows: небольшое окно с текстом предупреждения, изображением восклицательного знака и кнопкой ОК. Для вывода такого предупреждения вы можете воспользоваться поведением Popup Message.
  • Предварительная загрузка графических изображений (Preload Images)

    Как вы помните из материала предыдущей главы, на Web-страницах часто используются анимированные картинки, представляющие собой обычный набор графических изображений, быстро сменяющих друг друга. Такая анимация в среде Dreamweaver создается очень просто, да и при "ручной" работе также не вызывает особой сложности у достаточно опытного Web-программиста.
  • Изменение изображения-элемента полосы навигации (Set Nav Bar Image)

    О полосе навигации речь шла в главе 7, посвященной фреймам и фреймовому дизайну. Как вы помните, при создании полосы навигации Dreamweaver создает также множество сценариев, обеспечивающих смену изображений каждого элемента в ответ на различные события.
  • Задание нового содержимого фрейма (Set Text of Frame) и свободно позиционируемого элемента (Set Text of Layer)

    Dreamweaver позволяет вам поместить новое содержимое в любой из фреймов текущего набора. Для этого выберите пункт Set Text of Frame в подменю Set Text меню поведений. На экране появится диалоговое окно Set Text of Frame.
  • Вывод текста в строке статуса окна Web-обозревателя (Set Text of Status Bar)

    Dreamweaver также позволяет вам вывести любой текст в строке статуса текущего окна Web-обозревателя. Это может быть использовано, например, для показа краткого описания гиперссылки, над которой находится курсор мыши, или просто краткого описания текущей страницы сайта.
  • Вывод на экран меню гиперссылок (Show Pop-Up Menu)

    В последнее время в моду вошли меню гиперссылок, раскрывающиеся после наведения курсора мыши на какой-либо элемент Web-страницы или щелчка по нему. Родоначальником этой моды, вероятно, были Web-дизайнеры, разрабатывавшие сайт фирмы Microsoft, после чего меню "разбежались" по другим сайтам и страницам.
  • Показ и скрытие свободно позиционируемых элементов (Show-Hide Layers)

    Показ и скрытие свободно позиционируемых элементов страницы можно использовать в разных целях. Например, показывать различные подсказки при наведении курсора мыши на гиперссылки или графические изображения.
  • Остановка проигрывания анимации (Stop Timeline)

    Поведение stop Timeline позволяет вам остановить проигрывание анимации, запущенной ранее поведением Play Timeline. Для его создания воспользуйтесь пунктом Stop Timeline подменю Timeline меню поведений. На экране появится диалоговое окно Stop Timeline (рис. 13.31). | Рис. 13.31.
  • Изменение графического изображения (Swap Image). Восстановление всех изначальных изображений (Swap Image Restore).

    Dreamweaver предоставляет вам возможность изменить рисунок, отображающийся в любом имеющемся на странице элементе графического изображения. Для этого используется поведение swap image; специальный Web-сценарий меняет значение атрибута SRC тега <IMG>. Это будет полезно во многих случаях.
  • Написание своих Web-сценариев. Особые случаи создания поведений. Привязка поведений к тексту.

    Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web-сценариев, которые могут быть созданы на страницах. Конечно, они покрывают 95% нужд начинающего и даже опытного Web-дизайнера, и у вас, возможно, очень и очень нескоро появится потребность писать JavaScript-код самим. И все же… | Но вспомните, что Dreamweaver – гибридный Web-редактор!
  • Поведения и анимации

    Вы познакомились с двумя, можно сказать, "детищами" Dreamweaver: анимацией и поведением. Они называются так потому, что не являются возможностями ни HTML, ни JavaScript, ни объектной модели документа DOM.
  • Отладка Web-сценариев. Какие ошибки бывают в программах.

    Но прежде, чем мы начнем говорить об отладке Web-сценариев, поговорим об ошибках и о том, как они выявляются. | Очень часто только что написанная программа содержит ошибки. Более того, если она имеет объем более десяти строк, будьте уверены – хоть одна ошибка там обязательно присутствует.
  • Встроенный отладчик Dreamweaver

    Чтобы вызвать встроенный в Dreamweaver отладчик JavaScript-кода, нажмите комбинацию клавиш ALT + F12 или CTRL + ALT + F12. Первая комбинация запускает отладку в первичном Web-обозревателе, а вторая – во вторичном. (О первичном и вторичном Web-обозревателях см.
  • Альтернативные технологии

    О недостатках Web-сценариев и их преодолении было написано в главе 12. Здесь же можно только кое-что добавить. А именно, опишем две альтернативные технологии, которые можно применять вместо сценариев для расширения функциональности Web-страниц.
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.