Основы работы в Dreamweaver



           

Создание веб-формы - часть 2


Совет. Иногда при добавлении в ячейки таблицы или при удалении из них большого количества данных возникают проблемы с отображением страницы в Dreamweaver. К примеру, во время выполнения этого шага пунктирная линия формы может перекрыть таблицу. Однако следует помнить, что проблема относится исключительно к отображению страницы на экране, а в соответствующем коде ошибок нет. Для того, чтобы увидеть, как страница будет выглядеть на самом деле, следует в селекторе тегов щелкнуть на крайнем левом теге <table>, после чего Dreamweaver перерисует таблицу.

  • В селекторе тегов щелкните на теге <table>, после чего на панели Property Inspector (Инспектор свойств) измените значение атрибута bgcolor (цвет фона) на #eeeeee (светло-серый).


    увеличить изображение

    Серый цвет фона отделяет форму от остального содержимого страницы, при этом привлекая внимание к текстовым полям, которые имеют более светлый оттенок.

  • Поместите над таблицей заголовок второго уровня (тег h2), содержащий текст "Send Us a Message" ("Пришлите нам сообщение").

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

    Результат предыдущих действий показан на приведенном рисунке.


    увеличить изображение

  • Поочередно выделите два первых текстовых поля и назовите их emailAddress и subject, соответственно. Выделите текстовую область, назовите ее body, а также присвойте параметру Char width значение 55, параметру Num Lines – значение 6, а параметру Wrap – значение Virtual.

    На этом шаге каждому полю присваивается осмысленный идентификатор, что облегчает задачу получения данных на странице messa-geSent.asp.

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


    увеличить изображение

  • В селекторе тегов выделите тег <form#form1>, после чего на панели Property Inspector (Инспектор свойств) присвойте выделенной форме имя frm_message. В поле Action (Действие) введите "messageSent.asp". В поле со списком Method (Метод) выберите вариант POST.

    В одном из предыдущих уроков при создании форм уже выполнялись настройки для полей Action (Действие) и Method (Метод). Выбранные настройки означают, что при нажатии кнопки Submit форма отправляет HTTP-запрос на страницу messageSent.asp, а введенные в форму данные помещаются в тело этого запроса.


    увеличить изображение

  • Сохраните и закройте файл contact.asp, а после этого загрузите его на сервер.

  • Итак, создание формы завершено. Теперь, чтобы она заработала, требуется передать полученные значения почтовому объекту.




    Содержание  Назад  Вперед