B3 bohemia's

来自CSS ZEN GARDEN的基于标准的网站展示，1-5期高品质截图。

下载本期：第一期 9.47MB

来自CSS ZEN GARDEN的基于标准的网站展示，6-10期高品质截图。

下载本期：第六期 9.47MB

首先我们来看一下什么是WEB标准：

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。（摘自：网页设计师 www.w3cn.org ）

通过网易教授Allan的特稿：国外门户开始向WEB标准靠近。为我们拉开了门户网站向WEB标准转变的序幕。在Yahoo全球众多网站中，除Yahoo英文（www.Yahoo.com）已经改为WEB标准外，我们更可以很欣慰的看到，我们亚洲的网站也以大的步伐在向这一网站规范统一的模式靠近——Yahoo韩国。

虽然仍采用

除此之外，你还可以看到它简洁易读的代码，这为维护人员提供了很大的方便，看看这个简洁的导航菜单：

美洲
Yahoo！

先别急，以下是Yahoo全球的部分网站展示，从中你会体会出WEB标准与传统建站的不同。做下对比，更多的是感受网站界面的变化，运用WEB标准的网页是不是结构更紧凑，布局也更合理了呢？好了，不说了，大家慢慢欣赏吧。

欧洲
英国、爱尔兰：

“很多时候我都会被询问，我的日历是怎样制作的。并且询问有关代码的问题。这便是我之所以要写一篇文章来专门介绍如何制作我的日历的原因”

详细代码可以从下面作者的站点获得，有时间我会把这篇教程翻译过来。
A CSS styled calendar

WEB式的标签选项卡效果，适合于特殊用途。
至少我是暂时用不上，海娃总结了一个，留个以后用。

以商业管理信息系统（MIS）的流程思想，编写XHTML文档的开发过程。

按结构化生命周期法：系统规划阶段-->系统分析阶段-->系统设计阶段-->系统实现阶段-->系统运行和维护阶段

第1阶段：开发文档

• 计划


• 组织


• 生成


• 测试

不怕你做不到，就怕你想不到。
看看这个手册，你会从中得到多少灵感呢？

只有你自己知道~~

http://www.alvit.de/handbook/

《San Francisco Examiner》最近成为美国最畅销的报纸之一，其原因是什么呢？答案是，他们完全采用WEB标准来发布站点，利用有效XHTML来替代tables的排版方式。

我在《Examiner》做站点主管有4年多了，并且很多次的重新设计网站。但每次重新设计，HTML代码和JavaScript都显得很笨重、麻烦。最终，还是给我留下令我感到异常复杂、并让人气馁的经历。

用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。

当然，换皮之前你需要先按W3C标准建好你的网站，并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”，我们要做的，只是用某种方法让浏览器载入另一套CSS，重新渲染页面。方法有很多种，我就介绍最常见的三种。

方法一：什么也不干
啊？什么也不干？嗯，这个……准确地说是：就干那么一丁点儿 （你还真以为有这么好的事儿呀……）。

假设我们有两套CSS，分别封闭在两个不同的文件中：a.css和b.css。然后在和之间加入如下两行XHTML代码：

很多时候明明感觉应该自适应的效果，
可是在不同浏览器里却取得不同的结果，
这个时候最令人伤神。
有时利用“相对位置”和“绝对位置”方法来确定DIV的方位，
也是个很不错的想法，
至于如何使用，使用那种方法，
还是要看个人习惯以及网页整体要求。
来看看下面的方法，从中会掌握自适应的一种好方法。

在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。

为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。

这里肯定有很多中英文混杂的东西出现，不过请谅解，我只想用最简单的话，表述整个过程……

<table> <tr> <td>有什么不好？

布局的简繁不是它们的错，而在于开发者本身（此处不用设计者，因为设计的人未必就是实现网页的人）

<table>标签的存在是有其历史意义的，就算是今天“标准”世界，<table>的存在也是无可厚非的（废话），因为还有一部分人不会运用“标准”——没有必要掌握、懒的掌握、不赶兴趣或是觉得它没有意义。

但是，我想说的是，<table>并不代表网页不标准，<table>同样能设计出形式优美的页面，健壮的功能，而且更容易上手，这也就表示它更容易被推广。所以不要掌握了“标准”，就扔掉了老祖宗，“我们都没错，只是不适合”——不适合特殊需要，节约带宽或希望更轻松的变换版式等……

Q&A

Firefox 1.5 provided support for some new CSS3 features. What exactly?
CSS3 Multi-column layout module

Faux Columns technique is used to
make all the columns on a page look equally high

The term AJAX was introduced by
Jesse James Garrett

A technique widely known as Sliding Doors is used to create
an element that is styled with CSS to grow as the content of the element grows

In XHTML, label element can contain several other elements. Which one of the following is NOT allowed?
pre

HTML Element <ul> is so named after
Unordered List

Selector h2 + p is an example of
Adjacent selector

原引阿捷的一段话：“原则上一个xhtml文档所有的标签都应该是结构标签,需要表现的地方都使用css来控制。”

下面是一个完整xhtml的结构标签：

结构
body, head, html, title

文本
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

链接
a

今天逛经典，看到这样一则消息，进去看了一下，
不错的方法，又学到一招。这里做个记号，方便今后使用时查找。

原文连接：div下图片自适应解决方法

今天的重点不是介绍换行，而是介绍如何“不”换行。

下面这个是自动换行，也就是把文字截断，换行显示，有时是需要的。

但更特殊的情况是，强迫不换行。

呵呵，看你自己需要喽，方法已经列在上面了。闪~

呵呵，玩了这么长时间“WEB标准”，究竟标准在哪里？！开始我也这样问自己，这个标准到底定给谁的，是人，还是机器。

不要强求DIV和TABLE一样，因为他俩肯本不是一回事。

“web标准”给设计师带来的更多的是一种思维的转变，一种事前思维，一种事后思维。为什么这么说？看看下面的思维过程：

事前思维——应用“web标准”

熟练的WEB设计师在拿到需求之后，瞬间在脑海中形成一幅画面，这个任务要表现什么，如何表现出来，整体框架又是怎样……有经验的甚至还会考虑到在后台编写代码时可能遇到的问题，比如自动伸展的区块，如何循环标签等。

往往采用“web标准”进行结构网站，花费的时间和精力总要比使用传统方法多，为什么？考虑的多呗。如果将架构一个新站所花费时间的总和设置为10，其中大致包括初始设计、在途修正、后期维护，那么采用“web标准”设计的时间分配比例约为6、2、2。如果采用传统方法进行架构，设计的时间分配比例约为3，3，4。

举这个例子用意何在？
是在大致描绘一个WEB设计师整个项目中所要投入的精力，和所花费的时间的成本。“事前努力，事后清闲”。