Параграф 1. Каскадні таблиці стилів
Каскадні таблиці стилів (або специфікація CSS -Cascading Style Sheets) дає програмісту повний контроль над формою подання елементів HTML-розмітки на Web сторінці. Таблиці стилів дозволяють визначити шрифти, колір і накреслення текстових фрагментів, змінювати ці параметри всередині текстового блоку, виконувати вирівнювання текстового блоку щодо інших блоків і компонентів сторінки. Наявність всіх цих можливостей дозволяє говорити про CSS як про засіб поділу логічної структури документа і форми його представлення. Логічна структура документа визначається елементами HTML-розмітки, в той час як форма подання кожного з цих елементів задається CSS-описателем елемента.
У Visual Studio Net передбачено використання CSS і не тільки в застосуванні до елементів HTML розмітки. Для демонстрації можливостей використання CSS створимо просте рішення Web сайту (меню File / New / Web Site). У Solution Explorer для вузла проекту вибираємо в контекстному меню рядок "Add New Item" і з набору "Templates" вікна "Add New Item" вибираємо "Style Sheet". Після натискання кнопки "Add" в проект рішення сайту буде додано файл "StyleSheet.css", вміст якого має при створенні тільки одну заготовку правила. Таблиця стилів, як правило, містить набір правил форматування, які можна буде підключати до різних елементів сторінки.
Кожне правило має мати описову назву, яке може складатися з однієї або двох частин, між якими ставиться крапка. Зліва від точки може бути дескриптор елементу, до якого буде застосовано правило. Якщо дескриптор відсутня, то правило може бути застосовано до будь-якого елементу. Праворуч від точки записується ім'я класу ідентифікації правила. Усередині фігурних дужок правила розташовуються елементи форматування для даного правила. Елементи форматування розділяються крапкою з комою. Приклад набору правил показаний нижче:
У першому випадку, досить розташувати курсор миші всередині фігурних дужок правила і натиснути "Ctrl" плюс "Пропуск". У підказці (Рис.1.) Будуть висвітлені всі можливі елементи форматування для правила. Після вибору елемента форматування він поміщається в правило, а слідом за введенням двокрапки з'являється підказка про можливі типи і значеннях параметра.
У другому випадку курсор миші також міститься всередині фігурних дужок правила і в контекстному меню вибирається пункт Build Style. Далі в майстра Style Builder виконується формування відразу декількох елементів форматування для правила.
Рис.2. Використання майстра Style Builder
Рис.3. Додавання таблиці стилів
У наведеному вище прикладі файлу стилів правило body застосовується до всіх дескрипторів елементів автоматично (за замовчуванням). Для тих елементів, вид яких ми хочемо бачити відмінним від виду певного стилем за замовчуванням, необхідно явно вказати правило у властивості CssClass (Рис.4.)
Рис.4. Використання правил таблиці стилів
Для трьох варіантів застосування правил каскадної таблиці стилів до елемента Label показано на Рис.5. Звернемо увагу на важливий факт - якщо для елемента управління явно задано правило у властивості CssClass, то елементи форматування цього правила скасовують елементи правила, який використовується за умовчанням. Якщо елемент правила не перевизначений, то застосовується елемент правила за замовчуванням.
Рис.5. Використання правил таблиці стилів
Параграф 2. Теми
2.1. Поняття теми. Локально певні теми
Завдання теми - це створення спеціальним чином оформленого текстового файлу, який, в свою чергу, може бути включений в рішення сайту. Вміст файлу відображає оформлення або поведінку елементів сайту (доповнює або замінює деякі їх властивості). Теми розміщуються в визначених директоріях файлової системи. Так, локальні теми розміщуються в спеціальній папці з назвою "App_Themes" в кореневій директорії рішення сайту. Крім того, теми можуть визначатися і на рівні сервера і поміщатися в глобальному каталозі тем (на цьому ми зупинимося трохи пізніше). Спочатку розглянемо використання тим, заданих локально, або, інакше, визначених у рішенні конкретного сайту.
Для подальшої демонстрації прикладів створимо просте рішення сайту і помістимо на форму два контрола Label. Далі, приступимо до створення тим і почнемо з папки "App_Themes".
У Visual Studio створити папку "App_Themes" і тему можна двома шляхами:У Solution Explorer в контекстному меню рішення сайту відразу вибираємо пункт "Add New Item", а у вікні "Add New Item" - "Skin File" (ім'я додається файлу можна вибрати за бажанням або відповідає призначенню, наприклад "Labels"). В результаті відразу буде створений вузол "App_Themes", папка теми "Labels" і файл теми (Рис.6.).
Рис.6. Створення директорії "App_Themes" і теми
Кожна папка в директорії App_Themes вважається окремою темою. Вкладення тим не допускається. Кожна тема може складатися з одного або декількох файлів з розширенням ".skin". Крім того, в директорії "App_Themes" можуть бути присутніми файли каскадних таблиць стилів, малюнків і інші типи файлів, які використовуються для оформлення елементів ( ".skin" файли і файли таблиць стилів зазвичай розташовуються в кореневій папці теми, а малюнки прийнято розташовувати в піддиректорії " images "). Для сторінки сайту може бути задано безліч тем, але активної, в конкретний момент, тільки одна. і, в силу цього, на один тип елемента управління доцільно створювати тільки один ".skin" файл. Кожен ".skin" файл може містити декларацію оформлень для безлічі елементів управління. Ця декларація оформлень (набору шаблонів оформлень або набору скінів) містить властивості, які можуть бути застосовані до контролю, і будуть визначати зовнішній вигляд елемента управління, що реалізується даним контролом на етапі виконання рішення.
Розглянемо вміст створеного майстром "Labels.skin" файлу:
Пропоновані шаблони оформлення елементів управління виглядає майже як і декларація відповідних контролів в файлі ".aspx". Звернемо увагу на наявність атрибута runat = "server" і відсутність атрибуту "ID". Крім того, шаблон оформлення може містити атрибут "SkinId". Для з'ясування його призначення створимо в нашому ".skin" файлі шаблон оформлення для елемента Label (поки без атрибута "SkinId"):
У файлі Default.aspx виконаємо підключення теми для сторінки сайту (директива "Page", атрибут "Theme" або "StylesheetTheme"):
Відзначимо, що в файлі Default.aspx контроли Label визначені як:
Виконаємо рішення сайту і звернемо увагу на результат (Рис.7, зліва).
Рис.7. Використання теми
Введемо атрибут "SkinId" в опис елемента (файл "Labels.skin"):
Для контрола Label1 (Default.aspx) властивість SkinID (тільки для Label1) встановимо в значення, визначене в темі (SkinID = "label1").
Виконаємо рішення сайту і звернемо увагу на результат (Рис.7, в центрі).
Додамо ще одну реалізацію теми для Label c атрибутом SkinId = "label2" і з декларацією BackColor = "Red" в описі (файл "Labels.skin"):
Для контрола Label2 (Default.aspx) властивість "SkinID" встановимо в значення, визначене в темі (SkinID = "label2").
Виконаємо рішення сайту і звернемо увагу на результат (Рис.7, праворуч). Порівнявши результати, зробимо висновок, що якщо не використовується атрибут "SkinID", то на всіх сторінках сайту елементи Label будуть виводитися так, як це задано скіном в файлі підключеної теми ( "Labels.skin"), тип елемента якого збігається з типом елемента на Web сторінці. Використання властивості "SkinID" дозволяє прив'язати визначення оформлення до конкретного контролю.
2.2. Глобальний каталог тим
Введемо навмисну помилку в файлі Default.aspx, замінивши ім'я теми Theme = "Labels" на Theme = "Labels1" і спробуємо виконати рішення сайту. Компілятор видасть повідомлення:
З цього випливає, що тема шукається не тільки в директорії рішення, але і в глобальних каталогах тем. Одним з таких каталогів є каталог:
Для приміщення теми в каталог потрібно створити папку Themes в даній директорії. Далі можна поміщати теми в папку, як ми це робили і при використанні директорії "App_Themes".
Виправимо нашу навмисну помилку і перенесемо (саме перенесемо) директорію Labels з "App_Themes" в C: \ WINDOWS \ Microsoft.NET \ Framework \ ВЕРСІЯ \ ASP.NETClientFiles \ Themes. Знову виконаємо рішення. Результат буде той же, що і показаний на Рис.7.
2.3. Завдання пріоритету на використання теми
Тема може бути включена в проект в директорії Page файлу .aspx використанням двох атрибутів: Theme і StylesheetTheme. При використанні атрибуту Theme опис оформлень з файлу теми будуть мати більший пріоритет, ніж описи, задані властивостями контролів. При використанні атрибуту StylesheetTheme властивості контрола матимуть більший пріоритет, ніж властивості теми. Крім того, використання атрибута StyleSheetTheme, на відміну від використання атрібета Theme, дозволяє побачити оформлення контрола на етапі його проектування. Так, при використанні StyleSheetTheme, фон контролів буде відповідати кольорам, заданим в скінів теми, з якими вони пов'язані.
Звернемо увагу на один підводний камінь. Нехай у нас визначені дві однойменні теми (Labels). Локальна містить опис оформлення Label1, а тема в глобальному каталозі - опис оформлення Label1 і Label2. На етапі проектування ми задаємо ім'я теми у файлі Default.aspx в директиві Page (Theme або StyleSheetTheme = "Labels"). Перше оформлення, з яким ми пов'язуємо Label1 (SkinID = "label1") буде взято з теми директорії App_Themes і буде застосовано до Label1. Для Label2 SkinID = "label2" пов'язує опис оформлення для Label2 теми "Labels" глобального каталогу. На етапі проектування ми бачимо обидва контрола в тій забарвленням (для прикладу наведеного вище), яка задана в обох ".skin" файлах тем. Однак, при виконанні рішення сайту, Label2 залишиться поза впливом теми з глобального каталогу (інакше, до нього не будуть застосована ніяка тема, з тієї причини, що тільки одна тема може бути активна в конкретний момент часу).
Звернемо також увагу, що використання тим може бути, як дозволено, так і заборонено. Для цього використовується властивість контрола EnableTheming.
EnableTheming - властивість каскадне і поширює свою дію на всі дочірні елементи. У директиві Page властивість EnableTheming поширює свою дію на всі елементи сторінки. Забігаючи наперед, відзначимо також, що EnableTheming = false не працює при використанні атрибута підключення "StylesheetTheme". Причому, це не залежить від того, яким методом підключається тема. Для того щоб ігнорувати всі установки тим, в тому числі і зроблені з використанням атрибута styleSheetTheme, необхідно задати в директиві Page або в файлах конфігурації StyleSheetTheme = "" (про використання файлів конфігурації см. П.2.4.) Наступне визначення:
2.4. Установка теми для всіх сайтів сервера або всього сайту
Теми можна задавати не тільки на рівні сторінок файлу, але і на рівні сервера і сайту. У першому випадку використовується глобальний файл настройок machine.config, у другому - web.config сайту. Атрибути для підключення теми ті ж, що ми використовували при підключенні тим на рівні сторінки: theme і styleSheetTheme.
Звернемо увагу на те, що теми, певні для сторінки, мають перевагу перед визначенням тим у файлі web.config.
2.5. Використання CSS в темах
Каскадні таблиці стилів можуть бути використані як частина тем. Якщо визначати в темі тільки специфічні для серверних елементів властивості, які не можуть бути задані через CSS, а всі інші властивості задавати в таблицях стилів, то це, в ряді випадків, дозволяє значно скоротити трафік сервер-клієнт за рахунок скорочення обсягу генерування коду на стороні сервера.
Для того, щоб стилі могли бути використані в темах, файли з їх описами повинні бути додані в папку теми (файлів може бути один або кілька). ASP.NET застосовує файли з таблицями стилів до сторінок, які використовують обрану тему і елементів сторінки. Це виконується автоматичним включенням файлу стилів в сторінку звичайним для сторінок способом (директива в тезі
- на кожну таблицю стилів Visual Studio додасть одну директиву за умови наявності в тезі сторінки атрибута runat = "server").Додамо в наше рішення сайта два файли стилів StyleSheet1.css і StyleSheet2.css (контекстне меню вузла теми Labels, пункт "Add New Item", вибрати "Style Sheet", задати ім'я і натиснути кнопку "Add"). Вид рішення показаний на (Рис.8.).
Рис.8. Рішення сайту з включеними темою і CSS
Звернемо увагу на те, що в директиві Page присутній атрибут використання теми Labels, а директиви в тезі
відсутні.У файл StyleSheet1.css і StyleSheet2.css додамо відповідний текст правил форматування:
Файл Labels.scin, як і раніше, містить записи для двох скінів. Нове, що ми внесемо в шаблони оформлення - атрибут CssClass, що посилається на конкретний стиль CSS:
Виконаємо рішення. Результат представлений на Рис.9.
Рис.9. виконання рішення
Якщо ми подивимося код джерела (меню браузера Вид / Джерело), то побачимо, що обидва файли стилів Visual Studio додала в сторінку, так само, як ми це робили в параграфі № 1, а елементи Label містять явне вказівку на клас CSS, як і в звичайних HTML сторінках:
2.6. Динамічне завантаження тим
Asp.Net завантажує теми відразу після генерації події PreInit. Таким чином, для того, щоб мати можливість змінювати теми програмно, необхідно виконувати це в подію Page_PreInit.
Завдання теми виконується просто. У попередньому прикладі приберемо в директиві "Page" атрибут Theme = "Labels"; і помістимо його в якості коду в обробник події PreInit. Результат буде тим же, що ми бачили на Рис.9.
Для відключення теми, як і раніше, будемо використовувати привласнення значенням теми порожнього значення:
Одне із застосувань динамічного завдання тим - це надання можливості користувачеві вибрати оформлення сторінок сайту. Досить поставити кілька тем і завантажувати обрану користувачем тему. Однак, завантаження теми можлива тільки в обробнику події PreInit. Вибір же теми можливий набагато пізніше події PreInit. Вирішенням цієї проблеми може бути використання сесій (можна також використовувати cookie, профілі та інші доступні місця зберігання).
Нагадаємо, що сеанс або сесія починається, коли користувач в перший раз запитує сторінку в додатку (сторінку сайту), і закінчується, коли додаток (сайт) явно закриває сеанс або коли перевищено заданий час очікування. Це дає можливість зберігати в об'єктах Session необхідну інформацію на протязі активності сайту і мати доступ до неї з різних сторінок сайту.
У той же час, об'єкти сесії також доступні тільки після повторного входу на сторінку. Якщо ми виберемо в списку ім'я теми і будемо зберігати його в об'єкт Session (в обробнику натиснення кнопки, наприклад), то при перевантаженні сторінки по PostBack момент збереження знову настане пізніше події PreInit. Як вихід з цього - виклик сторінкою самої себе. Тоді, в обробнику натиснення кнопки можна зберегти ім'я сесії, і, після повторного виклику сторінки, скористатися інформацією, що зберігається в сесії.
Рис.10. рішення сайту
Результат роботи коду показаний на Рис.11.
Рис.11. Виконання рішення сайта
2.7. Використання малюнків в темах
Для того, щоб малюнки могли бути використані в темах, вони повинні бути додані в рішення або доступні за URL. Прийнято малюнки поміщати в окрему папку директорії теми. Додамо таку папку (контекстне меню вузла теми Labels, пункт "Add Folder", задаємо ім'я папки "Images"). Помістимо в неї будь-які малюнки (наприклад cat.gif і dog.gif).
Додамо в файл Labels.skin попереднього рішення ще два скіна - Image:
Додамо до попереднього рішення два контрола Image:
Виконаємо рішення. Результат представлений на Рис.10.
Рис.10. виконання рішення
Таким чином можна включати малюнки в ImageButton, TreeView, Menu і інші елементи Web сторінок.
Розглянемо можливість динамічного управління відображенням малюнків. Теги Image приберемо з файлу Defaul.aspx і визначимо скіни для Image (вірніше, доповнимо їх відмінними для різних шаблонів Image SkinID - "cat" і "dog"):
Наступний приклад демонструє, як можна динамічно змінювати малюнок, заданий в темі (зміна відбувається при Refresh сторінки і залежить від показань таймера):
Наступний код показує, як можна управляти відображенням елементів, використовуючи ViewState (картинки змінюються при кожному натисканні кнопки):
література
Еcли Ви прийшли з пошукових машин - відвідайте мою головну сторінку
Сайт управляється системою uCoz