ASP.NET页面换肤可扩展性设计.doc

ASP.NET页面换肤的可扩展性设计 ASP.NET页面换肤的可扩展性设计 PAGE / NUMPAGES 蚆PAGE 肆羂 蚁莄 螁蕿 肇薁 薃膃 螄袆 袁膈 蒇蒁 芅莄 蒂膄 羁螇 袈蒂 蚃莁 芁螆 肁莆 羅肈 莅薂 肀羄 肁羅 莆羈 袃袃 肃薆 膀螈 螇袈 薅螁 袂袄 芀莈 芈袈 肃肂 蚁莇 莀羇 虿螈 螅芃 蚄蚅 蒀薆 螆蚈 蒆蒄 蒃羃 薀葿 膆薈 羄蒁 膁蒅 蚀肈 薇蒈 蚆蚂 羀螃 蚀蚇 羈荿 肄羃 羃莅 螀芆 肅艿 螆袀 螂薃 衿袅 蒆艿 芄肂 薁膅 罿虿 袇腿 羆莃 薄蒄 聿芈 ASP.NET页面换肤的可扩展性设计 <arel='nofollow'onclick="doyoo.util.openChat();returnfalse;" href="#"> 【纲要】 换肤旨在依据用户爱好切换页面款式。与惯例的 页面美化对比，它是一项综合性极强的深层次页面美化工作。 为使ASP.NET页面既能实现换肤又能具备极强的可扩展性， 本文特别重视母板页和多级目录对调肤成效的影响。第一为 站点构造拟订合适换肤的规划，且以变量形式定义款式表引 用，而后在JavaScript脚本获得变量时重视母板页前缀转变， 赋值时重视相对引用地点转变，最后实现拥有高可扩展性的 ASP.NET页面换肤成效。 【重点词】 款式表变量 Cookie母板页前缀 相对地点 变换 前端网页设计师的职责主假如对网页页面的外观进行 色彩搭配，同时加以页面动向殊效。这此中波及的技术包含 Html、CSS、JavaScript以及换肤。所谓换肤，就是使用户能 够依据个人爱好自定义网页的外观（亦称款式）。比起一般的页面美化，换肤是一项综合性极强的深层次页面美化。 在网页设计中，换肤实现的原理能够简单归纳为：先定 义多套款式（这些款式被保存在不同的CSS文件中）。而后在页面中供给一个用户进行选择的交互接口。最后由JavaScript脚本方法依据用户的选择导入相应的款式表文件并从头体现页面成效。 只管这样，比起实现换肤，对调肤的可扩展性设计更为 值得关注。以 QQ皮肤为例，此刻的 QQ用户其实不关怀某一 套QQ皮肤能否雅观，他们更为关注有多少套 QQ皮肤可供 选择。因此QQ皮肤的设计师一定不停更新 QQ皮肤，这便 对QQ皮肤的可扩展性提出了更高的要求。若 QQ皮肤设计 师在新增一套皮肤时需要对 QQ软件进行多处改正，那么他 们的工作效率必然遇到影响，甚至稍有不慎便会惹起 QQ软 件的逻辑错误。综上所述，对调肤的可扩展性设计就是特意 应付上述问题的预先架构。架构越全面，可扩展性就越好， 这样在新增一套皮肤时需要改正处越少，实现就越简单。 这里的构想主要环绕双方面，第一是实现换肤，第二是 使换肤拥有可扩展性。为达到这两个目标，第一应当划分页面中哪些地区的款式是一直静止不变的，哪些地区的款式是随换肤而动向变化的，不然没法有的放矢地准备素材。而后把全部静态款式（即不需要改动的款式）寄存在公共款式表中，把全部动向款式（随换肤动向变化的款式）寄存于各自 独立的款式表中。比若有A、B两套皮肤，A皮肤对应皮肤A款式表，B皮肤对应皮肤B款式表。最后将编写的特定皮肤 款式导入页面，这里仅在客户端履行 JavaScript脚本控制。 其原理是先利用 JavaScript的DOM方法接见link对象，而后 动向定义它的href属性，最后实现动向导入款式表文件的目的。其整体构想如图1所示。 对使用换肤而言，用户均在html页面上选定自己喜爱的皮肤。因此，html页面就是换肤的对外接口。若要实现该接口，重点在于怎样使款式能够被动向赋值。比如，用户选择 皮肤1，款式对应被赋值皮肤1。用户选择皮肤2，款式对应被赋值皮肤2。 用户选择特定皮肤后，将在html页面调用特定的JavaScript脚本，由脚本实现款式赋值。此处的脚本，重点是 要解决三个问题。第一，怎样保存用户选择的皮肤，以便用 户下次接见网页后依旧能够获得他此次选择的皮肤。第二， 由于ASP.NET网页常常使用母板页。凡套用母板页的页面， 其母板页中的变量均会自动增添 ct100前缀。比如，页面使 用了一个母板页，该页面中属于母板页的变量均会自动增添 一个ct100前缀。若页面使用一个套用了母板页的母板页。 即这个母板页自己亦套用了一个母板页。那么第一层的母板 页称为顶级母板页， 第二层的母板页称为次级母板页。 此时， 页面中属于顶级母板页的变量均会自动增添两个 ct100前缀。 因此，此处的重点在于 JS脚本怎样使页面中的款式指向正确 的皮肤。第三， 指向。比如，关于一级目录下的网页，款式表的引用地点为 style/skin1.css。关于二级目录下的网页，款式表的引用地点 为../style/skin1.css。因此，为了使不同目录下的