photoshop设计一个商业网站
Posted in photoshop on 12/22/2009 10:38 下午 by tunpishuang原文： Create a webdesign company layout in Photoshop
作者：Jean-Baptiste Jung
这个是最终效果：
Read the rest of this entry »
Posts Tagged ‘web设计’
javascript 查找select里面option的值
Posted in javascript on 12/14/2009 08:35 下午 by tunpishuang
有个任务，给个公司系统的“人员定岗”加入“人员查找”功能。
这个功能的界面如上图，左边的组织结构树，中间的一个id为left的select是该部门职位下的人员，右边是一个id为right的select，是整个组织的全部人员。可以对left里面的人员进行添加、删除、编辑，这就是“人员定岗”的大致功能。
但是有个缺点，right列表里面的人员多了（比如几千甚至上万）就不好快速的找到需要的人。
所以加入了查找功能。
首先在插入一个文本框和按钮
1 2 3 4 | <input type="text" id="search_input" size="15" value="输入名字查找员工" onFocus="this.value='' " name="B2" /> <input type="button" id="search_btn" value=" 查找 " onClick="search()" name="B2" class="btn2" /> <br> |
然后是我写了3个小时的50行js代码加入页面头部的script标签中：
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 | firstTime=1;//第一次点“查询” function search() { if(firstTime) //如果是第一次点“查询” { //将完整的人员列表每个option的value和text保存在personText,personValue中 var search_input=document.getElementById("search_input").value; var selectedPersonText=new Array(); var selectedPersonValue=new Array(); var l=0; //将查询匹配的人员text,value单独赋值给两个数组 for(var k=0;k<len;k++) { if(personText[k].indexOf(search_input)>-1) { selectedPersonText[l]=personText[k]; selectedPersonValue[l]=personValue[k]; l++; } } //删掉所有option remove_all(document.getElementById("right")); //显示匹配的option for(l-=1;l>=0;l--) { document.getElementById("right").options.add(new Option(selectedPersonText[l],selectedPersonValue[l])); } firstTime=0;//第一次点“查询”完毕 } else //非第一次“查询” { var search_input=document.getElementById("search_input").value; var selectedPersonText=new Array(); var selectedPersonValue=new Array(); l=0; //将查询匹配的人员text,value单独赋值给两个数组 for(var k=0;k<personText.length;k++) { if(personText[k].indexOf(search_input)>-1) { selectedPersonText[l]=personText[k]; selectedPersonValue[l]=personValue[k]; l++; } } //删掉所有option remove_all(document.getElementById("right")); //显示匹配的option for(l-=1;l>=0;l--) { document.getElementById("right").options.add(new Option(selectedPersonText[l],selectedPersonValue[l])); } } } |
下面的代码加入页面页脚的script标签中：
1 2 3 4 5 6 7 8 | var len=document.getElementById("right").options.length; var personText=new Array(len); var personValue=new Array(len); for (var k=0;k<len;k++) { personText[k]=document.getElementById("right").options[k].text; personValue[k]=document.getElementById("right").options[k].value; } |
主要的思路就是：第一次加载页面的时候，从后台数据库把所有员工数据放到了right列表中，输入关键字点查询的时候首先将所有列表项的value和text读入到两个数组中，然后将输入的查询关键字一次和这两个数组用indexOf比较。
indexOf()的作用是查询某字符串是否输入它的一个子字符串，比如不包含返回-1。
然后将查询符合要求的赋值给另外两个数组selectedPersonValue和selectedPersonText，先删除所有列表项，然后将这两个数组用options.add依次添加到列表项中。
当第二次，第三次…点“查询”的时候，就快了，因为直接和内容中的两个数组比较。
1400多个列表项，在IE6下面点“查询” cpu跳到60%~80%，Firefox下面 cpu为30%-40%。可能firefox对js的一些函数有优化吧。
还有一点就是js放的位置也是有讲究的，比如这个例子中，读取right列表长度放在页面页首就不行。因为文档还没有加载晚上，它是识别不出来列表right，回显示”undefined”。
这次修改工作，对js有了近一步了解。我再次感谢firefox的牛逼扩展：firebug，调试js，just easy。
———irrelevant gossip
前天我一同学的公司叫我做网站，是搞教育培训的，比如计算机等级，英语等级等。报价5k8。有个难点就是：在线远程视频培训这块，还有美工的问题，我找了很多同学，同学的同学，都没有牛逼一点的网站美工。唉，看来这笔业务不好接。
将小型、现代的产品主页由psd转换成XHTML/CSS模板
Posted in css, html, photoshop on 11/20/2009 12:20 上午 by tunpishuang
本教程将会指导你将一个photoshop网页设计转换为可以使用的HTML/CSS模板。这是web设计和代码转换系列教程的第二部分。
demo
点击下面的图片将会看到本次制作的 demo 的效果。
开始之前
如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型、现代的产品主页 ， 因
为第二部分需要第一部分做好了的psd文件。
如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。
创建文件结构，准备文件
1 在桌面上创建新的空目录，取名portfolio。
2 在portfolio目录下面继续创建images目录用于存放图片。
3 接下来创建两个空文件 styles.css和index.html
4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。
5 在文档的<head>标签加入对styles.css的链接。可以使用如下代码：
代码段1
<link href="styles.css" rel="stylesheet" type="text/css" />
页面分区
以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。
6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,
#welcome, #sidebar, #content 和 #footer。 Read the rest of this entry »
用Photoshop设计一个小型、现代的产品主页
Posted in photoshop on 11/17/2009 12:19 上午 by tunpishuang
这个Photoshop web设计的教程中，我们将学习设计一个整洁的具有现代气息的web站点。这是设计和HTML/CSS模板转换系列教程的第一部分。
预览
以下是我们将要一些设计的页面预览，点击图片可以放大。
使用960网格系统设计一个网页模板
Posted in photoshop on 11/08/2009 11:51 下午 by tunpishuang
40个超实用的web设计工具
Posted in photoshop on 11/04/2009 03:56 下午 by tunpishuang原文：40 Incredibly Useful Web Design Tools You Should Use Daily
原作者：Daniels Mekšs
翻译：tunpishuang
本文将会展示一些web设计师应该经常会使用到的工具。如果你需要一些灵感，你可以访问最流行的设计展示站点来寻找你需要的好作品和好例子。一些设计相关的工具，在线生成器，免费字体站点，模板站点都将帮助你更有效率测试和管理站点。记住，并不是什么都亲自完成才是最好的方式，一定程度的借鉴将会让你以更轻松的方式完成任务。
我强烈建立你泛读本文，把对你有帮助的站点加入书签，当你灰心的时候，不妨看看。
灵感类
1. Deviantart
Deviantart是互联网站最大的艺术展示站点之一。你可以在这里找到好灵感。
2. Web design library
Web Design Library是一个提供设计研究平台的资源站点，覆盖了大量的理论知识和实战方面的信息。
3. Stylevault
Stylevault.net 是一个设计展示站点，设计师可以在上面展示才华的同时其他人也可从中获益。
4. Behance
Behance 是找灵感的好去处，因为他们的设计更加专业。
5. The design inspiration
The Design Inspiration 是一群整日寻求设计灵感的设计师所创建的。
设计工具
6. Colour lovers
Colour lover 是一个国际性的设计师社区，不同行当的艺术家到此寻找色彩方面的灵感，想法并对这些专业的或个人项目发表发聩。
7. Adobe kuler
Adobe kuler 是奥多比公司推出的web程序，旨在帮助你创建和分享颜色主题。
8. Color hunter
Color Hunter 可以通过图片来创建配色。
9. Colorotate
通过Colorotate，可以实现以3D的视觉效果的方面来迎合人脑的颜色处理过程。
10. Stripemania
Stripemania 是一个用于生成纹理的在线web2.0工具。纹理大小、缝隙都可以调节，还可以选择色彩过渡效果。
