Учебник Macromedia Dreamweaver (стр. 122 из 135)
Первое реализуется с помощью таблицы. Второе — посредством стилей.
Всего у нас шесть элементов управления (группу переключателей будем считать за один элемент управления, так же, как и пару кнопок Отправить (Submit) и Сброс (Reset)). Значит, нам понадобится таблица из шести строк и двух столбцов. Поместим такую таблицу в форму. Сделаем ей невидимую границу, а остальные параметры пока оставим без изменения. Можно также задать для таблицы значение ширины, отличное от 100%, либо убрать его совсем. Полученный результат показан на рис. 16.36.
Дальше уже совсем просто. В ячейки левого столбца помещаем надписи, а в ячейки правого — соответствующие им элементы управления. Вместо того чтобы создавать все заново, вы можете копировать надписи и элементы управления со страницы 16.2.htm, открыв ее в отдельном окне документа. В последнюю строку поместим кнопки: в левую ячейку — кнопку Отправить, а в правую — Сброс. Чтобы как-то их выделить, можете для последней строки таблицы задать выравнивание по правому краю.
Готовая форма будет выглядеть так, как показано на рис. 16.37.
Рис. 16.36. Таблица в форме
Рис. 16.37. Готовая форма, созданная на основе таблицы
Как видите, форма, построенная на основе таблицы, получилась значительно компактнее нашей первой формы. В этом проявилось одно из главнейших преимуществ таблиц — они позволяют представить объемные данные в удобном виде на небольшой площади.
Ну а уж задать "негативное" изображение для элементов управления проще простого! Создадим внутреннюю таблицу стилей и переопределим в ней с помощью специальных стилей теги <INPUT> (поля ввода и переключатели) и <SELEGT> (раскрывающийся список). Как это делается, вы уже знаете.
Здесь есть одна тонкость. После того как вы переопределите теги <INPUT> и <SELECT>, изображение в окне документа не изменится. Почему-то Dreamweaver не отображает результат применения стилей к этим тегам. Поэтому, чтобы просмотреть окончательный результат, сохраните страницу 16.3.htm и откройте ее в Web-обозревателе. У вас должно получиться нечто, похожее на рис. 16.38.
Вот и все о формах и элементах управления.
Рис. 16.38. Готовая форма, созданная на основе таблицы и стилей
Основные принципы разработки форм
Итак, вы познакомились с формами и элементами управления, выяснили, как эти формы создаются и используются. Настало время завершить разговор о формах некоторыми общими рекомендациями. А касаются эти рекомендации создания привлекательного и удобного интерфейса пользователя. Иначе говоря, привлекательных и удобных Web-форм.
Эти рекомендации пригодны не только для Web-форм, но и для обычных Windows-приложений. Фирма Microsoft, разработчик Windows, составила целый набор таких рекомендаций, где все высчитано и вымерено; доступны эти рекомендации на сайте http://www.microsoft.com. Однако нет смысла приводить их здесь: данные рекомендации слишком объемны, чтобы поместить их все в одну не слишком толстую книгу, вдобавок их без проблем можно найти в Сети. Ограничимся только несколькими замечаниями.
И еще раз повторимся: смотрите на реальные формы, реальные Windows-приложения. И учитесь на готовых примерах.
· Элементы управления в форме должны располагаться на достаточном расстоянии друг от друга, чтобы форма не выглядела скученной. Однако это расстояние не должно быть слишком большим, чтобы форма была компактной.
· Элементы в форме должны располагаться парами "надпись — элемент управления" по вертикали. (Если форма невелика, можно разместить их и по горизонтали.) Расстояние между этими парами должно быть несколько больше, чем между надписью и элементом управления. Учтите, что группа переключателей считается в этом случае одним элементом управления.
· Объединяйте элементы управления, задающие однотипные данные, в группы. Например, вы можете выделить в отдельную группу поля ввода имени и фамилии посетителя.
· Кнопки Отправить (Submit) и Сброс (Reset) должны располагаться отдельно от других элементов управления, чтобы посетитель случайно на них не нажал. Неплохо выделить их визуально, скажем, оформить как отдельную группу. Кроме того, расстояние между этими кнопками должно быть достаточно велико, чтобы посетитель случайно не нажал одну кнопку вместо другой.
· Сведите количество элементов управления в форме к минимуму. Например, подумайте, нужны ли отдельные поля ввода для задания имени и фамилии посетителя, не обойтись ли одним полем ввода? Нужна ли кнопка Сброс? (Если форма состоит из одного-двух элементов управления, так и не нужна.) Это позволит также уменьшить объем пересылаемых по Сети данных.
· Форма должна быть визуально отделена от остального содержимого страницы. Задайте для нее особый фон или поместите ее в рамку. Если форма достаточно велика, вынесите ее на отдельную страницу.
· Сделав форму, попробуйте сами ввести в нее данные. Определите, удобно ли вам. Если неудобно, переделайте. Только после этого публикуйте форму в Интернете.
И еще несколько рекомендаций, посвященных выбору элемента управления, наиболее подходящего для ввода каких-либо данных.
· Поля ввода прекрасно подходят для ввода данных, количество различных вариантов которых бесконечно велико (имени и фамилии, адреса электронной почты, домашние адреса и т. п.).
· Флажки замечательно подходят для задания признаков, которые либо могут быть, либо нет (классический пример — вопрос, хочет ли посетитель получать по электронной почте сводку новостей сайта или нет).
· Группы переключателей пригодятся в том случае, если нужно предоставить посетителю возможность выбирать один вариант из нескольких имеющихся, причем он должен видеть все представленные варианты выбора одновременно (пол, социальный статус и т. п.).
· Используйте списки, если количество вариантов выбора достаточно велико и группа переключателей в этом случае заняла бы слишком много места на форме (любимый телеканал, фирма-производитель принтера и т. п.).
· Используйте раскрывающиеся списки, если размер формы критичен, а посетителю необязательно видеть все представленные варианты (те же самые случаи).
Нет смысла говорить здесь о кнопках, обычных и графических, полях ввода файла и скрытых полях. У них достаточно специфическая область использования, и разговор на эту тему уже был.
Что дальше?
Вот вы и узнали, как делаются формы. Ничего сложного! Нужно только создать форму и правильно выставить все параметры ее элементов.
Но что-то автор все-таки забыл... Ах да — еще нужно написать серверную программу! Проклятый склероз... Ладно, это уже тема для следующей главы.
· Глава 17. Простейшие серверные приложения
o Подготовка к созданию серверных приложений
o Установление соединения с базой данных
o Создание источника данных ODBC
o Регистрация базы данных в Dreamweaver
o Создание серверных страниц в Dreamweaver
o Создание простейших серверных страниц
o Более сложные серверные страницы
o Создание набора данных
o Страница, отображающая данные
o Создание навигатора
o Создание строки статуса набора данных
o Страница для одновременного просмотра нескольких записей
o Привязка элементов управления к данным
o Создание сложных наборов данных
o Работа с динамическими атрибутами
o Получение данных от другой Web-страницы
o Создание фильтров
o Необязательные области серверной страницы
o Быстрое создание серверных страниц
o Что дальше?
ГЛАВА 17
Простейшие серверные приложения.
Дождались! Свершилось! Ура!!!
Мы будем писать серверные программы! Долго, очень долго мы шли к этому счастливому моменту. Изучали язык HTML, принципы Web-дизайна, таблицы стилей, формы и основы серверного программирования. Но все это в прошлом. Теперь мы готовы к будущему.
Мы полны сил. Нами движут лучшие помыслы. Наш Dreamweaver рвется в бой. Наш Web-сервер установлен и правильно настроен. (О том, как настраивать Microsoft Personal Web Server и Internet Information Server, читайте в поставляемой с ними документации.) Наш "статичный" Web-сайт давно работает и пользуется огромной популярностью. Наш кофе давно сварен и медленно остывает в чашке. Все готово к тому, чтобы сделать первый шаг в серверное программирование.
Ух, что мы сейчас сделаем! Какие мечты воплотим в жизнь! Мечтать — так мечтать, как говорил один из героев Александра Грина.
Ну, что ж, начнем, пожалуй. Только сначала подготовим почву для экспериментов. Давайте создадим гостевую книгу для нашего первого сайта Sample site 1. Сделаем так, чтобы посетители его смогли оставлять на особой страничке свои замечания и пожелания. Соответственно, для этого нам понадобится создать еще две Web-страницы: страницу, где выполняется ввод пожеланий и замечаний, и страницу, где уже введенные пожелания и замечания будут отображаться. Разумеется, это будут активные серверные страницы.
Подготовкак созданию серверных приложений
Давайте еще раз вспомним, что нам нужно для создания серверных приложений (точнее, активных серверных страниц) в среде Dreamweaver.
1. Полностью настроенный Web-сервер. Учтите, что, возможно, вам придется включить в его настройках поддержку серверных страниц. Хотя, если вы пользуетесь одним из Web-серверов фирмы Microsoft, вам не нужно это делать — в их настройках это включено по умолчанию.
2. База данных, если ваше приложение будет работать с данными. Возможно, вам придется заполнить ее какими-то данными, хотя бы для отладки создаваемых вами серверных приложений.