Создание веб-сайта при помощи ASP.NET 2.0 и каскадной таблицы стилей (CSS) - Улучшаем стандартную разметку веб-элементов управления ASP.NET
ОГЛАВЛЕНИЕ
Улучшаем стандартную разметку веб-элементов управления ASP.NET
Каскадные таблицы стилей (CSS) используются в разработке веб-приложений для указания настроек стиля для конкретного HTML-элемента, класса HTML-элементов, либо для всех экземпляров конкретного типа HTML-элементов (таких, как указание настроек отображения для всех элементов <div>). Для указания настроек отображения для конкретного HTML-элемента может быть использован атрибут style. Например, следующая разметка указывает на то, что цвет фона элемента параграфа должен быть зеленым:
<p style="background-color: Green;">
This has a green background!
</p>
В идеале, информация об отображении может быть указана посредством CSS-классов. Классы CSS определяют стиль отображения для классов элементов и указываются в элементах <style> либо посредством внешних CSS–файлов, которые связываются со страницей через элемент <link>. Объявив класс, он может быть связан с конкретным HTML-элементом посредством использования атрибута class. Следующая разметка добавляет класс, названный .Warning , который отображает текст в красном цвете и жирным шрифтом. Следующий элемент <span> связан с классом, следовательно, будет выводить красный жирный текст в обозревателе.
<style type="text/css">
.Warning {
font-weight: bold;
color: red;
}
</style>
<span class="Warning">
Danger! Danger!
</span>
Данный подход с использованием класса CSS более практичен, чем использование стандартных стилей, по нескольким причинам. Во-первых, вы уменьшаете общий размер страницы, поскольку информация об отображении будет указана в одном месте - в элементе <style> либо в отдельном CSS-файле - и затем может быть применена в нескольких местах на странице. Если вы будете использовать встроенные стили, то информация об отображении будет применена несколько раз к каждому элементу управления. Во-вторых, сосредоточив данную информацию, вы сможете с большей легкостью изменить дизайн сайта, поскольку вам необходимо будет поменять настройки только в одном месте.
К сожалению, свойства стиля элементов управления ASP.NET обрабатываются как встроенные. То есть, если вы добавите элемент управления Label на страницу и установите ее свойство ForeColor в Red, Label обработает разметку как:
<span style="color: red;">Label Text</span>
Тем не менее, некоторые элементы управления достаточно интеллигентны, чтобы использовать классы, касающиеся вложенных стилей. Элемент Menu использует классы по отношению к встроенным стилям в случае, когда обрабатываются свойства, относящиеся к стилю. Более того, все элементы управления имеют свойство CssClass, которое вы должны использовать, но не так много разработчиков используют встроенные свойства.
В дополнение, многие элементы ASP.NET обрабатываются используя HTML-элемент <table> для позиционирования вместо того, чтобы использовать стандартные блок-элементы (как <div>) с позиционированием посредством CSS. HTML элемент <table> разработан для хранения табличной информации, но не в целях отображения информации, тем не менее он используется в этих целях вместе с Menu, TreeView, и другими встроенными элементами управления ASP.NET.
Тем не менее, такое поведение может быть перегружено при помощи адаптеров элементов управления. Хотя они могут быть созданы с нуля, Microsoft предоставил адаптеры элементов управления, поддерживающие CSS в ASP.NET 2.0, которые могут быть загружены и внедрены в ваше ASP.NET веб-приложение с применением минимальных усилий. С их установлением встроенные атрибуты стилей не будут обработаны (вам нужно использовать классы CSS) и тэги <table> в элементах Menu, TreeView и др. будут заменены техниками CSS.
| А вы используете тэги <table> или CSS? |
|---|
| По моему мнению, теги <table> должны быть использованы для отображения табличной информации, такой как информация в GridView, и не должны быть использованы для страничной верстки (как в случае, когда <table> используется для распределения страницы по трем колонкам и двум строкам). В идеале, техники CSS должны быть использованы для верстки страницы. Тем не менее, я чаще использую теги <table> в основном благодаря такому фактору, как удобство - я скорее знаю, как распределить содержимое при помощи тегов <table>, чем как это сделать при помощи CSS. В идеале, лучше использовать CSS, и, к счастью, адаптеры элементов управления, поддерживающие CSS, помогают в этом, причем нет особой необходимости изучать всю технику использования каскадной таблицы стилей. |
Загружаем и внедряем адаптеры элементов управления, поддерживающие CSS, в ваш веб-сайт
Для того чтобы начать строить веб-сайт на основе использования CSS при помощи адаптеров элементов управления, вам сначала потребуется загрузить файлы с сайта Microsoft. Последняя версия адаптеров элементов управления, поддерживающих CSS, доступна на странице http://www.asp.net/CSSAdapters/.
Данные адаптеры предоставляются в файле VSI. Предполагается, что у вас установлен Visual Studio 2005 либо Visual Web Developer, при этом просто запустите файл VSI после его загрузки. Это добавит новые шаблоны в ваш Visual Studio. Версия 1.0 адаптеров элементов управления содержит шаблон для создания нового веб-сайта ASP.NET, использующего CSS, а также учебник (Tutorial) по адаптерам элементов управления в ASP.NET. Учебник содержит необходимые файлы, а также примеры всех адаптеров, в то время как шаблон сайта содержит основные файлы и только сокращенный набор примеров. Вы также можете ознакомиться с онлайн-примерами на странице http://www.asp.net/CSSAdapters/.
Чтобы использовать шаблоны, запустите Visual Studio 2005 и выберите "New Web Site" для создания нового веб-сайта. В диалоговом окне создания сайта вы увидите "ASP.NET CSS Friendly Website" (ASP.NET веб-сайт с использованием CSS) и "Tutorial on ASP.NET CSS Friendly Control Adapters" (Учебник по адаптерам элементов управления, поддерживающих CSS в ASP.NET).
Выбрав любой из них, вы получите веб-сайт, имеющий как минимум основные файлы, необходимые для использования адаптеров элементов управления. Они включают в себя файлы классов адаптеров в каталоге App_Code, а также файл файл определения веб-обозревателя CSSFriendlyAdapters.browser в каталоге App_Browsers, который указывает на то, что каждый адаптер элементов управления должен быть использован для всех браузеров, и некоторые файлы JavaScript в каталоге JavaScript (в основном, используемые элементами управления Menu и TreeView для предоставления клиентской функциональности, столь чувствительной к обработанному результату). Для того чтобы превратить существующий ASP.NET веб-сайт в тот, который будет использовать CSS, просто скопируйте данные три каталога.