标签归档:网页标准

WEB标准专题之精华文章汇总

为什么我用普通话就能和南京的同学进行交流?
为什么所有银行卡的大小都是一样的?
为什么新买来的灯泡正好可以拧上老的灯口?
为什么……

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

详解CSS盒模型

如果想熟练掌握网页标准的布局方法,首先要对盒模型有足够的了解。CSS中的盒模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒模型的结构:

CSS盒模型图例
继续阅读

dhtml详解

经常听说dhtml,那么你了解dhtml吗?

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

Web标准在中国

在十月初的时候,我有幸在中国呆上了一段时间,与Web领域的专家、学生等交流Web标准以及他们的现状。很有意思的几个礼拜,也让我大开眼界。印象最深刻的,在中国推行Web标准的仍在少数,并且通常是孤立无援的,无法实施、无法去解释为何需要标准及标准的价值。所以这里我想写一下我所了解的情况、面对的挑战和一些希望能有效的方法。

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

如何设置404页面

HTTP 404 错误意味着链接指向的网页不存在,即原始网页的URL失效,这种情况经常会发生,很难避免,比如说:网页URL生成规则改变、网页文件更名或移动位置、导入链接拼写错误等,导致原来的URL地址无法访问;当Web 服务器接到类似请求时,会返回一个404 状态码,告诉浏览器要请求的资源并不存在。但是,Web服务器默认的404错误页面,无论Apache还是IIS,均十分简陋、呆板且对用户不友好,无法给用户提供必要的信息以获取更多线索,无疑这会造成用户的流失。

404页面的作用

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

网站布局设计原则

园子认为,网页的布局和网站提供的内容同样重要。一个注重用户体验的布局,能更好的体现你的网页内容,更能表现网站设计者想要突出的一些主题和思想。

网页布局的基本概念

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

WEB标准的一些常见问题

我们一定要记住学习的初衷是什么,如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合web标准的另一层含义是使用web标准中的各项技术将网站表现与内容完全分离,从根本上改变现有的结构为网站带来个新性的变化。真正要符合W3C标准,还是需要不断学习与提高在网站架构设计上的经验,实现网站表现与内容的分离。园子给大家列举了一些学习WEB标准之路的一些常见问题,希望能够帮助到你。
继续阅读

如何向web标准过渡

web标准的目标是实现网页结构、表现、行为的分离,很多个人站长都开始慢慢的将自己的网站向WEB标准过渡,这个过程是个不断学习与提高的过程,园子总结了以下几个过渡的方法,目的是对那些想向标准过渡的朋友提供个比较好的帮助。
 
1、从HTML转向XHTML的过渡

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

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

如何结构化HTML

刚刚开始学习使用CSS控制页面时,你可能会遇到下面的难题:

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

继续阅读

DIV布局和table布局的区别

基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为三者分离。只有真正实现了结构分离的网页设计,才是真正意义符合web标准的网页设计。

传统table布局方式实际上是利用了HTML table表格元素具有无边框特性,由于table元素可以在显示时使得单元格的边框和间距设置为0,即不显示边框,因此可以将网页中的各个元素按版式划分放入表格的各个单元格中,从而实现复杂的排版组合。table布局的核心在于设计一个能满足版式要求的表格结构,将内容装入每个单元格中,间距及定格则通过gif进行占位来实现,最终的结构是一个复杂的表格,不利于设计与修改。
继续阅读

head区域的其他设置

查看本站的源文件你会发现在head区域还有一些声明,下面摘录一些常用的给朋友们介绍一下。

站点的简要介绍(推荐认真书写,对SEO有帮助哦)

<meta name=”description” content=”主要分享搜索引擎优化,CSS技巧,博客赚钱,写博客,网站前台技术,seo,Google优化,百度优化等内容” />

站点的关键词(推荐认真书写,对SEO有帮助哦)

<meta name=”keywords” content=”搜索引擎优化,网站设计,WEB,XHTML,CSS,Design,网站优化与推广,写博客的技巧,软件使用技巧,如何投放广告” />
继续阅读

调用样式表的方法

基于web标准设计的网站,过渡的方法主要采用XHTML+CSS,网页里面所有表现的地方都需要用CSS来实现。这就要求我们必须熟练掌握CSS,要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的,园子总结了一下常用的三种调用样式表的方法。
继续阅读

定义语言编码

语言编码的作用
为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言,国内大部分网站一般使用gb2312(简体中文),如果你制作的中多国语言页面也有可能用Unicode、ISO-8859-1等语言编码,这些要根据你的需要来定义。

例如:
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
继续阅读

定义名字空间

我们定义好DOCTYPE之后,接下来该做的就是定义名字空间了。通常我们HTML4.0的代码只是<html>,这里的”xmlns”是什么呢?通俗的解释是:名字空间就是给文档做一个标记,告诉别人,这个文档是属于谁的。只不过这个”谁”用了一个网址来代替。

例如:<html xmlns=”http://www.w3.org/1999/xhtml” lang=”gb2312″>

这个”xmlns”是XHTML namespace的缩写,叫做”名字空间”声明。后面的lang=”gb2312″,指定你的文档用简体中文。一般采用简体中文做网站语言的话都会这样来定义。
继续阅读