ASP.NET 界面外观设计与布局

4.1.1 什么是主题和外观
主题是指网页和控件外观属性设置的合集,通过使用主题能够定义页面和控件的样式,然后再Web
应用程序中应用页面和页面上的控件,可以简化样式控制。
主题包括一系列元素,这些元素主要有外观文件、样式表文件。
主题文件的扩展名为.skin,创建后,主题文件通常保存在Web应用程序的特殊目录App_Themes下。
一个Web应用程序可以拥有多个主题,每个文件夹就是一个主题,每个主题下都可以拥有自己的样式表和外观文件。
1、 外观文件
外观文件用于定义页面中服务器控件的外观,是主体的核心内容,其扩展名为.skin。
它包含了需要设置的各个控件的属性设置,但是在外观定义中不能主线ID属性的设置。
同一类型的控件外观分为 默认外观 和 命名外观 两种。
a) 默认外观
如果控件外观中没有设置SkinID属性,则称为默认外观。
在页面中应用主题时默认将自动应用于同一类型的所有控件。
在同一个主题中对于同一类型的控件只能设置一个默认外观。
b) 命名外观
设置了SkinID属性的控件外观称为命名外观。
SkinID属性命名唯一,不能重复。
在创建控件外观时可为同一类型的控件设置多个命名外观。
命名外观不会自动按类型应用于控件,要通过设置控件的SkinID属性来显示地声明。
2、 样式表文件
样式表文件即CSS文件,在主体中可以包含一个或多个样式表文件。
主体中的CSS文件和非主体的CSS文件没有本质区别。
将CSS文件存放在主体文件夹中,当主题被页面引用时将自动被引用,不需要使用标记进行专门的引用。
4.1.2 创建主题
1、添加主题文件夹
在这里插入图片描述

2、添加外观文件
在这里插入图片描述在这里插入图片描述

接下来就可以在外观文件中添加对标准控件的定义。
在定义中必须包含runat=”server”,但是不能包含ID属性,并且所有的外观定义都要位于<%…和…%>之外
Skin1的使用:
(1) 创建一个新的窗体
(2) 窗体里放入一个Button,然后修改Button的属性,随便改,改的独特一点
在这里插入图片描述

(3) 选中下面这个Button之后,复制选中的那个句话,粘贴到新建的外观文件Skin1.skin中
在这里插入图片描述

(4) 注意这里有Button ID,但是外观不是一个控件的样式,而是一类控件的样式,所以要把ID删掉
在这里插入图片描述

(5) 我们再在.aspx页面中放入一个Button,不修改其样式
在这里插入图片描述在这里插入图片描述

(6) 在.aspx页面中的第一行Page那一行,引入自己创建的样式文件theme1(这是个主题样式)
在这里插入图片描述

(7) 运行查看
在这里插入图片描述

我们可以看到两个Button是一个样式的,这是因为,我们在这整个Web页面(.aspx)里应用了主题Theme1
而主题Theme1是我们所写的左边那个的样式,当他应用到整个页面之后,页面内的所有Button按钮都是同左边样式相同的了
3、 添加样式表文件(.css)
在解决方案资源管理器中,右击 主题名称 Theme1,在弹出的快捷菜单中依次选择 添加—添加新项—样式表—改样式表名称—添加
在.css文件中可以对样式进行设置
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

4.1.3 使用主题
1、对单个页面使用主题
(1)在页面的@Page指令中添加Theme属性:
在这里插入图片描述

(2)在页面的@Page指令中添加StyleSheetTheme属性:
在这里插入图片描述

(3)备注:
以上两个属性都可以用来引用主题,但是如果页面中的某控件已经有了一些预定义的外观设置,并且和主题中的设置发生冲突,那么,在使用Theme属性引用主题时,预设的外观设置将被 主题中的外观文件 所覆盖;
而使用StyleSheetTheme属性引用主题,预设的外观设置将被覆盖所引用主题中的外观文件的设置
可见Theme属性的优先级高一些。
(4)比如:(两个Button,一个是设计好的,另外一个是原始的Button,正常的样式如Theme属性的预览图所示)
1)Theme属性
代码:
在这里插入图片描述

预览图:
在这里插入图片描述

运行图:
在这里插入图片描述

2)StyleSheetTheme属性
代码:
在这里插入图片描述

预览图:
在这里插入图片描述

运行图:
在这里插入图片描述

(5)案例:主题的使用
设计一个名为Theme1的主话题,使用该主题的页面中除了Label1以外,所有的文字均为黑色、宋体;label1中的文字为红色、楷体、加粗;文本框的边框颜色为红色;Button按钮上的文字为黑体、蓝色。
1) 创建一个空网站
2) 右击网站名称-添加-添加ASP.NET文件夹-主题-重命名为 Theme1
3) 右击主题名Theme1-添加-添加新项-外观文件-重命名为 SkinFile.skin
4) 在外观文件的<%…和…%>之外添加如下内容
在这里插入图片描述

5) 右击主题名Theme1-添加-添加新项-样式表-命名为StyleSheet.css,并输入以下代码
在这里插入图片描述

6) 新建一个名称为Default.aspx的Web窗体,在其中放置一个4行3列的表格用于页面布局。在表格中放置两个文本框控件、两个标签控件、两个按钮控件,设置Label1控件的SkinID属性为Label-red,设计视图如下图所示:(SkinID属性找不到,就直接从主题那里复制文字过去)
在这里插入图片描述

7) 切换到Default.aspx的源视图,在@Page指令中添加对应主题
在这里插入图片描述

8) 运行调试
在这里插入图片描述

2、对网站使用主题
如果要对网站中的所有页面使用主题,可以在Web.config文件的标记中设置Theme属性或者StyleSheetTheme属性,代码如下:
在这里插入图片描述

我将@Page后的添加主题去掉了,在Web.config重写
设计视图:
在这里插入图片描述

运行调试图:
在这里插入图片描述

总结:使用这种方法能快速修改网站中所有页面的外观
其实这样还是看不出来在Web.config下能够修改所有页面的外观这一特点,可以考虑用一个能够跳转页面的项目试试
3、动态加载主题
除了在页面声明和配置文件中指定主题之外,还可以通过编程方式在运行时,动态加载主题,实现自定义页面主题的功能。
动态加载主题的方法是,在页面Page_PreInit事件中,设置页面的Theme属性为指定的主题名称。
ASP.NET运行库在PreInit事件激发后,立即加载指定的主题。
案例:动态加载主题
设计默认主题、红色主题、蓝色主题,在页面中放置一个日历控件,实现在下拉列表中选择什么主题,就以什么主题来设置日历控件的外观。
(1) 创建一个空网站
(2) 右击网站名称-添加-添加ASP.NET文件夹-主题-重命名为 Common
在这里插入图片描述

(3) 右击主题Common-添加-添加新项-外观文件-创建SkinFile.skin外观文件
在这里插入图片描述

(4) 在外观文件SkinFile.skin的<%…和…%>之外添加如下内容:
在这里插入图片描述

(5) 重复步骤(2)~(4),主题名为Theme1,外观文件名为SkinFile1.skin,代码中的颜色改为Red
在这里插入图片描述

(6) 重复步骤(2)~(4),主题名为Theme2,外观文件名为SkinFile2.skin,代码中的颜色改为Blue
在这里插入图片描述

(7) 新建一个Web窗体,添加一个DropDownList控件,其4个列表项的Text属性分别为:请选择主题、默认主题、红色主题、蓝色主题,同时设置其AutoPostBack属性值为true
(8) 切换到Web页面,在@Page指令中添加对主题的引用
在这里插入图片描述

(9) 切换到Web的.cs页面(WebForm1.aspx.cs),输入如下代码
在这里插入图片描述

(10) 运行调试(别忘记在设计视图中添加进一个日历控件,不然没法显示出效果)
在这里插入图片描述

4.1.4 禁用主题
在默认情况下,主题中对页面和控件外观的设置,会覆盖页面和控件的本地设置,如果某些控件或页面已经有预定义的外观,并且不希望主题的设置将它覆盖,可以禁用主题。
如果要禁用空间或者页面的主题,需要将该控件或者页面的EnableTheming属性设置为false。
1、禁用页面主题代码如下:
在这里插入图片描述

还是上面的日历:(不变色了)
在这里插入图片描述在这里插入图片描述

2、禁用控件主题的代码如下(以Label控件为例):
在这里插入图片描述

页面设计:
在这里插入图片描述

Theme1:
在这里插入图片描述

运行调试:
在这里插入图片描述

总结:
在页面中引入自定义主题Theme1,Theme1中设定,它所控制的页面中,所有Lable控件都是固定的颜色,接着,在Web页面中,令Label3禁用主题,这就意味着Label3不会随着引入主题中规定Label要变颜色而变色,所以前两个都变了颜色,但是3没有变色。
3、如果想对页面中多个控件禁用主题,可以将这些控件放到一个Panel(面板?)控件内,然后对该Panel控件禁用主题,代码如下:
在这里插入图片描述在这里插入图片描述

把日历放到了一个Panel里,然后禁用了Panel,运行调试的时候不会因为选择不同的主题而改变颜色。
补充:
行内样式:<asp:>
内部样式:<style>在这</style>
外部样式:<link href=”xxx.css”>
主题样式:(在网页第一行,引入自己创建的样式文theme1)Theme=”Theme1”
四种样式的优先级(由高到低):
行内样式>主题样式>内部样式>外部样式
正常情况下,应用主题里面的样式在设计过程中是看不见,需要运行调试才可以看见,此时可以把主题样式中的Theme改为StyleSheetTheme=”Theme1”,就可以在设计的过程中看到应用的样式了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/66556.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计师常用的7款界面设计工具!

不同的界面设计工具都有其独特的优点和不足之处。本文为大家介绍设计师常用的7款界面设计工具&#xff1a;即时设计是一款在线UI界面设计工具&#xff0c;拥有中文界面和丰富的社区资源&#xff0c;适合初学者和专业设计师使用。Sketch具有直观的矢量编辑工具和可重复使用的符号…

小技巧 - Chrome 浏览器绕过“请在微信客户端打开链接”

微信和 QQ 内置浏览器 UA~ Tips&#xff1a;如果此方法失效了&#xff0c;可以底下找我~&#xff08;已有最新方法&#xff09;Tips&#xff1a;如果此方法失效了&#xff0c;可以底下找我~&#xff08;已有最新方法&#xff09;Tips&#xff1a;如果此方法失效了&#xff0c;可…

陆奇再谈AI:“对不起,我跟大家的看法,有些不一样...”

作者| Mr.K 编辑| Emma 来源| 技术领导力(ID&#xff1a;jishulingdaoli) 前微软全球副总裁、百度COO、奇迹创坛创始人陆奇&#xff0c;最近发表演讲&#xff0c;他认为AI不是什么当下风口&#xff0c;风口意味着投机主义&#xff0c;未免太低估AI对世界发展的影响。陆奇表示…

Ubuntu 放弃了战斗向微软投降

导读这几天看到 Ubuntu 放弃 Unity 和 Mir 开发&#xff0c;转向 Gnome 作为默认桌面环境的新闻&#xff0c;作为一个Linux十几年的老兵和Linux桌面的开发者&#xff0c;内心颇感良多。Ubuntu 做为全世界Linux界的桌面先驱者和创新者&#xff0c;突然宣布放弃自己多年开发的Uni…

chatgpt赋能python:Python自动化控制应用:提高工作效率的利器

Python自动化控制应用&#xff1a;提高工作效率的利器 在如今信息化程度越来越高的社会&#xff0c;人们不断追求工作效率的提高。而Python作为一种解释型、交互式、面向对象的高级程序设计语言&#xff0c;具有简洁易读、可扩展性强等优势&#xff0c;成为了许多企业和工作者…

chatgpt赋能python:Python连接Kepserver实现工业自动化控制

Python连接Kepserver实现工业自动化控制 前言 在工业自动化控制领域&#xff0c;Kepserver是一个被广泛使用并拥有众多功能的软件平台。通过连接Kepserver&#xff0c;可以实现对各种设备的数据采集、控制和监控等操作。本文将重点介绍如何使用Python语言来连接Kepserver软件…

chatgpt赋能python:Python自动化SEO文章的介绍

Python自动化SEO文章的介绍 随着互联网技术的不断发展&#xff0c;SEO&#xff08;Search Engine Optimization&#xff0c;搜索引擎优化&#xff09;已成为网站日常运营中关键的一环。为了提高网站的排名和流量&#xff0c;人们不断探索各种SEO方法。而Python自动化SEO文章是…

企业微信会话存档功能接入

企业微信会话存档功能接入 简介官方文档上代码参考链接 简介 最近有个需求需要接入企业微信&#xff0c;将员工和客户的聊天记录存档&#xff0c;于是翻阅企业微信开放平台接口文档&#xff0c;写的那叫一个“好”(lan)。 网上文档也比较少&#xff0c;仔细阅读&#xff0c;翻…

midjourney/stable diffusion/太乙/文心一格/智源对比

挑战周杰伦《稻香》MV画面生成&#xff01;中英文绘画模型PK&#xff0c;Midjourney、DALLE2、Stable Diffusion、百度ERNIE-ViLG 2.0.._哔哩哔哩_bilibili本期视频小土同学使用周杰伦《稻香》评测了最近大热的 6 个 AI 绘画模型的效果&#xff1a;MidJourney、Stable Diffusio…

文心一格小程序,AI绘画产品

文章目录 AIGC什么是AI作画&#xff1f;Prompt文心一格文心一格小程序使用方法使用小程序进行AI绘图 AIGC的未来发展结语 AIGC AIGC&#xff08;AI Generated Content&#xff09;是指利用人工智能生成内容。是利用人工智能来生成你所需要的内容&#xff0c;GC的意思是创作内容…

文心一格:文心一格与ChatGPT的对比分析

文章目录 [toc]简介1.中文作诗2.中国历史文化3.代码能力4.内容查询5.多模态小结其他&#xff1a; 简介 根据文心一言网页端信息显示&#xff0c;目前最新发版是4月1号的版本&#xff0c;版本号是v1.0.3&#xff0c;应该是从上个月16号发布会以后又做了两版迭代。根据文心一言自…

虚拟号的运营商一般是哪家的?你知道吗?

虚拟号的运营商一般分三种来源&#xff0c;下面和小编 一起了解一下 吧&#xff1a; 一&#xff1a;运营商&#xff0c;中国联通&#xff0c;中国移动&#xff0c;中国电信都有。 二&#xff1a;虚拟运营商&#xff0c;阿里&#xff0c;华为&#xff0c;腾讯之类 三&#xff1a…

保存138亿年?!5维磁盘在南安普顿大学研制成功

南安普顿大学研究中心&#xff08;ORC&#xff09;的人员近日发表报告称&#xff0c;他们成功研制出 5D 磁盘&#xff0c;且可以存储上亿年。利用纳米技术将信息蚀刻到玻璃上&#xff0c;拥有良好的稳定性&#xff0c;可以承受一千度的高温&#xff0c;而由于玻璃的物理特性&am…

DeepMind成为AI界创业加速营:3年17名资深员工与高管离职

来源丨新智元 编辑丨极市平台 在过去几年里&#xff0c;谷歌旗下的人工智能研究实验室DeepMind已经成为顶级人工智能人才的宝库。 自从谷歌在2014年以约5亿美元的价格收购了这家总部位于伦敦的初创公司以来&#xff0c;DeepMind在AI界屡有划时代突破&#xff1a; 创建了可以在棋…

10种流行的机器学习算法进行泰坦尼克幸存者分析

还记得上世纪轰动全球的泰坦尼克吗? 1912年4月,正在处女航的泰坦尼克号在撞上冰山后沉没,2224名乘客和机组人员中有1502人遇难,这场悲剧轰动全球,遇难的一大原因正式没有足够的就剩设备给到船上的船员和乘客。 虽然幸存者活下来有着一定的运气成分,但在这艘船上,总有一…

英国南安普顿大学医院博士后职位—儿科重症监护

英国南安普顿大学医院博士后职位—儿科重症监护 [知识人网-博士后招聘]南安普顿大学&#xff08;University of Southampton&#xff0c;勋衔Soton&#xff09;&#xff0c;世界百强名校&#xff0c;英国顶尖学府&#xff0c;是罗素大学集团、世界大学联盟、科学与工程南联盟、…

南安普顿大学计算机专业如何,南安普顿大学计算机专业,南安最值得读的专业之一!...

主要的硕士课程包括&#xff1a; 计算机科学与软件工程 MSc Computer Science 计算机科学 MSc Artificial Intelligence 人工智能 MSc Cyber Security 网络安全 MSc Data Science 数据科学 MSc Software Engineering 软件工程 电子与电气工程 MSc Electronic Engineering 电子工…

知识图谱学习一:啥是知识图谱,用来干啥,怎么做?

一、啥是知识图谱 通俗的讲就是由知识形成的图。知识图 1.1 知识 知识让机器具有认知能力 百度AIG&#xff08;人工智能技术体系&#xff09;负责人王海峰曾提出&#xff0c;AI可以分为感知层和认知层&#xff0c;感知是人类和动物都有的能力&#xff0c;机器一定程度也可以比人…

2023年第六届广西大学生程序设计竞赛(正式赛)题解

比赛题目链接&#xff0c;可以继续提交代码: 2023年第六届广西大学生程序设计竞赛&#xff08;正式赛&#xff09; | 知乎&#xff1a;如何评价第六届广西大学生程序设计竞赛? 难度题号备注签到题A J K已给出题解和代码普通题B D E H已给出题解和代码中等题C G I给出 I 题代码…

Python 集合应用之“简易英语词汇生词本”

# 英语生词本""" 介绍&#xff1a;背单词是学英语最基础的一环&#xff0c;不少学生在背单词的过程中会整理自己的生词本&#xff0c;以不断拓展自己的词汇量。知识点&#xff1a;1、集合的创建、增添、删除、查询、遍历2、循环语句&#xff1a;while、for3、条…