WEB2.0标准教程:第一天 选择

前言
大家好!这个系列文章是W3CN阿捷编写的。是一些制作过程中的心得和经验,希望对大家有点帮助。
同时,非常感谢阿捷与我们分享经验与心得。好了,让我们开始吧
第一天
开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。
WEB2.0标准网页原代码,第一行就是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
打开一些符合标准的站点,例如著名web设计软件开发商Macromedia,设计大师Zeldman的个人网站,会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么这些代码有什么含义?一定要放置吗?
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:
过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。

时间: 2024-08-01 09:18:23

WEB2.0标准教程:第一天 选择的相关文章

WEB2.0标准教程:第三天 定义

第三步是定义你的语言编码:<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言,我们一般使用gb2312(简体中文),制作多国语言页面也有可能用Unicode.ISO-8859-1等,根据你的需要定义.通常这样定义就可以了.但是要补充说明的是,XML文档并不是这样定义语言编码的

WEB2.0标准教程:第九天 第一个CSS布局实例

接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了. 注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.但任何事情都有得有失,取舍在于你的价值判断.好

WEB2.0标准教程:如何应用WEB标准改善现有网站?

我们大部分的设计师依旧在采用传统的表格布局.表现与结构混杂在一起的方式来建立网站.学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位.最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标.如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具. 1.初级改善 为页面添加正确的DOCTYPE  很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用.D

WEB2.0标准教程:应用WEB标准建设网站有什么好处?

我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站.例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码.同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术.类似的问题举不胜举:网站代码臃肿.繁杂浪费了我们大量的带宽:针对某种浏览器的DHTML特效,屏蔽了部分潜在的客户:不易用的代码,残障

WEB2.0标准教程:WEB标准是什么?

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

WEB2.0标准教程:第五天 head区的其他设置

这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧.收藏夹小图标首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下.然后将下面的代码嵌入head区:<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel=&quo

WEB2.0标准教程:第七天 CSS入门

在了解XHTML代码规范后,我们就要进行CSS布局.首先先介绍一些CSS的入门知识. 如果你已经很熟悉了,可以跳过这一节. CSS是Cascading Style Sheets(层叠样式表)的缩写. 是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范 分析一个典型CSS的语句: p {COLOR:#FF0000;BACKGROUND:#FFFFFF}  ·其中"p"我们称为"选择器"(selectors),指明我们要给"p&qu

WEB2.0标准教程:第二天 什么是名字空间

DOCTYPE声明好以后,接下来的代码是:<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 通常我们HTML4.0的代码只是<html>,这里的"xmlns"是什么呢?这个"xmlns"是XHTML namespace的缩写,叫做"名字空间"声明.名字空间是什么作用呢?阿捷自己的理解是:由于xml允许你自己定义自己的标

WEB2.0标准教程:第六天 XHTML代码规范

在开始正式内容制作之前,我们必须先了解一下web标准有关代码的规范. 了解这些规范可以帮助你少走弯路,尽快通过代码校验.使我们的代码有一个统一.唯一的标准! 1.所有的标记都必须要有一个相应的结束标记 以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们.但在XHTML中这是不合法的.XHTML要求有严谨的结构,所有标签必须关闭.如果是单独不成对的标签,在标签最后加一个"/"来关闭它.例