简洁的想法

 找回密码
 注册
搜索
查看: 2152|回复: 3

关于网站重构的一些感受和总结

[复制链接]
发表于 2005-11-20 22:37:54 | 显示全部楼层 |阅读模式
转自:让我在天空翱翔


终于现在有时间来写东西了!昨天申请了一个SPACES,不过那也是因为同学的一些原因。不过既然申请了,也得好好做,只要和这个BLOG的内容不冲突就好了!

现在来说说正题,关于网站重构的一些感受和总结!(小弟是菜鸟,有错误之处还请高手指教)

名词解释:

标准:由W3C提出来的建站“规则”。

XHTML:现在的标准语言。

CSS:由W3C制定的网站标签的属性制定方式,用来控制显示效果。它可以和页面内容分离,可以被多页面重用,改变CSS文件一个就可以改变多个页面,实现模版化。标准的组成部分。

DIV:标准里用来布局所用的标签,用来装内容的容器,不过很难控制。

TABLE:标准里用来显示数据表的标签。

重构:用标准来把网站重新编排。

最早接触到这个的时候,我也已经算是很晚了,大概今年八月的时候才接触到。不过国内这个话题红的时间也没多久。但是国外很早就开始了,而且国外有不少大的网站都重构过了。看来我们都已经落后啦!

不过无论从什么时候开始都不算晚的,毕竟标准也不会说就只存在那么一两天。国内最早的是个人网站开始的,当然BLOG等本来就是标准的,现在也已经有很多大网站开始重构了。比如说:天极,163等的一些频道,当然也包括我们的YU163。关于标准的解释,我也套用论坛里的话,就是DIV+CSS。其实做网站的很早就开始用CSS了,只是没有标准建站里用得那么狠。标准里已经完全用CSS替代了以前的那些属性设置。其实最大的争议不应该是CSS,而是DIV的问题。因为长久以来,我们的网站设计师们,全都用的是TABLE,而且这是大家自觉的选择。DIV标签很早就有了,也是专门用来布局的,可是没有人愿意去用,大家都觉得DIV实在太难控制了,没办法达到设计师所想要的效果。论坛里有个人说得很对,TABLE是平面的,DIV却是三维的。所以DIV 要难控制的多,不过个人觉得它的表现力要强的多。TABLE本来是设计用来展现数据内容的,但却被人们用来当布局工具。其实我也很喜欢TABLE,不过用它写的代码,实在是太多了,看得我头痛。

论坛里骂标准的人很多,拥护它的也很多,但是个人还是很喜欢它。其实最开始接触的时候我也有些抵触,觉得不可理解。很多人还说它只是少数外国人在那自己定立的东西,现在却把这个私有的想法强行灌输给我们。

标准有很多优势,比如说可以让你的网站被手机等小型移动设备浏览,可以让盲人比较好的浏览,不过这些好象并不是大多数人所考虑的,至少最近几年不可能的!不过它现在的优势,你看看BLOG就知道了,你可以瞬间改变你的样式,这样即使你的网站后台是别人的,但是你的内容和样式却可以完全是自己的,同时模版的应用也开始广泛起来了!而且重构过网站可是速度很快的!当一个网站内容特别多的时候就更加显示出它的优势了。我想一般没有人会为一个页面等上10秒吧!除非他非看那网页不可。一般统计来说,让人等上5秒的网站访问量就会受到影响。说到速度就不得不说说firefox这个浏览器了!

我想使用它的人也越来越多了,加上它丰富的插件,已经使很多人抛弃了IE。我也一直在用,不过因为某些网站只为IE而定制(国内这种情况极为严重),我也不得不还在用IE。firefox浏览网站非常快,最初大家也冲着这个下来用的!现在它的成功无庸质疑,它直接导致IE7的出现,我想这也足够证明了。我在这不是想讲firefox有多厉害,而是因为它的内核是按标准件的,所以对标准的支持也非常好!所以现在也有很多设计师把它作为布局调试的工具了。

以前在网上见过一个人骂firefox,说他“标准”页面没有办法在firefox上好好浏览。但是我想说,那只是他误会了,他以为代码通过标准的检查就一定能做到跨浏览器了,太天真了,可能他对浏览器对标准支持程度都不知道,也不会知道各浏览器解析时的差异。IE对标准支持并不是很好,所以我们按IE做的东西也会有问题。

其实标准对浏览器也非常重要,IE不支持也是很无奈,因为IE出来的时候还没有标准,等标准出来后,IE的程序员们不可能放着已经有的代码不用,重来的工作量实在是太大了!所以也就修修补补到了7。不过MS是支持标准的,所以今后IE的发展依旧是最终达到完全对标准的支持。不过在在世界上,IE已经成为默认的一个标准,不过它却很臃肿。细心的人都会发现,我们很多错误的代码IE都能很好的执行,为什么呢?就因为它太臃肿了,因为现在计算机的智能化还基本上是运算速度+数据库。但是对于像手机、PDA这样的终端,不可能放那么“高级”的浏览器。

现在我们的网站是向着XML发展。学过的人都知道,它是非常严格的,现在的XHTML只是个过度。不过也大量改变着我们编网站的思考方法了!XHTML已经基本实现显示与内容分离,现在的ASP.NET也是把程序和显示分离。我想这已经是WEB编程的发展方向了,而且是不可逆转的。

以前做网站的时候我们都会考虑想前兼容,很多书上都这样教我们,最明显的就是那些JAVASCRIPT的书!但是现在标准提倡的是另一种兼容——向后。以后我们的浏览器版本将更高,也可能会出现更多的浏览器,如果我们是用标准做的,那就不用担心新的出来后,会出现无法浏览的情况了!就算是老浏览器,也能比较好的浏览到信息,虽然可能无法看到美丽的界面。

标准还有个好处,那就是跨浏览器,现在编程都提倡跨平台,JAVA的风靡,也正代表了将来的发展趋势,连MS这样的巨头霸主也不是妥协了吗?搞个.NET用来跨平台,虽然还不知道今后到底能像JAVA一样做到不。以后我们的网站也不用多个版本了,一个就够,节约钱呀!!

讲了那么多,现在也该来讲点代码了。

首先从居中讲起吧!最开始的时候我真为这事头痛过,因为在IE下只要设置body{ text-align: center; } 就好了,不过这对firefox可没作用,firefox里只是文字居中。你得在需要居中的<div class="h">这样设置:
  1. .h {
  2.    margin: 0 auto; /* 非常重要 (完整的写法是:0 auto 0 auto)*/
  3.    padding: 0;
  4.    width: 760px;
  5. }
复制代码

很多时候margin和padding是一起使用的,不过当你确定宽度,有同时要填充的时候,或者border不为0,就的注意了!因为盒状模型的原因,有时候你的DIV占的宽度会比你想的要多!为了减少计算,也使布局更容易,一般都是使用两个DIV的方法来解决,第一个确定宽度,第二个确定border和padding,个人觉得这样很有效!如有更好的方法,也请大家指教。

对于文字以前好象都不会统一设置,一般都是在TABLE的某个部分单独设置,现在对于a,h1,p这样的标签一般都是总体先确定一个使用量最大的,特别对于文字量大的网页,如果需要在用<a class="">或者.class a {}这样的方法(用class的地方都可以改为使用id,只是我喜欢用class,像上边两个DIV当一个用的时候,一般都是用相同的名字,一个id一个class)。个人觉得这样布局网站的时候,很多时候是站在全局的去考虑所有元素。

以前好象使用<h1>和<ul><li>这样标签的机会不多!现在因为CSS的原因已经可以使<h1>发挥自己应有的作用了,以前导航我想没有多少用<li>吧!但是现在使用它已经很方便了,对于让列表横项摆放的问题,我也是看很一些别人的网站才知道的!后来发现用到float这个属性的地方还真多,而且网站的多栏一般都是用它实现的!
  1. li {
  2.    margin: 0;
  3.    text-align: center;
  4.    width: 100px;
  5.    height: 29px;
  6.    float: left;
  7.    list-style: none;
  8. }
复制代码

对于导航的时候一些特效,个人觉得用a:hover能解决的问题绝对不使用javascript。不过使用这个的时候最好要使用a { display: block; };这个属性。当使用图片最背景转换的时候最好用下面的格式:
  1. a:hover {
  2.     background:#E6E6E6 url(/blog/images/menu_bg_h.gif);
  3. }
复制代码

在用IE测试的时候要是用background-image会不起作用,我用的是IE6,不知道别的版本是不是也有这问题,不过firefox就不会有这样的问题!我还见别人把两个不同的按钮做成一张图,改变背景是用背景图的不同位置实现的,如果你不想要链接文字,可以-9999px缩进文字。

  1. body#home li#home,
  2. body#articles li#articles
  3. {
  4.    background-image: url(/blog/images/menu_bg_at.gif);
  5.    background-repeat: no-repeat;
  6. }
复制代码

上边的代码是做导航特效的一个好方法!只要<body id="">不同所在栏目导航按钮背景图也会同别的不同。

个人觉得每个链接和图片都不要少了说明。说到链接,有个让很多人郁闷的地方,那就是target不能再设置_blank,因为这样是不符合标准的,我始终想不同这是为什么,但我要我来做网站,肯定才不管,只要浏览器是支持的,该用的时候我还是会用的!对于文字我没有什么好说的地方,唯一想说的就是line-height,可以通过设置它使文字垂直方向居中。

  1. <div class="clear">
  2. .clear {
  3.    clear: both;
  4.    border: 0;
  5.    height: 0;
  6.    visibility: hidden;
  7. }
复制代码

上边的代码,我第一次看到的时候,发现很莫名其妙,不过后来发现它真的很有用。当你发现一个确定高的块超出圈它的块的时候,它就派上用场了,而且很多用到float的地方也会用到这样一个块。有时候它也可以用来增加空白的,但是高度小于15px的时候,IE给出的DIV所占空间会和15px(我没有仔细研究过,不过在排版的时候碰到过这样的问题,在15px时firefox和IE的空白好象就一样高了)一样!以前看《网站重构》的时候我也看到上面提到关于IE空白的BUG,不知道是不是指的这个,不过我没有仔细看过那本书,当时是在学校阅览室借的,只能借两天,当时就只主要看了下“指导思想”。

还有个人觉得有个写代码的好习惯也很重要,既便于自己修改,又便于别人看懂。而且不光是CSS页面也一样。在网上见过一个人介绍别人如何写出三栏的版面如何首先显示中间那行,世上真是NB的很很多呀!

最近手头也不是很宽余,要不然我就去买了那本书,现在已经决定不搞网站动态编程了,现在空出很多时间可以用来看看这些书了!小弟我也刚学做不久,碰到的问题也少(其实还没有正经做过一个象样的网站),用过的浏览器也少,看的代码也少,所以还望高手指教。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|小黑屋|Archiver|简洁的想法

GMT+1, 2022-1-28 02:49

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表