学习用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算是真正入门了。

目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
48 1
|
1天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
8 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
12天前
|
资源调度 前端开发 搜索推荐
使用Tailwind CSS构建响应式布局
【10月更文挑战第1天】使用Tailwind CSS构建响应式布局
|
26天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
46 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
1月前
|
前端开发
|
26天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
1月前
|
Web App开发 移动开发 自然语言处理
|
前端开发
网页标准化:CSS代码缩写精简实例
一些CSS属性允许使用一串值代替许多属性,值使用空格分开。   margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
810 0