网页设计DIV+CSS——第1 天:选择什么样的DOCTYPE

大家好!这个系列文章是按阿捷自己制作这个站点的过程编写的。之前阿捷也一直没有制作过一个真正符合 web 标准的网站。
现在边参考国外资料边制作,同时把过程中的心得和经验记录下来,希望对大家有点帮助。好了,让我们开始吧 
第一天 
开始制作符合标准的站点,第一件事情就是声明符合自己需要的 DOCTYPE。 
查看本站首页原代码,可以看到第一行就是: <!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声明可供选择: 
1 过渡的(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"> 
2严格的(Strict):要求严格的 DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
3 框架的(Frameset):专门针对框架页面设计使用的 DTD,如果你的页面中包含有框架,需要采用这种 DTD。完整代码
如下: 
<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

我们选择什么样的DOCTYPE 
理想情况当然是严格的 DTD,但对于我们大多数刚接触 web 标准的设计师来说,过渡的 DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型 DTD)。因为这种 DTD 还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C 的代码校验。 
注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的 tag,例如用于排版的表格、背景颜色标识等。在 XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。 
打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原
来 HTML4 中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。 
补充 
DOCTYPE 声明必须放在每一个 XHTML文档最顶部,在所有代码和标识之上。

时间: 2024-10-27 19:44:47

网页设计DIV+CSS——第1 天:选择什么样的DOCTYPE的相关文章

网页设计DIV+CSS——第7天:CSS入门

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

网页设计DIV+CSS——第5天:head区的其他设置

这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧. 收藏夹小图标 如果你将本站加入收藏夹,可以看到在收藏夹网址之前的IE图标变成了本站特别的图标.要实现这样效果很简单,首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下.然后将下面的代码嵌入head区:  <link rel="icon" href="/favicon.ico&quo

网页设计DIV+CSS——第2 天:什么是名字空间

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

网页设计DIV+CSS——第3 天:定义语言编码

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

网页设计之css+div&amp;nbsp;PK&amp;nbsp;table+css

css|设计|网页|网页设计 用过div+CSS作个整个网站,如果是纯粹的div的布局是比较麻烦的,尤其是你div里面嵌套div的,div布局的时候,你有些页面效果还是要舍弃一点的,比如图片的圆角,这些如果套div比较麻烦,在一个div在VS2005设计器里面可能变形,如果过多的套div,你实现Ajax拖动效果的时候比较麻烦,所以我觉得眼下还是div+嵌套table比较好. 圆角--可以用div+css做出一样漂亮的圆角,而且不用图片,而且是宽度.高度自适应的 怎么实现?挖挖Google Tal

网页设计之css+div PK table+css

css|设计|网页|网页设计 用过div+css作个整个网站,如果是纯粹的div的布局是比较麻烦的,尤其是你div里面嵌套div的,div布局的时候,你有些页面效果还是要舍弃一点的,比如图片的圆角,这些如果套div比较麻烦,在一个div在VS2005设计器里面可能变形,如果过多的套div,你实现ajax拖动效果的时候比较麻烦,所以我觉得眼下还是div+嵌套table比较好. 圆角--可以用div+css做出一样漂亮的圆角,而且不用图片,而且是宽度.高度自适应的 怎么实现?挖挖Google Tal

网页设计基础:Div+CSS布局入门教程

css|教程|入门教程|设计|网页|网页设计 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

网页设计引入CSS样式的五种方式

css|设计|网页|网页设计 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STY

用网页标准DIV+CSS创建固定宽度的网页布局

css|标准|创建|网页 用 XHTML 和 CSS 实现两列或三列页面布局的各个方面.到目前为止,所有例子都使用流式布局(也就是布局会自动扩展和适应浏览器窗口的宽度).现在是时候考虑另外一种主要的页面布局方法了,这种布局方法是固定宽度布局. 很多 Web 构建人员倾向于使用固定宽度的布局进行页面设计,因为它们能生成精确且可预知的结果.这种方法与打印布局非常接近,对于设计人员和访问者来说都是一个很重要的舒适因素:另外,对于包含很多大图片和其它元素的内容,由于它们在流式布局中不能很好地表现,因此固