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

ASP.NET --- Основы ASP.NET --- Проектирование веб-страницы в 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), позволяющие выбирать расширенные свойства. Например, можно выбрать из раскрывающегося списка цвет или же сконфигурировать шрифт с помощью стандартного диалогового окна выбора шрифта.

Абсолютное позиционирование

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

Однако у разработчика также есть возможность применить и режим абсолютного (absolute) позиционирования с помощью стандарта CSS. Все, что от него требуется — это добавить для своего элемента управления внутристрочный CSS-стиль с параметрами абсолютного позиционирования. Например, ниже показан CSS-стиль, указывающий, что кнопка должна размещаться в точности в 100 пикселях от левого края и 50 пикселях от верхнего края страницы:

<asp:Button id="cmd" style="position: absolute; left: 100px; top: 50px;" 
runat="server" ... />  

После внесения такого изменения кнопка может перетаскиваться по окну в любое место, и Visual Studio будет автоматически обновлять указанные в стиле координаты соответствующим образом.

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

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

Например, вы могли бы применять режим абсолютного позиционирования для закрепления строки меню в какой-то определенной стороне окна, а для списка ссылок внутри нее — режим обычной потоковой компоновки. Для такого случая прекрасно подходит контейнер <div>, поскольку он не имеет никаких встроенных параметров внешнего вида (хотя с помощью правил стилей для него все-таки может устанавливаться цвет переднего плана, цвет фона и т.д.).

Контейнер <div>, по сути, представляет собой "плавающее" поле. В приведенном ниже примере, он имеет фиксированную ширину, которая составляет 200 пикселей, и нефиксированную высоту, которая будет изменяться в соответствии с размером отображаемого внутри него содержимого:

<div style="position: absolute; left: 100px; top: 50px; width:200px; border:1px solid red;"> 
</div> 

Интеллектуальные дескрипторы

Интеллектуальные дескрипторы (смарт-теги) упрощают конфигурирование сложных элементов управления. Они предлагаются не для всех элементов управления, а только для многофункциональных, таких как GridView, TreeView и Calendar.

О доступности смарт-тега свидетельствует наличие в верхнем правом углу при выборе элемента управления небольшой стрелки. Если щелкнуть на этой стрелке, появится окно со ссылками (и другими элементами управления), позволяющими решать задачи более высокого уровня.

Например, на следующем рисунке показано, как таким путем можно получить доступ к функции автоматического форматирования элемента управления Calendar. (Смарт-теги могут предоставлять доступ к гораздо большему количеству функций, но смарт-тег элемента управления Calendar отображает только единственную ссылку.):

Статические дескрипторы HTML

Как известно, страницы ASP.NET содержат элементы управления ASP.NET вперемешку с обычными дескрипторами HTML. Добавляются HTML-дескрипторы либо путем ввода, либо перетаскиванием из соответствующей вкладки в панели Toolbox.

В состав Visual Studio входит очень удобный конструктор стилей, который позволяет форматировать любой статический элемент HTML с помощью свойств CSS.

Чтобы испробовать его, перетащите на страницу из раздела HTML в панели Toolbox элемент <div>. Этот элемент появится на странице в виде не имеющей границ панели. Далее щелкните на этой панели, чтобы выделить ее, и затем щелкнуть внутри поля Style в окне Properties (Свойства). После этого в поле Style появится кнопка с изображением троеточия (...). Щелчок на ней приводит к открытию диалогового окна Modify Style (Изменение стиля) с опциями для настройки цветов, шрифта, компоновки и рамки элемента:

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

При желании сконфигурировать элемент HTML как серверный элемент управления для того, чтобы иметь возможность обрабатывать события и взаимодействовать с ним в коде, нужно переключиться в режим Source и добавить в дескриптор элемента управления требуемый для этого атрибут runat="server".

Таблицы HTML

Visual Studio обеспечивает эффективную поддержку для создания HTML-таблиц на этапе проектирования. Чтобы испробовать ее, перетащите на страницу с вкладки HTML панели Toolbox элемент, представляющий таблицу. Изначально эта таблица будет иметь стандартный внешний вид и размер 3x3, но ее можно быстро трансформировать с помощью функций редактирования, которые больше напоминают собой текстовый редактор, нежели инструмент программирования.

Ниже перечислены основные действия, которые может потребоваться выполнить:

• Чтобы перейти в таблице из одной ячейки в другую, нужно использовать либо клавишу <Tab>, либо клавиши со стрелками. Текущая ячейка выделяется рамкой синего цвета. Внутри каждой ячейки можно вводить статические HTML-дескрипторы, а также перетаскивать элементы управления из панели Toolbox. При попытке перейти с помощью клавиши <Tab> к ячейке, находящейся после последней ячейки, Visual Studio добавляет новую строку.

• Чтобы добавить в таблицу новые строки или столбцы, нужно щелкнуть правой кнопкой мыши внутри ячейки и выбрать из нескольких опций в подменю Insert (Вставка) ту, которая представляет необходимое действие.

• Чтобы изменить размер какой-нибудь части таблицы, необходимо просто щелкнуть на соответствующей границе и перетащить ее в нужном направлении.

• Чтобы отформатировать какую-нибудь одну ячейку, нужно щелкнуть в окне Properties внутри поля Style, а затем на кнопке с изображением троеточия (...). После этого откроется то же диалоговое окно New Style (Новый стиль), которое было показано на предыдущем рисунке.

• Чтобы поработать с несколькими ячейками одновременно, нужно сначала выделить их, удерживая клавишу <Ctrl> нажатой и щелкая на ячейках, а затем щелкнуть правой кнопкой мыши и выполнить желаемую групповую операцию форматирования.

• Чтобы объединить ячейки (например, превратить две ячейки в одну, охватывающую два столбца), необходимо просто выделить необходимые ячейки, щелкнуть правой кнопкой мыши и выбрать в контекстном меню пункт Modify --> Merge (Изменить --> Объединить).

С такими возможностями, вполне вероятно, что вам никогда не придется прибегать к помощи других инструментов проектирования вроде Dreamweaver или Expression Web.

В современной практике веб-дизайна использование таблиц для компоновки не одобряется. Вместо этого большинство профессиональных разработчиков отдают предпочтение свойствам компоновки CSS, которые работают точно так же хорошо и с Visual Studio.

Структурирование разметки HTML

Для форматирования одного и того же фрагмента HTML-кода существует просто бесконечное количество способов. Вложенные дескрипторы могут выделяться с помощью отступов, а длинные дескрипторы часто разбиваются на несколько строк для повышения удобочитаемости. Однако то, сколько именно должно быть отступов, и какой должна быть длина строки, каждый разработчик выбирает сам.

Из-за обилия возможных вариантов Visual Studio принудительно никакого форматирования не применяет, а наоборот — всегда сохраняет ту схему применения заглавных букв и отступов, которую использует разработчик. Недостаток такого поведения заключается в том, что оно способствует отсутствию согласованности и созданию веб-страниц с сильно разнящимися соглашениями о форматировании или некорректно разбросанными дескрипторами.

Чтобы помочь разобраться с этим, Visual Studio предлагает инновационную функцию, которая позволяет определять желаемые правила и затем применять их где угодно.

Чтобы испробовать ее, переключите страницу в режим Source. Далее выделите какой-нибудь произвольный фрагмент HTML-кода, щелкните на нем правой кнопкой мыши и выберите в контекстном меню пункт Format Selection (Форматировать выделенный фрагмент). После этого Visual Studio автоматически исправит выделенное HTML-содержимое, расставив правильно заглавные буквы, отступы и окончания строк.

Конечно, после вышесказанного возникает вопрос о том, а кто же определяет, какие параметры форматирования являются правильными? Хотя для начала Visual Studio использует собственные целесообразные параметры по умолчанию, у вас есть возможность настроить их довольно обширным образом.

Чтобы сделать это, находясь в режиме Source, щелкните правой кнопкой мыши в любом месте и выберите в контекстном меню пункт Formatting and Validation (Форматирование и проверка...). Откроется диалоговое окно Options (Параметры) с развернутым разделом Text Editors --> HTML --> Formatting (Текстовый редактор --> НТМL --> Форматирование):

В этом разделе можно указывать, какие параметры выделения заглавными буквами должны использоваться, и насколько длинными могут быть строки, прежде чем их потребуется сворачивать. По умолчанию строки не сворачиваются до тех пор, пока не достигнут напрягающего глаза предела в 80 символов, поэтому многие разработчики предпочитают уменьшать значение этого параметра. Здесь также можно настроить способы заключения атрибутов в кавычки и указать, следует ли Visual Studio автоматически вставлять соответствующий закрывающий дескриптор при добавлении открывающего дескриптора.

Правила форматирования применяются всякий раз, когда используется команда Format Selection, и всякий раз, когда HTML-содержимое добавляется путем перетаскивания элементов управления из панели Toolbox в режиме Design. В случае, когда HTML-содержимое вводится вручную, Visual Studio не применяет правила форматирования для его "исправления".

Если вы настроены еще более решительно, можете щелкнуть на кнопке Tag Specific Options (Параметры для тегов) и установить правила, применяющиеся только к определенным дескрипторам.

Например, можно указать Visual Studio добавлять символ разрыва строки в начале и конце дескриптора <div> либо использовать разные цвета для выделения конкретных дескрипторов, таких как дескрипторы, которые часто приходится искать в спешке, или дескрипторы, которых нужно избегать. (Например, разработчики, которые планируют переходить на использование основанной на CSS компоновки, могут стараться избегать дескрипторов <table> и применять для их выделения цветовое кодирование.)