TechGuru

photoshop设计一个商业网站

Posted in photoshop on 12/22/2009 10:38 下午 by tunpishuang

原文： Create a webdesign company layout in Photoshop
作者：Jean-Baptiste Jung

Tags: photoshop company web, Photoshop 商业网站, web, web设计
Add Comment » No Comments

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

然后是我写了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。有个难点就是：在线远程视频培训这块，还有美工的问题，我找了很多同学，同学的同学，都没有牛逼一点的网站美工。唉，看来这笔业务不好接。

Tags: javascript indexof, javascript options, javascript select, web设计
Add Comment » No Comments

将小型、现代的产品主页由psd转换成XHTML/CSS模板

Posted in css, html, photoshop on 11/20/2009 12:20 上午 by tunpishuang

Minimal and Modern Layout: PSD to XHTML/CSS Conversion

原文地址：http://sixrevisions.com/tutorials/web-development-tutorials/minimal-and-modern-layout-psd-to-xhtmlcss-conversion

本教程将会指导你将一个photoshop网页设计转换为可以使用的HTML/CSS模板。这是web设计和代码转换系列教程的第二部分。

第一部分: 用Photoshop设计一个小型、现代的产品主页
第二部分: 将小型、现代的产品主页由psd转换成XHTML/CSS模板

demo

点击下面的图片将会看到本次制作的 demo 的效果。

开始之前

如果你还没有准备好，我们建议您阅读完这个教程系列的第一部分: 用Photoshop设计一个小型、现代的产品主页，因

为第二部分需要第一部分做好了的psd文件。

如果你想跳过第一部分，你可以直接在第一部分中下载源文件，下面将会需要它才能继续。

创建文件结构，准备文件

1 在桌面上创建新的空目录，取名portfolio。

2 在portfolio目录下面继续创建images目录用于存放图片。

3 接下来创建两个空文件 styles.css和index.html

Creating the file structure and preparing the files

4 用你最喜欢的文本编辑器打开index.html，我将在本教程中使用Adobe Dreamweaver。

5 在文档的<head>标签加入对styles.css的链接。可以使用如下代码：

代码段1

<link href="styles.css" rel="stylesheet" type="text/css" />

Creating the file structure and preparing the files

页面分区

以下是我们网页模板的基本结构。我们从创建基本分区来开始我们的模板转换工作。

Coding the layout sections

6 我们将从在浏览器中居中、包含整个文档的主容器开始（也被称之为外壳（wrapper））。在容器内部内的5个div将组成一个完整的页面：这些div是：#top,

#welcome, #sidebar, #content 和 #footer。 Read the rest of this entry »

Tags: psd, psd转换为html, slice, web设计
Add Comment » No Comments

用Photoshop设计一个小型、现代的产品主页

Posted in photoshop on 11/17/2009 12:19 上午 by tunpishuang

Design a Minimal and Modern Portfolio Layout with Photoshop

这个Photoshop web设计的教程中，我们将学习设计一个整洁的具有现代气息的web站点。这是设计和HTML/CSS模板转换系列教程的第一部分。

第一部分: 用Photoshop设计一个小型、现代的产品主页
第二部分: 将小型、现代的产品主页由psd转换成XHTML/CSS模板

预览

以下是我们将要一些设计的页面预览，点击图片可以放大。

Read the rest of this entry »

Tags: photoshop, psd, web设计
Add Comment » 1 Comment

使用960网格系统设计一个网页模板

Posted in photoshop on 11/08/2009 11:51 下午 by tunpishuang

原文：http://photoshoptutorials.ws/photoshop-tutorials/layouts/design-a-web-template-using-the-960-grid-system/all-pages.html

作者：Ross Aitken

翻译：tunpishuang

在photoshop中学习制作基于960网格系统的网页模板，你将会学到图层效果和定位元素相关知识。

最终效果预览

Read the rest of this entry »

Tags: 960 grid system, clean template, web设计
Add Comment » No Comments

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设计师应该经常会使用到的工具。如果你需要一些灵感，你可以访问最流行的设计展示站点来寻找你需要的好作品和好例子。一些设计相关的工具，在线生成器，免费字体站点，模板站点都将帮助你更有效率测试和管理站点。记住，并不是什么都亲自完成才是最好的方式，一定程度的借鉴将会让你以更轻松的方式完成任务。

我强烈建立你泛读本文，把对你有帮助的站点加入书签，当你灰心的时候，不妨看看。