<![CDATA[friend365 - CSS+DIV]]> http://www.friend365.cn/ zh-cn friend365.cn friend365 http://www.friend365.cn/images/logomy.gif http://www.friend365.cn/ friend365 http://www.friend365.cn/default.asp?id=1100 <![CDATA[Div+CSS网站设计的优点]]> friend365@163.com(51itcn) Thu,26 Mar 2009 15:28:39 +0800 http://www.friend365.cn/default.asp?id=1100
     Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。

     <DIV>Powered by www.friend365.cn</DIV>

     如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用 <P></P> 是一样的。

     DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码

     CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

    Div+CSS标准的优点:

    1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

    2.结构清晰，容易被搜索引擎搜索到，天生优化了seo

    3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

    4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

    5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

    6.提高易用性。使用CSS可以结构化HTML，例如：<p>标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

    7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

    8.更好的控制页面布局。不用多说。

    9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

    10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

    11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。

    12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

    13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。

    14.在几乎所有的浏览器上都可以使用。

    15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

    16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

    17.你可以轻松地控制页面的布局 。

    18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

看了这么多优点您是否对这种设计风格感兴趣呢？ 体验效果请参考: IT无忧 http://www.51itcn.com]]> http://www.friend365.cn/default.asp?id=984 <![CDATA[日志首先自动缩进两个空格]]> friend365@163.com(51itcn) Tue,19 Aug 2008 14:48:17 +0800 http://www.friend365.cn/default.asp?id=984 只要在你控制日志的CSS中加入下的代码就行了：
text-indent:2em;
对于应用标准的zblog来说，这样修改：
1。打开themes/主题名/style/主题样式.css
2。找到如下代码：
div.post div.post-body{
    width:630px;
    margin:0;
    padding:0 0 0 5px;
    font-size:13px;
    word-break:break-all;
    text-align:left;
    line-height:120%;
}
注：可能的所不同，但标准的zblog主题样式一定是div.post div.post-body。
在其中加入text-indent:2em;
结果如下：
div.post div.post-body{
    width:630px;
    margin:0;
    padding:0 0 0 5px;
    font-size:13px;
    word-break:break-all;
    text-align:left;
    line-height:120%;
    text-indent:2em;
}


]]> http://www.friend365.cn/default.asp?id=943 <![CDATA[简化CSS代码提高代码的质量及文件压缩到最小]]> friend365@163.com(51itcn) Fri,20 Jun 2008 11:52:12 +0800 http://www.friend365.cn/default.asp?id=943 下面用一些比较常用的属性来做示例：
程序代码 程序代码

margin
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
代码简化为：margin:1px
margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
代码简化为：margin:1px 2px
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
代码简化为：margin:1px 2px 3px
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
代码简化为：margin:1px 2px 3px 4px
当属性值是0的时候单位可以不写如：0px 直接就写成0
padding
padding的书写方法和margin一样，在此就不多叙述
border
border-width:1px;
border-style:solid;
border-color:#000000;
代码简化为：border:1px solid #000
background
background-color:#CCFFFF;
background-image:url(图片路径);
background-repeat:repeat-x;
background-position:5px 4px;
代码简化为：background:#CFF url(图片路径)  repeat-x 5px 4px
font
font-size:26px;
font-weight:bold;
font-family: “宋体”;
代码简化为：font:26px bold “宋体”
color属性值
color:#000000;
color:#ff0000;
代码简化为：color:#000, color:#f00
]]> http://www.friend365.cn/default.asp?id=938 <![CDATA[二十个CSS经典技巧]]> friend365@163.com(51itcn) Fri,20 Jun 2008 11:21:09 +0800 http://www.friend365.cn/default.asp?id=938 一般用CSS设定字体属性是这样做的：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

<p class="text side">...</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />

<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

<h1>Buy widgets</h1>

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

这样调用它：

<div id="box">...</div>

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

这样调用：

<div id="box"><div>...</div></div>

这样，不管什么浏览器，宽度都是150点了。
块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。
用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

<div id="container"><div id="navigation">...</div></div>

如果想定位到距左30点，距上5点，可以这样：

#navigation
{
position: absolute;
left: 30px;
top: 5px
}

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation
{
background: blue;
width: 150px
}

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
再来10个你可能不知道的CSS技巧
Block和inline元素对比
所有的HTML元素都属于block和inline之一。block元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；

让块元素和其他元素保持在一行上；

控制inline元素的宽度（对导航条特别有用）；

控制inline元素的高度；

无须设定宽度即可为一个块元素设定与文字同宽的背景色。
再来一个box黑客方法
之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。
页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

<body>
<div class="container“>

然后CSS这样设计：

#container
{
min-width: 600px;
width:e­xpression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度：

#container
{
min-width: 600px;
max-width: 1200px;
width:e­xpression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}
IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。
字体变形命令
text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。
IE中图片文字消失的问题
有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。
不可见文字
不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。
为手持设备设计专门的CSS
也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

也可以阅读专门的手持设备可用性。
3D效果的按钮
以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：

a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

至于效果，还可以自己调整了。
在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。

首先，在导航代码中使用CSS类：

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

然后分别为每一页的Body指定一个id，和上面类同名。如<body id="contact">。

然后设计CSS如下：

#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}

这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。
]]> http://www.friend365.cn/default.asp?id=885 <![CDATA[DIV+CSS仿网易的滑动门技术AJAX]]> friend365@163.com(51itcn) Tue,27 May 2008 15:43:24 +0800 http://www.friend365.cn/default.asp?id=885
程序代码 程序代码

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS仿网易的滑动门技术AJAX</title>
<style type="text/css">
<!--
#header {
background-color: #F8F4EF;
height: 200px;
width: 400px;
margin: 0px;
padding: 0px;
border: 1px solid #ECE1D5;
font-family: "宋体";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)

{

for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";

for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";

}
</script>
<div id="header">
  <ul id="menu">
    <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
    <li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
    <li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
    <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
  </ul>
  <!--内容显示区域-->
  <ul id="main">
    <li class="block">第一个内容</li>
    <li class="unblock">第二个内容</li>
    <li class="unblock">第三个内容</li>
    <li class="unblock">第四个内容</li>
  </ul>
  <!--内容显示区域-->
</div>
</body>
</html>
]]> http://www.friend365.cn/default.asp?id=879 <![CDATA[39健康网提出来的选项卡]]> friend365@163.com(51itcn) Tue,27 May 2008 14:50:45 +0800 http://www.friend365.cn/default.asp?id=879
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.friend365.cn/default.asp?id=878 <![CDATA[百度无图片圆角支持IE，Firefox]]> friend365@163.com(51itcn) Tue,27 May 2008 14:47:35 +0800 http://www.friend365.cn/default.asp?id=878 http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度无图片圆角</title>
<style type="text/css">
.box{margin-top:10px;}
.box_hd1{height:1px; overflow:hidden; margin:0 1px; background:#ACB1B5;}
.box_hd2{height:1px; overflow:hidden; border-left:2px solid #ACB1B5; border-right:2px solid #ACB1B5;}
.box_bd{border-left:1px solid #ACB1B5; border-right:1px solid #ACB1B5;}
</style>

</head>
<body>
<div class="box">
<div class="box_hd1"></div>
<div class="box_hd2"></div>
<div class="box_bd">
主题推广 将与主题最相关的百度竞价文字链投放到您的网站相应的页面。用户点击推广内容，网站主就可以从百度获得相应的佣金。 网站搜索 网站主把百度搜索框代码投放到任一网页，就可以向其用户提供网站搜索功能。免费拥有百度搜索服务，零成本的赚钱工具。 合作推广 合作推广产品代码投放在网站页面上，网站用户付费订购了产品或服务，网站即可获得百度带来的合作推广分成收入。 软件合作 只要您是软件作者，拥有一款自己的软件，通过与百度超级搜霸捆绑，用户在安装百度超级搜霸后，点击搜霸搜索产生的竞价推广内容，软件作者就获得百度公司的竞价收入分成。
</div>
<div class="box_hd2"></div>
<div class="box_hd1"></div>
</div>
</body>
</html>]]> http://www.friend365.cn/default.asp?id=861 <![CDATA[点滴感悟——关于网络消费欲望的心里暗示]]> friend365@163.com(51itcn) Tue,20 May 2008 18:03:59 +0800 http://www.friend365.cn/default.asp?id=861
回顾发展历史，从门户平台到商务平台、从博客到社区、从全息搜索到分类搜索、从单一的B2B或是C2C走向BC整合，电子商务的发展是在不断的沿着“创新——破坏——创新”轨迹前行；随着对网络虚拟经济规律的了解加深，人们更加清楚意识到网络经济成功的内在基本三大核心原理：“长尾原理”、“维基原理”和“六度分割原理”，当大家都已耳熟能详、游刃有余的应用这三大核心原理时，什么才是制胜之道呢？

对此，我以实践的体会感悟，也许未来的制胜之道是行动心里暗示，或是消费心里暗示等从行动中分析电脑后面的大活人消费欲望。

如何培养网络购物的欲望是每一个从事网络营销电子商务企业必须要考虑的高层次问题！购物流程设计无论如何便利，如果其间没有心里“购物纵容”的“暗示”那还是处于一种低层次的经营理念。当当曾是从事B2C电子商务最早的企业，遗憾的是，作为早期的探索者，由于没有对电子商务虚拟经济的发展规律作出一些预测或是战略调整，以至于发展缓；而同时期的阿里巴巴、以及后来的淘宝、红孩儿都发展的很好，势头大有超过之势，而易趣却成了失败的典型案例。宏观上讲，淘宝的免费战略同易趣的收费战略在用户的消费心理欲望满足上也就早早的决出胜负了；而现在的易趣要靠重复淘宝几年前的免费战略想重新夺回第一恐怕又是网站精英们的一厢情愿了。

具有讽刺意味的是，各类************的消费欲望心里暗示到是很成功，而我们的网络购物消费欲望心里暗示如果也能通过一些方法催生客户的消费行动产生，比如，很多网站的会员鼓励计划都仍然是一套长篇大论，需要客户阅读后了解，根本没有融入技术流程或是通过设计来完成消费欲望和心里暗示。

未来的竞争之道在逐步升级，当大家在技术上、商务模式上、企业文化上都已精通此道时，我看熟读虚拟社会消费心里之道也许就是企业未来领先之道！

欢迎探讨交流。 friend365.cn/" target="_blank">梦苑工作室 www.friend365.cn

]]> http://www.friend365.cn/default.asp?id=859 <![CDATA[DIV+CSS:如何编写代码才能更有效率]]> friend365@163.com(51itcn) Tue,20 May 2008 17:59:07 +0800 http://www.friend365.cn/default.asp?id=859
一、排版：

1、关键词和操作符之间加适当的空格。

2、相对独立的程序块与块之间加空行

3、较长的语句、表达式等要分成多行书写。

4、划分出的新行要进行适应的缩进，使排版整齐，语句可读。

5、长表达式要在低优先级操作符处划分新行，操作符放在新行之首。

6、循环、判断等语句中若有较长的表达式或语句，则要进行适应的划分。

7、若函数或过程中的参数较长，则要进行适当的划分。

8、不允许把多个短语句写在一行中，即一行只写一条语句。

9、函数或过程的开始、结构的定义及循环、判断等语句中的代码都要采用缩进风格。

10、C/C++语言是用大括号‘{’和‘}’界定一段程序块的，编写程序块时‘{’和‘}’应各独占一行并且位于同一列，同时与引用它们的语句左对齐。在函数体的开始、类的定义、结构的定义、枚举的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。

二、注释

1、注释要简单明了。

2、边写代码边注释，修改代码同时修改相应的注释，以保证注释与代码的一致性。

3、在必要的地方注释，注释量要适中。注释的内容要清楚、明了，含义准确，防止注释二义性。保持注释与其描述的代码相邻，即注释的就近原则。

4、对代码的注释应放在其上方相邻位置，不可放在下面。

5、对数据结构的注释应放在其上方相邻位置，不可放在下面;对结构中的每个域的注释应放在此域的右方;同一结构中不同域的注释要对齐。

6、变量、常量的注释应放在其上方相邻位置或右方。

7、全局变量要有较详细的注释，包括对其功能、取值范围、哪些函数或过程存取它以及存取时注意事项等的说明。

8、在每个源文件的头部要有必要的注释信息，包括：文件名;版本号;作者;生成日期;模块功能描述(如功能、主要算法、内部各部分之间的关系、该文件与其它文件关系等);主要函数或过程清单及本文件历史修改记录等。

9、在每个函数或过程的前面要有必要的注释信息，包括：函数或过程名称;功能描述;输入、输出及返回值说明;调用关系及被调用关系说明等。

三、命名

1、较短的单词可通过去掉“元音”形成缩写;

2、较长的单词可取单词的头几发符的优先级，并用括号明确表达式的操作顺序，避免使用默认优先级。

3、使用匈牙利表示法

四、可读性

1、避免使用不易理解的数字，用有意义的标识来替代。

2、不要使用难懂的技巧性很高的语句。

3、源程序中关系较为紧密的代码应尽可能相邻。

五、变量

1、去掉没必要的公共变量。

2、构造仅有一个模块或函数可以修改、创建，而其余有关模块或函数只访问的公共变量，防止多个不同模块或函数都可以修改、创建同一公共变量的现象。

3、仔细定义并明确公共变量的含义、作用、取值范围及公共变量间的关系。

4、明确公共变量与操作此公共变量的函数或过程的关系，如访问、修改及创建等。

5、当向公共变量传递数据时，要十分小心，防止赋与不合理的值或越界等现象发生。

6、防止局部变量与公共变量同名。

7、仔细设计结构中元素的布局与排列顺序，使结构容易理解、节省占用空间，并减少引起误用现象。

8、结构的设计要尽量考虑向前兼容和以后的版本升级，并为某些未来可能的应用保留余地(如预留一些空间等)。

9、留心具体语言及编译器处理不同数据类型的原则及有关细节。

10、严禁使用未经初始化的变量。声明变量的同时对变量进行初始化。

11、编程时，要注意数据类型的强制转换。

六、函数、过程

1、函数的规模尽量限制在200行以内。

2、一个函数最好仅完成一件功能。

3、为简单功能编写函数。

4、函数的功能应该是可以预测的，也就是只要输入数据相同就应产生同样的输出。

5、尽量不要编写依赖于其他函数内部实现的函数。

6、避免设计多参数函数，不使用的参数从接口中去掉。

7、用注释详细说明每个参数的作用、取值范围及参数间的关系。

8、检查函数所有参数输入的有效性。

9、检查函数所有非参数输入的有效性，如数据文件、公共变量等。

10、函数名应准确描述函数的功能。

11、避免使用无意义或含义不清的动词为函数命名

12、函数的返回值要清楚、明了，让使用者不容易忽视错误情况。

13、明确函数功能，精确(而不是近似)地实现函数设计。

14、减少函数本身或函数间的递归调用。

15、编写可重入函数时，若使用全局变量，则应通过关中断、信号量(即P、V操作)等手段对其加以保护。

七、可测性

1、在编写代码之前，应预先设计好程序调试与测试的方法和手段，并设计好各种调测开关及相应测试代码如打印函数等。

2、在进行集成测试/系统联调之前，要构造好测试环境、测试项目及测试用例，同时仔细分析并优化测试用例，以提高测试效率。

八、程序效率

1、编程时要经常注意代码的效率。

2、在保证软件系统的正确性、稳定性、可读性及可测性的前提下，提高代码效率。

3、不能一味地追求代码效率，而对软件的正确性、稳定性、可读性及可测性造成影响。

4、编程时，要随时留心代码效率;优化代码时，要考虑周全。

5、要仔细地构造或直接用汇编编写调用频繁或性能要求极高的函数。

6、通过对系统数据结构划分与组织的改进，以及对程序算法的优化来提高空间效率。

7、在多重循环中，应将最忙的循环放在最内层。

8、尽量减少循环嵌套层次。

9、避免循环体内含判断语句，应将循环语句置于判断语句的代码块之中。

10、尽量用乘法或其它方法代替除法，特别是浮点运算中的除法。

九、质量保证

1、在软件设计过程中构筑软件质量。代码质量保证优先原则

(1)正确性，指程序要实现设计要求的功能。

(2)稳定性、安全性，指程序稳定、可靠、安全。

(3)可测试性，指程序要具有良好的可测试性。

(4)规范/可读性，指程序书写风格、命名规则等要符合规范。

(5)全局效率，指软件系统的整体效率。

(6)局部效率，指某个模块/子模块/函数的本身效率。

(7)个人表达方式/个人方便性，指个人编程习惯。

2、只引用属于自己的存贮空间。

3、防止引用已经释放的内存空间。

4、过程/函数中分配的内存，在过程/函数退出之前要释放。

5、过程/函数中申请的(为打开文件而使用的)文件句柄，在过程/函数退出前要关闭。

6、防止内存操作越界。

7、时刻注意表达式是否会上溢、下溢。

8、认真处理程序所能遇到的各种出错情况。

9、系统运行之初，要初始化有关变量及运行环境，防止未经初始化的变量被引用。

10、系统运行之初，要对加载到系统中的数据进行一致性检查。

11、严禁随意更改其它模块或系统的有关设置和配置。

12、不能随意改变与其它模块的接口。

13、充分了解系统的接口之后，再使用系统提供的功能。

14、要时刻注意易混淆的操作符。当编完程序后，应从头至尾检查一遍这些操作符。

15、不使用与硬件或操作系统关系很大的语句，而使用建议的标准语句。

16、建议：使用第三方提供的软件开发工具包或控件时，要注意以下几点：

(1)充分了解应用接口、使用环境及使用时注意事项。

(2)不能过分相信其正确性。

(3)除非必要，不要使用不熟悉的第三方工具包与控件。

十、代码编译

1、编写代码时要注意随时保存，并定期备份，防止由于断电、硬盘损坏等原因造成代码丢失。

2、同一项目组内，最好使用相同的编辑器，并使用相同的设置选项。

3、合理地设计软件系统目录，方便开发人员使用。

4、打开编译器的所有告警开关对程序进行编译。

5、在同一项目组或产品组中，要统一编译开关选项。

6、使用工具软件(如Visual SourceSafe)对代码版本进行维护。

十一、代码测试、维护

1、单元测试要求至少达到语句覆盖。

2、单元测试开始要跟踪每一条语句，并观察数据流及变量的变化。

3、清理、整理或优化后的代码要经过审查及测试。

4、代码版本升级要经过严格测试。]]> http://www.friend365.cn/default.asp?id=858 <![CDATA[用 Dreamweaver 8 搞定web标准]]> friend365@163.com(51itcn) Tue,20 May 2008 17:56:24 +0800 http://www.friend365.cn/default.asp?id=858
如果您正在读这篇文章，您很可能是已经对 Web 标准有了一定的兴趣，并且对用 DW ( Dreamweaver 的简称)来构建的站点中标准的应用非常好奇。

或许您已经对 WS (Web Standards的简称)有了一定的了解，但是您并不知道如何用 DW 来编写可兼容的代码。或者您是一个 DW 用户，您很想遵从 WS ，更广泛的使用 CSS ，并且可以制作出更有亲和力的文档。无论您是哪一种类型，这篇文章都会给您想要的答案:告诉您如何用 DW 来搞定 WS。

Web 标准的定义

就我们在整篇文章所关心的 WS 来说，让我们首先花一点时间来明确一下我们究竟在谈论些什么:

WS 是一些指导 Web 开发语言的规范，是由 W3C 所制定的。这些规范包含了多种语言，例如，HTML、XHTML 和 CSS 还有一些其他的相关语言，例如 MathML，用来表示数学中的方程，当你有这种特殊的需要的时候，或许会用得上。W3C 也颁布了“Web 内容亲和力指南”(Web Content Accessibility Guidelines —— WCAG)——推广网页的可访问性(通过 WAI )

提示:直接获取这些规范

你可以在 W3C 的网站上阅读这些规范，尽管他们有时读起来还是有些困难的:

HTML 4.01

XHTML 1.0

CSS 1

CSS 2.1

WCAG 1.0

在本文中，我们将会用到 XHTML1.0、CSS1 和 2.1、WCAG 1.0 等规范和建议，但是你一定很高兴知道我们其实不必过多的阅读 W3C 文档。

谁需要 WS ?

您可能只有一个含糊的概念:WS 是个好东西，但是许多网站——包括许多知名的站点——并不遵从 WS ，并且他们看起来的确管理得很好。所以，为什么我们要尽力去遵从 WS 呢?这么做会有什么真正的收益吗?谁需要 WS ?谁需要去关注 W3C 的规范与建议?

Web 开发者与设计者

需要关注 WS 的首类人群就是我们:网站建设的开发者与设计者。花费时间去学习如何用 WS 开发对于我们来说值得吗?

整洁的标记使 BUG 的修复速度加快。

如果您通过 W3C 校验您的页面，至少您会了解到不规范的标记并不是引起您曾经遇到过的错误的原因。有时，校验一个页面和修复已发现错误的过程，可以清除显示中遇到一些问题，这些问题是由标记(element)没有结束或标签(tag)拼写错误引起的。

即使校验您的文档并没有修正这些问题，至少你会知道这些问题存在于规范的文档中。既然你已经知道这个问题不是一个错误，那么你可以开始关注其他的问题了，例如在不同的浏览器中 CSS 处理差异问题。

遵从可访问性的需求很容易

如果你编写一个规范的 XHTML 标记，那么你就可以保证文档在语义上是无误的，并且您可以把文档中的内容与表现相分离，您将可以把大量的工作放在许多 WCAG1.0 中所列的可访问性的问题上。认识到可访问性并不是仅仅为残疾人设计的这一点也很重要。一个亲和力好的站点是可以被许多不同的设备访问的，例如移动电话和 PDA ，他们是不具备强大的处理能力去对付那些散乱而非标准的标记的。
向前兼容

如果您仅仅考虑到自己新开发的页面在当前的几个浏览器中的表现，那么你怎么才能保证它在未来的新浏览器中的表现呢?新浏览器或许会把您的页面显示的很糟糕，此时你只能去费力的寻找和修正那些恼人的问题。

遵从 WS 并不会完全根除这个问题;然而，标准的兼容使你的设计失败的风险大大减少，同样，如今的浏览器软件公司也开始支持标准。他们也许会偶然的错误解释了某部分规范，他们不可能完全不支持它。如果最坏的事情发生了，并且一个新的浏览器在你的标准化网站上产生了奇怪的效果，那么修复它要比修复一个不兼容的站点容易的多。如果你遇到一个问题，它同样会影响其他的标准可兼容网站。Web 社区的群体智慧会指出这个问题，并会写文章来解决这个问题。所以，大家集体讨论，在可兼容的文档里修正这个 BUG 也比在不兼容的文档里修正更加的容易。

更方便的重构

你曾经不得不从一个站点中剥离文字而对他进行重构过吗?而且一切都得从头开始。你曾经见过那些被字体标签和微小的表格单元(它使我们只能从头开始)弄得混乱不堪的标签吗?我只知道我曾经看过，这是一个漫长的过程，大量的时间和金钱都被这个站点的重构烧掉了。

分离文档的内容与表现将会使你体会到标准化兼容带来美妙:这意味着下次某个人想重构这个站点的时候，他们不必把 Web 文档中的拷贝出去。所有站点中的文本都将会被具有语义的 (X)HTML 所标记，所有的表现信息——这部分才是站长想更改的——都将被储存在一个可轻易替换的 CSS 文件中。

一些客户在开始要求你做一些改变之前是不会等待它去重构的，他们只会等到游览完猛犸象化石坑，然后就要求你说“把左边栏挪到右边就可以了。”对于一个标准化可兼容站点来说，全部页面都是由 CSS 控制的，你可以很方便移动页面中的标记，而不用在许多以复杂表格为结构的页面中想歪招了。这使得改变页面布局更加简单。

结构从表现中分离同样可以使增加新的元素变得更加容易，就像一个高对比度、小图片版本的站点或许对于某些浏览者更有吸引力。当您可以轻松的更换样式表时，为什么建立单独的纯文本版的页面呢?

浏览器软件公司

浏览器的软件公司开始对 WS 关注了。过去，浏览器软件公司添加他们私有的专属标签和属性到基本的语言中。但是现在，前所未有的，他们都开始遵从标准了，并且一些最新的浏览器已经可以确定，正在努力按照规范中所定义的(X)HTML 和 CSS 来显示它们。

在可遇见的未来中，浏览器都将能够显示大多数的不规范标记、代码，因为如果它们不这么做，成千上万的不规范站点都将无法正常显示——那么大众就很可能开始责备浏览器了，而不是责备 Web 设计者。然而，其他的设备(那些没有台式机强大处理功能的设备)将会更加依赖那些他们所遇到代码的标准化兼容性了。

创作工具软件厂商

创作工具软件厂商——例如 Macromedia , 它制作了 Dreamweaver ——也像Web设计者一样，开始遵从 WS 了，比如，它们越来越多的客户要求这些创作工具可以输出规范的标记。原本这些可视化的开发环境都没有太好的口碑，因为它们会生成混乱、不规范的标记;然而，最新的主要可视化开发环境都援引了标准化的兼容性和可访问性的元素，这也成为了主要的卖点。软件厂商一定要聆听，并回应市场的需求。

Web 用户

我们设计的网站的用户也从我们采用 WS 中获益，即使他们并没有认识到这一点!或许他们正无意识的使用那些专门针对当今流行浏览器而开发的站点。如果这些用户转用其他的浏览器，他们或许就会发现这个在线的体验就不再令人享受了，因为那些专属的标记是不会被新浏览器所接受的。一个标准化可兼容的站点在不同的浏览器中都有很好的表现，不论是在现有的，还是在未来的浏览器中都同样优秀。

此外，一个遵照可访问性建议的网站对那些发现浏览网页不如意的用户也是很有亲和力的。Web 应该给那些视觉有缺陷或其他的残疾人提供更方便的购物、阅读、搜索的条件。不应该因为用专属标记或者其他排它(指浏览器)技术的站点，使他们无法浏览。 ]]>