Лекция 3 Split (Комбинированный)

Проектирование веб-страницы в VisualStudio 2010

Чтобы начать проектировать веб-страницу, дважды щелкните на веб-странице в окне Solution Explorer.

Если используется шаблон ASP.NET Empty Web Site, сначала понадобится создать новую страницу (щелкните правой кнопкой мыши на веб-сайте в окне Solution Explorer, выберите в контекстном меню пункт Add New Item (Добавить новый элемент) и укажите шаблон Web Form (Веб-форма)). Новая страница первоначально включает в себя лишь минимально необходимый объем разметки, но никакого видимого содержимого, и потому будет появляться в окне визуального конструктора как пустая страница.

Visual Studio предоставляет три режима для просмотра веб-страницы: Source (Исходный код), Design (Конструктор) и Split (Комбинированный). Выбрать желаемый режим можно, просто щелкнув на одной из трех имеющих соответствующие названия кнопок в нижней части окна с веб-страницей.

В режиме Source отображается разметка страницы (т.е. дескрипторы элементов управления HTML и ASP.NET), в режиме Design — отформатированное изображение того, как страница будет выглядеть в окне веб-браузера, а в режиме Split — комбинированное представление, позволяющее просматривать одновременно и разметку страницы, и ее окончательный внешний вид.

Формально страницы ASP.NET по большей части состоят из XHTML, и все элементы управления ASP.NET генерируют действительный XHTML-код, если только их не сконфигурировать по-другому. Однако здесь мы будем называть разметку веб-страницы HTML-кодом, поскольку в ней может использоваться HTML или похожий, но более строгий стандарт XHTML.

Добавить элемент управления ASP.NET на страницу легче всего, перетащив его из находящейся слева панели Toolbox (Панель инструментов). (Элементы управления в этой панели поделены на множество разных категорий на основе предоставляемых ими функций, но все базовые компоненты можно найти на вкладке Standard (Стандартные).)

Перетащить элемент управления можно как в область видимой структуры страницы (в режиме визуального конструктора), так и в определенную позицию в ее разметке (в режиме исходного кода). И в том и в другом случае результат будет одинаковым.

Существует также и альтернативный вариант: вручную ввести дескриптор требуемого элемента управления в режиме Source. В таком случае представление, отображаемое в режиме Design, не обновляется до тех пор, пока не будет либо выполнен щелчок в области проектирования окна, либо нажата комбинация клавиш для сохранения веб-страницы.

Добавив элемент управления, можно изменить его размер или сконфигурировать его свойства в окне Properties (Свойства). Многие разработчики предпочитают компоновать новые веб-страницы в режиме Design, но выполнять перегруппировку элементов управления или более детальную настройку — в режиме Source. Исключением являются лишь случаи, когда речь идет об HTML-разметке: хотя в панели Toolbox и имеется вкладка с HTML-элементами, обычно легче ввести дескрипторы необходимых элементов управления вручную, чем перетаскивать их на страницу по одному за раз.

На рисунке ниже показана веб-страница в режиме Split с исходной разметкой в верхней части и графической поверхностью в нижней:

Тем, у кого установлен широкоэкранный монитор, наверняка захочется, чтобы области в режиме Split отображались бок о бок (а не вверху и внизу). К счастью, Visual Studio позволяет легко получить такой вариант отображения. Все, что требуется сделать — это выбрать в меню Tools (Сервис) пункт Options (Параметры), в дереве параметров перейти в раздел HTML Designer --> General (Визуальный конструктор HTML --> Общие), выбрать опцию Split Views Vertically (Отображать представления вертикально) и щелкнуть на кнопке ОК.

Чтобы сконфигурировать элемент управления, сначала нужно щелкнуть на нем для его выбора или же выбрать его по имени в раскрывающемся списке в верхней части окна Properties (Свойства), а затем изменить все необходимые свойства, например, Text (Текст), ID (Идентификатор), ForeColor (Цвет переднего плана).

Эти установки автоматически преобразуются в соответствующие атрибуты дескрипторов элементов управления ASP.NET и определяют исходный внешний вид этих элементов. Visual Studio даже предоставляет специальные "селекторы" (известные как UITypeEditor), позволяющие выбирать расширенные свойства. Например, можно выбрать из раскрывающегося списка цвет или же сконфигурировать шрифт с помощью стандартного диалогового окна выбора шрифта.