XHTML

XHTML（共3篇）

XHTML 篇1

随着WEB2.0标准化设计理念的普及,业界越来越多的关注XHTML+CSS(也称DIV+CSS)的标准化设计,国内很多大型门户网站已经纷纷采用XHTML+CSS制作方法。从目前实际应用情况来看,XHTML+CSS布局的网站会使得页面载入更快、降低流量费用、网站改版相对简单、快速等。特别是XHTML+CSS的网站结构对SEO网站优化起到的作用越来越明显,因为这种结构的HTML页面里基本只有文字或图片信息,样式放在CSS里面,这样搜索爬虫就不会管CSS,只要采集HTML里的内容就可以了,大大提高爬虫的效率,这种结构往往还能让关键词更集中、密度更高,符合W3C标准的网页在SEO优化方面本身就有优势,更得搜索引擎蜘蛛的喜爱。本文作者就XHTML+CSS网页布局模式谈一下个人使用的一些心得体会,本文以“手机商务网站”为例来进行说明。

1 做好网页的架构分析工作,是设计好网页的前提

一个拥有高访问量的网站是成功网站的一个衡量因素,我们在设计网页时要根据主题的不同进行合理的板式选择和色彩搭配,将网站要达到的宣传效应通过合理搭配而构成的美丽页面来吸引客户的兴趣,促使他们来访问我们的网站。

1.1 分析页面板式架构

“手机商务网站”主要以网上宣传新款手机和销售为主,这种类型网站的特点就是主要让人感觉到商品丰富而又美丽大方,因此在选择色彩是主要以蓝色、绿色为主,小图标、小按钮、边框线等点缀小图形以红、橙为主,显得页面绚丽多彩、活泼、大方,视觉冲击力较强;另外,“手机商务网站”主页面主要包括网站BANNER、导航栏、站内搜索、新产品图片宣传、最新新闻、网站服务、产品信息、版权信息等。本页面的板式草图如图1所示。

1.2 分析页面排版架构

整个网页的框架比较简单,包括Banner图片、导航条、搜索栏、页面主体及版权信息等。因此,采用了基本的网页框架结构,如图2所示。清晰准确的架构设计是下一步布局的基础和关键。

1.3 依据XHTML+CSS布局网页的模式特点实现页面各模块的制作,凸显布局优势

页面的整体框架有了大体设计之后,对各个模块进行分别的处理,最后再统一整合,这是设计制作网站的通常步骤,养成良好的设计习惯便可熟能生巧。

1.3.1 利用DIV标记对页面进行分块,确定好各块以及子块之间的关系

依据前边分析的排版结构对页面进行分块,如图3所示,另外制作过程注意利用注释语句,以便让页面代码清晰、易读。

1.3.2 定义CSS样式实现对各块效果的设计与美化

页面各模块划分好之后,接下来就是定义CSS样式对其进行定位和美化工作了,具体操作之前先做好整个网站的样式分析与规划工作,这是有效使用CSS样式表的前提。

1)对整个网站中要用到的CSS样式表进行统一规划。从网站效果一致性原则出发,对整个网站的样式进行系统的分析和规划,详细罗列各样式的名称和样式内容。特别要善用属性简写,尽可能地减少冗余代码,例如:

margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以写成这样的格式:margin:0 10px。

2)统一规划CSS样式的应用范围。对网站中各个页面都要使用的样式效果(例:各页面中的普通文本信息采用统一的大小、字体、行高、颜色等)统一定义在外部样式表文件中,方便各页面的调用,而对某个页面中要单独使用的效果则以内嵌式样式表的形式直接在相应页面中进行定义。

3)基于SEO的样式命名规范

搜索引擎是通过抓取网站源代码来进行亲密接触的,如何才能更好地让搜索引擎的爬虫更快更准确地觉察到网站内容的相关性,增强网站的搜索优化?可能从最基本的命名规则入手会有意想不到的收获,下面从前端设计的角度整理了一些常用的命名规则,就很好地考虑到了搜索引擎的喜好,在页面设计的过程中,尽量做到让搜索引擎明白,从而达到我们的设计目标,如表1所示。

1.3.3 对页面效果进行整体调整,保证页面的协调和美观

经过上边的步骤页面已经基本成形,在制作完成的最后,往往还需要对页面根据效果做一些细节上的调整。例如各个块之间的Padding和Margin的值是否与整体页面协调,各个子块之间是否协调统一等等。另外对于固定宽度且居中的板式,需要考虑给页面添加背景,以适合大显示器的用户使用等。

2 考虑浏览器兼容处理,保障不同的用户查看到最好的页面效果

在设计网页时,经常碰到在IE中制作的页面换到Firefox预览时,发现页面效果变化很大。针对这样的问题,我们在设计网页时就要进行相应的处理。常用的方法有:从空白页面开始,每做一小步,就同时在各种浏览器中查看,一旦发现显示效果不同,立即查找原因,寻找解决办法;也可以通过软件工具模拟网页在各种不同的浏览器中的效果,例如目前大家用的IETester v0.2.3,这样可以边做边修改;另外,大家在制作过程中要善于总结一些经常出问题的标记的处理办法。例如:边界重合时利用padding或border来避免。您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来,如果您有用到margin,那么很容易产生边界的重合。又如有时候某些错误会使50%+50%成为100.1%,使网页出现问题,这时请尝试将这些值改为49%,甚至49.9%,往往这样的做法才解决了问题等等。

3 结束语

XHTML+CSS布局模式因其表现和内容相分离,提高搜索引擎对网页的索引效率,代码简洁、提高页面浏览速度,易于维护和改版等众多优点而在广泛地被人们所接受。XHTML+CSS具有很多优势,不过现阶段XHTML+CSS网站建设也存在一些问题,例如对于CSS的高度依赖使得网页设计变得比较复杂;CSS文件异常将影响整个网站的正常浏览等,这些问题相信随着科学技术的进一步发展,会出现更好的解决办法,使得网页布局模式朝着更加规范、更加标准、更加简化的方向发展。

摘要：XHTML+CSS布局模式因其自身的特点和优势正在广泛地被人们所接受和运用,它是未来网页布局的发展趋势。初学者刚开始使用这种模式时经常处于懵懂状态,文章以分析、设计、制作、调试页面为主线详细阐述了使用这种模式制作网页的过程,并对各个环节容易出现的问题建议了解决方法,特别提出在设计网页时要充分考虑到SEO优化工作,希望能给网页爱好者一些帮助。

关键词：SEO,XHTML+CSS,网页布局

参考文献

[1]览众,张晓景.DIV+CSS网页布局商业案例精粹[M].北京:电子工业出版社,2007.

[2]李烨.别具光芒Div/Css网页布局与美化[M].北京:人民邮电出版社,2006.

[3]网站设计之CSS+DIV的优势及问题分析[EB/OL].http://blog.sina.com.cn/s/blog_62dd5a1e0100mqgm.html.

[4]使用DIV+CSS网页布局,让搜索优化更胜一筹[EB/OL].http://www.missyuan.com/thread-417496-1-1.html.

[5]Div+CSS布局入门教程[EB/OL].http://www.blueidea.com/tech/site/2006/3574.asp.

XHTML 篇2

如何看待 Web 设计师们所钟爱的 XHTML？

要弄明白 XHTML 如何获得人们的青睐，得从 HTML4 说起。HTML 4 是一种松散的语言，它拥有很多选项，囊括了太多人们对 Web 的试验性想法，一些是好的，一些是坏的，然而，要 HTML 4 为蹩脚的网页代码负责，好比要英语为低劣的小说负责。 HTML 4 也可以结构严谨并拥有合法的语义，只要设计师们知道该如何使用它。

而 XHTML 1.0 更严格，那些验证工具更容易指出其中的错误，如果你很懒，又想保证自己的代码结构严谨，XHTML 1.x 要容易检查得多。

然而问题是，XHTML 的使命并非单单如此，XHTML 的使命在于它名字中的那个 X，X 的存在不是为了耍酷，而是因为 XHTML 事实上属于 XML。象正在为 HTML 5 细则工作的 Henri Sivonen 指出的那样，XHTML 事实上有两个意义，一是技术上的，一是市场上的。

从技术的角度，XHTML 原本是要以application/xhtml+xmlMIME 类型输出纯粹的 XML 的，然而这种情形很少见，这并非说 XML 不重要，事实上未来的 XHTML 5 将对 HTML 5 提供序列化服务。而 XHTML 的大量使用更多是基于市场的角度，换句话说，那些采用 XHTML 语法的网页仍然被浏览器按text/htmlMIME 类型渲染，因此，尽管这些文档属于 XML，但它们并没被当作真正的 XML，而是按 HTML 进行渲染。

人们为什么喜欢 XHTML？

既然 XHTML 就是 HTML，那些喜欢 XHTML 的人又是出于什么样的初衷？答案是，XHTML 鼓励良好的代码习惯，所有标签都需要完整，严谨，XHML 可以产生比 HTML 4 更干净的代码。

然而 HTML 5 已经解决了 HTML 4 中大部分的此类问题，它允许你使用 XHTML 1.x 式的严谨代码，当然也允许 HTML 4 式的松散代码，这意味着， Web 设计师们之前编写的 XHTML 1.x 代码可以直接转到 HTML 5，只需更改一下 doctype 即可，

XHTML 2.0 错在哪里？

尽管初衷是好的，但 XHTML 2.0 的夭亡来自两件事，第一，它不向前兼容，意味着你写的 XHTML 1.x 代码无法直接用于 XHTML 2.0, 相反， HTML 5 却向前兼容。第二，XHTML 2.0 并非 HTML 的 XML 化，而是一种全新的体系，它忽视了设计师们的需求。

而 HTML 5 却包含了设计师们需要的很多东西，本地的音频，视频支持，多栏布局工具，离线数据库，本地的矢量图支持，这一切，XHTML 丝毫没有触及。

HTML 5 的光明未来

XHTML 2.0 虽然已被提出多年，然而迄今没有任何浏览器实现对它的任何支持，HTML 5 却得到了几乎所有现代浏览器到青睐，包括 Firefox, Safari, Chrome, Opera，甚至 IE8 也实现了对它的某些支持。

那些在 Web 领域野心勃勃的大厂商，比如 Google， Apple，已经推出基于 HTML 5 的 Web 服务，使用本地化视频支持与本地数据库实现了各种应用，而基于 XHTML 2.0 的应用却几乎没有有。

另外，HTML 5 还推出了 XHTML 5 细则，XHTML 5 向当前 Web 中大量基于 XHTML 1.x 的网页伸出橄榄枝，XHTML 1.x 如果仅仅是作为 HTML 的一种 XML 式编码风格，并不会被遗弃，事实上，还会工作得更好。

延伸阅读

TAG: HTML5

HTML 5 正在改变 Web

HTML 5 令人期待的 5 项功能

HTML 5 会为 Flash 和 Silverlight 送终吗？

本文国际来源：www.webmonkey.com/blog/XHTML_2_Dies_a_Lonely_Death__Makes_Room_For_HTML_5

www.w3.org//06/xhtml-faq

XHTML 篇3

1) DIV+CSS技术制作的网页实现了内容和样式分离。自CSS出现后, HTML终于摆脱了杂乱无章的恶梦, 页面中只存放布局结构和信息内容, 而表现层面完全交给了CSS去完成。

2) 有利于提高浏览和维护效率。使用DIV+CSS制作的网页由于将样式与内容进行了分离, 减少了重复冗余, 实现了多页面共用一个CSS文件, 页面缩小很多。维护方面由于样式都写入了CSS, 只需修改一个文件即可改变所有页面的布局或样式。

3) 对搜索引擎友好程度高, 有利于SEO (搜索引擎优化) 。用TABLE布局的网页代码较多, 搜索引擎需要去除多余代码, 锁定文字比较复杂。而使用DIV+CSS布局的网页, 所有样式都写在CSS里, 页面中只有ID或CLASS调用的部分, 代码得到极大精简, 正文就突出了。当然这也与设计师的编写水平有关。

4) DIV+CSS的又一优势在于其与脚本语言 (如J avas cript) 技术的融合, 即DIV+CSS+Javascript, 实现更友好的动态交互页面展示。

近年来越来越多的大型门户网站开始放弃传统的HTML改为使用XHTML网页标准, 而XHTML网站设计标准中不再使用TABLE定位, 而是采用DIV+CSS的方式实现各种定位布局。由此可见, DIV+CSS已经称为一种网页设计标准。下面我们一起来看看这种目前比较流行的网页设计模式具体是怎么实现的。

1 DIV+CSS布局的实现

DIV的中文解释是层, 而我们可以把它理解为块, 而CSS是样式表, 这样我们就可以用样式表去控制块的位置和大小等属性。

一般情况下网页框架搭建分为三大块:1) top—顶部, banner区域;2) Middle—中间, 既主体部分, 分为左 (slider) 和右 (conte nt) 两块;3) Bottom—底部, 版权区域。

a.页面部分

部分代码如下:

b.对应的CSS样式代码如下:

这样两段简单的代码, 即可形成整个网站的大体布局。

2 DIV+CSS的缺陷

前面总结了很多DIV+CSS网页设计的优点, 但也会存在一些缺点和不足, 个人认为有以下几点最为关键:

2.1 技术的复杂性

与TABLE布局相比, 技术较为复杂, 初学者不易掌握。使用DIV+CSS布局需要对层样式的定义有一定的理解, 编写CSS时一般直接编写源代码, 相比表格直观的所见即所得的编辑方式, CSS不易掌握, 甚至有经验的网页设计师也难免犯错, 出现各种错误。

2.2 浏览器兼容问题

使用DIV+CSS布局时, 由于各浏览器对于CSS解释上的差异, 导致使用某个浏览器上调试的网站, 在其他浏览器上往往会显示错误、错位, 甚至无法显示。而相反, 市面上几乎所有浏览器对TABLE布局方式支持非常好, 这也是TABLE的优势之一。所以在使用DIV+CSS时要注意各浏览器, 甚至同浏览器的不同版本之间解释的差异。为了解决这些不兼容的问题, 我们一般可以使用一些特殊的hack语句来解决, 或者为不同的浏览器和浏览器的不同版本分别编写CSS样式。

2.3 增加了设计人员与程序员之间合作的难度

设计人员使用DIV+CSS构建的网站交给程序员, 页面可读性较差, 要结合页面和CSS才能看懂。这就使得不懂CSS的程序员很难独立使用设计好的页面, 造成团队合作上的困难。

由此可见, 虽然W3C标准使用DIV布局网页, 但并未摒弃对TABLE的支持, 甚至加强了对TABLE标签的定义。主要原因就是TABLE可以简化一些制作中的复杂问题, 比如页面中的form (表单) 或者作为新闻列表的重复表格, 这些使用TABLE去组织数据和显示内容会比DIV方便很多。我们在追求新技术的同时, 要理性的运用, 取长避短, 而不是盲目的走向极端。

通过对DIV+CSS技术的初步分析, 我们不难看出, DIV+CSS有着先天优势, 其灵活的布局方式、丰富的内容样式和改版便利性, 使其成为目前网页设计、制作的首选方式。但在实际学习应用中, 要清醒的看到其技术的成熟度和学习的难度, 特别对于刚接触网页设计的人来说, 掌握起来比较困难, 可先从TABLE入手, 具有一定网页设计基础后, 再进一步深入学习DIV+CSS布局, 将其与TABLE结合起来综合运用, 取长补短, 只有在循序渐进的学习过程中, 才能更好的掌握这项新的网页技术。

摘要：近年来, 随着网络的普及和飞速发展, 承载了大量最新信息的网站, 特别是大中型门户网站成为了互联网主要信息传递的载体, 其对网页技术的需求使得网页技术也有了很大的跨越。本文针对目前网站中流行的页面设计技术, 对新的基于XHTML标准的DIV+CSS布局方式与传统TABLE布局方式进行了比较分析, 并从DIV+CSS的优势和缺陷入手, 简要阐述了其技术要点及应用前景。

关键词：DIV,CSS,网页设计,网页布局

参考文献

[1]朱印宏.CSS商业网站布局之道.清华大学出版社, 2007.