Использование веб-форм для создания интерактивных веб-приложений

Использование Web Forms Designer (Конструктор Web Forms)

В отличие от формы Windows, страница Web Forms может содержать текст, добавленный непосредственно в нее во время работы в Конструкторе Web Forms в "потоковом" режиме. В этом режиме текст появляется сверху вниз, как это происходит в текстовом редакторе, таком, как Microsoft Word. В "потоковом" режиме вы можете вводить текст, редактировать его, а затем вносить изменения форматирования с помощью панели инструментов форматирования. Подобное манипулирование текстом обычно гораздо быстрее, чем добавление на веб-страницу элемента управления Label, содержащего этот текст. В следующем упражнении вы попрактикуетесь во вводе текста для вашего калькулятора аренды автомобиля.

Добавление текста в потоковом режиме

1. Щелкните в Конструкторе Web Forms на странице Web Forms, а затем откройте окно Properties (Свойства). Чтобы ввести текст непосредственно в форму, вы должны переключить Конструктор Web Forms из режима привязки к сетке в потоковый режим работы, но прежде, чем это сделать, вы должны выделить страницу Web Forms в дизайнере. Когда страница веб-формы будет выделена, в раскрывающемся списке Object (Объект) окна Properties (Свойства) появится метка DOCUMENT.
2. Измените свойство pageLayout объекта DOCUMENT на значение "FlowLayout". Visual Studio удалит со страницы Web Forms сетку. Вы можете переключаться между потоковым режимом и режимом с сеткой, изменяя свойство pageLayout при выделенном объекте DOCUMENT.
3. Снова щелкните на странице веб-формы. В верхней части страницы появится мигающий текстовый курсор.
4. Введите текст Калькулятор аренды автомобиля, а затем нажмите клавишу (Enter). Visual Studio отобразит заголовок вашего веб-приложения на странице веб-формы точно так, как он появится, когда вы запустите эту программу в браузере.

5. Введите под заголовком приложения следующее предложение:

   Введите требуемую информацию и нажмите Вычислить!

   Теперь отформатируйте заголовок, используя жирный шрифт и увеличив его размер.
6. Выделите текст "Калькулятор аренды автомобиля". Когда вы выделяете текст формы, панель инструментов форматирования выводит информацию о шрифте выделенного вами текста.

7. Щелкните на панели инструментов форматирования на кнопке Bold (Полужирный) и установите размер шрифта равным 5. В веб-приложениях размер шрифта указывается не в пунктах, а в относительных величинах. (Размер шрифта 5 примерно равен 18-пунктовому шрифту.) Ваш экран будет выглядеть примерно так.

   

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

Теперь изучите код HTML для текста, который вы ввели.

Просмотр HTML страницы веб-формы

1. Щелкните на закладке HTML в нижней части Конструктора Web Forms. Закладка HTML отображает реальный код HTML вашей страницы Web Forms. Чтобы увидеть код полностью, вы можете временно закрыть окно Области элементов. Код HTML для страницы Web Forms имеет вид, как показано на рисунке на следующей странице.

   Страница Web Forms состоит из информации о файле и документе, кодов форматирования, называемых тэгами HTML, которые заключены в угловые скобки, и текста и объектов, отображаемых на вашей странице веб-формы. Эта страница веб-формы довольно короткая - она содержит заголовок с информацией о языке, который вы выбрали при создании веб-приложения, об имени файла, содержащего код, и обо всех наследуемых формах. Тег body определяет начало документа; теги обычно всегда появляются парами, так что вы можете ясно видеть, где раздел начинается, а где заканчивается. Обратите внимание, что текст "Калькулятор аренды автомобиля" находится в строке HTML, которая форматирует этот текст как strong (полужирный) с размером шрифта 5. Под этим текстом отображается вторая введенная вами строка текста.

   

   
   увеличить изображение
   
   Совет. HTML просматривается в режиме редактирования, так что сейчас вы можете изменить введенный вами текст с помощью стандартных методик редактирования текста. Если у вас есть некоторые знания HTML, вы также можете добавить дополнительные теги форматирования и содержимое документа.
2. Чтобы отобразить страницу веб-формы в просмотре Design (Конструктор), щелкните на закладке Design (Конструктор) и откройте закрытое вами окно Области элементов.
3. Выберите в раскрывающемся списке Object (Объект) окна Properties (Свойства) объект DOCUMENT.
4. Установите свойство pageLayout на значение GridLayout. Вы закончили добавлять текст на страницу веб-формы и можете переключиться с потокового режима в режим сетки.

Потоковый режим и режим сетки

Зачем нужно два режима разметки - потоковый и режим сетки? Каждый режим разметки имеет свои преимущества и недостатки, но главная цель состоит в том, чтобы предоставить вам как разработчику веб-приложения различные способы управления тем, как выглядит веб-форма в веб-браузере. Режим сетки позволяет точно позиционировать, задавать размер объектов на странице веб-формы, и даже накладывать объекты друг на друга. Недостатком является то, что режим сетки генерирует более сложный код HTML для позиционирования объектов, который может не отображаться должным образом в более старых браузерах. Если вы хотите, чтобы ваше веб-приложения хорошо отображалось в широком спектре веб-браузеров, установите свойство pageLayout на значение FlowLayout и свойство targetSchema на значение Internet Explorer 3.02 / Navigator 3.0.