[过年札记]大年初三

pumaboyd

浏览: 248436 次
性别:
来自: 上海

最近访客更多访客>>

djcbpl

heisedeyueya

dxy2798

Gaf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

C#/ASP.NET

CSS IE 浏览器读书 JavaScript

接着写《网站重构-web标准设计》读书笔记。

第十一章

主要解释了XHTML中DOCTYPE的知识。

DOCTYPE的类型4种类型，其中XHTML1.O有3种，xhtml1.1有1种。具体的可以参考这里，我觉的比书上讲的更详细：

http://www.blueidea.com/tech/web/2007/5172.asp

第十二章

关于CSS在一些浏览器上的BUG:

IE盒模型bug

根据W3C的css规范来计算的话，整个盒的宽度是：内容(200px) +边距 (20px+20px) + 边框(20px+20px) = 280px. 然而IE6以前的版本认为：内容 +边距 + 边框 = 200px.所以内容的真正宽度为：200-20-20-20-20=120px 。如下图所示：

具体参见：http://www.flashshe.com/perfect-web/post/5.htm

IE/Windows上的空格BUG.

这个问题我们在开发中经常碰到，比如

和下面的定义应该显示效果一样：

<td>

<td>

但实践上第二段可能出现多于的间隙。没有什么好办法，就只能用第一种方法解决。

第十三章

作者讲了一通，我觉的“废话”比较多，其实就一个问题：网站的字号问题。主要有3中方式，各有优缺，具体大家可以翻翻，我将自己的理解记录一下。

em字号：相对用户默认字号大小增量。例如：如果现在的字体大小为12pt，那么1.5em 就是18pt。因为根据用户默认设置的字号来显示，所以很难控制网页文字大小，排版就更困难。

像素字号：根据像素显示字体大小，一个固定值。和用户的设置没关系，但opera显示不好，还有就是不利于文本缩放。我个人到不是很关心这个所谓的文本缩放功能。（PS:我是推荐这种方式，而且我们网站目前使用的也是这种方式，应该在主要的浏览器中表现还是可以的）

字号关键字：xx-small、x-small、small、large、x-large、xx-large。类似我们买衣服的尺码，也是相对用户默认字号大小的增量，但和em不同。“如果<body>是small、<div>是small、<p>是small，以及p存在于div中，而这个又存在于body中，三个小值不会相乘(而em就会)”“关键字不会低于适当分辨率的最低值。如果用户的字号默认10px，x-small将是9px，xx-small也将是9px，不会造成文档过小看不清楚”。(PS:记得VS2003中有这种用法，当时还比较好奇，现在明白了)。

第十四章

只能说老外的考虑比较全，这一章的内容叫网站的可访问性，最初我的理解就是“为残疾人考虑网站访问”。作者也在书中提到了这一点，但作者说了，网站的可访问性还包括“网络智能电话和非传统浏览器设备”。其中还牵涉到美国的一个508条款。虽然作者认为这个很重要，但我觉得在中国目前的环境，可以考虑，但重要的关心下面几点：

１：Tab键的切换顺序。通过设置tabindex实现

2：alt和Title属性。这个问题也困扰过我，在项目开发中做Tip提示时我们就使用alt，但其实这是错误的。alt标签在FixFox下是不显示的，但在IE下是显示的。而Title属性是都显示的。可同事告诉我Ttitle不符合W3C规范，所以不知道是否要使用Title。(P283)：

“alt文本是一个可访问性工具，不是什么工具提示（title属性才是工具提示的）W3C清楚的解释了alt文本只是当不显示图片的时候才为可见的。alt属性指定了当图片不能显示的时候就显示的替换文本........用户浏览器不支持图片的时候必须显示替换文本”

所以如果你是提示请使用Title属性，你如果需要处理图片无法显示的情况请使用alt

第十五章

关于DOM操作的。具体没什么好说的，有两个改进的：

1：<a>标签的触发方式（P303）

上面两种方式都可以触发show()函数，但第一种效果好。所以请大家以后使用第一种方式触发。

2：样式切换器（PS:就是更改引用的CSS文件，二级页面项目中有切换皮肤的功能，备用 ^_^ ）：
http://www.alistapart.com/stories/alternate

第十六章

这章比较实用了，适合初学者。这是一个具体的开发实例过程，虽没按部就班，但作者切中了关键点。

关于对CSS、js、img等文件取名，也是一直头痛的问题。P327作者给出了一个好的建议：

文件名的命名方法

“我们总是热衷于节省带宽，所有努力使用缩短的目录名：用/i/，而不要/images/；用/j/,而不用/javascript/;用/c/,而不用/css/或是style。”

“我们也把这样的方法用于文件名。例如，用于填充'创建颜色条'中的工具条底部的图片，被命名为sbbot.gif而不是sidebar_bottom.gif。所用的字符越少浪费的字节也就越少。我们不能保证百分百地这样做，但是我们要竭尽全力”

Fahrner的图片置换方法（简称FIR）P332

即使通过<a>的 a.hover来实现背景切换。
CSS/XHTML导航条 P337

通过<ul><li>等标签实现导航菜单。

Google 标记: 过年札记, 2008过年, 网站重构

--=阅读快乐=--

分享到：

2008情人节餐馆!2008情人节送什么! | igooglebar google在线服务FireFox扩展

2008-02-12 15:03
浏览 623
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论