Процесс добавления и размещения элементов управления не отличается от аналогичного процесса в визуальном конструкторе Windows Forms. Просто перетаскивайте элементы управления из панели Toolbox на поверхность конструктора. В данном случае вам нужны две метки, два текстовых поля и кнопка ОК (поскольку это не диалоговое окно, то выходить из него можно при помощи кнопки Cancel). Изменение свойств элементов управления выполняется точно таким же способом — через окно Properties. Здесь вы можете выбрать метки и командные кнопки и настроить их текст.
Примечание
По мере того, как вы добавляете элементы управления на Web-страницу, вы должны заметить, что режим размещения по умолчанию является относительным. То есть элементы управления размещаются на экране не в абсолютных координатах, а относительно друг друга. Абсолютное позиционирование обеспечивается использованием таблиц стилей. Например, вы можете выбрать метку, отредактировать свойства ее стиля и выбрать Absolutely Position в качестве режима ее позиционирования. Это позволит вам свободно перемещать метку по форме.
По умолчанию имеется и панель форматирования; она предоставляет кнопки для обычных действий форматирования текста, таких как: изменение шрифтов, цветов, отступ параграфов и выделение спецсимволами.
Для выравнивания элементов управления вы можете нажать комбинацию клавиш <Shift>+<Enter> для вставки необходимого интервала между элементами (при этом в HTML будет создан тег разбивки строки <br>). В данном случае тег разбивки был добавлен между первым текстовым полем и второй меткой, а также между вторым текстовым полем и первой кнопкой. На рис. 6.38 показан процесс конструирования. Текстовые поля не выровнены,
и, вероятно, вы захотите применить стиль к шрифтам меток и кнопкам; но общее размещение уже понятно. Обратите внимание, что визуальный конструктор отображает поле над текущим выделенным элементом управления, в котором указаны тип элемента управления и имя экземпляра элемента управления на данной странице.
Совет
Для облегчения выравнивания элементов управления включите либо линейку, либо сетку позиционирования, либо и то, и другое вместе; доступ к ним можно получить из меню View | Ruler and Grid.