package com.newpalm.unicomfetch.threads;

import java.util.Vector;

import org.apache.commons.httpclient.Cookie;

import org.apache.commons.httpclient.HttpClient;

import org.apache.commons.httpclient.NameValuePair;

import org.apache.commons.httpclient.cookie.CookiePolicy;

import org.apache.commons.httpclient.cookie.CookieSpec;

import org.apache.commons.httpclient.methods.GetMethod;

import org.apache.commons.httpclient.methods.PostMethod;

import org.htmlparser.Node;

import org.htmlparser.Parser;

import org.htmlparser.tags.TableColumn;

import org.htmlparser.tags.TableRow;

import org.htmlparser.tags.TableTag;

import org.htmlparser.visitors.ObjectFindingVisitor;

/**

* 用来演示登录表单的示例

* @author Liudong

*/

public class FormLoginDemo {

 

public static void main(String[] args) throws Exception{

Parser parser = null;

ObjectFindingVisitor visitor = null;

HttpClient client = new HttpClient();

 

//模拟登录页面

PostMethod post = new PostMethod("<a href="http://211.90.119.58:9999/SPLogin.aspx"><span style="color: #78ba00;">http://211.90.119.58:9999/SPLogin.aspx</span></a>");

NameValuePair name = new NameValuePair("txtHandsetNumber", "123456");

NameValuePair pass = new NameValuePair("txtPassword", "123456");

NameValuePair __VIEWSTATE = new NameValuePair("__VIEWSTATE",  "dDwtMTUxMzkxNTQ0Mzt0PDtsPGk8MT47PjtsPHQ8O2w8aTwxPjs+O2w8dDxwPGw8VGV4dDs+O2w8XDxtYXJxdWVlIERpcmVjdGlvbj0idXAiIGJlaGF2aW9yPSJzY3JvbGwiICBoZWlnaHQ9JzE1MCcgc2Nyb2xsZGVsYXk9MzAwIG9ubW91c2VvdmVyPSd0aGlzLnN0b3AoKScgb25tb3VzZW91dD0ndGhpcy5zdGFydCgpJ1w+XDxpbWcgc3JjPSJpbWFnZS9kZWZhdWx0X2NhbGxfaWNvbi5naWYiIHdpZHRoPSI0IiBoZWlnaHQ9IjciXD4mbmJzcFw7Jm5ic3BcO1w8YSBocmVmID0iIyIgb25jbGljaz0ib3BlbldpbmRvdygnL0J1bGxldGluLmFzcHg/QnVsbGV0aW5JZD0yMycpIlw+c3DkuJrliqHmjqXlhaXms6jmhI/kuovpoblcPC9hXD4KXDxiclw+XDxiclw+XDwvbWFycXVlZVw+Oz4+Ozs+Oz4+Oz4+O2w8YnRuTG9naW47Pj4pKEgdIvj1JmRdgJaS7sGzD39jZg==");

NameValuePair btnLoginx = new NameValuePair("btnLogin.x", "0");

NameValuePair btnLoginy = new NameValuePair("btnLogin.y", "5");

post.setRequestBody(new NameValuePair[]{name,pass,__VIEWSTATE,btnLoginx,btnLoginy});

int status = client.executeMethod(post);

 

post.releaseConnection();

//查看cookie信息

CookieSpec cookiespec = CookiePolicy.getDefaultSpec();

Cookie[] cookies = client.getState().getCookies();

if (cookies.length == 0) {

System.out.println("None");

} else {

for (int i = 0; i &lt; cookies.length; i++) {

System.out.println(cookies[i].toString());

}

}

 

//访问所需的页面

GetMethod get = new GetMethod("<a href="http://211.90.119.58:9999/PhoneSearch/PhoneSearch.aspx"><span style="color: #78ba00;">http://211.90.119.58:9999/PhoneSearch/PhoneSearch.aspx</span></a>");

client.executeMethod(get);

visitor = new ObjectFindingVisitor(TableTag.class);

parser = new Parser();

parser.setInputHTML(get.getResponseBodyAsString());

parser.setEncoding("GBK");

parser.visitAllNodesWith(visitor);

 

//取得要解析的页面数

Node[] tables = visitor.getTags();

TableTag tableTag = (TableTag) tables[tables.length-1];

TableRow[] rows = tableTag.getRows();

TableRow row = rows[0];

TableColumn[] col = row.getColumns();

int pageNumber = Integer.parseInt(col[0].getChildrenHTML().substring(25, 29));

get.releaseConnection();

 

for(int i=1;i&lt;pageNumber;i++){

PostMethod pt = new PostMethod("<a href="http://211.90.119.58:9999/PhoneSearch/PhoneSearch.aspx"><span style="color: #78ba00;">http://211.90.119.58:9999/PhoneSearch/PhoneSearch.aspx</span></a>");

NameValuePair txtPage = new NameValuePair("txtPage",Integer.toString(i));

__VIEWSTATE = new NameValuePair("__VIEWSTATE", "")

NameValuePair __EVENTTARGET = new NameValuePair("__EVENTTARGET", "");

NameValuePair __EVENTARGUMENT = new NameValuePair("__EVENTARGUMENT", "");

NameValuePair TBMDN = new NameValuePair("TBMDN", "");

NameValuePair TBServiceType = new NameValuePair("TBServiceType", "");

NameValuePair TBStartTime = new NameValuePair("TBStartTime", "");

NameValuePair TBEndTime = new NameValuePair("TBEndTime", "");

NameValuePair btnGotox = new NameValuePair("btnGoto.x", "26");

NameValuePair btnGotoy = new NameValuePair("btnGoto.y", "13");

pt.setRequestBody(new  NameValuePair[]{__EVENTTARGET,__EVENTARGUMENT,__VIEWSTATE,TBMDN,TBServiceType,TBStartTime,TBEndTime,txtPage,btnGotox,btnGotoy});

int a = client.executeMethod(pt);

 

 

parser.setInputHTML(pt.getResponseBodyAsString());

parser.setEncoding("GBK");

parser.visitAllNodesWith(visitor);

 

tables = visitor.getTags();

tableTag = (TableTag) tables[tables.length-3];

 

rows = tableTag.getRows();

row = rows[1];

col = row.getColumns();

System.out.println(col[4].getChildrenHTML().toString());

get.releaseConnection();

}

 

}

}

使用HttpClient过程中常见的一些问题

下面介绍在使用HttpClient过程中常见的一些问题。

字符编码

某目标页的编码可能出现在两个地方，第一个地方是服务器返回的http头中，另外一个地方是得到的html/xml页面中。

• 在http头的Content-Type字段可能会包含字符编码信息。例如可能返回的头会包含这样子的信息：Content-Type: text/html; charset=UTF-8。这个头信息表明该页的编码是UTF-8，但是服务器返回的头信息未必与内容能匹配上。比如对于一些双字节语言国家，可能服务 器返回的编码类型是UTF-8，但真正的内容却不是UTF-8编码的，因此需要在另外的地方去得到页面的编码信息；但是如果服务器返回的编码不是UTF- 8，而是具体的一些编码，比如gb2312等，那服务器返回的可能是正确的编码信息。通过method对象的getResponseCharSet()方 法就可以得到http头中的编码信息。
• 对于象xml或者html这样的文件，允许作者在页面中直接指定编码类型。比如在html中会有<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″/>这样的标签；或者在xml中会有<?xml version=”1.0″ encoding=”gb2312″?>这样的标签，在这些情况下，可能与http头中返回的编码信息冲突，需要用户自己判断到底那种编码类型应该 是真正的编码。

自动转向

根据RFC2616中对自动转向的定义，主要有两种：301和302。301表示永久的移走（Moved Permanently），当返回的是301，则表示请求的资源已经被移到一个固定的新地方，任何向该地址发起请求都会被转到新的地址上。302表示暂时 的转向，比如在服务器端的servlet程序调用了sendRedirect方法，则在客户端就会得到一个302的代码，这时服务器返回的头信息中 location的值就是sendRedirect转向的目标地址。

HttpClient支持自动转向处理，但是象POST和PUT方式这种要求接受后继服务的请求方式，暂时不支持自动转向，因此如果碰到POST方 式提交后返回的是301或者302的话需要自己处理。就像刚才在POSTMethod中举的例子：如果想进入登录BBS后的页面，必须重新发起登录的请 求，请求的地址可以在头字段location中得到。不过需要注意的是，有时候location返回的可能是相对路径，因此需要对location返回的 值做一些处理才可以发起向新地址的请求。

另外除了在头中包含的信息可能使页面发生重定向外，在页面中也有可能会发生页面的重定向。引起页面自动转发的标签是：<meta http-equiv=”refresh” content=”5; url=http://www.ibm.com/us”>。如果你想在程序中也处理这种情况的话得自己分析页面来实现转向。需要注意的是，在上面那 个标签中url的值也可以是一个相对地址，如果是这样的话，需要对它做一些处理后才可以转发。

处理HTTPS协议

HttpClient提供了对SSL的支持，在使用SSL之前必须安装JSSE。在Sun提供的1.4以后的版本中，JSSE已经集成到JDK中， 如果你使用的是JDK1.4以前的版本则必须安装JSSE。JSSE不同的厂家有不同的实现。下面介绍怎么使用HttpClient来打开Https连 接。这里有两种方法可以打开https连接，第一种就是得到服务器颁发的证书，然后导入到本地的keystore中；另外一种办法就是通过扩展 HttpClient的类来实现自动接受证书。

方法1，取得证书，并导入本地的keystore：

• 安装JSSE （如果你使用的JDK版本是1.4或者1.4以上就可以跳过这一步）。本文以IBM的JSSE为例子说明。先到IBM网站上下载JSSE的安装包。然后解 压开之后将ibmjsse.jar包拷贝到<java-home>"lib"ext"目录下。
• 取得并且导入证书。证书可以通过IE来获得：1． 用IE打开需要连接的https网址，会弹出如下对话框：
  
  

  2． 单击”View Certificate”，在弹出的对话框中选择”Details”，然后再单击”Copy to File”，根据提供的向导生成待访问网页的证书文件
  
  

  3． 向导第一步，欢迎界面，直接单击”Next”，
  
  

  4． 向导第二步，选择导出的文件格式，默认，单击”Next”，
  
  

  5． 向导第三步，输入导出的文件名，输入后，单击”Next”，
  
  

  6． 向导第四步，单击”Finish”，完成向导
  
  

  7． 最后弹出一个对话框，显示导出成功
  
  

• 用keytool工具把刚才导出的证书倒入本地keystore。Keytool命令在<java-home>"bin"下，打开命令行窗口，并到<java-home>"lib"security"目录下，运行下面的命令：
  

  keytool -import -noprompt -keystore cacerts -storepass changeit -alias yourEntry1 -file your.cer

  其中参数alias后跟的值是当前证书在keystore中的唯一标识符，但是大小写不区分；参数file后跟的是刚才通过IE导出的证书所在的路径和文件名；如果你想删除刚才导入到keystore的证书，可以用命令：

  keytool -delete -keystore cacerts -storepass changeit -alias yourEntry1

• 写程序访问https地址。如果想测试是否能连上https，只需要稍改一下GetSample例子，把请求的目标变成一个https地址。
  

  GetMethod getMethod = new GetMethod("https://www.yourdomain.com");

  运行该程序可能出现的问题：

  1. 抛出异常java.net.SocketException: Algorithm SSL not available。出现这个异常可能是因为没有加JSSEProvider，如果用的是IBM的JSSE Provider，在程序中加入这样的一行：

  if(Security.getProvider("com.ibm.jsse.IBMJSSEProvider") == null) Security.addProvider(new IBMJSSEProvider());

  或者也可以打开<java-home>"lib"security"java.security，在行

  security.provider.1=sun.security.provider.Sun security.provider.2=com.ibm.crypto.provider.IBMJCE

  后面加入security.provider.3=com.ibm.jsse.IBMJSSEProvider

  2. 抛出异常java.net.SocketException: SSL implementation not available。出现这个异常可能是你没有把ibmjsse.jar拷贝到<java-home>"lib"ext"目录下。

  3. 抛出异常javax.net.ssl.SSLHandshakeException: unknown certificate。出现这个异常表明你的JSSE应该已经安装正确，但是可能因为你没有把证书导入到当前运行JRE的keystore中，请按照前 面介绍的步骤来导入你的证书。

方法２，扩展HttpClient类实现自动接受证书

因为这种方法自动接收所有证书，因此存在一定的安全问题，所以在使用这种方法前请仔细考虑您的系统的安全需求。具体的步骤如下：

• 提供一个自定义的socket factory（test.MySecureProtocolSocketFactory）。这个自定义的类必须实现接口 org.apache.commons.httpclient.protocol.SecureProtocolSocketFactory，在实现接口 的类中调用自定义的X509TrustManager(test.MyX509TrustManager)，这两个类可以在随本文带的附件中得到
• 创建一个org.apache.commons.httpclient.protocol.Protocol的实例，指定协议名称和默认的端口号
  

  Protocol myhttps = new Protocol("https", new MySecureProtocolSocketFactory (), 443);

• 注册刚才创建的https协议对象
  

  Protocol.registerProtocol("https ", myhttps);

• 然后按照普通编程方式打开https的目标地址，代码请参见test.NoCertificationHttpsGetSample

处理代理服务器

HttpClient中使用代理服务器非常简单，调用HttpClient中setProxy方法就可以，方法的第一个参数是代理服务器地址，第二个参数是端口号。另外HttpClient也支持SOCKS代理。

字体

- 60 套公司用设计字体 [Smashing Magazine]

- 20 套免费手写字体与资源 [Fuel Your Creativity]

- 50 套专业Web设计与印刷用字体 [Noupe]

- 15 套漂亮的高质量免费字体 [Smashing Magazine]

- 21 套来自 DeviantArt 的艺术字体 [Designflavr]

- 设计专业人士使用的7套最佳字体 [Just Creative design]

- 45 套符合现代设计趋势的免费漂亮字体 [Six Revisions]

css

- 50 个强大的 CSS 实用工具 [Smashing Magazine]

- 30 套 CSS 小炒资料 [All Web design Resources]

- CSS 编辑器评测 [Smashing Magazine]

- CSS 高手的 10 个原则 [NETTUTS]

- 2008 最佳 CSS 设计（中文） [Web Designer Wall]

- 40 个 CSS 生成器 [All Web design Resources]

- 重置你的CSS [Six Revisions]

- 实现干净代码的12条定律（中文） [Smashing Magazine]

Logo 设计

- 81 个最佳 Logo 设计资源 [Logo design Love]

- 最佳Logo设计资源 [Just Creative design]

- 105 个Logo设计资源 [Elite By design]

- 35 个令人目眩的黑白 Logo [Siah design]

- 50 套能够带来启发的 Logo [Fuel Your Creativity]

- 2008 年 33 个不俗的 Logo 重设计 [Smashing Apps]

- 30 个精彩的矢量 Logo 设计 [VECTORTUTS]

- 10 个成功的 Logo 设计 [Logo design Love]

图标

- 2008年50套最漂亮的图标 [Noupe]

- 40 套漂亮的免费图标 [Six Revisions]

- 22 套全新高品质免费图标 [Elite By design]

- 40 套超漂亮的图标 [Noupe]

设计启发

- 50 个漂亮的博客设计 [Smashing Magazine]

- 40 个有创意的按钮 [PSDTUTS]

- 60 个非常 Cool 非常有创意的 404 页面 [Hongkiat]

- 30 个漂亮的 Web 设计例子 [Six Revisions]

- 2008年40个具有启发性的 Web 设计 [CrazyLeaf design Blog]

- 50 个漂亮的导航菜单 [Vandelay Website design]

- Web 设计中的57个矢量字符 [CSSLeak]

- 50 个漂亮的，有创意的展示类站点设计 [Smashing Magazine]

- 40 个漂亮的暗色系 CSS 设计 [Toxel]

- 40 个漂亮的手画 Web 设计 [CSSBuilt]

- 79 个精彩的专辑封面 [Inspiredology]

- 40 套有创意的名片设计 [Toxel]

- 纹理与图样设计展示 [Smashing Magazine]

- 54 幅令人灵魂出窍的数字画 [PSDTUTS]

- 50 个出色的博客页脚设计 [Hongkiat]

- 24 个漂亮的，有创意的网站 Header 设计 [Toxel]

- 富有灵感的 PDF 杂志设计 [Smashing Magazine]

教程

- 41 个最好的 Photoshop 效果教程 [Hongkiat]

- 30 个漂亮的 Photoshop 文字效果教程 [Six Revisions]

- 70 个 Photoshop 美容教程 [Smashing Magazine]

- 50 个很棒的 Photoshop 教程 [PSDTUTS]

- 30 个 Fireworks 教程 [Arbent]

- Adobe Fireworks 教程与下载 [Smashing Magazine]

- 40 个 Wacom 数字画板教程 [DesignM.ag]

- 50 个出色的 AJAX 教程 [Smashing Magazine]

- 50 个富有创意的 Photoshop 文字效果教程 [PSDTUTS]

- 23 个不可思议的 Photoshop 教程 [Elite By design]

- Adobe Illustrator 教程 [Smashing Magazine]

Photoshop 资源下载

- Photoshop Custom Shapes 集 [Smashing Magazine]

- 20 个 Photoshop 印刷作品与画笔资源 [PSDTUTS]

- 75 个超高分辨率 Photoshop 画笔 [Elite By design]

- 50 个不可或缺的 Photoshop 画笔 [Smashing Magazine]

- 200 套 Photoshop 画笔 [You the Designer]

- 50 套免费的 Photoshop Pattern [Emma Alvarez]

- 55 套免费的画笔与矢量图 [Web Resources Depot]

- 40 套 Photoshop 万圣节主题画笔 [PSDFan]

wordpress

- 100 出色的 Wordpress 免费主题 [Smashing Magazine]

- 30 个最实用的 Wordpress 技巧 [Hongkiat]

- 45 套免费的 Wordpress 网格布局主题 [WPZOOM]

- 45 套必须要看到 WordPress 主题 [Noupe]

- 20 套 Wordpress 公司网站主题 [Blogsessive]

- 24 套高质量免费 Wordpress 主题 [Toxel]

- 21 套令人耳目一新的免费Wordpress主题 [Smashing Apps]

- 50 套漂亮的免费 Wordpress 主题 [Six Revisions]

- 10 个寻找免费 Wordpress 主题的地方 [UPrinting]

- 50 个最好的 Wordpress 主题 [CrazyLeaf design Blog]

- 10 个 Wordpress 实用 RSS 技巧 [Smashing Magazine]

- 45 个出色的免费 Wordpress 主题 [DzineBlog]

Glass Video Playback Buttons
via Birofunk

Windows buttons PSD
via Vicing

PSDFox
via Vathanx

Free Button Pack
via Celerayted

Aero Avatar and SIG
via FastNFurious

Win7 Taskbar Buttons .PSD
via Giannisgx89

Customizable Folders
via Bobbyperux

Twitter Icons .PSD
via JuliusX

Customizable Pins Buttons
via Annatreter

Buttons PSD
via El3ment4l

Badge-it Yourself
via Manicho

Stiker PSD
via TLMedia

Nice ‘n’ Simple Subscribe Badges
via PhotoshopStar

6 .PSD Icons Vol. 1
via Wearwolfaa

6 .PSD Icons Vol. 3
via Wearwolfaa

6 .PSD Icons Vol. 4
via Wearwolfaa

Simple objects

Magnifa Pro
via Jean31

NEW skateboard template
via Nunosk8

Stratocaster Classic psd
via LeMex

Battery PSD
via Flahorn

knife party PSD
via TLMedia

Photoshop 3D Cube
via Thedevstudio

Office Resources
via PSDTuts

Sweet Cakes PNG’s
via Funkyfreshfab

Cassette – PSD File
via Manicho

Item Coffee PSD File
via AuroraDesign

Apple PSD
via Flahorn

Electornics

Macbook Air PSD
via Snicket32

Airport Express
via DDrDark

iPad PSD
via Mppagano

PSP psd template
via Jbensch

Macbook PSD
via Obsilion

Iphone 3g PSD HD
via JoelAtlas

Sony Playstation 3 Slim .PSD
via Zandog

Apple iPhone 4G .PSD
via Zandog

free psd apple display
via Djeric

PLASMA TV
via Bobbyperux

Apple remote
via Bobbyperux

Psd ipod touch
via Djeric

RIM Blackberry PSD
via DigitalPhenom

Microsoft ZUNE PSD
via DigitalPhenom

Dell Vostro psd
via DigitalPhenom

The MacBook In Black.
via Kamikaze00X

iPhone PSD file – Updated
via Manicho

Vector iPhone 4
via PSDTuts

PSP psd template
via Jbensch

iPod nano-chromatic – Apple
via Zikkzak

iPad GUI PSD
via AdobeTutorialz

Illustrations

Globe Resource
via SneakyTomato

PSD man
via Xjesx

Breathe psd
via Seizure

Oh, my eyes
via Coreaux

High Res PSD Planets
via Edubz02

Live forever. – PSD
via Melzinhabc

Space Light PSD
via Jferguson757

Lord Pram .PSD file
via Icetrix

Books and Lily
via Fordesigner

The eagle under sunset
via Fordesigner

Box-, CD & DVD Case Templates

DVD Case+Art – PSD file
via Manicho

DVD Plastic Case – PSD file
via Manicho

FREE Product Box PSD
via DigitalPhenom

DVD Label – PSD Template
via 2N2

DVD Case Inlay – PSD Template
via 2N2

Plastic DVD Case
via Dezignus

Notebook templates

Old Paper PSD
via TLMedia

Old Book
via Villa-arts

Old Paper Art
via Villa-arts

Old Book
via Allicaleb

My Moleskine
via Dennern

Notebook psd
via TLMedia

PSD book
via TLMedia

Various design templates

CARD TEMPLATES.
via San29

Free Film Frame
via Bobbyperux

Business Website Template no.1
via PAULW

Cardboard Business Card
via PSHero

Business Card template 1
via An1ken

PSD- layouts
via Tomer666

Old photo paper image set
via Libelinha77

So how can you make sure your design is better than the designs of your competitors? How can you point employer’s attention to your product? Here we might be able to help you by showcasing following list of best resources available on web in the month of August.

Design Showcase, Feature Collection

Photography, Digital Showcase and Art inspiration

Freebies Resources (Themes, Wallpapers, PSDs, Icons, Vectors, Fonts etc.)

Tutorials, Tips, Tricks & Hacks Resources

CSS, xHTML, Javascript, Ajax and Design Resources

Appz, Tools and Development Resources

Freelancing Resources

Miscellaneous Resources

本文参考了：http://yuxiu601.blog.sohu.com/18296223.html

经常在一些网站上看到qq客服的功能，一点击就会把相应的qq调出来。

先把相关代码贴出：

   如下：href=tencent://message/?uin=429443535& Site=www.ctoshopping.com&Menu=yes><img
                                                border="0" SRC=http://wpa.qq.com/pa?p=1:429443535:10

 风格一

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:1 alt="点击这里给我发消息"></a>

风格二

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:2 alt="点击这里给我发消息"></a>

风格三

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:3 alt="点击这里给我发消息"></a>

风格四

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:4 alt="点击这里给我发消息"></a>

风格五

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:5 alt="点击这里给我发消息"></a>

风格六

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:6 alt="点击这里给我发消息"></a>

风格七

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:7 alt="点击这里给我发消息"></a>

风格八

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:8 alt="点击这里给我发消息"></a>

风格九

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:9 alt="点击这里给我发消息"></a>

风格十

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:10 alt="点击这里给我发消息"></a>

风格十一

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:11 alt="点击这里给我发消息"></a>

风格十二

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:12 alt="点击这里给我发消息"></a>

风格十三

<a target=blank href=tencent://message/?uin=你的QQ号码&Site=你的博客地址&Menu=yes>< img border="0" SRC=http://wpa.qq.com/pa?p=1:你的QQ号码:13 alt="点击这里给我发消息"></a>

如果向您的服务器发出了某项请求要求显示您网站上的某个网页（例如，当用户通过浏览器访问您的网页或在 Googlebot 抓取该网页时），那么，您的服务器会返回 HTTP 状态代码以响应该请求。

此状态代码提供了有关请求状态的信息，且为 Googlebot 提供了有关您网站和请求的网页的信息。

一些常见的状态代码为：

• 200 - 服务器成功返回网页
• 404 - 请求的网页不存在
• 503 - 服务器暂时不可用

以下提供了 HTTP 状态代码的完整列表。点击链接可了解详细信息。您也可以访问有关 HTTP 状态代码的 W3C 页来了解详细信息。

1xx（临时响应）
用于表示临时响应并需要请求者执行操作才能继续的状态代码。

2xx（成功）

用于表示服务器已成功处理了请求的状态代码。

3xx（已重定向）
要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。Google 建议您在每次请求时使用的重定向要少于 5 个。您可以使用网站管理员工具来查看 Googlebot 在抓取您已重定向的网页时是否会遇到问题。诊断下的抓取错误页中列出了 Googlebot 由于重定向错误而无法抓取的网址。

4xx（请求错误）
这些状态代码表示，请求可能出错，已妨碍了服务器对请求的处理。

5xx（服务器错误）
这些状态代码表示，服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

对于各种优化途径，如果一定要我给一个分类的话，我会用颜色来区分。对于那些在各种页面中都适用而且无害的方法，我将它们归为绿色。相对而言，只有在某些具体的情况下才适用 或者有违标准的方法归为橙色。

绿色方法

1. 使用相对URL

对于页面中的各种URL，例如链接、外链CSS的href、外链Javascript的src、图片src、iframe src等，如果能够确定它们与当前页面是处于同一域名下的话，则可以使用相对URL，这样每一个URL都能够节省至少一个域名的长度。

2. 删除HTTP或HTTPS

绝对URL都以HTTP或HTTPS等协议头开始，如果能确定URL的协议与当前页面URL的协议是一致的，或者说该URL在多种协议下均是可用 的，则可以考虑删除这个协议头。这样做虽然有些非主流，但事实证明是可行的，而且也有理论依据(见http://www.ietf.org/rfc/rfc2396.txt 第5.2节描述)。Nexus One的这个页面中有些资源URL就删除了协议头，虽然并不是出于节省资源的目的，但至少证明删除协议头是可行的。

对于CSS，如果删除协议头在IE7、IE8下会造成CSS下载两次，这个是需要注意的问题。

3. 删除注释

与CSS、Javascript一样，也可以通过删除HTML中的注释来实现优化。然而，这一点对于HTML来说却要复杂一些，因为在HTML中存 在某些特殊作用的注释是不能删除的。

(a). IE条件注释

<!--[if expression]> HTML <![endif]—>

诸如这样的语法，只有符合expression的浏览器才能识别其中的内容。

(b). CDATA注释

/*  */

CDATA本身是XHTML中才需要的，在CDATA中的内容不需要对特殊字符进行转义，不过为了兼容老版本的浏览器，需要加上注释，以免出错。不 过，对于这个注释，如果你的页面并没有真正的使用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的声明DTD就可以办到的，除此之外还需 要服务器能够派application/xhtml+xml这样的内容格式，另外还需要浏览器支持，目前IE并不支持XHTML格式。因此，目前你的页面 可能是按照XHTML规范来写的，也能通过HTML验证，但想要兼容IE则一定还是以HTML方式来展示的。这样一来，很多为了遵循标准而增加的内容则可 以删除，具体的在后文的橙色部分详述。

(c). 自定义注释

产品中自定义的一些具有特定功能的注释，例如统计。

4. 压缩空白符

在HTML中的大多数标签中，多个空白符都会被压缩成一个来显示，于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的 空白符都可以这样做，例如pre、textarea中的空白符是按原样显示的，标签属性中的属性值也是按原样显示的，例如title、value等。

5. 压缩inline css & Javascript

不管inline还是external，都需要压缩，这是减小体积的最直接的方式。

6. CSS&Javascript尽量外链

外链CSS和Javascript，不仅仅是减小HTML本身的体积，而且还可以充分利用浏览器的缓存机制，所以当CSS、Javascript的 代码量超过一定体积时，尽量外链。除此之外，尽量避免在页面中使用onmouseover=”xxxx”的 方式来注册事件，既不利于维护也容易产生不必要的冗余代码。

7. 删除元素默认属性

在HTML规范中， 很多HTML元素的属性是有默认值的，对于这些默认值可以抹去不写，下面是不完全统计。

橙色方法

橙色方法是指那些有违标准，或者会导致页面出现无法预料的问题的一类方法，算是一类非常规的方法，因此也仅仅适用于一些非常规的页面，例如搜索引擎 首页。

1. 删除或替换

DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面， 除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百 度、Google都是这么做的。

2. 删除标签属性值的引号

引号不是必须的，删之。此处也需要考虑一些特殊情况，例如属性值中包含引号等。

（提醒：不符合XHTML规范）

3. 省略某些属性值

例如disabled、checked、multiple等的值都可以省略。

（提醒：不符合XHTML规范）

4. 删除可选的闭合标签

例如body、p、tr等标签是允许没有闭合标签的，具体的参考此处。

（提醒：不符合XHTML规范）

5. 删除自动闭合标签的”/”

（提醒：不符合XHTML规范）

工具

HTML优化工具目前比较理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML压缩功能，不过目前只有四个简单的策略，尚处于实验性阶段。随着大家对前端性能越来越高的关注度，HTML优化及压缩方面也一定会有所 发展的。

总结

1. HTML优化及压缩的发展滞后于前端其他资源，不过目前也已经引起大家越来越多的关注。

2. 绿色规则中的很多都是在写码过程中就可以注意和遵循的，如果能把这个优化融入到编码中，效果应该更好。

3. 橙色规则由于违背某些规范，只适用于某些特定的页面，使用时务必谨慎。

参考资料

HTML minify – to be or not to be?

Optimizing HTML

Optimizing Optimizing HTML

1. Google Chrome Developer Tools

这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar 的一个扩展，用于调试你的网页，包含一个 DOM 探测器，一个 JavaScript 调试台，可以设置执行断点和跟踪，一个类似 YSlow 的执行分析器。

2. Webmaster Tools

一个对网站拥有者来说非常有用的程序，可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序，发现搜索引擎爬虫遇到的错误，可以发现你的 HTML 代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页，并发现你站点中的错误链接。

3. Google Web Toolkit

Google Web Tootlkit （GWT）是一个 Web 开发基础框架，为开发者提供了一些基础类库，GWT 同 Google 的其它产品，如 AdWords，FeedBurner，Google Ajax 类库等紧密集成，这里有一个 Google Docs 教程。

4. Google Code Search

帮助开发者搜索代码，支持正则表达式搜索，或在一个高级搜索界面中， 很直观地搜索那些可能会让你事半功倍的公共代码。

5. Page Speed

Google 现在已经将网站加载速 度算到搜索排名算法中，Page Speed 可以帮助你分析你的网站性能，基于 Google Web 性能最佳实践。

6. Browser Size

该工具帮你分析，你的网页在不同浏览器，不同浏览尺寸下的显示状况，非常适合看看自己的网页在不滚动的情况下，在各种浏览尺寸下显示到哪里。

7. Google Ajax Libraries API

Google Ajax Libraries API 包含多种流行的 JavaScript 库（目前有10种），并可以从 Google 高性能的 CDN 网络中加载，既节省了你的服务器带宽，同时，由于用户可能已经在别的网站加载过这个库，因此可以显著加快这些库的加载速度。

8. Google Website Optimizer

接着这个工具，你可以对自己的网站进行 A/B 测试，并对网站进行优化。

9. Sites

顾名思义，Google Sites 可以帮你创建一个托管的网站，可以将包括 YouTube，幻灯，Gmail 日历，Google Gear 小程序，Google Docs 一类的应用集成其中。如果将站点设置为不公开，你可以将这个工具用于个人文档工具。

10. Speed Tracer

以可视化方式，帮你分析你的 Web 程序中各种元素的加载或运行速度与实践，这 里有一些关于这个工具的用例。

11. Project Hosting

这是 Google Code 项目的一部分，可以帮你托 管你的开源项目，Web 开发与设计者还可以在这里找到大量现成的项目以供借鉴或套用。

12. Google App Engine

这是一个可用来托管自己的 Web 程序的地方，甚至可以使用自己的域名。这里有一个教程，讲解如何使用 Google App Engine 来创建一个留言本。Google App Engine 中已经托管了大量的 Web 程序。

13. Google Chart Tools

Google Chart Tools 可以帮助你将数据转化为图表，并嵌入自己的网页，这些图表还拥有交互功能，可以钻入，或通过鼠标盘旋获取详细信息，还可以实现动画图表。

14. Closure Tools

Closure Tools 是 Google Labs 的一个开发套件，包含3个工具，闭包编译器（一个 JavaScript 优化器），闭包函数库（用于 Ajax 程序开发）以及一个用于动态生成 HTML 的闭包模板。

15. Google Analytics

经典的 Google 流量分析统计工具。

本文国际来源：Six Revisions The Top 15 Google Products for People Who Build Websites (原文作者 Jacob Gube)

版权声明：（作者赵鹏 zhaopeng.net，所在论坛 blueidea.com）此教程允许任意转载，允许用于商业印刷，不需经过作者同意，不需支付任何费用。但必须保证教程的 完整性，同时注明本版权声明全部内容。

如果是从头学习Photoshop，推荐大家查看他的另一巨著 photoshop 大师之路

首先来简要介绍一下钢笔工具和路径的概念

1. 钢笔工具属于矢量绘图工具，其优点是可以勾画平滑的曲线，在缩放或者变形之后仍能保持平滑效果
2. 钢笔工具画出来的矢量图形称为路径，路径是矢量的路径允许是不封闭的开放状，如果把起点与终点重合绘制就可以得到封闭的路?

现在我们来绘制一个简单的路径
如下图在工具栏选择钢笔工具（快捷键P）

并保持钢笔工具的选项如图所示（在工具栏上方）：选择第二种绘图方式（单纯路径），并取消橡皮带功能

然后用钢笔在画面中单击，会看到在击打的点之间有线段相连
保持按住Shift键可以让所绘制的点与上一个点保持45度整数倍夹角（比如零度、90度）
这样可以绘制水平或者是垂直的线段（图中从第5个点开始按下了Shift键）

从上面的简单练习中我们得出两个规律：

1. 我们并没有直接绘制线段，而是定义了各个点的位置，软件则在点间连线成型
2. 控制线段形态（方向、距离）的，并不是线段本身，而是线段中的各个点的位置

记住两个术语：

1. 那些点称为“锚点”(anchor)
2. 锚点间的线段称为“片断”(segment)

刚才我们绘制的那些锚点，由于它们之间的线段都是直线，所以又称为直线型锚点。

现在我们来绘制曲线形锚点

我们看到，在绘制出第二个及之后的锚点并拖动方向线时，曲线的形态也随之改变

究竟曲线是怎样生成的，我们又该如何来控制曲线的形态呢？
除了具有直线的方向和距离外，曲线多了一个弯曲度的形态，
方向和距离只要改变锚点位置就可以做到，但是弯曲度该如何控制？

如图在工具栏选择“直接选择工具”，注意是下方那个空心的箭头

假设我们刚才绘制的4个锚点分别是ABCD
用“直接选择工具”去点取位于AB之间的片断
会看到刚才我们绘制AB锚点时候定义的方向线

仔细看一下这两个方向线
再这样想象：
一个人要从A点到B点，在A点出发的时候，位于A点的其他人看到他是朝着上偏右的方向走的
而位于B点的人，看到他是朝着下偏右的方向来的
那么综合两地的观测结果。就可以得出这个人行走的路线：必定是一个类似锅盖的上弧形

现在我们选择如图的“转换点工具”，该工具用来修改方向线

然后如下图所示般改变AB锚点上的方向线，将会看到曲线弯曲度的改变
注意方向线末端有一个小圆点，这个圆点称为“手柄”，要点击手柄位置才可以改变方向线

结合刚才所作的比喻，就不难理解了：

1. 修改B锚点方向线为下，相当于指定那个人从A点上方出发后，从B点下方进入，那么所走的路程就是一个S形
2. 再修改A锚点方向线为下，相当于从A点下方出发，再从B点下方进入，所走的就是一个下弧形的路程

修改后的方向线如下图：

明白了方向线的方向对曲线形态的影响后，我们来看一下方向线长短造成的影响
如下图般，在同一方向上拖拉方向线：（可使用“直接选择工具”）

对于一个锚点而言，如果方向线越长，那么曲线在这个方向上走的路程就越长，反之就越短
可以这样设想，曲线是一个橡皮筋，在头尾两端有两个力在各自的方向上拉
哪个方向上力气大，则橡皮筋就朝向这个方向多靠拢一些。反而反之

除了修改锚点之外，也可以利用“直接选择工具”，在片断上修改曲线的形态
如下图：

注意：这并不能说是“修改了片断”，而应该说是“同时修改了两个锚点”
牢记原则：片断是由锚点组成的，只有修改锚点才能改变片断形态，这是不可逆的因果关系

做一下小结：
对于这条曲线上的除了起点和终点的BC两个锚点而言，都存在两条方向线：
一条是从上一个锚点“来向”的方向线；另一条是通往下一个锚点的“去向”的方向线
对于起点，只存在“去向”的方向线；对于终点，只存在“来向”的方向线

下面让我们做个小练习，如图：

现在要求在两个红点之间绘制一条紧贴鼠标外廓的曲线
很可能你们绘制出来的是如下图这个样子的

虽然要求是达到了，但是这样的路径上使用了4个锚点

再看下图：

同样的曲线效果，这里只用了两个锚点来绘制
移动两个红点的位置再行绘制，很可能你们绘制的效果是这样

而实际上呢，也只需要用两个锚点就可以绘制这条曲线了，如下图

再换个位置绘制一条，也只需要两个锚点，如下图：

记住一个原则：绘制曲线的锚点数量越少越好
因为如果锚点数量增加，不仅会增加绘制的步骤，同时也不利于后期的修改

到这里，大家一定会产生两个问题：

1. 两个锚点似乎可以包揽全部曲线形态了？
   这个观点显然是错误的，例如我们前面首个实例所绘制的曲线，就需要两个以上的锚点
2. 那么，如何让所用的锚点数量最少？
   实际上这里还隐含着另外一个问题：究竟在哪里定锚点才是最佳的？

下面是我个人总结出来的规律：
两个锚点之间的曲线形态分为两类：C形和S形
C形的几种形态如下图：

它们的方向线如下图：

S形曲线的几种形态如下图：

S形的方向线如下图：

下面的动画演示了在调整方向线的时候，从C形到S形之间的分界点

在了解（并且理解）C、S这两种曲线的形态以后
大家在绘制之前就可以分析出究竟需要多少个锚点
其实就是分析出，有多少个可以用一条曲线（C形或S形）来绘制的区域

虽然锚点的数量可以反映出绘图人的水平和熟练度
但是对于大多数人而言，只要能够满足需要就足够了
所以在实际绘图的时候，不必过于苛求减少锚点的数目

现在来实际绘制一个M形,类似麦当劳的标志
我们将介绍三种过程,请先看清楚文字说明再看动画演示
第一种方法：在完成绘制后，再修改第二个锚点的“去向”的方向线，并可以适当移动锚点位置
（绘制完后按住Ctrl键在路径之外任意位置点击，即可完成绘制）

在其中我们注意到一个现象：
新建立一个曲线锚点并拖动它的方向线的时候
实际上随着鼠标移动的是“去向”这条方向线，而“来向”方向总是与之成180度水平夹角的，并且长度也相同
所以，虽然本来我们应该把第二个锚点的“去向”定为右上方
但是为了“来向”的正确，不得已先将其定在右下方，然后在完成绘制后，再单独修改其“去向”
这种方法可以形容为“丢去保来”（同理，也可以“丢来保去”）
在绘制数量较多的锚点时就显得很不方便，因为总看不到正确的曲线

现在我们介绍第二种绘制过程：
在建立第二个锚点并遵循“来向”定义好方向线之后，再修改“去向”方向线，使曲线可以正确地绘制下去
（绘制完后按住Ctrl键在路径之外任意位置点击，即可完成绘制）

虽然频繁地切换工具有点麻烦，但可以让曲线始终沿着指定的路线绘制
（同理，也可以先遵循“去向”定好方向线，再修改“来向”）

实际上，在定好第二个锚点后，不用到工具栏切换工具
将鼠标移动到方向线手柄上，按住ALT键即可暂时切换到“转换点工具”进行调整；
而按住Ctrl键将暂时切换到“直接选择工具”，可以用来移动锚点位置
松开Alt或Ctrl键即恢复钢笔工具，可继续绘制
要注意的是：
虽然“直接选择工具”也可以修改方向线，但“来向”“去向”有时候（当两者同时显示的时候）会被其一起修改

最后第三种方法，应该是大家今后在绘制中所使用的标准方法：
此法实际就是上面讲到的快捷键的另一种操作方式，也是在不切换工具的条件下，使用快捷键来完成方向线的修改
做到不间断地绘制整条曲线
（绘制完后按住Ctrl键在路径之外任意位置点击，即可完成绘制）

在动画中大家看到一个提示“调整结束后，先松开鼠标再放开ALT键，否则将打乱来向方向线”
如果Alt键先被松开，将会使这个锚点的“来向”和“去向”恢复到长度相等的水平夹角位置
这没有多大关系，再按下ALt键即可再次单独调整

接着我们再来尝试绘制一个心形，如下图
（绘制完后按住Ctrl键在路径之外任意位置点击，即可完成绘制）

注意：如果没有先按住Alt键就连接起点，将无法单独调整方向线，此时再按下Alt键即可单独调整

到这里，大家对路径已经有了大概的认识，下面我们补充一些绘制中的其他问题
半曲线锚点的绘制：
有时候我们需要一个锚点左边是曲线，右边是直线，就需要用这种方法来绘制，如下图：

绘制锚点后，按住Alt键单击一下锚点，那么这个锚点的“去向”就变为了直线
只有“去向”能改变为直线，如果需要“来向”为直线，则需要在上一个锚点操作

即使转换为半曲线锚点了，绘制下一个锚点的时候仍然是可以带有方向线的，如下图：

这样看来似乎很矛盾，为何还有曲线出现？
须记住，假设半曲线锚点A的“去向”为直线，这样对于下一个锚点B而言，B的“来向”也是直线
但是如果锚点B的“去向”为曲线的话，还是会导致AB之间的片断呈曲线形
不过这条曲线永远只能是C形曲线，因为它缺少另外一条方向线的控制
可以用一条形状相类似的正常曲线锚点来比较一下

下图演示了从“半曲线”转换为“正常曲线”锚点的步骤

下图演示了从“正常曲线”转换为“半曲线”锚点的步骤

除了转换锚点类型外，还可以在已有的路径上增加或减少锚点的数量
如下图：

可以看到，在选择了路径的情况下，停留在路径上方的钢笔工具可以自动判断增加或是减少锚点
如果停在片断上方，为增加锚点；如果停在已有锚点上方，则为减去该锚点
注意：增加或是减少锚点可能导致路径形态改变

既然钢笔工具本身就附带了增加和减去的功能，那么为何在工具栏中还有单独的增加锚点和减去锚点工具呢？

这是因为有时候可能需要在锚点密集区增加更多锚点，如果就用钢笔工具的话，则有可能误减已有的锚点

对于一条已经绘制完毕的路径，有时候需要在其上追加锚点（也有可能是在半途意外终止绘制）
首先应将路径显示出来（可从路径面板查找并点击路径）
然后使用钢笔工具在末尾的锚点单击（当移动到末尾锚点的时候光标会有提示）
此时即可继续绘制，见下图：

如果要将多条独立的路径连接在一起，可以如下图操作：
需要注意的是在调整方向线的时候可以按住Alt键单独调整其中一条

还有一个绘制曲线的技巧：
要绘制一条光滑的曲线，就必须保持锚点上“来向”与“去向”的夹角为180度的水平角（方向线长短无关）
注意如果更改了夹角，就有可能形成类似m的形状

现在我们已经学会了用钢笔来勾画任意的路径形状了
但很多时候并不需要完全从无到有的来绘制一条新路径
Photoshop提供了一些基本的路径形状
我们可以在这些基本路径的基础上加以修改形成需要的形状
这样不仅快速，并且效果也比完全和手工绘制的要好

下图是在网页设计中经常用到的图形

先看最上方图形的绘制过程：
在工具栏选择矩形形状工具

使用第一种绘制方式（建立一个用前景色填充的矢量层），如下图

注意样式要关闭，选择一个颜色作为填充色，如下图

然后在图像中绘制一个矩形的形状，如下图

画好之后注意图层面板上新建立一个带路径的色彩填充层
单击下图所示区域可以隐藏或显示路径，双击其前方的色彩块可以更改填充色

注意：

1. 如果要修改这个层中的路径，则路径必须在显示状态
2. 如果路径显示会影响了一些（如描边等）制作时的视觉效果，则应先隐藏路径

由于我们要修改这条路径，所以要先将路径显示
然后使用增加锚点工具增加4个锚点，再将一些锚点向上移动即可
记住：无论在直线还是曲线上增加锚点，所增加默认的都是曲线型锚点
如果需要直线型锚点，则要使用“转换点工具”点击增加出来的锚点

下图的红色区域就是使用这种方法制作出来的

同样是刚才的矩形，把步骤略加修改一下，如下图：

下图上方的红色区域就是使用这种方法制作的

现在来绘制那个中空的图形，绘制的思想就是先画一个大框，然后在中间减去一个小框
注意：

1. 在绘制完第一个大框之后，要在工具设定中改为“从形状区域减去”方式再绘制小框
2. 在选择路径进行对齐操作的时候最好使用“路径选择工具”，如果使用“直接选择工具”有时候无法选择整条路径

过程如下图：

再来绘制一个类似标签卡的图形，如下图：

上面的几种方法，都是利用了带路径的色彩填充层来制作效果
除了色彩填充以外，路径也可以用来制作调节图层（调节图层在另外教程中介绍）
制作顺序如下：
1 原图：

2 使用第二种绘制方式（单纯绘制路径）

3 在图像中绘制两个封闭路径，注意两个路径为相加方式，即在绘制第一个之后选择相加方式绘制第二个

4 在图层面板启动调节图层中的“亮度/对比度”

5 “亮度/对比度”设置如下图:

6 在新建的调节图层上启动“描边”样式

7 “描边”样式设置如下图：

这样我们就完成了制作，如下图：

也可以将其制作为动画（动画制作在另外教程中介绍）

最后我们来制作一个较复杂的图形，如下图：

该图形原来是一个完整的椭圆，被分割为了两个部分，这种效果在Illustrator中很容易实现
只需要在椭圆上绘制一条曲线，然后使用分割命令即可。
在Photoshop中就较为复杂一些（所以复杂的路径最好在Illustrator中制作）

绘制过程如下：
首先使用椭圆形状工具，选择填充层绘图方式，绘制一个椭圆，如下图：

然后隐藏该层的路径，切换到单纯路径绘图方式
绘制一个如下图的路径（可以由矩形修改而来）
绘制完成后保持新画的路径在选择状态，按CTRL C复制到剪贴板：

接下来把蓝色的椭圆层复制一层，改为其他的颜色便于区别

然后将前面一步复制的路径一次粘贴到两个层的路径中，并更改其与原先路径的运算关系
需要注意的是：

1. 要先将层的路径显示出来，才能加以修改
2. 最好关闭暂时不用的图层，以免视觉混乱
3. “组合”并非必要步骤。按“组合”按钮之后两条路径就合并为了一个，但即使不合并也不会影响视觉效果，并且还利于后期的再修改。 所以建议在实际应用中，除非必要，否则应尽量不使用“组合”功能。
4. 在大家今后的类似制作中，只需要制作黄色的部分就可以达到视觉要求的效果了，因为黄色图层层次高于蓝色部分，本身就能够产生遮挡 蓝色的效果。

过程如下图：

综合以上的内容，可以感受到路径在应用中的强大功能
使用路径可以勾画平滑的曲线，在修改的时候非常方便
并且最重要的是:
其矢量图形固有的特性，使得其在旋转、拉伸等操作后依然清晰。而点阵图像会变得模糊。
做个试验，先将一个矢量一个点阵图同时缩小到原来的10%，再放大回原大小。如下图：

在实际的设计过程中，由于构思的不断改变，很可能经常进行各种各样的修改
比如缩放、旋转、5边形改6六边形，直线改曲线等
如果是使用点阵图像，则很多情况下都只能重新绘制
而使用矢量图形则可以完全避免这些情况
并且矢量图象对系统资源占用较少（在Photoshop中），不受输出分辨率的影响
所以在实际的设计当中，应首要考虑使用矢量图形进行制作

结束

赵鹏　2003-07-27　21:07　Home

The following icons are added:

Google Buzz, Picasa, Bing, Meetup, Ebay, Feedburner, WordPress (blue version), Drupal, Gowalla, ICQ, Metacafe, Yelp, Xing, PayPal, Heart, Star, Podcast, and various color buttons.

在 Web 空前繁荣的今天，有关 Web 设计中的各种观点很多会成为话题，有的很快达成一致，有的则一直争议下去，本文讲述 Web 设计中的 5 大经典争议，这些争议从它们诞生的那天起，就被正反两方争得不亦乐乎。

争议之一：链接是否应该在新窗口打开

正方:

外部链接应该始终从新窗口打开，当你浏览一个站点的时候，点击了一个链接，却被带到另外一个站点，你在这个站点的会话也因此丢失，这实在令人恼怒。因此，站点内的链接可以在现有窗口打开，而站点外链接则应该在新窗口打开。

反方:

作为 Web 设计师，我们不该控制用户的行为，一个链接是否在新窗口打开，应该是用户自己的选择。剥夺用户的控制权，在用户的桌面上打开一堆窗口或标签，这才是真正让人恼怒的事。如果用户想打开新窗口，他们可以自己选择，而对非熟练用户，新窗口让他们丢失了后退按钮更让他们无所适从。

和事佬:

总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

争议之二：在链接中应该使用诸如Click here 一类的笼统词汇吗？

正方:

事实证明，Click here 比描述性的链接更容易获得点击，因此应该使用该词汇以获得更好的点击率。

反方:

Click here 一类的链接损害 Web 的易用性，用户在点击之前，只能通过周围的上下文关系猜测这个链接是做什么的。Quality guidelines 建议，任何链接文字都应该明确描述该链接的目的。

和事佬:

为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 Click here 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

争议之三：使用该继续使用 b 和 i 两个标签?

正方：

如果你仅仅想把一个词设为粗体，而这个词并没有强调表示重要的意思，应该使用 b 标签，不该用 strong 标签，读屏软件对 b 和i 标签有不同的发音，而 HTML5 规范中仍包含这两个标签。

反方:

这两个标签的作用是将文字设置为粗体或斜体，从语义角度看，任何装饰性的东西都应该使用 CSS 实现，如果要强调一个词语，应该使用 strong 或 em 标签。

和事佬：

b 和 i 标签不应该用于修饰文字的式样，这些视觉的修饰应该交由 CSS 处理。如果要强调一个词汇或语句，应该使用 strong 或 em 标签。只有在那些没有别的标签可用的场合，才可以考虑 b 和 i 。

争议之四：站点 Logo 是否因出现在 h1 标签中?

正方:

Logo 不应包围在标题标签中，标题标签应该包含这个页面的标题或描述性内容，这是 SEO 的最佳方式，否则，站点中的每个页的标题岂不是全变成公司名字了？

反方:

一个站点最明显的标志是它的 Logo， 而 h1 是一个页面最顶级的标题，将 Logo 包围其中很自然，这样，即使没有 CSS 人们也很容易该明白这个页面的结构。

和事佬:

标题标签的作用是描述内容的层级结构，如果一个站点有一个描述站点内容的标题，应该放在 h1 中，否则，第二级结构或描述性的对象，就是 Logo。

争议之五：是否应该支持 IE6？

正方:

IE6 现在仍占有 10% 的市场份额（在国内更高-译者注），因此，网站毫无疑问应该支持 IE6。世界上仍然有很多公司的系统仍需使用 IE6 访问，另外，还有很多人根本不知道怎么升级他们的浏览器。

反方:

IE6 已经过时，不支持最新的 Web 技术，它给在线用户带来安全隐患，也是众多 Web 开发设计师的噩梦。包括 YouTube 在内的大型站点已经停止支持 IE6。你也不例外。

和事佬:

IE6 毫无疑问在衰退，随着大公司对它的抛弃，它的死亡可能来得比预期还快，是否支持 IE6 要看的具体情况，可以考虑为 IE6 用户提供最基本的页面格式，而不必为它挣扎。

本文来源：http://line25.com/articles/top-5-web-design-debates-that-cause-the-most-riots

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

【 发

几乎每个 Web 站点都需要表单，不管是留言表单，还是会员注册表单，还是调查表或订单，尽管表单很有用，但对 Web 开发与设计者来说，表单的设计非常繁琐，本文搜集了15个免费或收费的第三方 Web 表单资源，可以轻松实现 Web 表单的设计与集成，它们中的一些还可以帮你实现非常专业的表单设计。

表单创建资源

FormSpring

FormSpring 可以创建标准的联系，调查，捐赠接收，注册等表单，无需编码，它会帮你管理和接收数据，甚至集成付款功能。分免费和收费两种服务，免费服务允许创建3个表单，每个表单10个栏，每月接收50次数据。

Wufoo

Wufoo 可以实现联系，调查，注册，在线支付等表单的设计，可以使用模板，包含多种报告，同样，也包含免费和收费服务。免费服务允许一个用户，3个表单，3个报告，10个栏，每月100次数据。

Icebrrg

Icebrrg 可用于创建联系，注册，调查，应用程序等表单，可以查看发送的数据或将数据导出到 Excel 文件。为收费服务，不包含免费或试用服务。

FormSite

FormSite 用于超过100个预定义表单，并可以进行定制以符合自己的要求，可以创建联系，调查，这册，订单等表单，免费服务可以创建5个表单，每月100次数据。

FormExperts

FormExperts 包含上百个模板，可用来创建各种 Web 表单，支持自动回复，自定义感谢页面以及自定义邮件格式，可以免费试用10天。

MachForm

MatchForm 可以帮你设计 PHP 表单，这是一个独立程序（有别于前面的托管服务），用 MySQL 数据库存储数据，单站点许可39美金。

Email Me Form

Email Me Form 是一个在线服务，用来创建 HTML 或 PHP 表单，收费服务可以去掉 Email Me Form 的反向链接。

FormLogix

FormLogix 可以用来创建反馈，调查，投票，注册，邀请，在线支付等表单，免费服务只用于测试。

FormAssembly

FormAssembly 可用于创建联系，注册，订单等 Web 表单，免费服务包含广告链接。

Visitor Contact

这一个免费资源，包含 WordPress 插件，顾名思义，主要用于创建联系表单，功能包括自动回复，显示用户地理位置，还可以导出数据。

Contactable

这是一个来自 theodin.co.uk 的 jQuery 插件，可以轻松实现联系与反馈表单。

WordPress 插件

Gravity Forms

这是一个收费 WordPress 插件（39美金），可用于创建各种 Web 表单，可以集成到 WordPress 控制面板。

CForms II

这是一个功能强大的联系表单创建插件。

Contact Form 7

这是一个非常受欢迎的联系表单设计插件，非常容易上手，可以轻松创建各种表单并插入到页面。

Fast and Secure Contact Form

该插件可以创建安全联系表单，使用 CAPTCHAs 与 Akismet 防止垃圾信息。

本文来源：http://vandelaydesign.com/blog/tools/web-forms/
中文翻译来源：COMSHARP CMS 网站内容管理系统官方站

在线地图已经是很平常的应用，Google Map 甚至可以用作驾驶导航仪，然而，这些应用的实现涉及到千丝万缕的艰辛工作，仅仅是定位你现在的位置，就有很多技术，有幸的是，如今在你的 Web 站点中，你可以通过短短的几行代码，获得一个用户的地理位置，本文介绍的是用在 Web 中的各种地理定位技术。

通过 IP 地址获得用户的地理位置信息

互联网不过是一个巨大的网络，上面的每一台电脑对应一个 IP 地址，通过这个 IP 地址，可以知道这个用户在什么位置，我们可以通过查询 Maxmind GeoIP 数据库 获得，Maxmind 还提供了一个 JavaScript 接口让你在网站上实现这一功能。

这个方法（演示）有一个问题，就是说，你获得的 IP 地理位置信息未必非常准确，因为这个 IP 是你的 ISP 分配给你的，你获得的事实上是 ISP 的地理位置，另外，如果你使用 VPN，你实际的得到可能是十万八千里之外的地方了。

通过 W3C Geo API 获得用户地理位置

通过 IP 地址获取用户地理位置还有一个棘手的问题，就是安全和隐私问题，毕竟，并不是每个用户都愿意自己的地理位置信息被别人知道，鉴于此，人们开发了很多技术，Google Gears 拥有一个 Geo-Location 服务，Plazes 帮助你保存你的位置，而 Yahoo Fire Eagle 算得上这类技术中最顺手的一个。然而这些技术共同的问题是，它们要求用户要么安装一个插件，要么需要访问特定的 Web 服务，这有些麻烦。

W3C 有一个 Geo-Location API 可以帮助浏览器制造商，在浏览器中集成地理信息功能。Firefox 3.5 以上的浏览器支持 W3C Geo-LocationAPI，同样支持该 API 的还有 iPhone 上的 Safari 浏览器（需要 OS3.0 以上）。需要通过浏览器查询自己地理位置的用户，在浏览器中，会显示一个对话条，请求你的授权。如下图所示：

以下是请求使用该功能的代码：

下面的演示，可以很好地演示上面两种地理信息获取技术的不同，可以看到，他们在测量用户地理位置方面有很多不同。

将经度/维度转换为地名

将经度/维度信息转换为地位，称为 反 Geo-Location，网络上有很多这类服务可以使用，其中最著名的是 the geo-names Web service, 但它仍有几个问题，比如，它的结果是以美国为中心的。另一个可免费使用，且支持全球信息，但知道的人并不多的服务来自一个让人有点意外的地方，Flickr。Flickr 的 flickr.places.findByLatLon 服务可以根据经纬度信息返回地名，你可以在 app explorer 做下体验，但目前最简单的方法是使用 Yahoo Query Language ( Yahoo 查询语言，简称 YQL). YQL 的样子如下：

使用 YQL 查询语言，你可以得到 XML 或 JSon 格式的数据，下图是在 JavaScript 中是使用该查询语言的例子：

结合上面的例子，在反 Geo-Location 查询的帮助下，我们得到了详细的地名信息：

经纬度的问题

经纬度虽然可以定位地球上的一个位置，但经纬度有时候容易引起歧义，为了解决这个问题，Yahoo 和 Flickr （Twitter 很快也会支持）支持另一种定位方法，叫 Where On Earth Identifier (简称 WOEID) 。使用该方法，我们可以很容易获取来自某个区域的 Flickr 图片。

这样几句 JavaScript 代码就可以显示来自指定地理位置的图片：

这些代码还可以打包成函数，下面的代码，将显示来自巴黎的10幅照片，你可以自己在 YQL console 中体验：

在文字内容中自动挖掘地理信息

假如你想获得一段文字，或者一个网页内容所提到的地名的地理位置的信息，Yahoo 提供了一个很好的服务，叫 Placemaker。从 Yahoo 那里获取一个 developer key 就可以使用该服务了。只需创建一个发布表单发布到 http://wherein.yahooapis.com/v1/document，将 Developer Key 以 appid 发布，需要查询的文字以 documentContent 发布，将文字类型以 documentType 发布，同时用 outputType 定义返回数据类型，如下：

你也可以在这里亲自体验一下，使用 PHP 调用该 API ，甚至可以对输出数据的格式进行设置。这里还有一个使用 PlaceMaker 设计 GeoMaker 服务，简单输入文字或 URL，选择位置，就可以返回地图。

因为还可以在 JavaScript 中通过 YQL 使用 PlaceMaker，我们可以通过几段客户端脚本使用同样的功能：

你需要三样东西，一段位于某个 HTML 对象中的，包含地理位置的文字，一个 Google Maps API Key （申请） 以及以下代码：

在网页中插入地图

在线地图有很多，Google Map 是其中的领先者，除了 Google，Yahoo, 微软都提供地图服务，还有一个叫做 Open Street Maps 的开放地图服务，在上次海地地震救援中被派上用场。在网页中插入交互地图最简单的方法是使用 Mapstraction,它提供一个 JavaScript 库，24ways 曾发表过一篇很好的介绍文章。如果你只想在网页上放上你的地图，指示你的位置，而不想使用太多 JavaScript， Google static maps API 是最好的选择，它会生成静态地图，以下代码可以将这个静态地图插入你的网页（Google 还提供了一个创建静态地图的工具）：

本文国际来源：http://www.smashingmagazine.com/2010/03/08/entering-the-wonderful-world-of-geo-location/

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

电 子商务网站和普通网站一样，需要良好的设计，除此之外，电子商务站点还有许多额外的东西需要考虑，后台支撑程序，购物车，结算，产品目录，产品搜索与导 航，一个优秀的电子商务站点会引导用户快速找到他们需要的货品并顺畅地完成购买。本文搜集了上百种与电子商务网站设计相关的资源。

1. 设计灵感与借鉴资源 
A。通用资源

20 of the Best e-commerce Websites - 20 个最佳电子商务网站



Cart Craze – 电子商务网站设计展示



23 Excellent Examples of How to Design Online Stores – 25个优秀的电子商务网站设计案例



20 Well Designed E-Commerce Websites – 20 个设计出众的电子商务网站



50 Inspirational e-commerce Website Designs – 50 个电子商务网站设计样例



35 Excellent e-commerce User Interface Designs – 35个出色的电子商务类站点UI设计


B. 按钮 
107 Add to Cart Buttons of the Top Online Retailers – 107 个购物车按钮设计



80 Examples of Add to Cart Buttons for Design Inspiration – 80个购物车按钮设计样例



20 e-commerce Add To Cart Buttons For Your Inspiration – 20个购物车按钮展示



"Add to Cart" Button Showcase – 购物车按钮展示


2. 购物车与电子商务平台 A. 独立购物车 
PrestaShop – 一个免费，开源购物车，灵活，界面直观。



OpenCart – 基于 PHP 的免费，开源购物车。支持产品预览，自动图片尺寸，支持可下载类虚拟产品。



Magento – 开源电子商务平台，包含免费的社区版和收费的企业版。



CubeCart – 购物车程序，有两个版本，包括一个免费版。



Zen Cart – 免费开源购物车，包括各种免费扩展。



osCommerce – 开源，免费的购物车，已经应用到超过 225000 在线商店。



Digistore – 基于 osCommerce 的免费，开源购物车。



StoreSprite – 一个免费但功能强大的，基于 PHP/MySQL 的购物车。



BossCart – 基于 PHP 的购物车，含免费版和高级收费版。



FatFreeCart – 一个通过复制粘贴代码就能实现的购物车，支持 Paypal 和 Google Checkout，无需注册和安装。


C. 插件 
WordPress e-Commerce – 用于 WordPress 的免费，开源电子商务插件。



Shopp – 用于 WordPress 的超简单的购物车插件。



Ubercart – 用于 Drupal 5/6 的购物车插件。



Drupal e-Commerce – 用于 Drupal 的电子商务插件，支持 Paypal，Authorize.net 以及其它支付方式。



VirtueMart – 用于 Joomla 的免费购物车。



Seber Cart – 用于 Joomla 的小巧，易用的购物车。



Joomla jQuery Cart – JCart 是一个易于安装，定制的，免费的 Ajax 购物车。

这是电子商务类站点终极资源大全的第二部分，本部分搜集的是海量的设计资源，包含与电子商务网站设计相关的模板，主题，图标，素材等。本文的第一第三部分请参阅：电子商务类站点终 极资源大全（上）（下）。

3. 图标与设计素材

A. 电子商务网站主题

35 Free High-Quality E-Commerce Templates – Smashing Magazine 搜集的非常出色的电子商务网站主题。

25 Magento Templates for Your E-Commerce Business – 25 套 Magento 主题

20+ Best e-commerce (WordPress Themes, Templates, Icons, Flash Sites) Collection – 最佳电子商务主题集。

The Clothes Shop Theme – 基于 WP 的布艺网店主题。

The Furniture Store Theme – 基于 WP 的家居网店主题。

enVirashop – 用于 WP 的电子商务主题

wpShop Reloaded – 一套 WP 网店主题

RGBSTore e-commerce – 一套电子商务 HTML 模板，支持 Magento, osCommerce, Zen Cart 等

Boutique – 一套优雅的电子商务 HTML 模板

Sancart – 一套简单的 OpenCart 模板

OScomm E-Commerce Template – 一套 e-commerce HTML 模板

ClassyShop – 使用 960 网格框架设计的 e-commerce 模板

Store Theme – 一套来自 Templatic 的主题，能将标准 WP 换成在线网店

Crafty Cart Theme – 另一个将 WP 变成在线网店的主题

SimpleCart(js) – 还有一个

Market Theme – 这个也是

ShopperPress – WP 网店主题，支持 Google Checkout, PayPal, Authorize.net 等支付方式

B. 设计素材

e-commerce Web Elements, Dark Grey & Green – 一套绿色系的电子商务网站素材

Web 2.0 Button (e-commerce #2) – 一套电子商务网站按钮集

e-commerce Web Elements – 一套电子商务设计素材，可以自行配色

Web Pack (Price Table, Banner, Buttons…) – 一套黑白灰色系设计素材

Price Table – 价格表素材

Colorful Pricing Table – 多彩的价格表

Pricing Tables – 5 Pack – 5 套价格表素材

Pricing Tables – 价格表，包含功能清单

Super Bright Pricing Tables – 各种配色的价格表

C. 通用图标

Vector Free Shipping Bag Set – 矢量购物袋

Free Shipping Tag Icon – 矢量标签

13 E-Commerce Icons – 13 套电子商务网站图标

Universal Icons – Set 16 (Shopping) – 来自 iStockPhoto 的电子商务网站图标素材

Sale and Shopping Icons – Alto Series – 另一套

Shopping & Consumerism Icons – White or Black Series – 来自 iStockPhoto 的图标

Set of 77 Web Icons – Web 图标集

BlueSakura – 45个图标，包括购物车图标

Icon Set n9 – Commerce – 一套电子商务网站图标

Icon Set n8 – Commerce – 另一套

Stylish Cardboard Tag Icons – 挂牌

Beautiful e-commerce Icons – 来自 Nettuts+ 的图标，包括购物车等

Hola Icons – Shopping – 一套漂亮的电子商务图标

Simple Icons on Black Background – Set 4 – 灰色系图标集，包括购物车等

Shopping Icons Set – 一套明亮的电子商务图标

Shopping Icons Fresh Collection – Set 10 – 很卡通的电子商务图标

Smooth Icon Set – 一套电子商务图标

Shopping Icons Retro Revival Collection – Set 9 – 一套怀旧风的电子商务图标

Green Icons Retro Revival Collection – Set 5 – 绿色系的

Shopping Icon Set (Isometric) – 黄色系的

E-Commerce Icon Set – 青色系的电子商务图标

Themes Ultimate Icon Set – 电子商务图标

原帖地址： http://www.hongkiat.com/blog/e-commerce-design-resources-the-ultimate-round-up/

1.基本概念的理解

　　绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)例如：
C:"xyz"test.txt 代表了test.txt文件的绝对路径。http://www.sun.com/index.htm也代表了一个
URL绝对路径。

　　相对路径：相对与某个基准目录的路径。包含Web的相对路径（HTML中的相对目录），例如：在
Servlet中，"/"代表Web应用的跟目录。和物理路径的相对表示。例如："./" 代表当前目录,
"../"代表上级目录。这种类似的表示，也是属于相对路径。

另外关于URI，URL,URN等内容，请参考RFC相关文档标准。

RFC 2396: Uniform Resource Identifiers (URI): Generic Syntax,
(http://www.ietf.org/rfc/rfc2396.txt)

2.关于JSP/Servlet中的相对路径和绝对路径。

2.1服务器端的地址

　　 服务器端的相对地址指的是相对于你的web应用的地址，这个地址是在服务器端解析的
（不同于html和javascript中的相对地址，他们是由客户端浏览器解析的）也就是说这时候
在jsp和servlet中的相对地址应该是相对于你的web应用，即相对于http://192.168.0.1/webapp/的。

　　其用到的地方有：
 forward：servlet中的request.getRequestDispatcher(address);这个address是
在服务器端解析的，所以，你要forward到a.jsp应该这么写：
request.getRequestDispatcher(“/user/a.jsp”)这个/相对于当前的web应用webapp，
其绝对地址就是：http://192.168.0.1/webapp/user/a.jsp。
sendRedirect：在jsp中<%response.sendRedirect("/rtccp/user/a.jsp");%>

2.22、客户端的地址
 
       所有的html页面中的相对地址都是相对于服务器根目录(http://192.168.0.1/)的，
而不是(跟目录下的该Web应用的目录)http://192.168.0.1/webapp/的。
 Html中的form表单的action属性的地址应该是相对于服务器根目录(http://192.168.0.1/)的，
所以，如果提交到a.jsp为：action＝"/webapp/user/a.jsp"或action="<%=request.getContextPath()%>"/user/a.jsp；
提交到servlet为actiom＝"/webapp/handleservlet"  
 　　Javascript也是在客户端解析的，所以其相对路径和form表单一样。
 

　　因此，一般情况下，在JSP/HTML页面等引用的CSS,Javascript.Action等属性前面最好都加上
<%=request.getContextPath()%>,以确保所引用的文件都属于Web应用中的目录。
另外，应该尽量避免使用类似".","./","../../"等类似的相对该文件位置的相对路径，这样
当文件移动时，很容易出问题。

3. JSP/Servlet中获得当前应用的相对路径和绝对路径
3.1 JSP中获得当前应用的相对路径和绝对路径
 根目录所对应的绝对路径:request.getRequestURI()
 文件的绝对路径    　:application.getRealPath(request.getRequestURI());
 当前web应用的绝对路径 :application.getRealPath("/");
 取得请求文件的上层目录:new File(application.getRealPath(request.getRequestURI())).getParent()

3.2 Servlet中获得当前应用的相对路径和绝对路径
 根目录所对应的绝对路径:request.getServletPath();
 文件的绝对路径    :request.getSession().getServletContext().getRealPath
(request.getRequestURI())   
 当前web应用的绝对路径 :servletConfig.getServletContext().getRealPath("/");
     (ServletContext对象获得几种方式：
       javax.servlet.http.HttpSession.getServletContext()
       javax.servlet.jsp.PageContext.getServletContext()
       javax.servlet.ServletConfig.getServletContext()
     )

4.java 的Class中获得相对路径，绝对路径的方法
4.1单独的Java类中获得绝对路径
根据java.io.File的Doc文挡，可知:
 默认情况下new File("/")代表的目录为：System.getProperty("user.dir")。
 一下程序获得执行类的当前路径
package org.cheng.file;
import java.io.File;

public class FileTest {
    public static void main(String[] args) throws Exception {      

  System.out.println(Thread.currentThread().getContextClassLoader().getResource(""));    

  System.out.println(FileTest.class.getClassLoader().getResource(""));       

　　System.out.println(ClassLoader.getSystemResource(""));       
  System.out.println(FileTest.class.getResource(""));       
  System.out.println(FileTest.class.getResource("/")); //Class文件所在路径 
  System.out.println(new File("/").getAbsolutePath());       
  System.out.println(System.getProperty("user.dir"));   
 }
}

4.2服务器中的Java类获得当前路径（来自网络）
(1).Weblogic

WebApplication的系统文件根目录是你的weblogic安装所在根目录。
例如：如果你的weblogic安装在c:"bea"weblogic700.....
那么，你的文件根路径就是c:".
所以，有两种方式能够让你访问你的服务器端的文件：
a.使用绝对路径：
比如将你的参数文件放在c:"yourconfig"yourconf.properties，
直接使用 new FileInputStream("yourconfig/yourconf.properties");
b.使用相对路径：
相对路径的根目录就是你的webapplication的根路径，即WEB-INF的上一级目录，将你的参数文件放

在yourwebapp"yourconfig"yourconf.properties，
这样使用：
new FileInputStream("./yourconfig/yourconf.properties");
这两种方式均可，自己选择。

(2).Tomcat

在类中输出System.getProperty("user.dir");显示的是%Tomcat_Home%/bin

(3).Resin

不是你的JSP放的相对路径,是JSP引擎执行这个JSP编译成SERVLET
的路径为根.比如用新建文件法测试File f = new File("a.htm");
这个a.htm在resin的安装目录下

(4).如何读相对路径哪？

在Java文件中getResource或getResourceAsStream均可

例：getClass().getResourceAsStream(filePath);//filePath可以是"/filename",这里的/代表web

发布根路径下WEB-INF/classes

默认使用该方法的路径是：WEB-INF/classes。已经在Tomcat中测试。

1. switch (df){  
2.         case xls:  
3.             // contentType设定      
4.             contentType = "application/vnd.ms-excel;charset=utf-8";      
5.             // attachment表示网页会出现保存、打开对话框      
6.             filename = "inline; filename=" + fileName;      
7.             break;                
8.         case xlsx:  
9.             // contentType设定      
10.             contentType = "application/vnd.ms-excel;charset=utf-8";      
11.             // attachment表示网页会出现保存、打开对话框      
12.             filename = "inline; filename=" + fileName;      
13.             break;  
14.         case pdf:    
15.             // contentType设定      
16.             contentType = "application/pdf;charset=utf-8";      
17.             // attachment表示网页会出现保存、打开对话框      
18.             filename = "inline; filename=" + fileName;   
19.             break;  
20.         case doc:  
21.             // contentType设定      
22.             contentType = "application/msword;charset=utf-8";      
23.             // attachment表示网页会出现保存、打开对话框      
24.             filename = "inline; filename=" + fileName;      
25.             break;                
26.         case docx:  
27.             // contentType设定      
28.             contentType = "application/msword;charset=utf-8";      
29.             // attachment表示网页会出现保存、打开对话框      
30.             filename = "inline; filename=" + fileName;      
31.             break;  
32.         case txt:  
33.             // contentType设定      
34.             contentType = "text/plain;charset=utf-8";      
35.             // attachment表示网页会出现保存、打开对话框      
36.             filename = "inline; filename=" + fileName;      
37.             break;  
38.         default:  
39.             // contentType设定      
40.             contentType = "text/plain;charset=utf-8";      
41.             // attachment表示网页会出现保存、打开对话框      
42.             filename = "inline; filename=" + fileName;    
43.             break;  
44.     }    
    

    最近不少Web技术圈内的朋友在讨论协议方面的事情，有的说web开发者应该熟悉web相关的协议，有的则说不用很了解。个人认为这要分层次来看待这个问 题，对于一个新手或者刚入门的web开发人员而言，研究协议方面的东西可能会使得web开发失去趣味性、抹煞学习积极性，这类人应该更多的了解基本的 Web技术使用。而对于在该行业工作多年的老鸟来说，协议相关的内容、标准相关内容应该尽量多些的了解，因为只有这样才能使得经手的web系统更加优秀 （安全、漂亮、快速、兼容性好、体验好……）。本文我们来说一下MIME 协议的一个扩展Content-disposition。

    我们在开发web系统时有时会有以下需求：

• 希望某类或者某已知MIME 类型的文件（比如：*.gif;*.txt;*.htm）能够在访问时弹出“文件下载”对话框
• 希望以原始文件名（上传时的文件名,例如：山东省政府1024号文件.doc）提供下载，但服务器上保存的地址却是其他文件名（如：12519810948091234_asdf.doc)
• 希望某文件直接在浏览器上显示而不是弹出文件下载对话框
• ……………………

    要解决上述需求就可以使用Content-disposition来解决。第一个需求的解决办法是

Response.AddHeader "content-disposition","attachment; filename=fname.ext"

public static void ToDownload(string serverfilpath,string filename)



{



FileStream fileStream = new FileStream(serverfilpath, FileMode.Open);



long fileSize = fileStream.Length;



HttpContext.Current.Response.ContentType = "application/octet-stream";



HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment; filename=""" + UTF_FileName(filename) + """;");



////attachment --- 作为附件下载



////inline --- 在线打开



HttpContext.Current.Response.AddHeader("Content-Length", fileSize.ToString());



byte[] fileBuffer = new byte[fileSize];



fileStream.Read(fileBuffer, 0, (int)fileSize);



HttpContext.Current.Response.BinaryWrite(fileBuffer);



fileStream.Close();



HttpContext.Current.Response.End();



}







public static void ToOpen(string serverfilpath, string filename)



{



FileStream fileStream = new FileStream(serverfilpath, FileMode.Open);



long fileSize = fileStream.Length;



HttpContext.Current.Response.ContentType = "application/octet-stream";



HttpContext.Current.Response.AddHeader("Content-Disposition", "inline; filename=""" + UTF_FileName(filename) + """;");



HttpContext.Current.Response.AddHeader("Content-Length", fileSize.ToString());



byte[] fileBuffer = new byte[fileSize];



fileStream.Read(fileBuffer, 0, (int)fileSize);



HttpContext.Current.Response.BinaryWrite(fileBuffer);



fileStream.Close();



HttpContext.Current.Response.End();



}







private static string UTF_FileName(string filename)



{



return HttpUtility.UrlEncode(filename, System.Text.Encoding.UTF8);



}

简单的对上述代码做一下解析，ToDownload方法为将一个服务器上的文件（serverfilpath为服务器上的物理地址），以某文件名 (filename)在浏览器上弹出“文件下载”对话框，而ToOpen是将服务器上的某文件以某文件名在浏览器中显示/打开的。注意其中我使用了 UTF_FileName方法，该方法很简单，主要为了解决包含非英文/数字名称的问题，比如说文件名为“衣明志.doc”，使用该方法客户端就不会出现 乱码了。

 需要注意以下几个问题：

1. Content-disposition是MIME协议的扩展，由于多方面的安全性考虑没有被标准化，所以可能某些浏览器不支持，比如说IE4.01
2. 我们可以使用程序来使用它，也可以在web服务器（比如IIS）上使用它，只需要在http header上做相应的设置即可

可参看以下几篇文档：

• 如何为已知的 MIME 类型激活“文件下载”对话框
• Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field
• Hypertext Transfer Protocol -- HTTP/1.1

response.setContentType("text/html; charset=Shift_JIS");

• HTML format (.htm or .html): text/html
• Adobe Portable Document (pdf): application/pdf
• Microsoft Word (.doc): application/msword
• Microsoft Excel (.xls): application/msexcel
• Microsoft Powerpoint (.ppt): application/ms-powerpoint
• Realaudio (.rm, .ram): audio/x-pn-realaudio
• Text format (.txt): text/txt
• Zipped files (.zip): application/zip

在安装Office2003以后，有一个ActiveX控件被安装到了系统中，这个控件位于“Program Files"Microsoft Office"OFFICE11"owssupp.dll”。通过这个控件，客户端页面上的JavaScript就可以激活本地的Office软件，来实 现打开、编辑Office文档。（另，Office XP应该就已经包含这个ActiveX控件了。）

首先，用Script创建一个本地的对象：

openDocObj = new ActiveXObject("SharePoint.OpenDocuments.2"); // 为了兼容Office XP，可以创建“SharePoint.OpenDocuments.1”

然后，调用openDocObj的相应的方法。比如打开服务器上的一个Office文档：

openDocObj.ViewDocument("http://www.abc.com/documents/sample.doc");

openDocObj对象会根据参数中不同的Office文档类型（.doc、.xls、.ppt）来打开不同的程序（Word、Excel、PowerPoint）。ViewDocument()方法还有一个重载签名，可以让我们手工指定激活哪个程序来打开文档：

openDocObj.ViewDocument("http://www.abc.com/documents/sample.doc", 要激活的程序的ProgID);

那么要打开Office程序在线编辑文件又如何？

openDocObj.EditDocument("http://www.abc.com/documents/sample.doc");

就可以直接激活Word，在Word里面编辑文档，然后直接点击Word里面的保存功能，就可以将文件保存会服务器上了。注意：为了让Word能将 编辑后的文档直接保存会服务器，访问Web站点的当前上下文的Windows Identity必须对服务器的相应目录（即“http://www.abc.com/documents”这个虚拟目录所对应的服务器上的物理路径）有 相应的写权限，否则保存动作会失败。编辑完成后，EditDocument()会返回一个bool值，来反映编辑操作是否成功。

我们还可以通过打开服务器上的一个文档模版，来创建一个新的文档：

openDocObj.CreateNewDocument("http://www.abc.com/documents/sampleTemplate.dot", "http://www.abc.com/documents/");

就可以使用“http://www.abc.com/documents/sampleTemplate.dot”这个模版来创建一个新的文档，默 认新文档的保存地点是“http://www.abc.com/documents/”。创建新文档时使用的程序取决于模版文件的类型（比如.dot模版 会对应Word）。新文档的保存同样需要注意权限问题。CreateNewDocument()方法同样会返回一个bool值来反映操作是否成功。

CreateNewDocument()方法的第一个参数，除了可以使用一个模版的地址外，还可以直接指定为希望用来创建新文档的客户端程序的ProgID。

对于这两种模式引起最大的问题就是盒模式的问题，或者现在大家已经忽视了IE5的存在，但是，IE在怪异模式运行的盒模式依然在最新版本的IE7保留着，一旦应用不得当，IE7将变成跟IE5一样愚蠢。

当然，不只IE浏览器存在两种模式。

Opera 浏览器 (Opera 7~8) 支持与 IE 相同的两种呈现模式：Quirks Mode和 Standards Mode（有关详细信息，请参阅 http://www.opera.com/docs/specs/doctype/），但是Opera9的Quirks Mode又不与之前的Quirks Mode呈现不一样，比如不再兼容IE5那种盒模式。

Mozilla Firefox 1+ 支持三种呈现模式：Quirks Mode、Almost Standards Mode（几乎标准的模式）和 Standards Mode。Firefox 的 Almost Standards 模式对应于 IE 和 Opera 的 Standards 模式。其中的Almost Standards Mode，除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式基本相同。对于进入Quirks Mode的可参考http://www.mozilla.org/docs/web-developer/quirks/doctypes.html）

说了这样多可能你还不知道是到底Mode是怎样。现在试一下html 4的。
为什么要选择html4 呢？因为太多人认为只有xhtml才是符合标准的，又有多少人真的在使用xhtml呢？
可以先打开前两个看代码比较一下．

1. http://labs.aoao.org.cn/test/doctype/html4strict/
2. http://labs.aoao.org.cn/test/doctype/html4/
3. http://labs.aoao.org.cn/test/doctype/ishtml4strict/

当没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用Quirks Mode呈现。
也就是前两个code是一样，可是为什么运行结果不一样呢？因为第一个使用了DTD 声明html是 html4 strict的文档，IE6+的IE会开启标准模式来处理网页，第三个属于一个垃圾的方式把IE引入 quirks mode ^_^ 我常常用这招哦
我只是列出两个比较典型的问题，不同模式还会引起一大堆问题。有兴趣的朋友可以再找一下资料。

其实关于浏览器的模式问题我还写了很多，因为其他问题暂时没发出来，只是最近看到无忧上又在闹Web标准的事，突然发现某方连IE都不了解，哎！
document.compatMode可参考

If standard HTML does not meet your needs but you still wish to gain the benefits of HTML validation, see the section on using a custom DTD.

The following DOCTYPEs are commonly used:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

This declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed in HTML 4 Strict. By writing to HTML 4 Strict, authors can achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations. However, HTML 4 Strict documents may look bland on very old browsers that lack support for style sheets.

Newer browsers such as Internet Explorer 5 for Mac, Netscape 6, and Mozilla use a standards-compliant rendering for HTML 4 Strict documents. These browsers use a "quirks" mode for most other document types to emulate rendering bugs in older browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This declares the document to be HTML 4.01 Transitional. HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets.

Newer browsers such as Internet Explorer 5 for Mac, Netscape 6, and Mozilla use a standards-compliant rendering for HTML 4.01 Transitional documents that include the URI of the DTD in the DOCTYPE. These browsers use a "quirks" mode to emulate rendering bugs in older browsers if the URI is omitted:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

This declares the document to be HTML 4.01 Frameset. HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This declares the document to be XHTML 1.0 Strict. XHTML 1.0 Strict is an XML version of HTML 4 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This declares the document to be XHTML 1.0 Transitional. XHTML 1.0 Transitional is an XML version of HTML 4 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This declares the document to be XHTML 1.0 Frameset. XHTML 1.0 Frameset is an XML version of HTML 4 Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

This declares the document to be HTML 3.2. HTML 3.2 is well supported by most browsers in use. However, HTML 3.2 has limited support for style sheets and no support for HTML 4 features such as frames and internationalization.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

This declares the document to be HTML 2.0. HTML 2.0 is widely supported by browsers but lacks support for tables, frames, and internationalization, as well as many commonly used presentational elements and attributes.

var aTd=document.getElementsByTagName("td");

for(i=0;i<aTd.length;i++) {

if(aTd[i].innerHTML=="")aTd[i].innerHTML="&nbsp;";

}

当然还有别的办法，在TD所属的那个table用CSS也是可以的

table{ border-collapse:collapse;}

于是我跑去下了个 Opera9 一看，确实如此。原因倒也不复杂：因为在 IE 下（ Firefox 似乎和 IE 一致）如果某个 td 的内容为空的话，即便你设置了高度和宽度，这个 cell 的边框样式也是不会被显示出来的； Opera 则不管是否有内容与否，一概应用样式来渲染。这个问题刚毕业那会就碰到了，当时部门的科长来问我，后来我跟他说：给每个空的 td 加上   就行了。以后每次碰到这个问题，我就统统采用这个简单粗暴有效的方式来解决了。

　　但今天卯足了劲研究了几下，从 Jiarry 那知道原来 css 语法是允许我们对这些缺省行为进行改变的：使用 border-collapse:collapse; 和 empty-cells:show; 就可以让消失的边框显现出来。

.test1{

border:1px solid #999999;

border-collapse:collapse;

width:60%

}

.test1 td{

border-bottom:1px solid #999999; 

height:28px; 

padding-left:6px;

}

.test2{

border:1px solid black;

border-collapse:collapse;

width:60%

}

.test2 td{

border-bottom:1px solid black; 

height:28px; 

padding-left:6px;

empty-cells:show;

}

.test3{

border:1px solid #999999;

width:60%

}

.test3 td{

border-bottom:1px solid #999999; 

height:28px; 

padding-left:6px;

}

以下是 XHTML 相对 HTML 的几大区别：

• XHTML 要求正确嵌套
• XHTML 所有元素必须关闭
• XHTML 区分大小写
• XHTML 属性值要用双引号
• XHTML 用 id 属性代替 name 属性
• XHTML 特殊字符的处理

XHTML 要求正确嵌套

以下是正确的嵌套：

以下是错误的嵌套：

XHTML 所有元素必须关闭

在 HTML 中，比如 <p>，<li> 这些标记，你可以不写 </p>，</li>，但是在 XHTML 里，必须要求写关闭标记 (Closing Tag)。

比如：

应该写成:

处理空元素

有些空元素，在 XHTML 里的写法是在">"之前加空格和斜杠。比如<br>，应该写成<br />。

以下是空元素的例子：

XHTML 区分大小写

HTML 不区分大小写，但是 XHTML 是区分大小写的。

XHTML 的所有标记和属性都要小写。

比如：

应该写成：

XHTML 属性值要用双引号

HTML 并不强制要求属性值加双引号。比如你可以写:

但在 XHTML 里，应该写成：

XHTML 用 id 属性代替 name 属性

HTML 很多元素，比如 a，applet，frame，iframe，img 和 map，有 name 属性。在 XHTML 里是要废除的，而用 id 属性取而代之。

比如：

应该写成：

XHTML 特殊字符的处理

& 应该在 XHTML 里应该写成 &amp;。

比如：

应该写成：

还有如果内嵌 Javascript 代码，在 XHTML 里则应该写成：

浏览器的角度

以上是从协议标准的角度来看待这个问题的。如果从浏览器的角度来看待这个问题，情况就有所不同。

考虑一下，如果把 XHTML 写得很不严格，浏览器会怎么做？是不是会弹出一个对话框，写着“这个网站的开发人员技术不过关，写的不是正宗的 XHTML 文件，咱不显示”？显然，如果浏览器做成这个样子，倒贴钱也是不会有人用的。

从浏览器的角度看待上面几个不同，大致是下面的测试结果(IE和Firefox我都测试过)：

• XHTML 要求正确嵌套：如果你没有嵌套，浏览器会试图帮你嵌套。
• XHTML 所有元素必须关闭：如果你没有关闭，浏览器会试图帮你关闭。
• XHTML 区分大小写：你非要写成大写，浏览器帮你转换成为小写。
• 属性值要用双引号：你非要不肯加，浏览器帮你加。
• 特殊字符的处理：You & Me 也好，You &amp; Me 也好，浏览器都能读入。
• 用 id 属性代替 name 属性：你非要用 name 也可以。

如果你在文档开始用 DocType 指定为 XHTML 了，有一点需要注意。在给 Tag 用 class 指定CSS 的时候，是区分大小写的。例如，你定义了一个CSS如下，

而你使用的时候写成，

那这个CSS是不会被使用的。要积极的看待这个问题，这让你可以用更多的名字来命名 Style，是一个好事。

XHTML 标准的前途

从 标准制定者的初衷看，制定 XHTML 标准是试图把 HTML 规范成为严格的 XML 格式，这样无可避免的会导致一个结果，就是从 HTML 到 XHTML 的升级导致标准的容错能力降低了。把自己的网页源文件写得严格一点当然是好事，但是一个标准不可能去要求浏览器降低自己的容错能力。

XHTML 1.0 标准是兼容 HTML 4.01，是个不错的协议，可以让开发者在编写代码的同时通过一些工具来检查代码的合法性，虽然对于用户而言，制作出来的网页和 HTML 4.01 相比实在没有什么不同。对于你写新的网页来说，使用 XHTML 1.0 还是一个不错的选择。

XHTML 1.1 标准要求浏览器不再支持原先的容错能力，这是一个标准制定者走火入魔的典型例子，这个标准从学术上说非常纯净，但是对于浏览器而言，则是个呆板、笨拙、不 可理喻的标准。所以目前所有由人类开发的浏览器都没有遵照所谓纯净的 XHTML 1.1的标准，你的代码只要浏览器能读懂，他都会很好的显示出来，而不跳出弹框报错。

从发展的趋势来看，一个标准没有浏览器服从，等于是没有意义的标准。从浏览器的实现角度来看，新的协议只能在原来 HTML 的基础上扩大能力增加容错，而不能缩小了能力减少容错。所以新的协议中，只有扩大能力增加容错的部分会被采纳，而其他部分都仅仅是纸上谈兵而已。

好的开发工具能节省不少时间和精力，以下是为Web开发/设计者们收集的63个非常实用的在线工具（点击图片可进入各自的官方页面）：

1.一个关于如何建立可扩展的Web代码编辑器，使用HTML 5技术。

6.一种图像缩放部件。

8.强悍的颜色选择工具

9.方便和易于使用的配色方案设计。

10.色彩趋势+调色板

12.CSSFly是一个Web 2.0网站，实时网页在线编辑器

13.CleanCSS是一个免费的CSS精简压缩工具，通过这个在线工具，可以将你的CSS文件压缩、优化成更精简，这将大大提高你的网站的载入速度

14.使用这个工具可以轻松地写出具备字体、文本颜色大小位置、字符间距、单词间距等属性的CSS样式

15.Curdbee是一个免费的在线计费和投票系统

16.Dabbleboard 是一个在线协作画图板服务。你可以通过其涂鸦，插入图片，设定字体颜色，添加箭头等等。

17.你可以通过 Domai.nr 这个聪明的网域名称搜寻引擎，可以告诉你某个域名是不是注册了。还可以轻松的组合出独特，完美的网址域名

18.快速通过电子邮件分享网页

19.EmbEdit ，嵌入式开发代码编辑器

20.这是一个在线的 HTML 实体查询工具。该工具根据 W3C 所列出的 HTML 实体来进行查询，你可以将查询的结果复制到剪贴板中以作它用

21.feevy ，只需要一个简单的HTML标签即可在网站中显示来自其他博客的内容

22.fivesecondtest ，一个简单的在线可用性测试，帮助你确定用户界面最突出的元素

23.Font Burner是免费在线工具，可以搜多超过1000种字体。

24.fontstruct，可以允许你创建，下载并分享自定义的字体

25.Gazup! -同时将档案上传到九个免费空间，支持FTP，还能赚美金！

26.这是一个免费在线的图像转换网站，支持超过100个主要的图像格式。

27.一种分析工具和一般的在线流量分析软件

28.HTML-ipsum生成虚拟的HTML代码来演示各种功能，包括：list和table

29.Iconfinder 就是一个专注于图标的搜索引擎，通过它你可以快速找到你所需要的图标。

30.Iconza 是一个提供精致图标资源的网站，而且它完全免费

31.iPlotz是一款可以模拟网页导航，链接和应用程序界面的设计工具。它可以作为设计师在团队中的协同和项目管理工具。

32.JsUnit是JavaScript的开源单元测试框架。它受到JUnit的启发，并完全用JavaScript编写。

33.Kuler 是Adobe 利用网友提供的配色方案做出的一个AIR 工具，用于汇总配色方案。

34.Load Impact是一个网站页面载入测试工具。 只需要输入网址进行测试，其便可以统计出加载网站的一些详细载入数据。包括整体加载和站内图片，javascript, CSS等代码载入

35.Lorem Ipsum是打印排版工业的无意义文本

36.myFontbook是一款在线的字体管理与搜索工具，你可以像本地的字体管理软件一样使用它，并且还能整合字体资源，帮助你检索到你没有的字体。

37.net2ftp 是一个简单，开源，基于Web的FTP客户端。

38.Photoshop.com是一个在线的图片编辑器和分享站点

39.在线表单制作工具

40.phpanywhere是一个免费的基于Web的PHP IDE（集成开发环境），它能够让PHP程序员在线编辑PHP代码，而不需要软件工具。

41.picmarkr 它可以让你添加自定义水印（图片或文字）到你的图片上面

42.在线图片编辑工具，拥有出色的UI设计、良好的用户体验以及强大的图像编辑

43.pict是一个免费的图片空间,你只需要点击选择你计算机上的文件,然后上传到pict就可以将您计算机上的图片文件存储在网络上

47.一个美化代码的网站，支持PHP，Java，C++，C，perl，JavaScript，CSS…

48.px 换算为 em 

49.ShowDocument是一个提供强大的在线分享及协作服务的网站，通过ShowDocument你不仅可以分享文档，协作白板，协作文档编辑，还可以分享同时浏览网页进行分享。

50.sikbox，专用于定制个人的博客搜索服务。制作SikBox Widget的过程十分的简单，用户只需要键入自己博客的URL，即可获取一段Javascript代码，嵌入自己的博客的适当位置即可拥有这款很炫、有着Ajax良好用户体验的私用博客搜索引擎

51.在线编辑和图片管理工具

52.templatr，在线制作wordpress主题可视化制作程序， 不需要下载任何程序

53.test everything！你可以检验CSS/HTML是否符合标准，检测SEO效果、查看你的站点在一些社会性服务的热门度、查看网站所在服务器的相关信 息。除此之外，TestEverything还提供了一些简单但实用的文字、图像处理工具，它甚至还提供了代理服务和其他一些五花八门的有趣服务

54.Tynt Tracer是一个提供网站第三方统计服务的网站，不过其统计的内容不是侧重于访问数或者访问来源，而是用户对于网页上面Copy的内容，你可以通过统计 后台实时查看你的网页上面哪些内容被Copy了，被Copy的频率等等，从而可以了解浏览者对网页上的哪些内容比较感兴趣。

55. typechart，快速浏览，比较各种不同的文字排版样式

56.typetester，一个在线字体比较工具，帮你快速找出最适合这个网页风格的字体

57.verb，一个用户的任务管理和共享应用

Verb is a user focused task management and sharing application.

58.ViewLikeUs是一个不错的工具来检查网站在不同分辨率下的显示状况

59.可以查看网站的标记并显示错误信息

60.Web Form Factory是一个开源的网络表单生成器，可自动生成所需的后端代码，以配合您的表单到数据库。可以提取html文件的数据库表单，并导入到PHP数据库

61.myfonts，免费在线分析图片中的字体

62.xencode，一个致力于把软件Web化的团队。他们开发的绿色浏览器，对于网站前台开发者来说很有用，可以同时虚拟所有的常用浏览器，而且无需安装软件

63.新的网站监测工具，可让您监测网站的正常运行时间，每当网站复发访问的时候，它都会即时的通过电子邮件或短信通知您。它可以从不同位置监控您的网站，并提供正常运行时间的历史报告。此外，地图网站的响应时间每月负载时间图表。

比如：某站，同时有“加入购物车、立即购买、加入暂存盘”等按钮，作为一个网购菜鸟，“加入购物车”这个名词已经让我很费解了，再来一个“加入暂存盘”，什么意思？

以下是洒家的发现：

        1）我查看的35个站点中（都是国内做得最好的），有大概1/4的站点同时有“立即购买”和“加入购物车”2个按钮。

          评论： 我个人认为这些站完全是抄袭淘宝这种业界的泰斗和先行者。淘宝最初也只有“立即购买”按钮，后来又加上了“加入购物车”按钮。淘宝作为一个平台型的C2C或B2C，有自己的特殊情况，比如：同时购买不同商家商品时购物车可以起到合并订单的作用，不需要买家重复操作相似的步骤；再比如淘宝上的很多产品可以砍价杀价，而一般的B2C价格已然定死，基本不需要询问即可立即购买。

         2）有一半左右的站点使用的是“购买”、“立即购买”按钮。

         评论：这些按钮其实跟“加入购物车”功能是一样的，只是称呼不一样。（有个别站点“立即购买”即跳入了登录或者注册页面，这种做法相当的失败）尽管功能一样，但洒家还是认同这个观点：“加入购物车”比“立即购买”好，“立即购买”几个字对菜鸟型网购者压力很大。

        3）部分站点“立即购买”或“加入购物车”按钮藏得很隐蔽或非常小气，我们看第10行第3排。

         评论：搞这么小明显是不想让人买。

        4) 点击“立即购买”或“加入购物车”后一般会出来“继续购物”和“去结算”2个链接。而“继续购物”按钮一般是链接至首页或者当前的产品页。

       评论：能想得这么周到的站点国内几乎没有。

打包下载：

35个国内顶级B2C站点的“加入购物车”按钮.rar

网上购物店的数据模型，它主要模式有产品：product ，帐户：Account，定单：Order。和产品相关的表有category ，product,item, inventory, supplier；和用户相关表有的account ，signon ，profile；和定单相关的表有orders,orderstatus,lineitem ，他们之间的整体关系如下.

ERD图

FK:Foreign Key

二、帐户模型

帐户模型，记录者用户的登录名称，密码。以及个人信息如地址，性名，电话等，还有它在系统中的profile信息。表有Account 主键是userID,它记录用户的基本信息，如email,name等。Signon 表记录者userID和password，Profile表记录者用户的登录系统的系统设置。可以根据用户的类型，显示不同的登录信息。

（1）account表

create table account (

userid varchar(80) not null,

email varchar(80) not null,

name varchar(80) not null,

status char(2) null,

addr1 varchar(80) not null,

addr2 varchar(40) null,

city varchar(80) not null,

state varchar(80) not null,

zip varchar(20) not null,

country varchar(20) not null,

phone varchar(80) not null,

constraint pk_account primary key (userid)

)

说明：primary key是userID,它记录帐户的基本信息。

（2）Signon 表

create table signon (

username varchar(25) not null,

password varchar(25) not null,

constraint pk_signon primary key (username)

)

说明：记录登录名和密码。

（3）Profile表

create table profile (

userid varchar(80) not null,

langpref varchar(80) not null,

favcategory varchar(30),

mylistopt int,

banneropt int,

constraint pk_profile primary key (userid)

)

说明：用户的登录信息，方便个性化定制。

（4）Bannerdata 表

create table bannerdata (

favcategory varchar(80) not null,

bannername varchar(255) null,

constraint pk_bannerdata primary key (favcategory)

)

说明：记录不同的登录信息。

三、产品模型

产品的模型主要有分类，它是产品的大类。表category 就是记录分类名称，描述信息。Product

记录每个产品的基本信息，包括产品名称，和产品的描述。它是一对多的关系。Supplier 表

记录产品的提供者信息，包括提供者的名称，地址，状态等。Item 记录产品的提供者，产

品ID,价格，状态。Inventory 表记录产品的数量。关系如下：

（1） category表

create table category (

catid char(10) not null,

name varchar(80) null,

descn varchar(255) null,

constraint pk_category primary key (catid)

)

（2）product表

create table product (

productid char(10) not null,

category char(10) not null,

name varchar(80) null,

descn varchar(255) null,

constraint pk_product primary key (productid),

constraint fk_product_1 foreign key (category)

references category (catid)

)

（3） item表

create table item (

itemid char(10) not null,

productid char(10) not null,

listprice decimal(10,2) null,.unitcost decimal(10,2) null,

supplier int null,

status char(2) null,

attr1 varchar(80) null,

attr2 varchar(80) null,

attr3 varchar(80) null,

attr4 varchar(80) null,

attr5 varchar(80) null,

constraint pk_item primary key (itemid),

constraint fk_item_1 foreign key (productid)

references product (productid),

constraint fk_item_2 foreign key (supplier)

references supplier (suppid)

)

（4） inventory 表

create table inventory (

itemid char(10) not null,

qty int not null

)

（5）supplier表

create table inventory (

suppid int not null

name varchar(80)

status  char(2)

attr1   varchar(80)

attr2   varchar(80)

city    varchar(80)

state   varchar(80)

zip    char(6)

phone   varchar(80)

constraint pk_supplier primary key (suppid),

)

四、定单模型

定单记录用户的选择产品信息，数量，表主要有Orders,记录用户的地址，帐户信息，总金

额。Orderstatus 记录定单状态。Lineitem 记录定单中的产品数量，单位价格，产品ID。

（1）orders表

create table orders (

orderid int not null,

userid varchar(80) not null,

orderdate date not null,

shipaddr1 varchar(80) not null,

shipaddr2 varchar(80) null,

shipcity varchar(80) not null,

shipstate varchar(80) not null,

shipzip varchar(20) not null,

shipcountry varchar(20) not null,

billaddr1 varchar(80) not null,

billaddr2 varchar(80) null,

billcity varchar(80) not null,

billstate varchar(80) not null,

billzip varchar(20) not null,

billcountry varchar(20) not null,

courier varchar(80) not null,

totalprice number(10,2) not null,

billtoname varchar(80) not null,

shiptoname varchar(80) not null,

creditcard varchar(80) not null,

exprdate char(7) not null,

cardtype varchar(80) not null,

locale varchar(20) not null,

constraint pk_orders primary key (orderid),

constraint fk_orders_1 foreign key (userid)

references account (userid)

)

定单的信息。

（2）Orderstatus表

create table orderstatus (

orderid int not null,

linenum int not null,

timestamp date not null,

status char(2) not null,

constraint pk_orderstatus primary key (orderid, linenum),

constraint fk_orderstatus_1 foreign key (orderid)

references orders (orderid)

)

定单中的产品状态

（3）lineitem表

create table lineitem (

orderid int not null,

linenum int not null,

itemid char(10) not null,

quantity int not null,

unitprice number(10,2) not null,

constraint pk_lineitem primary key (orderid, linenum),

constraint fk_lineitem_1 foreign key (orderid)

references orders (orderid)

In this example you will learn how to integrate Spring with Tiles 2. The directory structure of the example is shown below.

Add the following library files to the lib directory.

You will see how to create a simple classic tile layout with a header, menu, body and footer regions.

In Spring to use Tiles, configure the following Tile definition in the Spring configuration file.

Using the definitions attribute specify the location of the tiles definition file. Here the location is "/WEB-INF/tiles-defs.xml". The tiles definition file is shown below.

Here we first define a base layout, later we extend the base layout and create three more tile definitions by changing only the title and the body regions.

To dispaly views we use the ResourceBundleViewResolver. By default the views.properties file will be used to store the key value pairs, we specify this using the basename attribute.

The welcome, friends and office refers to the tile definition names (the one to right side of the = sign). For tile views we use "org.springframework.web.servlet.view.tiles2. TilesView" class. You can also have other views together with the tile views. The about url is mapped to the about.jsp page with is a org.springframework.web.servlet.view.JstlView.

The baseLayout.jsp file contains the table structure to hold the different regions.

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title><tiles:insertAttribute name="title" ignore="true" /></title>

</head>

<body>

<table border="1" cellpadding="2" cellspacing="2" align="center">

<tr>

<td height="30" colspan="2">

<tiles:insertAttribute name="header" />

</td>

</tr>

<tr>

<td height="250">

<tiles:insertAttribute name="menu" />

</td>

<td width="350">

<tiles:insertAttribute name="body" />

</td>

</tr>

<tr>

<td height="30" colspan="2">

<tiles:insertAttribute name="footer" />

</td>

</tr>

</table>

</body>

</html>

Here we use annotated controller handler mapping to handle the request. In the redirect.jsp page we forward the request to the welcome.htm url.

<% response.sendRedirect("welcome.htm"); %>

The welcome.htm url will be handled by the WelcomeController class, where we forward it to the welcome tile page.

package com.vaannila.web;



import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;



@Controller

public class WelcomeController {



@RequestMapping("/welcome.htm")

public String redirect()

{

return "welcome";

}

}

You can download and try the example here.

If you are still creating list data using table, look below and compare on how to make your life easier with HTML dl, dt, dd tags.

Live Demo | Download Demo

It may both look identical, but look closely behind the codes.

Table List Data

A typical listing data using table can be as follow. First we have a tr table row to hold the title and the data td table cell. Then when we need to style the title element, we will need to give a class to that td table cell.

So over here in the CSS, we style the title class that we had declare in the HTML.

From here you can see that if you want to change the design or format for the title in the CSS, you will need to give each td for the title a class. If you want to style the data as well, you will need to give a class to it as well, so you are actually writing a lot of codes. More codes mean larger file size to download, more chances for bugs and harder for you to maintain.

DL, DT, DD List Data

Now, let's look at using HTML dl, dt, dd tags for listing the data. First we have the dl (definition list) tag to hold the whole set of data, next we have dt (defines the item in the list) tag and dd (describes the item in the list) tag to hold the title and the data.

Over at CSS, we will need to float the dt tag, so that the title for the list data will align to the left. The rest of the styling is up to you.

From dl, dt, dd tags example, you can see that the codes are lesser, sleeker and much more semantic.

Live Demo | Download Demo

So if you are still using table to consolidate or list your data on the web form and web layout, it's really time now to make the switch. It's definitely going to make your life a lot more easier.

This version:

http://www.w3.org/2001/tag/doc/whenToUseGet-20040321

Latest version:

http://www.w3.org/2001/tag/doc/whenToUseGet (XML)

Previous versions:

22 Sep 2003 Draft, 19 Sep 2003 Draft

Editor:

Ian Jacobs, W3C

Copyright © 2003, 2004 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use, and software licensing rules apply.