назад | содержание | вперед

Пример создания DHTML-проекта

Создадим проект DHTML, который будет представлять собой форму для ввода информации о покупателе (наименование компании, фамилия, имя, отчество представителя, почтовый индекс, страна, регион, город, адрес). Назовите Проект Customer, а DHTML-СТраницу — InputCustomer.

Нажмите кнопку DHTML Page Designer Properties, расположенную на панели инструментов окна. Перед вами откроется диалоговое окно Свойства: InputCustomer (рис. 19.4). Выберите в нем опцию Save HTML in an external file, чтобы созданная нами Web-страница была сохранена в виде документа HTML. Далее укажите место на диске и имя создаваемого HTML-документа.

Рис. 19.4. Окно определения свойств проекта DHTML

С помощью кнопки New вы можете создать новый HTML-файл, а с помощью Open — открыть существующий.

Вернитесь в окно DHTML Project. На панели элементов управления выберите текстовое поле для ввода компании и добавьте его в правую часть окна конструктора DHTML. Назовите поле txtccompany. Теперь определим для этого поля надпись, отражающую его предназначение. При работе с обычной формой Visual Basic, а не с конструктором DHTML, мы бы использовали самый привычный способ: добавление элемента управления Label. Однако при проектировании HTML-документа достаточно установить курсор справа от поля ввода и ввести текст так же, как в редакторе Microsoft Word.

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

Для того чтобы вставить таблицу в DHTML, нажмите кнопку Table operations, далее в появившемся меню выберите Insert Table. Перед вами таблица, состоящая из двух строк и двух столбцов. В левом столбце расположите метки, в правом — поля для ввода. Двух строк в таблице недостаточно, поэтому добавьте их, нажав кнопку Table Operations и выбрав Insert Row.

Теперь перетащите в таблицу уже добавленный компонент и текстовое примечание к нему, а также добавьте все остальные компоненты, которые потребуются для ввода информации о покупателе. Настроить их свойства можно так же, как вы это делали с обычными компонентами Visual Basic — с помощью окна Properties. В частности, вам необходимо настроить их наименования и допустимую длину вводимых значений (табл. 19.4).

Таблица 19.4. Настройка свойств объектов в проекте Customer

В начало документа добавьте заголовок, а в конец — кнопку, которой пользователь будет подтверждать ввод и осуществлять передачу введенных данных на Web-сервер (о том, как это организовать, будет сказано позже). Внешний вид готового проекта Customer показан на рис. 19.5.

Рис. 19.5. Внешний вид готового проекта Customer

Рис. 19.6. Тестирование проекта Customer

Чтобы проверить работу проекта, нажмите клавишу <F5>. При этом откроется окно программы Internet Explorer, в котором вы увидите созданный вами HTML-документ (рис. 19.6). Чтобы вернуться в режим редактирования, закройте Internet Explorer и остановите программу.

назад | содержание | вперед

Поделитесь этой записью или добавьте в закладки