• 学习用Xhtml+CSS2构建网页


    第一篇:喜新厌旧,逐步习惯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算是真正入门了。

  • 相关阅读:
    Linux内核文档:包含 kernel-doc 注释
    Linux内核文档:如何写符合 kernel-doc 规范的注释
    [记录点滴] 使用工具和命令对redis数据进行备份恢复
    聊聊CMDB的前世今生
    我是如何走上运维岗位的?谈谈新人入职运维发展的注意事项
    如何从生命周期的视角看待应用运维体系建设?
    标准化体系建设(下):如何建立基础架构标准化及服务化体系?
    标准化体系建设(上):如何建立应用标准化体系和模型?
    微服务架构时代,运维体系建设为什么要以“应用”为核心?
    lsattr命令
  • 原文地址:https://www.cnblogs.com/Spring/p/288972.html
Copyright © 2020-2023  润新知