思维 » 程序

用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。

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

实用的Web工具Clixpy: 捕获用户行为活动

笑谈 — Wed, 03 Jun 2009 00:52:02 +0000

作为设计师&开发者，我们会尽可能为最终用户制作最容易用的网站，这可以根据内容优先关系等使用不同的大小&颜色建设一个较复杂的系统。

但是，无论我们做什么，我们需要找出这些是不是在工作。因为有的时候，用户会给你带来意外与惊讶，你建设的最易用的网站对他们来说是怎样的不容易。

Clixpy, 一款非常容易安装使用的可用性web测试工具, 对找到用户是如何浏览一个网站十分有帮助.他能记录下以下的活动:

鼠标动作
点击
滚动
表单输入

统计应用可以给你提供访问者的浏览路线。但是，它并不能提供在这条路线上发生的事情及为什么读者选择这条路线，实际上这是非常重要的问题。这是正是Clixpy所能提供。

如何建立与使用?

将JavaScript代码插入到网站的脚部，Clixpy便可以自动检测到并开始跟踪记录（使用代码预防被其他网站使用的意外发生是非常棒的）。

从应用程序的管理界面可以通过域名，日期或者身份筛会话记录（新的捕捉，atched ones，等等）

在查看会话前，你能 atched oneshave（找不到很好的翻译方法）强大的细节，Clixpy 显示综合浏览量，浏览的哪些网页，持续的时间&捕获的用户+浏览器的详细资料。它还可以让你再任何捕获上保存并标记以便以后分析。

通过点击任何所捕获的会话，Clixpy 赠予你读者在网站上相同的体验。

你也可以在捕获过程的中定义限制，比如“捕获前二十个会话”或者"任何时候停止整个捕获"。

预期的结果是什么?

在安装Clixpy & 捕获用户行为一段时间后，分析结果的时候到了，简单的如：

观察此段时间
看一看你的用户觉得困难或者容易使用的特点是哪个
做笔记
&采取行动, 改善你能提供更好的用户体验的部分。然后再仔细检查，使用Clixpy重新捕获网页，看一看更新是不是能真的起作用。

摘自：http://www.yeeyan.com/articles/view/61966/44195

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

笑谈 — 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

简单的Ajax实例

笑谈 — Wed, 03 Jun 2009 00:04:57 +0000

Ajax 是一种可以通过Javascript, DHTML and the XMLHttpRequest 来发送GET或POST请求，在数据返回时不必重新载入页面。下面是一个非常简单的Ajax例子，发送一个请求，打印出请求的字符串和远程用户的IP地址。

简单的Ajax演示 (请参考原文演示: http://www.degraeve.com/reference/simple-ajax-example.php)

Html 页面

这个HTML页面提供了3个JavaScript函数，通过执行XMLHttpRequest来更新HTML页面.(AJAX调用)

<html>
<head>
<title>Simple Ajax Exampletitle>
<script language="Javascript">
function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            updatepage(self.xmlHttpReq.responseText);
        }
    }
    self.xmlHttpReq.send(getquerystring());
}

function getquerystring() {
    var form     = document.forms['f1'];
    var word = form.word.value;
    qstr = 'w=' + escape(word);  // NOTE: no '?' before querystring
    return qstr;
}

function updatepage(str){
    document.getElementById("result").innerHTML = str;
}
script>
head>
<body>
<form name="f1">
  <p>word: <input name="word" type="text">
  <input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/simple-ajax-example.cgi")'>p>
  <div id="result">div>
form>
body>
html>

CGI 脚本

这个CGI脚本是用来应答HTML页面的JavaScript的请求。 CGI脚本可以通过简单的Python, Puby, PHP, C, Perl 等来实现。

#!/usr/bin/perl -w
use CGI;

$query = new CGI;

$secretword = $query->param('w');
$remotehost = $query->remote_host();

print $query->header;
print "<p>The secret word is <b>$secretwordb> and your IP is <b>$remotehostb>

绿化数据中心 – 第一部分 – 整合，再整合

笑谈 — Tue, 02 Jun 2009 08:43:09 +0000

出于多种原因，服务器整合项目在许多组织里正开展得如火如荼。此类项目一般有如下一些目标：

以新设备替换老设备。
实现数据中心更好的整体利用率。
降低购买设备的总成本。

考虑一下如下事实：今天的多核、多处理器系统与昨日的单核的庞然大物相较而言已是相去甚远。现代的服务器跟老家伙比起来，即便是开足马力，也能以消耗更低能量的方式来实现负荷目标。还有，再考虑一下使用模式。时至今日，把那些旧的单应用服务器迁移至运行于新硬件上的虚拟机器之上的虚拟机器已远非罕见。（译者：很拗口吧，实际上指的是现在的虚拟技术已经允许在虚拟的基础上多重虚拟）。其结果是：大多数情况下，曾经许多10台、20台甚至30台服务器才能满足的负载，现已可高效地仅运行于两三台设备上。随着海量的虚拟机器监控解决方案的出现，由于其中许多都是免费的，虚拟化是实现服务器整合目标最快捷的方式。

在许多情况下，即便是新老设备一对一的替换也能降低整体能源消耗。然而，通过把许多服务器的负载整合到单台设备上则可实现大量的能源节约。

显然，此非易事 – 不会是抛出一台新服务器、把一堆负载迁移过去然后回家享受周末那么简单。为了在一台虚拟单机上充分支持如此多的负载，海量的存储空间往往是必要的。但是即便加上SAN的电力需求，大部分大型的服务器整合项目仍实现了重大的能耗节省。

节约能耗本身就是一个进行服务器整合的主要理由，但还有其他的能源因素在起作用。比如说冷却。难道给30多台既老旧又低效的服务器降温会比两三台新的服务器加上一个SAN要便宜？除非你买了一个占满整个机房的SAN，我敢打赌冷却需求可大为降低。

整合项目并没有止步于数据中心。实际上，我们完全可以肯定，这完全可以提高数据中心的能源利用率。想一想虚拟桌面基础设施吧（ VDI ）。通过在整个组织部署低功耗，以及在数据中心部署一些更节能的服务器，组织可以为台式电脑采取在服务器上实施的措施。简而言之，台式机基础设施的总拥有成本的会因此减少，其中包括节约了大量的能源。举个例子，假设你在用户桌面部署了200台瘦客户机型的终端，来取代200台的低能效的胖电脑。再假设需要五台服务器来支持这200个客户。做一下算术题你就会发现，这5台PC和200台瘦客户机的能源消费总量远比200台常规电脑的要的得多。您还可以得到 VDI的的其他一些好处，如桌面的快速部署，从而也降低整体管理成本。

服务器整合项目是越来越常见。如果你所在的组织还没有试水服务器虚拟化和整合的话，现正当时。此外，考虑一下VDI可能带来的好处。虽然这不是对每个组织都合适的灵丹妙药，VDI的确是可以直接且持续的大为降低成本的。

摘自：http://www.yeeyan.com/articles/view/%E5%8D%9A%E8%B4%A4/34583?tag_related

101条伟大的计算机编程名言

笑谈 — Tue, 02 Jun 2009 08:12:23 +0000

“人们总是害怕改变。电被发明出来的时候他们害怕电，是不是？他们害怕煤，害怕蒸汽机车。无知无所不在，并导致恐惧。但随着时间推移，人们终究会接受最新的科技。”

正如比尔盖茨曾经警告过一样，计算机已经真正成为我们的最新科技，几乎遍布我们日常生活的每一方面。所以，我们这个时代的某些最伟大的头脑开始思索起计算机和软件对于人类的重要性来了。以下就是101条有关计算机的伟大名言，并且，既然我们这个网站是一个软件开发网站，我们尤其关注编程方面的。

计算机

1、“计算机没什么用。他们只会告诉你答案。”
(巴勃罗·毕加索，画家)

2、“计算机就跟比基尼一样，省去了人们许多的胡思乱想。”
(萨姆·尤因，作家)

3、“他们拥有计算机，他们也还可能拥有其他的大规模杀伤性武器。”
(珍内特·雷诺，美国前女司法部长)

4、“跟计算机工作酷就酷在这里，它们不会生气，能记住所有东西，还有，它们不会喝光你的啤酒。”
(保罗·利里，吉他手)

5、“如果汽车能赶上计算机的发展周期的话，一辆今天的劳斯莱斯仅值100美元，每加仑要跑100万英里，每年还得爆炸一次，把里面的人杀个精光。”

(Robert X. Cringely，技术作家)

计算机智能

6、“计算机总是越来越智能的。科学家告诉我们说不久它们就能跟我们对话了。（这里的“它们”，我指的是“计算机”。我怀疑科学家永远都不能跟我们对话。）”
(Dave Barry，幽默作家)

7、“我最近注意到，在共同文化中，那种对计算机变得智能化并最终掌控世界的妄想恐惧症几乎彻底消失了。据我所知，这跟MS-DOS的发布基本是同步的。”
(Larry DeLuca)

8、“计算机会不会思考这个问题就像问潜水艇会不会游泳一样。”
(Edsger W. Dijkstra，图灵奖获得者)

9、“活了一百年却只能记住30M字节是荒谬的。你知道，这比一张压缩盘还要少。人类境况正在变得日趋退化。”
(Marvin Minsky，人工智能研究的奠基人)

信任

10、“这座城市的中央计算机告诉你的？R2D2，你不该相信一台陌生的计算机！”
(C3PO，星球大战中的翻译机器人)

11、“不要信赖那些大到不能扔出窗外的计算机”
(斯蒂夫·沃兹尼亚克，苹果联合创始人)
*译者：游戏《文明4》中的科技引言，实际上沃兹尼亚克自己也不记得自己是否确切讲过这样的话。

硬件

12、“硬件:计算机系统中可被踢的部分。”
(Jeff Pesis)

软件

13、“今天大部分的软件都很像上百万块砖堆叠在一起组成的埃及金字塔，缺乏结构完整性，只能靠强力和成千上万的奴隶完成。”
(阿伦·凯，图灵奖获得者，面向对象创始人)

14、“我终于明白‘向上兼容性’是怎么回事了。这是指我们得保留所有原有错误。”
(Dennie van Tassel)

操作系统

15、“有两样重要产品出自伯克利：LSD和BSD*。我们不相信这是个巧合。”

(Jeremy S. Anderson)

*译者：LSD是一种药力至强的迷幻剂，BSD-BSD（Berkeley Software Distribution，伯克利软件套件）是Unix的衍生系统

16、“2038年1月19日，凌晨3点14分07秒”
(UNIX中的世界末日*–1970年1月1号之后的2^32秒)

*译者：word跟world发音类似，UNIX用有符号整形数（WORD）表示时间，所以最多只能计时2^31秒，原文的2^32应为错误。

17、“每个操作系统都差不多… 我们都一样的烂。”
(微软的高级副总裁布莱恩·瓦伦蒂尼这样描述操作系统的安全状况，2003)

18、“微软出了个新版本，Windows XP,据大家说是‘有史以来最稳定的Windows’，对我而言, 这就好像是在说芦笋是‘有史以来发音最清脆的蔬菜一样’ “

(Dave Barry)

互联网

19、“互联网？那个东西还在吗？”
(Homer Simpson)

20、“网络就像是个母夜叉。我每转到一处都会看见小个的按钮命令我提交*。”
(Nytwind)

*译者注：Submit：提交，另一层意思是要求屈服

21、“想想看吧，已经有一百万只猴子坐在一百万台打字机旁，可Usenet就是不像莎士比亚。”
(Blair Houghton)

软件产业

22、“计算机软件产业最为惊人的成就，是其持续不断地放弃硬件产业的惊人成果和稳定性。”

(Henry Petroski)

23、“真正的创新经常来自于那些贴近市场、但无力拥有市场的的小型初创公司。”

(Timm Martin)

24、“人们常说，伟大的科学学科就像是站在其它巨人肩膀上的巨人。人们也说过，软件产业正如站在其他侏儒脚上的侏儒。”
(Alan Cooper，交互设计之父)

25、“这无关比特、字节和协议，而关乎利润和损益。”
(郭士纳，IBM前CEO)

26、“我们是微软。反抗是徒劳的。你会被同化的。”
(保险杠贴纸)

软件演示

27、“不管演示在彩排的时候有多好，一旦在观众面前展示时，演示的不出错几率为投资总额的观众人数次方的倒数。”
(Mark Gibbs)

软件专利

28、“专利大多数都是垃圾。浪费时间去阅读这些专利是愚蠢的。只有专利持有人才会这么干，还得强迫自己才会看。”

(Linus Torvalds，LINUX创始人)

复杂性

29、“控制复杂性是计算机编程的本质。”
(Brian Kernigan)

30、“复杂性杀死一切。它把程序员的生活给搞砸了，它令产品难以规划、创建和测试，带来了安全挑战，并导致最终用户和管理员沮丧不已。”
(Ray Ozzie)

31、“进行软件设计有两种方式。一种是让它尽量简单，明显没有不足。另一种是弄得尽量复杂，没有明显缺陷。”

(C.A.R. Hoare)

32、“好的软件的作用是让复杂的东西看起来简单。”
(Grady Booch，UML创始人之一)

易用性

33、“不管那些计算机书怎么说，只需记住，你不是‘傻瓜’。真正的傻瓜是那些所谓的技术专家，因为他们设计不出普通消费者赖以生活的易于使用的软硬件。”

(Walter Mossberg，科技专栏记者)

34、“软件供应商在努力尝试让他们的软件更‘易于操作’… 迄今为止，他们最好的办法就是翻出所有的老手册，然后在封面盖上‘易于操作’这几个字。”

(比尔·盖茨)

35、“有个老套的故事说有人希望他的计算机能像他的电话机一样好用。他的愿望实现了，因为我已经不知道该如何使用自己的电话了。”
(Bjarne Stroustrup，C++之父)

用户

36、“任何一个傻瓜都会用电脑。的确有很多傻瓜在用。”
(Ted Nelson)

37、“只有两个行业把客户称为‘用户’*。”

(Edward Tufte，信息设计大师)
*译者注：一个是计算机设计，另一个是毒品交易，computer design and drug dealing

程序员

38、“程序员在跟宇宙赛跑，他们在努力开发出更大更好的傻瓜程序，而宇宙则努力培养出更大更好的白痴。到目前为止，宇宙领先。”
(Rich Cook)

39、“你们当中很多人都知道程序员的美德。当然啦，有三种：那就是懒惰、急躁以及傲慢。”
(Larry Wall，Perl发明者)

40、“程序员的问题是你永远都不知道他在做什么，直到为时已晚。”
(Seymour Cray，超级计算机之父)

41、“那就是这些自认为痛恨计算机的人的真实面目。他们实际上真正痛恨的是糟糕的程序员。”
(拉瑞·尼文，科幻作家)

42、“很长时间以来我一直困惑不已，为什么一些又贵又先进的东西会一点用都没有。直到我突然想起，计算机不就是一台愚蠢之至却拥有难以置信的做聪明事能力的机器嘛，而程序员不就是聪明绝顶却拥有难以置信的干蠢事的能力的人嘛。一句话，他们简直就是天生绝配。”
(比尔·布莱森，旅游文学作家)

43、“正如研究画笔和颜料无法让人成为绘画大师，计算机科学的教育不会让任何人成为一名编程大师。”

(埃里克·雷蒙，开源运动领袖)

44、“一个程序员是经历以下事情后仍能证明自己是严格的专家的人：他可以历经数不清的捶打，可取材于无关紧要的文档，用上面的争议数据作出模糊假设，并以此计算出测微精度的无数片面理解的答案,并由一个不可靠、脑袋充满质疑、公开宣称要让一个倒霉透顶、没有指望、毫无防备,要求第一时间获得信息的部门狼狈不堪、令人生厌的人使用一台准确度有问题的仪器去实施。”

(IEEE网格新闻杂志)

45、“运气好的黑客能用几个月的时间 – 生产出一个小规模的开发团体（比如说，7-8人）历尽艰辛一起工作了一年多才能做出来的东西。IBM经常报告说某些程序员的生产力要比其它工人高百倍，甚至更多。”
(Peter Seebach，黑客)

46、“最好的程序员跟好的程序员相比可不止好那么一点点。无论用那种标准去衡量：概念创造性、速度、设计的独创性或者解决问题的能力，这种好都不是一个数量级的。”

(兰德尔·E·斯特劳斯，科技作家)

47、“伟大的车工值得给他几倍于普通车工的薪水，但一个伟大的软件代码作家，其价值则要等同于一个普通的软件写手的价格的1万倍。”
(比尔·盖茨)

编程

48、“就算它工作不正常也别担心。如果一切正常，你早该失业了。”
(Mosher的软件工程定律)

49、“靠代码行数来衡量开发进程就好比用重量来衡量飞机制造的进度。”
(比尔·盖茨)

50、“写代码的社会地位比盗墓的高，比管理的低。”
(杰拉尔德·温伯格，软件与系统思想家)

51、“首先学习计算机科学及理论。接着形成自己编程的风格。然后把这一切都忘掉，尽管改程序就是了。”
(George Carrette，杰出软件工程师,开源推广者)

52、“先解决问题再写代码。”
(John Johnson)

53、“乐观主义是编程行业的职业病；用户反馈则是治疗方法。”
(Kent Beck)

54、“迭代者为人，递归者为神。”
(L. Peter Deutsch)

55、“布尔值最好的一点是，就算你错了，也顶多错了一位而已。”
(无名氏)

56、“数组的下标是从0开始好还是从1开始好呢？我的0.5的折衷方案，以我之见，没有经过适当考虑就被否决掉了。”

(Stan Kelly-Bootle)

编程语言

57、“只有两种编程语言：一种是天天挨骂的，另一种是没人用的。”
(Bjarne Stroustrup，C++之父)

58、“PHP是不合格的业余爱好者创建的，他们犯了个小恶；Perl是娴熟而堕落的专家创建的，他们犯了阴险狡诈的大恶。”

(Jon Ribbens)

59、“COBOL的使用摧残大脑；其教育应被视为刑事犯罪。”
(E.W. Dijkstra)

60、“把良好的编程风格教给那些之前曾经接触过BASIC的学生几乎是不可能的。作为可能的程序员，他们已精神残废，无重塑的可能了。”

(E. W. Dijkstra)

61、“我想微软之所以把它叫做.Net，是因为这样它就不会在Unix的目录里显示出来了。”
(Oktal)

62、“没有一种编程语言能阻止程序员写出糟糕的程序来，不管这种语言结构有多良好。”
(Larry Flon)

63、“计算机语言设计犹如在公园里漫步。我是说侏罗纪公园。”
(Larry Wall)

C/C++

64、“搞了50年的编程语言的研究，最后就出了个C++？”
(Richard A. O’Keefe)

65、“写C或者C++就像是在用一把卸掉所有安全防护装置的链锯。”
(Bob Gray)

66、“在C++里你想搬起石头砸自己的脚更为困难了，不过一旦你真的做了，整条腿都要报销。”
(Bjarne Stroustrup)

67、“C++ : 友人可造访你的私有成员之地也。”
(Gavin Russell Baker)

译者：Friends：C++的友元，是一种定义在类外部的普通函数，但它需要在类体内进行说明，为了与该类的成员函数加以区别，在说明时前面加以关键字friend。友元不是成员函数，但是它可以访问类中的私有成员。友元的作用在于提高程序的运行效率，但是，它破坏了类的封装性和隐藏性，使得非成员函数可以访问类的私有成员。

68、“罗马帝国灭亡的其中一个主要原因是他们没有0 – 这样他们就没法给自己的C程序指明成功退出的路径了。”
(Robert Firth)

Java

69、“Java从许多方面来说就是C++–。”
(Michael Feldman)

70、“说Java好就好在运行于所有操作系统之上，就好比说肛交好就好在无论男女都行。”

(Alanna)

71、“好吧，Java也许是编程语言的好榜样。但Java应用则是应用程序的坏榜样。”
(pixadel)

72、“要是Java真的有垃圾回收的话，大部分程序在执行之前就会把自己干掉了。”
(Robert Sewell)

开源

73、“软件就像性事：免费/自由更好。”
(Linus Torvalds)

74、“唯一对免费软件感到害怕的人，是自己的产品还要不值钱的人。”
(David Emery)

代码

75、“好代码本身就是最好的文档。”
(Steve McConnell，《代码大全》的作者)

76、“你自己的代码如果超过6个月不看，再看的时候也一样像是别人写的。”
(伊格尔森定律)

77、“前面90%的代码要占用开发时间的前90%。剩下的10%的代码要占用开发时间的另一90%。”

(Tom Cargill，C++领域中公认的专家)

软件开发

78、“好的程序员绞尽脑汁，务求考虑各种场景，幸得好的指南拯救我们，不必面面俱到。”
(Francis Glassborow，C和C++领军人物之一)

79、“在软件里面，我们鲜有有意义的需求。就算有，衡量成功的唯一尺度，也取决于我们的解决方案是不是搞定了客户的想法 – 那飘忽不定的、对问题是什么的想法。”

(Jeff Atwood，Coding Horror Developer Blog的创始人)

80、“想想我们计算机程序的糟糕现状吧，很显然软件开发仍是黑箱艺术，还不能称之为工程学科。”
(Bill Clinton，前美国总统)

81、“没有伟大的团队就没有伟大的软件，可大部分的软件团队举止就像是支离破碎的家庭。”
(吉姆·麦卡锡，微软VC++总监)

调试

82、“一旦我们开始编程，就会惊讶地发现让程序正常没想象中那么简单。调试不可避免。那一刻我认记忆犹新，当时我就意识到，从今往后我生活的大部分时间都要花在寻找自己程序的错误上面了。”

(莫里斯·威尔克斯调试探索, 1949)

83、“调试难度本来就是写代码的两倍。因此，如果你写代码的时候聪明用尽，根据定义，你就没有能耐去调试它了。”
(Brian Kernighan，《C 程序设计语言》的作者之一)

84、“如果调试是除虫的过程，那么编程就一定是把臭虫放进来的过程。”
(Edsger W. Dijkstra)

质量

85、“我才不管它能不能在你的机器上运行呢！我们又没装到你的机器上！”

(Vidiu Platon，罗马尼亚的微软最佳学生合作伙伴MSP)

86、“编程就像性一样：一时犯错，终生维护。”
(Michael Sinz)

87、“有两种写出无错程序的办法；只有第三种有用。”
(Alan J. Perlis)

88、“软件质量与指针算法不可兼得。”
(Bertrand Meyer)

89、“如果麦当劳像软件公司那样运作的话，每一百个巨无霸就会有一个令你食物中毒，而他们的回应是，‘真对不起，这是一张额外附送两个的赠券。’ “
(Mark Minasi)

90、“永远要这样写代码，好像最终维护你代码的人是个狂暴的、知道你住在哪里的精神病患者。”

(Martin Golding)

91、“是人都会犯错，不过要想把事情彻底搞砸还得请电脑出马。”
(Paul Ehrlich)

92、“计算机比人类历史上的任何发明都更快速地导致你犯更多的错误–可能除了手枪和龙舌兰酒是例外。”

(Mitch Radcliffe)

预测

93、“能发明的东西都发明出来了。”
(查尔斯·杜埃尔, 美国专利局局长，1899年)

94、“我认为全球市场约需5台计算机。”
(托马斯·沃森, IBM董事长, 约1948年)

95、“看上去我们已经到达了利用计算机技术可能获得的极限了，尽管下这样的结论得小心，因为不出五年这听起来就会相当愚蠢。”

(约翰·冯·诺伊曼,约1949年)

96、“但这又有什么好处呢？”
(IBM先进计算机系统部的工程师对微芯片的评论, 1968年)

97、“没理由人人都放台电脑到家里面去。”
(肯·奥尔森,数据设备公司（DEC）总裁，1977年)

98、“640K对每一个人来说都已足够。”
(比尔·盖茨,1981年)

99、“Windows NT的RAM寻址空间可达2G，这比任何应用程序所需都要多。”

(微软, 谈及Windows NT的开发时所言, 1992年)

100、“我们永远也无法真正成为无纸化社会，直到掌上电脑一族发布擦我1.0*（WipeMe 1.0）为止。”

(安迪•皮尔逊，商界领袖)

*译者注：意思是说难道你大便不用纸吗？

101、“长此以往，除了按键的手指外，人类的肢体将全部退化。”
(弗兰克•劳埃德•赖特，建筑师)

摘自：http://www.yeeyan.com/articles/view/%E5%8D%9A%E8%B4%A4/41893?tag_related

互联网应用表单设计

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

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

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

表单布局

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

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

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

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

使用视觉元素

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

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

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

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

基本动作和次级动作

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

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

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

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

企业还在为管理数据犯愁？试试语义网吧

笑谈 — Tue, 02 Jun 2009 03:34:15 +0000

普华永道（PricewaterhouseCoopers）最新的一封技术报告（link）阐释了语义网和连接数据将如何更好的帮助企业管理大规模的数据。普华永道技术创新中心的团队花了数月的时间研究和分析了企业数据仓库（data silos ）的问题以及为解决这一问题正在浮现出来的解决方案。根据普华永道的报告，问题的答案是语义网技术，普华永道相信，语义网为解决大规模的数据整合问题提供了一种实际可行的方法。

我们下载了这封长达58页的报告，然后在此文中为你概括了我们的一些发现。

普华永道在这封报告中写道，语义网的底层技术（underlying technology）不仅仅可以应用在网络数据，而且也可以应用到“内部信息和非网络的外部信息”——其中包括公司的数据仓库。目前企业在关系数据库中痛苦挣扎，但是普华永道称语义网技术不光可以降低成本而且可以提供更多数据，更重要的是，公司可以将它们“不敏感"的本体（ontologies）贡献到连接数据的云中。

”有了语义网，你就无需重复别人劳动重新创建你自己的本体，因为像 musicontology.com和DBpedia的公司已经创建了不少的本体而且将它们发布到网上了。既然它们是公开而且也有用，那么你可以使用他们所创建的本体然后再恰当的地方使用即可。理论上，你可以将一些构成你商业模型的特定的非敏感业务本体公开，让别人也可以使用它们。”

我们对建立阅读完整的报告以全面了解本体。但是本体基本上可以被看成链接数据（connect data）和元数据（metadata）的混合体。普华永道继续解释，称本体技术正在发展成为针对机构的一种流行的业务整合技术。这封报告称，数据密集型的医疗，媒体，石油和天气行业可能会成为此次运动的早期领跑者。“

企业经常面临的一个网络技术问题就是缺乏对引入的控制权。普华永道也承认这点，但是它称企业只需控制部分数据——而不是所有数据。普华永道称，为了真正利用互联网的优势，企业需要充分利用它的规模性—— 如果不放弃一些控制权这是没办法实现的。因此普华永道建议企业”只对那些无需规模化的领域保持完全的受控环境。“

这面这个表是对采用连接数据的方式来进行数据管理所有来好处的一个绝好概括。

普华永道罗列出了许多致力于企业数据整合技术的语义技术提供商。这些解决方案中并不是所有的都是基于语义网标准的，但是大多数解决方案都或多或少的依附于语义网技术。普华永道罗列出的提供商有Cambridge Semantics，Collibra，Metatomix, OpenLink Software,和Talis集团。非常有意思的是，一些大的数据库提供商也涉足早期的企业语义网市场：微软就为Word 2007提供了一个开源的本体插件(Ontology Add-In)，Oracle提供Spatial 11g，这是119数据库的一个选项，根据普华永道的报告，它提供了形形色色的语义数据管理功能。

读者可以通过这个链接（link）免费下载这封报告，这封报道还为那些想进入语义网世界的企业打包提供了许多有用的信息。如果你的公司也正在使用语义网，你可以在下面评论中告诉我们，以及到目前为止，你公司的语义网使用情况怎么样。

摘自：http://www.yeeyan.com/articles/view/11302/43998

你需要知道的开发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

设计项目开始前，9件需要了解客户的事情

笑谈 — Tue, 02 Jun 2009 00:46:36 +0000

作为设计师，你的每个客户和项目都是独一无二的。有些事情，你需要了解或者熟知你的所有客户，才能为他们做出最好的设计。建设一个有效的解决具体业务需求的网站，需要设计人员准确理解很多业务的细节。

在这篇文章中，我们会看到9件设计师与客户在设计开始前需要讨论的事情，以增加成功的可能性。这些是围绕去了解客户业务与需求的话题，而不是像付款与最后期限这样的合同问题。

1. 商业目的

几乎所有的商业行为都有任务与远景声明。如果你想要设计出真实反映业务和对客户有效的网站，了解基本的商业存在原因与他的目标是绝对有必要的。

如果你不清楚客户的核心职责或者他们存在的原因，一定要在开始向目前把这些问题弄明白。虽然是很简单的资料，但是没有他们，项目很有可能误入歧途。

2. 具体产品与服务的业务

一旦清晰了业务存在原因，熟知具体事项与客户是如何从业务中得到收入也是非常重要的事情。无论是建立电子商务网站，还是普通的信息站，或者任何其他类型的网站，有必要知道客户准备为网站用户提供什么。

3. 客户的用户统计数据

讨论业务的产品和服务会让你获得有关为产品与服务付费的用户的更多信息，有效果的网站是以用户为中心，这个对身为设计师的你是至关重要的，你的客户需要准确的了解谁将使用这个网站，谁是有可能对提供的业务感兴趣。

尽可能多的获取这方面信息是非常好的做法。比如目标用户的年龄，性别，职业，收入等等，这些对确定网站的设计风格非常有帮助。此外，为搜集更多有关用户对产品与服务感兴趣的原因而建立网站，有利于提高潜能。

4. 企业文化

好的网站能反映企业，使之成为整体市场营销和企业形象有效的一部分。为了创建能准确表现企业的网站，你需要在一定程度上了解他们的企业文化。很多时候你可以通过业务人员了解他们的文化（如果可能的话）。与不同的员工进行交谈，与不同的客户或者用户交谈（如果可能的话），通过观察其现有的营销材料，比如小册子，名片和广告。

5. 目前网站需要改善的地方

如果你的项目是需要对现有网站重新设计，这个时候你需要知道的一个重要事情是为什么他们选择了重新设计，特别是为改善现状重新设计他们制定了什么？是因为他们网站上了岁数仅需要换换面貌？还是因为发生了业务发生了重大改变需要新的设计与信息？还是提供的新产品和服务不属于旧的网站的一部分？还是现在的网站不能为新的业务提供有效的帮助。虽然这是非常合乎逻辑需要考虑的事情，但是需要你向客户索取资料，并弄清楚他们着手重新设计的原因，这是许多人不会想到你需要完全明白的。

6. 他们对新网站的期望

假如目前网站存在失败或者过时的具体地方。一定要深入了解客户对新网站提高业务水平的期望是怎样的。期望是决定他们对你的工作的满意度的巨大因素。所以为了满足用户，知道项目最终的结果是什么非常重要。

7. 项目成败的决定性因素

网站的新设计会给企业带来令人满意的感觉改善。但是最终将有其他的影响因素，决定项目的成败。作为设计师，有效的工作会给客户带来提高业务的网站设计。清楚的认知项目成败的因素是非常重要的。也许是成功仅仅在于增加了销售量。也许是网站更准确的反应了企业的重大事情。无论是哪种，知道如何衡量能帮助你把重点放在合适的方面。

8. 他们选择你做设计师的原因

有如此众多的自由设计师和设计公司可供选择，很明显客户选择了你是有原因的。也有一些是使客户觉得你是最合适的人选的相关事情。这也许因为你以往作品中的具体项目。也许因为在签约之前你表现出的有效沟通和对细节的关注。也许是因为你的定价。

无论是何种情况，有些关于你或者你的工作的事情，是鼓励你的客户和你一起去了解其他设计师。这一决定背后的原因往往会帮助你更好的了解他们想要的或者对你的期望。

9. 他们维护网站的计划

目前几乎每一个网站的设计开发都会使用某种类型的CMS.他们不断维护更新网站的需求影响着CMS的选择和如何建立网站。

他们计划增加新的页面与经常在存在的页面改动图片和文字么？他们需要各种各样的模板，为不同的目的建立特定页面吗？他们仅仅是偶尔或者很少更新页面么？理解客户不断前进中的需求能帮助你决定为特定的项目使用正确的CMS。在某些情况下，客户可能已经有了他们想使用的 CMS,但是这样的情况不经常遇到。

摘自：http://www.yeeyan.com/articles/view/61966/44096

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{}
缩进，是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。

动软代码生成器

笑谈 — Wed, 27 May 2009 08:11:15 +0000

自己试用了一下，觉得动软真的做得不错，静待其发展，在此特设一链接，方便关注与试用。

动软.Net代码生成器（.Net 2.0版）

软件版本：	2.2
最后更新：	2009-5-1
软件大小：	2.8 MB
软件性质：	简体中文/免费软件
运行环境：	.Net 2.0
下载次数：	349273
软件描述：	1.优化了启动窗闪屏的处理。 2.增加对IBatisNet的代码生成插件。 3.完善了Web代码命名空间的问题。 4.UI操作的优化。 [IT168下载(推荐或高速)] [博客园下载] [华军下载] [天空下载] [新浪下载]

立即免费下载

动软.Net代码生成插件源码

软件版本：	2.19
最后更新：	2008-12-5
软件大小：	69K
软件性质：	简体中文/免费软件
运行环境：	Codematic 2.19
下载次数：	20271
软件描述：	动软.Net代码生成器2.1以上版本支持代码插件机制，支持可扩展的代码生成插件，用户可以定制自己的代码生成的插件，根据接口开发自己的代码生成方式，按用户需求进行代码生成。详见插件接口开发帮助和源码。这里提供了几种典型的代码生成方式的组件源码供参考。包括组件： 1.BuilderBLLComm BLL层代码模板组件源码。 2.BuilderDALELParam DAL层代码构造器(基于企业库方式) 3.BuilderDALParam DAL数据访问层代码构造器（Parameter方式） 4.BuilderDALSQL DAL数据访问层代码构造器（基于SQL方式） 5.BuilderModel Model代码生成组件源码。 6.BuilderWeb Web层代码生成组件源码。 7.Lib 需要引用的库。同时希望大家把自己开发的代码生成插件在网上共享，别的网友也可使用已经开发好的插件覆盖安装目录下的插件库文件或通过插件管理增加新插件。尽量避免重复开发。借此也可以让大家有个交流的机会。全部源码下载

立即免费下载

动软.Net代码生成器（.Net 1.1版）

软件版本：	1.9.7.3
最后更新：	2006-5-8
软件大小：	2.65 MB
软件性质：	简体中文/免费软件
运行环境：	.Net 1.1
下载次数：	37848
软件描述：	该版本基于Net 1.1版本开发的早期版本。实现了代码生成的基本功能。

立即免费下载

普通三层结构示例项目源码 CodematicDemoS3

软件版本：	2.0
最后更新：	2008-12-3
软件大小：	2.5M
软件性质：	简体中文/免费软件
运行环境：	VS2005+SP1
下载次数：	31011
软件描述：	CodematicDemoS3 是一个标准三层架构的完整示例项目源码，基于Asp.net2.0开发，结构更简洁，提供更多有效的示例源码参考。方便用户更好的理解和使用该架构进行开发，配合Codematic代码生成器，可以使开发效率事半功倍，倍感轻松。

立即免费下载

工厂模式三层结构示例项目源码 CodematicDemoF3

软件版本：	2.0
最后更新：	2008-12-5
软件大小：	2.1 MB
软件性质：	简体中文/免费软件
运行环境：	VS2005+SP1
下载次数：	41254
软件描述：	CodematicDemoF3 是一个基于工厂模式的三层架构示例项目源码，基于VS2005 SP1开发，结构更简洁，提供更多有效的示例源码参考。方便用户更好的理解和使用该架构进行开发，配合动软Codematic代码生成器，可以使开发效率事半功倍，倍感轻松。

立即免费下载

Asp.Net知识库

软件版本：	4
最后更新：	2007-1-15
软件大小：	50 MB
软件性质：	简体中文/免费软件
运行环境：	WinXP/2000/2003
下载次数：	96848
软件描述：	LTP.NET 知识库系列，包括C#(WinForm)知识库（1，2）和ASP.NET知识库（1—6版）两个系列，共8个文件260M，该知识库包括了.NET开发过程中的很多知识点和源码示例以及很多开发感悟，经验技巧、个人总结等大量文章资源。是本人从事开发多年来积累的精华。是开发人员和学习者不可多得的一本技术手册。该版本是ASP.NET知识库第4版。

立即免费下载

升级到Visual Studio 2008的十大技巧

笑谈 — Wed, 27 May 2009 07:54:14 +0000

升级到Visual Studio 2008，来个飞跃。但是，若在升级过程中做出了错误的选择的话，就会为之付出一些代价。下面用十步教你轻松实现。

1、首先，小心的卸载所有先前发布的相应软件和模块

这是最重要的步骤之一。如果您有任何先前版本的.NET Framework 3.5或Visual Studio 2008，那么这些软件都必须在安装Visual Studio 2008 RTM之前被卸载。在安装之前关闭一些相关的软件也是个不错的主意：

◆关闭所有的MS Office应用程序(如Outlook，Word等)

◆关闭Internet Explorer

◆关闭所有的windows资源管理器

◆关闭所有其它不需要打开的程序

以下是Scott Guthrie 提供的对先前发布版本的合适的卸载顺序，这些提到的软件可能有些您安装了而有些没有，只要确保如下的顺序即可：

◆移除“MSDN Library for Visual Studio 2008 Beta”

◆移除“Microsoft SQL Server Compact Edition 3.5”

◆移除“Microsoft SQL Server Compact Edition 3.5 Design Tools”

◆移除“Microsoft SQL Server Compact Edition 3.5 for Devices”

◆移除“Microsoft Visual Studio Performance Collection Tools”

◆移除“Windows Mobile 5.0 SDK R2 for Pocket PC”

◆移除“Windows Mobile 5.0 SDK R2 for Smartphone”

◆移除“Crystal Reports 2007”

◆移除“Visual Studio Asset System”

◆移除“Microsoft Visual Studio Web Authoring Component / Microsoft Web Designer Tools”

◆移除“Microsoft Visual Studio 2005 Tools for the 2007 Microsoft Office System Runtime”

◆移除“Microsoft Visual Studio 2005 Tools for the 2007 Microsoft Office System Runtime Language Pack” (只针对非英语版)

◆移除“Microsoft Visual Studio Tools for Office Runtime 3.0”

◆移除“Microsoft Document Explorer”

◆移除“Microsoft Document Explorer 2005 Language Pack” (只针对非英语版)

◆移除“Microsoft .NET Compact Framework 3.5”

◆移除“Microsoft .NET Compact Framework 2.0 SP1”

◆移除“.NET Framework 2.0 SDK”

◆移除“Microsoft Visual Studio Codename Orcas Remote Debugger”

◆移除“Microsoft Visual Studio 64bit Prerequisites Beta” (只针对64位平台)

◆移除“Microsoft .NET Framework 3.5"

2、只安装您真正会用到的部分

不要仅仅因为DVD上什么都有，就要把所有的东西都装上。您安装的软件越少，以后打的补丁就越少，其占用的磁盘空间也越少。

3、不要被前面的重启提示弄傻了

.NET Framework 3.5的安装程序会提示用户在安装的过程中间重启，不要理会它。所有的重启都要等到安装完Visual Studio 2008之后再执行。

4、如果您要用Team System，就安装Team System 2008 Team Explorer

如果您准备连接到Team Foundation服务器，那么您需要安装Team System 2008 Team Explorer，否则无法连接到Team Foundation服务器。

这篇文档告诉您如何从Team Foundation服务器安装介质(光盘，下载包等)得到Team Explorer，但是这是一个3GB的下载版本。最简单的方法是得到单独的Team Explorer安装版，这个安装版只有387MB。

5、安装之后，将您的IDE设置恢复到默认设置。

如果IDE的设置在任何先前发布的版本中做了更改，它们都应该被恢复到默认设置。可以在命令行运行 devenv.com /ResetSettings 或者在Visual Studio 2008中点击菜单 Tools > Import and Export Settings… > Reset all settings

6、抓住这个时机改变您的Visual Studio主题

这是个很好的时机来修改主题。Visual Studio的主题系统允许开发者尝试一个新的主题，如果他们不喜欢，还可以改。我们推荐您选择一个使视觉更舒适的主题，特别是如果您每个星期要在IDE环境下工作很多个小时的话。

7、ASP.NET ListView中的Breaking changes (Breaking changes 意味着新的版本在这些地方将不再保证向前兼容，从而导致同样的代码在不同的版本中有不同的行为，或者旧的代码在新版本环境中不再支持)

Jon Galloway指出了这个非常重要的一点：

如果您使用先前发布的ASP.NET ListView写过任何代码，您需要升级您的标签。事实上这里只有一个真正的区别，这个区别会带来一些不同的影响：容器元素被 asplaceHolder控件代替了。先前的版本允许您使用任何 runat="server" 标记做为一个容器元素。我更喜欢RTM的行为-旧的方式有时候有点太神奇，它根据ID用子元素填满父元素。新的用法更加直接，而且这种用法使得 ListView中被标记的内容和被替代的内容一目了然。

具体而言，以前使用元素ItemContainer的地方，现在要用一个叫做ItemPlaceholder的占位符来代替。如果这样出错了，您会得到如下的出错信息：

An item placeholder must be specified on ListView ‘SampleListView′. Specify an item placeholder by setting a control’s ID property to “itemPlaceholder”. The item placeholder control must also specify runat=”server”.

8、LINQ-to-SQL 中的Breaking changes

任何先前版本的LINQ-to-SQL代码都需要被依照以下的说明更新。

(1)把 Add 和 AddAll 方法改成 InsertOnSubmit 和 InsertAllOnSubmit. 把 Remove 和 RemoveAll 改成 DeleteOnSubmit 和 DeleteAllOnSubmit.

(2)通过如下更改把 .dbml 文件的编码格式改为 utf-8

"1.0" encoding="utf-16"?>

修改为：

"1.0" encoding="utf-8"?>

(3)修改web.config中如下一行(注意版本号的区别)：

"System.Data.DataSetExtensions, Version=2.0.0.0, Culture=neutral,  PublicKeyToken=B77A5C561934E089"/>

修改为：

"System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>

9、下载更新过的Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008

装载Visual Studio 2008时这些工具不会自动准备好。所以如果要做与Silverlight 1.1相关的开发，就得自己把它们弄过来。

10、把您的解决方案都升级为Visual Studio 2008的格式

这是一个节省您很多时间的相当大的一个问题。由于Visual Studio 2008的解决方案文件和工程文件使用了一种新的格式，用Visual Studio 2008打开这些解决方案和工程会把它们升级。如果需要升级的工程很多，在命令行运行 devenv.com /Upgrade 命令可以加快升级速度。

这些技巧可以帮助开发者在初试Visual Studio 2008的时候一切顺利。更多有关Visual Studio 2008的信息可以在微软公司的 MSDN 网站和Scott Guthrie的blog上找到。

Oracle数据库系统使用的几条经验

笑谈 — Wed, 27 May 2009 07:44:01 +0000

1.having子句的使用方法

having子句对group by 子句所确定的行组进行控制，having 子句条件中只允许涉及常量，聚组函数或group by子句中的列。

2.外部联接 "+ "的使用方法

外部联接 "+ "按其在 "= "的左边或右边分左联接和右联接。若不带 "+ "运算符的表中的一个行不直接匹配于带 "+ "预算符的表中的任何行，则前者的行与后者中的一个空行相匹配并被返回。若二者均不带′+′，则二者中无法匹配的均被返回。利用外部联接 "+ "，可以替代效率十分低下的not in运算，大大提高运行速度。例如，下面这条命令执行起来将会很慢。

select a.empno from emp a where a.empno not in

（select empno from emp1 where job=´；SALE´；）；

假如利用外部联接，改写命令如下：

select a.empno from emp a ，emp1 b

where a.empno=b.empno（+）

and b.empno is null

and b.job=´；SALE´；；

大家可以发现，运行速度明显提高。

3.删除表内重复记录的方法

大家可以利用这样的命令来删除表内重复记录：

delete from table_name a

where rowid < （select max（rowid） from table_name

where column1=a.column1 and column2=a.column2

and colum3=a.colum3 and ……）；

需要注意的是，当表比较大（例如50万条以上）时，需要另想办法。

4.set transaction命令的用法

在执行大事务时，Oracle有时会报如下错误：

ORA-01555：snapshot too old （rollback segment too small）

这说明Oracle给此事务随机分配的回滚段太小了，这时可以为它指定一个足够大的回滚段，以确保这个事务的成功执行。例如：

set transaction use rollback segment roll_abc；

delete from table_name where ……

commit；

回滚段roll_abc被指定给这个delete事务，commit命令则在事务结束之后取消了回滚段的指定。

5.使用索引的注意事项

select，update，delete 语句中的子查询应当有规律地查找少于20%的表行。如果一个语句查找的行数超过总行数的20%，它将不能通过使用索引获得性能上的提高。

索引可能产生碎片，因为记录从表中删除时，相应也从表的索引中删除。表释放的空间可以再用，而索引释放的空间却不能再用。频繁进行删除操作的被索引的表，应当阶段性地重建索引，以避免在索引中造成空间碎片，影响性能。在许可的条件下，也可以阶段性地truncate表，truncate命令删除表中所有记录，也删除索引碎片。

6.数据库重建应注意的问题

在利用import进行数据库重建过程中，有些视图可能会带来问题，因为结构输入的顺序可能造成视图的输入先于它低层次表的输入，这样建立视图就会失败。要解决这一问题，可以采取分两步走的方法：首先输入结构，然后输入数据。命令举例如下（uesrname：jfcl，password：hfjf，host sting：ora1，数据文件：expdata.dmp）：

imp jfcl/hfjf@ora1 file=empdata.dmp rows=N

imp jfcl/hfjf@ora1 file=empdata.dmp full=Y buffer=64000

commit=Y ignore=Y

注释：第1条命令输入所有数据库结构，但没有记录。第2次输入结构和数据，64000字节提交一次。ignore=Y选项则会保证第二次输入既使对象存在的情况下也能成功