文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设Html如何使用CSS来进行网页排版
精品推荐
特别推荐
·用CSS控制浏览器的滚动条
·marquee标记的用法
·HTML语言:什么是Unicode 什么是UTF-8
·XHTML编写网页代码的七条基本规范
·HTML和XHTML的区别
·HTML语言:什么是Unicode?什么是UTF-8?
·HTML 和 XHTML 区别
·HTML标记全集
·分析比较:三种简洁的Tab导航简析
·HTML教程-HTML简介
·网页Web标准化教程关于表格的应用
·网页代码常用小技巧总结续,网页制作学习
·HTML 标记参考手册
·用htc实现html编辑器
·HTML 4.0 语言快速入门参考教程
·初学:什么是DIV+CSS?有什么优势?
·网页制作实例CSS用一张图片实现圆角
·DIV CSS网页布局学习中容易出现的问题汇总
·HTML标签语义 科学合理的运用HTML标签
·53个CSS-不可或缺的技巧
热点TOP10
·弹出窗口代码集萃
·html教学+HTML语法大全
·图片左右循环连续滚动代码,解决marquee的留白问题
·网页设计基础:Div+CSS布局入门教程
·下拉列表框1下拉列表框2(HTML版)
·HTML标记全集
·解析Html页面:HTML Parser的试用
·在HTML网页中添加WMV格式播放器代码
·中国地区三级联动下拉菜单代码和示例(附带代码下载)
·53个CSS-不可或缺的技巧
·HTML 标记参考手册
·页面显示问题
·用层模拟下拉列表框
·CSS标准网页设计UL和DIV使用的技巧总结
·可移动层的实现示例
·CSS 制作的三级菜单特效代码
·兼容标准XHTML的浮动层特效实现
·HTML及XML语言的转义字符
·HTML 4.0 语言快速参考
·分析比较:三种简洁的Tab导航简析

如何使用CSS来进行网页排版

日期:2007年5月26日 作者: 查看:[大字体 中字体 小字体]


第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采用名字空间声明,允许你通过一个网址指向来识别你的标识。例如:

小王和小李都定义了一个<book>标识,如果小王的名字空间是"http://www.xiaowang.com",小李的名字空间是"http://www.xiaoli.com",那么当两个文档交换数据时,也不会混淆<book>标识,因为它属于不同的名字空间。

更通俗的解释是:名字空间就是给文档做一个标记,告诉别人,这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。

XHTML是HTML向XML过渡的标识语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标识,所以它的名字空间都相同,就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧,目前阶段我们只要照抄代码就可以了。

后面的lang="gb2312",指定你的文档用简体中文。

[1] [2] [3] [4] [5] [6] [7] [8] 下一页 




上一篇:CSS 制作的三级菜单特效代码

下一篇:25种风格各异的菜单

如何使用CSS来进行网页排版 相关文章:
·教你学习如何破解XP登陆密码
·教你如何复制别人的QQ空间
·“黑客”教你如何远程控制计算机
·GHOST使用方法(图解)
·将系统装到U盘中 如何自制XP@USB启动盘
·Vista系统使用技巧总结
·如何显示输入法图标(输入法图标消失)
·为什么iexplore.exe在打开网页时CPU使用会100%?
·DIV CSS网页布局实例:十步学会用CSS建站
·如何建立一个网站?规划、设计、目的、原则、宣传
如何使用CSS来进行网页排版 相关软件:
·黑客视频教程 VMware虚拟机的安装和使用
·如何安装双系统
·方正飞腾集成排版系统V4.1
·Dreamweaver 网页设计
·黑客视频教程-灰鸽子远控使用教程
·photoshop cs 超梦幻网页创意宝典
·使用GPMC随心所欲管理组策略
·FLASH 8中文使用手册
·东方网页王III 正式版
·Adobe Photoshop CS 2 简体中文使用指南

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.vipcn.net
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot