园子博客 » 网页标准 http://www.yzznl.cn 快乐 互助 分享 一直在努力（yzznl）！ Sat, 04 Feb 2012 09:51:55 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 WEB标准专题之精华文章汇总 http://www.yzznl.cn/archives/222.html http://www.yzznl.cn/archives/222.html#comments Sun, 31 May 2009 07:02:21 +0000 园子 http://www.yzznl.cn/?p=40893 您可能也喜欢：
web标准的一些概念
什么是WEB标准
Web标准在中国
SEO专题精华文章汇总
CSS专题之精华文章汇总 无觅 ]]> 为什么我用普通话就能和南京的同学进行交流？
为什么所有银行卡的大小都是一样的？
为什么新买来的灯泡正好可以拧上老的灯口？
为什么……

我们在生活中有太多的为什么，每一个为什么的背后都隐藏着一个因素，那就是标准。上面列举的几个例子都是因为有着同样的规范与标准，才会让我们更方便的交流、互相协作以及提高工作效率。做为一个设计师，我们不仅要考虑到的是设计出来的网站要在电脑上展示，我们还应该想到我们的受众群体可能在手机、打印机、数码相机之间的交互。如果没有统一的标准，那么你设计出来的网站就有可能是孤立的、不可分享、或者是不可重用的。这个专题园子想和大家一起从入门开始学起，一步一步敲开WEB标准神秘的大门。

PS：本来这是一个页面，现在改为文章列表，由此引起的不便请各位朋友多多包涵。 :neutral:

扩展阅读

  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。css中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流Web标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

web标准的一些概念
什么是WEB标准
Web标准在中国
SEO专题精华文章汇总
CSS专题之精华文章汇总
无觅
]]> http://www.yzznl.cn/archives/222.html/feed 5 详解CSS盒模型 http://www.yzznl.cn/archives/83.html http://www.yzznl.cn/archives/83.html#comments Tue, 10 Mar 2009 02:24:31 +0000 园子 http://www.yzznl.cn/archives/83.html 您可能也喜欢：
CSS技巧汇总
table转div工具：Table2CSS Converter汉化版下载
CSS布局命名规则
CSS 定义的50个精美按钮下载
css语法结构 无觅 ]]> 如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。css中的盒模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒模型的结构：

CSS盒模型图例

上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）：

<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

通过添加一些颜色及字体信息，该例可以有以下显示效果：

CSS盒模型图例

这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：

CSS盒模型图例

尽管上图显得有点复杂，不过它展示了每个HTML元素是如何被盒子所围绕的。我们可以通过CSS来调整这些盒子。通过这些图例相信你对CSS盒模型会有个大致的理解，在后续的文章中园子将会介绍更多关于CSS方面的知识。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流WEB标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

CSS技巧汇总
table转div工具：Table2CSS Converter汉化版下载
CSS布局命名规则
CSS 定义的50个精美按钮下载
css语法结构
无觅
]]> http://www.yzznl.cn/archives/83.html/feed 0 dhtml详解 http://www.yzznl.cn/archives/57.html http://www.yzznl.cn/archives/57.html#comments Wed, 18 Feb 2009 01:49:46 +0000 园子 http://www.yzznl.cn/archives/57.html 您可能也喜欢：
卡巴提示：流量监控连接被中止的解决方案
黑色高清小图标下载
图解找回 Windows 7 快速启动栏的全过程
在线制作个性化拼贴壁纸
AJAX Loading进度条在线生成网站 无觅 ]]> 经常听说dhtml，那么你了解dhtml吗？

首先我们看一看微软中国站点中的一个重要界面特性——当浏览者将鼠标指针移动到页面导航条上时，会动态地弹出一个菜单，在该菜单中移动鼠标，所指向的菜单项变为红色显示；如果将鼠标指针移出菜单所在范围，则菜单自动隐藏：如果将鼠标指针移动到导航条上另外一个区域，则会弹出另外一个菜单.这种效果非常类似于Windows应用程序的特性，即通过图形化的界面为用户提供尽可能多的功能。实际上，采用这种方式可以使同一个页面上包含更多的信息，对于微软中国这样庞大的站点来说十分有用。

要实现这种效果，单纯依靠HTML和JavaScript已经无法实现，必须采用新的技术——这就是动态HTML。所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、css和客户端脚本的一种集成。

DHTML建立在原有技术的基础上，可分为三个方面：

  1. HTML(xhtml)，也就是页面中的各种页面元素对象，它们是被动态操纵的内容；
  2. CSS，CSS属性也是动态操纵的内容，从而获得动态的格式效果；
  3. 客户端脚本(例如JavaScript)，它实际操纵Web页上的HTML和CSS。

使用DHTML技术，可使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML使网页设计者可以动态操纵网页上的所有元素——甚至是在这些页面被装载以后。利用DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定位。DHTML还可使网页设计者在网页上显示外部信息，方法是将元素捆绑到外部数据源(如文件和数据库)上。所有这些功能均可用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。这是因为一切功能都包含在HTML文件中，随着对网页的请求而一次性下载到浏览器端。

可见，DHTML技术是一种非常实用的网页设计技术。实际上，DHTML早已广泛地应用到了各类大大小小的网站中，成为高水平网页必不可少的组成部分。

DHTML就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者当你点击一个超链后会自动生成一个下拉式的子超链目录。这就是 Dynamic HTML（动态HTML），它是近年来网络发展进程中最具实用性的创新之一。它是一种通过各种技术的综合发展而得以实现的概念，这些技术包括Java Script , VB0Script, Document Object Model (文档对象模型)，Layers和Cascading Style Sheets ( CSS样式表)等。

说了这么多，你对这种技术心动了吗？呵呵，那就努力学习吧，园子期待与您一起进步！

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。CSS中的盒模型（box mo...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流WEB标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

iTheme 主题宽度改为960px的方法
郑州的黑社会有多少
有道音乐随心听-让音乐跟着心情跳舞
清明老家游记
WordPress CommentLuv 插件：同步显示评论者的最新文章
无觅
]]> http://www.yzznl.cn/archives/57.html/feed 0 Web标准在中国 http://www.yzznl.cn/archives/44.html http://www.yzznl.cn/archives/44.html#comments Fri, 06 Feb 2009 05:55:05 +0000 园子 http://www.yzznl.cn/archives/44.html 您可能也喜欢：
什么是WEB标准
web标准的一些概念
WEB标准专题之精华文章汇总
如何向web标准过渡
WEB标准的一些常见问题 无觅 ]]> 在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流WEB标准以及他们的现状。很有意思的几个礼拜，也让我大开眼界。印象最深刻的，在中国推行Web标准的仍在少数，并且通常是孤立无援的，无法实施、无法去解释为何需要标准及标准的价值。所以这里我想写一下我所了解的情况、面对的挑战和一些希望能有效的方法。

如果你有任何意见建议，欢迎留言！如果你有相关内容链接，也欢迎提供，我会更新文末的资源列表。

市场力量
在中国，驱动Web标准的主要动力与欧洲国家、澳大利亚以及美国几乎是相反的。没有任何法律要求你的网站具备可访问性（Accessibility），整个市场也起不到什么推动作用。市场的推动很有意思。我经历过的那些商业项目，Web标准都是很重要的基础，即便是在有法律约束的国家。为什么说市场推动很有意思呢，因为网站的拥有者虽然清楚法律要求网站达到可访问性要求，但除非看到切实的利益，否则仅仅会只花最小的成本去满足法律上的要求。

目前在中国，Web标准因为一些原因在商业上比较脆弱。比如IE6仍然占据浏览器市场份额的95%。大部分依赖于ActiveX控件才能运行的电子商务网站使得人们必须用IE6。这就导致了在制作网页的时候趋向于满足IE6，而很少的关注其他浏览器。伴随着Opera、Safari、Firefox、Google Chrome使用率的上升，这种状况正在逐渐改善。实际上，Google Chrome的问世让Web设计届更加关注浏览器兼容性。开发者们也谈到了，虽然他们经常使用IE外的浏览器来开发和测试网站，但仍需要不时的使用IE，仅因为很多网站依赖于它。

对网站兼容性的低需求导致了开发者、公司都没什么动力。不过这应该会改善，尤其是越来越多的跨国公司外包或将开发工作放在中国。希望这种逐渐渗透能够生效，在中国的外国公司应该会对知识的提升有所帮助。我问过一位Microsoft的开发者是如何开始接触Web标准的，他说因为公司请了一些专家来培训Web标准的开发知识。这是相当好的，而且是推广Web标准发展的一个关键渠道。Opera一直是Web标准的拥护者（声明一下，我为Opera工作但此处并非借机推广），也一直在推广Web标准，在中国的也是核心的开发部分，开发团队也是非常活跃的参与着聚会、会议。

法律支持
因为没有具体的法律要求网站具备可访问性，我们来看看奥运会对此的影响，很有意思。因为比赛，公共区域、街道和建筑已经具有很好的适应性及无障碍措施，也让人更清醒的意识到这一点。最起码这是一个开始，且中国已与2008年7月批准了联合国《残疾人权利公约》。这是历史上第一个保障和促进残障人士权利的国际性法律公约。中国批准了此公约，意味着残障人士在获取信息、康复、就业和教育方面都有了法律依据。如公约第九条所说：

“缔约国应当采取适当措施…促使残疾人有机会使用新的信息和通信技术和系统，包括因特网。”

接下来还有很长的路要走，但起码中国已经加入了。

基层的拥护
最让人激动的是我从很多Web领域的专家身上看到的激情和责任感。在中国有一些有影响力的博客在推广着Web标准。比如JunChen、Realazy。与Realazy沟通时他提到了2005年时候他第一次开始写关于标准的博客，每天能有接近1000的点击。这或许意味着人们渴望学习更多相关知识，即使他们并不是真正在搜寻这些信息，但他们访问到他的网站，看到了关于标准的介绍。

与我交流的几乎所有开发者都说他们基本上是自学的。在很多国家，Web开发和标准并非都存在于大学课程中，所以设计师、开发者必须自学。在中国，最大的学习障碍是缺乏资源。对大部分人来说一些昂贵的电子书也加剧了学习障碍。

我最激动的事就是参加了在中国的第一次Web Standards Café。在北京举办，由Opera赞助，主题是Web标准和Web 2.0，基本上讨论集中在在中国我们怎样支持Web标准。结合开发者和BarCamp这类聚会，我认为这是一条正确的道路。

支持Web标准，在中国
有些事我们已经可以开始做起，来促进Web标准和网站可访问性设计在中国的发展。可能看上去有些吓人，但从一点点做起，Web标准不可能不会变的更加流行。如同一句中国古话说的：“纸上得来终觉浅，绝知此事要躬行”。不久前我们在欧洲、澳洲和美国也还在努力为Web标准做一些基础工作，这些经验值得我们回过头去学习。目前我认为以下途径对Web标准在中国的发展是有利的：

翻译资源 – 首要的任务就是有中文的、免费的资源供大家使用、学习。当前很多个人已经投入到翻译中（见最后的资源部分），但我忍不住想那些大公司也应该贡献他们的力量。详见W3C资源翻译介绍和指南。

跨国公司的责任 – 大的国际公司在国际范围内推广和支持Web标准，也应该尽他们所能帮助中国的Web标准发展。比如通过内部培训、赞助或者提供课程或者中文化Web标准资源。当然也不仅限于中国如此。

基层的拥护 – 开发者比任何人更了解面对的机遇和挑战。博客、论坛、BarCamp聚会、Web Standards Café等形式都是比较有效的途径。这可能会根据中国文化的不同采取不同的形式，但本质上一定是交流和分享。

如果你是一个博客、开发者或者企业内部的布道者，请一定分享你的经验。如同我上文所说，如果你有任何意见建议，欢迎留言。如果你有任何相关链接希望分享，我也会更新拓展文末的资源列表。

作者相关信息：

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。css中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

什么是WEB标准
web标准的一些概念
WEB标准专题之精华文章汇总
如何向web标准过渡
WEB标准的一些常见问题
无觅
]]> http://www.yzznl.cn/archives/44.html/feed 0 符合标准的表单设计 http://www.yzznl.cn/archives/37.html http://www.yzznl.cn/archives/37.html#comments Tue, 20 Jan 2009 06:22:16 +0000 园子 http://www.yzznl.cn/archives/37.html 您可能也喜欢：
Web标准在中国
如何向web标准过渡
什么是WEB标准
符合标准的插入Flash方法
WEB标准专题之精华文章汇总 无觅 ]]> 下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间看了一下之前写的一些表单结构和语法，发现好多都不符合WEB标准，于是就想写一下关于表单标准的设计思路。

  1. 使用fieldset和legend标签
    在form中，我们经常会对form中的信息进行分组，比如注册form，我们可能会将注册信息分组成基本信息（一般为必填），详细信息（一般为可选），那我们如何更好的来实现呢？我们可考虑在form中加入下面两个标签：
    fieldset：对表单进行分组，一个表单可以有多个fieldset
    legend：说明每组的内容描述
    例如：
    <form id=”demoform” class=”democss” action=”">
    <fieldset>
    <legend>Basic Register</legend>
    <p>First name: <input type=”text” name=”fname” value=”" /></p>
    …
    </fieldset>
    <fieldset>
    <legend>Detailed Register</legend>
    <p>Interest: <input type=”text” name=”interest” value=”" /></p>
    …
    </fieldset>
    …
    </form>
    fieldset默认是带边框的，而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。
    解决方法：在css中将fieldset的border设置为0，legend的display设置为none即可。
  2. 使用label标签
    我们对form中的文本标签给定一个label标签，并使用for属性使其与表单组件相关联，效果为单击文本标签，光标显示在相对应的表单组件内。
    例如：
    <form id=”demoform” class=”democss” action=”">
    <fieldset>
    <legend>Basic Register</legend>
    <p>
    <label for=”fname”>First name:</label>
    <input type=”text” id=”fname” name=”fname” value=”" />
    </p>
    …
    </fieldset>
    <fieldset>
    <legend>Detailed Register</legend>
    <p>
    <label for=”interest”>Interest:</label>
    <input type=”text” id=”interest” name=”interest” value=”" />
    </p>
    …
    </fieldset>
    …
    </form>
    除了以上方法，我们还可以用label套嵌整个表单组件和文本标签，如：
    <label for=”fname”>
    First name:
    <input type=”text” id=”fname” name=”fname” value=”" />
    </label>
    根据规范，文本会自动与邻接的表单组件关联，但遗憾的是——现在主流的浏览器IE6并不支持这个特性。
  3. 使用accesskey和tabindex属性
    网站要兼顾更多情况下的使用，比如没有光标设备（如鼠标）的情况下，要让使用键盘操作也可以完成form的填写，这时候点击对于它们来说，已经没有任何意义。我们这个时候选用label的accesskey（快捷键，IE下为alt+accesskey属性值，FF下为alt+shift+ accesskey属性值）和tabindex属性（Tab键，tabindex属性值为顺序）添加到表单标签上，如label，input等。
    例如：
    <label for=”fname” accesskey=”f” tabindex=”1″ >First name:</label>
    <input type=”text” id=”fname” name=”fname” value=”" />
  4. 使用button标签
    定义与用法
    定义为一个提交按钮。在button元素内你可以放置内容，像文本（text）或者图片（images）。这是这个元素和input元素按钮的区别。
    例如：
    <button><img src=”http://www.baidu.com/img/baidu_logo.gif” alt=”Click Me!” />Click Me!</button>
    button相对于input提供了更多的功能与更丰富的内容。button将按钮文字单独出来，并且可以在button内添加图片，赋予文字和图片更多选择的样式，使生硬的按钮变得更生动。
    并且使用button标签将比input按钮来得更有语义化，简单的从字面意思也可以理解。
  5. 使用optgroup标签
    optgroup标签的作用是在选择列表中定义了一组选项。我们可以选用optgroup标签给select元素的options分类，并使用label属性，属性值会在下拉列表（select）里显示为一个不可选的、缩进标题。注意：optgroup 不支持嵌套。
    例如：
    <select name=”China”>
    <optgroup label=”Jiangsu”>
    <option value=”nj”>Nanjing</option>
    <option value=”sz”>Suzhou</option>
    </optgroup>
    <optgroup label=”Zhejiang”>
    <option value=”hz”>Hangzhou</option>
    <option value=”wz”>Wen
    zhou</option>
    </optgroup>
    </select>
    IE6.0 中存在一个小Bug（FireFox 中不存在）：使用键盘方向键进行选择时，在 IE 中，当选中项由一个optgroup的选项换成另一optgroup 的选项时，不会触发onchange。
    解决办法：增加 onkeydown 或 onkeyup 事件协助解决。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。CSS中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流Web标准以及他们...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

Web标准在中国
如何向web标准过渡
什么是WEB标准
符合标准的插入Flash方法
WEB标准专题之精华文章汇总
无觅
]]> http://www.yzznl.cn/archives/37.html/feed 2 如何设置404页面 http://www.yzznl.cn/archives/19.html http://www.yzznl.cn/archives/19.html#comments Mon, 12 Jan 2009 07:05:21 +0000 园子 http://www.yzznl.cn/archives/19.html 您可能也喜欢：
WordPress永久链接设置
E63 电子邮箱设置方法
如何设置首选域
head区域的其他设置
手机上网和发送彩信接入点详细设置教程 无觅 ]]> HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生，很难避免，比如说：网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等，导致原来的URL地址无法访问；当Web 服务器接到类似请求时，会返回一个404 状态码，告诉浏览器要请求的资源并不存在。但是，Web服务器默认的404错误页面，无论Apache还是IIS，均十分简陋、呆板且对用户不友好，无法给用户提供必要的信息以获取更多线索，无疑这会造成用户的流失。

404页面的作用

搜索引擎通过HTTP状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引，这导致大量不同的链接指向了相同的网页内容。结果是，搜索引擎对该网站的信任度大幅降低。

如何检查自定义404页面能够返回“404”状态码

在自定义404错误页面设置完毕后，一定要检查一下其是不是能够正确地返回“404”状态码。检查的方法也相当简单，园子找到的一个网址：http://www.seobox.org/getheader.htm，输入一个网站内不存在网页的url，查看一下HTTP Header的返回情况，确信其返回的是“404”状态码。

404页面的正确做法

  1. Apache服务器404页面的设置方法
    在.htaccess 文件中加入代码：

    ErrorDocument 404 /Error.html

    建立一个简单的html404页面命名 Error.html
    把 Error.html放置在网站根目录即可。

  2. IIS/ASP.net下设置404错误页面
    首先，修改应用程序根目录的设置，打开 “web.config” 文件编辑，在其中加入如下内容：

    <configuration>
<system.web>
<customErrors mode=”On” defaultRedirect=”error.asp”>
<error statusCode=”404″ redirect=”notfound.asp” />
</customErrors>
</system.web>
</configuration>

    此例中“error.asp”为系统默认的404页面，“notfound.asp”为自定义的404页面，使用时请修改相应文件名。
    然后，在自定义的404页面“notfound.asp”中加入：

    <%
Response.Status = “404 Not Found”
%>

    这样，便可以保证IIS能够正确地返回“404”状态码

友情提醒

  • 一定不要将404错误直接转向到网站首页，这将可能导致你的网站首页不被收录；
  • /Error.html 前面请不要带主域名（错误的写法：yzznl.cn/error.html，正确的写法：/error.html），否者返回的状态码是302或200状态码。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。css中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流WEB标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

WordPress永久链接设置
E63 电子邮箱设置方法
如何设置首选域
head区域的其他设置
手机上网和发送彩信接入点详细设置教程
无觅
]]> http://www.yzznl.cn/archives/19.html/feed 8 网站布局设计原则 http://www.yzznl.cn/archives/17.html http://www.yzznl.cn/archives/17.html#comments Sat, 10 Jan 2009 02:45:59 +0000 园子 http://www.yzznl.cn/archives/17.html 您可能也喜欢：
园子博客网站布局调整
如何使网页布局中输入连续字符强制换行
DIV布局入门
DIV布局和table布局的区别
CSS布局命名规则 无觅 ]]> 园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内容，更能表现网站设计者想要突出的一些主题和思想。

网页布局的基本概念

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

一些网页设计中常用的尺寸（仅供参考）

  • 分辨率800*600时，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
  • 分辨率1024*768时，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
  • 页面长度原则上不超过3屏，宽度不超过1屏。
  • 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px。另外120*90，120*60也是小图标的标准尺寸。
  • 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K

网站的整体造型设计

网站的造型就是你创造出来的网站外在表现形象，这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

页头的设计

页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

文本的设计

文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

页脚的设计

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

图片的设计

图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

多媒体的应用

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

网页布局的常见方法

  • 用css布局网站
    在基于WEB标准的设计中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。
  • 表格布局
    表格布局的方法在前些年还比较常见，现在的一些大型网站或者个人站长慢慢的放弃的使用表格布局的方法。表格布局最大的缺点是：当你用了过多表格时，页面下载速度受到影响，而且相对于使用CSS来进行布局对搜索引擎的支持不如后者，现在表格的应用仅仅是用来显示数据使用的。如果想了解更多请看：DIV布局和table布局的区别 。
  • 框架布局
    不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观，国内多数电子邮箱都是采用框架布局设计的。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。CSS中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流Web标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

园子博客网站布局调整
如何使网页布局中输入连续字符强制换行
DIV布局入门
DIV布局和table布局的区别
CSS布局命名规则
无觅
]]> http://www.yzznl.cn/archives/17.html/feed 0 WEB标准的一些常见问题 http://www.yzznl.cn/archives/16.html http://www.yzznl.cn/archives/16.html#comments Fri, 09 Jan 2009 09:18:05 +0000 园子 http://www.yzznl.cn/archives/16.html 您可能也喜欢：
什么是WEB标准
web标准的一些概念
Web标准在中国
WEB标准专题之精华文章汇总
如何向web标准过渡 无觅 ]]> 我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合WEB标准的另一层含义是使用web标准中的各项技术将网站表现与内容完全分离，从根本上改变现有的结构为网站带来个新性的变化。真正要符合W3C标准，还是需要不断学习与提高在网站架构设计上的经验，实现网站表现与内容的分离。园子给大家列举了一些学习WEB标准之路的一些常见问题，希望能够帮助到你。

  • 什么是代码校验？
    代码校验就是检查你制作好的页面是否完全符合web标准。通常可以到W3C的网站去校验。
  • 什么是DocType,我应该选择哪种适合自己的DocType？
    DOCTYPE是document type(文档类型)的简写，用来说明你的网页是什么标识语言(xhtml或者HTML)是什么版本。
    初次学习web标准的设计师推荐使用XHTML 1.0过渡式的DTD，代码如下：
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  • 学习web标准是不是等于完全不用表格？
    使用web标准后不是说排除表格的使用，表格并不是鸡肋，而正好相反是一道大餐。对表格的理解这里需要注意一点“使用表格排版”是“不明智”的，表格归根结底是一种现实“数据”的方式，大家可以对比EXCEL表格软件的作用，表格就是起到相同的作用的，有时候我们的数据信息使用表格显示让我们能清晰易读，所以才使用表格。对于表格使用上的设计，也就是说如果能灵活使用表格的各种单元格组合形式，合理的现实客户数据和调查数据等消息的时候，那才是真正利用了表格的优势。使用表格作为网页排版，布局页面元素是不合理的，表格是用来显示数据的。
  • 我可以使用HTML来设计网页吗？
    答案是肯定的，HTML也是W3C的标准之一，之所以推荐使用XHTML是因为HTML的设计形式已经不能满足表现与内容分离式的网站架构，但是如果继续使用HTML来构建的话，从最终目的上来说是没有差别的，通过完整的HTML标记语言，也同样能够通过W3C的校验，最终网页显示也不会有什么问题。不过还是推荐XHTML，毕竟XHTML提供更合理的结构。在web标准设计中会得到方便，在未来也方便顺利过渡到XML 。
  • 什么叫网站重构？
    重构一词本身源于软件开发中对于代码的改良，在《网站重构》引入中国之后，也带来了一股网站重构的热潮。网站重构可以理解为改变老式的HTML表格布局、使用新的符合web标准的网站结构及代码改良的方式。将现有的网站转向web标准设计可以称之为网站重构。网站重构更深一层的意义是希望通过web标准提供一个加大网站效益的接口，这个效益可以简单理解为两个方面：可扩充性及可维护性。重构的意义在于建立良好的可扩充性，通过div布局来进行数据结构的设计便于以后多div数据的扩充，通过css对id、class这些标签的样式指派，也使得可维护性大大提高。其次，网站重构还能帮助我们多方面提高网站收益。
  • 使用web标准后就不再存在兼容性问题了吗？
    并非如此，如同任何以往的技术一样，web标准使用也会如以往的技术一样使得各个浏览器及平台上出现一些兼容性问题，但web标准的出现的一个目标也正是为了解决这个问题，相对于许多传统技术而言，web标准的兼容性已经大大提高，而且目前的浏览器在下一代的研发中都提供了对web标准的大量支持，因此可以看到web标准的作用开始显现，他将是一个向未来兼容的技术。
  • 学习web标准我需要参考哪些网站？
    资源非常丰富，目前国内已经出版过由知名网站设计师及web标准组织创始人Jeff Zeldman编著的《网站重构》，更多资源在www.w3c.org的标准文档库，以及Zeldman的个人主页 cssgarden.com ，国内也有阿捷的网页设计师 w3c.org.cn，Onestab.com 等众多web标准学习网站。
  • 遵循web标准可以使用Flash吗？
    可以。但是<embed>不允许使用。暂时只能采用js调用来通过W3C校验。
  • 暂时保留，留做以后的问题更新，园子祝你开心。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。CSS中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流Web标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

什么是WEB标准
web标准的一些概念
Web标准在中国
WEB标准专题之精华文章汇总
如何向web标准过渡
无觅
]]> http://www.yzznl.cn/archives/16.html/feed 0 如何向web标准过渡 http://www.yzznl.cn/archives/15.html http://www.yzznl.cn/archives/15.html#comments Fri, 09 Jan 2009 08:43:32 +0000 园子 http://www.yzznl.cn/archives/15.html 您可能也喜欢：
什么是WEB标准
web标准的一些概念
Web标准在中国
WEB标准专题之精华文章汇总
WEB标准的一些常见问题 无觅 ]]> WEB标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WEB标准过渡，这个过程是个不断学习与提高的过程，园子总结了以下几个过渡的方法，目的是对那些想向标准过渡的朋友提供个比较好的帮助。
 
1、从HTML转向xhtml的过渡

为什么要放弃HTML去使用XHTML？

事实上XHTML就是HTML的下一个版本，用于替代HTML并帮助转向XML的一套过渡型标记语言，HTML是一个非常优秀的页面描述语言，至少在过去的几年里为我们创造了太多便于使用的空间。无论是HTML还是XHTML，说到底是一门让机器看的语言，访问者是不会去关心HTML源代码的，他们只关心眼中所看到的网页呈现出来的内容，而作为网页设计师而言，网页设计只有一个目的，就是让访问者看得更清楚，用起来更方便。

HTML和XHTML是面向机器的，并非面向访问者。通过设计设计师良好的代码编写，才能让IE或是firefox等浏览器能够充分的去解析HTML或XHTML并渲染出最终页面。在强调表现与内容分离的web标准时代，HTML的语法模式已经不能满足需求，取而代之的将是新一代的标记语言，结构与标记更严谨。

XHTML是一门面向结构的语言，设计目的不像HTML仅仅是为了网页设计与表现，XHTML的设计目的并不是为了最终表现，XHTML主要用于对网页内容进行结构设计，其严谨的语法结构有利于浏览器进行解析处理，是一门面向文档结构的设计语言。

目前XHTML的使用标准也存在着多种选择，包含Transitional、Strict和Freamset三种应用方式。

  1. Transitional方式代表一种松散过渡型的XHTML应用，允许用户使用一部分旧式的HTML标签来编写XHTML文档，以帮助用户慢慢适用HTML的编写（推荐）。
  2. Strict方式是一种种严格型的应用方式，在这种形势下XHTML中不能使用任何样式表现的标签及属性。
  3. Frameset方式是针对框架页面的应用方式，如果使用框架式网页应当使用此方式。 

面向结构的XHTML设计语言在面向结构的设计思想上能带给我们超越HTML的实质性内容，面向结构的设计能帮助我们适应更多终端的需求，对于不同的应哟娜给终端，如PC、PDA、手机及其他产品，只要这些设备能接受我们的结构语言XHTML，那么我们就能对信息进行再设计重新发布以适用不同的终端需要。

XHTML另一方面也是XML的过渡型语言，XML是完全面向结构的设计语言，XHTML帮助我们快速适应结构化的文档设计，帮助我们平滑过渡到XML，并能与XML及其他程序语言之间良好的交互工作，帮助我们扩展其应用。
 
2、发挥CSS2.0的作用
相对于结构设计来说，表现层的样式设计变化更丰富，也更难掌握，对于千变万化的网页设计来说，如何将设计编码成机器识别的样式语言是css的工作重点，CSS丰富的样式表现也对设计者提出了更高的要求，学习CSS应该注意以下几个方面。

  • 合理的CSS文件结构
    虽然CSS做到了样式设计与内容的分离，但CSS文件本身也应该拥有良好的层次结构及规范，目的是进一步改善样式设计的可维护性，CSS本身只是import导入功能，针对于大型网站的设计，不妨使用分离的CSS文件来组织样式，如将字体样式专门使用font.css这样一个文件来编写，表单的设计放到form.css中，通过合理的组织文件，带来后期维护的便利性，也方便网站程序能够根据浏览器版本或是终端设备进行文件的调用，进一步提升CSS跨平台能力。
  • 继承与重用的优势
    使用CSS的优势在于其良好的重用特性，一段CSS设计代码可以供多个区域同时使用，然而除了重用功能以外，CSS还可以实现类似面向对象程序设计中的继承机制，通过继承机制能进一步完善网站的样式结构。如在CSS对应的XHTML中，每一级的标签总是首先使用其本身标签的样式设计，接着使用父级标签的样式，这样部分代码就可以分别放在各级别中，互相发挥作用，统一代码放在最上一级标签。通过这种具有继承机制的功能，能够进一步减小在样式设计中的代码量，进一步改善设计。
  • 设计跨平台的代码
    CSS也有美中不足，由于不同品牌浏览器及不同版本之间的渲染方式的不同，对CSS的解析也存在着一定差异。另外就是PC机下与MAC机下浏览器产品的不同。针对这些原因，CSS的设计也应具有一定的跨平台与兼容特性，编码时尽量减少生僻属性的使用，如果想兼容旧版本的浏览器也应当注意留有一定的CSS hack代码进行编写。
  • CSS hack
    CSS hack是一个被设计师们习惯使用的一个名称。他表现一种类似于欺骗浏览器的编写方式，由于存在浏览器兼容性问题，而且A浏览器不支持某些标签而B浏览器则支持，因此使用这种欺骗方法，我们可以写一段CSS样式只被B浏览器解析，而A浏览器则会忽略，反之相同。因此CSS hack是目前最流行也是最行之有效的修补浏览器解析问题的方式。

3、使用基于DOM的脚本语言来编写交互
DOM的生产也是为了实现脚本语言的跨平台与跨浏览器。DOM的全称是Document Object Model 文档对象模型。是由W3C制定的一种与浏览器无关的接口，他对网页中的标准组件如HTML标签做出技术性的统一规范，使得我们的脚本语言能够访问这些组件，而前提是浏览器支持这种基于DOM的定义规范。就目前来说大部分浏览器都支持标准的DOM。使用符合DOM的浏览器，相同的代码就能完成所有支持的操作。目前的JavaScript是符合DOM标准的脚本语言。有关DOM的详细资料你可以访问W3C的DOM专栏 http://www.w3c.org/dom 。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。CSS中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流Web标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何结构化HTML (1)
    刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

什么是WEB标准
web标准的一些概念
Web标准在中国
WEB标准专题之精华文章汇总
WEB标准的一些常见问题
无觅
]]> http://www.yzznl.cn/archives/15.html/feed 0 如何结构化HTML http://www.yzznl.cn/archives/13.html http://www.yzznl.cn/archives/13.html#comments Fri, 09 Jan 2009 07:01:59 +0000 园子 http://www.yzznl.cn/archives/13.html 您可能也喜欢：
网站目录结构的优化
css语法结构
听派网 – 可以在线收听书籍的网站
巧用Dreamweaver套用源格式的功能
用 QQ 邮箱制作漂亮的明信片 无觅 ]]> 刚刚开始学习使用css控制页面时，你可能会遇到下面的难题：

  • 可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。
  • 你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align=”left”等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

结构化HTML应该怎么做

我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。

开始思考
首先要学习什么是”结构”，一些作家也称之为”语义”。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

如果你坐下来仔细分析和规划你的站点页面结构，你可能得到类似这样的几块：

  • 网站标志和站点名称
  • 主页面内容
  • 站点导航(主菜单)
  • 子菜单
  • 搜索框
  • 功能区(例如购物车、收银台)
  • 页脚(版权和有关法律声明)

我们通常采用DIV元素来将这些结构定义出来，类似这样：

<div id=”header”></div>
<div id=”content”></div>
<div id=”globalnav”></div>
<div id=”subnav”></div>
<div id=”search”></div>
<div id=”shop”></div>
<div id=”footer”></div>

这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素—标题、段落、图片、表格、列表等等。

根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

学会使用选择器
id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。

另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。

一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的相分离)。

良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width=”80%” cellpadding=”3″ border=”2″ align=”left”>，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。

亲自实践一下结构化
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到”container”层中又有其它层，结构类似这样：

<div id=”navcontainer”>
<div id=”globalnav”>
<ul>a list</ul>
</div>
<div id=”subnav”>
<ul>another list</ul>
</div>
</div>

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。

用CSS替换传统方法
下面的列表将帮助你用CSS替换传统方法：

HTML属性以及相对应的CSS方法

HTML属性 CSS方法 说明
align=”left”
align=”right”		 float: left;
float: right;		 使用CSS可以浮动 任何元素:图片、段落、div、标题、表格、列表等等当你使用float属性，必须给这个浮动元素定义一个宽度。
marginwidth=”0″ leftmargin=”0″ marginheight=”0″ topmargin=”0″ margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。
vlink=”#333399″ alink=”#000000″ link=”#3333FF” a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;		 在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。
bgcolor=”#FFFFFF” background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。
bordercolor=”#FFFFFF” border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left
border=”3″
cellspacing=”3″		 border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。你可以使用 table, td or th 这些选择器.如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;
<br clear=”left”>
<br clear=”right”>
<br clear=”all”>		 clear: left;
clear: right;
clear: both;		 许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.
cellpadding=”3″
vspace=”3″
hspace=”3″		 padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。
align=”center” text-align: center;margin-right: auto; margin-left: auto; Text-align 只适用于文本.象div，p这样的块级怨毒可以通过margin-right: auto; 和margin-left: auto;来水平居中


一些令人遗憾的技巧和工作环境
由于浏览器对CSS支持的不完善，我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS实现传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧，盒模型bug的技巧等等。更多有关CSS技巧的文章请看：CSS技巧汇总。

扩展阅读

  • WEB标准专题之精华文章汇总 (5)
    为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
  • 详解CSS盒模型 (0)
    如果想熟练掌握网页标准的布局方法，首先要对盒模型有足够的了解。CSS中的盒模型（box mo...
  • dhtml详解 (0)
    经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
  • Web标准在中国 (0)
    在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流WEB标准以及他们...
  • 符合标准的表单设计 (2)
    下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
  • 如何设置404页面 (8)
    HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
  • 网站布局设计原则 (0)
    园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
  • WEB标准的一些常见问题 (0)
    我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
  • 如何向web标准过渡 (0)
    web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
  • DIV布局和table布局的区别 (1)
    基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...
您可能也喜欢：

网站目录结构的优化
css语法结构
听派网 – 可以在线收听书籍的网站
巧用Dreamweaver套用源格式的功能
用 QQ 邮箱制作漂亮的明信片
无觅
]]> http://www.yzznl.cn/archives/13.html/feed 1