设为首页 | 收藏本站
首页>IT学院>网页设计>正文
如何使用CSS来进行网页排版
WWW.DBIT.CN 2006-10-15 14:19:01 热度:
 

第1天:选择什么样的DOCTYPE

前言

大家好!这个系列文章是按阿捷自己制作w3cn.org站点的过程编写的。之前阿捷也一直没有制作过一个真正符合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声明可供选择:

过渡的(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。完整代码如下:

<!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文档最顶部,在所有代码和标识之上。第2天:什么是名字空间

DOCTYPE声明好以后,接下来的代码是:

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

通常我们HTML4.0的代码只是<html>,这里的"xmlns"是什么呢?

这个"xmlns"是XHTML namespace的缩写,叫做"名字空间"声明。名字空间是什么作用呢?阿捷自己的理解是:

由于xml允许你自己定义自己的标识,你定义的标识和其他人定义的标识有可能相同,但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生,XML采用名字空间声明,允许你通过一个网址指向来识别你的标识。例如:

本新闻共11页,当前在第01页  
01  02  03  04  05  06  07  08  09  10  
11  

 
上一篇:如何让你的网站人见人爱
下一篇:确保客户端能访问到最新的网页
打印】【关闭
  相关文章:
·网页制作:CSS的常用技巧放送·动态CSS,换肤技术
·使用图片和CSS结合制作动画按钮·CSS中display 与visibility 的区别
·XHTML+CSS布局之XHTML应用小结·CSS超级技巧大放送合集
·网站设计之合理架构css·认清CSS的类class和标识id选择符
·网页制作教程:认识CSS的伪类·CSS自动实现网页打印版本
·使用html表格和CSS进行混合网页设·CSS的“顶级”技巧
·网页设计引入CSS样式的五种方式·用CSS代码轻松Diy你的网页滚动条
·采用DIV+CSS布局的好处·Dreamweaver入门使用CSS设置页面格
☆联姻学院☆

保养电脑的26个窍门
文件夹删除不掉怎么办?
教你如何用手工迅速剿灭QQ广告
“熊猫烧香”病毒的病毒描述和
在Excel中只打印图表以外区域
Excel中只选中包含文本的单元
Windows XP操作系统的几个实用
用XP系统自带网络诊断程序解决
风雨雷电→自然现象动画实战技
Flash遮罩特效之百叶窗效果
十二个Dreamweaver鲜为人知的
如何用 Dreamweaver 批量做we
JavaScript的系统函数学习
Java之父:关于Java我也有遗憾
排除网上邻居使用4大常见麻烦
解除上网限制IP和MAC捆绑的破