Designsor

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

网站地址：

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脚本了。

很久没有回来更新自己的BLOG了，真的是不知道写些什么，可是不写真的不知道自己的进步，因为转行了，所以很多新的东西要学习，那么从现在开始，我也要写一些简单的技术和教程记录了。

对了，忘记告诉很多朋友，我已经不是WEB设计师了，现在的目标职业是WEB前端开发工程师。

现在开始正文，我们先明确一下自己的准备。这篇教程属于初级教程，面对的是一点AJAX方面经验没有的和一些网页爱好者。

先看一下最终的成品效果图：

下面是一些准备工具的截图和下载地址：

http://www.designsor.com/download/jiaoxue/SmartApache.zip

集成了php,mysql,apache的傻瓜包，这里不单独讲解如何配置PHP环境。

http://www.designsor.com/download/jiaoxue/phpMyAdmin.zip

PHPmyadmin下载地址。

http://www.designsor.com/download/jiaoxue/jquery.rar

JqueryCHM手册和文件。

希望你能自己了解一下上面的工具的来源和具体作用，安装完全之后，请先测试本机是否可以运行PHP环境。

当然基本的PHP语法语句也不在这里讲解，我PHP也不太好，会用而已。请确定本机是否安装好了PHP环境，不论你用什么方法，请一定确认。也可以使用google.cn进行相关PHP环境搭建的教程！

HTML部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<form>
<fieldset>
<legend>一个AJAX+PHP的POST表单</legend>
<label for="name">姓名：</label>
<input name="name" type="text" id="name"/>
<label for="work">工作：</label>
<input name="work" type="text" id="work"/>
<label for="age">年龄：</label>
<input name="age" type="text" id="age"/>
<input class="sub" type="submit" value="提交" />
<input class="rest" type="reset" value="重写" />
</fieldset>
</form>
<div id="list">
<h1>最新的一条录入</h1>
<div id="lastnews">小爝 前端开发工程师 22岁</div>
</div>

CSS部分：

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

*{
margin:0px;
padding:0px;
font-family:Arial;
font-size:14px;
}
form,#list{
margin:20px;
}
fieldset{
width:300px;
padding:20px;
line-height:30px;
}
input{
border:#ccc solid 1px;
height:17px;
padding:2px;
}
.sub,.rest{
letter-spacing:2px;
height:22px;
}
#lastnews{
margin-top:10px;
}

下面HTML部分的基础工作已经做好。我们来建立我们的MYSQL数据库来储存我们的信息，表结构如下图。

很简单不做什么解释，如果看不懂可以自己google一些phpadmin的相关用法和一些数据库知识尝试。

下面开始编写PHP方面脚本，首先是连接数据库。

1
2
3
4

 $link=mysql_connect("localhost","root","gochina");
 mysql_select_db("www");
 mysql_query("set sql_mode = '' ");
 mysql_query("set names 'utf-8'");

然后是action的判断与数据操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 $action=$_GET['action'];
 $name=htmlspecialchars_decode($_GET['name']);
 $work=htmlspecialchars_decode($_GET['work']);
 $age=htmlspecialchars_decode($_GET['age']);
  //过滤一些不想要的标记，并接收下存入变量;
if($action=="add"){
 $exec = "INSERT INTO ajaxpost (name,work,age) VALUES ('$name','$work','$age')";
 $result = mysql_query($exec);
 //写入一条sql语句，执行储存功能;
 mysql_close();
 }
else if($action=="news"){
 $exec="select * from ajaxpost ORDER BY UID DESC limit 0,1";
 $result = mysql_query($exec);
 $post= mysql_fetch_array($result);
 echo "姓名:".$post['name']."职业:".$post['work']."年龄:".$post['age'];
 mysql_close();
 }

主要解释几点，就是用2个action来区别了下不同的ajax请求，常见的手段，这样一个页面可以通过一个action来做很多不同的响应反应。之后就是2个操作，一个储存，一个搜索。
之后下面是进行ajax的javascript代码，请写入下面代码前加载jquery的库文件。

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

$(function(){
$("form .sub").click(function(){
var name=$("input[name='name']").val();
var work=$("input[name='work']").val();
var age=$("input[name='age']").val();
//获得值
$.ajax({
type: "GET",
url: "ajax.php",
data: "action=add&name="+name+"&work="+work+"&age="+age,
success:function(){
update();
//添加成功后回调刷新的函数
 }
});
//阻止事件冒泡
return false;
});
//刷新的函数，又一个ajax请求
var update=function(){
 $.ajax({
 	type: "GET",
  	url: "ajax.php",
 	data: "action=news",
	cache: false,
 	success: function(msg){
   	$("#lastnews").html(msg);
  	}
});
//成功后把查询内容返回给容器。
}
});

差不多到这里我本地运行就已经成功了。这里提出一个小建议，最后的处理中文字符集问题，由于ajax的只支持utf-8编码，所以PHP文件，mysql数据库字符集和页面一定要统一编码，最后测试OK。
其实ajax也没什么难的，主要是jquery把它封装的比较傻瓜化，可以参见上面下载的那个chm手册有详细的一些说明。
代码写的比较烂，高手勿笑，我只是给个朋友做个范例。