WEB前端开发

Dom Collection
Dom Collection 包括一组便捷的方法，简化常用的DOM脚本方法，包含元素定位和CSS样式管理，同时规范了跨浏览器的兼容的不同情况

Getting Started
为了使用Dom Collection ,在你的页面上包含一下的脚本标签：
<!– Dependencies –>
<script src=”http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js”></script>

<!– Source file –>
<script src=”http://yui.yahooapis.com/2.5.1/build/dom/dom-min.js”></script>

YAHOO.util.Dom是一个单独的类，不需要初始化。从YAHOO.util.Dom你可以简单使用类方法(例如:YAHOO.util.Dom.getXY(“myElementId”),YAHOO.util.Dom.getStyle(“myElementId”))

使用Dom Collection
以下章节描述了一些常用的Dom Collection.包含这些部分：
1. 定位HTML元素
2. 获取和设置风格
3. 获得视窗尺寸
4. 管理class名称

定位HTML元素
如何定位一个HTML元素在document中的位置，获得其在当前页面中的坐标可能是一项挑战。Dom Collection的定位方法（setXY(),getXY(),setX()等等）可以被确保精确定位。页面坐标被定义在整个HTML document中，包括跨浏览器。

在接下来的例子中，getXY方法返回ID属性为“test”的HTML元素的X和Y的坐标数组。setXY方法设置第二个ID为target的HTML元素的坐标为‘test’的坐标：
Var pos =YAHOO.util.Dom.getXY(’test’);
YAHOO.util.Dom.setXY(’target’, pos);

获得和设置样式

getStyle方法可以允许你重新找回元素对象的风格；setStyle方法允许您设置元素的样式属性。在CSS中，应用一种样式有不同的方法是建立在浏览器之上的；setStyle和getStyle 方法用不透明的属性正常化解决了这一问题。注：Opera第9版之前是不支持CSS透明化的。

在接下来的例子中，setStyle方法设置ID为”test”的方法和ID为”test2”元素都有0.5的不透明度（或者是50%；不透明度在0和1之间）。getStyle方法返回当前ID为”test2”的HTML元素的不透明度的值。
YAHOO.util.Dom.setStyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = YAHOO.util.Dom.getStyle(’test2′, ‘opacity’);

获得视图尺寸

这个视图被定义为当前可见的document的宽度和高度，无论是绝对的document尺寸还是。获得当前视图尺寸是建立在跨浏览器和渲染模式上的挑战。getViewpoortWidth和getViewportHeight方法确保精确视图的测量。

以下例子创建了一个数组名为viewport和包含当前视图的定义。
var viewport = [
   YAHOO.util.Dom.getViewportWidth(),
   YAHOO.util.Dom.getViewportHeight()
];

管理class名称
Dom Collection收集了大量的方法，来动态管理类名。
包括
•getElementsByClassName(className,tagName,rootNode):返回一组元素数组有class name应用的。能够被任意范围内由tagName 或者 根节点来增加表达。
•hasClass(element,className):决定一个元素是否提供class name。
•addClass(element,className):增加class name到元素中。
•removeClass(element,className):从元素中移除class name
•replaceClass(element,oldClassName,newClassName):从给出的元素中更换另一个class name。
接下来的例子返回一个用友test的class name的DIV元素的数组。
var elements = YAHOO.util.Dom.getElementsByClassName(’test’, ‘div’);

我们所说前端开发，目前指的是浏览器端的WEB应用开发。但是未来并不仅限于此，这也是为什么前端开发这个岗位放在UED部门的原因。前端开发更注重于人机交互和用户体验。

也许你现在从事的并不完全和我们所定义的前端开发工作相同，但是，只要致力于用技术支撑互联网用户体验，我想，我们都是志同道合的。

第一次BLOG上觉得要写点正式的东西，写得有点悬乎，还是来点通俗的比较实惠。

就是，前端开发游走在设计师和工程师之间，游刃与用户体验和技术实现之间，斡旋在用户利益和商业利益之间。好象一个外交家，又好象一个兵工厂。

又什么浮云般的描述，我这是怎么了。看来要整点土的比较好。

if (

( (JS>60 || AS>60) && CSS>60 && XHTML>80 )

&& (scriptLanguage + CSS +XHTML) > 220

&& teamWork>80 && serverEndLanguage>60 ){

alert(’Come on!’);

}

关于这篇文章其实早就想写了，只是由于自己太懒才一直拖到现在。主要想谈谈在网页制作中几个比较容易被忽视的问题，算不上什么高深的教程，只是自己平时工作学习中所遇到的问题积累，写下来一是可以给初学者提个醒，二来也是帮自己做个笔录，毕竟年纪大了，记性不好了…

1、让你想当然，给你点颜色看看
这个问题其实被很多人忽略，小到个人站点，大到门户网站都有可能犯这个错误。不信想想看，如果你所做的网站背景是白色的，那么你还会记得在
CSS 里写下 Background-color:#ffffff
这句代码吗？我敢打赌，大部分人不会！并不是因为大家偷懒，而是这个举手之劳被彻底忽略了，为什么？因为我们所用的Windows
操作系统在大多数的情况下，运行在其上的各种软件的默认背景色是白色，这其中就包括IE浏览器，所以在网站背景是白色的条件下，许多的网页制作者就想当然的忽略了关于背景色的设置，反正大家都是白色，不设的话也看不出来。但是不要忘记了，Windows 从 XP 开始支持系统主题的更换，有很多第三方的主题会更改系统默认的设置，其中就包括背景色的设置，如果没有强制设定页面中的背景色，那么页面就会以当前浏览器的背景色来显示内容，其结果就是网站美观性被大大的降低，拿大家都熟悉的网易来举例，下面的截图是在我机子上浏览时的样子，由于前不久换了一套 Vista 的主题风格，所以浏览器的背景色变成了浅灰色。

仔细看看网易的 Logo ，看出来吗？对，那个 Logo 的背景是白色的，但旁边的背景色却是灰色的，换句话说就是网易整个页面的背景原定就是白色的，这在浏览器背景为白色的前提下是看不出什么来的，但是像现在这样就”漏馅”了。不光是网易 ，许多的门户站都是这样，具体我就不去举例了，可见关于 Background-color 设定的重要性。所以，不论你的网站是什么样的背景色，请一点记住把它设定好，哪怕它是白色！

2、立正！向左～～～看齐
大家都知道 Table
的默认水平对齐方式（align）为左对齐，设 align=”left”
和不设其效果是一样的，于是很多人不去设置这个属性，我以前也是如此。但是在某些特殊的情况下，IE会把默认的左对齐理解为居中对齐，从而导致页面的排版出现问题，虽然说具体是什么情况下会出问题连我自己都说不清楚，但是这种情况绝对存在，所以大家在做页面的时候一定要习惯性的设置表格的align 属性，不要偷懒跳过这步，对页面的表现来说，这所谓的多此一举绝对有益无害。

3、单元格宽度－隐形杀手
不知你有没有遇见过这种情况，假设当你给一个单元格的align设置了左对齐后，却发现放在单元格中的文字并没有应用该属性的效果，反而继续是居中显示，查看文字两端也并没有发现任何垃圾代码包含其中，可是无论如何都改变不了文字的位置。郁闷吗？反正当时我是很郁闷，直到后来，我才发现原来是单元格的Width属性在作怪，将其删除或重新设置后问题得到解决，所以，当你也遇到同样的问题时，不妨检查一下出问题单元格的Width 设置，相信你会找到解决的方法。

4、打死滚动条都不消失
有时为了一些个性化的需要，有些人喜欢将浏览器的滚动条隐藏掉，这个效果做起来很容易，但是有时会发现明明代码一点问题没有，而且查看用的浏览器也不是非IE
内核型的，但可恶的滚动条就是不消失！而且这个问题很多都出现在用DW 等可视化编辑软件制作出的网页上。那原因是什么呢？其实原因就在该页面的头部代码里，查看该页面的源代码，你会发现在最上边有类似这样的两句代码：
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
这两句代码叫做 DOCTYPE 声明，是 Document
Type(文档类型)的简写，用来说明你用的 XHTML 或者 HTML
是什么版本。简单点说这两句代码是制作标准化页面所必不可少的关键组成部分，浏览器就是根据你定义的文档类型来解释你页面的标识，并展现出来的。换句话说，如果你定义了一个错误的 DOCTYPE，那么你的标识和 CSS
都不会生效。而定义滚动条显示与否的overflow、overflow-x、overflow-y
这三个属性恰恰没有被网页标准所采纳，所以如果你的页面上方定义过 DOCTYPE ，那么这三个属性便是无效代码了，解决方法就是删除头部的 DOCTYPE 声明，虽然在标准日益普及的今天不推荐这么做。

5、都是注释惹的祸
为代码写注释是个好习惯，但是有时也会出现一些问题，例如为 CSS 写中文注释。 如果你为自己定义的 CSS
写了中文注释，那么在一些特殊情况下（例如服务器端的支持，页面所用的程序类型等）会导致部分代码无故失效，这种情况我遇见好几回了，所以在技术上没解决这个问题之前，还是不要为CSS 写注释的好，养成良好的命名习惯足以让其它人看懂自己代码的意义，即使一定要写，也请用英文写吧…什么？拼音！！！拜托，你用拼音试试看，保证一个星期后连你自己都不明白那写的是什么。

6、神啊，发光吧～～～
这个问题有些滥竽充数的嫌疑，只是有很多人问起过，所以也一并放上来。是关于 CSS 的 Glow Filters
，这个滤镜的效果是对环绕对象内容边缘制作发光效果，也有人称描边效果，多被用在文字的表现上，但是许多人在运用了该滤镜后发现并没有出现想要的效果，究其原因多半是由于把这个滤镜直接运用到了文字上，要知道该滤镜对文字是没有效果的，那为什么还能制作出发光文字呢？那是因为一定要把它运用在放置文字的容器上，例如
Table 。所以，如果没有效果的话，就检查一下是不是用错地方了。
该滤镜的另外一个问题是，虽然发光效果是有了，但是感觉文字上的那圈光晕好像是被裁了一样，少了一块似的。这是由于所放置文字的容器高度低于该滤镜的发光范围所至，
解决方法有三种： 1、缩小 Font-Size
2、增加 Height 值高度
3、降低 Strength 值的大小

其实这些问题都不是什么了不起的大问题，但往往越是小问题才越容易被人忽略，希望上面这些经验教训对你能有所帮助，哪怕有一个人从中收益就不枉我罗哩罗嗦这么半天了。

在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。看下面的例子：

HTML4STRICT代码：

显示的结果如下：

容器DIV没有被撑开

大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。这是因为内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度，要怎么解决呢？

以前我都是用这样的方法来解决：
HTML4STRICT代码：

显示的结果如下：

显示正常了

我们看到，在容器DIV内要显示出来的float:left的所有的DIV之后，我们添加了这样的一个DIV：<div style=”clear:both”></div>  。这样，其实就在最后增加了clear的动作。

但是，我总觉得，这么多加一个DIV有点不妥。一是多了一个没有意义的DIV，二是在用dojo做Drag & Drop的时候，由于这个DIV是容器DIV的一个字节点，如果这个节点被移动，则会造成排版上的Bug：如果要显示的蓝框的DIV被移到这个DIV之后，则因为clear:both，它会被强制换一行显示。所以，我一直在寻找更好的解决办法。

昨天在无数次的询问了Google大仙后，我终于找到了How To Clear Floats Without Structural Markup 这篇文章，找到了解决的办法。

首先设置这样的CSS：
CSS代码：

然后，我们再修改原来的HTML代码，让外部的容器DIV来使用这个CSS：
HTML4STRICT代码：

在Firefox里测试一下，哈哈，这样做的确很有效，显示正常，而且dojo的 Drag & Drop 也不会有问题了。原来，这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号”.”，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。

但是，在文章中说，Windows IE并不支持这样做。所以要让IE也完美显示，则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下：
CSS代码：

因为转义字符”\”，Mac IE浏览器会忽略掉这段Hack，但Windows IE不会，它会应用 * html .clearfix {height: 1%;} 来达到撑开DIV容器的目的（貌似Mac IE没有办法解决这个问题，不过幸好用户数量是在是太少了，Safari支持就可以了:p）。

测试一下，果然大功告成。

原文地址：http://www.9demo.com/article.asp?id=222

曾经写过一篇文章来讲述清楚浮动的问题,以前一般用clear:both,今天看到一个更好的解决办法：

增加了width 和overflow 两个属性就可以了，非常简单，文章有详细的描述。

演示地址：

http://www.9demo.com/demo/clear_float/clear_float.html

曾经写过一篇文章来讲述清楚浮动的问题,以前一般用clear:both,今天看到一个更好的解决办法：

增加了width 和overflow 两个属性就可以了，非常简单，文章有详细的描述。

演示地址：

http://www.9demo.com/demo/clear_float/clear_float.html

原文来自：http://developer.yahoo.com/yui/animation/

Animation YUI的动画封装类

YUI的动画模块使开发者能快速的实现形状大小，颜色，透明度等其他视觉上的动画效果。改模块能在目前A级浏览器上正常使用。所以具有跨平台性。（这里插个广告：整个YUI实现，基本上完全是跨浏览器，不存在兼容问题。嘿嘿。大奶项目中几乎所有的动画效果都是用YUI Animation实现的，给我节省了大量开发时间，并且做出了非常出色的动画效果。） 简单的配置，易懂的语法却能实现复杂的动画效果。

要使用YUI Animation需要引入的外部JAVASCRIPT：

1.http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js

2.http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js

 具体的配置情况可以查看：http://developer.yahoo.com/yui/articles/hosting/#configure

您的动画实施将包括Anim对象或它的子类的一个或更多事例。

使用以下代码在你的页面中创建一个动画

创建动画类有一个必要的参数：动画效果应用的DOM对象的ID或者DOM对象本身。

还有其他几个参数：

· 动画类的实际属性（表达该动画的实际意思）

· 动画的播放速率（默认是1）

· 动画的缓冲效果方法（默认效果是YAHOO.util.Easing.easeNone，没有任何缓冲效果）

本文接下的文章将探索任意参数的意义和应用。

 初始化刚才创建的动画的方法，并赋予生命，开始执行：

————————————————————————————

以上是一个简单动画实现效果：把一个ID为‘test’的DOM对象的宽度变化到400px，播放速率为1，使用easeOut（超出预订大小后再返回预订大小的效果）缓冲方式。

上面的那个动画创建也可以分解成4个步骤来实现：

1：给ID为‘test’的DOM对象创建一个动画实例

2：设置动画属性，宽度变化到400像素

3：播放数率为0.5（越小越快）

4：给动画实例设置缓冲效果

动画类的API文档：http://developer.yahoo.com/yui/docs/module_animation.html

—————————————————————————————

应用YUI动画类

以下这部分内容进一步的来描述如何使用动画类。这里包含以下几个部分：

· 动画属性的使用

· 使用相对值

· 设置动画初始值

· 指定属性的单位

· 侦听事件

· 用Motion类来创建动画

· 用Motion类来创建一个沿着曲线运行的动画

· 用Scroll类来创建动画

1.动画属性的使用

  这部分内容是控制动画运行的核心，控制了动画改如何去运行，他告诉动画事例怎样赋予生命.可以控制的属性有：宽度，高度，透明度，位置，边框宽度，padding，margin等属性。以width为例，指定宽度“to”或“by”的值。默认情况下，动画类会尝试从当前的对象中回去初始值。

解析这段动画属性的意思：把当前DOM对象的宽度变化到400像素，高度变化到400像素，（2个属性的变化是同步运行的）。

2.使用相对值

解析这段动画属性的意思：在DOM对象当前的宽度和高度的前提下各增加200像素。

3.设置动画初始值

解析这段动画属性的意思：DOM对象的宽度由10像素，高度由10像素开始，各增加200像素。

4.指定属性的单位

解析这段动画属性的意思：DOM对象的宽度，高度由1em变化到20em（默认单位是像素px）

5.侦听事件

解析这段动画属性的意思：DOM对象的高度由当前值变化到10像素，并在动画运行结束的时候侦听一个事件,这个事件触发删除DOM对象自己本身。。

补充：这个还没可以对动画开始，动画运行中侦听你想要的事件。

6.色彩的动画效果

YAHOO.util.ColorAnim 这个类继承了基本的动画类，并且实现了背景颜色，边框颜色，字体颜色的变化效果的动画。

解析这段动画属性的意思：把当前DOM对象的背景颜色有当前的背景颜色逐渐变化到‘#dcdcdc’这个颜色。

7.用Motion类来创建动画

YAHOO.util.Motion 这个类继承了YAHOO.util.ColorAnim，可以实现更加复杂的动画效果，比如点到点移动到动画效果。

解析这段动画属性的意思：把当前DOM对象的位置移动到坐标为400，400的点的位置。

8.用Motion类来创建一个沿着曲线运行的动画

YAHOO.util.Motion可以实现复杂的曲线运动，一条曲线可以定义一个或则多个的控制点，控制点越多，曲线运动越复杂。曲线控制点用‘control’来定义。

解析这段动画属性的意思：把当前DOM对象的位置移动到坐标为400，400的点的位置，并且在坐标800，300，和坐标-200，400的位置做了曲线控制点，动画控制类会根据DOM的初始坐标，（800.300），（-200，400），（400，400）计算出一条平滑的曲线，DOM对象会沿着这条看不到的曲线移动，最后到达（400，400）目的地，这个已经是一个比较复杂的动画了。

9.用Scroll类来创建动画

YAHOO.util.Scroll 和YAHOO.util.Motion一样，继承了YAHOO.util.ColorAnim，他是可以控制滚动条的动画效果。

亮亮的一篇文章唤醒了我对clear层的重新研究，在新的一轮挖掘之后，终于解决了困扰半年的 mirror margin bug ，特发文庆贺。

亮亮文章中的clear层使用外套层的解决方案让人眼前一亮，确实好用，我找了很久都没找出大的bug。但是，单独的clear层是我一贯的主张，有一点是好的，更灵活更自由。暂且把亮亮的clear层命名为.cll吧，我列出html代码说明。

<div class=”cll”>

<div class=”left”>float layer 1</div>

<div class=”left”>float layer 2</div>

</div>

看似比插入空的清除浮动层减少了代码，其实不然，这个外套有太大的局限，实际使用必然是作为一个额外新增的层，否则，外套层作为容器，其width属性和overflow属性会给其内容带来未知的影响，比如，它不能接收float属性，不能接收height属性，而且，如果希望在 float layer 1、2 之下新增 新的浮动层 3、4，就得重新套一遍<div class=”cll”> content here </div>

其实跟单独的浮动层在代码量上没什么变化，一个套了一个额外的层，一个插入了一个空层。

而，使用简单的没有经过优化的清除浮动层，是显然靠不住的，无数的bug可能源于清除浮动层，所以要对清除浮动层的 css样式进行优化，请仔细参看以下内容。[
文中针对“ 浮动层套浮动层并在外层使用padding 而产生的mirror margin bug ” 的解决方案：优化clear层 +display:inline。 其结果只是将mirror margin bug 转移走了而已。使用优化过的clear层 <div style=”clear:both;+display:inline”></div> ，在以下情况再度发现mirror margin bug ！！

条件：浏览器当然还是ie(6,7)，外层无浮动（宽度auto，设置padding-top）套内层浮动层，并用单独的优化过的clear 空层清除浮动。想必这一结构是我们最常写的结构了~~~。

bug症状：内层浮动层与浮动层之间的垂直方向上，外层的padding-top被复制到这里了~~，+display:inline而且还会伴随高度或者padding-bottom的异常~~，可以通过设置外层的宽度或设置外层zoom:1解决以上问题，但从模块化工程化的角度出发，不能要求所有这样的外层设置zoom属性，所以可以宣布《padding、margin以及清除浮动层引发的异常》文中对 clear层的优化无效了~~。

—————还是回到之前的问题mirror margin bug

条件：浏览器当然还是ie(6,7)，外层浮动（与宽度无关，设置padding-top）套内层浮动层，并用单独的优化过的clear 空层在内层清除浮动。

bug症状：在清除浮动的地方多出 “大小为外层padding-top值” 的留白。

实在无法解决只能用外套层清除浮动了~~

============================================================
实例地址：http://www.f-dev.com/wp-content/uploads/2008/03/subproject.html

这是阿里 fun develop 出的一道题目.
制作要求如下:

1. 宽度自适应

2. 标题文字自适应

3. 尽量用一张背景图

4. 尽量少的嵌套

================================================================================

演示地址：http://www.9demo.com/demo/title/1.html

================================================================================