ASP.NET Оформление страниц и ЭУ

[Heidel]

• Шаблоны страницы (MasterPage)
  -- Шаблон разметки для группы страниц
  



• Темы (Theme)
  -- Набор файлов стилей и изображений
  



• Скины (Skins)
  -- Оформление ЭУ
  

Add -- New item -- Master page
Мастер-пейдж содержит элементы ContentPlaceHolder

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

куда всё страницы вставляют свой контент.

Add -- New item -- Web Form using Master Page
На странице есть блоки Content, которые передаются в блоки с соответствующим ID мастер-пейджа

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

Мастер-пейджи можно делать вложенными

Темы
Создание темы
Add -- Add ASP.NET Folder -- Theme
В результате создается папка App_Themes -- в ней файлы тем Theme1
Другие файлы тем также добавляются через Add -- Add ASP.NET Folder -- Theme2

Добавить файлы в тему
Щелчок по теме -- Add -- New Item -- css и skin файлы

Создаем css файл -- щелчок ПКМ внутри тега -- Build Style (Графический редактор для редактирования стилей)

Подключение темы
Непосредственно в заголовке страницы <%@ Page %>

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Master1.aspx.cs" Inherits="WebApplication1.Master1" Theme="Blue" %>

Theme="Blue"

Скины
Щелчок на теме ПКМ -- Add -- New Item -- skin
Cкин-файлы
Отрабатывают на сервере.
Скин-файл выбирается в зависимости от присвоенной темы и автоматически применяется ко всем элементам данного типа.

Удаляем из скин-файла автоматически созданный комментарий и создаем свои свойства для элемента

<asp:Button runat="server" 
BackColor="#FF3399" 
Font-Bold="True" 
BorderStyle="Dotted" />

Чтобы разным элементам одного типа присвоить разные скины, скинам задается скин-id SkinID
Скины

<asp:Button runat="server" 
BackColor="#FF3399" 
Font-Bold="True" 
BorderStyle="Dotted" 
SkinID = "Skin1"/>

<asp:Button runat="server" 
BackColor="Yellow" 
Font-Bold="false" 
BorderStyle="none" 
SkinID = "Skin2"/>

Контролы на странице

<asp:Button ID="Button1" runat="server" Text="Button" SkinID="Skin1"/>
<asp:Button ID="Button2" runat="server" Text="Button" SkinID="Skin2"/>

Также можно использовать для задания внешнего вида элементов свойство CssClass

<asp:Button ID="Button1" runat="server" Text="Button" SkinID="Skin1" CssClass="btn1"/>
<asp:Button ID="Button2" runat="server" Text="Button" SkinID="Skin2" CssClass="btn2"/>

Выбор темы на странице
На странице создаем выпадающий список

    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
        <asp:ListItem>Blue</asp:ListItem>
        <asp:ListItem>Red</asp:ListItem>       
    </asp:DropDownList>

Курсы по asp.net от intuit.ru часть №4

@темы: Курсы по asp.net от intuit.ru, ASP.NET, Ссылки