IT博客-TimeLord-文章分类-网页设计http://www.cnitblog.com/libocumt/category/6244.html有志者，事竟成，卧薪尝胆，百二秦关终属楚； 苦心人，天不负，破斧沉舟， 三千越甲可吞吴！zh-cnSun, 02 Oct 2011 01:53:48 GMTSun, 02 Oct 2011 01:53:48 GMT60什么是WEB标准http://www.cnitblog.com/libocumt/articles/35119.htmlTimeLordTimeLordSat, 20 Oct 2007 13:28:00 GMThttp://www.cnitblog.com/libocumt/articles/35119.htmlWEB标准不是某一个标准，而是一系列标准的集合。

     网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：

1．结构标准语言
 （1）XML
   XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
  XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言 CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3.行为标准
（1）DOM
  DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
 (2) ECMAScript
  ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。

TimeLord 2007-10-20 21:28 发表评论
]]>Web开发工具(支持JavaScript CSS等开发）http://www.cnitblog.com/libocumt/articles/34880.htmlTimeLordTimeLordMon, 15 Oct 2007 07:05:00 GMThttp://www.cnitblog.com/libocumt/articles/34880.htmlhttp://www.aptana.org/

TimeLord 2007-10-15 15:05 发表评论
]]>一个CSS+List用发的网站http://www.cnitblog.com/libocumt/articles/34607.htmlTimeLordTimeLordTue, 09 Oct 2007 12:27:00 GMThttp://www.cnitblog.com/libocumt/articles/34607.htmlhttp://css.maxdesign.com.au

TimeLord 2007-10-09 20:27 发表评论
]]>引入样式表的5种方式http://www.cnitblog.com/libocumt/articles/34606.htmlTimeLordTimeLordTue, 09 Oct 2007 12:12:00 GMThttp://www.cnitblog.com/libocumt/articles/34606.html一、使用STYLE属性

将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。

二、使用STYLE标签

 将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
BODY {
　　color: BLUE;
　　background: #FFFFCC;
　　font-size: 9pt}
TD, P {
　　COLOR: GREEN;
　　font-size: 9pt}
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。

三、使用 LINK标签

 将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。


四、使用@import引入

 跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
　　@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
　　@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分号是绝对不可少的！

五、使用<span></span>标记引入样式

例如：<span style="font:12px/20px  宋体 #000000;">网页陶吧</span>



TimeLord 2007-10-09 20:12 发表评论
]]>纯CSS下拉菜单设计专家VIMhttp://www.cnitblog.com/libocumt/articles/34605.htmlTimeLordTimeLordTue, 09 Oct 2007 11:52:00 GMThttp://www.cnitblog.com/libocumt/articles/34605.htmlhttp://www.opencube.com/

TimeLord 2007-10-09 19:52 发表评论
]]>JS常用技巧http://www.cnitblog.com/libocumt/articles/34548.htmlTimeLordTimeLordMon, 08 Oct 2007 13:12:00 GMThttp://www.cnitblog.com/libocumt/articles/34548.html阅读全文

TimeLord 2007-10-08 21:12 发表评论
]]>弹出层效果（DIV，不可移动）http://www.cnitblog.com/libocumt/articles/34546.htmlTimeLordTimeLordMon, 08 Oct 2007 12:50:00 GMThttp://www.cnitblog.com/libocumt/articles/34546.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>丁学-博客园-http://www.cnblogs.com/dxef</title>
<script>
function getPosition() {
      var top    = document.documentElement.scrollTop;
      var left   = document.documentElement.scrollLeft;
      var height = document.documentElement.clientHeight;
      var width  = document.documentElement.clientWidth;
      return {top:top,left:left,height:height,width:width};
}

function showPop(){
    var width  = 300;  //弹出框的宽度
    var height = 160;  //弹出框的高度
    var obj    = document.getElementById("pop");
    
    obj.style.display  = "block";
    obj.style.position = "absolute";
    obj.style.zindex   = "999";
    obj.style.width    = width + "px";
    obj.style.height   = height + "px";
    
    var Position = getPosition();
    leftadd = (Position.width-width)/2;
    topadd  = (Position.height-height)/2;
    obj.style.top  = (Position.top  + topadd)  + "px";
    obj.style.left = (Position.left + leftadd) + "px";
    
    window.onscroll = function (){
        var Position   = getPosition();
        obj.style.top  = (Position.top  + topadd)  +"px";
        obj.style.left = (Position.left + leftadd) +"px";
    };
}

function hidePop(){
    document.getElementById("pop").style.display = "none";
}
</script>
</head>
<body>
<div id="pop" style="border:1px solid #CCC;display:none;">test<br /><a href="javascript:hidePop();">hide</a></div>
<hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/><hr/>
<a href="javascript:showPop()">show</a>
</body>
</html>
<html>
<body>
<div id="div_InputNum" style="position:absolute;display:none; border-style:solid;border-width:1px;left=100;top=50; background:#CCCCCC; ">
<input name="numInputNum1" type="text" style="border-style:solid;border-width:1px;" size="5">
<br>
<input type="text" name="numInputNum2" style="border-style:solid;border-width:1px;" size="5">
<input name="div1" type="hidden" /><input name="div2" type="hidden" />
<input type="button" name="btnChangeNum" value="确定"/ onclick="ChangeNum(div1.value,div2.value)">
</div>
<div id="div_num1">2</div>
<div id="div_num2">3</div>
<input type="button" name=btnChangeNum1 value="输入新值" onClick="DispDiv('div_num1','div_num2',this.offsetLeft,this.offsetTop)">

<div id="div_num3">4</div>
<div id="div_num4">5</div>
<input type="button" name=btnChangeNum2 value="输入新值" onClick="DispDiv('div_num3','div_num4',this.offsetLeft,this.offsetTop)">

<script language="javascript">
function ChangeNum(div1,div2){
document.getElementById("div_InputNum").style.display="none";

document.getElementById(div1).innerHTML=numInputNum1.value
document.getElementById(div2).innerHTML=numInputNum2.value
}
function DispDiv(div1,div2,PositionLeft,PositionTop){

document.getElementById("div_InputNum").style.display="block";
document.getElementById("div_InputNum").style.left=PositionLeft+80
document.getElementById("div_InputNum").style.top=PositionTop
numInputNum1.value=document.getElementById(div1).innerHTML
numInputNum2.value=document.getElementById(div2).innerHTML
document.getElementById("div1").value=div1
document.getElementById("div2").value=div2
}
</script>
</body>
<html> 


TimeLord 2007-10-08 20:50 发表评论
]]>弹出层的实现（Table)http://www.cnitblog.com/libocumt/articles/34545.htmlTimeLordTimeLordMon, 08 Oct 2007 12:36:00 GMThttp://www.cnitblog.com/libocumt/articles/34545.html 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>弹出特效</title> 
</head> 
<script> 
var falpha=0;
function fchange(){
if(falpha!=90){
    table1.style.filter="alpha(opacity="+falpha+")";
    falpha=falpha+10;
    setTimeout("fchange()",200)
}else{ 
    falpha=0;
  }
}
function sss(){
    table1.style.height=(window.document.body.clientHeight>window.document.body.scrollHeight)?window.document.body.clientHeight:window.document.body.scrollHeight;
    table1.style.width="100%";
    table1.style.display='block';
    table2.style.left=window.document.body.scrollWidth/2-100;
    table2.style.top=window.document.body.offsetHeight/2-100; 
    table2.style.display='block';
    fchange();
}

function freset(){
table1.style.display='none'
table2.style.display='none'
}

</script> 
<body topmargin=0 leftmargin=0 bgcolor=yellow style="display:block;"> 
<table id="table1" style="background:#FFFFFF;display:none;position:absolute;z-index:1;filter:alpha(opacity=90)" oncontextmenu="return false"> 
<tr width=100% height=100%> 
<td> 

</table> 

<table oncontextmenu="return false" id="table2" border="2" style="background:#E1E100;border-color:red;display:none;position:absolute;z-index:2;width:200;height:100;" cellspacing="0" cellpadding="0" bordercolor="#800000"> 
<tr width=150 height=20> 
<td align="right" borderColor="#E1E100"> 
<input type="button" onclick="freset()" value='确定'> 
</td><td borderColor="#E1E100"><input type="button" onclick="freset()" value='取消'></td> 
</tr> 
</table> 
<input type="button" onclick="sss()" value='申请提交'> 
</p> 

</body> 
</html> 

 



TimeLord 2007-10-08 20:36 发表评论
]]>如何在网页中运行代码（很简单）http://www.cnitblog.com/libocumt/articles/34542.htmlTimeLordTimeLordMon, 08 Oct 2007 11:13:00 GMThttp://www.cnitblog.com/libocumt/articles/34542.htmlfunction runCode()  //定义一个运行代码的函数，
{
    if(1 == arguments.length)
        try{event = arguments[0];}catch(e){}
  var code=(event.target || event.srcElement).parentNode.childNodes[0].value;//即要运行的代码。
  var newwin=window.open('','','');  //打开一个窗口并赋给变量newwin。
  newwin.opener = null // 防止代码对论谈页面修改
  newwin.document.write(code);  //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
  newwin.document.close();
}

TimeLord 2007-10-08 19:13 发表评论
]]>