GanGeGe's Blog» html http://gangege.com 作人要厚道_搞网络要低调_但钱一定要赚到! Tue, 27 Jul 2010 08:42:45 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 HTML5预览 (A Preview of HTML 5) http://gangege.com/post/431 http://gangege.com/post/431#comments Mon, 03 Mar 2008 11:33:32 +0000 gangege http://gangege.com/post/431 概要

网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来到我们身边已经差不多有10年了, 发行者们不断的寻求提供更强大的功能的新技术, 但是常会因为标记语言和浏览器的约束而路途坎坷.

为了给作者们提供更灵活, 更具互操作性, 能有更多交互性并令人振奋的网站和应用程序, HTML 5 引入并加强了一系列功能, 包括表单控制, 应用程序接口(APIs), 多媒体, 结构化和语义化.

HTML 5的工作, 开始于2004年, 在 W3C HTML WG 和 WHATWG 的共同努力下现在正在全面贯彻落实. 很多关键角色参与了W3C的努力, 最具代表性的是4大浏览器厂商: Apple, Mozilla, Opera, Microsoft; 还有一系列的有着不同利益和专业技术的其他机构以及个人.

编写详细规范的工作还在进行中, 离完成还有很长的路要走. 同样的, 在这篇文章中讨论的功能不排除在未来有所改动的可能. 这篇文章只是以大纲的形式介绍一些在当前的草案中的主要的特性.

结构

HTML 5 引入了一整套全新的元素来让构建页面变得更加简单. 大多数基于HTML 4的页面的包含多种常用结构, 比如说页首(header), 页脚(footer)和纵列(column). 现阶段我们通常会用div元素标记这些区块, 然后为它们定义一个描述性的id或是class.

图表说明一个典型的用div元素带上id和class属性标记的2栏布局. 其中包括页首(header)和页脚(footer), 在页首下面是一个水平导航条, 主体内容又包含了文章(article)和它右边的侧边栏(sidebar).

大量的使用div元素是因为目前的HTML 4版本缺少更明确的语义描述这些区块所致. HTML 5 为了表现这些不同的区块而引入了新的元素.

那些div元素可以被新的元素代替了: header, nav, section, article, aside以及footer.

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>
…
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

用 这些新元素会有一些优势(相对于HTML 4). 当和标题元素(h1 – h6)一同使用时, 可以标记出嵌套的章节标题层次, 超越之前版本的HTML仅有的六个层次. 规范中包含了一份生成大纲的详细算法. 把结构化这些内容纳入考虑范围, 并仍旧向后兼容先前的版本. 这样可以在编辑工具以及浏览器中生成目录来帮助用户来浏览这个文档.

举例说明, 下面的标记结构使用了嵌套的章节和h1元素构成:

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

这里要注意, 为了更好的兼容现在的浏览器, 它也能在适当的位置利用其它的标题元素(h2 – h6)来代替h1元素.

通过辨别页面中的章节使用特殊章节元素的确切目的, 辅助的技术能帮助用户更容易的浏览这个页面. 举例, 他们能不费力的略过导航区块或者能快速的从一篇文章直接跳到下一篇而不需要作者提供跳转链接. 对于创作者来说, 在文档中去掉多余的div, 而用一些更明显的元素代替它们, 会让源代码更清楚而且更容易书写.

header元素表示一个区块的头部, “头部” 可能包含不只是区块的标题, 比如头部包含了副标题, 历史版本信息或是署名都是合理的.

<header>
<h1>A Preview of HTML 5</h1>
<p class="byline">By Lachlan Hunt</p>
</header>
<header>
<h1>Example Blog</h1>
<h2>Insert tag line here.</h2>
</header>

footer元素表示用上它的那个区块的脚部, 一个具代表性的 “脚部” 包括了这个区块的一些信息, 比如谁写了它, 链接到相关的文档, 版权信息等等.

<footer>© 2007 Example Inc.</footer>

nav元素表示一个导航链接的区块. 它同时适用于站点导航和目录.

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>

aside元素为了存放和主要内容没有太大关系的内容, 是典型的标记提要内容方法.

<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>

section元素表示了一份文档或是一个应用程序一般意义上的区块, 比方说章节.

<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
it was the age of wisdom, it was the age of foolishness,
it was the epoch of belief, it was the epoch of incredulity,
it was the season of Light, it was the season of Darkness,
…</p>
</section>
(引用自<A Tale of Two Cites>)

article元素表示一份文档, 站点的页面中独立的区块. 它适用于类似新闻, blog文章, 论坛帖子或者个人注释这样的内容.

<article id="comment-2">
<header>
<h4>
<a href="#comment-2" rel="bookmark">Comment #2</a>
by <a href="http://example.com/">Jack O’Niell</a>
</h4>
<p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p>
</header>
<p>That’s another great article!</p>
</article>
视频和音频

在最近几年, 网络上的视频和音频日益增多, 像是youtube, Viddler, Revver, MySpace, 还有其他很多可以让任何一个人更容易的发布视频和音频的网站. 然而, 因为当前的HTML缺少必要的方法顺利的插入并控制多媒体, 很多网站都依赖Flash来提供这样的功能. 尽管可能可以用各种各样的插件 (就像是QuickTime, Windows Media等等) 嵌入多媒体, 但是Flash是当前唯一被广泛应用的, 提供了开发者们所渴望的跨浏览器兼容解决方案的插件.

对于各种基于Flash的媒体播放器, 创作者们对提供他们自己的用户定制设计的界面, 那一般都允许用户控制播放, 暂停, 停止, 查找或调整音量. 为浏览器提供插入视频和音频并提供DOM接口让Script控制播放的功能要通过安装本地程序支持.

视频和音频的新元素让这个工作变得更加简单. 这两者之间的大部分API都是共享的, 唯一区别就关系到可视和不可视媒体之间的固有区别.

Opera和Webkit已经放出了一个部分支持视频元素的版本, 你可以到 experimental build of Opera (http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/) 或者最新的 nightly build of WebKit (http://nightly.webkit.org/) 去下载并试验一下这些示例. Opera支持Ogg Theora, Webkit支持所有QuickTime支持的媒体格式, 包括第三方的解码器.

插入视频最简单的方法是使用video元素, 它会允许浏览器提供一个默认的用户界面, 其中controls属性是一个boolean值属性, 这个属性是让创作者决定用户界面是否要显示(默认是不显示).

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

可选择的poster属性可以指定在视频播放前用来显示的图像. 尽管有一些视频格式有它们特有的预览图格式, 就像是MPEG-4, 它提供了一个可以不依赖于视频格式的可选择方案.

用audio元素在页面内插入音频文件也非常容易. audio和video元素的大部分属性都是共用的, 但非常显而易见的, audio元素没有width, height以及poster属性.

<audio src="music.oga" controls>
<a href="music.oga">Download song</a>
</audio>

HMTL 5 提供了source 元素, 让浏览器根据媒体类型或编码器的支持来指定视频或音频文件. media属性会根据设备的局限性和被指定的媒体的类型和编码器来指定一个媒体选择查询. 当在使用 source 元素时, 上级元素( video或audio )的src属性需要省略掉, 不然 source 元素中的src属性会被忽略掉.

<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4" type="video/mp4">
</video>
<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

为 了那些需要给用户界面更多一点控制来符合页面的总设计的创作者以方便, 广泛的API提供了一些方法和事件让scripts来控制媒体文件. 最简单的方法就是用 play(), pause(), 然后可以通过设置 currentTime 来进行循环. 接下去的例子会解释怎么用.

<video src="video.ogg" id="video"></video>
<script>
var video = document.getElementById("video");
</script>
<button type="button" onclick="video.play();">Play</button>
<button type="button" onclick="video.pause();">Pause</button>
<button type="button" onclick="video.currentTime = 0;"><< Rewind</button>

还 有很多这里没有讨论到的属性以及API可以被用到视频音频元素. 如果想知道更多, 你可以参考 current draft specification (http://www.whatwg.org/specs/web-apps/current-work/multipage/section-video.html#video).

文档继承性

不像先前版本的 HTML 和 XHTML根据它们的语法来定义, HTML 5 是根据文档对象模型(DOM)来定义的 – 浏览器中用来描述文档的的继承型树结构. 例如, 构成一个由 名称(title), 标题(heading) 和段落(paragraph) 的文档, 那么, 这个DOM 树可能看起来是这样的:

这个DOM树包括: head中的title元素, body中的h1和p元素.

根据DOM定义的HTML 5的优点是这种语言可以不依赖于它自己的语法. 有两个主要的语法用来表现HTML文档: HTML的序列和XML的序列 .

HTML 序列从HTML稍早版本的SGML语法中得到灵感而引入的一种语法, 但是却定义成更适合浏览器在真实环境下处理HTML的方式.

<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>

你会注意到, 这看起来很像是前个版本的HTML, 有些标签会自动闭合.

XML 序列引入了XML 1.0的语法和命名空间, 就像是 XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>

除了间隔和xmls属性, 这两个例子几乎是相同的.

浏览器通过使用MIME类型来区别两者, 任何text/html形式的文档必须符合 HTML 序列, 任何MIME类型是XML的文档,像是 application/xhtml+xml 必须符合XML 序列.

创作者可能要根据需要哪些功能来决定使用哪种序列. 没有使用它们的强制性的条件, 他们在不同情形下都可能是最优方案.

用HTML的好处

  • 向后兼容现有的浏览器
  • 创作者已经非常熟悉语法
  • 宽容和仁慈的语法, 将不会因为无意中的一个错误而对任何对用户有不友好的 “Yellow Screen of Death”.
  • 语法相当容易记忆, 举例说: 创作者可以省略掉一些标签或是属性值.

用XHTML的好处

  • 严格的XML语法鼓励创作者书写完整的标签, 有些用户会发现这样更容易维护.
  • 能直接的和其它XML词表结合, 比如 SVG 和 MathML.
  • 允许使用XML的处理过程, 有些创作者把这个过程作为他们编辑和发布过程的一部分.

如何贡献

HTML 5的工作进展很快, 但是由于要出示测试用例并实现互操作性, 它预期还会持续数年. 目前要完成的工作可能要10到15年的时间. 在这个过程中, 从各式各样的人都会有反馈, 在他们中间, web设计师和开发者, CMS和编辑工具的厂商和浏览器的厂商是确保成功的关键. 任何人都不只是欢迎, 更积极的是鼓励为HTML 5提供反馈.

除了规范之外, 还有更多相关的努力来帮助人们更好地理解这个工作.

The Differences from HTML 4 (http://www.w3.org/html/wg/html5/diff/) 描述了和前一版本的HTML的不同.
The HTML Design Principles (http://www.w3.org/TR/html-design-principles/) 讨论一些原理来帮助作出决定, 这也会帮助你了解在众多的设计结果背后的原理.
The Web Developer’s Guide to HTML 5 (http://dev.w3.org/html5/html-author/) 这是最近才开始做的, 这是为了帮助web设计师和开发者理解要书写符合规范的HTML 5的文档所需要知道的一切, 并且提供了指南, 也提供了描述得相当完整的试验.

你可以在很多的方面做出贡献. 你可以加入 W3C’s HTML WG , 订阅和贡献 HTML WG邮件列表, 或者完善它(wiki). 你也可以订阅或贡献其他的 WHATWG邮件列表, 在WHATWG 论坛发表文章, 在WHATWG 博客上留言或写文章.

原文：http://www.alistapart.com/articles/previewofhtml5
作者：Lachlan Hunt
译者：zhaozy in 3user.com
出处：http://bbs.blueidea.com/thread-2826586-1-1.html

标签：, ,
]]> http://gangege.com/post/431/feed 2 一个很酷的登陆效果！ http://gangege.com/post/364 http://gangege.com/post/364#comments Wed, 21 Nov 2007 09:03:31 +0000 gangege http://gangege.com/post/364 从截图上看不出什么，主要是动态效果！

登录效果

代码如下：

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>GanGeGe’s Blog：http://www.gangege.com</title>  
  4. <style>  
  5. body {   
  6.     padding:0px;   
  7.     margin:0px;   
  8.     background-Color:black;   
  9.     border-width:0px;   
  10.     font-size:12px;   
  11.     color:#DDD;   
  12.     overflow:hidden;   
  13. }   
  14. #divLogin {   
  15.     padding:30px;   
  16.     background-Color:#E9FFF0;   
  17.     color:navy;   
  18.     filter:alpha(opacity=50);   
  19.     z-Index:90;   
  20.     text-align:center;   
  21. }   
  22. #divLogin td{   
  23.     color:#555;   
  24. }   
  25. .input0 {   
  26.     border:#000 1px solid;   
  27.     width:160px;   
  28.     height:20px;   
  29.     color:navy;   
  30. }   
  31. .input1 {   
  32.     border:#000 1px solid;   
  33.     width:80px;   
  34.     height:20px;   
  35.     background-Color:transparent;   
  36.     color:navy;   
  37.     padding-top:2px;   
  38. }   
  39. </style>  
  40. <script>  
  41. //This program is written by Hutia.   
  42. //****Instructions*******   
  43. //  All the length are in the unit "px"   
  44. //  That’s all.   
  45. //***********************   
  46. wx=wxx=screen.availWidth;   
  47. hx=hxx=screen.availHeight;   
  48. ds=1800;//ds is the distance between user and the screen.   
  49. stars=new Array();   
  50. starTimer="";   
  51. logined=false;   
  52. top.moveTo(0,0);top.resizeTo(wxx,hxx);   
  53. function init(){   
  54.     wx=document.body.clientWidth;   
  55.     hx=document.body.clientHeight;   
  56.     for(var i=0;i<16;i++)createStar();   
  57.     startMoveStar();   
  58.     startLoginMove();   
  59. }   
  60. function startLoginMove(){   
  61.     divLogin.x=-175;   
  62.     divLogin.y=-100;   
  63.     divLogin.z=100000;   
  64.     divLogin.c=0;   
  65.     divLogin.size=350;   
  66.     divLogin.speed=500;   
  67.     setTimeout(loginMove,10);   
  68. }   
  69. function loginMove(){   
  70.     divLogindivLogin.z-=divLogin.speed;   
  71.     var tRe=d3d2(divLogin.x,divLogin.y,divLogin.z,divLogin.size,divLogin.c).split(":");   
  72.     with(divLogin.style){   
  73.         position="absolute";   
  74.         left=tRe[0];   
  75.         top=tRe[1];   
  76.         if(parseInt(tRe[2])<=0){   
  77.             display="none";   
  78.         }else{   
  79.             display="";   
  80.             width=tRe[2];   
  81.             height=parseInt(tRe[2])*200/350;   
  82.             overflow="hidden";   
  83.         }   
  84.     }   
  85.     if(divLogin.z>200){   
  86.         setTimeout(loginMove,10);   
  87.     }else{   
  88.         with(divLogin.style){   
  89.             position="absolute";   
  90.             left=wx/2+divLogin.x;   
  91.             top=hx/2+divLogin.y;   
  92.             display="";   
  93.             width=-2*divLogin.x;   
  94.             height=-2*divLogin.y;   
  95.             overflow="hidden";   
  96.         }   
  97.         divLogin.children[0].style.display="";   
  98.         stopMoveStar();   
  99.         shakeWin();   
  100.     }   
  101. }   
  102. function showContent(i){   
  103.     i=isNaN(i)?-1:parseInt(i);   
  104.     i++;   
  105.     try{   
  106.         switch(i%7){   
  107.             case 0:divLogin.style.top=50;break;   
  108.             case 1:divLogin.style.top=-100;break;   
  109.             case 2:divLogin.style.top=-160;break;   
  110.             case 3:   
  111.                 divLogin.style.top=-300;   
  112.                 divLogin.children[0].style.display="none";   
  113.                 divLogin.children[0].innerHTML=divMain.innerHTML;   
  114.             break;   
  115.             case 4:   
  116.                 divLogin.x=-wx/2+50;   
  117.                 divLogin.y=-hx/2+30;   
  118.                 divLogin.z=70000;   
  119.                 divLogin.c=0;   
  120.                 divLogin.size=wx-100;   
  121.                 divLogin.speed=500;   
  122.                 divLogin.filters[0].enabled=false;   
  123.                 logined=true;   
  124.                 setTimeout(loginMove,10);   
  125.             break;   
  126.         }   
  127.     }catch(e){return(false);}   
  128.     if(i<5){   
  129.         setTimeout("showContent("+i+");",10);   
  130.     }else{   
  131.         loginMove();   
  132.     }   
  133. }   
  134. //***Star functions********   
  135. function createStar(){   
  136.     var theIndex=stars.length;   
  137.     stars[theIndex]=document.createElement("DIV");   
  138.     document.body.insertBefore(stars[theIndex]);   
  139.     setRandomAttributes(stars[theIndex]);   
  140.     setStyle(stars[theIndex]);   
  141. }   
  142. function moveStar(){   
  143.     for(var i=0;i<stars.length;i++){   
  144.         stars[i].z-=stars[i].speed;   
  145.         if(stars[i].z<1500)setRandomAttributes(stars[i]);   
  146.         setStyle(stars[i]);   
  147.     }   
  148. }   
  149. function startMoveStar(){   
  150.     stopMoveStar();   
  151.     starTimer=setInterval(moveStar,10);   
  152. }   
  153. function stopMoveStar(){   
  154.     try{   
  155.         clearInterval(starTimer);   
  156.     }catch(e){}   
  157. }   
  158. //****Private functions******   
  159. function d3d2(x,y,z,size,color){   
  160.     var x=parseFloat(x);   
  161.     var y=parseFloat(y);   
  162.     var z=parseFloat(z);   
  163.     var size=parseFloat(size);   
  164.     var color=parseFloat(color);   
  165.     var percent=ds/(ds+z);   
  166.     x=parseInt(wx/2+x*percent);   
  167.     y=parseInt(hx/2+y*percent);   
  168.     size=parseInt(size*percent);   
  169.     color=parseInt(color*percent/2.5+153);   
  170.     return(x+":"+y+":"+size+":"+color);   
  171. }   
  172. function getColor(strC){   
  173.     try{   
  174.         var i=eval("0x"+strC.substring(1,3));   
  175.     }catch(e){return(255);}   
  176.     return(i);   
  177. }   
  178. function setRandomAttributes(obj){   
  179.     obj.size=parseInt(Math.random()*10)+10;   
  180.     obj.c=parseInt(Math.random()*45)+210;   
  181.     obj.x=(parseInt(Math.random()*500)+500)*(Math.random()>0.5?1:-1);   
  182.     obj.y=(parseInt(Math.random()*400)+400)*(Math.random()>0.5?1:-1);   
  183.     obj.speed=parseInt(Math.random()*120)+180;   
  184.     obj.z=parseInt(Math.random()*12000)+8000;   
  185. }   
  186. function setStyle(obj){   
  187.     var tRe=d3d2(obj.x,obj.y,obj.z,obj.size,obj.c).split(":");   
  188.     with(obj.style){   
  189.         position="absolute";   
  190.         left=tRe[0];   
  191.         top=tRe[1];   
  192.         if(parseInt(tRe[2])<=0){   
  193.             display="none";   
  194.         }else{   
  195.             display="";   
  196.             width=tRe[2];   
  197.             height=tRe[2];   
  198.             backgroundColor=toColor(tRe[3]);   
  199.             overflow="hidden";   
  200.         }   
  201.     }   
  202. }   
  203. function toColor(intV){   
  204.     var cc=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];   
  205.     var intV=parseInt(intV);   
  206.     re=""+cc[parseInt(intV/16)]+cc[intV%16];   
  207.     return("#"+re+re+re);   
  208. }   
  209. function shakeWin(i){   
  210.     i=isNaN(i)?-1:parseInt(i);   
  211.     i++;   
  212.     try{   
  213.         switch(i%7){   
  214.             case 0:window.moveTo(3,3);break;   
  215.             case 1:window.moveTo(-3,3);break;   
  216.             case 2:window.moveTo(-3,-3);break;   
  217.             case 3:window.moveTo(3,-3);break;   
  218.             case 4:window.moveTo(-3,3);break;   
  219.             case 5:window.moveTo(3,3);break;   
  220.             case 6:window.moveTo(0,0);break;   
  221.         }   
  222.     }catch(e){return(false);}   
  223.     if(i<7){   
  224.         setTimeout("shakeWin("+i+");",10);   
  225.     }else{   
  226.         window.moveTo(0,0);   
  227.         if(!logined)startMoveStar();   
  228.     }   
  229. }   
  230. </script>  
  231. </head>  
  232. <body onload="init();">  
  233.     <div id=divLogin style="display:none;">  
  234.     <form onsubmit="return(false);" style="display:none;">  
  235.         <table>  
  236.             <tr><td colspan=2 align=center>Login</td></tr>  
  237.             <tr>  
  238.                 <td><label>Name:</label></td>  
  239.                 <td><input class=input0 value="Guest"></td>  
  240.             </tr>  
  241.             <tr>  
  242.                 <td><label>Pass:</label></td>  
  243.                 <td><input class=input0 type=password value="Guest"></td>  
  244.             </tr>  
  245.             <tr><td colspan=2 align=center>  
  246.                 <input type=submit value="OK" class=input1 onclick="showContent();">  
  247.                 <input type=reset value="Cancel" class=input1>  
  248.             </td></tr>  
  249.         </table>  
  250.     </form>  
  251.     </div>  
  252.        
  253.     <div id=divMain style="display:none;">  
  254.         <iframe src="http://www.gangege.com" width="100%" height="100%"></iframe>  
  255.     </div>  
  256. </body>  
  257. </html>  

来源：落伍者

标签：,
]]> http://gangege.com/post/364/feed 0 在线手册集锦 http://gangege.com/post/183 http://gangege.com/post/183#comments Thu, 29 Jun 2006 17:04:56 +0000 gangege http://gangege.com/archives/183 HTML4.0手册
DHTML中文参考手册
MSXML 6.0 SDK(英文)
XML指南(中文版)
XMLHTTP手册
WML中文手册
VML中文手册
CSS2中文手册
样式表滤镜手册
Windows脚本技术
VBScript 用户手册
JAVASCRIPT中文参考手册
JAVASCRIPT中文教程
DOM手册
PHP4中文参考手册
PHP5中文参考手册
PHP5英文参考手册
PHP编程标准
MySQL5英文手册
MySQL4中文手册
MySQL3中文手册
Smarty中文手册
ZendFramework中文手册
Apache英文参考手册
Apache2英文参考手册
SQL Server中文手册
Postgresql7.3中文参考手册
asp手册
.net手册
JSP手册
JAVA手册
J2EE中文手册
ISAPI_Rewrite 手册
简明英语语法手册
Microsoft ADO 参考
WSH中文手册
FlashMX中文手册
Tomcat中文手册
Linux中文手册
ADO.NET手册
Servlet手册
FreeBSD手册
TBS手册

标签：, , , , , , ,
]]> http://gangege.com/post/183/feed 0 网页自动跳转代码收集 http://gangege.com/post/177 http://gangege.com/post/177#comments Fri, 16 Jun 2006 16:52:46 +0000 gangege http://gangege.com/archives/177 两个域名同一个空间自动跳转的ASP代码

ASP/Visual Basic代码
  1. <%if Request.ServerVariables("SERVER_NAME")="gangege.com" then   
  2. response.redirect "default.asp"  
  3. else%>   
  4. <%end if%>   
  5. <%if Request.ServerVariables("SERVER_NAME")=www.gangege.com then   
  6. response.redirect "default.asp"  
  7. else%>   
  8. <%end if%>   
  9. <%if Request.ServerVariables("SERVER_NAME")="im027.com" then   
  10. response.redirect "cdhome/default.asp"  
  11. else%>   
  12. <%end if%>   
  13. <%if Request.ServerVariables("SERVER_NAME")=www.im027.com then   
  14. response.redirect "cdhome/default.asp"  
  15. else%>   
  16. <%end if%>   
  17. <%if Request.ServerVariables("SERVER_NAME")="blog.im027.com" then   
  18. response.redirect "blog/"  
  19. else%>   
  20.   

 

html中跳转最全代码

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <meta name="GENERATOR" content="Microsoft FrontPage 5.0">  
  4. <meta name="ProgId" content="FrontPage.Editor.Document">  
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  6. <title>正在进入</title>  
  7. </head>  
  8. <body>  
  9. <form name=loading>    
  10. 　<p align=center> <font color="#0066ff" size="2">正在进入，请稍等</font><font color="#0066ff" size="2" face="Arial">…</font>  
  11. 　　<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">    
  12. 　　   
  13. 　　<input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">    
  14. 　　<script>　    
  15. var bar=0　    
  16. var line="||"　    
  17. var amount="||"　    
  18. count()　    
  19. function count(){　    
  20. barbar=bar+2　    
  21. amountamount =amount + line　    
  22. document.loading.chart.value=amount　    
  23. document.loading.percent.value=bar+"%"　    
  24. if (bar<99)　    
  25. {setTimeout("count()",100);}　    
  26. else　    
  27. {window.location = "http://www.gangege.com";}　    
  28. }</script>    
  29. 　</p>    
  30. </form>    
  31. <p align="center"> 如果您的浏览器不支持跳转,<a style="text-decoration: none" href="http://gangege.com"><font color="#FF0000">请点这里</font></a>.</p>  
  32. </body>  
  33. </html>  
  34.   

 

html的meta方式
这种方法的好处是可以控制重定向的时间

XML/HTML代码
  1. <meta http-equiv=‘Refresh’ content=‘0;URL=index.html’>  

 

在 <body> 里添加代码

XML/HTML代码
  1. <body onload="location.href=’www.gangege.com’">  
标签：, , , , ,
]]> http://gangege.com/post/177/feed 2 测试当前浏览器尺寸的代码 http://gangege.com/post/181 http://gangege.com/post/181#comments Sun, 19 Mar 2006 17:01:26 +0000 gangege http://gangege.com/archives/181
XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>测试当前浏览器尺寸</title>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  5. <style type="text/css">  
  6. </style>  
  7. </head>  
  8. <body>  
  9. <SCRIPT LANGUAGE="JavaScript">  
  10. var  s = "";   
  11. s += "\r\n网页可见区域宽："+ document.body.clientWidth;   
  12. s += "\r\n网页可见区域高："+ document.body.clientHeight;   
  13. s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";   
  14. s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";   
  15. s += "\r\n网页正文全文宽："+ document.body.scrollWidth;   
  16. s += "\r\n网页正文全文高："+ document.body.scrollHeight;   
  17. s += "\r\n网页被卷去的高："+ document.body.scrollTop;   
  18. s += "\r\n网页被卷去的左："+ document.body.scrollLeft;   
  19. s += "\r\n网页正文部分上："+ window.screenTop;   
  20. s += "\r\n网页正文部分左："+ window.screenLeft;   
  21. s += "\r\n屏幕分辨率的高："+ window.screen.height;   
  22. s += "\r\n屏幕分辨率的宽："+ window.screen.width;   
  23. s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;   
  24. s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;   
  25. alert(s);   
  26. </SCRIPT>  
  27. </body>  
  28. </html>  
标签：, ,
]]> http://gangege.com/post/181/feed 0 跟随鼠标的十字线代码 http://gangege.com/post/180 http://gangege.com/post/180#comments Sun, 19 Mar 2006 16:59:34 +0000 gangege http://gangege.com/archives/180 个人觉得这段代码如果配合现在比较流行的“百万格子”代码一起使用肯定很方便！

XML/HTML代码
  1. <html>  
  2. <title>跟随鼠标的十字线</title>  
  3. <head>  
  4. <meta name="keywords" content="51windows.Net">  
  5. <meta http-equiv=Content-Type content="text/html; charset=gb2312">  
  6. </head>  
  7. <body>  
  8. <script language="JavaScript">  
  9. <!–   
  10. var jsstr = ""  
  11. + "<img src=\"about:blank\" id=\"leftright\" style=\"width:e­xpression(document.body.clientWidth);height:1px;position:absolute;left:0;top:0;background-color:#6699cc;z-index:100;\" \/>\n"   
  12. + "<img src=\"about:blank\" id=\"topdown\" style=\"height:e­xpression(document.body.clientHeight);width:1px;position:absolute;left:0;top:0;background-color:#6699cc;z-index:100;\" \/>\n"   
  13. document.writeln(jsstr);   
  14.   
  15. function followmouse(){   
  16.     leftright.style.top = window.event.y-2   
  17.     topdown.style.left = window.event.x-2   
  18. }   
  19. document.onmousemove=followmouse  
  20. //–>  
  21. </script>  
  22. </body>  
  23. </html>  
标签：,
]]> http://gangege.com/post/180/feed 0 2005年岁末，各种主流CMS系统的比较和汇总 http://gangege.com/post/154 http://gangege.com/post/154#comments Thu, 02 Feb 2006 16:21:57 +0000 gangege http://gangege.com/archives/154 CMS(Content Management System),中文叫作整站系统、文章系统,大概2004以前，如果想进行网站内容管理,基本上都是靠手工维护,但千变万化的信息流，但没有好的程序支持，还继续靠手工完成是不可能的事，如果有一个好的系统来支撑你的网站，那将节省大量的人力物力，开发者就可能给客户一个软件包，可以用它定期人工修改网站。只要你配置安装好，你的编辑，在线记者，更新员只要定期更新数据，剩下的事就交给CMS去处理。

Asp
动易CMS管理系统，官方网站：http://www.asp163.net/
这套是国产AspCMS中非常强大的系统，从3.0的简单的一个文章系统到现在的2005的版本，一路走来，动易不断完善，而且也不断加强功能，包括个人版，学校版，政府版，企业版，后台包括的功能，信息发布，类别管理，权限控制，信息采集，而且跟第三方的程序，比如论坛，商城（2005的已经自带了）， blog可以完美结合，基本上可以满足一个中大型网站的要求，但Asp和Access的的局限性，还有本身功能Dll的限制，使得免费版差不多成鸡肋，

风讯 官方网站：http://www.foosun.cn/
风讯的系统功能强大，自由度高，是现在人气比较高的系统之一，可以根据自己的想法做出一个网页从而建立一个有自我风格的网站，更新速度快，一直有新的版本出现，现在又开放采集、下载、投稿、图片整站管理系统，第三方整合等功能，开源是它最大特点，希望保持。然后缺点就是后台人性化差了一点，上手有点难度，而且连一套默认的模板都没有，因为自由度太高了，让一些新手更难上手，还有就是免费版的生成静态发布的效率不高。3.1已经出来一段时间了，愿各方面都更上一层楼。

新云网站管理系统 官方:http://www.newasp.cn/
一款Asp的CMS后起之秀，发现有不少的网站都在使用。由文章、下载、商城、留言、用户管理五大功能模块和广告、公告、连接、统计、采集、模板管理、数据库管理等多个通用模块组成，而且功能确实有一些值得称道的地方，不过又是DLL的，免费版有不少的限制，但对一个简单基本的网站来说，功能够用了。

乔客(asp) 官方网站：http://www.joekoe.com/
这个系统已经很久了，但好像一直存活在动易和风讯两者之间，现在3.0的Joekoe CMS出来了，但另我比较失望，相比免费版的1.2，功能是增强了，但也Dll，这个可能也是国产程序的一个特色罢了。它本身已经是一个融合度非常高的系统，有商城，新闻，下载，论坛，留言，影视，博客圈等，感觉有那么点WEB2.0 的味道,，不想怎么修改的朋友直接拿去就可以用了。

NB文章系统(asp) 官方：http://forum.nbarticle.com/default.asp
现在最新的是v2.1 RC1 ，上手挺容易，后台很简洁，安全性能不错，发布效率比较高，当然想到同类型的，RSS不错，它也是将模板写入数据库，但修改还是蛮方便。不过这样相对来说功能是少了一些，而且官方就一个论坛技术支持，论坛的人气差了一点。

渐飞新闻出版系统(asp) 官方网站： http://www.xunt.net/
这个系统也有一段时日了，不过到现在还是1.1的版本，以前名头特别响，
不过主要针对的是商业客户，看客户演示，个个都像门户，但因为没免费版的支撑，市场也一直没做大。

大世纪(Asp) 官方网站：http://www.bigcn.net/
很老的系统，差不多就算是个文章，新闻系统，
现在连官方都打不开了，这样的估计也没多少前景。

tsys信息发布系统 官方：http://www.tsyschina.com
非常遗憾 2.0刚刚出测试版，作者就好像人间蒸发一样消失了！不过对于一个免费开源，没有版权的CMS来说我们也没有什么可要求的！抛开强大，但可能不成熟（我没用过）的2.0不谈！单说1.1版！从 1.1就可以说他是ASP CMS中的老大了！在TSYS的各个版本中均没有出现过重大的安全漏洞而且对于目前1.1来说已经是很完善成熟的了！tsys和一般的Asp 的CMS不一样！他的功能并非由本身而定！而是根据使用者的能力而定！使用者越厉害 TSYS本身也可以变的更厉害！因为TSYS可以说是一个核心！而其他的东西和功能均需要使用者自己搞定！从这点来说！TSYS的功能可以说是无限的！但这也决定了TSYS不会流行起来！说白了只有高手使用TSYS才能把TSYS的优点发挥的淋漓尽致！可惜啊….

说完了Asp的，去倒杯水，继续….

说到php的CMS，也跟Asp差不多，可以算是百花齐放。

PhpArtile 官方：http://www.21ds.net/
这个算是国内phpCms的祖宗了，PA由 PHP 语言开发, 使用 MySQL 数据库保存数据 ,
为中小型网站发表文章, 存放资料, 新闻发布提供一个完美的解决方案。
做了好几年了，3.0迟迟还在开发中，今年出了2.1火了一阵，又熄灭了，以前用的人挺多的，
现在基本上没落了

phpcms 官方：http://www.phpcms.cn/
好像以前是9466Article的官方，本来9466做得挺好的，不知为什么突然zend加密了，
继承了9466的优点，上手，结构，提供插件接口，可自主开发插件，自主制作语言包，
自主设计模板风格，免费版可永久使用，功能还可以。

OKphp http://cn.okphp.com
同样加密的，免费版也不见怎么有人用，系统倒是开发了好久了，整合了论坛，blog，新闻，
分有企业版，门户版，还有免费的，看起来像老外的Nuke，个人感觉没多少特别之处。

美丽心雨 官方：http://www.xydw.com/
美丽心雨CMS是心雨动网独立开发制作的网站管理系统，基本上网站管理的功能有了，
从1.01到现在的1.4，官方的开发人员也一直在努力中。

DedeCMS 官方：http://dedecms.com/
这是一套令人爱憎分明的系统，首先它是国内一款开源的系统，2.x的时候功能都已经另它的fans为之疯狂，
非常灵活的定制，强大的功能，简洁的操作，但2.x的瓶颈问题：大数据处理，到3.0的时候可能会解决，
但3.0的一直跳票，迟迟不见发布，另很多人都非常失望，希望能在3.0的时候看到一个全新的Dedecms，
当然也支持开源产品。

Ss-cms 官方：http://www.ss-cms.com/
作者我见过，一个非常有活力的家伙，程序跟他一样，国产的开源系统，
生成静态，信息采集，文章和下载集成，
但作者都是出于兴趣爱好开发，1.0出来后就不见踪影了，好像现在在搞书库

随意Cmsez CMS 官方：http://www.cmsez.com/
程序的作者和Ss-cms的作者是好朋友，他也是出于个人爱好做这个，而且主要面向企业用户，
Cmsez集成了丰富的功能模块，http://www.colorbird.com/（七色鸮..??型客户，
看七色鸟，你或许可以知道他的作品如何了。

CMSware 官方：http://www.cmsware.com/
一个非常不错的CMS系统，比较看好的他的后台操作简介，一些新技术，比如Ajax的应用，Wap的功能，
还有它的PSN的发布，节点和模块的定制，，自定义模型，数据库字段，
率先引进的工作流的概念，更多的发布自由度，非常强大的模板体系，
确实处处体现了自由的思想，让您体验自由管理的非凡感受.

Ecms 帝国网站管理系统 官方：http://www.phome.net/
可以说这个是最让我值得写的东西，作者wm_chief是个超人，偶像啊
官方的title里面是 在这里只有原创，那家伙也是疯子，
比如数据库管理，论坛，新闻，下载，flash，域名交易系统等，
还包括JSP的版本，都是自己一个人写，还有一个人搞定后期服务，客户支持，产品宣传。
还要每天抽时间灌水AD，ECMS的功能非常多，包括下载，flash，商城，图片，新闻，友情链接，广告管理等，
比如一些远程发布，刷新效率，类别管理，权限细分，万能的论坛接口，信息采集，附件管理等这些都是Ecms特别的亮点，
而且免费版也不错，作者WC也非常虚心接受客户的建议，
基本上任何一个小的功能，都力求做到最好，
他明白用户的需求，一切能从用户本身出发的系统才是好的系统，
3.6已经出来了，而且下一个版本可能会结合EXE软件发布，刷新的功能，让我们拭目以待。
ecms的典型客户 www.chinahtml.com

.Net
动网新闻(asp.net)
最新的4.X也出来了，也是DLL的，不过系统是.NET的，不过我个人不趋向使用DLL的系统，
运行速度快，效率高，安全做足。
不过以前3.X的没有Dll，感觉也蛮好的，
缺点就是风格改起来不容易。
现在加密了，反而能更快上手，不过这样可以定制的地方就少了。

还有一个倒奶CMS，也是.net的，不见什么特别之处，一笔带过

JSP
大概有这些：
Netark CMS
方正翔宇CMS
开源的Magnolia
Magnolia CMS
不过JSP的应用门槛对我们个人用户来说，有点高，也不想多提

当然还有一些系统比如说，Asp的国产FeitecCMS ，WpsCms等，国外的FullXML，php的国产有MePhp，天下站长php等，
都没见多少特色，不用也罢。
TurboCMS 这样只面向企业用户，几十万的系统，我们也不用考虑。
Struts中文版，Spring 开源系统，Gpower CMS，还有Java的 Ion，opencms，Jboss Nuke等老外做的，
国外的php的比如phpnuke，phppost，还有非常昂贵的phpcow，Bitrix Site Manager-CMS($1699)，
比较廉价的Subdreamer，koobi CMS，ActiveKB团队的ArticleLive NX，newsphp
还有免费的Xoops，功能繁多的玩意，Mambo这样的开源系统，还有Mambo的变种LimboCMS，Mamhoo 。
不符合国情的，在国内也没见流行
还有国外CMS的大全：http://bbs.chinahtml.com/t602.html 自己有空去翻翻
如果要比较老外CMS的也可以进去看看：http://bbs.chinahtml.com/t5429.html 直接选择2-10项,,有详细的列表说。

Drupal: 这么好的CMS应该要列进去的吧。http://drupal.org/

现在每个CMS功能介绍上都会说自己的产品如何强大，比如说什么模板体系如何好，
缓存技术如何高明，刷新效率，负载容量如何强，操作如何如何简单，容易上手，跟第三方无缝结合，还有功能模块的如何丰富，生成静态发布，信息采集……
吹牛谁都会，大家都会写，关键是客户如何认为，反正一句话，适合自己的就是最好的

标签：, , ,
]]> http://gangege.com/post/154/feed 0 2005岁末 BLOG 系统大评点 http://gangege.com/post/153 http://gangege.com/post/153#comments Thu, 02 Feb 2006 16:19:08 +0000 gangege http://gangege.com/archives/153 CODE:ASP

L-Blog: http://www.loveyuki.com

由Loveyuki自主开发的基于 ASP+Access 的小型单用户BLOG，目前似乎已经停止更新了，但是用户群相当大，而且是国内相当多的BLOG系统的鼻祖。

oblog: http://www.oioj.net

多用户Blog,目前占据ASP多用户BLOG的大部分市场，2.X商业版已经实行免费，很值得继续关注与期待的国内作品。

SLblog：http://SLblog.com

多用户Blog，刚发展起来的，更新很快，感觉像是oblog和missblog的结合体，同时首创了Blog系统无限级分类和用户栏目的无限级分类，多功能在现编辑器。但界面不是很美观，好在模板和程序分离，方便修改。

Misslog: http://www.misslog.com/blog

多用户blog,每个blog可以有多个用户参与创作与维护，团队功能很强大！

LBS: http://www.voidland.com/blog

LBS早期基于L-Blog架构，自从LBS2推出以后，大部分属于自己的创作，模板很多，用户群也逐渐庞大。

Z-Blog: http://www.rainbowsoft.org/zblog/

今年发展相当快的Blog系统，官方提供了想当丰富的支持，也创造了比较好的交流环境，这是他的一大亮点。

PJBlog: http://www.pjhome.net/

基于ASP的单用户BLOG系统，由于其插件异常丰富，可扩展的功能很多，比较适合喜欢功能饱满的朋友。

Alpar’s Blog: http://blog.fz0132.com

基于L-Blog架构，但是作了相当大程度的修改，全面兼容LBS^2 的Style，目前版本模板采用DIV+CSS，很值得期待后续发展。

nblog: http://blog.nowans.com/

一个基于Access的个人Blog程序，全生成静态页面，刚开始起步。

d2kblog: http://www.d2ksoft.com/

基于L-BLOG修改，90％的代码作者声明都重新写过了，支持多国语言页面内容和页面样式分离。

KeeBlogSystem: http://keesky.com/blog/

XUL后台管理，很有特点的一个BLOG系统。

CODE:ASP.NET

.Text: http://scottwater.com/Dottext/default.aspx

很有名的ASP的blog系统，官方暂无静态化（对每页生成静态的html页面）版本，国内donews使用该软件。

BlogX: http://www.simplegeek.com/CategoryView.aspx/BlogX

程序是英国人编写的,国内 BLANKSOFT.COM 进行了汉化和修改。

dasBlog: http://www.dasblog.net

功能比较齐全，对FireFox的支持不怎么好。

CODEHP

Okphp BLOG: http://cn.okphp.com/

基于PHP+MYSQL开发的多用户BLOG系统，部分代码ZEND，主要特点能够很好地和许多论坛程序无缝兼容。

BlogHoster: http://www.webligo.com

国外的一个多用户商业BLOG系统，基于PHP+MYSQL，简洁明快的风格。

exBlog: http://www.exblog.net/

基于PHP/MySQL平台开发，注重稳定效率和兼容性，使用了 PHPLIB 的模板系统，提供WAP接口。

Pixelpost PhotoBlog: http://www.pixelpost.org/

国外的由图片系统和博客系统融合来的新型博客，已经由落伍的 星 完成汉化。

bMachine： http://boastology.com

国外老牌BLOG系统，同时支持文本数据库和MySQL数据库，支持中文搜索。

7log: http://www.7log.com

比较早的能够生成静态页面的BLOG系统，目前开发进度停滞。

O-blog: http://www.phpblog.cn/

需在PHP+MYSQL环境下运行，主要特色对静态生成有很大的灵活度，作者风色默默无闻地开发也让人钦佩。

pigface blog: http://www.flashforweb.com/

一个简单的BLOG,具备所有BLOG必须的功能，基于PHP＋MYSQL。

bo-blog: http://www.bo-blog.com/
文本数据库，现在发展似乎遇到了瓶颈，发展不如年初那么火热，但是一样有很多追随者。

C-Blog: http://www.saysay.cn

由 Coolsky 自主开发的基于 PHP+Smarty模版引擎+ADODB组件 的小型单用户BLOG，目前提供2个版本:php+mysql版本 和php+access版本，能够生成静态页面。

SaBlog: http://www.4ngel.net/blog/angel/

安全天使小组开发的一套BLOG系统，功能不断在完善，优点在于安全性很高。

Simple PHP Blog: http://www.simplephpblog.com/

国外一个轻便的blog系统，包含中文语言文件。

yo2blog: http://www.oneoo.com/

一个简单小巧快捷的 blog 程序，使用假性目录结构生成类静态 HTML 页面链接。

sBLOG: http://www.sblog.cn/

国外一款基于PHP+MySQL的BLOG系统，模板遵循W3C规范，并提供mod_rewrite功能支持。

b2： http://www.cafelog.com php

blog的老祖宗，操作简单，容易上手，现在好像停止了开发。

b2evolution: http://www.b2evolution.net

B2多用户版，有很多风格和插件。

wordpress： http://www.wordpress.org

架站比MT简单一点，功能也很全面，应该是支持blog的首选。它有最强的模版功能，已经开始有限范围内测试多用户的新版。

pivot： http://www.pivotlog.net

PHP+XML，没有使用数据库，有中文语言包，

nucleus： http://www.nucleuscms.org

这个也是比较老牌的程序了，有中文语言包！

M-logger： http://miracle.shakeme.net

文本储存数据。

drupal： http://www.drupal.org

功能强大，在多用户支持上尤为突出。它看起来更像一个内容发布系统（CMS）而不是一个纯blog软件，所以仅仅只想使用blog功能的朋友就用不着扛着这门炮了。

Pmschine： http://www.pmachine.com

这个估计是blog的元老了，不过现在已经商业化了，新版本名叫Expression Engine，在国内可以免费下载！

bBlog： http://dev.bblog.com/

一个非常简洁好用的blog，汉化版： http://www.xptop.com/lei/

serendipity： http://www.s9y.org

功能很多，每个功能以模块方式安装，界面也很容易修改。

Plog http://www.plogworld.net

blog里的最好作品了，真正的多用户。

Plainslash： http://www.51zhao.com/plainslash/

文本blog程序，作者很久没更新了，但现在blog的基本功能都有了。

CODE:CGI

movable Type： http://www.movabletype.org

一个cgi程序的blog软件，应用最为广泛，大陆不算十分多，香港台湾的80%以上的独立blog站点都是通过它架设的。插件众多，基本需要的功能都能实现，它支持多用户blog。

Greymatter： http://www.noahgrey.com/greysoft/

是一个类似 Movable Type 的Blog程序非常简单，也是生成静态文件。

HUS Reviv： http://supermanc.51.net/norman/blog.cgi

国人开发的，功能很强大，但由于cgi语言的问题，安装调试比较复杂，而且很占资源。

Blosxom： http://www.blosxom.com

很老的一个程序了，也可能是世界上最小的blog系统了，只有一个文件却实现了blog的大部分功能！

CODE:JSP

Roller：http://www.rollerweblogger.org/page/project

国外运用想当广泛的一套BLOG系统。

DLOG4J： http://dlog4j.sourceforge.net/

国人开发的，已经申报SourceForge项目 中文官方站： http://www.javayou.com

TM： http://www.terac.com

一个功能强大的blog，支持文件上传、RSS、评论、WYSIWYG 编辑器等功能，多种语言（含简体中文）

标签：, , ,
]]> http://gangege.com/post/153/feed 0