开发者社区> springfe> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

学习用Xhtml+CSS2构建网页

简介: 第一篇:喜新厌旧,逐步习惯Xhtml+CSS2的布局方式 近来有很多网站用Xhtml1.0标准将站点重构,其中包括yahoo,163,CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上她们了,页面构建技术就是若干MM,我们也要来个喜新厌旧。
+关注继续查看

第一篇:喜新厌旧,逐步习惯Xhtml+CSS2的布局方式

近来有很多网站用Xhtml1.0标准将站点重构,其中包括yahoo,163,CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪,所以偶也开始学起了,慢慢的就爱上她们了,页面构建技术就是若干MM,我们也要来个喜新厌旧。

一、为什么要学Xhtml+CSS2

  首先,标准的代码便于网页在各种浏览器中的顺利显示。
  一些不规范代码的网页在IE下能正常显示的,在Firefox和Opera上可能就无法正常显示。在这一点上我们不得不说IE相比之下更有包容之心,虽然现在浏览器的主流是IE以及以IE为内核的各种浏览器,但我们同样无法忽视Firefox、Opera等浏览器在逐渐增大的用户群,而这些人群多是对计算机较为精通的老鸟,被他们骂自己网站太垃圾的话我想滋味应该不好受,呵呵。
  当然这也不是说使用table等做的网页就不符合标准(使用table带来的一些弊端下面也要谈到),只是当前不少人习惯用先用Photoshop(以下简写为PS)设计平面图,之后用Fireworks(以下简写为FW)或Imageready(以下简写为IR)做切割,之后在Dreamweaver(以下简写为DW)或是Forntpage(以下简写为FP)来生成html,这些可视化的软件固然方便,但由此带来的问题也是多多,这些软件多多少少会自动增减一些代码,如果没有查看代码的习惯,很容易导致一些不规范代码的产生。,由于使用FW或IR做出的切片一般对图片的特征无法做出直观的描述,所以这样做出的html给以后的维护也带来了麻烦。

  其次,Xhtml + CSS2使页面布局更加简单
  假如之前对页面进行布局或设置了一些相对复杂效果的话,通常的做法是采用大量的表格嵌套对一个页面进行布局,用单元格来描述区域,这样在WYSIWYG等软件中倒是比较直观,但这样影响的有几个方面,首先影响下载速度,因为table的显示不像DIV一样,table在浏览器中的显示是需要全部下载之后才能显示,所以会影响下载速度;其次对于手写代码来讲,这样的结构非常不直观,大堆的表格嵌套可能让习惯手写代码的设计师感觉头晕;另外,还可能牵扯到一个地方就是单元格的合并,假如你不小心搞错了一个colspan=”?”,那么整个页面的布局将面目全非。
  而用CSS做布局,就像是在PS中对图层进行操作一样,利用CSS中相对和绝对的概念,整个页面的布局就轻松和方便多了

  此外,Xhtml可以减小网页文件体积
  使用Xhtml+CSS2构建网页其实一个很重要的目的就是提高浏览速度,虽说现在网速越来越大了,但谁不想自己的站点速度更快呢,有人还曾经说“世上最远的距离不是地球到太阳,而是中国电信到中国网通”,如果你在电信服务器上的站点被网通线路的用户浏览,网页文件大小势必也会影响浏览者的感受。而采用Xhtml来构建网页则利于你解决这个问题,经过笔者测试,实现同样的效果图,使用Xhtml构建的网页比使用传统table方式构建的页面体积减小1/2左右。相信很多人会喜欢身材苗条的MM,呵呵

  二、不同层次的学习者如何快速入门

  感受了以上几点,我开始逐渐习惯使用Xhtml+CSS2来构建网站,那么谈了这么多,究竟从哪里入门呢?这里,对于不同的人群,我建议以下几种方法快速入门:

  对于html及css完全不了解的新手:首先建议你还是学习以下html,因为它当对简单一些,更易于入门,熟悉了一些html的基本语法之后,开始学习Xhtml的一些规范写法,这里推荐一些学习资料:
  Xhtml中文参考:
  http://www.standme.com/Xhtml.htm
  HTML和XHTML常见问答:
  http://www.transwiki.org/cn/xhtmlfaq.htm
  有英文基础的可以查看这些页面:
  XHTML™ basic:
  http://www.w3.org/TR/xhtml-basic/
  XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition):
  http://www.w3.org/TR/xhtml1/
  XHTML™ 1.1 - Module-based XHTML:
  http://www.w3.org/TR/xhtml11/
  XHTML™ 2.0:
  http://www.w3.org/TR/xhtml2/

  对于有html基础的朋友,推荐这篇阿捷写的文章:
  循序渐进学习Xhtml+CSS2:
  http://www.w3cn.org/article/step/index.html
  通过一步步的逐渐由不够规范的html转变到Xhtml

  对于有html及PHP语言基础的朋友,这里推荐一个快速搞定Xhtml的方法:
  安装一个Wordpress,官方站点:www.wordpress.org,当前最新版本是1.5.2,之后用最短的时间熟悉wordpress的模板系统,改动以下wordpress的模板算是熟悉一下DIV和CSS2的感觉,之后找一个不错的页面,将wordpress的模板改成与之相同的。最后一步则是按照自己所学到的Xhtml+CSS2的知识做一套wordpress的模板出来,经过这三步,我想你的Xhtml+CSS2算是真正入门了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用XAML做网页!!—框架
原文:用XAML做网页!!—框架     上一篇中我进行了一下效果展示和概述,此篇开始将重现我此次尝试的步骤,我想大家通过阅读这些步骤,可以了解到XAML网页排版的方法。   下面就开始编写XAML,首先来定义一下页面的属性:         WindowTitle就是页面标题。
619 0
60个高质量的CSS、XHTML网页布局模板下载
无论您下载和解剖预建模板是为了学习最新的CSS布局技术,或者下载的目的是为了易于编辑制作现成的独立网站,您都不应该仅限于免费且可用的一个拥有众多克隆版本、陈旧的且往往是枯燥的模板。网页设计的流行趋势和技术总是在千变万化,因此,您所挑选的模板选择应该是能够反映出这一点的。
545 0
用XAML做网页!!—框架
    本文转自斯克迪亚博客园博客,原文链接:http://www.cnblogs.com/SkyD/archive/2008/08/19/1271702.html,如需转载请自行联系原作者
944 0
网页瀑布流布局插件Masonry
CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局。所以比较合适用于文字多列布局。 调用JQuery WaterFall布局插件:http://masonry.
757 0
刷课(刷剧)神器!给网页视频加个速(最快可达16倍!)
刷一些没营养视频的时候, 我们会有倍速播放视频的需求, 而网站的在线播放器一般只提供不高于4倍的播放速度, 最近发现了一个很好用的, 可以将视频播放速度提高到16倍开源浏览器插件Video Speed Controller,分享给大家, github开源地址: https://github.
1830 0
HTML5 学习1.网页基本信息
HTML5 学习1.网页基本信息
0 0
HTML5 学习2.网页基本标签
HTML5 学习2.网页基本标签
0 0
HTML&CSS 1|学习笔记
快速学习HTML&CSS 1
0 0
+关注
springfe
曾就职于欧洲跨国企业、国内知名互联网公司、国内NADAQ上市企业,从事互联网研发和技术团队管理工作,相继担任过高级开发工程师、高级经理、架构师、研发总监、CTO等职务。对于系统架构设计、算法设计、自动化运维和技术管理有较高的实战经验。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
零基础CSS入门教程
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载