飘零雾雨的庄园

对页面制作的一些建议

dooyoe@gmail.com(飘零雾雨) — Tue,26 Aug 2008 14:30:57 +0800

　　现在，对于页面制作（估计每家公司的叫法都不大一样）这个职位，职责已经逐渐清晰了，通常需要负责的环节就是“还原效果图”，也就是将设计稿做成HTML页面。

　　不过在这个还原的过程中应该也是需要一些基本的流程和注意一些东西的。

　　1、我们在拿到设计图后，通常会怎样做呢？

　　或许我们会在拿到图后二话不说，直接对着效果图，将代码从头敲到脚？

　　请对这个做法say no！

　　建议大家在拿到设计图后，不要急于开始制作，先仔细的看一次（不是看有多漂亮^_^）。如同庖丁解牛般，他看到的不是单纯的一头牛，而是看到了牛本体的机理结构。而我们要看出来的也正是设计图的骨架，只有顺骨架，才能知道这个图的结构应该怎么写。在把握好总体结构后才开始动手敲代码，以此避免在敲代码的时候，敲着敲着又要停下想想这块区域该怎样写。

　　2、对结构做到心中有数后，是否可以敲代码了？

　　不，我们似乎还有一些事情忘了做。比如说，设计稿上的某些效果，需要使用什么技术来实现？又或者是某个部分，需要做成怎样效果。我们只有对整个设计稿有了一个大致的了解，才会知道，要完成这个页面，需要用到哪些东西，并且准备哪些东西。

　　而在等我们将上述的一些事情都做好后，接下来敲代码的工作将会顺畅很多。因为你的思绪早已经运作开了，对于设计稿的每个部位都已经了然于胸，敲起代码来，当然就会如有神助。 :)

　　3、通常，我们都可以事先写好一个固定的html框架，以备在以后的工作中高频次的使用。

假设以下是你写好的html固定框架：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">

　　这样的话，你就可以省下每次都去其它页面寻找并且copy这些东西的时间。当然，如果你是在使用一些IDE的话，可能会自动帮你生成，不过自动生成的东西或许不一定适合你。

　　4、同样，也会有一个类似的css框架

　　说框架似乎有点不妥，这个所谓的css框架，其实只是一些公用的，复用性高的样式集合，比如一些reset样式或者其它。这样就可以不必每次都去重复写这些同样的东西，减少你敲样式的时间，提高工作效率。当然，这个集合应该是一个适合你工作需要的集合，而不是为了做一个集合而写的，且无法给自己的工作带来方便的集合，如果是这样，倒不如不写。

　　对于html和css样式的好坏是否有一个可参照的标准？

　　应该说是没有的，

　　但一个良好的html结构，我觉得起码需要具备以下几个要素：
　　对于时效性短，修改次数少且结构固定的页面，需要做到简洁，清晰；对于时效性长，修改频繁且结构相对变动较多的页面，也需要做到让html结构尽量简洁，清晰，但更重要的是要有较强的可扩展性（在页面有较大改动时，也不会伤筋动骨，可以比较轻松的搞定）。

　　那么一个良好的css，又该是怎样的呢？

　　一个好的css文件，应该具备高复用，低耦合，当然，也需要注意简洁，能够缩写的尽量缩写，以减少字节。还有一个非常重要的，就是命名。好的命名，是可以共通的，比如说#header，只要是开发，不局限说前端，就是后端，也能够一眼就知道这块指的是“头部”，这就增强了你的代码可读性。当然，由于每个人的风格不一样，这或许就需要做成一个规范。其中的好处，不言而喻。另外还有就是hack，这个东东，虽然可以帮助我们解决很多难题，但可以不用尽量不要使用，因为它不仅会破坏代码的可读性，而且还会增加后期的维护成本，且不利于向后兼容。

　　这以上所说的这些，对于团体作业来说都是极为重要的。因为一个团队，难免有人员的更换，就免不了一个项目会换多个接手人。这时，一个规范，或者说一个良好的可读性强的页面结构和css，都能让新接手的人快速进入到你当时做这个项目时的状态，对提高效率有很大帮助；也对整个团队的代码风格的形成和编写习惯有比较大的帮助。

　　说了这些，其实还需要注意的是结构的语义化，当然还有一些微格式。现在是seo炒得火热，但语义化与seo并不冲突，且做好的了结构的语义化，其实对seo也是有极大帮助的，况且现在的一个总体趋势就是标准化，对于这个大环境，就是重量级的搜索引擎也不会轻视，蜘蛛对页面的结构也是非常敏感的。真正的seo并不仅仅是钻空子而已，而是要回到根源。

　　三言两语还有很多细节方面是描述不到的，以后有时间再写。

不给line-height加单位要成为一种习惯

dooyoe@gmail.com(飘零雾雨) — Mon,04 Aug 2008 19:07:29 +0800

　　好久都没有更新Blog了，最近懒了不少。

　　我们都知道line-height是可以继承的，由于这个特性，子元素就可以不用重复定义line-height了。但line-height会给人误解的地方也就是这个继承。这是怎么回事呢？别急，我们先来看一幅图。

　　（图一）

　　看着图一，是不是让你心生“亲切”呢?^_^不过即使不感到亲切，也会觉得眼熟。明眼人一眼就能看出这是line-height导致的，其实这就是line-height好玩的地方。

　　有的时候，我们为了实现单行文字的垂直居中，会给line-height一个和height相同的固定的值；有的时候，我们为了调整特定的某段文字的行间距，通常会考虑使用百分比或者相对尺寸的em。或许是习惯，于是我们都习惯了line-height是要有单位的。

　　但，很明显，这些情况下，我们都不需要考虑line-height的继承，所以我们不会发现任何问题。

　　然而，当你要使用到line-height继承的时候，你会发现原来还有那么多的猫腻藏在其中。比如有这样一个结构（例一）：


第一行
第二行

　　你会发现这2行字重叠了，问题来了吧。按普通的思维定式来看，由于line-height会被继承，于是pre内部的文字也应该是line-height:150%，所以出现重叠，似乎太过玄乎？

　　别急，再来看更具体的例子（例二）：DEMO

　　看过例子后，你会发现，只要有单位的line-height继承，都发生了重叠的现象。那到底这是什么原因导致的呢？

　　如果line-height属性值有单位，那么继承的值则是换算后的一个具体的px级别的值；而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

　　如例一，div的line-height为150%，由于默认情况的字体大小为16px，所以div的具体line-height值可换算为16px*150%=24px，由于pre的line-height会继承24px这个换算过后的具体值，此时pre又被重新定义了font-size:30px;字体大小超过了line-height的大小，于是发生重叠。其它单位原理一样。

　　而例二中，不带单位的那个line-height，pre由于会直接继承1.5这个因子，所以pre的line-height值为30*1.5=45px;字体大小小于line-height，不会重叠，line-height永远是本身font-size乘以“因子”的倍数。

　　为了应付各种不可尽知的情况，请习惯不要给line-height单位。

上川岛2日游

dooyoe@gmail.com(飘零雾雨) — Mon,21 Jul 2008 21:32:23 +0800

　　上川岛2日游回来，放几张照片晒晒先^_^

a，你真的玩会了么？

dooyoe@gmail.com(飘零雾雨) — Fri,18 Jul 2008 16:52:16 +0800

　　a，小块头有大智慧。闲话不说，先上图：

　　（图一）

　　如上图3个链接效果，本来只想说第3个的，另外2个是用来做对比滴。

　　假设图一的3个链接有固定的HTML结构，如下：

这是传说中的测试

　　链接本身就带有下划线，这是a的特质。所以对于链接1，如果a的下划线被reset掉了的话，那么要还原的话，只需：

代码1：

　　.test a{color:#000;text-decoration:underline;}
　　.test a span{color:#f00;}

　　这个基本上没什么好说的，接着来看链接2。似乎也只是简单的下划线而已，于是也按处理链接1的方法来处理。结果，在你的意料之中，下划线颜色不合要求，我们要红色而不是黑色。

　　一个方法没有奏效，接着向另外一个办法，总之只是要一条红色的下划线而已。线，是的，很快你就会想起border，玩线还是它比较“专业”。

　　于是我们开始用border来测试：

代码2：

　　.test a{color:#000;border-bottom:1px solid #f00;}
　　.test a span{color:#f00;}

　　很明显，你是对的，我们想要的红色下划线出现了。但也有让你郁闷的事，那就是在红色的下划线之上还有一条黑色的下划线。如图二所示。

　　（图二）

　　别急，别骂它，因为这是我们忘了清除a自身的下划线。来吧，让我们把它搞定：

代码3：

　　.test a{color:#000;border-bottom:1px solid #f00;text-decoration:none;}
　　.test a span{color:#f00;}

　　弄了这2个东西，基本上知道要下划线要么找border-botom要么找text-decoration:underline，不同的是border-bottom的颜色我想怎么换就怎么换，而text-decoration:underline则没那么自由，它始终摆脱不了它老爹的color。比如说a定义为红色，那么text-decoration:underline也只会乖乖的显示为红色。

　　请把眼睛往链接3上挪移挪，会发现这是完全不同于上面2个链接的效果。效果很简单，但到底该如何来写，你会怎样做呢？

　　对于这个效果我问了问旁人，想了解下其他人是怎么做的。他想都没想（这是我猜滴^_^），就给了我“代码1”。至于是谁，就不点名了哈，自己心里有数。@@

　　我提出问题后，他马上改了一下，变成了：

代码4：

　　.test a{color:#000;border-bottom:1px solid #000;text-decoration:none;}
　　.test a span{color:#f00;border-bottom:1px solid #f00;}

　　哦，神啊，在非IE下，果然达到了效果，不过在IE中却只能显示为图三的样子：

　　（图三）

　　他说，这简单，于是又给改成了：

代码5：

　　.test a{color:#000;border-bottom:1px solid #000;text-decoration:none;}
　　.test a span{#margin-bottom:-1px;color:#f00;border-bottom:1px solid #f00;}

　　用到了hack，自然不是理想的答案，于是我对他说，其实你走弯路了，可以不用这么复杂的。看代码6：

代码6：

　　.test a{color:#000;text-decoration:underline;}
　　.test a span{color:#f00;text-decoration:underline;}

　　电脑前的你又会怎样做呢？

被OpenSearch撞了一下腰

dooyoe@gmail.com(飘零雾雨) — Tue,15 Jul 2008 17:00:52 +0800

　　OpenSearch还是很好很强大的，不过郁闷的是你的head又要多一个东西了。

　　因为小站已经做了搜索，所以就没大去玩这个。对它感兴趣的朋友可以参考OpenSearch定义文档。

　　不过今天发现在写一个OpenSearch的xml时发现一个编码问题。

Joy's Search
Joy的Google定制搜索
Joy's Search
dooyoe@gmail.com
http://www1.pcauto.com.cn/dy/test/joy.s.png

　　写了如上一段xml，在IE7下添加这个Joy's Search没有任何问题，不过在FF下却死活添加不了。初步猜测可能是编码的问题，因为在XML里有中文。于是试着把里面的中文全部改成英文，神奇的事情出现，FF下居然也可以添加了。

　　当然，还需要将这个xml插入到你的站点：

　　如果想保留中文的话，当然也是可以的，只需将

　　改成：

　　然后将文件另存为UTF-8格式。

　　对OpenSearch没有深入研究过，不知道还有些什么好玩的东西。

　　待续。。。

用途相似的标签：cite,q与blockquote

dooyoe@gmail.com(飘零雾雨) — Wed,09 Jul 2008 23:03:00 +0800

　　cite,q与blockquote这三个标签都是用来表示引用的，但这三者之间确是有着比较明显的区别的。

　　cite是用来标明引言的，所谓引言，就是对一本书、一篇报告或其它出版的来源资料的引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。如：

　　《傲慢与偏见》

　　q是什么呢，是用来分离文本中的引语，定义一个短的引用。如：

　　能一起吃顿饭么？，那位帅气的先生带着期盼的眼神等她回复。

　　再说说blockquote，它是用来定义一段引语的。比如我们要引用某篇诗文或者文章片段，如：


　　　   你站在桥上看风景， 
　　　   看风景人在楼上看你。
　　　   明月装饰了你的窗子， 
　　　   你装饰了别人的梦。

　　需要注意的是，q是用来定义一个短的引语，blockquote是用来定义一段引语，它们的范围和作用级别不同。q引用的是一句话或者一句文档摘要，而blockquote则是引用一段或者大篇幅。q可以只包含存文本，或者内联元素，但blockquote的子节点必须为块元素，而不能是文本或者内联元素，当然，孙子辈的就无所谓了，这点进行strict XHTML验证你就会知晓。

　　有一点相同的就是q和blockquote都有一个重要而且相同的属性cite，“cite？这不是一个标签元素么？我们前面才说到啊。”是的，确实有一个标签，但同时也有一个cite属性，它是用来注明引用来源的URL。

　　如上面的blockquote的例子，我们就可以加上cite属性来表明该引用的来源：

　　至于如何区分cite标签和q,blockquote的作用，也可以举2个例子：

q与cite：

　　废那事干啥，直接上不就得了，黑皮先生如是说。

blockquote与cite：

　　
　　　
　　　   最是那一低头的温柔， 
　　　   象一朵水莲花不胜凉风的娇羞，
　　　   道一声珍重，道一声珍重， 
　　　   那一声珍重里有蜜甜的忧愁——
　　　   沙扬娜拉！
　　　
　　
　　
——摘自《志摩的诗》

　　cite,q,blockquote三者虽然都有引用的作用，但却各司其职，互不干涉。

用途相似的标签：em与strong

dooyoe@gmail.com(飘零雾雨) — Wed,09 Jul 2008 21:52:40 +0800

　　em和strong虽然一个表现为斜体，以斜体来渲染指定的文本，一个表现为粗体，以粗体来渲染指定的文本，但它们却并不是用于表现的标签。它们都有着自己的语义：em是用于对文本的强调，strong用于对文本的特别强调。从em到strong是一个递进的关系。

　　由于重要性的轻重，对于一句话，可能需要有强调，也可能在强调中还有特别强调。这时就需要同时用到em和strong，但在使用它们时，还需注意，如：

她是一个有文化，有内涵，有气质的江南美女

　　而不能写成：

她是一个有文化，有内涵，有气质的江南美女

　　原因是强调中还可以有着重强调，而着重强调中不应再有较弱的强调。因此em中还可以包含strong，而strong里却不可以包含em。

用途相似的标签：acronym与abbr

dooyoe@gmail.com(飘零雾雨) — Wed,02 Jul 2008 17:38:15 +0800

　　有的时候为了方便传阅或者记忆，比如一句话太长，我们就会将其缩短些。或简单的缩句，或进行特殊的减短，如取首字母。

　　那么在HTML如何来标识这些缩略词呢？一般我们会使用到2个标签，一个是acronym，另一个是abbr。

　　其中，acronym被定义为首字母缩写词，abbr定义一个缩写内容。

　　目前的一些较为高级的浏览器，如FF，OP，都会对2个标签的内容进行特殊的显示，会自行加上虚线。

　　缩写是为了我们能方便的记忆和传阅，但这却对我们理解内容比较不利。所以通常在使用这2个标签时，我们还需要结合标签属性title，用以详细说明被省略的内容部分，达到记忆，传阅与理解兼顾。来看几个例子：

　　首字母缩写：

　　WWW

　　CSS

　　普通的缩写形式：

　　etc.

　　中国

　　个人认为abbr应该是包括acronym的，因为acronym仅仅用来取首字母，是缩写的一种特殊形式而已；而abbr则是定义一个缩写内容，相对范围更大。

　　也就是说

　　中国

　　不能写成

　　中国

　　而

　　HTML

　　应该是可以写成

　　HTML

　　在接下来的HTML5中，貌似也有让abbr取代acronym的意思。

position:fixed的时刻已到来

dooyoe@gmail.com(飘零雾雨) — Wed,18 Jun 2008 21:55:12 +0800

　　由于ie6及以下浏览器一直不支持position:fixed，所以使得这个特殊的定位方式一直不为大家所熟悉，本该由position:fixed来做的定位多数情况下都是用JS来实现了，说起来也算是一种资源浪费。

　　估计是MS也是意识到不支持position的fixed值是一个错误，所以从IE7起，已经开始支持fixed了，而IE8也正大步向我们走来。于是我们可以开心的说，position:fixed的时刻终于真正的来临了。

　　然而IE6还是不支持，又该怎么办呢。当然我们不奢望IE6还能再升级到支持fixed，但我们可以想办法让它“支持”。

　　OK，来看DEMO

　　[演示地址：http://www.doyoe.com/model/xhtmlcss/style/position/fixed.htm]

　　当然，IE5.5用这种方式仍然是不行的，但可以知道的，IE5.5其实已经越来越少了：）

忆

dooyoe@gmail.com(飘零雾雨) — Tue,17 Jun 2008 20:23:59 +0800

雨仍继续着昨日的疯狂
雷是必不可少的佐料

水珠从我的耳旁滑过
很静
清脆的落地声
心也静下来
任闪电如何肆虐
也激不起半点涟漪

小巷前有一滩水洼
我脱下鞋
虽然已经湿透

我仔细的回忆
回忆
水的味道
瓦砾的感觉
湿透的清醒

却怎么也捕捉不到
捉不到那触手可及的
朦胧的，依稀的
影像