Учебник Macromedia Dreamweaver (стр. 119 из 135)
Поле ввода имени файла внешне представляет собой обычное поле ввода. Справа от него расположена кнопка Обзор (Browse), открывающая стандартное диалоговое окно открытия файла Windows. И поле ввода, и кнопка представляют собой один элемент управления.
Для помещения в форму поля ввода имени файла используется кнопка File Field (рис. 16.19) панели объектов или пункт File Field подменю Form Objects меню Insert. Доступные параметры показаны на рис. 16.20.
Рис. 16.19. Кнопка File Field панели объектов
В поле ввода FileField Name вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт
Name в контекстном меню поля ввода и изменить это имя в появившемся на экране диалоговом окне Change Attribute.
Рис. 16.20. Вид редактора свойств при выделенном поле ввода имени файла
В поле ввода Char Width задается ширина поля ввода, т. е. его горизонтальный размер, в символах.
В поле ввода Max Chars задается максимальное количество символов, которое может быть введено в данное поле ввода. Это число может быть больше, чем Char Width; тогда содержимое поля ввода будет прокручиваться по горизонтали.' Но ни в коем случае не задавайте Max Chars меньше, чем Char Width.
Очень странно, но поля ввода Init Val, в котором задается начальное значение имени файла, в этом случае не предусмотрено. Однако вы можете выбрать в контекстном меню поля ввода пункт Value и изменить начальное значение в диалоговом окне Change Attribute.
Примечание
Поле ввода имени файла создается с помощью одинарного тега <INPUT TYPE="file">.
Графическая кнопка
Графическая кнопка — это обычное графическое изображение, "по совместительству" выполняющее функцию кнопки отправки данных, т. е. при щелчке по такому изображению данные, введенные в форму, будут отправлены серверной программе.
Для помещения графической кнопки в форму используется кнопка Image Field (рис. 16.21) панели объектов или пункт Image Field подменю Form Objects меню Insert. После этого на экране появится диалоговое окно Select File, в котором вы должны будете выбрать файл графического изображения. После нажатия кнопки открытия графическая кнопка будет создана.
Доступные параметры графической кнопки показаны на рис. 16.22.
Рис. 16.21. Кнопка Image Field панели объектов
Рис. 16.22. Вид редактора свойств при выделенной графической кнопке
В поле ввода ImageField вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт Name в контекстном меню графической кнопки и изменить это имя в появившемся на экране диалоговом окне Change Attribute.
Графическая кнопка отправляет серверной программе целых две пары значений вида:
<Имя графической кнопки>.х=Х <Имя графической кнопки>.y=Y
где х и Y — координаты точки на графической кнопке, на которой пользователь щелкнул мышью.
В полях ввода W и Н вводятся, соответственно, ширина и высота графической кнопки в пикселах. Dreamweaver сам рассчитывает эти величины и помешает их в названные поля. Если вы хотите уменьшить или увеличить графическую кнопку, измените их вручную. Маркеров изменения размеров Dreamweaver в этом случае почему-то не предусматривает.
В поле ввода Src задается имя файла графического изображения. Вы также можете щелкнуть значок папки, расположенный справа от поля ввода, и выбрать нужный файл в диалоговом окне Select File. Вызвать это окно вы можете, выбрав пункт Source File в контекстном меню графической кнопки.
В поле ввода Alt задается "альтернативный" текст, отображаемый вместо графической кнопки, если она еще не загружена, или если пользователь запретил загрузку графических изображений в настройках Web-обозревателя. Вы также можете выбрать в контекстном меню графической кнопки пункт Alt Text и задать этот текст в появившемся на экране диалоговом окне Change Attribute.
Раскрывающийся список Align задает, каким образом графическая кнопка будет выравниваться относительно окружающего ее содержимого страницы. Здесь доступны следующие пункты:
· Тор — верх кнопки выравнивается по верхнему краю окружающего текста;
· Middle - середина кнопки выравнивается посередине окружающего текста;
· Left — кнопка прижимается к левому краю страницы. Все остальное содержимое страницы обтекает кнопку;
· Right — кнопка прижимается к правому краю страницы;
· Browser Default — выравнивание по умолчанию, как правило, аналогично Bottom.
Вообще-то, чтобы получить нужный результат, вам придется поэкспериментировать с различными значениями этого параметра.
Кнопка Edit Image позволит вам запустить программу графического редактора для того, чтобы отредактировать изображение. При этом будет запущена программа, зарегистрированная для данного типа графических файлов по умолчанию. Вы также можете выбрать пункт Edit With <название программы> контекстного меню графической кнопки.
Примечание
Графическая кнопка создается с помощью одинарного тега <INPUT TYPE= " image ">.
Скрытое (невидимое) поле
Скрытое поле — это особый элемент управления, вообще не отображающийся в Web-странице. Значение, изначально присвоенное скрытому полю, не может быть изменено посетителем сайта. Можете считать, что это своего рода "тайные" данные, "спрятанные" в форме и недоступные посетителю.
Скрытое поле обычно используется в формах, генерируемых серверными программами. В частности, если покупатель электронного магазина щелкает по некому товару, серверная программа выдаст ему форму оформления заказа, в которую с помощью скрытого поля "внедрено" имя этого покупателя. После того как другая серверная программа получит данные о заказе, она может сразу же выяснить, кем заказан товар. В статических же страницах полезность скрытого поля весьма сомнительна.
Для помещения в форму скрытого поля используется кнопка Hidden Field (рис. 16.23) панели объектов или пункт Hidden Field подменю Form Objects меню Insert. Помещенное в форму скрытое поле показано на рис. 16.24. а очень немногие доступные для него параметры — на рис. 16.25.
Рис. 16.23. Кнопка Hidden Fieldпанели объектов
Рис. 16.24. Помещенное на страницу скрытое поле
Рис. 16.25. Вид редактора свойств при выделенном скрытом поле
В поле ввода HiddenField вводится уникальное имя элемента управления. Dreamweaver автоматически подставит туда сгенерированное им самим имя, но вам сразу же следует его изменить. Вы также можете выбрать пункт Name в контекстном меню скрытого поля и изменить это имя в появившемся на экране диалоговом окне Change Attribute.
В поле ввода Value задается значение, которое будет отправлено скрытым полем серверной программе. Вы также можете выбрать пункт Value в контекстном меню скрытого поля и задать значение в появившемся на экране диалоговом окне Change Attribute.
Примечание
Скрытое поле создается с помощью одинарного тега <INPUT TYPE="hidden">.
Дополнительные элементы управления
Дополнительные элементы управления служат не для ввода данных, а для удобства посетителя страницы. Они поддерживаются только достаточно новыми программами Web-обозревателей, а именно Internet Explorer, начиная с версии 5.0, Navigator, начиная с версии 6.0, и всеми версиями Opera и Mozilla.
Метка
Метка — это просто текстовая подпись, добавляемая к обычному элементу управления, например, полю ввода или переключателю.
Чтобы привязать метку к элементу управления, выделите его и нажмите кнопку Label (рис. 16.26) панели объектов или выберите пункт Label подменю Form Objects меню Insert. После этого Dreamweaver переключится в режим отображения содержимого страницы и ее HTML-кода, и в окне документа вы увидите такой код:
<LABEL> ...Код элемента управления... </LABEL>
Рис. 16.26. Кнопка Label панели объектов
Как видите, метка создается с помощью парного тега <LABEL>. HTML-код элемента управления, к которому привязывается метка, находится внутри этого тега. Текст же метки вводится также внутрь этого тега, перед кодом элемента управления или после него. В первом случае текст метки появится перед элементом управления, а во втором — после него.
Например, следующий код поместит на Web-странице метку и -- после нее — поле ввода:
<LABEL>Полеввода <INPUT TYPE="text" NAME="textfield"></LABEL>
А этот код поместит поле ввода ниже метки:
<LABEL>Полеввода<BR><INPUT TYPE="text" NAME="textfield"></LABEL>
Можете проверить — оба этих фрагмента кода действительно работают.
Группа
Группа элементов управления — это простой прямоугольник, объединяющий несколько элементов управления и имеющий текстовую метку.
Чтобы объединить несколько элементов управления в группу, выделите их и нажмите кнопку Fieldset (рис. 16.27) панели объектов или выберите пункт Fieldset подменю Form Objects меню Insert. После этого Dreamweaver переключится в режим отображения содержимого страницы и ее HTML-кода и выведет небольшое диалоговое окно Fieldset, показанное на рис. 16.28. Введите в единственное поле ввода этого окна текст метки и нажмите кнопку ОК.