xWin的HTC分享

 更新时间:2016年9月20日 19:05  点击:1848

不是炒冷饭,我添加了很多新的功能哦

演示地址: xWinHTCDemo.htm

CSS: global.css

HTC: xwin.htc

特点:

1.使用简单.在页面中引用了css后就可以直接用<x:win>生成窗口,异常简单.在<x:win>中可以用left,top,width,height来初始化窗口,不写则默认由窗口内容决定.

2.支持多窗口嵌套.支持拖动,支持缩放,支持最大化最小化

3.支持方法:

<public:method name="Close"/>
<public:method name="Destroy"/>
<public:method name="Max"/>
<public:method name="Min"/>
<public:method name="MoveTo"/>
<public:method name="ResizeTo"/>
<public:method name="SetContent"/>
<public:method name="SetTitle"/>
<public:method name="ShowHide"/>

属性:

<public:property name="Body" get="getBody" put="putBody"/>
<public:property name="Title" get="getTitle" put="putTitle"/>

是不是比较象一个真正的窗口了?呵呵



  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。

  其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”,网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制作的水平上,在于我们自身的美感以及对页面的把握上。

  首先,我们要弄清楚网页设计的任务。

  一、设计的任务

  设计是一种审美活动,成功的设计作品一般都很艺术化。但艺术只是设计的手段,而并非设计的任务。设计的任务是要实现设计者的意图,而并非创造美。

  网页设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为以下三类。

  第一类是资讯类站点,像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息,而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。

  第二类是资讯和形象相结合的网站,像一些较大的公司、国内的高校等。这类网站在设计上要求较高,既要保证资讯类网站的上述要求,同时又要突出企业、单位的形象。然而就现状上来看,这类网站有粗制滥造的嫌疑。

  第三类则是形象类网站,比如一些中小型的公司或单位。这类网站一般较小,有的则有几页,需要实现的功能也较为简单,网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

  当然,这只是从整体上来看,具体情况还要具体分析。不同的站点还要区别对待。别忘了最重要的一点,那就是客户的要求,它也属于设计的任务。

  明确了设计的任务之后,接下来要想的就是如何完成这个任务了。

  二、设计的实现

  设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制,这一部分可以在纸上完成。第二部分为网页的制作,这一过程是在计算机上完成的。

  设计首页的第一步是设计版面布局。我们可以将网页看作传统的报刊杂志来编辑,这里面有文字、图像乃至动画,我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。

  除了要有一台配置不错的计算机外,软件也是必需的。不能简单地说一个软件的好坏,只要是设计者使用起来觉得方便而且能得心应手的,就可以称为好软件。当然,它应该能满足设计者的要求。笔者常用的软件是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、imageready,这些都是很不错的软件。

  接下来我们要做的就是通过软件的使用,将设计的蓝图变为现实,最终的集成一般是在Dreamweaver里完成的。虽然在草图上,我们定出了页面的大体轮廓,但是灵感一般都是在制作过程中产生的。设计作品一定要有创意,这是最基本的要求,没有创意的设计是失败的。在制作的过程中,我们会碰到许多问题,其中最敏感的莫过于页面的颜色了。

  三、色彩的运用

  色彩是一种奇怪的东西,它是美丽而丰富的,它能唤起人类的心灵感知。一般来说,红色是火的颜色,热情、奔放;也是血的颜色,可以象征生命。黄色是明度最高的颜色,显得华丽、高贵、明快。绿色是大自然草木的颜色,意味着纯自然和生长,象征安宁和平与安全,如绿色食品。紫色是高贵的象征,有庄重感。白色能给人以纯洁与清白的感觉,表示和平与圣洁。

  我们知道,颜色是光的折射产生的,红、黄、蓝是三原色,其它的色彩都可以用这三种色彩调和而成。换一种思路,我们可以用颜色的变化来表现光影效果,这无疑将使我们的作品更贴近现实。

  色彩代表了不同的情感,有着不同的象征含义。这些象征含义是人们思想交流当中的一个复杂问题,它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。

  单纯的颜色并没有实际的意义,和不同的颜色搭配,它所表现出来的效果也不同。比如绿色和金黄、淡白搭配,可以产生优雅,舒适的气氛。蓝色和白色混合,能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带来暖意。设计的任务不同,配色方案也随之不同。考虑到网页的适应性,应尽量使用网页安全色。

  但颜色的使用并没有一定的法则,如果一定要用某个法则去套,效果只会适得其反。经验上我们可先确定一种能表现主题的主体色,然后根据具体的需要,应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应是一个整体,以达到和谐、悦目的视觉效果。

  四、造型的组合

  在网页设计中,我们主要通过视觉传达来表现主题。在视觉传达中,造型是很重要的一个元素。抛去是图还是文字的问题,画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里,是需要点、线、面的共同组合与搭配来构造整个页面的。

最近可能要模块化架构一个大型网站,所以研究了一下各种页面引入技术,效率最高的就是避免过多的服务器端操作,目前的方式大多分为以下几类:

1、 应用Html中的框架(iframe)

目前大多数门户网站都应用iframe来进行页面上广告的投放,就是将不同的广告分别应用iframe投放到主页面上,优点是效率高,互不影响,缺点是不符合网页标准的发展趋势,页面互不关联,不适合技术和表现方式的统一部署(例如CSS/JS等)

<iframe src="index.htm"></iframe>

2、 SSI技术

这是在服务端应用页面包含技术、具有程序语言的特性,但是SSI是为WEB服务器提供的一套命令,因此优于asp、php等程序语言,目前普遍应用于大型门户网站,例如新浪,腾讯等,优点是维护方便,且适合网站技术的统一部署,符合网页标准。

SSI中Include命令具有两个不同的参数: 

Virtual:给出到服务器端某个文档的虚拟路径。例如: 

<!--#include virtual="/includes/header.html" -->  
File:给出到当前目录的相对路径,其中不能使用"../",也不能使用绝对路径。例如: 

<!--#include file="header.html" --> 

3、 Javascript包含技术

利用JS的调用特性封装Html代码,缺点是代码需要客户端二次解析,增加代码的容量且每次更新需要重新写JS代码,另外需要注意的是include.js里不能再包含<script>和</script>,扩展名随意,所有内容必须经由 write()、wirteln()、innerHTML、innerText、outerHTML或outerText 输出显示。代码示例: 

<script src="include.js"></script>

4、 用 download 行为下载后再用 innerHTML 特性显示出来

方法:
在主页面需要引入包含页面的地方写上以下代码:

<span id="demo" src="demo.htm" style="behavior:url(#default#download)"></span>  
<SCRIPT> 
 function window.onload(){ 
   demo.startDownload(demo.src,fnDownload) //改用document.getElementById
 } 
 function fnDownload(oSource){ 
   demo.innerHTML=oSource 
 } 
 </SCRIPT> 
缺点:兼容性不好

5、 Object(Scriptlets组件)。代码示例: 

<object style="border: 0px" type="text/x-scriptlet" data="index.htm" width=400 Height=300></object>

6、 XMLHTTP组件。代码示例:

<script for="window" event="onload"> 
  with(new ActiveXObject("Microsoft.XMLHTTP")){ 
  open("get",demo.src,false,"","") 
  send() 
  demo.innerHTML=ResponseText 
  } 
</script> 
<span id="demo" src="demo.htm"></span> 
需要注意,目标文件最好以Unicode或UTF-8编码保存,否则目标文件中的双字节文字会变成乱码。当然,可以用下面的函数把返回的ResponseText处理一下,但是这样效率比较低,文件较大时不推荐使用。XMLHTTP这种方法也可以在后台程序中使用。
<     Google SiteMap Protocol是Google自己推出的一种站点地图协议,此协议文件基于早期的robots.txt文件协议,并有所升级。在Google官方指南中指出加入了Google SiteMap文件的网站将更有利于Google网页爬行机器人的爬行索引,这样将提高索引网站内容的效率和准确度。文件协议应用了简单的XML格式,一共用到6个标签,其中关键标签包括链接地址、更新时间、更新频率和索引优先权。

Google SiteMap文件生成后格式如下:
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
  <url>
    <loc>http://homepage.</loc>
    <lastmod>2005-06-03T04:20-08:00</lastmod>
    <changefreq>always</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>http://homepage./300687.html</loc>
    <lastmod>2005-06-02T20:20:36Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

XML标签
changefreq:页面内容更新频率。
lastmod:页面最后修改时间
loc:页面永久链接地址
priority:相对于其他页面的优先权
url:相对于前4个标签的父标签
urlset:相对于前5个标签的父标签

我将一句一句分解讲解这个xml文件的每一个标签:
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
这一行定义了此xml文件的命名空间,相当于网页文件中的<html>标签一样的作用。

<url>
这是具体某一个链接的定义入口,你所希望展示在SiteMap文件中的每一个链接都要用<url>和</url>包含在里面,这是必须的。

<loc>http://homepage.</loc>
用<loc>描述出具体的链接地址,这里需要注意的是链接地址中的一些特殊字符必须转换为XML(HTML)定义的转义字符,如下表: 字符 转义后的字符
HTML字符 字符编码
and(和) & & &#38;
单引号 &apos; &apos; &#39;
双引号 " " &#34;
大于号 > &gt; &#62;
小于号 < &lt; &#60;

<lastmod>2005-06-03T04:20:32-08:00</lastmod>
<lastmod>是用来指定该链接的最后更新时间,这个很重要。Google的机器人会在索引此链接前先和上次索引记录的最后更新时间进行比较,如果时间一样就会跳过不再索引。所以如果你的链接内容基于上次Google索引时的内容有所改变,应该更新该时间,让Google下次索引时会重新对该链接内容进行分析和提取关键字。这里必须用ISO 8601中指定的时间格式进行描述,格式化的时间格式如下:
年:YYYY(2005)
年和月:YYYY-MM(2005-06)
年月日:YYYY-MM-DD(2005-06-04)
年月日小时分钟:YYYY-MM-DDThh:mmTZD(2005-06-04T10:37+08:00)
年月日小时分钟秒:YYYY-MM-DDThh:mmTZD(2005-06-04T10:37:30+08:00)
这里需注意的是TZD,TZD指定就是本地时间区域标记 在做一些网站(特别是bbs之类)时,经常会有充许用户输入html样式代码,却禁止脚本的运行的需求, 以达到丰富网页样式,禁止恶意代码的运行。
当然不能用 htmlencode 和 htmldecode 方法,因为这样连基本的html代码会被禁止掉。
我在网上搜索,也没有找到好的解决办法,倒是收集了一些脚本攻击的实例:
1. <script>标记中包含的代码
2. <a href=javascript:...中的代码
3. 其它基本控件的 on...事件中的代码
4. iframe 和 frameset 中载入其它页面造成的攻击
有了这些资料后,事情就简单多了,写一个简单的方法,用正则表达式把以上符合几点的代码替换掉:
public string wipescript(string html)
{
system.text.regularexpressions.regex regex1 = new system.text.regularexpressions.regex(@"<script[ss]+</script *>",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex2 = new system.text.regularexpressions.regex(@" href *= *[ss]*script *:",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex3 = new system.text.regularexpressions.regex(@" on[ss]*=",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex4 = new system.text.regularexpressions.regex(@"<iframe[ss]+</iframe *>",system.text.regularexpressions.regexoptions.ignorecase);
system.text.regularexpressions.regex regex5 = new system.text.regularexpressions.regex(@"<frameset[ss]+</frameset *>",system.text.regularexpressions.regexoptions.ignorecase);
html = regex1.replace(html, ""); //过滤<script></script>标记
html = regex2.replace(html, ""); //过滤href=javascript: (<a>) 属性
html = regex3.replace(html, " _disibledevent="); //过滤其它控件的on...事件
html = regex4.replace(html, ""); //过滤iframe
html = regex5.replace(html, ""); //过滤frameset
return html;
}
此方法输入可能包含脚本的html代码,返回则就是干净的代码了。

SyntaxHighlighter.highlight();
[!--infotagslink--]

相关文章

  • python-for x in range的用法(注意要点、细节)

    这篇文章主要介绍了python-for x in range的用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-10
  • Photoshop火龙变冰龙制作教程分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下火龙变冰龙的制作教程,各位想知道具体的制作步骤的使用者们,那么下面就快来跟着小编一起看看制作教程吧。...2016-09-14
  • gin 获取post请求的json body操作

    这篇文章主要介绍了gin 获取post请求的json body操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-15
  • Illustrator渐变网格工具绘制可爱的卡通小猪教程分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说渐变网格工具绘制可爱的卡通小猪的教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一...2016-09-14
  • Photoshop功夫熊猫电影海报制作步骤分享

    不知不觉功夫熊猫这部电影已经出到3了,今天小编在这里要教大家的是用Photoshop制作功夫熊猫3的海报,各位想知道制作方法的,那么下面就来跟着小编一起看看吧。 给各...2016-09-14
  • phpmyadmin config.inc.php配置示例

    phpmyadmin config.inc.php配置示例...2013-09-29
  • photoshop日系小清新通透人像调色教程分享

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说日系小清新通透人像的调色教程,各位想知道具体的调色步骤的使用者们,那么下面就快来跟着小编一起看一看...2016-09-14
  • php威盾解密的例子分享

    下面来给大家分享两个关于php威盾解密的例子,一个是批量解密一个是超级算法的解密都非常的好,大家有举的进入参考。 例子,批量解密 代码如下 复制代码 ...2016-11-25
  • Javascript for in的缺陷总结

    这篇文章主要介绍了Javascript for in的缺陷总结的相关资料,需要的朋友可以参考下...2017-02-08
  • PHP mysql与mysqli事务使用说明 分享

    mysqli封装了诸如事务等一些高级操作,同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02
  • php实例分享之html转为rtf格式

    核心代码: 复制代码 代码如下:<!--?php$html2RTFCom = new COM("HTML2RTF.Converter");$html2RTFCom--->PreserveImages = true;$html2RTFCom->PageNumbers = 1;$html2RTFCom->PageNumbersAlignH = 1;$html2RTFCom->Pa...2014-06-07
  • Mybatis plus中使用in查询出错如何解决

    这篇文章主要介绍了Mybatis plus中使用in查询出错的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-06
  • phpMyadmin创建数据库和设置用户权限图解

    phpmyadmin是一款很不错的WEB对mysql数据库管理软件,如果你想创建数据库与设置用户权限我们必须操作用户的很高的权限,如ROOT权限,下面我来给大家介绍介绍。 先来配...2016-11-25
  • 使用phpMyAdmin批量修改Mysql数据表前缀的方法

    多个网站共用一个Mysql数据库时,为使数据库管理不混乱,一般采用不同的网站使用不同前缀名的方式进行区分。而如何批量修改已有数据库的前缀名呢?全部导出修改后再导入?还是一个表一个表的修改?今天我要介绍的是相对简单的...2015-10-21
  • 微信小程序实现canvas分享朋友圈海报

    这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
  • C++中cin的用法详细

    这篇文章主要介绍了C++中cin的用法详细,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-04-25
  • 修改mysql密码phpmyadmin不能登录

    出现phpmyadmin不能登录是我在修改我mysql服务器密码之后导致的,后来百度了相关的原因,原来是修改了mysql密码之后我们还需要在phpmyadmin目录中去修改config.inc.php中...2016-11-25
  • 美图秀秀制作卡通全家福教程分享

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作卡通全家福的教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14
  • vue如何调用浏览器分享功能详解

    这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-20
  • vue-admin-template配置快捷导航的代码(标签导航栏)

    这篇文章主要介绍了vue-admin-template配置快捷导航的方法(标签导航栏),本文通过实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-04