АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

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

Читайте также:
  1. II.1.1 Разновидности метонимии и ее функция в процессе создания газетной экспрессии
  2. II.1.4. Семантический механизм создания образного сравнения
  3. III. Использование альфа-каналов
  4. MS EXCEL. Использование электронного табличного процессора excel: построение графиков. Взаимодействие excel с другими приложениями windows.
  5. V. Рабочее время и его использование
  6. V2: Текстовые редакторы. Таблицы.
  7. V2: Электронные таблицы.
  8. V2: Электронные таблицы. Встроенные функции.
  9. А. Н. Островский. История создания пьесы «Снегурочка».
  10. А. Пояснения к таблице III. 1. «Расписание задействования рабочей силы на стройках по пятилеткам»
  11. А. Приращение продукции в результате создания дополнительных рабочих мест
  12. Абсолютные величины - величины, которые берут из статистических таблиц не преобразовывая их.

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

Давайте переделаем нашу форму так, чтобы не стыдно было поместить ее в Сеть. Сохраним предыдущий, "некрасивый" вариант и создадим новую страницу под названием 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. Готовая форма, созданная на основе таблицы и стилей


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.003 сек.)