我想网 » XHTML

99款高质量免费XHTML/CSS模板

seasun — Sun, 01 Nov 2009 04:29:36 +0000

大家都清楚一个网站象征着你和你的品牌，这取决于你如何构建自己的网站。正因为Wordpress越来越受到互联网设计群体的关注，它并不代表最基本的XHTML/CSS很丑、很杂乱和单调。

99款高质量免费XHTML/CSS模板

99.Free Admin Template

Feed enhanced by Better Feed from Ozh

11种控制页面内容展示的JavaScript特效及技巧

seasun — Fri, 18 Sep 2009 04:53:00 +0000

交付信息结构是一个交互式用户界面所需要完成的首要任务。更直观的布局结构设计，能使用户更好的理解内容。

不管你想要介绍的是什么样的内容，你都可以以更加互动和更加适应的方式去呈现现它。本文里面，我们为你收集整理了11种高超的JavaScipt技术，让你更好的控制内容的显示方式，以便用于下一次的布局设计。

“页面滑动门”, “隐藏的内容”, “图片和内容滑动门”, “动画幻灯片”, “传送带”, “Tab内容选项卡” ，结合各种拖拽、滑动、灯箱等特效，这就是下面将为你呈现的。

1. jQuery pageSlide

jQuery pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就弹出来。再次点击隐藏页面以外的空间，它就又关闭。

这适合在有限的空间里，在主页里放重要内容，而隐藏页放一些并不一定要显示，而是有需要的用户才去展开显示的内容。当然，我是这么简单举个例，你爱怎么用又是另外一回事儿。

要查看DEMO，你可以进入这个插件的主页，点击“Click for a pageSlide demo.”这个链接。

2. Create a simple ul list with a nice slide-out effect for
elements

这个教程使用 MooTools slideOut() ，实现一个简单的UL列表，且为每个LI元素添加一个漂亮的点击隐藏特效。

3. Portfolio Layout Idea Using jQuery

非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。

它在页面两边显示带缩略的作品列表，当你点击每个条目时，会在中间部分以退场然后进场的特效呈现出该作品的全部内容。

查看DEMO

4. Creating a Slick Auto-Playing Featured Content Slider

Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick Auto-Playing Featured Content Slider 使用 Coda Slider插件，实现我们常说的”图片焦点特效”。多用于门户站。

查看DEMO

5. Easy Image or Content Slider

6. mooSlide

mooSlide 是一个可以用来取代“lightbox” 模块的特效脚本，它拥有许多有趣的功能选项，比如它可以从上或从下面弹出，它支持载入其它页面的内容等。

查看DEMO

7. jQuery.SerialScroll

jQuery.SerialScroll 可以让任何元素实现漂亮的动画移动效果。它使用 jQuery.ScrollTo 来实现移动特效。具体还是看DEMO吧，我也描述的不是很清楚。

查看DEMO

9. Animated JavaScript Slideshow

这个轻量级的JavaScript动画幻灯片脚本包含一系列很酷的功能来样式化你的内容: 描述支持，链接支持，没有命名限制，肖像图片支持，缩略图状态等等。

查看DEMO

10. Sexy Lightbox 2

Sexy Lightbox 2是一个精美的Lightbox克隆，不过它更小巧. 支持显示图片和HTML元素，并且完全兼容HTML, 也就是说它可以显示条目，页面，视频和所有其它你想要显示的东西。超大图片还可以自适应浏览器。需要Mootools框架。

查看DEMO

11. UI.Layout

这个布局脚本的灵感来自于 extJS border-layout. 它可以创建任何你想要的UI外观-从简单的标题到侧边栏，到一个应用程序的工具栏，菜单，帮助面板，状态栏，提并表单等等。

Feed enhanced by Better Feed from Ozh

IE8面向Web开发人员的功能改进

seasun — Mon, 07 Sep 2009 04:59:23 +0000

2009年3月20日，微软向全球发布了Windows Internet Explorer 8(IE8)正式版，成为人们关注的焦点。IE8迄今最符合标准的版本，它完全支持级联样式表 (CSS) 级别 2.1，并加强了对 CSS 3、HTML 4.01 的支持，也能很好地支持 HTML 5。由于改进了对这些 HTML 元素的支持，Web 开发人员现在可以构建更具表现力和可访问的 HTML 标记。本文将探讨对IE8中关于 HTML 和 CSS 支持行为的更改，以及这些更改如何影响 Web 开发人员。

HTML改进
为了帮助开发人员充分利用 HTML 4.01 提供的元素和更好地解释 Web 开发人员期望表达的语意含义，Windows Internet Explorer 升级了对下列表示性元素的支持：
P 元素：表示逻辑段落。
OBJECT 元素：可以表示任何对象，包括图像。
button元素提交其 value 属性，而非 innerHTML，这意味着现在可以使用跨浏览器 FORM 方案的 button 元素。
getElementByIdNAME方法现在区分大小写，不再使用属性进行不适当的搜索。
setAttribute 方法现在不区分大小写，这意味着指定属性时不必再使用“驼峰式”大小写格式（如“camelCaseWord”）。它也可以正确标识 HTML 属性，如 CLASS 和 FOR。

P自动添加元素结束标记
当后面跟随 TABLE、FORM、NOFRAMES 或 NOSCRIPT 元素时，缺少结束标记的 P 元素会立即自动添加结束标记。

view plain copy to clipboard print ?

<html>
<head>
<title>简单的 P 元素结束示例title>
<meta http-equiv=“X-UA-Compatible” content=“IE8″/>
head>
<body>
<p>这是第一段p>
<p style=“margin-left:30px”>这是第二段。
<table border=“1px” cellpadding=“2px”><tr><td>这是一个表格单元格。td>tr>table>
<p>这是第三段。p>
body>
html>

简单的 P 元素结束示例

这是第一段

这是第二段。

这是一个表格单元格。

这是第三段。

在本示例中，第二个 P 元素缺少结束标记。当使用 Windows Internet Explorer 7 查看时，TABLE 元素作为第二个 P 元素的子元素显示。第二个 P 元素从窗口的左边距缩进 30 像素。由于 TABLE 是该 P 元素的子元素，它也从该窗口的左边距缩进。但是，当使用 Windows Internet Explorer 8 的默认模式查看时，TABLE 元素与左边距对齐。由于 Windows Internet Explorer 8 在显示 TABLE 元素前自动添加了该 P 元素所缺少的结束标记，因此在IE8里TABLE 元素不是第二个P元素的子元素。

使用 OBJECT 元素显示图像
Windows Internet Explorer 8 可以使用 OBJECT 元素显示图像。在旧版本的浏览器中使用此元素显示图像时，它常常自动将滚动条和边框添加到图像中，从而往往导致图像显示不正确。
在 Windows Internet Explorer 8 中，OBJECT 元素显示图像时就像这些图像是使用 IMG 元素嵌入的一样。要在网页中使用此行为，请将 OBJECT 元素的 DATA 属性设置为图像的 URL。您也可以在 DATA 属性中嵌入 dataURL。
要使 Windows Internet Explorer 将图像加载到使用旧版本行为的 OBJECT 元素中，请对网页选择旧兼容性模式或将 OBJECT 元素的 TYPE 属性设置为 text/html。

改进的回退对象
当 OBJECT 元素加载资源失败时，将改为呈现 OBJECT 元素内部的内容。这称为对象回退，因为它允许您定义 Windows Internet Explorer 在遇到问题进行“回退”时所用的策略。
Windows Internet Explorer 7 引入了此功能以嵌套 OBJECT 元素；即使用多个 OBJECT 元素创建更丰富的回退策略，如以下示例中所示：

view plain copy to clipboard print ?

<object data=“…” type=“silverlight” >
<object data=“…” type=“windows media file”>
<object data=“…” type=“image/png”>
-_-!!!
object>
object>
<object>

    
	       
		

			-_-!!!

此示例使用三个 OBJECT 元素定义一个对象回退策略。它首先尝试加载 Silverlight 应用程序。如果此操作失败，则要求使用Microsoft Windows Media 文件。如果无法加载 Windows Media 文件，则此示例加载一个图像。
如果您使用 Windows Internet Explorer 7 查看此示例，将会看到此图像，但是页面的文档对象模型 (DOM) 中只有一个 OBJECT 元素，因为 Windows Internet Explorer 7 不会为加载失败的对象创建 OBJECT 元素。
如果您使用 Windows Internet Explorer 8 查看此示例，将会看到页面的 DOM 中有包含三个 OBJECT 元素的图像。由于加载失败，前两个 OBJECT 元素处于非活动状态。不过，您可以使用 JavaScript 搜索这些元素。
注意：如果不刷新页面或使用 JavaScript 加载新对象，则无法重新激活处于非活动状态的对象。
Windows Internet Explorer 8 仅将这一新的回退行为用于与通信相关的错误，即只在加载请求生成客户端 HTTP 错误响应 (4xx) 或服务器 HTTP 错误响应 (5xx) 时发生。如果由于其他原因（如内容格式不正确或 ActiveX 控件损坏）导致请求失败，将发生原始回退行为。

HTML 5/AJAX 增强功能
Windows Internet Explorer 8 的 HTML 5 增强功能包括 AJAX 导航、DOM 存储、跨文档消息传送 (XDM) 和连接事件。它们是严格按照 W3C HTML 5.0 草案开发的。

AJAX 导航
使用 AJAX 的显著好处之一是无需使用传统的页面导航即可更新页面内容。在某些情况下，使用 AJAX 无法保存页面状态，亦无法通知其组件，对此可能会令人疑惑，这是因为地址栏、“后退”和“前进”按钮等组件只能在页面导航后进行更新。因此，浏览器无法在旅行日志上保存 AJAX 内容更改或更新地址栏等组件。这可能使最终用户产生迷惑，不知道为什么浏览器总是显示旧内容。在 IE8 模式中，Windows Internet Explorer 像处理导航一样处理 window.location.hash 更新，并保存早期文档 URL。
DOM 存储
现在，网页使用 document.cookie 属性将数据存储在本地计算机上。Cookie 能力有限，因为站点对每个域只能存储 50 个键/值对。此外，Cookie 编程模型很繁琐，需要分析数据的整个 Cookie 字符串。W3C 的 HTML 5 DOM 存储对象为键/值对字符串数据提供了一个更简单的全局和会话存储模型。站点可以在选项卡生命周期内存储数据或直到网站或用户清除数据。
每个域，包括其子域，有 10 MB 的本地存储空间。这有助于降低跨域攻击的可能性。同样，每个浏览器选项卡也有自己的会话存储。DOM 存储只是 Web 应用程序简化存储数据的一种机制 — 不使用后台数据库。例如，无法执行复杂的查询，如根据值搜索。
跨文档消息传送 (XDM)
浏览器的站点源策略阻止网页从其他域获得数据。这意味着单个网页上的不同域不能相互通信，从而无法提供更加丰富的体验。网站通过创建嵌套的 IFrame 并检索通过 URL 传送的数据绕过此策略。网站绕过此策略的另一种方法是直接托管脚本和其他域中的其他资源文件。第二种解决方法只允许单向通信。由于嵌入的脚本和资源使用与托管网站相同的权限运行，还可以访问用户的数据（如用户存储在 Cookie 中的数据），因此这种方法也存在安全风险。
XDM 提供的 postMessage 方法不显示在窗口对象中，这就允许不同的域根据给定的相互许可相互通信。XDM 为双向跨域通信提供了一种机制，比上述解决方法更简单、更能体现性能驱动。
连接事件
Windows Internet Explorer 8 允许网页通过 window.navigator.onLine 属性和联机/脱机事件检测浏览器何时联机或脱机。利用这些信息，您就可以使用 DOM 存储对象启用大量的脱机方案。例如，如果用户在登录到自己的 Live mail 页后失去了连接，页面会一直提示用户将草稿保存在 DOM 存储中并允许用户继续编辑电子邮件。恢复连接时，脚本会检索电子邮件并将其发送到服务器。

CSS改进
Windows Internet Explorer 8 是迄今为止 CSS 符合性最高的版本，它完全支持级联样式表 (CSS) 级别 2.1，并加强了对 CSS 3支持。下面是最为突出的几个亮点：
数据统一资源标识符 (URI)(最长32768个字符)
此机制允许网页作者直接在 URI 中嵌入小型实体，而不是使用 URI 标识检索实体的位置。此操作主要适用于在 CSS 或布局中使用的小图像（如项目符号）。

新伪类
以下是 Windows Internet Explorer 8 新增的内容：
:before 和 :after 伪元素允许作者指定与元素的文档树内容有关的动态内容的位置。
:focus 指的是用户何时激活元素以使它可以执行任务。此伪类适用于元素具有输入焦点的情况。
Outline 可以突出显示元素，但不会影响其大小。它是 outline-color、outline-style 和 outline-width 的简化属性。
打印
为了简化打印，已添加了下列属性：
page-break-inside
widows
orphans
表格布局
多年来，表格始终是 Internet 上的首选布局机制。在 Windows Internet Explorer 8 中，现在可以使用 display 属性将表格类型格式应用于非表格元素。实际上，CSS 表格比 HTML 标记更灵活；使用 CSS 规则创建的表格嵌套元素后即有效，而使用 HTML 创建的表格会关闭容器以避免意外嵌套。

下表收集了 Windows Internet Explorer 8 中支持的各种改进的 CSS 属性，并与 Windows Internet Explorer 7 进行了比较，内容一目了然。这些表未详尽列出 Windows Internet Explorer 8 支持的所有 CSS 属性；只显示了 Windows Internet Explorer 7 不支持或部分支持，而现在 Windows Internet Explorer 8 支持的 CSS 属性。
单元格中的“部分”值表示只能在该版本的 Windows Internet Explorer 中部分实现此功能。

伪类

CSS 2.1		IE 7.0	IE 8.0
active { sRules } :	:active	部分	是
after { sRules } :	:after	否	是
before { sRules } :	:before	否	是
focus { sRules } :	:focus	否	是
lang(C) { sRules } :	lang():	否	是

列表

CSS 2.1		IE 7.0	IE 8.0
{ list-style-type :sStyle }	list-style-type	部分	是

颜色和背景

CSS 2.1		IE 7.0	IE 8.0
{ background-position :sPosition }	background-position	部分	是

字体和文本

CSS 2.1		IE 7.0	IE 8.0
{ font-weight :sWeight }	font-weight	部分	是
{ white-space :sWrap }	white-space	部分	是
{ word-spacing :sSpacing }	word-spacing	部分	是

生成的内容

CSS 2.1		IE 7.0	IE 8.0
{ content :sContent }	content	否	是
{ counter-increment :sCounter }	counter-increment	否	是
{ counter-reset :sCounter }	counter-reset	否	是
{ quotes :sQuotes }	quotes	否	是

边框和布局

CSS 2.1		IE 7.0	IE 8.0
{ border-collapse :sCollapse }	border-collapse	部分	是
{ border-spacing :sSpacing }	border-spacing	否	是
{ border-style :sStyle }	border-style	部分	是
{ caption-side :sLocation }	caption-side	否	是
{ empty-cells :sEmptyCells }	empty-cells	部分	是

定位

CSS 2.1		IE 7.0	IE 8.0
{ bottom :sBottom }	bottom	部分	是
{ display :sDisplay }	display	部分	是
{ left :sPosition }	left	部分	是
{ right :sPosition }	right	部分	是
{ top :sTop }	top	部分	是
{ z-index :vOrder }	z-index	部分	是

打印

CSS 2.1		IE 7.0	IE 8.0
{ orphans :nLines }	orphans	否	是
{ page-break-inside :sBreak }	page-break-inside	否	是
{ widows :nLines }	widows	否	是

用户界面

CSS 2.1		IE 7.0	IE 8.0
{ outline :sOutline }	outline	否	是
{ outline-color :sColor }	outline-color	否	是
{ outline-style :sStyle }	outline-style	否	是
{ outline-width :sWidth }	outline-width	否	是
CSS 3		IE 7.0	IE 8.0
{ box-sizing :sSizing }	box-sizing	否	是

函数

CSS 2.1	IE 7.0	IE 8.0
counter()	否	是
attr()	否	是

关键字

CSS 2.1	IE 7.0	IE 8.0
Inherit	否	是

文本兼容性模式
Windows Internet Explorer 8 精心构建了一种新的布局引擎，该引擎提供全面的 CSS 2.1 支持和强大的 HTML 5 支持以及文档对象模型 (DOM) 的互操作性修补程序。默认情况下，将启用标准支持的最高级别。网站作者可以使用以下 META 标记在 Windows Internet Explorer 8 中选择 EmulationIE7 模式呈现：

开发工具
Windows Internet Explorer 8 中增强的开发工具可提供网页的内部元素，有助于研究和解决 HTML、CSS 和脚本方面的问题。包含下列工具：
CSS 工具，用于显示您的网页加载的样式表所定义的各种规则。
脚本调试，一种内置轻型调试器，让您无需退出 Windows Internet Explorer 即可设置断点并查看客户端脚本。
版本模式切换，允许您切换到其他浏览器模式以测试内容是否符合标准符合性。
探查器，一种内置工具，用于显示浏览器在哪个执行阶段花费了大量时间，以便网页作者重点进行优化。
IE 8开发工具的界面如图所示，有关开发工具详细信息，请参阅下列网站：
http://www.cnblogs.com/JustinYoung/

参考文档
IE8 White Paper(白皮书)
下载页面:
http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=567
IE8博客:
http://blogs.msdn.com/ie/

Feed enhanced by Better Feed from Ozh

转换设计原图 PSD 为 HTML

seasun — Sat, 04 Jul 2009 17:01:20 +0000

PSD 文件

100% HTML 和 CSS

Feed enhanced by Better Feed from Ozh

30个写给HTML初学者的最佳实践

seasun — Sat, 04 Jul 2009 08:52:56 +0000

在运营Nettuts+过程中，最困难的莫过于需要满足各种不同技能水平的人群了。如果我们发布了过多的高级教程，那么对于初学者来说无疑就会失去平衡感。相反也是同样的道理。我们尽全力，希望顾及到的是所有人的利益。这个网站是为您服务的，有需要的那么就请说出来吧！像所说的那样，今天的这篇教程是为那些刚刚步入web开发的初学者提供的。如果您只有一年或者更少，那么希望这里列出来的条目会对您有所帮助，并且能够学习得更好，更便捷!

排除任何的干扰，当您在创建标示的时候，就来回顾下这30个最佳实践吧。

作者: Jeffrey Way

您好，是叫 Jeff。我是 Nettuts+ 的一名编辑，同时，我也是 Theme Forest网站的管理者。我在电脑前待得太多了，以至于我经常会对我的未婚妻说，”我们将会在5分钟之后走!”。我不能做到，当然依然在用Firebug调试错误的时候就跟我的未婚妻出去吃饭…这使得我很疯狂。我热爱 jQuery, PHP, MYSQL, CSS, AJAX – 几乎所有。如果这些对你也备受青睐，请在 Twitter 上追踪我们。

1: 始终闭合您的标签

回顾过去，这样的代码并不少见:

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

请注意，这里的 UL/OL 已被省略。另外，很多都选择没有闭合 LI 标签。按照今天的标准，这是个非常糟糕的低级错误，必须 100% 避免。一如既往，始终要闭合您的标记。否则，每次您都会碰到验证及一些故障问题。

更好的

<ul>
<li>Some text here. li>
<li>Some new text here. li>
<li>You get the idea. li>
ul>

2: 什么正确的 DocType

当我还很年轻的时候，我加入了很多的 CSS 论坛。每当有用户存在一个问题，我就会查看下他们的环境，并要求他们先执行两件事:

验证 CSS 文件。修正任何必要的错误。
添加 doctype声明。

“DOCTYPE 在打开HTML 页面标签的最开始部位显示，它会告诉浏览器当前包含的是 HTML, XHTML, 还是两者的混合版，以便它能够正确地解释的标记。”

通常我们都会选择下面四个不同的 doctypes 中的其中一个来创建我们新的网站。

如何选择这个类别，当今存在着很大的争议。有一点是明确的，使用严格的 XHTML 版本被认为是最佳做法。然而，经过研究，人们认识到，大多数的浏览器在诠释的时候依然会恢复到正常 HTML。因为这个原因，大多数都选择严格的HTML 4.01作为替代。所有这些的底线是，它们依然多会对您的代码做些检测。做一些调查，最终得出自己的结论吧！

3: 不要使用内置的样式

当然非常努力地在作标示的时候，经常会选择一些捷径，偷偷地内置一些样式到标示中。

<p style=“color: red;”>I’m going to make this text red so that it really stands out and makes people take notice! p>

当然 — 这些看起来并不会带来坏处。然而，这种方式的编码是错误的。

当您再创建标示的时候，不要总想着内置样式。您应该再页面中的标示代码都已经做好的时候再来定义样式。

这就像穿越溪流的捉过敢死队。这可不是什么好主意。
-Chris Coyier (与提到的东西完全无关。)

替代的是，完成您的标示之后，引入一份外部的文件来定义 P 标签的样式。

更好的

#someElement > p {
color: red;
}

4: 将所有的外部 CSS 文件置于Head 标签内。

从技术上来说，您可以将这个样式放置在任何您想放的任何地方。然而，HTML规格推荐您放再文档的 HEAD 标签内。主要的好处是，这样您的网页渲染会加载得更加快。

通过研究Yahoo中的表现，我们发现将样式移动到文档的 HEAD 中页面的加载会快很多。这是因为把样式放在头部会逐步粉饰网页。
- ySlow 团队

<head>
<title>My Favorites Kinds of Corntitle>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/file.css” />
<link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/anotherFile.css” />
head>

5: 考虑将 Javascript 文件放在底部

记住 — 主要的目的是为了使页面在客户端的加载越快越好。当脚步在下载的时候，浏览器在文件下载完场之前是不会继续载入的。因此，用户还需要等待更长的时候才会有其它的进展。

如果您包含了JS文件，而仅仅是为了定义额外的功能 — 例如，按钮中的点击 — 那么就请将这些文件放在底部，即body标记的闭合之前。这绝对是最佳做法。

更好的

<p>And now you know my favorite kinds of corn. p>
<script type=“text/javascript” src=“path/to/file.js”>script>
<script type=“text/javascript” src=“path/to/anotherFile.js”>script>
body>
html>

6: 不要使用内置的 Javascript。这可不是在1996!

几年前的推荐做法都是将JS文件直接内置在标签内。这对于几个简单的图像画廊式的非常常见。实际上，”onclick” 属性是出现在标签内的。这等价于JS的处理程序。毫无疑问，您永远都不应该这么做。相反，这段代码已经转移到一个外部的JS文件中，然后使用“ addEventListener / attachEvent ”为您需要监听的事件中添加这个。或者，如果您使用的是像 jQuery 这样的框架，就请使用 “click” 方法。

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

7: 验证 Continuously

我最近博客中提到的关于如何验证的想法，不要曲解理解它的最终目的。正如我在文章中提到的， “确保验证是为您服务，而不是打击。”

不过，特别是刚开始的时候。我就强烈推荐您下载 Web Developer Toolbar，并且经常使用 “Validate HTML” 和 “Validate CSS” 选项。虽然CSS是门非常易学的语言，但也会经常令您抓狂。正如您最终发现的那样，劣质的代码才是造成问题的关键。记住验证，验证，加验证。

8: 下载 Firebug

我不得不推荐这个。Firebug，毫无疑问，这是您在创建网站时不可或缺的插件。它不仅提供了难以置信的JavaScript调试，它还可以帮助您确定该元素继承了哪些样式。下载它!

9: 使用 Firebug!

据我所知的经验判断，许多用户仅仅利用了20%的Firebug的高级功能。要想对自己正在有帮组，那么就每天多花几个小时在web教程中的学习吧，您会找到不少这些问题的解决方法。

资源

10: 小写标示您的标记

技术上将，您完全可以消除这方面的标记写法。

<DIV>
<P>Here’s an interesting fact about corn. P>
DIV>

更好的

<div>
<p>Here’s an interesting fact about corn. p>
div>

11: 使用 H1 – H6 标签

诚然，这有时候让我皮预处理。最好的做法是将这六个标记全部都运用起来。老实说，通常我只执行这前面的四个，我就是这么工作的!:)。由于语义及SEO原因，在适当的时候用H6来替代P标签吧。

<h1>This is a really important corn fact! h1>
<h6>Small, but still significant corn fact goes here. h6>

12: 如果创建了博客，那么就用H1来标示您的文章标题吧

就在今天早上，在Twitter上，我问我的追踪者们，H1标记是应该作为LOGO的标志呢，还是作为文章的标题。约80%的人是赞成后一种方法。

不管如何，确定一个时候您自己的网站的吧。但是，如果是建立博客，我的建议是用H1标记来作为标示您的文章标题。对于SEO而言，这无疑是更好的做法。

13: 下载 ySlow

特别是在过去的几年中，Yahoo团队一直在作这个领域的真正的伟大的工作。就在不久前，他们发布了Firebug的扩展叫ySlow。激活时，它会分析网站并返回一个“报告单”，记述了您的网站有哪些还需要更近的。要求几乎有点苛刻，但都是为了更好的效果。我高度推荐使用。

14: 无序的导航列表

几乎每个网站都有导航部分。而您的定义无非即使需要如下的格式:

<div id=“nav”>
<a href=“#”>Home a>
<a href=“#”>About a>
<a href=“#”>Contact a>
div>

就语言而言，我建议您不要使用这种方法。您的任务是尽您所能写出最好的代码。

为什么要给我们的导航连接定义其它而不是无序列表？

UL标签的作用就是包含项目清单。

更好的

<ul id=“nav”>
<li><a href=“#”>Homea>li>
<li><a href=“#”>Abouta>li>
<li><a href=“#”>Contacta>li>
ul>

15: 了解如何配置IE浏览器

无疑某天您肯定会为了IE中的某点会其它而尖叫。它实际上已成为社区中讨论的焦点。档我再Twitter上看到我的一个朋友因为IE而苦恼，我总是笑笑，并承认，“我知道你的感受，朋友。 ”

首先，一旦您完成CSS主文件的编写，创建一个单独的“ ie.css ”文件。然后在此加入只针对IE浏览器的代码。

>
<link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/ie.css” />
>

这段代码表示，“如果用户的浏览器版本是IE6或者更低，就载入这个样式。否则就什么都不做。”如果您想要针对IE7，同样也可以采用这样的方式，用“lte”（小于或等于）来替代“lt”吧

16: 选择一个强大的代码编辑器

无论是Windows还是Mac，都有许多出色的代码编辑器，使得您的工作变得更加精彩。就我而言，我每天都需要面对这Mac核PC两台电脑。其结果是，经过这么长实践的程序生涯，以下是我的选择/建议：

Mac 爱好者

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

PC 爱好者

17: 一旦网站完成后，压缩！

通过压缩您的CSS及JavaScript文件，每个文件可以大幅度缩减25%左右。在开发中千万不要犹豫是不是应该这么做。无论如何，一旦您的网站建立了，这或多或少会减少不少您的宽带需求。

Javascript 压缩服务

CSS 压缩服务

18: 削减, 削减, 削减

回首我的第一个网站，在div处理上我肯定犯了很严重的错误。您的本意自然是为了安全地包含各个段落，然后采取良好的措施包含不止一个的层。 您会快速理解，这是相当没有效率的。

一旦您完成了您的标记，浏览两次吧，并设法降低网页中标记的数量。确认UL标示是否真的需要包含DIV？我想不是的。

就想关键字所描述的那样 “削减, 削减, 削减,” 同样适用于您的标记。

19: 所有的图片都需要加上 “Alt” 属性

人们很容易忽略标记ALT属性在图像中的必要性。但是，这的确很重要，就可访问性跟验证而言，您就很有必要花费一些额外的时间来填补这些片段。

糟糕的

<IMG SRC=“cornImage.jpg” />

更好的

<img src=“cornImage.jpg” alt=“A corn field I visited.” />

20: 熬夜

我高度怀疑，我是唯一的一个。在我还在学习的那刻，却已经是凌晨了。如果您发现自己也是处于类似的情况，请放心，您已经选择了一个正确的领域。

令人惊奇的“ AHHA ”的时刻，至少对我来说，总是发生在深夜。这种情况在我懂得什么是JavaScript闭合的时候发生过。这是一个强大的感觉，您需要这种感觉，如果您还有没有过的话。

21: 查看源代码

有没有比复制您的偶像的代码学习HTML更好的方法呢？最初，我们都是复制者！然后慢慢地，我们开始形成自己的风格/方法。然后开始访问您觉得很好的那些玩站。他们是如何编写这样及那样的章节的？学习并拷贝他们。我们都是这么过来的，而您也应该如此。（不要偷学设计，学习他们的编码风格吧。）

留意到一些非常酷的JavaScript效果，您想掌握它？他看起来是像用一些插件来完成这些效果的。查看源代码，在HEAD标记中寻找脚步的名称。然后通过Google搜索它并插入您自己的网站。就这样。

22: 定义所有的元素

这一做法对于给客户做设计阶段显得尤其有效。仅因为您不会使用引用并不意味着用户也会同样不会。切勿使用命令列表？这并不意味着别人也不会！一切都是为了自己服务的，创建一个特殊的页面，目的是为了展示每个元素的样式：ul,ol,p,h1-h6,blockquotes,等等。(译者注：并不是很明白这段话的含义，您理解了吗？)
(This best practice is especially true when designing for clients. Just because you haven’t use a blockquote doesn’t mean that the client won’t. Never use ordered lists? That doesn’t mean he won’t! Do yourself a service and create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.)

23: 使用 Twitter

最近，每当打开电视的时候不得不听到提及Twitter，这真的是相当讨厌。我从未要求听到Larry King宣传他的Twitter的帐户-我们都知道他从不手动更新。Yay起到了帮助！此外，又有多少个妈妈在注册帐户后得到了奥普拉的批准？我们只能长期等待，我们中的又有多少已经注意到了这项服务和它的“water cooler”潜力呢

起初，隐藏在Twitter背后的想法仅仅是“您在干什么。”虽然这个在一个小范围内仍然适用，但它显然已经衍生我们行业中不可或缺的网络工具。如果我钦佩的一个web开发写手发现了一篇感兴趣的文章，您最好也是相信，我也应该去看看才是，您应该这样！这就是为什么像Digg这样的网站迅速得以成长的原因吧。

如果您刚刚注册了，不要忘记追踪我们: NETTUTS.

24: 学习 Photoshop

最近有评论者在Nettuts +上抨击我们，声称我们发布的文章不少是Psdtuts +中的建议。他认为，Photoshop教程再web开发博客中是没有商业性质的。我不认同他的观点，但是我电脑上的24 / 7 Photoshop是相当开放的。

事实上，Photoshop可能已经成为您最重要的工具之一。一旦您掌握了HTML和CSS，那么我个人建议您应该学下Photoshop的技巧，当然是越多越好了。

访问 Psdtuts+ 中的 Videos section
花费 $25/月在 Lynda.com 上注册会员。尽量查看更多的视频。
喜欢 “You Suck at Photoshop” 系列文章.
花费几个小时尽量记住您所能记住的PS热键。

25: 学习 HTML 的每个标记

字面上去查看，HTML标记总共也就那么几十个，当然您也不会每天都会用到。然而，这并不意味着您就不应该去了解他们！您对标记“abbr”熟悉吗？“cite”呢？这两个独特的应该加入您的工具箱中。了解他们中的所有吧！

顺便说一下，如果您对以上提到的两个还不熟悉:

abbr 就如您期盼的那样，非常优雅。它指的是一个缩写（abbreviation）。”Blvd” 可以被标记包裹，因为它是”boulevard”的缩写。
cite 是用来引用标题的一些事物。例如，如果您引用了这篇文章到您自己的博客中，那么您可以将“30个写给HTML初学者的最佳实践”放置在标签内。请注意，这不应该用来引用参考作者来举证。这是一种常见的错误。

26: 加入社区

就像我们的网站对于普及web知识的传播所作出的贡献一样，您也是可以的！终于发现了，如果才能正确地运用浮动元素？发布一篇博客告诉别人您是怎么做到的吧。要知道，总有比您经验更少的人出现。这样不仅可以教会您自己，而且还是对社会作出的一种贡献。以往您不知道的并不真正了解的，如此反而会促使您去学习它？

27: 使用 CSS Reset

这是另外一个已经被判处死刑了的辩论。CSS resets: 使用好呢，还是不使用；这是个问题。如果要求的仅仅是我的个人意见，那么我是100%推荐您创建一份自己的 reset 文件吧。刚开始的时候下载个流行的吧，例如 Eric Meyer’s 的，然后慢慢地，掌握更多了，学着去修改它并加入您自己的思想。如果您不这样做，那么您就会难以理解，为什么您的清单列表中为什么就多了个填充空白呢，甚至于您根本就没有在CSS文件中的任何地方定义过！控制您的愤怒，重置所有的样式吧！这应该可以让您重新开始使用。

(译者注：关于这方面的文章您可以查看下我之前发布的文章“目前比较全的,CSS重设,(reset)方法总结”)

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baselinebaseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

28: 排列时间线 (Line ‘em Up)!

一般来说，您应该努力地使您的元素排列尽可能地整齐。浏览下您最喜欢的设计。您有没有注意到，每个头部, icon，段落和logo是不是都是整齐地布置再页面中的？没有做，那么这是判断初学者的一个最大的迹象。想想这个问题：如果我问，您为什么要将这个元素放在这个点上的，那么您就应该有一个确切的理由。

29: 切割 PSD 图

好了，如果您已经牢固地掌握了HTML,CSS和Photoshop。下一步就是转换您的PSD图到工作目录网站中。不要紧张，这没有您想象的那么恐怖。我想不出更好的方法来测试您的技能。如果您需要帮组，就请深度温习下这些视频教程，它会明确的告诉您应该如何完成这项工作。

30: 不要使用框架…Yet

框架，无论是针对JavaScript又或是CSS 都是极好的；但请不要在初学的时候就使用它。虽然都认为在使用jQuery和Javascript的同时可以学到很多，但这个不能针对CSS。我个人曾亲自参与推动960 CSS 跨家的实施，我也经常使用它。话虽如此，如果您始终停留在CSS的学习阶段–意思是学习的第一年–使用之后只会让您自己变得更加迷惑。

CSS 框架是针对那些经验丰富的，想要多节省一些开发的时间。他们可不是初学者。

(译在最后：突然发现我编辑的文章中已经存在这篇文章，并且前人已有翻译出品，让我很是崩溃，恼火，啊………)

Feed enhanced by Better Feed from Ozh

40+ Web前端开发必备的备忘单[上]

seasun — Tue, 30 Jun 2009 03:08:17 +0000

Cheat Sheet 一词在中文中并没有很贴切的对译，大概是考试作弊条一类的东西，这要求 Cheat Sheet 必须短小精悍又覆盖广泛，作为 Web 开发与设计师，免不了在工作时查询大量资料，某个 Web 色值，某个 JavaScript 库的核心语法，这类资料如果攒齐了，怕有半间屋子那么多，如果用 Cheet Sheet 也许几十页纸就够了，本文收集了近百份用于 Web 开发与设计的 Cheet Sheet，你会发现他们非常实用。

HTML, XHTML, CSS2

CSS2 Cheat Sheet

不仅是一份完整的 CSS2 速查手册，还让你了解每个属性该怎么用。预览 | 下载（PDF）

Gosquared CSS help sheets

设计和结构都很整齐，漂亮。下载（PDF）

addedbytes CSS2 Cheat Sheet

该速查手册只有一页纸，包含 CSS 2.1 全部选择器和属性，还包含一个盒子模型示例。下载（PDF | PNG）

Core css

将 CSS 的核心知识分成3部分，包含了 CSS 的方方面面。下载（需免费注册）

CSS Shorthand Cheat Sheet

一些不容易记住的 CSS 元素。下载（PDF）

CSS2 – Quick Reference Guide – PDF 下载（PDF）

XHTML 1.1 Cheat Sheet

XHTML 1.1 细则中涉及到的所有元素与属性。预览 | 下载

Gosquared html help sheets

设计漂亮，结构精良的 HTML 速查。下载（PDF）

HTML Cheat Sheet

一份 A4 纸大小的单页 HTML 速查表。下载（PDF | PNG）

HTML5 Canvas Cheat Sheet

HTML5 Canvas 对象的速查手册，直接编译自 WHATWG specs 细则，只是更容易阅读一些。下载（PDF | PNG）

HTML Character Entities Cheat Sheet

HTML 字符标识速查。下载（ PDF | PNG）

HTML Character Entities Cheat Sheet

该表包含 HTML 4 字符标识，包括 ISO8859-1 (Latin-1) 中的字符。预览 | 下载

HTML Colors Cheat Sheet

该 HTML 颜色表包含 1050 种颜色，按色度区分，每个色度包含25中不同饱和度与亮度。还包含216种 Web 安全色。预览 | 下载（PDF）

RGB Hex Colour Chart

RGB 16进制颜色表。包含216种 Web 安全色。下载（PNG | PDF）

Scripting 速查手册

JavaScript Cheat Sheet

包含 JavaScript 的的方法与函数，正则表单时，以及 XMLHttpRequest 对象。下载（PNG | PDF）

JavaScript DOM Cheatsheet

JavaScript DOM 结构速查手册。下载（PDF）

jQuery 1.3 Cheat Sheet

jQuery 1.3 速查表。预览 | 下载（PDF）

jQuery Cheat Sheet 1.2 jQuery 1.2 速查手册下载（PDF）

mootools 1.2 cheat sheet

另一个 JavaScript 库 MooTools 1.2 速查手册。下载（PDF）

prototype 1.5.0 JavaScript 库 Prototype 1.5 速查手册。下载（PDF）

Prototype 1.6.0.2 Cheat Sheet

JavaScript 库 Prototype 1.6.0.2 速查手册。下载（PDF）

Addison-Wesley’s JavaScript Reference Card

JavaScript 参考手册。下载（PDF）

jQuery selectors

对 jQuery 开发者来说，该速查手册不可或缺，详细列举了 jQuery 所有选择器。下载（徐免费注册）

服务器端编程

PHP Cheat Sheet (V2)

单页 PHP 参考手册，包含日期格式，正则表达式以及常用函数。下载（PDF | PNG）

visibone

该站包含2页基本PHP速查手册，以及8页高级速查手册。非免费。

Php 4 Reference Card PHP4 参考速查手册。下载（PDF）

PHP Cheat Sheet

PHP 比较操作速查手册。下载

Core C# and .NET Quick Reference C# 与 .NET 速查参考手册。下载（PDF）

ASP.net ASP.NET 速查参考手册。下载

MS ASP 古老的 ASP 与 VB Script 速查手册。下载（PNG | PDF）

msnet formatting strings 微软 .NET 字符串格式化速查。下载（PDF）

SQL (Structured Query Language) in one page SQL 语言速查。直接访问

MySQL Cheat Sheet MySQL 速查。下载（PNG | PDF）

XML (eXtensible Markup Language) in one page XML 单页速查手册。直接访问

XML Syntax Quick Reference XML 语法参考。下载（PDF）

SEO 速查手册

The Web Developer’s SEO Cheat Sheet

出自 SEO MOZ 的 SEO 速查手册，包括重要的 SEO HTML 标签，搜索引擎索引的限制，Title 标签语法建议等。下载（PDF）

Feed enhanced by Better Feed from Ozh

为什么在网页设计中清洁代码如此重要？

seasun — Fri, 05 Jun 2009 04:19:55 +0000

奥杰cms 写道 “由于网络是一个不断变化和不断发展的有机体，所以建立一个能和网络一起变化、成长的网站是非常重要的，当网络世界发生变化时不至于被网冲击波所伤到也是很重要的一点。

清洁标记并用网络标准来建设网站可能会让人们不解，但从长期看来，这样做不但可以节省时间还可以节省资金。随着网络的扩张，网络中所用的技术也随之也不断的在发展。HTML在网络中已经存在很久，并且在不断的发展过程中产生了很多的衍生品。首先是Javascript，之后出现CSS、XML和 AJAX。广泛的采用HTML5已经指日可待，Firefox, Safari, Opera 和Chrome都是有HTML5来支持的（IE却比以前要落后了）。在这篇文章中，我会研究一下网络标准的基础，它是什么？它对你来说意味着什么？我会指出一些非常重要但又在平时非常容易被大家忽略的问题。”

“干净”的标记意味着什么？

简而言之，这意味免去了凌乱无章，并可以使标准变的兼容，对不同的语言可以使用相同的的标签和结构。
洁净的HTML可以减少不必要的标签的使用，消除了不必要的东西，并用很小的标记来成功完成一个任务。它没有使用不必要的属性，如内置的CSS 、每个文件的结构和组织。
同样，洁净的CSS也应该避免重复，并利用已有的资源。符合标准意味着你的页在符合由W3C发布的HTML、CSS和XML标准。它意味着使用W3C来检测错误、纠正和测试，直到你的网页百分之百的可用。

我应该关注什么？它也起作用了，这还不够吗？

每一个网站设计的项目都有一个时间限制，客户也都希望它们的网站能够提前完成。所以网络开发人员和设计人员都在持续的压力下不断提高工作速度和工作效率。
我通常都会认为：“思维的快了就会变得非常的草率，同样，用干净、标准的格式来标记会花费很多时间”，并且通常都会说：“这已经起作用了，这才是最重要的。”
当然，目前来看，它以你确实起作用了。但明年会怎样呢？从现在起三年又会怎样呢？以新的浏览器来说呢？会产生什么影响呢？
你真的认为搜索引擎会终日不变的用同样的手法来工作吗？你们是很挑剔的，如果你不符标准，你表面上的网页级就会下降。
当下一个人不得不修改你编的网页的时候会发生什么事？如果你被车撞了、被外星人劫持了、在极地探险时找不到营地时会发生什么事情？这个人不得不得重新捡起你丢下的烂摊子，不得不花万般心思来看代码、理解代码。这会一件简单的事吗？谁又能保证这个人不会看的头痛并且对你进行大骂。
所以第一次做的时候就要用正确的方法来做，这不是一个烦人的事情，这是一个人生哲理。如果这样做的话，实际上会节省你大量的时间和金钱，并可以让和你一起做事的人变的比较轻松。
你可能会认为在内置CSS中随心所欲的编写会比在按照一定的条条框框来编写会更快一些。并且你可能有会认为在不考虑整个文件结构的情况下来随意编写也会更快一些。
以后当你更新文件或重新设计网站时，你将会花费更多的时间来弥补你前随意编写的代码，这远远超阶过了当时你节省的时间。当你编写新的页面的时候，你之前用的讨厌的内嵌式代码会返回来不停的困拢着你，你会花很多的时间才能从这里解脱出来。

可扩展性、可获取性、转变和未来的标准

移动浏览器的发展越来越有前途，现在几乎每一个人都可以用手机来上网冲浪。辅助技术也在发展，如为盲人设计的屏幕阅读器，为残疾人设计的可变接口设备。你肯定也不想因为没有考虑到这些变化而让自己受到损失。
对来自全世界的网民来说，你网站上的内容可能会被部分的被翻译成多国语言。由于互联网档案、谷歌的缓存和其他一些网络单元，你今天发布的页面可能会在网上存在很久很久，即使你已经把它从你的网站上删除了。
清洁标记和标准还有很长的路要走以保证你的网站能够在以后顺利的随着网络发展变化。

该做的和不该做的

和你认为的一样要使用标签。比如：h1是网页上的最高层，之后是h2、h3等等。每个页面上应该只有一个子h1标签。
用有意义的名字来命名你的CSS标准和ID，并问问你自己是不别人能从名字中看出什么意思。这些命名也是很有意思的：#box12 或者#评论尺度？
要很好的利用CSS。比如：如果你在文件夹中设置了一种字体，你就不需要在每一个子文件夹中都重新设置，除非你想在每一个子文件夹中设置不同的字体。这可能使你的页面被很快的打开。
用你的HTML、CSS和XML尽可能多的订正错误。同时还要注意产生的警告。
仔细检查所见即所得生成的代码，进行必要的代码清理。这些代码臃肿、冗余，里面包含了很多不需要的、无用的垃圾。
不要因为你的匆忙就注入内嵌格式与无关的标记和属性。
不要因为有短期的效果就继续的使用，因为一个页面的可以使用并不意味着他的代码是符合标准的、没有问题的、适合搜索引擎的。

Feed enhanced by Better Feed from Ozh

14个验证HTML，css及RSS Feeds的免费工具

seasun — Wed, 03 Jun 2009 14:13:16 +0000

没有什么比这更恼人了：创建并装饰了一个网页，认为已经做到完美，但测试时却出现一些未知的错误，并且不易改正它们。一个对付此类错误的技巧就是首先验证你的标签和样式表。很幸运，有许多免费工具可以验证你的HTML，CSS以及RSS源是否正确。有了这些易用的工具，你就可以放心，访问者看到的就是你想要展示的。

我们已经收集了14个工具，包括在线工具和Firefox插件，必有一个满足你的需求。

Firefox插件

CSS Validator：提供到W3C CSS验证器的易用链接，你可以通过右键的上下文菜单或者工具菜单来进行访问。

Firebug：Firebug是一个功能齐全的调试器和编辑器，使用它你可以开发单页面的HTML，JavaScript，CSS，DOM等等。你也可以使用其插件来实时监控 JavaScript，CSS和XML，找到其中可能出现的错误，并学会如何修正它们。作为每个设计师工具仓库中的重要一员，Firebug越来越通用，甚至开始有了自己的插件（如SitePoint的CodeBurner参考工具）。

HTML Validator：基于Tidy和OpenSP，HTML Validator对你访问的页面进行验证并给出简单的图标提示（icon notification)。工具可以给你提供更多信息，当你查看页面的源代码时，验证错误将被高亮显示。更棒的是，如果你不能找到错误所在，插件会给你一些提示。

Page Validator：通过打开右键上下文菜单，或者从工具菜单中选择“Validate Page”，Page Validator会开启一个新的Tab页面，显示W3C在线验证工具的验证结果。

RSS Validator：通过右键上下文菜单或者选择工具菜单项，RSS Validator可以很容易的让你检查一个RSS源。它会将会带到一个新的Tab页面来查看结果和任何潜在的错误。

Total Validator：Total Validator通过一个便利的插件提供给你大量的工具。浏览你想看的页面，选择”TV“图标，可对各种版本的HTML进行验证，拼写检查，屏幕截图等等。

Validaty：Validaty在你的工具栏中增加一个按钮，但你浏览页面时点击此按钮，就可以看到一个简洁的可视化的验证结果。

基于Web的验证器

validator.w3.org：W3C(World Wide Web Consortium)是一个开发Web技术标准的团体，理所当然，他们会有一个验证器来检查你的HTML是否正确。被检查的文件可以是在线的，也可以直接上传，验证器有多种格式来显示验证报告-附加建议的，概述形式的，附加建议的（重复的？），等等。如果你想检查你的标签，接触一下规定标签如何工作的同志们肯定不会错的。

jigsaw.w3.org：W3C同时也提供了一个CSS验证工具，它也可以检查你的标签找出潜在的错误和警告。同样的，你有一些选项来设定不同的CSS场景（profile），指定样式表为何种媒体创建，以及控制报告显示哪些信息。

FeedValidator.org：FeedValidator首先确认你给它的RSS源是否有效，然后检查你最新的内容条目，给出问题的概述，高亮标示出存在问题的行。非常方便的确保你的RSS源在各种阅读器中正确的显示。

Relaxed.vse.cz：Relaxed没有使用官方的W3C规范进行验证，而是使用自己的一些规则来验证你的文档。你可以选择你所使用的HTML的版本，选择是否显示源代码，是否使用一个”脏“浏览器，以及几个其它选项。它也可作为一个Firefox插件，直接在你的浏览器增加这些服务。

Validome.org：Validome就像验证器的一站式商店。这个网站提供各种工具，来检查你的HTML，XML，DTD-Schema，RSS，以及Google Sitemaps。每个工具都大量的选项，调整它们来满足你的需求。

VirtualPromote.com：VirtualPromote为开发者提供大量的工具来应对不同的任务，但对于前台开发者来讲，最重要的三项就是HTML，CSS和XML的验证器。

xhtml-css.com：xhtml- css.com可以快速的浏览一个站点，来验证HTML和CSS。其提供的服务包括列出所有错误以及你需要关注的可疑告警，以及关于问题性质的详细描述。你也可以使用一些更高级的选项来设置HTML编码，设置CSS的场景和适用的媒体。该站点还提供一个名叫BeValid的Firefox插件，它可以更快的帮你验证正在访问的URL。

哪一款工具是你的最爱？

Feed enhanced by Better Feed from Ozh

更好遵循DIV+CSS设计网站重构中实现SEO

seasun — Thu, 07 May 2009 04:40:14 +0000

DIV+CSS设计的网站是按照W3C标准的，如果一个站点完全是CSS+DIV制作的，那么你网站的SEO（搜索引擎优化）工作已经完成了30%！为什么会这么说？SEO其他方面在哪好，请接着我的思路往下看：

DIV+CSS 网站相当30%的SEO工作

1、div+css网站遵循“网页结构、表现、行为分离，互不干涉抢功”理念，且不说SEO，其实按照这个理念建设起来的网站，网页打开速度会明显的加快。因为按照这个理念，网页将会分成html、css、js三种类型的文件，而css、js又是可以缓存的，所以浏览一个这样的网页其实就是下载 html 代码就行了，速度当然变快。

我们先看看SEO都做啥：

a.网页META标签会添加的比较齐全，如keywords、description、robots;

b.被搜索引擎抓取的内容，代码比较精简，非内容代码大大减少，文件小;

c.文本会比较靠前。几乎都在200字内就可以搜索到正文，重要内容;

d.不会出现表格那样多层嵌套的问题。

2、修饰性图片文本替换，js、flash文字图片还原有些网站为了追求炫眼效果，采用了图片按钮，图片新闻flash切换，文本的js跑灯效果……这样大大将原本属于图片，文字链接的代码变成了搜索引擎读不懂的js代码、flash，或者是直接插入原本不是内容的修饰性图片替换了文字。如果这些刚好又包含了热门关键字，那么搜索收录量将损失很大。修饰性图片文本替换：就是说将不是内容而是修饰的图片变成底图显示，不干扰搜索引擎，让它忽略它。而有增加文字，之后使用css隐藏掉，这样也增加了可以搜索的文字。常见使用于logo，按钮，菜单。 js、flash文字图片还原：这是我近来提出来的一个思路，还没有广泛给大家知道的方法（呵呵，大家接不接受还是个问题）：将js，flash显示的内容转为html，之后使用js读取html，传递参数启动原来的效果、并且隐藏html，只是比原来增加了几个步骤。详细可以参考我写的文章：如何减少 JS对搜索的负面影响。

3、W3C要求必须添加链接标签的title、图片标签的alt属性这样的话，所有的a标签都会规范的添加有 title文本，img有alt文本。而不是等到要优化的时候临时的把几个含有关键字的链接（锚文本）添加上title，图片加好alt。css+div 不是为了SEO优化而添加title、alt，而是为了网页亲和力添加它们。

4、合理安排使用

文本加粗，斜体，下划线这是语义化标签都必须做到的一步。所以做到了CSS+div，这个问题也会在不知不觉中做到了。

5、网页标准可以随时将重要的内容调前，之后使用css重新定位。例如页面效果图中中间的文字比较重要，可以先把重要的内容放在左边的代码的前面，方便搜索引擎，之后使用css将它调会到效果图的位置。

6、网页标准提到的好处

更少的代码和组件，容易维护

带宽要求降低（代码更简洁），成本降低。

更容易被搜寻引擎搜索到

改版方便，不需要变动页面内容

提供打印版本而不需要复制内容

提高网站易用性。

SEO的另一半工作是编辑，编程编辑涉及的工作有：频道栏目的设计、取名，页面的布局（关键词的位置安排），创建栏目时，录稿时，文件夹，文件的取名;关键词管理，了解当前使用的关键词流行度，竞争度;专题、当前热门的关注;录稿时关键词的提炼、图片alt的插入习惯;与同类型网站的交流，交换链接……编程涉及的工作有：页面实现静态化;URL实现伪静态，使用re_write重写技术;本站系统搜索中关键词的搜索功能，实现网站各个页面的关键词网; 维护服务器，稳定服务器。评论的广告过滤;自动将关键词加粗、添加含有title关键字的链接;避免网站过多死链接，提供死链接自动删除或修复功能;相关文章取文章链接格式：先是关键词相同的关连，二关键字与标题的关连，文章内容与关键词关连。……所以制作完成CSS+DIV的网页后，你只是完成了30% 的SEO工作，还有另外70%需要编辑，编程共同完成。其它的作弊，或者是刻意重复关键词，body之间代码的开始或结束增加关键词出现机会。

制作、编程是SEO的“打地基”没有好的制作，符合搜索优化的代码结构，那么无论编辑的水平怎么样，搜索引擎也不会有好效果。但也可以看到：“地基”打好以后，随着时间的增长，编辑的作用效果就会原来越明显，因为地基不需要经常变动的。一动就是伤筋骨的“大工程了”。

不符合标准的网站，赶紧网站重构吧

div+css更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价 ranking）。所以说辛苦的学习SEO，还不如来一次网站重构，使用CSS+div做网站，布局好网站的xhtml、css、js，选好程序，那么剩下的工作就是编辑。

SEO能否实现最好的优化，这就要看编辑的能力和水平了。

Feed enhanced by Better Feed from Ozh

100 个高质量的 XHTML/CSS 模板（中）

seasun — Tue, 31 Mar 2009 05:01:37 +0000

网上的免费 Web 模板多如牛毛，良莠不齐，这组模板是 Smashing Magazine 推荐的，全部是基于 XHTML/CSS 的。在 W3C 标准愈趋重要的时代，自觉使用最规范的代码可以让您的设计更经得起时间的考验。XHTML 在代码上的要求比 HTML 更规范，而 CSS，几乎就是现代 Web 设计的代名词。这100个 XHTML/CSS 模板分三组推出。这是第二组，其它部分请参阅第一组，第三组。

MultiFlex 3 | Download MultiFlex 3

Simple Life | Download Simple Life

Street Style | Download Street Style

Miss Understood | Download Miss Understood

Street Life | Download Street Life

skuteczni | Download skuteczni

Clarity | Download Clarity

The Old Forest | Download The Old Forest

Typography Paramount | Download Typography Paramount

Subordinate | Download Subordinate

Nature’s Charm II | Download Nature’s Charm II

Zenlike | Download Zenlike

Clicker | Download Clicker

Biz Company | Download Biz Company

Attractive Business Temp | Download Attractive Business Template

Happy Template | Download Happy Template

Internet Encyclopedia | Download Internet Encyclopedia

Concept Nova | Download Concept Nova

Free CSS Full Site Template | Download Free CSS Full Site Template

Black Eyed Susan | Download Black Eyed Susan

Reference | Download Reference

Interlude | Download Interlude

Printing | Download Printing

Numerology | Download Numerology

Greeny Grass | Download Greeny Grass

Collaboration | Download Collaboration

Breakfast | Download Breakfast

News Flash | Download News Flash

Discovery | Download Discovery

Adios | Download Adios

Old Architecture | Download Old Architecture

Beauty Co. | Download Beauty Co.

Jewelry Shop | Download Jewelry Shop

Book Store | Download Book Store

Feed enhanced by Better Feed from Ozh

100 个高质量的 XHTML/CSS 模板（上）

seasun — Tue, 31 Mar 2009 04:59:19 +0000

网上的免费 Web 模板多如牛毛，良莠不齐，这组模板是 Smashing Magazine 推荐的，全部是基于 XHTML/CSS 的。在 W3C 标准愈趋重要的时代，自觉使用最规范的代码可以让您的设计更经得起时间的考验。XHTML 在代码上的要求比 HTML 更规范，而 CSS，几乎就是现代 Web 设计的代名词。这100个 XHTML/CSS 模板分三组推出。这是第一组，其它部分请参考第二组，第三组。

Package | Registration is necessary.

Consultant | Download Consultant

Environmental Brand | Download Environmental Brand

Internet Jobs | Download Internet Jobs

Internet Music | Download Internet Music

Greefies | Download Greefies

Squick Design | Download Squick Design

Harvest | Download Harvest

Blackberry | Download Blackberry

Flower Shop | Download Flower Shop

Lingerie Store | Download Lingerie Store

Web Application | Download Web Application

Internet Studio | Download Internet Studio

Puzzled | Download Puzzled

Journey of Love | Must register with Registration is necessary.

我想网 Akon 所有 , 2009. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果抓虾

Feed enhanced by Better Feed from Ozh

我想网 » XHTML

99款高质量免费XHTML/CSS模板

99款高质量免费XHTML/CSS模板

01. T-20

02. Shape

03. Your Business

04.Solitude

05. Fashion Club (Registration Required)

06. O’No! Typography

07.Projection

08.Fresh Restaurant

09.Jungleland 1.0

10.SindromK

11. Environment Brand Design

12.Colourise 1.0

13.Charcoal (Registration Required)

14.H Free Software

15. Dark and Sleek Web Design

16.Photo Portfolio

17. FACING

18.Symisun

19.Luvbold

20.freetemplates

21.2 Breed

22.Extreme Georgia

23.Electronix

24.Catalogio

25.theARTofTYPE

26.Alexx C

27. Greefies

28. FreshMedia 1.0

29.Dusky

30.Creative Media

31.Package (Registration Required)

32.Internet Music

33.Typographic Times

34. Turrion

35.David Kruger

36. Clean Web 2.0 Style Web Design

37.FreshPick 1.0

38. Artificial Casting

39.Business Company

40.JavaScript Tricks

41.Treasure hunters

42.Dating & Wedding (Registration Required)

43.TEMPER

44.EXTREME UPDATES

45. Experimental

46.Maintenance

47.Ubly

48.Shalom Typo

49.Beez design

50.MiniCon

51.ec mania

52.Tool shop

53.REDISH

54.Rock Band

55.Liquid

56.Keep It Simple 1.0

57.Typo Today

58.Impress

59.Art & Photography (Registration Required)

60.Inverted Headline

61.Business Company

62.JET 30

63.BREAKING ONTOP

64.Quartz istorage

65.Fireworks

66.UrbanArtist 1.0

67.Eastern Tales

68.Unbound 1.0

69.DelliStore

70.NEW RISE

71.Miniml

72.Greenie Theme

73.F-GEN-02 (Registration Required)

74.Worldlines

75.Web Application

76.Buesiness Company

77.GREEN WEB

2. Create a simple ul list with a nice slide-out effect for
elements