<![CDATA[Awing's Blog - web标准]]> http://www.awing.org/ zh-cn PBlog2 v2.4 Awing's Blog http://www.awing.org/images/logos.gif http://www.awing.org/ Awing's Blog http://www.awing.org/default.asp?id=482 <![CDATA[中国式web2.0网站的无知！看我怎么拯救你们.]]> yingmu8302@163.com(awing) Wed,25 Jul 2007 13:16:49 +0800 http://www.awing.org/default.asp?id=482
　　我希望，我以这些年的心得，真实的写下网站创业及经营的看法，也希望，有人能在天涯说真话，不要象Donews.com里面，我现在都不知道那里那些是真那些是假的。

　　中国式web2.0网站为什么容易失败，因为是无知造成，试问有几个站长懂营销，而单纯的营销人士来做网站，有几个懂得中国的网络？

　　其实web2.0是有明确的定义，大家或许被当前的各种网站所表现的模式所蒙蔽了，web2.0的定义如下：1.互联网作为平台--本质2.利用集体智慧--用户参与3.数据是下一个IntelInside---拥有核心数据4.软件发布周期的终结--永远的测试版5.轻量型编程模型6.软件超越单一设备7.丰富的用户体验具体参见。

　　本来是web2.0网站在国外是一种很好的体验平台，但是，web2.0在中国，被很多人给歪曲了，衍变成急功近利的工具，你说web2.0网站能不失败吗？

　　让我们重新理解web2.0和1.0的区别：

　　让我们把无数花哨的概念的外壳和包装一层层剥去，说到底，互联网的最后其实就是两种东西，一个是内容浏览，一个是人的交往。内容和人，这才是区分的标准。以内容为主的，就是1.0，可以靠广告、或者内容收费赚钱；以人的交互为主的，就是2.0，可以靠游戏化增值服务、或者电子商务赚钱。

　　因此，web2.0的根本标准，应该是人的交往关系，现在被普遍称之为SNS，社会化关系网络。

　　在中国纯粹的2。0式网站，如果从商业角度来衡量是失败的，这么多人，这么学者天天在讨论网站的赢利模式，我看了就觉得好笑，我以所学的经济学知识和营销经验分析，网站要想赢利：无非就是这几种，1，媒体模式，（提供广告服务）2，电子商务，（产品销售，网络营销）3，服务，（提供某种服务，收取费用，如：b2b网站，sns网站，qq的会员费等）。

　　（当然，还有卖流量，如网址导航站模式，铃声下载分提成等，但，这些不是网站赢利的基本模式，一个真正成功的网站，只有满足上面3个标准的其中一个以上，才算成功，否则就是垃圾站）。

　　但，我们看到的是很多人在做无聊的模式探讨，可笑可悲，中国人，自己愚弄自己，还害别人。

　　那么，知道了网站的基本赢利状态后，无论你的网站是什么方向，只要的围绕我的上面的3种赢利标准，你就可以了。这也是你成功的基本和首要条件，但不是必要和充分条件。

　　在我的这3个赢利标准上，我们来分析，中国真正的web2.0网站为什么容易失败和无知，

　　根据，我的3个标准，网站，首先保证可读性内容，但是，我们看到2。0站提出的口号是网民创造内容，这是多么可笑的观点，错误的观点导致错误的操作。要想网民来你网站创造优质内容的时候，估计你的网站已经倒下了，所以，我们被忽悠、蒙蔽、误导。

　　第二，我们的网站，能收费的地方要坚决收费，现在很多web2.0的网站只是把用户当成用户，而不是玩家。所以，他们所犯的主要问题不在于不注重用户体验，而是他们将太多的体验都免费化了，白送给玩家，然后指望人气足了靠广告收费。这是根本的谬误，真正的web2.0一定不能指望靠广告盈利，那是新浪的生意，你们只能赚得一点从大门户网站手指缝里流出来的小钱。

　　为什么真正的web2.0网站不能靠广告赚大钱呢？道理很简单，只要分析用户的时间就明白了。用户的2.0人际交往所耗的时间是极大的，就象玩游戏极耗时间一样。一次2.0交际，相当于10次甚至上百次用户浏览资讯内容（1.0的标准行为）的时间。因此，后者可以产生极大的PV，并且已经习惯于看到广告。而web2.0不可能在人数和PV上与1.0竞争，主要的优势，是在时间和深度上。这样一来，用这个去按广告模式赚钱，价值等于是十分之一甚至是百分之一，十分可怜。

　　试想：威客行业老大：k68,如果是不收取20%的提成，光是靠广告收入，（其模式是我3个标准中提供服务标准）我想，早就死掉了。豆瓣提倡，页面简洁，不做广告，但是不和当当分提成，（其模式是我3个标准中的电子商务标准）估计啊北早就没有这个耐心来继续做网站了，嫁我网，如果不是靠提供高级真爱测试服务，能有风险投资吗？（其服务，是我3个标准中提供服务标准。。。

　　所以，web2.0网站的盈利，不是来自广告，而是来自最有可能通过网络世界提供的服务或产品，据我的观察，会是电子教育培训、专家服务、招聘、保险、优惠券/卡、金融产品、书籍、娱乐音像产品等，以后，随着无线互联网和销售终端的进入及一体化，才会到达更传统的物品。

　　既然是2。0网站，就要客观分析自己，套上我的3个赢利观点，你就能成功。可是，我们看到，有多少无知的所谓2.0网站在做可怜的挣扎，也没有人告诉他们真话，告诉他们如何前进。

　　只要你的网站，找到一个方向，然后根据我的3个标准来设计盈利模式，你就有起码成功的保证。

　　同时，在网站行业混，无论什么2。0，1。0，只要有好的方向，就做。

　　本文属原创,首发天涯,转载请注明:本人ID人民币1,和天涯社区. ]]> http://www.awing.org/default.asp?id=479 <![CDATA[marquee语法]]> yingmu8302@163.com(awing) Fri,20 Jul 2007 11:51:04 +0800 http://www.awing.org/default.asp?id=479 <marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等

<marquee hspace="25" vspace="10" width="333" height="70" scrolldelay="155" id="rico"
    onMouseOver="rico.stop()" onMouseOut="rico.start()"></marquee>

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移！</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>

循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee>

<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

外观(Layout)设置

对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>

面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>

空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>

鼠标事件
鼠标移到上面时停止移动，移开后继续移动。
onMouseOver="this.stop()" onMouseOut="this.start()"




以下是一个刚做的实例...
图片向上移动。。。
鼠标移过去，暂停，，鼠标移走。。继续滚动。。


HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.awing.org/default.asp?id=473 <![CDATA[三列高度自适应，js控制]]> yingmu8302@163.com(awing) Sat,14 Jul 2007 16:01:36 +0800 http://www.awing.org/default.asp?id=473

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0052)http://www.forest53.com/tutorials/test/3columns.html -->
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>脚本控制三行三列自适应高度DIV布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
/*
  ------------------------------------------------
  PVII Equal CSS Columns scripts
  Copyright (c) 2005 Project Seven Development
  www.projectseven.com
  Version: 1.5.0
  ------------------------------------------------
*/
function P7_colH(){ //v1.5 by PVII-www.projectseven.com
  var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;
  if(dA&&dA.length){
    for(i=0;i<dA.length;i++){
   dA[i].style.height='auto';
    }
for(i=0;i<dA.length;i++){
      oh=dA[i].offsetHeight;h=(oh>h)?oh:h;
}
for(i=0;i<dA.length;i++){
   if(an){
        dA[i].style.height=h+'px';
   }else{
     P7_eqA(dA[i].id,dA[i].offsetHeight,h);
   }
}
if(an){
      for(i=0;i<dA.length;i++){
     hh=dA[i].offsetHeight;
  if(hh>h){
          dA[i].style.height=(h-(hh-h))+'px';
  }
   }
}else{
   document.p7eqa=1;
}
    document.p7eqth=document.body.offsetHeight;
    document.p7eqtw=document.body.offsetWidth;
  }
}
function P7_eqT(){ //v1.5 by PVII-www.projectseven.com
  if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
    P7_colH();
  }
}
function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
  if(document.getElementById){
    document.p7eqc=new Array;
    for(i=0;i<arguments.length;i++){
      document.p7eqc[i]=document.getElementById(arguments[i]);
    }
setInterval("P7_eqT()",10);
  }
}
function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com
  var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
  ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
  oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
  if(nh<adT){
    setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);
  }
}
</script>
<style type="text/css">
body {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
#header {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#mid {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#footer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#header {
BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px
}
h3 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
h5 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
#fbox {
BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
}
#mbox {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px
}
#sbox {
BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
}
p {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px
}
#footer {
CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center
}
</style>
<meta content="MSHTML 6.00.2800.1515" name="GENERATOR" />
</head>
<body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="header">
  <h3>脚本控制三行三列自适应高度DIV布局</h3>
</div>
<div id="mid">
  <div id="fbox">
    <p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
      你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
    <p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
      你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
  </div>
  <div id="mbox">
    <p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
      你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
    <p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
      改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
    <p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
      你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
    <p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
      改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
  </div>
  <div id="sbox">
    <p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
      你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
  </div>
</div>
<div id="footer">
  <h5>仅供演示</h5>
</div>
</body>
</html>

[code]


三列高度自适应页面。。还不错，，在blueidea上淘到的。。]]> http://www.awing.org/default.asp?id=472 <![CDATA[把JS与CSS写在同一个文件里]]> yingmu8302@163.com(awing) Sat,14 Jul 2007 12:53:05 +0800 http://www.awing.org/default.asp?id=472 http://lab.loaoao.com/test/jscss/


首先感谢比尔、感谢微软、感谢MSDN，是他们让我看到他们富有创意的一面，好了好了不废话了。

我们经常把多个CSS或者多个JS并成一个，以节省请求，但是这样最少还是要两个。在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里，那怎样做呢？利用注释，先看一下这代码。

<!-- /*
window.onload=function(){
    document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我，那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}CSS处理时会忽视掉<!--，这时JS部分只是CSS的注释/* js */，而JS处理时把<!--转成// 也就是JS的单行注释，单行注释会把后面的/*和*/干掉，同时也干掉了CSS，不废话了，看演示的例子。



HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]




在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：

<?header('Content-type: */*');?>

理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。

当然，这样的格式写起来一定很不爽，不过配合程序来读原来已经的，并处理一下就可以，这样就可以保持原来文件也方便维护，输出文件又省点请求，如果想的话，处理处理缓存，跟静态文件差不多了。这里有份C#的，据说是官方滴，我的是PHP的，因为还没写缓存的机制就不拿出来丢人了，其实原理也很简单，会编程的三两下就搞定。

再其实，我是想找把多份CSS合并的方式，合成一个不难，可以是处理好各模块化的分离同时能在客户端缓存及方便程序调用才是难的，CSS又不像JS可以在客户端异步调用，谁有好的方式介绍一下给我。
]]> http://www.awing.org/default.asp?id=470 <![CDATA[用图片实现圆角边框的效果 ]]> yingmu8302@163.com(awing) Thu,12 Jul 2007 20:02:59 +0800 http://www.awing.org/default.asp?id=470
程序代码 程序代码


<style type="text/css">

.box, .box .content, .box .title, .box .title * {
background: #FFF url('bg_box_green_800x800.gif') 100% 100% no-repeat;
}

.box
{ margin: 3px 0; padding: 0 15px 0 0; }
.box .title { background-position: 100% 0; margin: 0 -15px 0 0; padding: 0 15px 0 0; }
.box .title * { background-position: 0 0; margin: 0; padding: 15px 0 5px 15px; height: 1%; }
.box .content { background-position: 0 100%; margin-right: 0px; padding: 0 0 15px 15px; }
.box .title h4 { color: #227A1D; } .box .content p {margin:0; padding:8px 0;}  
</style>  



HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.awing.org/default.asp?id=469 <![CDATA[组合CLASS来完成网页布局风格 ]]> yingmu8302@163.com(awing) Wed,11 Jul 2007 18:03:43 +0800 http://www.awing.org/default.asp?id=469

我是这样来做DIV布局代码的．不知道说的清楚不清楚，凑和看吧
我的想法是未来能这样：用标准件的方式来组装网页DIV布局

我把class分为２种，布局class，风格class，布局class是骨架，风格class是衣服
举个例子：
比如布局中的左栏
首先它的属性有：是左栏，宽度，背景颜色，字体颜色等

１．首先会定义一个class,比如:.layout,主要用来控制页面整个的大小
.layout{width:98%;margin:0 auto;text-align:left;}

２．然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
我把２栏布局也归类于３栏布局，因为３栏布局中，左右栏的宽度分别为０的时候，３栏就变成了２栏．
我们写基本布局代码的时候，最好还是写成３栏格式．

３．对应布局Class，定义需要的风格Class，比如宽度，高度，背景颜色等等这些都属于风格元素
.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}


布局class只有一套，风格class可以定义很多.
比如，要中栏里面在做一个小的２栏布局
就可以再定义一个风格class
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4.将布局class和风格class结合起来，在代码这样引用
<div class="l class＿l"></div>
<div class="l mid_l"></div>
将２个class都引用，中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用，如果需要再特殊定义，你可以给这个div取一个id来定义.

其他的一些常用的风格class也可以写成通用的，比如隐含可以定义为
.hide{display:none}
然后需要的时候，class="xxx hide"来引用，很方便．


程序代码 程序代码
这个思路不错，百度知道貌似就是按这样的方式来做的。。
不过也有个弊端。。

组合起来的样式到时过多。。就算有清晰的命名，，也会有一大堆class等着你看。。

所以个人还是倾向于id+class...

]]> http://www.awing.org/default.asp?id=459 <![CDATA[xhtml的结构标签 ]]> yingmu8302@163.com(awing) Sat,30 Jun 2007 17:52:35 +0800 http://www.awing.org/default.asp?id=459



作者:ajie



原则上一个xhtml文档所有的标签都应该是结构标签,需要表现的地方都使用css来控制。





来列一个完整xhtml的结构标签：





结构


body, head, html, title





文本


abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var





链接


a





列表


dl, dt, dd, ol, ul, li





表单


form, input, label, select, option, textarea





表格


caption, table, td, th, tr





图片


img





对象


object, param





meta


meta





外部调用


link





基本


base





<dl>是用于生成术语列表


<dt>用于指定要定义的术语


<dd>用于对术语的定义


如：


<dl>


<dt>HTML</dt>


<dd>超文本标记语言</dd>


<dt>TCP/IP</dt>


<dd>传输控制协议/Internet协议</dd>


<dt>魔兽世界</dt>


<dd>一款暴雪出品的网络游戏</dd>


</dl>
]]> http://www.awing.org/default.asp?id=458 <![CDATA[在 CSS 中关于字体处理效果的思考 ]]> yingmu8302@163.com(awing) Sat,30 Jun 2007 17:51:33 +0800 http://www.awing.org/default.asp?id=458
中文和英文的最大区别就是中文是方块字，英文是拼音文字，这对字体的处理的影响是巨大的。

字体的处理在网页设计中无论怎么强调也不为过，毕竟网页使用来传递信息的，而最经典最直接的信息传递方式就是文字，所以，了解一点字体的基本知识对于设计来说还是非常重要的。
　　中文和英文的最大区别就是中文是方块字，英文是拼音文字，这对字体的处理的影响是巨大的。看看下面的图示就会发现，英文字体里的那些变化在中文字体里都弱化了。      

　　作为中文的读者，习惯性的接受方块形状做为阅读的单元，其实对于眼睛来说，这是一种容易疲劳的方式，阅读的时候你的视线实际上是跟随整行文字的外形。看看这个例子。
　　NOW I VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND
　　Now I ve tried to talk to you and make you understand
　　哪一行更容易读呢？
　　第一行和中文的情形有些类似，不同的是，每个中文单字就好比一幅画，其变化要比26个英文字母丰富的多，对于我们来说，我们接受了这个特点，但是设计时还是有一些问题需要考虑，我不是设计师，如果说的不对，请在下面留言讨论。这些内容在我教授Typography的时候是作为一般原则来提出的。我也告诉学生一句话：“The purpose of rule is to break the rule.” 设计原则本身就是为了打破原则，这也是所谓的creativity的表现。问题是你需要先知道原则，并且顺从原则进行练习，只有在你熟悉原则之后才有可能打破原则显现你的创造性，打破原则不意味着原则的缺陷和错误，只是你对这些原则的别出心裁的使用，你打破了一些，同时也对你所破坏的部分做一定的补偿，似乎很有点哲学的味道。
　　我个人以为比较重要的几个原则是(适用于英文的情形):
　　字体的选用要考虑该文字的用途，是做标题呢，还是段落文字？
　　通常来说 san serif 字体适合作为标题使用，例如 Arial；serif 字体适合作为段落文字使用，例如Time New Roman。对于网页设计来说，有几个字体是我强烈推荐的，verdana, tahoma, georgia。事实上，像 Verdana 这个字体是由世界上顶级的字体设计师花了差不多两年时间设计出来的，Microsoft负责买单， 然后免费提供给用户，这个字体是IE安装的一部分，如果你安装了IE 4以上的版本，你的电脑里就一定有这个字体，所以你不必担心用户是否有这个字体。它的设计考虑了字体在屏幕上显示的可能面对的问题，而且提供了近乎完美的答案。唯一的麻烦是它的近乎完美造成了我们使用的时候没有了个性，因为每个人都使用它。
　　字号的大小？
　　论坛里很多讨论，关于pixle 好还是point好？ 我就不重复了，在这里我想提出的是字号的大小在CSS里，有很多不同的单位，大致上有三类，
　　绝对大小：mm, cm, in, pt, pc
　　相对大小：em, ex
　　相对于设备：px
　　可能要多说几句的是 em 和 ex，em 在 css 里代表就是字体字号的大小，例如对于12 pt的字体来说, 1 em 就等于12 pt 范例：
　　p {
　　 font-size: 10pt;
　　 text-indent: 1em 　　} 　　也许你会说我可以用text-indent: 10pt来实现同样的效果啊，但那只是在理想的情形下，如果用户觉得他的浏览器设置字体大小为14pt更好的时候，你所设计的比例就失去了，所以相对尺寸对于网页的可伸缩性设计是非常有利的。
　　ex 和 em 类似，但不尽相同， 回到上面的图示，x-height 对于每一种字体来说是不同的，ex 是根据字体的 x-height 来定义字体的大小。
　　对齐方式？
　　最好使用左对齐，尤其要避免使用左右对齐，除非你有一个特殊的设计目的，左对齐时右侧的不对齐正是为了阅读的方便，右侧的变化对你的视力是一个帮助，它借助变化告诉你的眼睛可以换行了。
　　行间距？
　　行间距取决于字体的大小，一般来说，小的字号需要大一点的行间距来便于阅读，中文字体在网页上如果没有行间距的设定，对于阅读大段文字来说是读者的灾难，所以适当设定line-height是非常必要的。一般地， line-height 在网页设计中应该是字体大小的1.5倍到2倍。Word 和其它的文本编辑软件里， 一般设定字体的120%作为缺省的行间距。css里的 line- height 设定，是均分后加在每一行的上下，也就是说，如果 line-height 设定为 20px 的话，那么每一行文字的上下各有10px的间距。
　　字间距和字符间距？
　　很特殊的用途，对中文来说这两者应该是相同的。这个设定的本身就是为了解决某些字体设计上缺陷，来增加文字的可读性。]]> http://www.awing.org/default.asp?id=456 <![CDATA[用CSS 修饰你的提示信息 ]]> yingmu8302@163.com(awing) Sat,30 Jun 2007 17:04:09 +0800 http://www.awing.org/default.asp?id=456
本文所指的“提示信息”并非 Javascript 中的 alert()，而是直接放在页面中的想要引起访问者关注的区域，比如在注册页面我们会在表单上方放置一条提示：“为了能够更好的给您提供服务，请详细填写您的个人信息！”。在重视用户体验的今天，我们也要让这些提示信息更加准确、快速、形象的传递给用户。




我们可以先创建一个上下边框为 2 象素的 DIV ，因为我们要用到一个16象素的小图标，所以我们加上 padding：
CSS:
程序代码 程序代码


<style type="text/css">
div.alertMessage {  
  border-top:2px solid;  
  border-bottom:2px solid;    
padding:5px 15px 5px 45px;    
text-align:left; }

</style>




为了让用户更加容易的区分出提示信息的性质，我们可以分别给不同的信息创建不同的样式，比如警告信息我们可以将颜色设置为黄色，然后再加上一个象征警告的小图标：
CSS:
程序代码 程序代码


<style type="text/css">
div.exclamation {    
background:#FFF7C0 url('exclamation.gif') no-repeat 15px center;    
border-color:#FED626;
}
</style>  




按照这样的方法我们还可以创建很多其他的信息提示样式：
CSS:
程序代码 程序代码


<style type="text/css">
div.information {    
background:#F8FAFC url('information.gif') no-repeat 15px center;     border-color:#B5D4FE;
}
</style>  




这篇文章基于
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/  （英文）

本文将公共部分独立，通过修改两个属性来实现更多效果。


]]> http://www.awing.org/default.asp?id=447 <![CDATA[CSS Hack汇总快查 ]]> yingmu8302@163.com(awing) Mon,25 Jun 2007 17:02:47 +0800 http://www.awing.org/default.asp?id=447 http://andymao.com/andy/post/76.html
屏蔽IE浏览器（也就是IE下不显示）

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别

*+html  {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。


IE6及IE6以下识别

* html  {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {……}
这句与上一句的作用相同。


仅IE6不识别

select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。


仅IE6与IE5不识别

select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。


仅IE5不识别

select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别


盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。


清除浮动


select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。


截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。


只有Opera识别

@media all and (min-width: 0px){ select {……}  }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。


IE5.x的过滤器，只有IE5.x可见

@media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器，一般用不着
[Copy to clipboard] [ - ]CODE:
/*\*//*/
    @import "ie5mac.css";
/**/


IE的if条件Hack

Only IE
所有的IE可识别
Only IE 5.0
只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别
Only IE 6-
仅IE6可识别
Only IE 6/+
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别


以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。

出处：蓝色理想]]>