Пошаговое руководство. Настройка веб-узла с помощью тем в Visual Studio

  • Статья

Обновлен: Ноябрь 2007

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

В этом пошаговом руководстве, в частности, рассматриваются следующие задачи:

  • Применение предопределенных тем ASP.NET к отдельным страницам и ко всему узлу.

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

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

  • Microsoft Visual Web Developer (Visual Studio).

  • Платформа .NET Framework.

Создание веб-узла

Если веб-узел уже был создан в Visual Web Developer (например, по шагам, описанным в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer), то можно использовать его и перейти к следующему разделу данного пошагового руководства. В противном случае создайте новый веб-узел и страницу, выполнив следующие действия.

Создание веб-узла на базе файловой системы

  1. Откройте Visual Web Developer.

  2. В меню Файл выберите Создать, Веб-узел.

    Откроется диалоговое окно Создать веб-узел.

  3. В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

  4. В поле Расположение введите имя папки, где следует хранить страницы веб-узла.

    Например, введите имя папки C:\WebSites.

  5. В списке Язык выберите предпочтительный язык программирования.

  6. Нажмите кнопку ОК.

    Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Для начала работы с темами в этом руководстве необходимо настроить элементы управления Button, a Calendar и Label, чтобы наблюдать за тем, как темы влияют на данные элементы.

Чтобы разместить элементы управления на странице

  1. Перейдите в представление конструирования.

  2. Из группы панели элементовСтандартная перетащите на страницу элементы управления Календарь, Кнопка и Метка. Точный макет страницы не имеет значения.

    zcsbskx7.alert_note(ru-ru,VS.90).gifПримечание.

    Не применяйте никакого форматирования к элементам. Например, не следует использовать команду AutoFormat для настройки внешнего вида элемента управления Календарь.

  3. Перейдите в представление Исходный код.

  4. Убедитесь в том, что в элементе страницы <head> имеется атрибут runat="server", а сам элемент выглядит следующим образом.

    <head runat="server"></head>

  5. Сохраните страницу.

Для проверки страницы необходимо вначале просмотреть ее до применения темы, а затем — с различными темами.

Создание и применение темы к странице

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

Чтобы создать новую тему

  1. В Visual Web Developer щелкните правой кнопкой мыши имя веб-узла, выберите команду Добавить папку ASP.NET, а затем выберите пункт Тема.

    Будут созданы папка App_Themes и подпапка Theme1.

  2. Переименуйте папку Theme1 в sampleTheme.

    Имя этой папки будет именем создаваемой темы (в данном случае — sampleTheme). Точное имя не имеет значения, но его необходимо помнить при применении пользовательской темы.

  3. Щелкните папку sampleTheme правой кнопкой мыши, выберите пункт Добавить новый элемент, добавьте новый текстовый файл и назовите его sampleTheme.skin.

  4. Добавьте определения обложек в файл sampleTheme.skin, как показано в следующем примере кода.

    <asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-Names="Verdana" />
<asp:button runat="server" Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>
    zcsbskx7.alert_note(ru-ru,VS.90).gifПримечание.

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

    Определения обложек совпадают с синтаксисом создания элемента управления. Единственное отличие состоит в том, что данные определения включают в себя только те параметры, которые влияют на внешний вид элемента управления. Например, определения обложки не включают параметр для свойства ID.

  5. Сохраните файл обложки и закройте его.

Теперь можно проверить страницу перед применением тем.

zcsbskx7.alert_note(ru-ru,VS.90).gifПримечание.

При добавлении файла каскадной таблицы стилей (CSS) в папку sampleTheme, он будет применен ко всем страницам, использующим эту тему.

Чтобы проверить темы

  1. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

    Элементы управления отображаются с внешним видом по умолчанию.

  2. Закройте обозреватель и вернитесь в Visual Web Developer.

  3. В режиме источника добавьте следующий атрибут к директиве @ Page:

    <%@ Page Theme="sampleTheme" ... %>
    zcsbskx7.alert_note(ru-ru,VS.90).gifПримечание.

    В значении атрибута необходимо указать имя действительной темы (в этом случае им является файл sampleTheme.skin, определенный ранее).

  4. Нажмите сочетание клавиш CTRL+F5 для повторного запуска страницы.

    На этот раз элементы управления отобразятся в цветовой схеме, определенной в теме.

    На странице появятся элементы управления Метка и Кнопка с параметрами, выполненными в файле sampleTheme.skin. Так как в файл sampleTheme.skin не внесена запись для элемента управления Календарь, то он отображается с внешним видом по умолчанию.

  5. В Visual Web Developer настройте тему на имя другой темы, если она доступна.

  6. Нажмите CTRL+F5 для повторного запуска страницы.

    Внешний вид элемента управления снова изменится.

Темы таблиц стилей и темы настройки

После создания темы способ ее использования в приложении можно настроить, связав ее со страницей как тему настройки (как это сделано в предыдущем разделе) или как тему таблицы стилей. Тема таблицы стилей использует те же файлы, что и тема настройки, но ее приоритет для элементов управления и свойств страницы ниже, как и у файлов CSS. В ASP.NET шкала приоритета выглядит следующим образом:

  • Параметры тем, в том числе тем, заданных в файле Web.config.

  • Локальные параметры страниц.

  • Параметры тем таблицы стилей.

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

Чтобы использовать тему таблицы стилей и просмотреть порядок следования

  1. Перейдите в представление исходного кода.

  2. Измените объявление страницы:

    <%@ Page theme="sampleTheme" %>

    на объявление темы таблицы стилей:

    <%@ Page StyleSheetTheme="sampleTheme" %>

  3. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

    Обратите внимание, что свойство ForeColor элемента управления Label1 отображается красным.

  4. Перейдите в представление конструирования.

  5. Выберите элемент Label1 и в меню Свойства установите свойство ForeColor в значение blue.

  6. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

    Свойство ForeColor элемента Label1 отображается синим.

  7. Перейдите в представление исходного кода.

  8. В объявлении страницы замените объявление темы таблицы стилей на объявление таблицы стилей путем изменения:

    <%@ Page StyleSheetTheme="sampleTheme" %>

    на:

    <%@ Page Theme="sampleTheme" %>

  9. Чтобы запустить страницу, нажмите сочетание клавиш CTRL + F5.

    Свойство ForeColor элемента Label1 снова отображается красным.

Создание пользовательской темы на основе существующих элементов управления

Простым способом создания определений обложек является установка свойств внешнего вида с помощью конструктора и последующее копирование определения элемента управления в файл обложки.

Чтобы создать пользовательскую тему на основе существующих элементов управления

  1. В представлении конструирования настройте свойства элемента управления Календарь таким образом, чтобы элемент управления выделялся по своему внешнему виду. Ниже представлены примерные параметры:

    • BackColor   Cyan

    • BorderColor   Red

    • BorderWidth   4

    • CellSpacing   8

    • Font-Name Arial

    • Font-Size Large

    • SelectedDayStyle-BackColor   Red

    • SelectedDayStyle-ForeColor   Yellow

    • TodayDayStyle-BackColor   Pink

    zcsbskx7.alert_note(ru-ru,VS.90).gifПримечание.

    Точные значения определяемых характеристик не имеют значения. Приведенные выше значения станут более понятны при последующем тестировании темы.

  2. Перейдите в представление исходного кода и скопируйте элемент <asp:calendar> вместе с его атрибутами.

  3. Переключитесь или откройте файл sampleTheme.skin.

  4. Вставьте определение элемента управления Calendar в файл sampleTheme.skin.

  5. Удалите свойство ID из определения в файле sampleTheme.skin.

  6. Сохраните файл sampleTheme.skin.

  7. Переключитесь на страницу Default.aspx и перетащите на нее второй элемент управления Календарь. Не устанавливайте его свойства.

  8. Запустите страницу Default.aspx.

    Оба элемента управления Календарь будут отображаться одинаково. Первый элемент управления Календарь представляет установленные явным образом параметры свойств. Второй элемент управления Календарь унаследовал свои свойства внешнего вида от определения обложки, выполненного в файле sampleTheme.skin.

Применение тем к веб-узлу

Тему можно применить ко всему веб-узлу, что освобождает разработчика от необходимости применения темы к отдельным страницам. (При желании параметры тем можно переопределить на отдельных страницах.)

Чтобы установить темы для веб-узла

  1. Создайте файл Web.config, если он не был автоматически добавлен к веб-узлу, выполнив следующие шаги:

    1. В обозревателе решений щелкните правой кнопкой мыши имя веб-узла, а затем нажмите кнопку Добавить новый элемент.

    2. В разделе Шаблоны выберите элемент Файл веб-конфигурации и затем нажмите кнопку Добавить.

      Примечание   Ввод имени не требуется, так как файл всегда имеет имя Web.config.

  2. Добавьте элемент <pages>, если он еще не существует. Элемент <pages> должен появляться внутри элемента <system.web>.

  3. Добавьте следующий атрибут к элементу <pages>.

    <pages theme="sampleTheme" />
    zcsbskx7.alert_note(ru-ru,VS.90).gifПримечание.

    Файл Web.config зависит от регистра, а значения представлены в стиле Camel. (Например, theme и styleSheetTheme).

  4. Сохраните изменения и закройте файл Web.config.

  5. Перейдите к странице Default.aspx и переключитесь в режим источника.

  6. Удалите атрибут theme="themeName" из объявления страницы.

  7. Нажмите клавиши CTRL+F5 для запуска файла Default.aspx.

    Страница будет отображена с темой, указанной в файле Web.config.

Если указать имя темы в объявлении страницы, оно переопределит любую тему, указанную в файлеWeb.config.

Следующие действия

Поддержка тем ASP.NET предоставляет несколько способов настройки внешнего вида и функций всего приложения. В этом пошаговом руководстве рассмотрены основные данные, но можно обратиться к дополнительным сведениям. Например, можно узнать о следующих операциях:

См. также

Основные понятия

Общие сведения о темах и обложках ASP.NET