- •Лабораторная работа 4. Мастер-страницы и шаблоны web форм. Темы.
- •Создание тем
- •Области действия тем
- •Темы и изображения
- •Установка текущей темы
- •Установка темы для отдельной страницы
- •Установка темы для всего сайта
- •Мастер-страницы
- •Зачем нужны мастер-страницы?
- •Основы Master Pages
- •Содержание по умолчанию
- •Последовательность событий.
- •Задание.
- •Контрольные вопросы.
Установка темы для всего сайта
Используя файл настроек web.config, тему можно установить на уровне всего приложения (и даже на уровне целой машины, используя глобальный файл настроек machine.config). Для этого используются атрибуты theme и styleSheetTheme раздела <pages>.
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<pages theme="Синяя" />
<authentication mode="Windows"/>
</system.web>
</configuration>
CSS
Каскадные таблицы стилей это очень мощный инструмент, позволяющий настраивать любые свойства, влияющие на внешний вид html-контролов, а также управлять их расположением на странице. Основная трудность применения таблиц стилей в ASP.NET состоит в том, что для эффективного их использования нужно досконально знать каким образом тот или иной серверный контрол интерпретируется в результирующий html исполняющей средой. Это не всегда возможно и большинство программистов серверных решений не разбираются в этом, да и не хотят разбираться, справедливо полагая, что это удел профессионалов в области html-верстки. Однако специалисты по верстке ничего не понимают в серверных тегах, поэтому не могут эффективно настраивать их, добиваясь требуемого результата. Налицо конфликт, разрешить который во многом и есть задача механизма тем, плюс используя темы достаточно просто отделить чисто дизайнерские вещи от шаблонов с самими контролами. Отныне верстальщику не придется копаться в шаблонах страниц, ненароком вырезая контролы и удаляя лишние с его точки зрения атрибуты. Теперь все настройки, касающиеся внешнего вида контрола, могут быть вынесены в отдельные файлы – файлы скинов. Однако настройка всех свойств серверных контролов в скинах неизбежно приведет к увеличению размера генерируемой страницы, поскольку все свойства из скинов будут указываться непосредственно в атрибут style тегов отдаваемых клиенту, а это достаточно длинные строки параметров. Гораздо экономнее было бы указать в скинах только специфические для серверных контролов свойства, которые не могут быть заданы через стили, а все остальные свойства задавать в таблицах стилей и указывать серверным элементам в скинах только css-классы через атрибут CssClass. К счастью тем предоставляют такую возможность. Можно добавить один или несколько ".css"-файлов в корневую папку темы или любые ее подпапки. ASP.NET автоматически применит все файлы с таблицами стилей ко всем страницам сайта, использующим выбранную тему, путем добавления директивы <link> для каждого файла в заголовок отдаваемой клиенту страницы. Единственное, что для этого необходимо – это наличие атрибута runat="server" в теге <head> страницы. Страницы создаваемые с использованием студийного редактора уже содержат этот атрибут.
Области применения скинов и таблиц стилей перекрываются. Например, в файле скина мы можем указать такой набор свойств:
<asp:TextBox ForeColor="gray" Font-Bold="true" BorderColor="red" runat="server" />
, а можем задать соответствующий стиль через css:
input
{
border-color:Red;
font-weight:bold;
color:Gray;
}
Однако в первом случае мы получим в результирующем html-е для каждого тектового поля на сайте запись такого вида:
<input type="text" style="color:Gray;border-color:Red;font-weight:bold;" />
а во втором - такого:
<input type="text" />
и файл StyleSheet.css размеров 68 байт, который один раз загрузится на клиента и впоследствии уже не будет скачиваться с сайта, а будет браться из кеша браузера.
Очевидно что оптимальным подходом будет создание css-классов для контролов требующих специфичного оформления и последующее сопоставление данных классов серверным контролам через установку атрибута CssClass.
Пример задания css-класса:
.txtMad
{
border-color:Red;
font-weight:bold;
color:Gray;
}
Пример задания класса контролу в файле скина TextBox.skin:
<asp:TextBox CssClass="txtMad" runat="server" />
Результирующий html:
<input type="text" class="txtMad" />
Однако не стоит слишком увлекаться оптимизацией, в конце-концов сжатие трафика может с легкостью выдать гораздо лучшие результаты, чем нескольких недель работы над оптимизацией размера выдаваемых страниц. Вот несколько простых принципов, которые помогут принять верное решение о применении того или иного подхода в каждом конкретном случае:
веб-дизайнеры гораздо увереннее себя чувствуют при использовании css-файлов. Если весь дизайн для сайта делают профессиональные дизайнеры, то лучше попросить их везде использовать css. В таком случае при обновлении дизайна все, что от вас потребуется, это заменить соответствующий файл .css.
Если дизайном занимается разработчик, то ему будет более привычна работа с скинами. Скины выглядят в точности как описания контролов, к тому же разработчику не придется вникать во все тонкости того, какой именно HTML-код генерится при рендеринге того или иного серверного контрола. Все, что от него потребуется – установка значений предопределенным свойствам серверных контролов.
Скины применяются на стороне сервера, поэтому могут использоваться для установки специфичных свойств серверных контролов. Например, для контрола Calendar таким свойством является DayNameFormat. CSS никак не позволяет оперировать такими свойствами.
CSS в свою очередь ориентирован на клиента и позволяет управлять параметрами отображения, недоступными на сервере. Например, положением контролов на странице, отступами и цветами страницы, оформлением ссылок и т.д.
Настройки каскадных таблиц стилей могут быть легко переопределены при необходимости прямо на странице, свойства же, заданные в скинах, абсолютны и не могут быть переопределены (за исключением специальных приемов рассмотренных выше).
Различные браузеры по-разному интерпретируют свойства каскадных таблиц стилей. Рендеринг свойств, заданных в скинах, может быть переопределен в зависимости от типа браузера клиента (ASP.NET предоставляет такие возможности)