重构之美-迎接Web标准化设计的来临[总结一:网页设计回归?]

简介:

说明:这篇文章发表于2004年12月8日,我blog上这两篇之间,还有3篇文章,主要是实例代码讲解三天内学习Web标准的过程。如今看来,当初确实属于初学阶段,尽管技术学习进度很快,但是思想没上去,只是做到了形似而神不是,对Web标准可以说完全没理解。所以,在那个阶段写下的代码我现在就不转过来了,以免误导人。想看的可以到原贴查看。

下面这一篇是当时写的最后一篇,现在看来,虽然深度远不够,但至少谈及之处没有什么大错,所阐述的观点和所下结论现在也相对认可,所以转过来存档。

希望自己能续写下《重构之美》。


总结一: 网页设计回归?

1、关于对验证的认识。
2、关于对web标准的重新认识。
3、关于速度和效率的问题。

  很久没动笔了,太忙了,:)
   我已经有两三个月没有想当初那样很认真用标准设计网页了,最后一次是9月18日做经典的样式表大赛。所以如果从单纯的技术上而言,我早就落伍了,许许多 多的兼容技巧我都不清楚。其实从一开始就是这样^_^。但是,并非我离开标准了,应该说标准现在已经像血液一样溶入我身体,贯穿在我整个开发流程中,我已 经非常习惯这种曾经对我来说崭新的思维方式了。前面的留言我说了,我现在已经不期待下一版本的DW了,事实上从8月3日起,我几乎就没开过DW了,现在更 是看着DW竟感到陌生,于是就想起一首歌:我们变成了世界上最熟悉的陌生人,今后各自曲折,各自悲哀吧!TOT
  回过头,看看上次遗留的问题,先解决了。
1、关于对验证的认识。
  当时做完后我曾非常不屑意验证,因为从最终效果来讲,页面是完美的,引用上次遗留的一句话:
引用:

……但是抛开效验,这可是按照标准思路将表现与内容分离了的,而且通过调试完全兼容各浏览器,认证有必要吗?……


  你认为呢?认证有必要吗?
   在我非常不情愿的情况下,我开始修改这255个错误,对的,我还记得当时我满怀信心的提交给W3后,瞪大了双眼盯着那255个错误。由于错误低级,认证 给我指出的90%以上的错误都是重复ID。所以页面几乎被我重新制作了一次。当我咬着牙,那两天压住心中的怒火,一个一个倒着数似的把错误改完后,我慢慢 才发现认证是有用的,他帮助你规范代码,否则若像我最初那样,真的是金玉其外,败絮其内,绣花枕头一包草。但是,我们不能夸大认证的作用,并不是通不过就 不好,而通过就好得不得了,不能以为只要通过了认证就万事大吉了。我们仍然应该把重点放在UE,UI,前后台的架构结构上,只要你思路到位,认证与否真的 不重要。再说认证是死的,举一个非常简单的例子,比如在某个地方从文档而言,应该使用<ol>,但是你使用的是<ul>,认证会 告诉你错了吗?所以作为初学者,应该把认证当成一种工具,而不是神。在这点上面,当时的理解和现在没多大区别。

2、对于WEB标准的重新认识。
  回头看看我第一篇中曾经写过的一些认识,呵呵,我在笑。来,温故而知新,我重新把它列出来:

引用:

1、节约带宽。
这个算什么优势?让我想起了曾经使用压缩网页代码工具、曾经为一个JPG的图片1%的调整压缩比以获得最佳效果最小大小的时代,随着互联网的高速发展, 这些都成为了过去时,它们对网站速度的影响越来越小,小到可以忽略。没人再用压缩代码工具了吧,曾经为在压缩比为54%、55%之间都要比较半天的我现在 基本上通通设定为80%,唯一保留的是还在JPG和GIF中保持选择,那也更多的是为了质量,而非大小。


   现在怎么看呢?还是比较矛盾,对于静态页面而言,确实能很节约,然而普遍的静态网站能有多少流量?浏量非常高的网站又有几个是纯静态网站的?即便是,也 是程序生成的。那么对于动态页面而言就感觉不如静态那么明显了,很多开发控件生成代码都带来烦杂的代码。比如,如果有同时研究.net和标准的朋友,应该 知道这几个频繁使用的控件:DATAGRID,DATALIST,REPEATER。我一直都是使用REPEATER,因为它最灵活,性能也最好,但是某 天我想在线编辑数据时使用了一下DATALIST,曾经以为它会是一个很好的结合,结果发现使用它后生成了大量无用的代码,DATALIST都如此, DATAGRID呢?应该更糟,DATAVIEW要来了,功能更强大,想必垃圾代码也就更多了。所以,对于节约带宽我还是表示怀疑,我觉得在大的方面,代 码的精简度取决于设计开发者而非技术。真的能节约吗?真的吗?网上关于REPEATER的使用介绍是如此的少,DATAGRID是如此的丰富。垃圾代码想 必也非一般的巨大。你给我一个选择……

引用:

2、完全兼容各种浏览器(实践过程中发现,其实也不是,相信还没表格兼容性好)。
在IE统率98%以上的江山下,它就是标准,不要说国外有很多人用其他浏览器,那也是相对于中国而言,我相信国外还有更多更多更多的人用IE。其实浏览 器的兼容性很早就在谈,但IE实在太普及了,现在翻出来重提感觉意义也不大。你相信IE会垮掉吗?你相信短期内LINUX会普及到桌面吗,还要超过 WINDOWS。所以,翻旧帐而已,算什么优势?


  完全保持以前的看法不变,即便现在据说FIREFOX占有率在增加。(其实我个人觉得FIREFOX还不如MOZILLA呢)。好处仅仅是灵活调整而已,但是若作为优势,吸引力太小。

引用:

3、盲人阅读器。
我靠,我都要笑出声了。走开走开。(别骂我歧视哈,我说事实而已)


  让骂声来得更猛烈一些吧。

引用:

4、方便的改版。
是吗?我怀疑,而后实际上也是不可能的。我们来看看,首先说明,标准的定义是抛弃表格布局。
第一种改版方式:版式不变,变色彩。
这种情况下,DIV比表格有优势吗?我是说布局上。我很早就开始都使用CSS来控制所有色彩,当然包括表格背景,用表格布局的网站我同样可以只改动样式 表。(后来的实践证明,这种情况下表格还有优势,因为他的样式表很简单,而DIV的样式表很复杂,尤其是在对整个网站而非单个页面。如果一个大网站全部标 准化,他的样式表将数倍甚至十几倍于用表格布局的样式表。你认为谁快谁慢???)
第二种情况:包括结构在内全变。
这种情况下,做 为表格布局的网站需要按照新的设计稿重新画表格进行设计。难道标准化的网站就可以只修改样式表吗?(当时我表示怀疑,而后的实践证实了,不可能的,DIV 的设计是有针对性的,结构变,DIV、UL、LI、SPAN、P等等全部都要跟着变,样式表得全新设计,那和修改就不一样了。我相信那个一个页面,百多样 式表的模范代表,里面不会有2个结构完全相同只是数据不同的样式表。那样的话就回到了第一种改版方式。)
另外还有一点,关于图片的问题,不管那种方式都是不可能改变图片的色彩和大小,所以一旦改版,所有的图片几乎都要变,改动越大变得越多。
除非网站只使用色块,不用图片、FLASH等或很有改版针对性的少量使用,那么方便的改版……梦想吧。(PNG的透明模式是个不错的东西,不过他也只解决了色彩的问题,而且IE哪年哪月支持还遥不可及。)


   这个是在认识中以前和现在变化最大的,现在几乎将以前彻底否定了。这是典型的思维变化后的结果。我记得有个人曾经在留了言给我指出了的,当时不是很留 意。后来才慢慢意识到这个是和以前设计流程的一个巨大转变,并且是这系列文章中的一个巨大错误,思路的错误,我纠正过来,如果曾经被我误导过的朋友不要怪 我哈。我回头找找他,引过来。真不好意思,找不到了,大概他是这么说的:楼主,我发现你是做好页面然后一块一块的还原,而我更习惯于先写出XHTML,再 加样式。他说得很委婉并没有直接的指出我的错误,而我看了后也觉得有些道理,但也不知道具体道理在哪里就没太在意。现在我知道,这句话是精髓。回想我们一 直以来设计网页的流程是怎样的?一个设计稿,然后还原或者对于熟练的高手就直接构思画表格布局,需要装饰的地方再按大小去设计图片插入。所以我在前面的文 章中一再的提及“还原”两个字,对XHTML标记的选择都是根据页面而来,目的是为了还原设计。这是一个错误!我把我现在的理解归纳一下。

  在WEB标准里,我觉得我们应该这么做:
1、整体规划,设计稿先出来比较好,来不及设计也行,但是页面的规划一定得出来。
2、根据规划完成XHTML文档,组织好文档结构,设计纯文档。这里我要提醒,纯文档同样具有UE,它只是没有了UI而已,所以需要仔细推敲标记的选用并确定下最简洁的XHTML文档。
3、设计设计稿(UI),这一步可以和2同时进行。
4、根据设计稿为XHTML文档添加样式进行还原,通过样式表的设计技巧尽可能的不修改XHTML,如果UI实在是复杂,则可以在不影响XHTML文档结构的情况下加入一些额外的标记或者进行一些嵌套。
  这就是我理解过后一直以来的设计流程,注意我说的是设计流程而非制作流程,我斗胆的说一句,这才是真正的网页设计。那么请问DW在这个流程中可以进入哪一步?^_^所以……。
  延着在这个思路下,你想想,设计稿可以变,但是XHTML文档几乎是固定的,那么改版容易吗?当然容易,我们可以像WINAMP 5那样的换肤。

引用:

5、支持手机、PDA等无线设备的访问,并兼容未来的新设备。
这个是唯一一个让我觉得有价值的地方。但是……后面谈。


  当时对这一点我就表示过迷茫,现在依然如此,毕竟我还未接触到移动开发,不过我想在移动开发上,XML不会给予XHTML位子的,这个优势就和兼容浏览器一样了,只是增加灵活度而已,吸引力更小。

引用:

6、在设计上绝对优于表格的控制。
这个是在后来的实践中我发现的,也是最终将我吸引到标准化设计中来的最重要的因素。表格我用了近五年,可谓炉火纯青了,而DIV让我知道了原来页面上每 个象素都是可以在掌握之中的,那种精确是表格代替不了的,一句话概括一下吧:基于表格的设计思路是二维的,是平面的,而基于DIV的设计思路是三维的,是 立体的,真的是天马行空,随心所欲!其实我最初在DW3的时候用过半年的层,原因简单,它是三维的,而且可以拖动,但是很快我发现层糟糕的定位让我根本无 法控制它,当时不知道是离开了样式表的原因,唉,如果当时,2000年哦,我研究进去,发掘出CSS的话,啊哈哈哈哈哈哈……


  保持不变,体会更深,纯代码设计的自由是任何即所见即所得工具无法比拟的,即便DW做的是如此的棒,但是在WEB标准下,他仍然显得那么无力。

3、关于速度和效率的问题。
   很多人都在想这个问题,被这个问题所困扰。cloudchen曾经回复过我这么一句话:网页就象快餐,在这种东西上面浪费时间不值。我深以为是,速度是 非常重要的。但是我要说的是,如果使用标准,对于网站来说,开发速度会比使用表格快N倍。从单个页面来开,使用标准再熟练再快我承认都快不过表格,说不定 差距还会很大。但是对于网站来说就不一样了,随着网站规模的扩大,差距会缩小,到某个临界点时,两者会持平,而后使用WEB标准的网站在开发速度和效率上 会将表格远远抛在后面。所以对于小网站,小应用来说,使用标准在速度上是完全没有优势甚至会有明显劣势,但是对于一个大网站,尤其是非一次性开发而是持续 性不断开发的网站来说,呵呵,不用我说了吧。我使用表格5年,我的表格设计速度可以说已经练到极为准确和快速了,几乎无法再大幅度提升了,而我使用标准才 2、3个月,我有这样的体会,你做何选择?
  今天写得太多了,我还没有说关于标准和后台结合,这是我体会标准另外一个巨大的优势,下次再详细说,我想再经过一段时间,我可能会说得更为准确些。
  好了,回头看看文章标题:重构之美。我没有取错标题,网页设计回归!

爆牙齿 2004 12 08
============
写下日期才发现,今天是一个特殊的日子
爱一个人可以爱多久?
今天我的回答是四年

尽管两年半以前她就离开我了


本文转自爆牙齿博客园博客,原文链接:http://yuntian.cnblogs.com/articles/316550.html,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
54 1
|
3月前
|
前端开发
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
网页设计04 WEB端按钮设计技巧,交互规范参考资料,点击事件,什么是3:1 ,3:1 的介绍,网页设计牵扯的知识整理成口诀
|
移动开发 前端开发 JavaScript
Web实训项目--网页设计(附源码)
Web实训项目--网页设计(附源码)
245 0
|
监控 安全 测试技术
用 Python 撸一个 Web 服务器-第7章:重构——更好的组织代码
用 Python 撸一个 Web 服务器-第7章:重构——更好的组织代码
|
开发框架 JavaScript 前端开发
ASP在线考试系统网站网页设计web课程毕业设计
ASP在线考试系统网站网页设计web课程毕业设计
165 0
|
前端开发 JavaScript
网站介绍web前端 html+css+javascript网页设计
网站介绍web前端 html+css+javascript网页设计
194 0
|
前端开发
web前端网页设计期末课程大作业:企业网页主题网站设计——舞蹈培训11页HTML+CSS+JavaScript
公司官网网站 、企业官网、酒店官网、等网站的设计与制作
106 0
|
Web App开发 JavaScript 前端开发
【译】2019年,如何设计Web页面
【译】2019年,如何设计Web页面
133 0
【译】2019年,如何设计Web页面
|
存储 前端开发 Java
一文概览设计Web API 中的细节
一文概览设计Web API 中的细节
181 0