Designsor

在公司为项目自己担当的部分书写了一份简单的代码规范说明和阅读说明，方便别人阅读自己的源代码也严格要求自己养成一定的代码书写规范，所以根据自己的特点和公司项目的特点书写了下面的一份简易的不全面的HTML,CSS,JavaScript规范说明。

下面是概要部分：

HTML,CSS,Javascript开发与说明规范文档

项目中的HTML的规范说明

一,HTML部分的命名的规范
二,HTML属性介绍和常用实例
三,HTML部分标准的头部声明
四,HTML注释规则

项目中的CSS的规范说明

一,Css文件的命名和使用规则
二,CSS的书写规则
三,Css样式名命名规则
四,CSS注释规则

项目中的Javascript的规范说明

一,Javascript使用的框架
二,Jquery的使用方法
三,Javascript的注释
四,Javascript的摆放位置和顺序
五,JavaScript的变量名规则

详细文档地址参见下面链接：

http://www.designsor.com/demo/Htmlcssjs.html

朋友的站点，李冰设计，小爝负责制作。效果图大概发两张如下：

网站地址：

http://www.libingdesign.com

主要实现难点，一些动画的JS特效与一个简单的静态JS相册，附带简单分页。可以查看网站源代码，都写在一个页面里了。希望大家多多支持。

太久没有做图了。今天动了动手，感觉PS好难用，不顺手的来，而且很多时候会卡住，不知道如何进下一步设计。
一张耽搁了太久的练习稿。参考了很多地方，最后还是这么不伦不类。
应该再修改下，等朋友来了再说，如果可以 应该能按照这个范儿帮忙开发下其他页面。

好了，下面是缩略图，和大图地址。

原尺寸图地址：
http://www.designsor.com/wp-content/uploads/2010/02/weibo.jpg

其实不用jquery也可以很好的完成以下任务，因为以下很多实例都是用的Dojo或者mootools开发出来的。

先看看这些应用的体现：

这个导航看起来最开始我觉得很简单，CSS就可以彻底实现，但是考虑到IE6的不支持伪类，还是用JS来做了，而且相对于2个层错位覆盖的效果来看，用JS更稳定些。

*{font-family:Arial; font-size:12px; padding:0px;}
ul{list-style:none;}

/*demo1*/
#demo1{
width:300px;
height:25px;
background:#D2DA9E;
border:#333 solid 1px;
}
#demo1 li{
float:left;
display:inline-block;
margin-left:10px;
line-height:25px;
text-align:center;
width:78px;
height:25px;
position:relative;
z-index:1;
}
#demo1 a{color:#333;}
.a_move{
background:url(demo/demo1.gif) no-repeat center top;
width:78px;
height:25px;
position:absolute;
left:0px;
top:-12px;
z-index:-1;
}

这个是我做的DEMO中的样式结构，组合起来看，好的CSS和HTML结构对你的页面是多么的重要。
HTML部分很简单.

<ul id="demo1">
	<li><a href="#">Home</a></li>
	<li><a href="#">Google</a></li>
	<li><a href="#">Home</a></li>
</ul>

JS部分的结构如下：

//demo1
$("#demo1>li").hover(function(){
$(this).append("
<div class="a_move">");
},function(){
$(".a_move").remove();
});</div>

以上代码只是片段帮助理解，具体代码可以查看最后我给出的DEMO地址中的源文件。

看似不难，但是真正写出来还是有点校技巧，主要是相对绝对定位的理解功力还有对DOM节点的把握。主要还是CSS的位置关系了解要很明朗才可以。

其他的一些例子：

经典的苹果网站的导航，它的源代码早早就研究过，不难，css sprites+JS的样式切换即可解决。

HTML可编辑的属性，知道的人不多，但是知道之后要学会控制它的样式，根据焦点的不同来设置，并需要提供一个HOVER的标示符来辅助操作。很简单，均可查看最后的源代码。

用一个一个alert()难道不厌烦了么？操作DOM节点来进行模拟confirm也不失是一种更好的选择。

这个原理很多了，我只是用了一个setTimeout配合一些动画即可完成，根本不需要一些复杂的扩展。

道理很简单，width,height随时间轴一样可以完成优雅的动画，而效果更具人性化。

实例代码我所写的都很简单，全部加在到了一个页面中，具体地址如下：http://www.designsor.com/demo/websor.html
可以随便翻看源文件，由于只是简单的环境下应用，如果您需要使用，切忌自己再次进行修改。尤其JS部分，写的很随意，并不支持多点扩展，不过如果您能看懂，自己改下也很方便。
以后还会模仿更多的JS前端特效来分享。

先看下效果图：

地址为：

http://www.designsor.com/demo/flash.html

废话不多说，说下实现思路和具体的一些知识点，代码写的比较仓促，是个效果DEMO。

具体的JS代码，首先当然这个是基于JQUERY的,先加载Google的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

(function(){
/*$(".index_muen>li").hover(function(){
$(this).fadeTo("slow",1.0)
},function(){
$(this).fadeTo("slow",0.5)
}); 
*/
//DOMO里没有明确出颜色渐变，但是我做了，后期正式做的时候处理
$(".index_main").fadeIn("slow",function(){
$(".muen2")
.animate({left:"80px",width:"370px",height:"93px"},
150,
function(){
$(this).css("background-position","0px 0px");
$(".main_text2").slideDown(200);
});
});
//初始化
//点击的依次绑定，这里写的有点乱，因为着急出效果。
$(".index_muen>li").click(function(){
$(this)
.animate({left:"80px",width:"370px",height:"93px"},
150,
function(){
$(this).css("background-position","0px 0px")
});
$(".index_muen>li").not($(this))
.animate({left:"0px",width:"95",height:"23"},
150,
function(){
$(this).css("background-position","0px -105px")
})
$(".main_text2").hide("fast");
});
 
$(".muen2").click(function(){
$(".main_text2").slideDown(200);
});
//单独的第2个有文字的导航。
});

说一下，主要是animate这个JQUERY内置的自定义动画函数，他的功能和用法，大概的思路应该很明了的看出来。
jQueryanimate(params, [duration], [easing], [callback])

paramsOptions一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)
String,Number三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing (可选)
String要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.

callback (可选)
Function在动画完成时执行的函数

其中还有个关键点就是HTML和CSS部分的组合，这里就不发代码了，可以自己查看页面的源代码，因为HTML部分和CSS部分的合理性，致使动画很容易上手，建议好好分拆我写的CSS部分，其中的图片为了让动画更流畅，也使用了css sprites技术。但是本文重点不在这里，不做过多说明。

恩，等全部修改完之后再发布更稳定的，现在只是个DEMO，其实用JS做特效导航真是个不错的选择。

在学习面向对象的JavaScript，今天花了会时间写了个分页的功能，用JS前端实现的，可是，问题在于还是不太明白，还是实践出真知，后来才发现写的根本不是什么类，还是全局对象满天飞的一个大函数，不过对我也有一定启发，看了看别人写的类，还是感觉不错，近期再修改下，添加上样式，会发布一个完全版的分页JS类。

下面是刚完成的分页函数。
Javascript部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/*@author xiaojue*/
//JS翻页类
var Npage=function(pageparent,putwhere,pagechild,size){
//类初始化
Npage.num=1;
Npage.s=document.getElementById(pageparent);
Npage.p=document.getElementById(putwhere);
Npage.d=document.getElementById(pageparent).getElementsByTagName(pagechild);
Npage.size=size;
//跳转
Npage.pagegoto = function(i){
Npage.num=i;
pageup();
};
//判断参数是否合法
if(Npage.s==null || Npage.p==null || Npage.d==null || isNaN(Npage.size)) return;
 
//分页
var nowpage=function(){
var nowpagehtml=[];
for(i=1;i<=zsize();i++){
nowpagehtml.push("<a href='#"+i+"' onclick='Npage.pagegoto("+i+")'>"+i+"</a>");
}
nowpagehtml=nowpagehtml.join(" ");
return nowpagehtml;
}
//输出
Npage.p.innerHTML="每页共"+Npage.size+"条";
Npage.p.innerHTML+=" <a href='#prev' class='Nprev'>上一页</a>";
Npage.p.innerHTML+=nowpage();
Npage.p.innerHTML+=" <a href='#next' class='Nnext'>下一页</a>";
Npage.p.innerHTML+=" 共有"+zsize()+"页";
//上下分页
var Na=Npage.p.getElementsByTagName("a");
for(i=0;i<Na.length;i++){
if(Na[i].className!="Nprev") continue;
Na[i].onclick=Nprevaction;
}
for(i=0;i<Na.length;i++){
if(Na[i].className!="Nnext") continue;
Na[i].onclick=Nnextaction;
}
//
pageup();
};
//显示条数
var pageup = function(){
for (i = 0; i < Npage.d.length; i++) {
Npage.d[i].style.display = "none";
}
for (j = 0; j < Npage.d.length; j++) {
if (j >= Npage.num*Npage.size || j < (Npage.num-1)*Npage.size) continue;
Npage.d[j].style.display = "block";
}
}
//获得总页数
var zsize=function(){
return Math.ceil(Npage.d.length/Npage.size);
} 
//分页
var Nprevaction=function(){
if(Npage.num==1){alert("没有上一页了");return}
Npage.num=Npage.num-1;
pageup();
}
var Nnextaction=function(){
if(Npage.num==zsize()){alert("没有下一页了");return}
Npage.num=Npage.num+1;
pageup();
}

使用方法：

1
2
3

window.onload=function(){
var mypage1= new Npage("table1","page1","tr",4);
}

详细浏览地址如下：
http://www.deisgnsor.com/demo/function.html

再发布就准备是添加自定义样式和真正的JS类代码了，请期待吧。

世界级大师著作，提升JavaScript功力的捷径，代码全部来自实际商业项目。

　　ppk向我们全面展示了自己遇到问题、分析问题和解决问题的全过程，内容极为实用，切中Web程序员的需求。

　　——Mike West．Digital Web Magazine

　　ppk在本书中倾注了大量心血，这必将是一部杰作。

——JereIny Keith，《JavaScript DOM编程艺术》和{BulletproofAjax中文版》作者

世界级JavaScript大师ppk为我们撰写了一部与众不同的]avaScript著作。书中的8个案例来自作者开发的实际商业项目，将基础知识、Web标准、现代开发理念、最佳实践和大量实战技巧完美地结合起来，读者可以从中直接学习到一流专家分析问题和解决问题的方法。书中的代码从不同角度讲解JavaScript的使用，实现了许多具有通用性的功能。可以直接应用到实际项目中。

本书语言流畅生动。布局谋篇非常精心，是JavaScfipt程序员提升自身实力的绝佳助手。

内容简介

本书全方位介绍了JavaScript，主要讨论了浏览器兼容性、可访问性、底层语法以及与HTML结构层的协同等问题。书中既包括理论性的讲解，又给出了相关的示例脚本以进行进一步阐述。通过8个真实项目示例，介绍了JavaScript核心语言、BOM、事件处理、DOM、修改CSS样式表以及数据检索等内容。

本书适合具有一定网页开发经验的Web开发人员阅读。

我没什么好解释的，我觉得这是Javascript编程人员必读的一本书，在通读过DOM编程艺术之后再配合这本书，你完全可以解决目前项目中80%以上的JS实现和问题，帮助你变身成为JS达人，看领悟能力，本书告诉你怎么做，如何做，和实际工作应该怎么去选择。绝对的经典，我是在地铁中阅读完毕的，全书320多页，每页都值得你仔细阅读。适合有一点JS编程经历但是想深入全面了解JS核心内容的人，或者想入门JS的一些前端设计师们。本书没有复杂的面向对象的内容，适合新手阅读，近期打算去读设计模式，全面发展面向对象的Javascript了。

希望各位真的可以人手一份，而且个人比较崇拜PPK那种精神。关于PPK更多的内容：

Peter-Paul Koch（即ppk)是自学成才的世界级JavaScript专家，1970年生于荷兰阿姆斯特丹，大学主修古希腊罗马史专业。他拥有多年客户端web开发经验，所维护的网站www．quirksmode．or9已成为全球JavaScript开发人员最重要的参考资源之一。他常年为业界顶尖的媒体Digital Web Magazine、AList apart等撰写技术文章，包括影响深远的The JavaScript Manifest0。此外，他还是w曲设计师论坛(WDF)的管理员。

首先Show一下修改的局部截图：

终于添加了统一风格的ICO标示。

增加了JS页面辅助定位。

增加了分类的数字显示，部分广告增加下颜色- -。还有就是增加了最新文章列表。

添加了网页加载执行时间。

总的来说功能上有硬件部分的修改也有JS方面辅助的功能修改。

文章列表之前一直没有，最近才发现的问题，不太容易让浏览的人一下找相关的文章，虽然暂时BLOG文章还不多，但是以后可能会多起来的。还就是我的BLOG都是所有内容直接展示在主页上的，可能页面内容一多，滚动就会很长，所以决定自己开发做了个滚动的辅助插件，效果图2就是了。代码和原理都很简单，有用到Jquery的动画，但是大部分函数是自己JS写的。可能延缓了一些页面加载时间，但是JS都在尾部页脚，不会拖累太多，应该是保持原来的执行速度。可能近期还会有更多的小修小改，希望能尽力做的细致一些，也多些大家时常来本站学习交流吧。

首先看下收集整理的一些常见分辨率：

1、作图的人最喜欢用的显像管（CRT）显示器17寸普屏（4：3）即平时说的方屏，最佳分辨率为1024X768，注意分辨率的比值正好是4：3.
2、17寸和19寸普屏（5：4）即平时说的方屏液晶显示器，最佳分辨率是1280×1024，注意分辨率的比值正好是5：4.
3、19寸宽屏（16：10）即平时说的方屏液晶显示器，最佳分辨率是1440×900，注意分辨率的比值正好是16：10.
4、22寸宽屏（16：10）即平时说的方屏液晶显示器，最佳分辨率是1680×1050，注意分辨率的比值正好是16：10.
5、1280×800，这是13.3吋、14.1吋笔记本屏幕常用的分辨率.
6、1366×768、1920×1080、1600×900等是16:9宽屏的分辨率.
7、1024×600，是9寸10寸上网本的分辨率.
8、1920×1200是24寸宽屏（16：10）液晶的分辨率.

以上是8款主流的分辨率解释，到底什么又是分辨率呢？下面是百度词条的解释。

http://baike.baidu.com/view/7687.htm?fr=ala0_1_1

分辨率（resolution，港台称之为解释度）就是屏幕图像的精密度，是指显示器所能显示的像素的多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。

通过以上的了解我相信你对分辨率问题有了一些初步的感知。到底为什么做网页的要考虑显示器分辨率问题呢。当然，我们设计的东西就是要呈现在各个不同版本的显示器上的东西，所以考虑分辨率是非常重要的。

在设计中我们到底要怎样对待自己的分辨率尤其是在PSD2CODE时？答案就是，按照最小的客户端分辨率来转换网页尺寸。一些没有经验的设计师，在没有适应过800*600，1024*768的时代，直接上手就是1920*1200的分辨率，当然，这种效果图的尺寸是完全错误而且不科学的。如果一个前端开发人员再把这种效果图2CODE之后，答案就是正常的用户无法访问，你只接受宽屏的用户来使用站点了。

在对待用户的时候，我觉得好的设计师和团队应该考虑的是大部分的使用者的硬件配置，在3年前，1024*768为主流的年代，我们同样坚持以800宽也就是784宽为正规尺寸照顾学校机和个人一些老式电脑，而三年后，1024*768已经不是主流的分辨率时，我们是否应该和当年一样考虑下那部分小屏用户呢？（这里不谈手机用户的分辨率问题）。

这个问题主要是由于项目开发的时候前期没有注意到，因为公司的全部是宽屏显示器的原因，所以最后再调整起来很费时费力，依次做为警戒。最后给出一个可查询的表格。

希望所有前端设计师再次注重下我们那些快被遗忘的分辨率用户吧。

这篇文章要面对的依然是一些新手前端工作者。

编写javascript脚本已经有一段日子，在繁复的工作过程中，无论是CSS还是HTML的代码提示都帮助我们解决了一定的效率问题。下面我来简单的说一下在Dreamwear和Aptana中如何配置Jquery的代码提示。

先来说在Dreamwear中的jquery代码提示，这个插件我已经用了快半年，大大加速了我书写jquery代码的速度和减轻了错误率的出现。也对我的学习有很大帮助（毕竟有提示之后一些不知道的属性也就都暴露出来了。）

如下图：

代码提示功能装完以后就可以提示出我们的jquery的各种方法和函数了。

这个地方的扩展从MX2004-CS4的Dreamwear都通用的。

扩展管理器调试出来之后选择安装扩展。

选择我们的Jquery MX-9 V.0.2.9的mxp扩展文件并安装。

安装成功之后就可以看到jquery的api了。(CS4也是这么装的，而且这个扩展也支持。本站也提供下载。)

然后呢，最近开始使用RadRails Aptana来编写专门的javascript脚本了。因为Dreamwear的js代码提示功能实在是太弱，不支持DOM的模式而且对象方法也不齐全，只是薄弱的一些颜色高亮。下面是Aptana的界面，是款强大的代码编辑器，而且对javascript脚本的辅助功能很强大。

他的Javascript代码提示功能非常强悍，而且附带解释和说明方法。

支持DOM模式的代码提示。

对代码的解释说明，对帮助学习其他知识的扩展很有帮助。

可是又出现问题了，我们的aptana不支持jquery的代码提示啊。我平时编写jquery的项目又要怎么办呢，肯定要有的，只是需要研究一下，这个软件用的时间不久，不过还算好理解。先看一下我安装成功的jquery代码扩展。

我选择的扩展并且安装成功了。

成功搞出了Jquery的代码提示。

上面面板调出是window-Preferences就OK了然后设置Aptana的代码提示显示模式和功能以及插件，当然Extjs的扩展同理，还有其他的类库。只要这里打了对勾就好了。

但是，做这些之前，如何把jquery的扩展引入呢。根据下面的方法来进行操作吧。

根据上图找到插件管理器。

选择插件你的aptana的插件管理器。

点绿色的加号然后调出插件列表，然后选择安装jquery1.1.3的提示插件和代码项目，之后一路下一步安装即可。因为我已经装过了，所以是灰色的。

到此，你的Aptana就已经支持开发以jquery库为项目库的javascript脚本了。