Цены Ремонт Окон (Типовые работы) РЕМОНТ ОКОН. Произведём качественный ремонт ваших окон. У нас отличный сервис и приемлемые цены.

Использование таблиц и стилей для создания форм

Первая наша форма получилась не очень привлекательной на вид. Это естественно: ведь нашей задачей было научиться создавать формы, а не осваивать хитрости их форматирования. Но теперь-то мы умеем создавать формы и хотели бы научиться делать их покрасивее. Для этого можно использовать мощнейщие средства — таблицы и стили. Таблицы позволят нам располагать элементы управления в формах так, как нам необходимо, а стили заставят их выглядеть так, как нам нужно.

Давайте переделаем нашу форму так, чтобы не стыдно было поместить ее в Сеть. Сохраним предыдущий, "некрасивый" вариант и создадим новую страницу под названием 16.3.htm. Поместим в нее форму и зададим значения ее параметров, как у предыдущей формы, после чего на время оставим ее в покое.

Итак, что же мы хотим получить?

Давайте сделаем нашу новую форму в виде реальной печатной анкеты. Пусть она будет содержать две колонки: в левой будут помещаться надписи, в правой — элементы управления для ввода соответствующих данных. Такая форма будет неплохо выглядеть. Кроме того, у нас появилась фантазия сделать элементы управления инверсными — светлый текст на темном фоне.

Первое реализуется с помощью таблицы. Второе — посредством стилей.

Всего у нас шесть элементов управления (группу переключателей будем считать за один элемент управления, так же, как и пару кнопок Отправить (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. Готовая форма, созданная на основе таблицы и стилей

На правах рекламы: v= Купить ламинат Якутск http://atda.ru/katalog/vnutrennyaya-otdelka/laminat/ по оптовым ценам. | Доставка стеклопакетов прайс лист комплектующие для стеклопакетов. || +// +<

::  Меню ::

Введение

ЧАСТЬ I. КАК СДЕЛАТЬ ПРОСТЕЙШИЙ WEB-САЙТ
Глава 1. Как создаются Web-страницы
Глава 2. Основные принципы работы с Dreamweaver
Глава 3. Начинаем с текста
Глава 4. Рисунки, звуки, фильмы
Глава 5. Таблицы
Глава 6. Работа с Web-сайтом

ЧАСТЬ II. ЗАНИМАЕМСЯ ПРОФЕССИОНАЛЬНЫМ WEB-ДИЗАЙНОМ
Глава 7. Фреймы
Глава 8. Табличный дизайн
Глава 9. Использование шаблонов
Глава 10. Каскадные таблицы стилей
ЧАСТЬ III. ИСПОЛЬЗУЕМ НОВЕЙШИЕ ТЕХНОЛОГИИ
Глава 11. Свободно позиционируемые элементы
Глава 12. Анимация элементов Web-страниц
Глава 13. Использование сценариев
Глава 14. Метатеги и серверные директивы
ЧАСТЬ IV. ПИШЕМ СЕРВЕРНЫЕ ПРОГРАММЫ
Глава 15. Введение в серверное программирование
Глава 16. Формы
Глава 17. Простейшие серверные приложения
Глава 18. Создание интерактивных сайтов
Заключение
‹аминат в ванной комнате: описание и характеристики материала Ѓлагоустройство садовой территории Љому можно продать аварийное авто? Џреимущества покупки авиабилетов на Tickets.by
Џреимущества автоломбардов
На что обратить внимание, сдавая часы в ломбард
Ѓлагоустройство садовой территории


:: Реклама ::

  Как создаются Web-страницы?
 


:: Статистика ::


Індекс цитування
Яндекс.Метрика

:: Навигация ::

Главная
Гостевая книга
Добавить в избраное  

 

 

 


Copyright © Asentli, 2008-2010