Theme,skin-----asp.net2.0 new technolog
没有使用Theme的页面
- 结构复杂,格式混乱,不容易修改和阅读
使用Theme的页面
- 结构清晰,便于修改和阅读,便于复用。
App_Themes是存在于*.aspx同级目录下的一个文件夹,该文件夹下面可以有多个文件夹
每个文件夹对应一个单独的Theme.每个Theme目录中可以有两种类型文件。
1.*.css:用来修饰*.aspx中的HTML控件和asp.net控件
- *.css可修饰的HTML控件的属性
修饰HTML控件的方式
(1)代码中通过style属性直接修饰
<button id="Button1" style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server"> Click me!</button>
(2)代码中定义style属性,引用修饰
<html> <head> <style> .buttonstyle { font: 8pt verdana; background-color:lightgreen; border-color:black; width:100 } </style> <body> <form id="Form1" runat="server"> <ASP:TextBox ID="TextBox2" TextMode="Password" runat="server" class="buttonstyl"/> </form> </body> </html>
(3)*.css放入Theme目录中进行引用
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="newpage1.aspx.vb" Inherits="newpage1" title="Untitled Page" Theme="ThemeA"%> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:Label ID="Label1" runat="server" Text="Label" class="spanstyle"></asp:Label> </asp:Content>
2.*.skin用来修饰*.aspx中的asp.net控件
- .skin的内容
eg:
<asp:Label Font-Bold="true" ForeColor="orange" runat="server" /> <asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" Width="330px" runat="server"> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#999999" ForeColor="White" /> <DayStyle BackColor="#CCCCCC" /> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" /> </asp:Calendar> <asp:GridView CellPadding="4" ForeColor="#333333" GridLines="None" Width="461px" runat="server"> <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#E3EAEB" /> <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#7C6F57" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView>
(1)在aspx文件中通过Theme直接使用skin
eg:1.aspx的内容,在第一行声明使用Theme1后所有的asp控件将使用theme1中定义的skin进行表现
<%@ Page Language="VB" Theme="Theme1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Page with Example Theme Applied</title> </head> <body> <form id="form1" runat="server"> <div> <h3> Page with Example Theme Applied</h3> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" /><br /> <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /> <br /> This is some example text: The quick brown fox jumped over the lazy dog.<br /> <br /> <asp:Calendar ID="Calendar1" runat="server"/> <br /> <asp:GridView ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="au_id" runat="server"> <Columns> <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" /> <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" /> <asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" /> <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" /> </Columns> </asp:GridView> </div> </form> </body> </html>
(2)在aspx文件中选择性使用skin
eg:Theme2里的skin内容,一个calendar被指定了SkinID="Simple"
<asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px"> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> <SelectorStyle BackColor="#FFCC66" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> </asp:Calendar> <asp:Calendar SkinID="Simple" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar>
2.aspx的内容,在第一行声明使用Theme1后,asp控件可以通过指定skinID的方式选择skin,未指定skinID的asp控件将使用theme中定义的默认skin进行表现。
<%@ Page Language="VB" Theme="Theme1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Named Skins</title> </head> <body> <form id="form1" runat="server"> <div> <h3>Named Skins</h3> <asp:Calendar ID="Calendar1" runat="server"/> <asp:Calendar ID="Calendar2" SkinID="Simple" runat="server"/> </div> </form> </body> </html>
注意事项
- 1.一旦使用Theme=定义了一个页面的theme,页面中对控件进行的属性设置会失败,如果希望页面中属性设置生效,需要在定义Theme的时候使用SytleSheetTheme=来代替直接使用Theme
eg:
<%@ Page Language="VB" StyleSheetTheme="Theme2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Page Properties Override StyleSheetTheme</title> </head> <body> <form id="form1" runat="server"> <div> <h3>Properties in the Page Override StyleSheetTheme</h3> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" /> Label2's ForeColor is blue! <br /> <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /> </div> </form> </body> </html>
- 2.在Web.config中设置可让整个web站点使用skin
<configuration> <system.web> <pages theme="BasicBlue" /> </system.web> </configuration>
- 3.通过代码动态设置Theme
void Page_PreInit (Object sender, EventArgs e) { Page.Theme = "BasicBlue"; }
- 4.EnableTheming属性
将EnableTheming属性设置为false可以为单独的控件或者整个页面禁止Theme功能
<asp:DropDownList ID="Countries" EnableTheming="false" RunAt="server" />
转载于:https://www.cnblogs.com/yzxchoice/archive/2006/08/22/483490.html
Theme,skin-----asp.net2.0 new technolog相关推荐
- ASP.NET2.0中themes、Skins轻松实现网站换肤!
ASP.NET2.0中themes.Skins轻松实现网站换肤! 可能有些朋友还不是很清楚themes.skins.下面先介绍下themes.skins.. 一.简介: 一看Themes.Skins这 ...
- DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0(ver 3.0.9Beta)
英文名:DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0 中文名:DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.N ...
- DotNetTextBox V2.0 Web Control(ASP.NET2.0 增强型TextBox控件,完全支持AJAX.NET)
[控件界面] [控件介绍] 名称:DotNetTextBox V2.0 Web Control 免费无限制版 类型:ASP.NET2.0 增强型TextBox控件 作者: 小宝.NET2.0 主页:h ...
- DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0(ver 3.0.7Beta) 增加多语言!
英文名:DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0 中文名:DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.N ...
- [转]ASP.NET1.0升级ASP.NET2.0问题总结
来自:http://www.enet.com.cn/article/2006/0310/A20060310510518.shtml 1.Global.asax文件的处理形式不一样,转化后将出现错误 在 ...
- asp.net2.0导出pdf文件完美解决方案【月儿原创】
asp.net2.0导出pdf文件完美解决方案 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.28 PDF简介:PDF(P ...
- asp.net2.0学习历程 菜鸟到中级程序员的飞跃【月儿原创】
asp.net2.0学习历程 菜鸟到中级程序员的飞跃 --30本好书点评 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.1 ...
- ASP.NET2.0图片格式转换【月儿原创】
ASP.NET2.0图片格式转换 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.20 说明:本文实现了 图片格式随意转换( ...
- ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 【月儿原创】
ASP.NET2.0 文本编辑器FCKeditor的冰冷之心 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.9 FCKed ...
- ASP.NET2.0 ReportingServices使用详解
ASP.NET2.0 ReportingServices使用详解 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.4.9 本文先做 ...
最新文章
- JavaScript(转载)
- java get resttemplate 请求传递数组_RestTemplate入门
- Vue组件实现函数防抖
- Okhttp3中设置超时的方法
- Lucene3.5自学4--建索引相关知识总结
- 堆排序java实例_堆排序(示例代码)
- 阅读java文件_阅读与阅读写文件 - Java空格
- HiveQL学习笔记(二):Hive基础语法与常用函数
- python中alpha_如何在Python中设置像素的alpha值
- Java I/O系统之转换流
- ELK filebeat或logstash修改规则之后重写记录到ElasticSearch
- 2021-08-07-DJ-036 在阿里云服务器上迁移我们的数据库,以后省一台电脑的电费了
- 一个受人称赞的站点应该用最实新的策略来优化
- WORD VBA实现查找带格式的文字并复制到特定地方
- Lua基础教程与实践
- 亚马逊运营技巧,卖家该如何提升BSR排名?
- 【云速建站如何个人备案】
- 论文阅读 (二十一):Exploratory Machine Learning with Unknown Unknowns (2021AAAI EXML)
- mongoDB Ops Manager
- C语言中,1U<<29的意思
热门文章
- 【深度学习入门到精通系列】医学图像预处理—伽马变化代码
- python【蓝桥杯vip练习题库】BASIC-18 矩形面积交(线段交)
- Keras【Deep Learning With Python】—Keras实现序贯模型
- Python程序设计题解【蓝桥杯官网题库】 DAY2-IDLE与基础练习
- 简述JavaME,JavaSE,JavaEE
- 习题2.5 两个有序链表序列的合并 (15 分)
- python定时器 循环_Python3 循环定时休息并播放音乐 (Windows)
- 网络营销专员浅析如何判断网络营销中网站优化效果几何?
- 积累有价值的seo资源提高网站优化效果
- 网站过度优化该怎样解决?