
- •Создание Web-документов
- •Общая характеристика Web-технологии
- •Язык html
- •Общая характеристика языка html
- •Синтаксис языка html
- •Структура html-документа
- •Размещение текста на странице
- •Рисунки
- •Использование таблиц стилей
- •Создание динамических страниц
- •Объекты броузера
- •Методы объектов
- •Обработка событий
- •Примеры сценариев
- •Визуализированные средства создания Web-страниц
- •Работа с проводником FrontPage.
- •Работа с редактором FrontPage.
- •Вставка фрагментов html-кода
- •Форматирование элементов с помощью таблиц стилей
- •Вставка в документ сценариев на языке JavaScript
- •Контрольне вопросы
Вставка в документ сценариев на языке JavaScript
Программа FrontPage обеспечивает поддержку практически всех технологий, используемых при создании Web-страниц. В том числе и сценариев, выполняемых на стороне клиента. С той целью в ее состав включен специальный редактор сценариев, вызов которого производится по команде Инструменты-Макрокоманда-Редактор Microsoft Script. Вид окна редактора приведен на рис. 6.21.
Рис. 6.21. Вид окна редактора сценариев
Окно редактора сценариев состоит из трех областей. В центре находится окно кода страницы, которая раскрыта в редакторе FrontPage.
Слева - окно, в котором выводится либо иерархия элементов страницы, либо иерархическая схема объектов со списком событий для каждого, либо панель элементов для размещения на странице. Переключение осуществляется с помощью закладок в нижней части окна или кнопок в верхней.
В правой области находится схема проекта и окно свойств объектов, в котором отображаются свойства объекта, выделенного на иерархической схеме объектов в левой области.
В ходе работы можно редактировать код непосредственно в окне, можно размещать элементы, перетаскивая их из панели в окно кода и задавая свойства в окне свойств, можно вставлять заготовки функций, связывая их с событиями. Все изменения, вносимые в код страницы, фиксируются и в окне редактора FrontPage.
Создание сценариев рассмотрим на примере вставки сценария для открытия окна, приведенного в п. 6.3.4.
Вначале в редакторе FrontPage создаем страницу, размещая все элементы и задавая оформление. При этом необходимо обратить внимание на то, чтобы все элементы были идентифицируемыми (имели атрибуты NAME или ID). Если при размещении идентификаторы не задаются автоматически, то их следует задать через свойства или непосредственно в режиме HTML.
После этого вызывается редактор сценариев и выполняются следующие действия.
Шаг 1. В окне свойств объекта Document (правая область) для свойства DefaultClientScript выбирается значение JavaScript. В левом окне выводится список объектов страницы (кнопка «Document Outline» в верхней части окна), выбирается нужный объект, и в окне свойств задаются необходимые значения для свойств (например, корректируются имена).
Шаг 2. На иерархической схеме (в левой области) находится значок события onClick объекта кнопка (при поиске ориентироваться на идентификатор) и выполняется двойной щелчок. В ответ на это редактор вставит в код страницы тег SCRIPT с заготовкой функции и атрибут onClick в тег INPUT.
Шаг 3. Ввести с клавиатуры операторы тела функции:
window.open("hlp.htm",
"new",
"scrollbars=yes,resizable=yes,width=300,height=200");
При работе с окном кода при включенном режиме «Auto Hide» (кнопка в верхней части окна) левое окно автоматически убирается с экрана. Для его вызова необходимо поместить курсор на серый прямоугольник с надписью Document Outline, Toolbox.
Шаг 4. При необходимости можно отредактировать код, убрав лишнее (например, комментарии). В качестве значения атрибута onClick задан оператор "return B3_onclick()", можно оставить только вызов функции, "B3_onclick()". Можно изменить имена, выбрав их с учетом каких-либо мнемонических правил. Задавая имена, не следует забывать о регистре (например, Heigth и height - разные имена).
Шаг 5. Переключиться в режим просмотра редактора Front Page и убедится в том, что результат соответствует ожидаемому.
Сценарий можно вставить и с использованием контекстного меню. Для этого курсор помещается в место размещения сценария, и в контекстном меню выбирается команда Insert Script Block-Client. В результате в документ будет вставлен тег SCRIPT, в который необходимо ввести с клавиатуры текст сценария.