思维 » 设计技巧

用Photoshop设计一个小型、现代的产品主页并由psd转换成XHTML/CSS模板

笑谈 — Fri, 11 Dec 2009 01:17:41 +0000

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

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

预览

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

建立一个新的Photoshop文档

1 首先在Photoshop中新建一个文档（Ctrl+N），大小为1200 x 1200像素，背景设为透明。

设置头部背景

2 使用矩形选定工具在透明的背景上画出一个矩形，矩形大小：1200px ×120px

3 使用油漆桶工具（G）用任意颜色填充头部刚才选定区域。点开图层样式对话框，用以下设置来增加一个渐变叠加效果。

完了，应该出现以下效果：

创建内容部分的背景图层

4 现在我们将要创建图层内容区域的第二部分背景。把前景色设为#00315C，背景色设为#001B32。选择矩形框选定工具（M）选定剩下的透明图层；选定后，选择渐变工具（G）,然后设置渐变类型为径向渐变。

5 设定好渐变工具（G）后，从顶部的中间垂直的拖动到画布的4/1大小左右。

添加参考线

6 现在我们需要一些参考线保留出宽度为850px的中间内容部分。选择视图 > 新建参考线。在新建参考线对话框中输入175px，取向选择垂直。这样一个画布左边的参考线就做好了。

7 重复6的步骤，创建另外一条垂直参考线，不过这次输入1025px (175px + 850px = 1025px)。这样一个850px宽、居中的区域就做好了。

设计头部区域

8 选择横排文字工具（T），然后对其左边参考线边沿添加上页面标题和标语。

9 在标题文本图层下面创建一个新图层，选定矩形选框工具（M），在头部选取出一个区域。宽度必须填满1200px，高度大概在60px左右。

10 用白色（#FFFFFF）填充（G）选定区域，然后在图层面板中设置透明度为25%。效果如下。

创建导航

11 选择横排文字工具（T），字体大小设定为11-12px左右。然后在标题和标示右边加入导航文字；没菜单项之间留出等宽的边距。

12 在每个菜单项之间使用矩形选框工具（M）做一个1px宽的分割线；长度跨越整个头部。用#CECECE颜色填充（G）这1px的线条。效果如下图。

13 现在，我们在每个菜单项中加入鼠标悬停动态效果（hover）。我已经给其中一个菜单项加入颜色表示鼠标悬停时的效果。使用多边形套索工具（L）按住shift，创建一个三角形，以保证每条线都是直的。

14 用#00315C这个颜色填充选定的三角形区域

创建欢迎区域

15 选择横排文字工具（T）,加入一些欢迎标语；同样左边距紧贴左参考线，然后在上面的页面标题和下面的欢迎文本中留出一定的空间。文本下面加入4个蓝色的列表图标。这个图标是 Function Icon Set 里面的（文件名是circle_blue.png）。

16 在欢迎文本的右边将插入一个欢迎图片；我这里使用的是Six Revisions网站界面裁图。裁剪你的图片，去掉不需要的部分。图片准备好之后，通过编辑 > 变换 > 透视改变图片的视角。

17 选择椭圆选框工具，然后在欢迎图片下方画一个椭圆。

18 用黑色（#000000）填充（G）椭圆选定区域。

19 然后设置区域图层透明度为35%。

20 然后使用滤镜 > 模糊 > 高斯模糊这个椭圆，设定模糊半径为1到2px。

21 把欢迎图片和下面的阴影再复制一份，然后把它们拖动到原图片的下面。

22 位置拖动好之后，使用高斯模糊下面的裁图，半径为1px。

创建水平3D分割线

23 选择矩形选框工具（M）层叠的创建两个1px的线条；宽度为850px，从左参考线到右参考线。你可以将两个线条放在同一个图层。

24 分别使用颜色#000D19和#003461填充这两个线条。

25 选择椭圆选框工具（M）然后在分割线上面画出一个椭圆。

26 使用黑色（#000000）填充（G）选定区域，加上2到3px的高斯模糊。然后使用矩形选框工具删掉分割线上半部分，这样就剩下了半个椭圆。

27 将这两个图层合并（Ctrl+E），然后添加一个图层蒙版（点击图层面板上的“添加图层蒙版”按钮）来合并图层。

28 使用渐变工具（G）,渐变类型为对称渐变，前景色设为白色（#FFFFFF）,背景色设置黑色（#000000）。

29 拖动对称渐变，从分割线中间向两边拖动，从而产生中间向两边淡入效果。

设计内容区域

30 选择横排文字工具（T）在3D分割线下方，右分割线的左边加入任意的文字标题和段落。

31 使用圆角矩形工具（U）在内容文本区域的左边创建一个圆角矩形；半径设为10px（默认情况下背景是10px）。

32 路径画好之后，选择钢笔工具（P），右击矩形内部，选择建立选区。

33 设置前景色为#00315C，背景色为#001B32 ，然后选择渐变工具（G），渐变类型为径向渐变。

34 从顶部把渐变拖动到中间，和我们绘制背景方法相同。效果如下图。

35 现在需要给圆角矩形图层加入投影、内阴影和描边的图层样式（双击图层面板上面的图层，打开图层样式对话框）。设置如下。

36 使用多边形套索工具（L），然后在矩形上面做一个三角形的选区。

37 剪切并复制选区到一个新图层，一般这样做将会丢失掉选取的图层样式，所以在这之前我们必须给右下角图层重复添加一次样式。

38 通过编辑 > 变换 > 旋转给边角图层翻转180度；

39 加入一些任意文字以完成内容框的绘制。

创建页脚区域

40 选择圆角矩形工具（U）在也叫拖动出一个圆角矩形。

41 使用任意颜色来填充这个圆角矩形选区，选区加入如下样式的渐变叠加效果。

42 最后，加上页脚信息就大功告成了。

完成

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

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

创建文件结构，准备文件

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

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

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

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

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


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

页面分区

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

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

#welcome, #sidebar, #content 和 #footer。

HTML代码如下：



id="container">

	
	id="top">

	
	

	
	id="welcome">

	
	

	
	id="sidebar">

	
	

	
	id="content">

	
	

	
	id="footer">

模板背景切片

7 在我们把各个div转成代码之前，我们首先在页面中加入背景。用Photoshop打开PSD文件，用矩形选框工具（M）选定头部/导航和背景的一点区域；选定的宽度可以只有1px

（因为我们将会在后面使用css来水平重复它）。

8 在选定区域的底部，用滴管工具（I）记录下色彩的16进制值。

9 选定好之后，点编辑 > 合并拷贝，创建一个新Photoshop文件（Ctrl+N），然后将选定区域复制到新文档中。通常新建Photoshop画布长宽是剪切板中选定区域的大小。如果不是，请确保他

们是一致的。

10 在新Photoshop文档中，点文件 > 另存为 web 和设备所用格式（Alt+Shift+Ctrl+S），选择PNG-8格式，保存文件为background.png，保存在images目录下。

将背景转成代码

11 现在我们已经将背景图片从Photoshop中切片出来，我们可以开始写代码了。打开CSS文件（styles.css），然后写入以下代码：


* {
	margin: 0px;
	padding: 0px;
	border: none;
}
body {
	background-image: url(images/background.png);
	background-repeat: repeat-x;
	background-color: #001b32;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #c8c8c8;
}
#container {
	margin: auto;
	width: 850px;
}

让我们来仔细的分析一下样式代码。

首先我们将所有元素的margin，padding，border的值归零以避免跨浏览器的兼容性。我们这个用到的是*选择器。

接下来，我们样式化 body 元素；我们将 background.png 设置为背景，通过 repeat-x 使它水平重复。同样把背景色设置为深蓝（#001b32）。

最后，我们把#container的margin设置为 auto 让布局居中，并且设置宽度为850px。

Logo和站点名的切片

12 现在我们接着制作模板的logo和站点标题。使用矩形选框工具（M），选定站点的标题和标示文本（以下图为参考）。

13 就像处理 background.png 一样，复制这个区域到新文档，然后保存为title.png放在images目录。

和站点名转换成代码

14 我们转到HTML文档中，在#top这个div里面我们创建一个新div，ID为title。

15 在#title div里面，加入

元素来放置我们的站点名；同样需要创建一个超链接（）链接到站点主页。对于这个模板，我们仅把href属性的值设为#，如果需要在实际中使用这

个模板，你可以用反斜杠（/）来代替#。

HTML代码如下：



id="top">

	
	id="title">
		href="#" title="Your Website Name">Your Website Name

16 现在我们转向样式表。样式化#top区域元素。代码如下。


#top {
	float: left;
	width: 850px;
	height: 119px;
}
#title {
	float: left;
	width: 278px;
	height: 74px;
	padding-top: 45px;
}
#title h1 {
	display: block;
	float: left;
	width: 278px;
	height: 74px;
	text-indent: -9999px;
}
#title h1 a {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(images/title.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

让我们来仔细分析一下上面的代码。

首先我们需要将#top浮动到左边，然后给定一个固定的宽度和高度。

宽度应该和#container等宽，850px，高度应该和浅灰色区域等高，119px。

接下来，我们使用一种CSS背景图片替换的技术使用text-indent方法。我们将#title h1

里面的文字向左缩进-9999px，将文字推出了浏览器的可视区域。这个技术对于屏幕阅读器的可访问性和搜索引擎优化都有好处。

导航转换成代码

17 在#top里面，#title下面我们创建一个ID为navigation的div。在#navigation里面增加一个无序列表，class值设为nav-links。以下

是#navigation的代码段。



id="navigation">
	
		href="#" title="home">home
		href="#" title="about">about
		href="#" title="portfolio">portfolio
		href="#" title="contact">contact

给无序列表设定一个nav-links的类主要目录是为了在链接CSS的时候不会影响到页面上的其他无序列表。需要注意的是，最后一个列表项加入borderx2的类，意为“边框乘2”；因为导航中的列表项都有一个分割线，我们需要给最后一样的左右都加上一个1px的边框（也就是边框乘2）。

悬停指示器切片

18 在给导航加入CSS样式之前，我们得首先把小小的悬停三角形切片。到Photoshop中使用矩形选框工具（M）选定这个三角形，复制透明背景的新文档，保存为images目录下的

nav_hover.png。

导航样式化

19 现在该是给导航加入CSS代码的时候了。使用以下代码。


.nav-links li a {
	float: left;
	width: 120px;
	height: 68px;
	text-decoration: none;
	text-transform: capitalize;
	color: #666666;
	font-size: 12px;
	text-align: center;
	padding-top: 51px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #cecece;
}
.nav-links li a:hover {
	color: #00284a;
	background-image: url(images/nav_hover.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
li.borderx2 {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #cecece;
}

首先，为了让列表项挨个的显示，我们将它们向左浮动。然后给他们固定的宽度高度，使他们之前的空间均衡。然后通过给text-decoration值none来去掉超链接默认的下划线。

然后给每个列表项一个1px、灰色的左边框。

然后通过:hover伪类来样式化悬停效果。当鼠标悬停时，我们将列表项的背景设为nav_hover.png。

最后解决最后一个列表项右边没有分割线的问题，需要给.borderx2类声明一个border属性。

创建欢迎区域

欢迎区域会被分割成两个部分，左边(#welcome-text)和右边(#welcome-image)。

20 在index.html的#welcome div中加入两个新的div，一个ID为welcome-text，一个ID为welcome-image。我们会在切片完成后将两个div填充上内容。

欢迎图片的切片

21 转到PSD文件，关闭除了有渐变效果深蓝背景的其他所有图层（点击图层左边的眼睛图标）。

22 使用矩形选框工具（M）选定一个宽度不超过850px的矩形，可以通过第一部分的设定好的参考线来选定。

23 将这个深蓝背景转成web图片content_background.png，放在images目录下。使用同样的方法，关闭除了欢迎图片图层的其他图层，切片蓝点和欢迎图片（见一下参考）。

新区域的HTML类似如下。



id="welcome">

	
	id="welcome-text">

	
	

	
	id="welcome-image">
		src="images/welcome_image.png" alt="Welcome..." />

24 在#welcome-text div中文名增加一些欢迎文字。使用

标签给欢迎文字增加标题，然后在以下添加无序列表。

25 在#welcome-image中添加欢迎图片（本案例添加的是Six Revisions的网站裁图）。

合起来，HTML代码如下。



id="welcome">

	
	id="welcome-text">
		welcome to yourwebsite!
		Lorem ipsum dolor sit amet, consectetur[...]
		Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.
		
			Lorem ipsum dolor sit amet...
			Lorem ipsum dolor sit amet...
			Lorem ipsum dolor sit amet...
			Lorem ipsum dolor sit amet...
		
	
	
	
	
	id="welcome-image">
		src="images/welcome_image.png" alt="Welcome..." />

样式化欢迎区域

26 现在样式化欢迎区域。复制以下代码到CSS中，后面有对代码的解释。


#welcome {
	float: left;
	width: 850px;
	background-image: url(images/content_background.png);
	background-repeat: no-repeat;
	height: 326px;
	padding-top: 40px;
}
h2 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 16px;
	margin-bottom: 15px;
}
.heading-color2 {
	color: #9a9a9a;
}
#welcome-text {
	width: 406px;
	line-height: 18px;
	padding-top: 50px;
	float: left;
	text-align: justify;
}
#welcome-text {
	margin-bottom:10px;
}
.list li {
	text-decoration: none;
	background-image: url(images/bullet.png);
	background-repeat: no-repeat;
	list-style-type: none;
	float: left;
	width: 180px;
	padding-left: 20px;
	margin-top: 10px;
	background-position: left center;
}
#welcome-image {
	float: right;
	height: 326px;
	width: 427px;
}

让我们来详解一下上面的代码。首先，我们通过background属性（content_background.png）给#welcome加入渐变背景，并且是不重复的

（repeat: no-repeat）。让后给这个div一个固定的宽度高度；宽度为模板内容宽度（850px）,高度为欢迎图片的高度（236px）。

通过text-transform属性让

内的文字大写。将‘yourwebsite’包裹在class为heading-color2的span中，赋予其不同的颜色。

无序列表加入类list，然后把背景设置为bullet.png，通过list-style-type设为none去掉默认列表项前面的圆点。

最后，为了让#welcome-image在#welcome-text的右边显示，我们将其向右浮动，给定固定的宽度（在浮动元素中常用）。同样给welcome_image.png一个固

定的宽度高度值。

3D分割线切片

27 对于3D分割线，我打算通过加入类为separator的div，可以实现复用。使用矩形选框工具（M）选定区域宽度不能大于850px，高度不能超出3D分割线本身的大小。

28 用之前的方法将选区存为images目录下的separator.png。

3D分割线转换成代码

29 对于分割线的HTML和CSS相当简单。在index.html中#welcome下面插入div。将放入.separator的div中。

30 CSS文件中加入如下代码。


.separator {
	background-image: url(images/separator.png);
	background-repeat: no-repeat;
	float: left;
	height: 17px;
	width: 850px;
	margin-top: 20px;
	margin-bottom: 20px;
}

我们将.separator的background-image设定为separator.png。给定宽度850，然后向左浮动。height值等于separator.png的高度。然后给顶部和底部

margin设为20px，让它们彼此之间有一定的间歇。

侧边栏切片

31 对于侧边栏，我们仅需要侧边栏框。这个教程中侧边栏框大小是固定的，但是如果需要可以很容易的扩展（这部分叫给大家自己完成）。使用矩形选框工具（M）选定这个侧边栏框；我的

选定范围是259 x 259px.

32 存为images目录下的contentbox.png。

33 使用矩形选框工具，设定宽度为1px，高度为2px。选定文字之间的分割线部分。

32 和往常一样，存为images目录下的divider.png 。选定很小是因为下面将通过CSS将其水平重复。

编写侧边栏HTML代码

35 在.separator层下面，是我们的#sidebar，将

作为侧边栏标题。然后给无序列表加入类sidebar-list使样式可以自定义。



id="sidebar">
	lorem ipsum dolor
	
		Lorem ipsum dolor sit amet, consectetur sit adipiscding...
		Lorem ipsum dolor sit amet, consectetur sit adipiscding...
		Lorem ipsum dolor sit amet, consectetur sit adipiscding...

通过CSS样式化侧边栏

36 CSS中加入如下代码


#sidebar {
	float: left;
	height: 209px;
	width: 219px;
	background-image: url(images/contentbox.png);
	background-repeat: no-repeat;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
}
h3 {
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	margin-bottom: 20px;
	font-size: 12px;
}
.sidebar-list li {
	list-style-type: none;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(images/divider.png);
	background-repeat: repeat-x;
	background-position: bottom;
}

我们给#sidebar和contentbox.png一样的宽度高度。然后向左浮动，保证内容居左。同样设定background-image为contentbox.png。

通过text-transform将h3文字大小，通过text-align让文字居中。

最后通过list-style-type取值为none去掉.sidebar-list列表项的默认圆点，然后设定background-image为divider.png，水平重复

(repeat-x)。然后给定一些margin和padding值，让他们之间留些空间。

内容区域转换为代码

37 内容区域相对简单，因为只包含了一些段落和标题。在#content层中，加入二级标题(

)，然后通过span.heading-color2给第二部分的文字添加不同

的颜色。填充段落可以用lorem ipsum无意义文本。HTML代码如下。



id="content">
	welcome to yourwebsite!
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.

内容区域样式化

38 #content层加入以下代码。


#content {
	float: right;
	width: 550px;
	text-align: justify;
}
#content p {
	margin-bottom: 10px;
}

为了让#content在右边显示，我们将其向右浮动，然后给定一个固定的宽度。不给定一个固定的高度的原因是我们想通过内部文本来控制高度。然后给

加入顶部

和底部margin让它们之间留有空间（因为之前我们已经将它们都归零了，这步是必须的）。

页脚切片

39 就快要结束了，让我们继续！使用矩形选框工具，大小850px × 60px将也叫背景图片选定。

页脚转换成代码

40 页脚很好转换成代码：我们之需要之前创建的#footer。在#footer层中，我们使用

加入一些版权文字。代码如下：



id="footer">
	Copyright © Six Revisions - Design By Richard Carpenter

将页脚样式化

41 加入如下代码。


#footer {
	float: left;
	width: 850px;
	background-image: url(images/footer.png);
	background-repeat: no-repeat;
	height: 60px;
	margin-top: 40px;
	padding-top: 25px;
	text-align: center;
}

我们将#footer层的background-image属性设置为footer.png；向左浮动；通过no-repeat保证背景图的不重复。#footer宽度高度大小和footer.png相

等。然后在顶部通过margin给出一定空间。

完成！

我们做完了！谢谢阅读本教程，我很期待大家的评论和问题！如果大家做的不错，最终效果应该像这样：

（点击图片查看在线demo）

值得关注的原型设计软件——Balsamiq Mockups

笑谈 — Wed, 09 Dec 2009 09:41:51 +0000

作为一个网站设计人员，最难的一般存在于二个阶段：

针对用户——需求沟通及雏形展示的迭代过程；
针对自己——雏形及UI设计的起始过程。

这也是最为直接、直观、起始并终极的二个阶段。

这款名为Balsamiq Mockups的产品原型设计软件可以在很大程度上帮助你顺利解决这些问题。

经试用，Balsamiq Mockups有如下优点：

完全手绘风格：对于一名程序设计员，创意决定成败，这款软件的全手绘风格界面下，应该会点燃你的一丝创意灵感了吧！
黑白配色主体：花花绿绿的成品固然是最终，但在设计阶段却并不可取。一种简洁的配色可以让你更加关注于方案的主体，不至于杂乱无章而无从下手。
控件资源丰富：基本上常用的控件类型都涵盖其中，并且软件本身也伴随着升级不是？！放心，够你用的。
其他方面：包括操作便利性、中文支持、导出格式、平台、版本等，看图和看网站介绍就够了，不多说了。

直接上些漂亮的截图：

怎么样，很独特吧，有兴趣的快去Balsamiq Mockups 官网试用一下，包括在线版本。

尽管国内用户对于国外软件的支付很不适应，但Balsamiq也为用户提供了免费获得注册码的机会，这是一个非常聪明的做法，毕竟已经不是“酒香不怕巷子深”的时代了，网络、网民的宣传力量是无穷的，包括这种营销策略，很多老守田园的经营者们也值得借鉴与学习一下。

写完本文，博主也尝试去申请一个注册码，期待Balsamiq的诚信与效率。申请成功与否我会通报给大家，但绝不会公布注册码，请大家不要跟帖索取，尊重与诚信都要求我们珍惜与捍卫。

申请状态反馈：

写博后开始申请，发邮件时间2009年12月9日18:04，收到邮件时间2009年12月10日09:26，不到16个小时，可以说Balsamiq反应很迅速，企业反应与执行力值得称道和学习。注册完毕，一切OK。

再次规劝想使用的朋友自己去申请，顺便复习一下英语也好。

在现代网页设计中的模态窗口

笑谈 — Wed, 03 Jun 2009 00:34:15 +0000

网页设计本质上讲就是把信息组织成一种可读，实用，功能性的并且可以方便的格式。良好的内容组织是至关重要的，当你在建立一个网站的时候你需要一个强大的布局。您可以使用众多的界面元素和结构去组织内容，如jQuery内容滑动器（slider）和模态窗口（modal windows。从根本上说，就是窗口浮动在网页上。

模态窗口有许多优点。例如，当一个模态窗口包含一个较小的元素时，用户并不需要加载一个完成的全新新页面就可以访问它。（达到同样效果的另一种方式来是使用基于AJAX的标签）。通过模态窗口，您提高网站的可用性。一次又一次的加载网页是会令大多数用户感到烦扰，因此避免这种状况绝对是一件好事。模态窗口也可以为您以节省空间通过避免使用不需要出现在主页面的大元素。例如，您只需提供一个链接，缩略图或某种按钮，而不是把完整的视频的放在网页上。

在这篇文章里面，我们将了解建立多态窗口的最佳做法和趋势。我们也会提供许多良好的模态窗口的例子和一些脚本来帮助您开始建设他们。

你可以对下面的文章也感兴趣：

When to Use Modal Windows 何时使用模态的Windows

模态窗口是一个很好的结构元素，但是他们并不一定适合所有的内容或媒体类型。这里有几个元素素，您应该考虑使用模态窗口。

Lightbox for Images/Videos 为了图片/视频的lightbox

最明显的使用模态窗口的是lightbox，用一种干净和实用的方式来展示图片和视频。使用lightbox展示图片，用户不需要只是为了一个单一的图片或视频而加载新的页面。模态窗口也在内容布局中节省了空间，使您只显示图片或视频的缩略图，点击缩略图，它的模态窗口打开。使用缩略图代替整个元素，你需要少得多的空间而且布局看起来更有组织。

此外，你通常会模糊或渐暗模态窗口后面的的背景，把焦点放在图片或视频本身，从而创造一个良好的环境使访问者可以查看媒体。对褪色，模糊模态窗口的背景的细节，看下面给出的样式实例。

当使用了lightbox来实现一个图像画廊，一定要确定链接每个图像到相同的lightbox，提供“下一个”和“上一个”的按钮，使用户可以方便的浏览的一组图片。用户可以不关闭并重新打开模态窗口，以查看画廊中的每一幅画。

Contact Forms 联系表单

在模态窗口中的表单是一种常见的联系表单。模态窗口为了这个目的做的很好，是因为您不用为了这个功能建立一个完整的网页。依据可用性来说，立即可用和容易找到对于联系表单是非常重要的。使用浮动窗口，联系表单在每个页面是容易访问。联系表单一般很小，所以他们会相当不错组装在这些窗口中。

Sign-Up/Log-In Forms 注册/登录表单

你可以用一个模态窗口来代替一个单独的页面让用户登录和注册。这种方法可以让表单在每一个页面可用并且容易访问。你可以包含一个登录创库在页面的标题的地方、

Alerts/Notices 警告/提示

当您想提醒用户一个关键功能或行动将发生，最好的方法是通过一个模态窗口。当一个模态窗口在一个页面打开，用户不能忽视它，因为它将直接显示在屏幕中央，那里真是用户关注的地方。此外，其余内容将褪色并禁用，因此用户什么都不能做，直到他们看到模太窗口然后单击关闭。在下面的截图中，您可以看到一个模态窗口被用来提醒用户将进行下载。

请注意，你不应该使用模态窗口作为弹出的代替办法。请确定只有当当前会话中有很重要的事情发生的时候警示访问者。在许多情况下，一个简单的褪色块布局回比一个模态窗口好得多。

Help Elements/Tips 帮助元素/贴士

额外的帮助元素和提示内容是没有必要对于网站的功能和导航，所以你不想让他们占据空间并且放在主要内容里面。并不是所有的用户想要使用他们。然而，他们需要放在谁想要使用它们就能轻易找的位置，因此使用模态窗口似乎可以合理地显示帮助内容和技巧。用户可以方便地打开和关闭它们，而且不需要把它们当作页面的内容和功能。

以下是一个很好的帮助元素在浮动窗口的例子。这个窗口远小于其他的我们已经看到，但它包含着类似的功能。例如，通过一个半透明的边界使视觉上分离并且有一个 “退出” （关闭）按钮在右上角。

Search Boxes 搜索框

这是一个不太常见的做法，但你会偶尔会看到模态窗口中包含搜索框。先进的搜索功能会占用了不少的空间，因此，您可以把它在一个浮动窗口以防止大搜索框占据大量空间。你可以在下面的截图看到这在实例中。

Embedding PDFs 嵌入PDFs

有时候你需要嵌入文件在你的网站上，如PDF格式的简历。你可以使用模态窗口，代替用户可以点击下载PDF到他们的电脑或其他的嵌入的PDF的方式，达到同样的目的。以这种方式， PDF格式可以很容易地浏览，而不会影响用户体验的。通过模糊的背景，你也把重点放在你的PDF格式，提高了可用性。

Usability and Styling Practices 可用性和样式实例

下面列出的可用性和样式的做法和趋势，在你创建模态窗口的时候记得这些。

Blur and Fade Out Background of Window 模糊和渐暗窗口背景

对于可用性和样式最重要的是淡出浮动窗口后面的页面。你将会看到这样的实例几乎无处不在，最常于lightboxes用来显示媒体文件。通过淡出网页，您将让用户所有的注意力集中在浮动窗口上。如果背景不淡出，用户甚至可能不会马上意识到窗口是“漂浮”的网页上面而不是部分的主要布局。一个窗口物理地浮在网页上的样子使增加了网站的维度。它看起来更整洁并且消除混乱。总体而言，淡出提供窗口和页面所需的分隔度，增强了功能性和实用性。

确保淡出的程度，但留下一个轻微的不透明，使用户知道该网页并没有消失。例如，一个黑色淡出加上75 ％左右不透明效果就非常好。但是，对于网站的一个白色的背景，褪色的页面用白色并且一点点不透明，再加上使用落下式阴影。

有时你会看到一个模态窗口，并不淡出整个页面，而是具有很强的阴影来增加层次感。这就造成同样的效果，并提供了类似的视觉分离。你可以在下面的截图看到使用这种技术完美使用。

Exit Strategy: Button, Click Outside Window, Escape Key 退出策略：按钮，点击窗口外，退出

为了提高功能性，始终提供一个退出按钮在窗口上面的角落里。标准做法是用一个简单的圆形带有“ X ”图形的按钮，这样做对于用户来说非常整洁并且相当明显。在下面的lightbox中，你可以清楚地看到退出按钮。

其他允许用户关闭模态窗口的方式是让他们点击窗口后面的页面，点击模态窗口中的显示元素或者使用Esc键。

Disable All Other Page Functions 禁用页面上其他所有功能

禁用窗口背后页面里的所有功能。当模态窗口打开的时候，它应该是去焦点，并且没有按钮应该能够被点击。浮动窗口应该跟其余内容分离开来，所以禁用页面能创建一个更好的分离。保持页面滚动功能是一个好主意，不过，如果需要的话，用户至少应该有一些自由返回到页面。

Using Transition Effects 使用过渡效果

过渡效果的小细节，如果用正确的方式做看起来会很不错。一个很好的过渡效果是模态窗口的渐进渐出。但是，不要做的太过让点用户觉得烦。保持渐变的简短但要稍微能注意到。

在下面的例子中，灰色的模糊背景渐进渐出，创造了非常好的效果。

Scripts, Tools and Plug-Ins For Lightboxes and Modal Windows

Lightboxes and Modal Window 的脚本，工具和插件

当你开始集成模态窗口的进程的时候，你可能需要一些东西来构建它。这里有11个出色的基于模态窗口的jQuery脚本和插件。每个都有自己独特的特点和功能，所以查看他们所有的。

Fancy Lightbo

这是一个比较好的Lightbox jQuery插件。它很时尚并且非常具有功能性。它有整洁的风格，标记功能和网页很好的整合，并与AJAX结合。

Lightbox 2

这是原版的lightbox的脚本，仅仅只是为了图片而创建的。它简单的风格而且支持一组图片的浏览。

Facebook Image/Content Viewer

这有一个基于facebook浮动窗口很棒的脚本。它支持图片和内容，并且用跟facebook非常著名的窗口相似的风格

Woork Mootools Lightbox

这是一个来自woork的很棒的教程，他指导你怎么创建一个简单的lightbox的脚本。这个脚本包含了支持一组图片和标签的特性。

nyroModal jQuery Plug-In

这个简单的窗口插件支持所有形式的媒体文件，包括ajax。他也有很好的显示/隐藏的效果。

jQuery Alert Dialog

这个jQuery 插件是用来警告和对话的窗口。它拥有众多的功能并且可以很好的传递信息给用户。

LightWindow

这里是一个有很多特性的综合性的lightbox的脚本，例如嵌入pdf，支持多个图片画廊， SWF执行等等。

Prototype Window Class

另外一个深入系列的的脚本，有各种不同的功能，例如对话框，登录窗口，ajax内容窗口，图片lightboxes 等。

ThickBox 3.1

一个很流行的lightbox工具， Thickbox。他支持图片，在线内容和AJAX。

prettyPhoto

这是一个时尚的图片lightbox，很好的支持图片集。

jQuery Expose

这个是有一点不同于模态窗口的脚本。他展示选中的HTML元素。当你单击一个特定的元素，页面剩下的元素会渐出。这是一个很棒的模态窗口的替代品。它也支持页面的渐出而是注意力集中在选中元素上。

Showcase of Modal Windows 模态窗口的展示

Grooveshark
Grooveshark 是一个结构量和风格良好的应用。模态窗口也无一例外，一个模态窗口，被用在用户的注册登录的模块。

Digg
Digg 是另外一个使用浮动窗口来注册和登录的用户生成的网站。登录的链接放在页面的标题处。注意一个半透明的边界被用来代替渐出和投影。这个边界提供了更多的视觉隔离感。

Apple Movie Trailer

Apple 在很多地方使用模态窗口。你可以看到一个窗口备用来观看电影预告片。这个窗口建立的很好使得大的视屏文件不会影响到窗口的表现。

Apple iMac: Design Gallery

另外一个Apple网站的模态窗口的例子。它有非常简单干净但是强烈的投影来实现视觉隔离。

Espionage

另外一个一个图片的lightbox的例子。在这个例子中，图片扩展到窗口的边缘，并且推出按钮直接覆盖在图片上。在这里没有边界是必要的因为强烈的色彩对比

Daylite 3

一个很好备件渐出的窗口的例子。多个页面内容被集成在一个单一的模态窗口中。

Behance

另外一个联系表单，这里有一个熟悉的“发送给朋友”的元素，这个被警察放在模态窗口中。因为网页有很深的背景色，一个淡的半透明的边界被用来做分隔。

Facebook

Facebook 有非常容易辨识的模态窗口。这个包含信息链接到一个帮助元素在注册表单里。并且，一个很强的半透明边界。

KISSmetrics

这是一个很棒的在模态窗口登录表单。这个表单有良好的风格并且包含了帮助元素来提高可用性：只是因为登录窗口并不意味着你可以忽视可用性。

Nasi Briyani Lounge

另外一个登录表单。这个有一点不同。他是用一个简单的弹出窗口代替一个完整的模态窗口。

Pixelight Creative

一个自由职业者网站里的lightbox。当你单击每一个工作档案，一个大一点的图被打开在lightbox

Capo

另外一个时尚的窗口，这是一个软件漫游的视频，这是一个普通的例子。它和包含了一个简单的边界和投影。

Accept-Idea

另外一个浮动窗口附属于搜索窗口。当你输入一个查询，结果显示在模态窗口里。这个窗口有基本的功能，包括一个推出按钮和边界。

The Typographic Desk Reference

一个很简单的模态窗口，用强阴影来增加深度。

Evernote Web Application

这个显示一个警告当你打开一个Everbote‘s 网页应用。注意页面是怎么渐出的，它是的所有的注意力集中在窗口内容中。

Iceberg

另外一个在浮动窗口的登录表单。着一个没有渐出和阴影而用一个边界来分隔。

Viewzi Corporate

一个漂亮风格的模态窗口。注意干净的大腿处按钮在上角，大的填充和半透明背景。

Mail Chimp

这个lightbox有半透明边界和页面的渐出。

The Resumator

注意这个怎么强烈的图片背景跟页面背景的对比。一个标签被用在这里而不是属于窗口，创捷了很好的外观。

Checkout App

一个风格很不错的图片模态窗口，这个窗口用一个投影来增加深度并且一个实心的边界提供给多的分隔感。

Pixelmator

另外一个很好的下载警告例子。这个警告当下载开始的时候离开弹出，注意非常棒的样式，就像窗口的轻微不透明。

Ballpark

这里有一个视频的模态窗口，通常用在公司和软件的网站里。你经常看到QuickTime 和 SW在模态窗口里，但是这个是嵌入一个Vimeo的视频。并且有非常好的渐进和渐出效果，

Backpack

这是另外一个用来放视频的窗口，再次注意页面是怎么渐出更淡的而不是更深的颜色。

Guifx
An image lightbox for a portfolio, always a great idea if you want to include larger images to show details of your work.

一个为了作品档案的图片lightbox，如果你想包括一个大一点的图片显示你的工作详细一点的信息的话，这是一个很好的主意。

摘自：http://www.yeeyan.com/articles/view/orangedan/43521

互联网应用表单设计

笑谈 — Tue, 02 Jun 2009 03:44:00 +0000

“表单元素应按照逻辑组织，使得用户思维对表单能按相关字段组成的块进行处理。”——HTML: 定义指南。

大部分网络应用都要使用大量的表单以进行数据录入和配置。但是不是所有的网络应用的表单都是统一的。表单字段的不同对齐方式，不同的标签，动作调用以及周围的视觉元素都能对用户的行为的不同方面起到正面或负面的作用。

表单布局

如果填写表单的时间需要尽可能短。而且用户对需要填写的数据是非常熟悉的（比如，在订单流程中输入姓名、地址和支付账户信信息），标签和输入框最好垂直对齐。每个标签和对应的数据框排列在垂直方向上临近的位置，所有的输入框和标签垂直对齐能够节省视线移动的过程和时间，用户只需要在垂直向下一个方向上移动视线。

在这种布局方式中，建议对标签使用加粗字体。可以强调视觉重量感，在整体布局中突出标签。如果不加粗的话，标签会在视觉吸引力上和输入区域相混。

如果表单取得数据并不为用户所熟悉，又或者不好按照过程分组（比如地址的不同部分），左对齐比较容易看出表单需要的信息。用户可以上下浏览标签就可以了解需要填写的数据而不会受到输入框的影响。但是，标签和输入框之间的距离通常会被最长的标签撑开，填写表单的时间可能会受到影响。用户需要在列于列之间跳跃寻找标签和输入框之间合适的组合。

还有一种选择就是右对齐标签，这样标签和输入框的对应组合就比较明了了。但是，左侧的参差不齐影响到快速了解所需信息的效率。在西方，习惯从左到右阅读，眼睛更习惯左边有轮廓鲜明的边线。

使用视觉元素

由于“左对齐水平排列标签”的优点（容易纵览标签信息以及节省垂直空间），则有可能会尝试去削弱其主要缺点：表单输入框和对应的标签的分散问题。

其中一种办法就是为标签曾加背景色和横隔线为特征：不同的背景色将表单分成垂直标签列和输入框列；横隔线将每个标签和对应的输入框划分成一组。虽然这些方法可能看起来是可取的，但也的确制造一些问题。

通过格式塔（人们的先天视觉感知规则）可知，另外还有15个视觉元素也被一同加到布局中：中线、每个有背景的方块，每个水平线。这些元素开始分散用户注意力从而使得将焦点放到重要的元素上——标签和输入框——增加了难度。Edward Tufte曾经指出：“信息包含着有重要影响的差异”（信息由差异性构成–译者）。换句话说，所有不能帮助布局的视觉元素都将会伤害到布局。这一点在你需要扫视左列标签时可以表现出来。视线一再受到水平线、边框和背景构成的方块的影响而停顿。

当然也不是说表单布局中绝对不能使用背景颜色和分隔线。当有必要向用户指出组与组之间的关系的时候，细分隔线或者浅背景色可以再视觉上将有关联的数据组合起来。这两个元素（分割线和背景颜色）都可以有效地帮助吸引用户对表单基本动作的注意力。

基本动作和次级动作

表单的基本动作（通常是“确认”或者“保存”）需要更明显的视觉感受有别于其他的表单元素（在上面的例子中鲜明的颜色、加粗字体、背景颜色等等）而且需要与输入框垂直对齐。这能指引用户完成表单。

如果表单含有多个动作，例如“继续”和“返回”，则减弱次级动作的视觉重量感则比较明智。这可以最大程度减少潜在的错误，进一步指导用户完成表单。

尽管有这些指南可以帮助你更好的设计表单位置，但是布局的组合，视觉元素以及所需的内容，仍然需要通过用户测试和数据分析进行验证（完成率、出错等等）。

摘自：http://www.yeeyan.com/articles/view/danqing/42079

你需要知道的开发Web应用程序的结构化过程

笑谈 — Tue, 02 Jun 2009 03:06:37 +0000

开发web应用程序是一件非常辛苦的事情，你需要花大把大把的时间来做无数的事情。假如你不运用有条理的方法，尤其是在复杂的项目中，你会承受忽视项目，不能按时完成，浪费时间一无所获的风险。

这篇文章中，结构化过程的插图可以帮助你运用简化的方法更加节省时间更加有效的建立你的web开发程序。

下载 Woork Papers N1幻灯片 |你需要知道的开发Web应用程序的结构化过程

工序的主要阶段

一般的web应用程序开发流程分为五个主要的阶段:
1. 明确需求
2. 设计
3. 执行
4. 测试
5. 发行

规划与跟踪监测是一个“跨阶段”的跟随开发发展的过程，定义一个在项目执行期间你需要跟踪监测的项目计划活动名单，并且每项活动需要定义一套行之有效的信息报告来进行跟踪监测，例如：

- 拥有者
- 持续的时间
- 所耗
- …
看一看这些前一段我所写的文章，怎样使用Excel或者Google制表软件设计制作项目实施计划：
How to organize a project plan 怎样组织项目规划
Excel Gantt chart template Excel图表设计绘制模板
Implement a project plan and manage activities with Google Spreadsheets 使用google电子表格实施并灵活管理项目规划

1. 需求定义

在这第一阶段你必须确定范围和Web应用程序的需求，在你的应用程序中必须做的，主要特点和技术要求：

范围
为了确定Web应用程序的范围,足以编制一份明确说明适用功能的详细清单。目前重要的不是“如何”实现他们，而是“什么”需要实现！
需求
需求分析需求分析是一个开发过程的关键组成部分。在这一步中你需要估计潜在流量，选择一个服务器端语言（ PHP， ASP， Coldfusion …),数据库，选择一个托管服务…这里需要非常注意不要高估 /低估预期！准确的平衡的预估时间，成本和目标之间每件事情！

2. 设计

在需求定义阶段，你需要明确的规划“设计”你的应用。在这个阶段，可以按照以下步骤：

设计: 应用图
应用图包含对应用有意义的和必要的结构信息：页面（用区块表示）和他们之间的主要关联。你的应用图可以像这样：

通过这种方式，您拥有了有关一些“位置” （页）和“路径” （关系页）的图，您可以非常容易的遵循它，逐页，以执行应用程序的下一阶段。运用这种方式，可以节省大量的时间，并明确什么是你需要执行的。
设计: 数据库
Ok,现在到了设计数据库的时候了。一个简单的实现方法是使用实体关系（ER）模型。一般来说，你可以俺咋好下面的顺序：定义第一个表确定第一个表，而不是属性和关系的表格。您的ER模型将是这样的：

1:1表示集的关系（在这种情况下，例如1用户只能分派1的任务， 1个用户只生活在一个城市）。欲了解更多有关这一主题的内容，来看看我的旧文章：
Define the entities-relationships model 定义实体关系模型
A correct approach to define relationships between database tables 正确对待，以定义数据库表格关系
10 Useful articles about Database design 十篇有用的数据库设计文章
设计: 页面结构

下一步工作是设计大体的页面结构，用名称命名确定所有的主要部分 (例如 #header, #navbar, #mainContent, #sidebar).
设计: 服务端语言
使用面向对象的开发方法进行开发，你可以定义类，函数和所有你所需要的，记住… 那不是“执行”只是下一阶段实施的“指南”.
设计: JS 框架
这一步选择JavaScript 框架(jQuery, Scriptaculous, MooTools…), 通过确定主要的特点和所需实施的效果（拖放，动画效果… ）编制简单的关于在一个或多个网页中有关联的每一个具体功能应用图的列表。

次点设计阶段已完成。让我们实施吧！

3. 实施

Ok.. 现在是真正的挑战的开始，因为“执行”才是实现应用。您可以划分这一阶段为以下几个步骤:

执行: 数据库
创建一个新数据库，写SQL代码定义表，属性和关系。看看下面的，过去我致力于一些有关此主题的文章的链接，以获取更多信息：
How to use PHP and SQL to create DB tables and relationships 怎样使用PHP创建DB表和关系
Create tables and relationships with SQL 使用SQL创建表和关系
执行: HTML
使用在设计阶段定义的页面结构实施 HTML 代码:

这是目前在已经确定的设计阶段需要田间的所有的HTML元素。例如 mainContent 部分包含了所发表的文章的标题，正文本，标签，添加他们:

实施: CSS
当主体结构已经准备就绪，开始编写CSS代码添加样式。如果您需要一些如何撰写更好的CSS代码建议，请看看这些文章：
CSS coding: semantic approach in naming convention CSS编码：语义的方法命名惯例
Useful guidelines to improve CSS coding and maintainability 有益的改善的CSS编码和可维护性的指南
实施: 服务器端语言

实施应用类，应用功能,DB互动，查询，以及一切需要服务器端的实现的交互。

实施: JavaScript
使用在设计阶段选择的框架（ jQuery ， Scriptaculous ， MooTools …)来实施Ajax的功能（拖放，动画效果… ）

4. 测试

在这一阶段需要“强调”的是。你的应用程序能在各种条件下执行（例如使用不同的浏览器）。您的目标是在最后释放前检测和修复所有的应用程序错误。

请记住，这一过程需要有条理，需要极大的耐心！测试每个页面和每个功能（在这种情况下还可以帮助理顺应用图）。如果在测试过程中发现一个bug ，修改代码修复它并继续进行最后的代码确认（进一步的测试）。

5. 发布

最后你准备好发布了！在测试文件夹中发布并做最后的测试，假如一切都OK的话，那就进行最后的发布吧。

在Scribd上，阅读与下载此篇文章

下载 Woork Papers N1幻灯片 |你需要知道的开发Web应用程序的结构化过程

摘自：http://www.yeeyan.com/articles/view/61966/42660?tag_related

使用整洁的HTML标记构建页面

笑谈 — Tue, 02 Jun 2009 02:58:40 +0000

网络是个不断发展变化的有机体，如何建设可以长久适应互联网发展的页面是很重要的，它可以是你的网站在互联网发展的激流中迅速跟进。

使用整洁的HTML标记，构建符合标准的页面可以帮助你做到这些，更重要的，它可以是你在未来的运营中节省大量的时间和金钱。

网页技术是跟随互联网技术的发展而进步的，HTML技术已经发展了很长时间，它的伴生技术也已发展稳定。

首先是Javascript，然后是CSS、XML，直到现在的AJAX，HTML5的大规模运用也已初现端倪——Firefox、Safari、 Opera和Chrome已经基本完全支持HTML5（在这个问题上，微软的Internet Explorer再一次阻碍了互联网的发展#-_-）

在这篇文章里，我们会探讨基础的web标准，讨论它们是什么，他们有什么意义，以及这些重要但常被忽视的问题的解决方法。

什么是“整洁”的HTML标记？

简单来说，“整洁”的HTML标记指的是：没有累赘，符合标准，使用有意义的标签和结构。

没有累赘的HTML代码可以充分的利用标签，消除了不必要的代码，仅保存有意义的标记。它避免了无用的属性，比如嵌入式CSS，保持了文档结构的整齐。

同样的，没有累赘的CSS代码应该避免自身的重复，使用可继承的属性(记住CSS的本意是层叠样式表)，并且科学的重用CSS Class。

符合标准指的是你的页面可以通过W3C的HTML、CSS、XML标准验证，使用免费的W3C验证器，找出并修改错误，继续测试知道100%符合标准。

为什么要这样？只要能正常显示不就够了吗？

每个项目都有一个紧迫的时限，用户希望网站越早发布越好。所以网站开发和设计人员都被要求快速高效的完成工作。

人很容易陷入一种陷阱——快速就意味着草率，书写整洁、符合标准的代码会浪费时间。经常有人说：“它正常显示了，就没问题了”。

虽然此时此刻它显示了，但明年呢？三年以后呢？浏览器换代怎么办？设备兼容吗？

你真的以为搜索引擎会去一行一行的抠你的代码吗，它们是很挑剔的，如果你不使用标准化的代码，就相当于你自己赶跑了搜索引擎。

如果有其他的员工来修改你的代码会怎样，如果你被老板炒了，或者自己跳槽了会怎样？会有继任者来看你的代码，理解它们的意思。你是想让这件事变得简单，还是想让他在背地里扎你的小人？

开始正确的书写它吧，这并不是一项烦人的事情，它会节省你的时间和金钱，并且让你少些后顾之忧。

你可能以为使用嵌入式CSS写页面更快，你也可能觉得不考虑结构直接书写HTML更方便。

但是当你修改文档或者将来你要改版网站的时候，你会花更多的时间来弥补劣质代码造成的干扰。如果你建立了新的样式表，那分散在HTML代码中的嵌入式CSS会给你带来很大麻烦，你可能会花几小时的时间来剥离他们。

可扩展，设备友好，语义化和易升级

手机浏览器的发展越来越快，手机上网不再是黑莓的专利，现在每天有数以亿计的人在使用手机浏览网页。

具备为视力障碍人士开发的辅助浏览技术或为肢体不方便的人设计的特殊操作界面的设备已经很常见。如果你不想失去这么庞大的用户群的话，就要考虑设备友好的问题。

你的网站可能会被以盲文的形式提供给用户，有了互联网内容存储、 Google快照等工具，你的网页即使被删除，也可能会在网络上被保留很长时间。

使用整洁、符合标准的标记可以使你轻松应对以上的情况。

Do和Don’t ("要"和"不要")

DO – 使用预定义的标签。例如：h1是一个网页内容中最重要的部分，然后是h2,h3等等，一个网页中只能有一个h1；

DO – 使用有意义的元素命名。问问自己如果别人来阅读代码的话，会不会明白你的class和ID的命名的意思，比如，同样一个层，用#box12 还是#comment-footer，你觉得哪个更好些？

DO – 充分利用CSS的继承性。例如：你在一个container中设置了字体属性，那么你就不必在其子元素中再分别设置了，除非它用不同的字体。这会使你的样式表明晰简洁。

DO – 让你的HTML、CSS、XML代码符合标准。使用W3C验证器验证错误和警告，修改它们知道100%符合标准。

DO – 反复检查所见即所得编辑器产生的代码。所见即所得浏览器是产生垃圾代码的大头，一定要尽量精简它产生的代码。

DON’T – 不要使用嵌入式css样式和无关的标记和属性。即使你很忙乱，也不要顺手加这些东西。

DON’T – 不要满足于“正确显示”。因为隐藏在页面中的错误可能会在其他浏览器或设备中把页面毁的面目全非。

摘自：http://www.yeeyan.com/articles/view/oc/40030?tag_related

CSS Sprites + 圆角

笑谈 — Tue, 02 Jun 2009 02:07:11 +0000

初步介绍

当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

看一下演示 | 下载 css sprites + 圆角

您还可以参考一下文章：

43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤

我们将怎样来处理?

我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:

是什么方式导致这项技术表现得这么了不起呢（What makes this technique cool）?

通过可变的宽度和高度处理毗邻的元素的能力。没有极限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.）这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!

第一步: 创建我们的 Sprite

为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).
切割并且导出圆角到本地临时位置 (我们将会在之后用到).
新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。
合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.
导出合成图片，sprite 也就大功告成了。

第二步: HTML 代码

首先，我们会给容器 div 一个 .roundedBox

类 :

class="roundedBox">

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner，同时也标识一个类来指定它们格子的位置。

class="roundedBox">
     My content in roundedBox Type 1
     class="corner topLeft">
     class="corner topRight">
     class="corner bottomLeft">
     class="corner bottomRight">

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三步: CSS 代码

如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。 哈?! – 好了，如果到此为止您仍没有掌握，不用担心，我们将在第二部分了解它。（翻译得有点拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）

让我们先来定义下所有的圆角

所有的圆角都必须定义绝对定位，并且注明高度跟宽度。 我的圆角定义的宽度跟高度都是 17px.

.corner {
position:absolute;
       width:17px;
       height:17px;
}

如果您是第一次切割矩形圆角，那么宽度跟高度很可能会不一样 (咄!)。

现在开始定义 div 容器样式:

.roundedBox {position:relative;}

任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

我也通过 margin 给我们的 div 流出了一定的空隙

最后，让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

您可能已经注意到，我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是，我们会使用另外的方法。

圆形盒模型 1 (蓝色)

HTML 代码

class="roundedBox" id="type1">
    My content in roundedBox Type 1
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

我们必须给容器 div 定义一个ID为 #type1，用来实施特殊背景。

CSS 代码

首先，我们得给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角:

#type1 {background-color:#CCDEDE;}

之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

好了，我们的第一个圆角矩形大功告成了！预览圆角矩形模型1 (蓝色).

圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色)

模型1，模型2跟模型3的唯一差别就是它们的颜色，所以我们也仅仅只修改这些。

模型 2 (绿色)

HTML 代码

class="roundedBox" id="type2">
    My content in roundedBox Type 2
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type2 {background-color:#CDDFCA;}
#type2 .corner {background-image:url(../images/corners-type2.gif);}

预览圆角矩形模型2 (绿色).

模型 3 (紫色)

HTML 代码

class="roundedBox" id="type3">
    My content in roundedBox Type 3
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(../images/corners-type3.gif);}

预览圆角矩形模型 3 (紫色). 都学会了吗？好，现在我们再进一步学习

模型 4 (红色边框)

模型4 跟模型1、2、3又有什么区别呢？边框和颜色，让我们来解决这些因素吧。

HTML 代码

class="roundedBox" id="type4">
    My content in roundedBox Type 4
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码 (在 sprite 中给您的边角的边框都添上边框，并使 .roundedBox 类的背景及边框融合 sprite。)

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

好了，这个就是截图效果。我们的边角还不能正确地覆盖 #type4 边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。让我们做到这一点:

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

好了，这就是我们完成的模型 4。预览圆角矩形模型4 (红色边框). We are almost there, don’t quit now :p

模型 5 (垂直渐变)

好了，模型5会需要更多的工作量，我们应该这样:

修改上下边角的高度 (由渐变度决定(depending on your gradient))。
修改上下边角的背景图定位 (由渐变度决定)。
通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。
值得注意的是，我们必须给内容设置一个大小，或者给容器设置一个最小高度(由渐变度决定)。

让我们开始吧。

HTML 代码 (跟之前的一样)

class="roundedBox" id="type5">
    My content in roundedBox Type 5
    class="corner topLeft">
    class="corner topRight">
    class="corner bottomLeft">
    class="corner bottomRight">

CSS 代码

我的渐变是从上到下垂直的。所以我们必须增加上边角的高度，以及更改下边角的背景图位置。当您看到我的新的 sprite 就会明白为什么会这么处理。就是下面这张:

我的div中的背景图片是这样的:

1px 的宽度，它的确是存在的。我的下边角有一条实心颜色，刚好可以匹配div的背景色。少说话多行动。我们来继续定义容器 div :

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}

给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度，正如我之前所说的，渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片，为的是能得到更好的渐变质量):

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}

现在，我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,#type5 .topRight {height:140px;}

最后，我纠正下下边角的背景图定位:

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! – 预览圆角矩形模型 5 (垂直渐变).

IE6 版本

这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它，那么它会泄露到盒模型之外。使用 IE6 条件式注释法来定义它。

最后的想法

我希望这项技术对您会有帮组，并且不会显得太难。垂直渐变、透明的角落，只要多加练习，您的脑袋会变得更加好用，也会更加容易定义样式。

摘自：http://www.yeeyan.com/articles/view/seasun/40032?tag_related

网页新手30条进阶秘技

笑谈 — Tue, 02 Jun 2009 01:51:50 +0000

许许多多的网页新手正徘徊在专业编码的门槛前，而网上的教程参差不齐，鱼龙混杂，很容易让新手迷茫。这里总结了30条网页编码的“秘技”，只要在编码过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。

1. 一定要闭合标签

在以往的页面源代码里，经常看到这样的语句：

Some text here.
Some new text here.
You get the idea.

也许过去我们可以容忍这样的非闭合标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的。一定要注意闭合你的标签，否则将无法通过验证，并且容易出现一些难以预见的问题。

最好使用这样的形式：

- Some text here.
- Some new text here.
- You get the idea.

2. 声明正确的文档类型( DocType )

笔者早先曾加入过许多CSS论坛，在那里，如果有用户遇到问题，我们会建议他首先做两件事：

1. 验证CSS文件，解决所有可见的错误

2. 加上文档类型 Doctype

DOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的是HTML，XHTML，

还是两者混合出现，这样浏览器才能正确的解析标记。

通常有四种文档类型可供选择：

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。

3. 不要使用嵌入式CSS样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点嵌入式css代码，就象这样：

Oncoding编码营

这样看起来即方便又没有问题，但是它会在你得代码中产生问题。

在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。

这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier

更好的做法是，把这个P的样式定义在样式表文件里：

#someElement > p {
color: red;
}

4. 在页面head标签中引入所有的样式表文件

理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。

在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，

因为这样可以使页面逐步渲染。 —— ySlow团队

My Favorites Kinds of Corn

5. 在页面底部引入JavaScript文件

要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入。所以会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

举例：

And now you know my favorite kinds of corn.

6. 不要使用嵌入式JavaScript，这都21世纪了！

许多年以前，还存在一种这样的方式，就是直接将JS代码加入到标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入时间侦听器。或者使用jQuery等框架，之需要使用其“clock”方法。

$(‘a#moreCornInfoLink’).click(function() {
alert(‘Want to learn more about corn?’);
});

7. 开发中随时进行标准验证

很多人并不真正理解标准验证的意义和价值，笔者在一篇博客中详细分析了这个问题。一句话，标准验证是为你服务的，不是给你找麻烦的。

如果你刚开始从事网页制作，那强烈建议你下载这个网页开发工具条，并在编码过程中随时使用"HTML标准验证"和“CSS标准验证”。如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。你的不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是—— 验证，验证，再验证。

8. 下载Firebug

Firebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。不用多说，下载它！

9. 使用Firebug！

据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

Firebug教程：

10. 使用小写的标记

理论上讲，你可以像这样随性的书写标记：

Here’s an interesting fact about corn.

最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：

Here’s an interesting fact about corn.

11.使用H1 – H6标签

笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。

12. 如果是博客，那把H1留给文章标题

今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。

13. 下载ySlow

在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的网页，并返回一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐—— ySlow！

14. 使用UL列表布局导航菜单

通常网站都会有导航菜单，你可以用这样的方式定义：

如果你想书写优美的代码，那最好不要用这种方式，

为什么要用UL布局导航菜单？

——因为UL生来就是为定义列表准备的

最好这样定义：

- Home
- About
- Contact

15. 学会怎样对付IE

IE一直以来都是前端开发人员的噩梦！

如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：

这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16. 使用一个好的代码编辑器

不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：

Mac 用户

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

PC 用户

17. 压缩前端代码！

通过压缩CSS和JavaScript代码，通常可以减小25%以上的文件体积，在某种情况下，这会大大减轻你的带宽压力，提高加载速度。

Javascript 压缩服务

CSS Compression Services

18. 缩减，缩减，缩减

回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

网页写完后，一定要多次回头检查，尽量的减少元素的数量。

能用UL布局的列表就不要用一个个的DIV去布局。

正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。

19. 为所有的图片加上Alt属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。

Firefox不支持显示图像Alt属性，可以加入title属性：

20. 学会熬夜

我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。

我的“啊～哈！”时间（ "AH-HA" moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！

21. 查看源代码

没有什么比模仿你的偶像能让你更快的学习HTML。起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！

留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。

22. 为所有的元素定义样式

这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记？那用户可能会用，你自己不使用OL？用户也可能会。花时间做一个页面，显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式，检查一下是否有遗漏。

23. 使用第三方服务

译者注：英文原文标题为“使用Twitter”

现在互联网上流行着许多可以免费加在网页中的API，这些工具非常强大。它可以帮你实现许多巧妙的功能，更重要的是可以帮你宣传网站。

24. 学习Photoshop

Photoshop是前端工程师的一个重要工具，如果你已经熟练掌握HTML和CSS，那不妨多学习一下Photshop。

Psdtuts+上有许多英文的饰品教程：Videos section
Lynda.com 也有大量教程，不过要支付$25美元
"You Suck at Photoshop" 系列教程
花费几个小时的时间学习Photoshop的快捷键操作

25. 学习每一个HTML标签

虽然有些HTML标签很少用到，但你依然应该了解他们。比如“abbr”、“cite”等，你必须学习它们以备不时之需。

顺便说说上面两个标签：

abbr：

表示一个缩写形式，比如 "Inc."、"etc."。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
url：http://www.w3school.com.cn/tags/tag_abbr.asp

cite：

通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。
url：http://www.w3school.com.cn/tags/tag_cite.asp

26. 参与社区讨论

网络上有许许多多优秀的资源，而社区中也隐藏着许多高手，这里你既可以自学，也能请教经验丰富的开发者。

27. 使用CSS Reset

Css Reset也就Reset Css ,就是重置一些标签样式，或者说默认的样式。

关于是否应该使用CSS Reset，网上也有激烈的争论，笔者是建议使用的。你可以先选用一些成熟的CSS Reset，然后慢慢演变成适合自己的。这里有一些好用的CSS Reset(中文)。

28. 对齐元素

简单来说，你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站，它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。

29. 关于PSD切片

现在你已经掌握了HTML、CSS、Photoshop知识，那么你还需要学习如何把PSD转换为网页上的图片和背景，下面有两个不错的教程：

30. 不要随意使用框架

Javascript和CSS都有许多优秀的框架，但如果你是初学者，不要急于使用它们。如果你还没能熟练的驾驭CSS，使用框架会混淆你的知识体系。

CSS框架是为熟练开发者设计的，这样会节省它们大量的时间。

摘自：http://www.yeeyan.com/articles/view/oc/41248?tag_related

12个针对网页设计师的非常便利的CSS框架、模板和摘录网站

笑谈 — Tue, 02 Jun 2009 01:34:37 +0000

如果您经常性地需要建立和开发新的网站，那么您就应该考虑使用模板创建，收集有用的代码片段等等。为了加快开发的进程，您就应该这样做，在需要的适合您可以使用、修改并优化这些模板文件；如果是作为商业用途的您应该检查下许可条款。然而，到目前为止，这是从最榜的站点中挑选出来的最好的站点的普通清单。好好地使用它们吧！

除此之外，您也可以参考下这些文章：

八种布局方案改善你的设计
 IE不支持的10个非常有用的CSS属性
 CSS处理大背景图片
 五种方法让CSS实现垂直居中
 针对IE8正式版的CSS hack

1. CSSTidy

CSSTidy 一个开源的CSS解析器和优化器。它可以作为可执行文件 (Windows, Linux 和 Mac 中是有效的) 控制每个命令行和作为PHP脚本 (这两个功能几乎相同).
相反，大多数其它的CSS解析器都没有使用正则表达式，而CSSTidy则完全支持CSS2且具有更高的可靠性。”

贴上它们的信息，因为它们说的比我说的要强多了。

某些人可能会有个疑问 – 为什么您需要优化自己的CSS代码? 仅仅因为，如果您想要更清洁的代码，更快的载入速度，这样，你们俩 – 您跟访问者都将得以与此！

这里获取可执行文件 or use 在线优化!

2. Clean CSS

您也可以使用这个非常类似的在线优化版本，但我是个反复无常的人，所以我用这个网站要更多一些。这就要求挑选一个您喜欢的吧！

3. Blueprint CSS

“Blueprint 是一个 CSS框架, 其目的是减少你的CSS开发时间。在您项目的顶部预置它会给您的CSS打下坚实的基础。非常易于使用网格、合理的排版甚至是用样式进行打印。”

非常有用的模板文件，帮助您不是反复地从零开始编写代码 – 现在您可以花费更多的时间来天下新的特征和考虑如何设计，然后是反复的过程。

4. Code-Sucks

收藏了许多非常好的，如CSS布局、代码段 (CSS, JavaScript, PHP), 网站模板等。这使web的发展进程变得敏捷。良好的使用使用这些吧。

5. Snipplr

Snipplr是存储和组织很多代码片段的非常有用的地方 (Javascript, HTML, PHP, CSS, Ruby)。随着您的发展进程会经常使用。并且每个人都可以分享和添加它们的片段，当然，这部分中热门代码段无疑就是代表最佳的和经常被大家使用的。

6. MaxDesign

7. MeyerWeb CSS Reset

Eric Meyer CSS reset 非常受还有。您应该使用重置来消除浏览器之前默认风格的不同。同时，Eric也指出，这仅仅是个起点，但非常好用。

8. YUI Library

“每个YUI库中的组件都有300个一些列的例子来说明它的实施。这些例子可以作为您研究YUI的出发点，如，获取代码段作为您编程的开始，或者只是作为您开发各种互动模式灵感的源泉。”

非常有用的模板文件，出发点非常好，并且收藏了很好的例子以满足于几乎所有的网页设计师。

9. 960 Grid System

这个网格系统正在变得很受欢迎 – 他们提供常用尺寸, 基于 960 像素的宽度，提供 12 列跟 16 列网格系统。设计师们使用网格是为了使它们的网站看起来更为和谐和精准。当您下载了该网格系统，会得到几个模板文件跟mockups，它会是您的得力助手。

Download / Demo

10. Sensible Standards CSS Framework

这个框架也是基于 Eric Meyer reset 系统, 当然也有许多新的基础样式特征，没有任何双重重置和更多，到它的首页查看更多的细节吧。

11. CSS 圆角

我猜测，您肯定听到过不少关于圆角实现的争论和如何创建它，从这里您可以快速地在线获得圆角跟样式。

12. 内容与风格

良好的框架集有助于您迅速快捷开发新的网站，使您更加关心图形设计而不是代码的编写。

我希望这些参考网站有助于提升您的技能并加速您的发展进程！我相信除了这些网站之外还有许多，如果您知道一些，那么请您留下链接地址，感激不尽！

摘自：http://www.yeeyan.com/articles/view/seasun/44063

正则表达式高级技巧基本概念实例详解

笑谈 — Tue, 02 Jun 2009 01:10:18 +0000

正则表达式(Regular Expression, abbr. regex) 功能强大，能够用于在一大串字符里找到所需信息。它利用约定俗成的字符结构表达式来发生作用。不幸的是，简单的正则表达式对于一些高级运用，功能远远不够。若要进行筛选的结构比较复杂，你可能就需要用到高级正则表达式。

本文为您介绍正则表达式的高级技巧。我们筛选出了八个常用的概念，并配上实例解析，每个例子都是满足某种复杂要求的简单写法。如果你对正则的基本概念尚缺乏了解，请先阅读这篇文章，或者这个教程，或者维基条目。

这里的正则语法适用于PHP，与Perl兼容。

1. 贪婪/懒惰

所有能多次限定的正则运算符都是贪婪的。他们尽可能多地匹配目标字符串，也就是说匹配结果会尽可能地长。不幸的是，这种做法并不总是我们想要的。因此，我们添加“懒惰”限定符来解决问题。在各个贪婪运算符后添加“?”能让表达式只匹配尽可能短的长度。另外，修改器“U”也能惰化能多次限定的运算符。理解贪婪与懒惰的区别是运用高级正则表达式的基础。

贪婪操作符

操作符 * 匹配之前的表达式零次或零次以上。它是一个贪婪操作符。请看下面的例子：

preg_match( '/.*<\/h1>/', '
这是一个标题。

这是另一个。
', $matches );

句点(.)能代表除换行符外的任意字符。上面的正则表达式匹配 h1 标签以及标签内的所有内容。它用句点(.)和星号(*)来匹配标签内的所有内容。匹配结果如下：

这是一个标题。
这是另一个。

整个字串都被返回。* 操作符会连续匹配所有内容—— 甚至包括中间的 h1 闭合标签。因为它是贪婪的，匹配整个字串是符合其利益最大化原则。

懒惰操作符

把上面的式子稍作修改，加上一个问号(?)，能让表达式变懒惰：

/.*?<\/h1>/

这样它会觉得，只需匹配到第一个 h1 结尾标签就完成任务了。

另一个有着类似属性的贪婪操作符是 {n,} 。它代表之前的匹配模式重复n次或n次以上，如果没有加上问号，它会寻找尽可能多的重复次数，加上的话，则会尽可能少重复（当然也就是“重复n次”最少）。

# 建立字串

$str = 'hihihi oops hi';

# 使用贪婪的{n,}操作符进行匹配

preg_match( '/(hi){2,}/', $str, $matches );  # matches[0] 将是 'hihihi'

# 使用堕化了的 {n,}? 操作符匹配

preg_match( '/(hi){2,}?/', $str, $matches );  # matches[0] 将是 'hihi'

2. 回返引用(Back referencing)

有什么用？

回返引用(Back referencing)一般被翻译成“反向引用”、“后向引用”、“向后引用”，个人觉得“回返引用”更为贴切。它是在正则表达式内部引用之前捕获到的内容的方法。例如，下面这个简单例子的目的是匹配出引号内部的内容：

# 建立匹配数组

$matches = array();

# 建立字串

$str = ""This is a 'string'"";

# 用正则表达式捕捉内容

preg_match( "/(\"|').*?(\"|')/", $str, $matches );

# 输出整个匹配字串

echo  $matches[0];

它会输出：

"This is a'

显然，这并不是我们想要的内容。

这个表达式从开头的双引号开始匹配，遭遇单引号之后就错误地结束了匹配。这是因为表达式里说：(”|’)，也就是双引号(”)和单引号(’)均可。要修正这个问题，你可以用到回返引用。表达式\1,\2,…,\9 是对前面已捕获到的各个子内容的编组序号，能作为对这些编组的“指针”而被引用。在此例中，第一个被匹配的引号就由\1代表。

如何运用？

将上面的例子中，后面的闭合引号替换为1：

preg_match( '/(\"|').*?\1/', $str, $matches );

这会正确地返回字串：

"This is a 'string'"

译注思考题：

如果是中文引号，前引号和后引号不是同一个字符，怎么办？

还记得PHP函数 preg_replace 吗？其中也有回返引用。只不过我们没有用 \1 … \9，而是用了 $1 … $9 … $n （此处任意数目均可）作为回返指针。例如，如果你想把所有的段落标签

都替换成文本：

$text = preg_replace( '/(.*?)
/',

"<p>$1</p>", $html );

参数$1是一个回返引用，代表段落标签

内部的文字，并插入到替换后的文本里。这种简便易用的表达式写法为我们提供了一个获取已匹配文字的简单方法，甚至在替换文本时也能使用。

3. 已命名捕获组(Named Groups)

当在一个表达式内多次用到回调引用时，很容易就把事情搞混淆，要弄清那些数字（1 … 9）都代表哪一个子内容是件很麻烦的事。回调引用的一个替代方法是使用带名字的捕获组（下文简称“有名组”）。有名组使用(?Ppattern)来设定，name代表组名，pattern是配合该有名组的正则结构。请看下面的例子：

/(?P"|').*?(?P=quote)/

上式中，quote就是组名，"|'是改组匹配内容的正则。后面的(?P=quote)是在调用组名为quote的有名组。这个式子的效果和上面的回调引用实例一样，只不过是用了有名组来实现。是不是更加易读易懂了？

有名组也能用于处理已匹配内容之数组的内部数据。赋予特定正则的组名也能作为所匹配到的内容在数组内部的索引词。

preg_match( '/(?P"|\')/', "'String'", $matches );

# 下面的语句输出“'”(不包括双引号)

echo $matches[1];

# 使用组名调用，也会输出“'”

echo $matches['quote'];

所以，有名组并不只是让写代码更容易，它也能用于组织代码。

4. 字词边界(Word Boundaries)

字词边界是字串里的字词字符（包括字母、数字和下划线，自然也包括汉字）和非字词字符之间的位置。其特殊之处就在于，它并不匹配某个实在的字符。它的长度是零。 \b 匹配所有字词边界。

不幸的是，字词边界一般都被忽视掉了，大部分人都没有在意他的现实意义。例如，如果你想要匹配单词“import”：

/import/

注意了！正则表达式有时候很调皮的。下面的字串也能和上面的式子匹配成功：

important

你或许觉得，只要在import前后加上空格，不就可以匹配这个独立的单词了：

/ import /

那如果遇上这种情况呢：

The trader voted for the import

当 import 这个词在字串开头或者结尾时，修改后的表达式仍然不能用。因此，考虑各种情况是必须的：

/(^import | import | import$)/i

别慌，还没完呢。如果遇到标点符号了呢？就为了满足这一个单词的匹配，你的正则可能就需要这样写：

/(^import(:|;|,)? | import(:|;|,)? | import(\.|\?|\!)?$)/i

对于只匹配一个单词来说，这样做实在是有点大动干戈了。正因如此，字词边界才显得意义重大。要适应上述要求，以及很多其他情况变种，有了字符边界，我们所需写的代码只是：

/\bimport\b/

上面所有情况都得到了解决。 \b 的灵活性就在于，它是一个没有长度的匹配。它只匹配两个实际字符之间想象出的位置。它检查两个相邻字符是否是一个为单字，另一个为非单字。情况符合，就返回匹配。如果遇到了单词的开头或结尾， \b 会把它当成是非单词字符对待。由于import里面的 i 仍然被看成是单词字符，import 就被匹配出来了。

注意，与\b相对，我们还有\B，此操作符匹配两个单字或者两个非单字之间的位置。因此，如果你想匹配在某个单词内部的‘hi’，可以使用：

\Bhi\B

“this”、“hight”，都会返回匹配，而“hi there”则不会返回匹配。

5. 最小组团(Atomic Groups)

最小组团是无捕捉的特殊正则表达式分组。通常用来提高正则表达式的效能，也能用于消除特定匹配。一个最小组团可以用(?>pattern) 来定义，其中pattern是匹配式。

/(?>his|this)/

当正则引擎针对最小组团进行匹配时，它会跳过组团内标记的回溯位置。以单词“smashing”为例，当用上面的正则表达式匹配时，正则引擎会先尝试在“smashing”里寻找“his”。显然，找不到任何匹配。此时，最小组团就发挥作用了：正则引擎会放弃所有回溯位置。也就是说，它不会尝试再从“smashing”里查找“this”。为什么要这样设置？因为“his”都没有返回匹配结果，包含有“his”的“this”当然就更匹配不了了！

上面的例子并没有什么实用性，我们用/t?his?/ 也能达到效果。再看看下面的例子：

/\b(engineer|engrave|end)\b/

如果把“engineering”拿去匹配，正则引擎会先匹配到“engineer”，但接下来就遇到了字词边界，b，所以匹配不成功。然后，正则引擎又会尝试在字串里寻找下一个匹配内容：engrave。匹配到eng的时候，后面的又对不上了，匹配失败。最后，尝试“end”，结果同样是失败。仔细观察，你会发现，一旦engineer匹配失败，并且都抵达了字词边界，“engrave”和“end”这两个词就已经不可能匹配成功了。这两个词都比 engineer短小，正则引擎不应该再多做无谓的尝试。

/\b(?>engineer|engrave|end)\b/

上面的替代写法更能节省正则引擎的匹配时间，提高代码的工作效率。

6. 递归(Recursion)

递归(Recursion)用于匹配嵌套结构，例如括弧嵌套， (this (that))，HTML标签嵌套

。我们使用(?R)来代表递归过程中的子模式。下面是一个匹配嵌套括弧的例子：

/\(((?>[^()]+)|(?R))*\)/

最外层使用了反义符的括号“\(”匹配嵌套结构的开端。然后是一个多选项操作符( * | * )，可能匹配除括号外的所有字符 “(?>[^()]+)”，也可能是通过子模式“(?R)”来再次匹配整个表达式。请注意，这个操作符会尽量多地匹配所有嵌套。

递归的另一个实例如下：

/<([\w]+).*?>((?>[^<>]+)|((?R)))*<\/\1>/

以上表达式综合运用了字符分组，贪婪操作符、回溯，以及最小化组团来匹配嵌套标签。第一个括弧内分组([w]+)匹配出标签名，用于接下来的应用。若找到这尖括号样式的标签，则尝试寻找标签内容的剩余部分。下一个括弧括起来的子表达式和上一个实例非常相似：要么匹配不包括尖括号的所有字符 ?>[^<>]+，要么递归匹配整个表达式(?R)。表达式最后的代表闭合标签。

7. 回调(Callbacks)

匹配结果中的特定内容有时可能会需要某种特别的修改。要应用多重而复杂的修改，正则表达式的回调就有了用武之地。回调是用于函数preg_replace_callback中的动态修改字串的方式。你可以为preg_replace_callback指定某个函数为参数，此函数能接收匹配结果数组为参数，并将数组修改后返回，作为替换的结果。

例如，我们想将某字串中的字母全部转变成大写。十分不巧，PHP没有直接转化字母大小写的正则操作符。要完成这项任务，就可以用到正则回调。首先，表达式要匹配出所有需要被大写的字母：

/\b\w/

上式同时使用了字词边界和字符类。光有这个式子还不够，我们还需要一个回调函数：

function upper_case( $matches ) {

return strtoupper( $matches[0] );

函数upper_case接收匹配结果数组，并将整个匹配结果转化成大写。在此例中，$matches[0]代表需要被大写化的字母。然后，我们再利用preg_replace_callback实现回调：

preg_replace_callback( '/\b\w/', "upper_case", $str );

一个简单的回调即有这般强大的力量。

8. 注释(Commenting)

注释不用来匹配字串，但确实是正则表达式中最重要的部分。当正则越写越深入，越写越复杂，要推译出究竟什么东西被匹配就会变得越来越困难。在正则表达式中间加上注释，是最小化将来的迷糊和困惑的最佳方式。

要在正则表达式内部加上注释，使用(?#comment)格式。把“comment”替换成你的注释语句：

/(?#数字)\d/

如果你打算把代码公之于众，为正则表达式加上注释就显得尤为重要。这样别人才能更容易看懂和修改你的代码。和其他场合的注释一样，这样做也能为你重访自己以前写的程序时提供方便。

考虑使用“x”或“(?x)”修改器来格式化注释。这个修改器让正则引擎忽略表达式参数之间的空格。“有用的”空格仍然能够通过[ ]或\ （反义符加空格）来匹配。

\d    #digit

[ ]   #space

\w+   #word

/x

上面的代码与下面的式子作用一样：

/\d(?#digit)[ ](?#space)\w+(?#word)/

请时刻注意代码的可读性。

摘自：http://www.yeeyan.com/articles/view/benhuoer/44086

CSS网页布局ID和Class类的命名介绍

笑谈 — Wed, 27 May 2009 08:30:28 +0000

关于CSS网页布局id与class命名或许成为大家比较头疼的问题，在webjx.com中早已有相关的介绍，但还是不能满足大家对知识的渴求。

一、用class_name方式写类名。

以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式，理由见下一条。

二、样式都用class而不用id。

有三个理由。
1，id不可以重复，所以用class的话，可以肆无忌惮的用无数次。
2，id的优先级太高，若是写了一个#page_content a {color:#f60} ，那你完蛋了，里面要改链接颜色，都必须加上#page_content才能越过这个优先级。
3，id专门留给JS用，这样才符合表现与行为分离的原则。所以id我用驼峰式，也是为了体现这一点。

三、margin和padding，尽量省略最后一个值。

比如margin: 20px 10px 5px 10px; ，左右值是一样的，就应该省略掉最后一个值，写成margin: 20px 10px 5px; 这样到时候要改左右间距，改一个就好，免得改漏了。其实这个问题虽然很细小，但是可以看得出对margin四个值省略规则的熟练程度。

四、按标准写css，再针对特定浏览器作hack。

比如，通常我们会遇到如下的写法：
.side_col_webjx {
float:left;
display: inline;
margin-left: 20px;
}
而我的写法会是：
.side_col_webjx {
float: left;
margin-left: 20px;
}
* .side_col_webjx {
_display:inline; /*hacked for IE 6*/
}
看明白了么？不应该把hack混在一起，也不应该用一种侥幸的心态，觉得float:left与display:inline写在一起没事。嗯，它们俩确实没事儿，但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug，所以前面加上下划线，以明确的表达你的目的。
另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的，比如FF。这就要求你对css标准的熟练掌握，能够自信的判断哪些渲染是遵守标准，哪些违反标准的。
此外，我喜欢在hack前面加上星号，其实这纯粹是个人习惯了。可能过段时间我就不这么用了，呵呵。

五、记得加空格。

.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯，标点后面都应该带空格（如果你写This is a pen.That’s a pencil.句点后面不加空格， word里面会有错误提示）。所以既然css是外国人发明的，应该按他们的格式来写。类似的，在JS里var a = b + c;里面的空格也应该都要加。

六、适当的层叠（Cascading)或缩进以定义css的“作用域”。

啥叫“css的作用域”？其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面，比如“导航栏”里的“搜索框”，可能应该写成：
.nav .search {}
而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。像这样：
.login_box {}
.forgot_pwd{}
缩进，是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。

Web标准及验证

笑谈 — Wed, 27 May 2009 07:34:03 +0000

关于HTML，还有什么要了解的？

你可以以多种不同的方式来编写HTML；同时，浏览器也可以以多种不同的方式来理解HTML。你可以认为HTML有很多种方言。这就是为什么某些网站会在不同的浏览器上显示出不同效果的原因。

为了解决这一问题，HTML发明人Tim Berners-Lee先生创办了万维网联盟（World Wide Web Consortium，W3C）来致力于制订通用的HTML标准。但这是一条漫长而艰难的路程。

过去，在浏览器都要收费的年代里，Netscape曾是占据统治地位的浏览器。那时的HTML标准是2.0和3.2。但是，作为市场份额达90%以上的Netscape，它不必、同时也没有太在意通用标准。相反地，Netscape创造了自己特有的元素，这些元素在其它浏览器上将不起作用。

在很长一段时间内，微软几乎完全忽略了因特网。但不久之后，微软开始与Netscape竞争，并推出了IE浏览器。尽管IE浏览器（Internet Explorer）的早期版本在支持HTML标准方面比不上Netscape，但由于它是免费提供的（免费总是很受欢迎的），所以IE很快便成为最流行的浏览器。

微软从IE的第4版和第5版开始致力于对W3C HTML标准作更多支持。而Netscape则没有设法开发新版浏览器，只是继续供应已经过时的第4版浏览器。

其余的事，大家都知道，就不必提了。今天，HMTL标准已经发展到4.01版和XHMTL。现在，占据市场90%以上的份额的是IE浏览器了。IE 也有自己特有的元素，但它也支持W3C HTML标准。同样地，其它的浏览器，比如Mozilla、Opera和Netscape等，都是既有自己特有的元素，也同时支持W3C HTML标准。

因此，只要你遵循W3C标准来编写HTML，你的网页将永远能在所有浏览器上显示出来。幸运的是，你在本教程学到的是XHTML，它是最新的、更严格、更纯正的HTML版本。

酷！如何向别人透露HTML的版本信息？

HTML有很多不同种类，所以你需要告诉浏览器，你的HTML使用的是哪种“方言”（比如XHTML）。具体做法是采用文档类型声明。文档类型声明应写在HTML文档的开头部分：

例1：

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/1999/xhtml" lang="en"> 网页标题

一些文字

除了要给出文档类型声明以外（上例中第一行，它告诉浏览器这个文档是XHMTL），还需要在html标签中加入一些信息，也就是添加两个属性xmlns和lang。

xmlns是“XML-Name-Space”（XML名称空间）的缩写，其值固定为http://www.w3.org/1999/xhtml。关于名称空间，你只需了解这么多。但如果你希望作更多了解的话，可以登录W3C网站阅读有关名称空间（namespaces）的内容。

lang属性用于指定当前文档所使用的语言，其值采用ISO 639标准中列出的世界各国语言代码。上例中，我们指定文档采用的语言为英语（对应的属性值为“en”）。

通过HTML文档头部的文档类型声明，浏览器可以知道如何读取和显示你的HTML。今后，可以使用上例作为模板来编写你的HTML文档。

此外，文档类型声明在验证网页时也很有用。

验证？为什么要验证文档？如何验证呢？

你可以用W3C的免费验证器（validator）来检查你的HTML文档是否符合你在文档类型声明中所指定的类型。

为了测试如何验证文档，请编写一个网页并将它上传到因特网上，现在，打开网页validator.w3.org，在网页里输入你网页的网址（URL），然后验证它。如果你的HTML没有错误，将显示成功信息。否则，你将会得到错误报告，它会详细告诉你出错的位置和原因。你可以在网页里故意制造一些错误，看看会返回什么样的结果。

这个验证器不仅仅对找错有帮助。有些浏览器会尽量修复HTML中的错误，按照它们推测的正确结果去显示网页。使用这样的浏览器，你会忽视网页中存在的错误。而该网页在其它的浏览器上看到的效果可能会截然不同，甚至根本无法显示。所以，可以用验证器帮你找到可能被你忽视的错误。

请始终坚持验证你的网页，以确保它们能正确地显示。

如何判断Javascript脚本加载完成

笑谈 — Wed, 27 May 2009 07:28:24 +0000

我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况（一般为 loading 、loaded、interactive、complete），当返回状态为 loaded 或 complete 时，则表示加载完成，返回回调函数。

对于 readyState 状态需要一个补充说明：

在 interactive 状态下，用户可以参与互动。
Opera 其实也支持 js.onreadystatechange，但他的状态和 IE 的有很大差别。

具体实现代码如下：

function include_js(file) {
    var _doc = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    _doc.appendChild(js);

    if (!/*@cc_on!@*/0) { //if not IE
        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
        js.onload = function () {
            alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
        }
    } else {
        //IE6、IE7 support js.onreadystatechange
        js.onreadystatechange = function () {
            if (js.readyState == 'loaded' || js.readyState == 'complete') {
                alert('IE6、IE7 support js.onreadystatechange');
            }
        }
    }

    return false;
}

//execution function
include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');

使用XML的五种场合

笑谈 — Wed, 27 May 2009 07:19:24 +0000

1、数据交换
用XML在应用程序和公司之间作数据交换已不是什么秘密了，毫无疑问应被列为第一位。
那么为什么XML在这个领域里的地位这么重要呢？原因就是XML使用元素和属性来描述数
据。在数据传送过程中，XML始终保留了诸如父/子关系这样的数据结构。几个应用程序
可以共享和解析同一个XML文件，不必使用传统的字符串解析或拆解过程。
相反，普通文件不对每个数据段做描述(除了在头文件中)，也不保留数据关系结构。使
用XML做数据交换可以使应用程序更具有弹性，因为可以用位置(与普通文件一样)或用元
素名(从数据库)来存取XML数据。

2、Web服务
Web服务是最令人激动的革命之一，它让使用不同系统和不同编程语言的人们能够相互交
流和分享数据。其基础在于Web服务器用XML在系统之间交换数据。交换数据通常用XML标
记，能使协议取得规范一致，比如在简单对象处理协议(Simple Object Access Protoc
ol, SOAP)平台上。
SOAP可以在用不同编程语言构造的对象之间传递消息。这意味着一个C#对象能够与一个
Java对象进行通讯。这种通讯甚至可以发生在运行于不同操作系统上的对象之间。DCOM
, CORBA或Java RMI只能在紧密耦合的对象之间传递消息，SOAP则可在松耦合对象之间传
递消息。

3、内容管理
XML只用元素和属性来描述数据，而不提供数据的显示方法。这样，XML就提供了一个优
秀的方法来标记独立于平台和语言的内容。
使用象XSLT这样的语言能够轻易地将XML文件转换成各种格式文件，比如HTML, WML, PD
F, flat file, EDI, 等等。XML具有的能够运行于不同系统平台之间和转换成不同格式
目标文件的能力使得它成为内容管理应用系统中的优秀选择。

4、Web集成
现在有越来越多的设备也支持XML了。使得Web开发商可以在个人电子助理和浏览器之间
用XML来传递数据。
为什么将XML文本直接送进这样的设备去呢？这样作的目的是让用户更多地自己掌握数据
显示方式，更能体验到实践的快乐。常规的客户/服务(C/S)方式为了获得数据排序或更
换显示格式，必须向服务器发出申请；而XML则可以直接处理数据，不必经过向服务器申
请查询-返回结果这样的双向“旅程”，同时在设备也不需要配制数据库。
甚至还可以对设备上的XML文件进行修改并将结果返回给服务器。想像一下，一台具有互
联网功能并支持XML的电冰箱将会给市场带来多么大的冲击吧。你从此不必早起去取牛奶
了！

5、配制
许多应用都将配制数据存储在各种文件里，比如.INI文件。虽然这样的文件格式已经使
用多年并一直很好用，但是XML还是以更为优秀的方式为应用程序标记配制数据。使用.
NET里的类，如XmlDocument和XmlTextReader，将配制数据标记为XML格式，能使其更具
可读性，并能方便地集成到应用系统中去。使用XML配制文件的应用程序能够方便地处理
所需数据，不用象其他应用那样要经过重新编译才能修改和维护应用系统。
如前所述，这里提到的五种使用XML的途径不包括全部场合。

摘自：http://bbs.xml.org.cn/dispbbs.asp?boardID=1&ID=54

C#类和接口、虚方法和抽象方法及值类型和引用类型的区别

笑谈 — Wed, 27 May 2009 04:09:33 +0000

1.C#类和接口的区别
解答：
接口是负责功能的定义，项目中通过接口来规范类，操作类以及抽象类的概念！
而类是负责功能的具体实现！
在类中也有抽象类的定义，抽象类与接口的区别在于：
抽象类是一个不完全的类，类里面有抽象的方法，属性，也可以有具体的方法和属性，需要进一步的专业化。
但接口是一个行为的规范，里面的所有东西都是抽象的！
一个类只可以继承一个基类也就是父类，但可以实现多个接口
PS：接口除了规范一个行为之外，在具体项目中的实际作用也是十分重要的，在面向对象的设计原则以及设计模式的使用中，无不体现作为一个接口的使用好处，最直接的就是设计原则中OCP（开放封闭原则），我们使用接口，而不需要关心他的具体实现，具体实现的细节变化也无关客户端（使用接口的类）的使用，对与扩展是开放的，我们可以另写一个接口的实现来扩展当前程序，而不影响上层的使用，但对修改是封闭的，即我们不能够再去修改接口的定义，当然这个“不能够”是指在规范原则上不应该这么做！

2.抽象类和接口的区别
解答：
抽象类（abstract class）可以包含功能定义和实现，接口（interface）只能包含功能定义
抽象类是从一系列相关对象中抽象出来的概念，因此反映的是事物的内部共性；接口是为了满足外部调用而定义的一个功能约定，因此反映的是事物的外部特性
分析对象，提炼内部共性形成抽象类，用以表示对象本质，即“是什么”
为外部提供调用或功能需要扩充时优先使用接口

3. C#语言中，值类型和引用类型有何不同
解答：
值类型和引用类型的区别在于，值类型的变量直接存放实际的数据，而引用类型的变量存放的则是数据的地址，即对象的引用。
值类型变量直接把变量的值保存在堆栈中，引用类型的变量把实际数据的地址保存在堆栈中，而实际数据则保存在堆中。注意，堆和堆栈是两个不同的概念，在内存中的存储位置也不相同，堆一般用于存储可变长度的数据，如字符串类型;而堆栈则用于存储固定长度的数据，如整型类型的数据int(每个int变量占用四个字节)。由数据存储的位置可以得知，当把一个值变量赋给另一个值变量时，会在堆栈中保存两个完全相同的值;而把一个引用变量赋给另一个引用变量，则会在堆栈中保存对同一个堆位置的两个引用，即在堆栈中保存的是同一个堆的地址。在进行数据操作时，对于值类型，由于每个变量都有自己的值，因此对一个变量的操作不会影响到其它变量;对于引用类型的变量，对一个变量的数据进行操作就是对这个变量在堆中的数据进行操作，如果两个引用类型的变量引用同一个对象，实际含义就是它们在堆栈中保存的堆的地址相同，因此对一个变量的操作就会影响到引用同一个对象的另一个变量。

4.结构和类的区别
解答：
1) 结构是一个值类型，保存在栈上，而类是一个引用类型，保存在受管制的堆上。
2) 对结构中的数据进行操作比对类或对象中的数据进行操作速度要快。
3) 一般用结构存储多种类型的数据，当创建一个很多类或对象共用的小型对象时，使用结构效率更高。

4.抽象方法和虚方法的区别
解答：
抽象方法
使用abstract关键字 public abstract bool Withdraw(…);
抽象方法是必须被派生类覆写的方法。
抽象方法是可以看成是没有实现体的虚方法
如果类中包含抽象方法，那么类就必须定义为抽象类，不论是否还包含其它一般方法
虚方法
使用virtual关键字 public virtual bool Withdraw(…);
调用虚方法，运行时将确定调用对象是什么类的实例，并调用适当的覆写的方法。
虚方法可以有实现体
———————————————————————————————
虚拟方法和抽象方法有什么区别？
抽象方法只有声明没有实现，需要在子类中实现；虚拟方法有声明和实现，并且可以在子类中覆盖，也可以不覆盖使用父类的默认实现
虚拟方法有实现代码
抽象方法则没有，
并且抽象类不能被实例化，只能实例化实现了全部抽象方法的派生类
抽象方法是虚拟方法的一种
抽象方法没有实现，它的存在只是为派生类统一接口；派生类应该实现这个方法
如果编写一个基类，它永远不会被实现，那么就应该将这个类中的一个或多个方法定义为
抽象方法。
抽象方法只有声明没有实现，需要在子类中实现；虚拟方法有声明和实现，并且可以在子类中覆盖，也可以不覆盖使用父类的默认实现
补充一点
只允许在抽象类中使用抽象方法声明
学习
其实大家首先要搞清楚，虚方法与多态性关系密切，虚方法允许派生类完全或部分重写该类的方法，需写方法体。抽象类中可以包含抽象方法与一般的方法，抽象类不可以new,抽象方法只是一个定义，没有方法体，也就是没有{}，也不要在里面写内容。它们两个相像的一点是都用override重写

摘自：http://www.zxbc.cn/html/20090419/70325.html

Visual Studio 2008和ASP.NET 3.5使用之初体验

笑谈 — Wed, 27 May 2009 03:50:37 +0000

一、前言

当大家还在使用 Visual Studio 2005 的时候，微软的下一代开发工具——Visual Studio 2008正悄悄地在酝酿中，未来微软的新开发工具将使得开发应用程序更容易，对VB、C# 语言提供了更多的支持，开发人员未来将可以透过新的开发工具来进行 LINQ (Language Integrated Query)、ASP.NET AJAX、WPF、SilverLight (先前称为 WPF/E)，Office 2007等新技术的开发，甚至于将只在 Visual Studio 2005的Team Suite 版本中才有的 Test 工具整合到 Visual Studio 2008中。

对于坚持学习的技术人员而言，能尽快一睹Visual Studio 2008的风采无疑是很兴奋的。笔者下载了Visual Studio 2008 Beta1，并进行了初步的试用。给人的感觉是，Visual Studio 2008的整体风格与框架与以前很相似，感觉很熟悉。当然，微软在.NET Framework及Visual Studio所下的功夫不可谓不大啊，可以感觉到其更新力度之大。

作为软件开发人员，一定会对下一代Visual Studio 2008的外壳感兴趣。一个好的开发环境可以让开发工作事半功倍。可以发现新版VS的开发界面分为两个版本：整合模式和孤立模式，分别对基于语言的开发和基于特别工具的开发作了优化。并将Iron Python引入了Visual Studio，下图的界面将在Visual Studio 2008的Beta2版本中出现。

Visual Studio 2008将包含对LINQ（Language-Integrated Query）的支持，通过把查询的概念变成一流的编程概念，LINQ将使得.NET中的数据访问面貌一新。Visual Studio 2008包含一个对象/关系的映射器，允许开发人员为关系数据创建数据模型，然后开发人员可以在VB和C#中编写丰富的LINQ查询来获取数据，绑定这些数据，以及更新这些数据。现在VS对所有的LINQ查询以及结果值提供完整的Intellisense支持。

笔者认为，除了那些框架和工具类的精彩新特性外，开发人员(包括所有的.NET应用类型的开发人员)会非常喜爱Visual Studio 2008的一件事情是，VB和C#将包含一些新语言特性和改进。这些语言改动将以既微妙又深刻的方式改进我们的开发体验，势将改进效率，减小我们需要键入的代码量。

二、Visual Studio 2008

（1） 微软的擦边球——多定向技术

对Visual Studio以前的版本而言，其中一个最大的明显不足之处在于每一个VS版本都要绑定一个特定版本的CLR。比如，使用Visual Studio 2005时，开发人员就不可能创建除了.NET 2.0应用以外的其他应用程序。在Visual Studio 2008里，这一问题会随着一个微软称之为多定向（Multi-targeting）的技术出现而得到部分解决。

Visual Studio 2008将是第一个允许开发人员针对多个.NET Framework版本开发的Visual Studio版本。这意味着开发人员可以打开或创建一个项目，明确地指定.NET Framework 2.0或者3.0或者3.5版本，Visual Studio会自动地过滤Intellisense、工具箱控件、添加引用的对话框项诸如此类的东西，只显示指定框架版本里支持的那些特性。然后开发人员可以针对这些不同框架版本进行编译，还能得到每个版本的完全的调试支持。

多定向(Multi-Targeting)的很大的好处在于，开发人员可以马上在 Visual Studio Orcas中使用绝大多数的新特性(譬如，所见即所得设计器和JavaScript 编辑器等)，即使开发人员还在开发或更新老一点版本的项目。

从.NET 1.0到3.5，只能有一个版本的CLR可以被装载到一个进程里。因为Visual Studio本身部分上就是用.NET框架构建的，所以它也只能装载自带的CLR版本。这就使得它几乎不可能和基于其他版本的应用一起工作。 Visual Studio 2008其实也没有真正地解决这个问题。可以称其为打了一个擦边球，因为.NET 3.0和3.5实际上只是构建于2.0运行时上的类库。因为这个问题没有得到彻底的解决，所以如果开发人员要构建.NET 1.0或者.NET 1.1应用，还是需要选择各自的开发工具，VS2002或者VS2003。不过利好的一面是，至少项目文件不会改变，VS 2005的用户也可以和VS 2008的用户协同工作。

（2） 所见即所得——HTML/CSS编辑器

这个版本终于实现了Dreamwaver几年前就实现的功能：分割视图(Split View)-就是同时将HTML源码和所见即所得设计模式打开的视图。同时，用户选择一个页面上的对象，在代码中也可高亮显示所选对象的代码，就是这里可能还有Bug，因为高亮的部分总是有点错位。此外，AJAX以及javascript的支持也被内置（支持javascript的Intellisense）。还有对于CSS的一些新的改进，感觉用起来像是在用Word里面的样式，也许对于美工来说有用。

Visual Studio 2008的这一新特性将提供：无比丰富的CSS支持，包括CSS属性窗口，CSS继承图示器，CSS预览，以及CSS管理器)；极大改进的视图转换性能，可以从源码模式转换成HTML设计模式将会瞬时完成；对源码视图内控件设计器的支持，包括属性构造器，事件接通(wire-up)以及向导将会在源码视图内正常工作；更丰富的标尺(ruler)和布局支持，可喜的是，它们的值将被自动储存在外部的CSS文件中；对内嵌模板页(nested master pages)的设计器支持。

Visual Studio 2008在CSS方面也在较大的改进。新的“管理样式”属性窗口允许开发人员在样式表内轻易地创建、管理和重构CSS规则。譬如，开发人员可以在样式表里拖放规则来重新安排它们的次序，在多个文件里对它们进行重构，以及在所见即所得设计器里选择一个HTML元素来应用CSS规则。

当开发人员在所见即所得设计器里选择一个HTML元素时，现在也可以使用CSS属性窗口来查看该元素上所有的CSS规则以及它们对应的设置。这个特性所带来的好处是，它可以显示从多个CSS规则继承而来的层叠式设置(cascading settings)。

三、 ASP.NET 3.5

（1） AJAX和JavaScript支持

在ASP.NET 3.5中将包括所有的ASP.NET AJAX 1.0内置功能。包含在内的将是Visual Studio中显著改进的AJAX和JavaScript工具支持，包括JavaScript Intellisense 和更加丰富的调试支持。

VS中的JavaScript intellisense引擎对所有标准的ASP.NET AJAX 库概念(类，属性，枚举等等)都有丰富的支持。除了对任何正常的JavaScript代码提供 Intellisense 支持外，VS现在还允许开发人员添加可选的注释概要信息来为Intellisense提供额外的提示。

在调试AJAX 和JavaScript时，开发人员现在可以在开发人员的服务器端代码中设置客户端JavaScript断点，VS 现在可以自动地在客户端把它们接连起来(这些断点也可以在开发人员关闭项目/解决方案时保存起来)。在调试时，开发人员现在也有完整的监视窗口(watch window)，intermediate 窗口和其他更多的支持。 VS中的解决方案管理器现在也自动地列出正在运行的JavaScript文档文件，允许开发人员在任何脚本资源里轻松地设置断点。

（2） ADO.net的改进

ASP.NET3.5有一些很酷的特性，主要体现在LINQ上面，同时对C#及VB.NET等语言的改进上。这可以极大的提高开发效率。

除了允许编写使用LINQ的代码外，很明显地，在ASP.NET中提供完全的数据绑定支持，允许轻松地把任何 ASP.NET UI 控件连接到LINQ实体上去，可以不用编写任何代码即可支持分页、排序、编辑、删除、添加新数据。

虽然笔者还没有在项目中使用这个东西，但是已经可以体会他的用意。这个”一个对象/关系的映射器”，实际上为用户创建了一个结构化数据集，使得使用起这个数据集类型的时候可以直接操作里面的数据。可惜结构化数据集这个东西效率上差了一些，所以不牵扯到死锁问题的时候，恐怕用的人也不会特别多。

但事实上，ASP.NET3.5中提供的新特性并不是特别的多。如果对比查看一下System.Web.Ui命名空间，则可以发现，仅增加了几个新控件：ListView及DataPager等。

ListView是一个基于CSS的崭新ASP.NET 数据控件，间于Repeater及GridView之间，帮助开发人员更容易地建造数据驱动。它提供了像Repeater那样丰富的模版，同时又具在grid的高级特性，如翻页、排序及可编辑功能。但遗憾的是，它并没有支持键盘的上下移动功能。

还有很多LINQDataSource，它可以很容易的创建及展示LINQ数据。

（3） Silverlight和XAML

Silverlight是个跨平台、跨浏览器的.NET插件，允许设计师和开发人员在浏览器中建造丰富的媒体体验和RIA应用。ASP.NET 3.5在见面上支持Silverlight及XAML等插件。Silverlight在最近可以风光无限，并且有可能嵌入到下一代的运行时环境中。ASP.NET 3.5 也将支持对Rails等动态语言的支持，将提供动态框架来支持对数据库的管理与操作。

笔者认为，到目前为止，ASP.NET可能出于品牌稳定性方面的考虑吧，所以比较核心的变化并没有。但笔者依然认为.NET 3.5将是了不起的更新版本。在ASP.NET 2.0的剧变曾经引发巨大的软件开发模式。那么，我们可以期待，ASP.NET 3.5将给我们带来更大的软件开发效率的提高。

四、 关于Orcas的思考

笔者的疑问还是有的，这个版本的C++是否还能开发本地代码?开发本地代码还是要强迫开发人员安装.Net framework吗?这个版本的.Net framework对开发硬件控制是否有新功能,总不能让我们开发应用而不与如打印机、POS机、PDA、摄像头、优盘、像机、语音等设备打交道吧? 这个版本对开发报表是否功能加强，应用程序的中国报表一直是很头痛的事。

在微软的开发工具还没有正式推出之前，前面所有一切提到的技术都有可能改变。但是从这个未来的开发工具本质上来讲，它想带给程式开发工程师的便利性，这是毋庸置疑的。面对新的一代語言 (VB9.0、C# 3.0) 和崭新的程式设计方式，我们要怎样透过更加便利的开发工具来增加产能。面对技术不断的更新，如何应用新技术来解決目前的困难，如此种种都将是未来的一大挑战。

微软提供了如此功能完备的软件，笔者禁不住在想，微软到底想要干什么？不用编写代码就能完成应用程序的开发，这等于就是说，Visual Studio 2008将完全就是一个可以让任何人都可以定制软件的工具。技术门槛越来越低，越来越多的项目不需要专业的软件开发人员。.对于企业来说成本降低，因为他们以后可以自己造软件，造软件不是什么难事情了，也许不久的将来不需要什么软件公司。难道微软是想把全世界的软件都自己做了？笔者认为，其实微软就想着卖自己的产品，希望每个Windows用户都会买一个做软件的工具，然后自己去做自己想要的东西.这无疑是打破大部分人的饭碗。当然这只是笔者个人的观点。

五、小论

笔者在前面介绍总结了Visual Studio 2008的新特性。当然，这并不是说Visual Studio 2008并无缺点可挑。例如，Visual Studio 2008偶尔也会突然的死机，呵呵，这虽然不像在Visual Studio 2005中那么频繁。当然，就在使用Visual Studio Beat1的过程中，笔者还是非常满意的。感觉它确实可以提高软件开发的效率。据微软称Visual Studio 2008、NET 3.5及Windows Server 2008将于2008年2月27日发布。因此，大家都可以比较快的在今年年底看到最终的版本。如果读者还没有试过Visual Studio 2008，那么有必要下载一个Beta1试验一下。当然，读者也可稍等，等到Beta2发布，同时，据称，Beta2将包括一个Go-live的许可文件，从而可以真正来体验。

摘自：http://www.blogjava.net/sterning/archive/2007/08/03/134211.html