2009年二月

关于表格的学习笔记

二 17th

由雨无形发表在css

没有评论

今天学习了两篇关于表格的文章，感觉对表格的认识更进一步了，记下此笔记以作分享。

以往设计一个如下表格我都是采用以下代码

  1. <table width="300px" border="0" cellspacing="0" cellpadding="0">   
  2.   <caption>各门派掌门表</caption>   
  3.   <thead>   
  4.     <tr>   
  5.       <th>门派</th>   
  6.       <th>掌门</th>   
  7.       <th>年龄</th>   
  8.     </tr>   
  9.   </thead>   
  10.   <tbody>   
  11.     <tr>   
  12.       <th>武当</th>   
  13.       <td>三丰</td>   
  14.       <td>98</td>   
  15.     </tr>   
  16.     <tr>   
  17.       <th>全真</th>   
  18.       <td>重阳</td>   
  19.       <td>65</td>   
  20.     </tr>   
  21.   </tbody>   
  22. </table>  

今天看了两篇文章：

标记语言——邪恶的表格

标准化——表格

总结如下：

  • tfoot的使用：tfoot标签本来一直知道这个标签，但是很少用到，但是本身一直有一个误区就是写表格的顺序是thead、tbody、tfoot，其实正确的顺序是thead、tfoot、tbody。thead和tfoot要写在tbody前面。
  • summary属性：进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器尤为重要,这能帮助它们解说表格的内容。summary属性是加到table里的。
  • id和header：同样是对于非可视化浏览器可以使用在th上加id然后在th上加header来使td和th对应。
  • abbr属性：当屏幕阅读器遇到一个表格，每一行会把表头连每一个数据单元格一起读出来。如果表头很长，听一遍一遍的读是十分乏味的。通过使用abbr属性，可以给那些长的表头提供简写形式，取代表头的内容。abbr属性是可选的，大部分情况表头还是（或许是应该）比较简短的。

最后，之前的代码可以修改为：

  1. <table width="300px" border="0" cellspacing="0" cellpadding="0" summary="此表格记录了江湖各门派的掌门和年龄">   
  2.   <caption>各门派掌门表</caption>   
  3.   <thead>   
  4.     <tr>   
  5.       <th id="company">门派</th>   
  6.       <th id="master">掌门</th>   
  7.       <th id="age">年龄</th>   
  8.     </tr>   
  9.   </thead>   
  10.   <tbody>   
  11.     <tr>   
  12.       <th id="wudang">武当</th>   
  13.       <td headers="master wudang">三丰</td>   
  14.       <td headers="age wudang">98</td>   
  15.     </tr>   
  16.     <tr>   
  17.       <th id="quanzhen">全真</th>   
  18.       <td headers="master quanzhen">重阳</td>   
  19.       <td headers="age quanzhen">65</td>   
  20.     </tr>   
  21.   </tbody>   
  22. </table>  
,

网站字体选择研究

二 13th

由雨无形发表在用户体验

没有评论

昨天换了这个主题，跟我想要的感觉很像，就不自己重新做了，但是由于此主题是从wordpress移植过来的，在字体设置方面是按英文网站的样式来做的，做中文站点有很多不足之处，于是就自己修改了下CSS。

主要修改的地方有：

1、将所有11px 10px的字全部改成了12px，因为在中文显示里，12px是能清晰显示汉字的最小字体。

2、将正文的文字由12px改成了14px行距150%，让文章更容易阅读。

3、将标题改为20px黑体normal。改这个位置的时候发现问题了，原字体设置为：

  1. .post h2 {   
  2.     font-family:Verdana,"BitStream vera Sans";   
  3. }  

我最先改成

  1. .post h2 {   
  2.     font-family:Verdana,"BitStream vera Sans","黑体";   
  3. }  

测试发现，在FF和chrome下显示比较正常，英文用的Verdana字体，中文使用的黑体，但是在IE下则英文是Verdana中文是宋体，但是换个写法

  1. .post h2 {   
  2.     font-family:"黑体",Verdana,"BitStream vera Sans";   
  3. }  

则在所有浏览器中中英文都显示的黑体，虽然实现了效果，但是黑体的中英文混排不是很好看，而且这样写后面的Verdana,"BitStream vera Sans"相当于多余的了，于是乎上网搜索资料终于让我找到了一篇关于网页设计文字应用的强文，如下：

[教程] 谈谈网页设计中的字体应用 (1) Font Set

[教程] 谈谈网页设计中的字体应用 (2) serif 和 sans-serif

[教程] 谈谈网页设计中的字体应用 (3) 实战应用篇·上

[教程] 谈谈网页设计中的字体应用 (4) 实战应用篇·下

 通读4篇文章，对网页设计的字体应用已经初步有了系统的了解，也明白了产生这个问题的具体原因。因为各浏览器的渲染机制不同对文字渲染又有着各式各样的问题，所以只能采取折中的办法来解决问题，同时通过几篇文章对字体应用了解的增加，最后将字体写成这样：

  1. .post h2 {   
  2.     font-family:Tahoma,Helvetica,"黑体",Sans-serif;   
  3.     *font-family:"黑体";   
  4. }  

2月16日根据本站情况修改为：

  1. .post h2 {
  2.     font-size:24px;   
  3.     font-weight:normal;   
  4.     font-family:‘Microsoft YaHei’,‘微软雅黑’,‘Microsoft JhengHei’,‘华文黑体’,STHeiti,Georgia,‘Times New Roman’,Times,serif; 
  5. }  

通过HACK来在FF和chrome中正常显示，在IE6 7中中英文都用黑体显示。

总结：在日常网页设计中，如果只是需要用到系统默认字体，如XP下的宋体，VISTA下的微软雅黑，则只需要写成：

  1. body {   
  2.     font-family:Tahoma,Helvetica,Sans-serif;     
  3. }  

即可，系统会自动将中文以默认字体显示。

如果需要用到特殊字体，如前面的黑体，那么可以像最好那样通过HACK来解决，在IE下用黑体，FF和chrome下中文是黑体英文是其它所设置的英文字体。

最后贴上修改后在不同浏览器下的显示效果。

  

IE6

 

IE7

 

FIREFOX3

 

CHROME

帮太和服饰做的网站售前页面

二 12th

由雨无形发表在网页设计

1个评论