实践:用Div+CSS重构网页

  从接触WEB标准以来,一直在努力实践,近日官方网站的全面改造终于正式展开,由于网站管理系统的WYSWYG编辑器本身不支持WEB规范,也是没办法的事情,但是我还是决定在这次改版的过程要充分利用CSS,在可能的程度上尽量利用Div+CSS的优点,减少维护量和网页大小。

  第一批改造的是新闻中心和招生网,在重新制作的几个模版页面中,我们只用了少量的表格和内联代码,之所以没有完全采用Div+CSS,是因为经过WYSWYG编辑器的自动更改,多层嵌套的DIV代码会变得非常不易读,即使我们在制作时把代码写得非常的清晰,缩进和换行用得很好,也最终会得到一个结构混乱的HTML源代码。因此只能适当采用一定数量的表格,但是对表格也尽量采用CSS来控制了。而网页中的任何


这类的代码,则完全去掉了。

  改完以后,代码总量减少到原来的一半左右,而且网页中的表格都只在很小的范围内使用,尽量避免嵌套,使网页的速度得到了很大的提高,虽然没有实现对WEB规范的支持,但是采用DIV+CSS的效果还是非常明显的。

  今天我又重做网站首页,对网站首页,我就完全采用了DIV+CSS来进行网页布局,首页以前的表格更为混乱,嵌套很深,由于原来的代码量就不是很多,所以改完以后,代码减少也还不算太多,只为原来的一半左右。但是访问速度提升很多,而在规划好CSS以后,网页的布局部分真是轻松极了。

  我取了其中一部分代码来比较:

重构前的代码(全页大小共计38K):

[code]
1

2

3

4

5

6

二外新闻 新闻中心 | 院 报 | 广 播 台 | 电 视 台 | 媒体二外

6

5

4

3

2

1

[/code]

  说明:为了实现在760像素表格(1像素边框)左中右三栏划分(布局),然后对中栏进行上中下划分(布局),再对中栏进行左中右划分(边距),再对中栏进行左中右划分(内容),加上部分一像素边框和代码不够优化,一共出现了6层嵌套,而且多次编辑以后,还出现了嵌套错误(多出一层结束标记)

重构后的代码(全页大小共计17.8k):

[code]
1

1
[/code]

说明:
1首先用一个

作为容器,把左中右三栏都装在760像素居中的区域;
2利用浮动实现两个同级div左右分栏同时实现边框;
3利用浮动把右边的div再分成左右两栏同时实现边框;
4在中央的div中从上到下每行用一个div容器包括,在容器中利用浮动实现左右划分;

  在这个比较中,为了便于对比,去除了所有定义外观的属性代码,以及内联样式,包括div的id和class,仅仅从结构上可以看出,div比table在左右分栏和上下分栏上就节省了很多代码,而且最为关键的是,同样是嵌套,div的显示也会比table快。而如果加上定义外观的代码,那么table还要增加很多属性代码,而Div需要增加的就基本上只是id和class了。

具体的页面地址:http://www.bisu.edu.cn
(由于编辑器的原因,代码不符合XHTML标准,而且CMS系统输出的代码还含有单一表格,这是很无奈的事情)

2005年12月12日 | 归档于 所谓技术
标签: ,

people

It’s from Romenic’s blog, I really think it’s a wonderful idea. So many people, so many faces.

Some of them are my best friends, and some are strangers. Whenever seen these faces, it could call arouse my memory about my campus life…

2005年12月9日 | 归档于 乱七八糟
标签:

农行业务奇遇

上大学的时候,由于农行是我们学校的合作银行,必须用农行的帐户来作为自己的校园网帐户,可是农行的卡有很多不便,尤其是网上交易,异地转帐这些功能,比工行的开通起来要麻烦得多得多。

最早的时候,我以为综合理财卡是可以进行异地转帐交易的,所以除了校园卡以外,还单独办了一张农行的综合理财卡,后来才知道要申请网上银行证书才可以,而且去了两个营业厅都说他们办不了,只有几个指定营业厅可以办。 阅读全文…

2005年12月6日 | 归档于 乱七八糟
标签:

小技巧:给英文版Office2003“充电”

中文版的Office 2003里面,有一些亚洲语言专有选项,尤其是中文的特性,在英文版里就没有,不光是默认没有安装,而是软件里就完全没有那部分功能。

  比如中文简体繁体互换啊,中英文互译啊,中文的拼写检查和断字等等。

  在用英文版Office 2003的时候又想用这些针对中文的特殊功能,那怎么办呢?

  据说有Office的多国语言包,不过我在网上没找到2003版的,所以只好自己想办法了,最后让我找到了解决办法:

  1.如果不是中文操作系统,则操作系统必须已经安装了简体中文语言包(繁体装没装好象无所谓,反正我没装繁体语言包,只增加了繁体中文支持);

  2.正常安装Office 2003 英文版;

  3.运行Office 2003 简体中文版或者繁体中文版的安装程序,在安装向导中,选择和英文版完全一致的安装路径,选择自定义模式;

  4.在安装模块选择时,Word,Excell,Outlook….都选择“不安装”,进入具体选项中,在“Office 共享工具”中,先整体选择“不安装”,然后一个个展开子选项,把你需要的部分选中,比如“微软拼音输入法2003”或者“五笔输入法”,当然还有间繁体对换这些功能啦。

  5.安装完以后,你会发现,英文版的Office 2003没有受到任何影响,但是打开Word,在”tools”菜单下面,”language”项里,你会发现多出来的“Chinese translate”,随便输入几个汉字,选择这个菜单,你就会看到中文简繁体转换的提示了(当然是英文提示)。

  以上操作在WinXP Pro SP2 英文版 + Office 2003 英文企业版中成功。

2005年12月4日 | 归档于 所谓技术
标签:

Visual Studio 2005体验感受

Visual Studio .Net 2003一直没有好好试试,只是拿它做了个.NET的个人通讯录自己用,这次去微软发布会现场看到的演示,感觉Visual Studio 2005有很大的改进,因为我在现场的时候试用了一下WEB开发功能,感觉很不错,很多工作一行代码都不用写就能实现的。

  所以今天就装了Visual Studio 2005体验了一把。

  VS2005安装的时候集成了.NET FrameWork2.0, .NET Compact FrameWork 1.0SP3和2.0,Device Emulator 1.0, Document Explorer 2005, SQL SERVER 2005 Express Edition和Native Client等相关工具,比2003方便易用得多,而且安装过程也比2003快,还没有那么多重启,界面也很漂亮。

[align=center][/align]

  或许是因为英文版的关系,VS2005+MSDN+SQL Server 2005安装完以后比2003占用的空间小了很多,不过不知道是不是我的机器还是系统的问题,启动后,建立工程,修改配置等等操作都比2003慢。

  装完以后还没来得及更细致地探索VS2005,小小地试用了一下,用它建立了一个.NET 站点,写了个手机用的小程序,感觉很爽,最欣慰的是:

  1. VS 2005自带了WEB SERVER,所以无需IIS即可本机调试WEB站点,而且调试功能比IIS和VS.NET2003要强大得多得多;

  2. VS 2005建立的页面默认是XHTML 1.0 Transitional规范,符合WEB标准,HTML Editor也改善非常多,提供了50多种WEB 控件,非常方便。

  3. 利用VS2005的智能设备开发界面,很轻松就可以写出手机或者PDA的应用程序,而且本身集成了相关智能设备的模拟器,其中的 SmartPhone 2003模拟器长得好像多普达的界面,我正好用的是多普达智能手机,太高兴了:)

  4.Visual Studio .Net 2003的工程,我升级了两个到2005,都是全自动完成,而且Error 0, Warning 0,这下可以放心了。

  微软把Visual Studio .NET 2003中的“.NET”去掉,直接命名为Visual Studio 2005,可见他们对这套产品的信心,第一步体验的结果,也的确感觉非常不错。

  很多人应该还在等中文版,网上也有人利用SQL Server 2005 CTP中的语言包来制作出VS2005的简体中文版,其实感觉还是应该用英文版好,本身程序员多多少少都还是会点英语的吧,而且一款开发软件,其实真正用到的英语也很少而且很简单,软件本身又是多语言支持的,用英文版适应以后,肯定会比用中文版感觉舒服得多的。

  这个礼拜要给研究生处做一套WEB程序,很小但是很多特性都适合用XML和.NET来做,我决定用VS2005来开发,正好是个熟悉软件和练习的好机会:)

2005年12月3日 | 归档于 所谓技术

“撼动未来”——记微软北京“演唱会”

  今天北京变得奇冷,我早上起得不是太早,和朋友随便吃了早饭,打车前往奥体中心。微软的“撼动未来”新品发布会今天在这里举行。

  或许是因为天气的原因,奥体中心一派冷清,少许保安在综合馆外围走来走去,我们跟着微软的路牌广告,跑到了西北门的入口那里,很多人正在等着换票入场。

  我是提前一周拿到微软的请柬的,不过却在昨天的时候突然找不到了。微软在换票点旁边准备了另外一个台子,为登记注册过但是没有请柬的以及没有登记注册过的来宾提供另外的方式入场,我在那里把名片给服务的小姐,查询到我的登记信息后又给我补了一张门票。

  在门口检票的竟然是我们学校旅管专业的学生,她们看到我的名片时觉得很意外,我也一样。进到里面先和从南门进来的朋友回合,他告诉我南门外的也是我们学校的学生。

  门票除了进场,还有个作用,通过安检之后,立刻有服务人员收了门票,换来一个貌似双肩背的“Ready to Rock”黑包和两张反馈表一只铅笔。

  正式活动开始前,我们四周逛了一会儿,微软设置了一个 Hand's On Lab区,那里准备了装有最新SQL Server 2005和VS.NET 2005以及BizTalk 2006的不少计算机,来宾可以按照旁边的实验手册上的指导,现场体验新产品的特性和功能,旁边有专家答疑。

  除了微软的实验区,还有AMD提供的一个挺大的Game Zone,很多人在那里体验最新的射击游戏(貌似三角洲)、极品飞车、实况足球等,体验AMD64位处理器的实力,顺便打发等待的时间。

  Intel,AMD,HP都在外围设置了相应的展区,收集来宾的名片和调查表,派发纪念品。这些都和以往的博览会差不多,这次外围最出彩的当属AMD的Game Zone和微软的Hand's On Lab.我们进入馆内的时候,人还少,七个超大的投影上都在播放微软新产品的“全球客户证言”,画面很不错,摇滚音乐、电脑特效,真的很像一场演唱会。

  “演唱会”由国内一只过气的Rock乐队——唐朝拉开帷幕。唐朝那位主唱在第一首歌身穿仿八路军的衣服,声音都唱走调地喊完。在一群IT人稀稀落落的掌声中,唐朝只能尴尬了,不过我一开始的时候没有注意到唐朝的身边还有一位身穿牛仔的真正大人物——微软公司副总裁兼大中华区首席执行官 陈永正。

  陈先生从唐朝乐队引出他的话题,然后谈及中国的唐朝盛世,还提到了在唐朝时候出现了世界上最早的,最轻薄和功耗最低的计算机——算盘。陈先生“提纲挈领”地介绍了这次发布的三项新产品,还特别邀请从总部请来的SQL团队负责人大卫。坎贝尔给大家介绍MS SQL开发团队的经历。David讲的很有趣,介绍了微软MS SQL团队从30人发展到1000多人,从连微软内部都没几个人知道的小产品,做到创下许多世界纪录的企业级数据库解决方案——MS SQL Server 2005的过程中许多趣事,讲得很生动,很幽默,可惜的是被那位蹩脚的同声传译搞砸了他的精彩演讲,除了偶尔传来几声听懂了英文原文后的笑声以外,大家一直很安静很认真地听着。

  之后微软中国的员工分几组以情景剧的方式,精彩演绎了微软三套新产品在“Enterprise Ready”,“Decision Ready”,“Developer Ready”方面的新特性和优势。表演很不错,这种形式比传统的讲座和演讲其实是一个很大的改变,很好的改变。不过每个情景剧中间唐朝的撕心裂肺的呐喊真的好几次差点让我和朋友忍受不了。

  “Ready to Rock”的主活动结束以后,凭填好的反馈表,每位来宾都获得了一份包装精美的6张光盘,内含微软新产品标准版或者专业版的限时试用版,或者最新的beta版,此外还包括不少有用的Source Kit.另外还有一张价值500元的微软新版认证考试券,可以免费考一门考试。

  如果不是天气的原因和会议组织方面的一些客观原因,微软的这次活动或许会更加成功吧。从这次发布会上所看到的微软新的产品,的确很强大而且很有吸引力。

  我们开玩笑说:微软就算要倒闭,恐怕都得好几年才能倒闭完成……

2005年12月2日 | 归档于 乱七八糟
标签:

CSS学习之综合运用

  以前我也用CSS,不过只是很简单地用它来控制字体大小、链接样式,表格边框而已。要说页面布局和排版,我从来没想过用CSS,毕竟我用表格可以算得上是滚瓜烂熟了,表格+少许CSS,我已经能够实现所有需要的效果了。

   直到最近DIV+CSS布局的页面开始成为潮流,我看了一些网站,总体感觉还是不如表格的漂亮。可是当去除CSS以后,看看人家的内容仍然整整齐齐地显示在页面上,而且很少有多余的东西,再看看一个页面里去除了那许多的表格和字体代码后,结构清晰的源代码,我才真正理解很多书上讲的CSS的优点。

   买了一本《CSS权威指南》来看,顺便在正在改版的学校网站上“学以致用”,今天为止,不能说熟练掌握,不过总算是基本上掌握了CSS的使用。做了一个融合字体、背景、布局、定位等的例子,算是对自己这段时间学习的总结。

  这个标题部分,如果用表格,至少需要两行一共5个单元格。我用了下面的代码来实现:

<div class="redtitlebox" style="WIDTH: 300px">  
    <div class="redtitleleft"></div>
    <div class="redtitlemain">热门图文</div>
    <div class="redtitleright"></div>
    <div class="redtitlerightbody" style="WIDTH: 185px">专题:</div>
</div>

对应的CSS规则:

.redtitlebox {
  width:100%;
  position:static;
  border-bottom:2px solid #900;
  margin:0px;padding:0px; }
.redtitleleft {
  width:8px;
  background:url(skin/oldbisu/redtitlebg_left.gif) no-repeat;
  float:left;
  height:20px;
  line-height:20px;
  margin:0px;
  font-size:0px;
  color: #FFF;
}
.redtitleright {
  width:7px;
  background:url(skin/oldbisu/redtitlebg_right.gif) no-repeat;
  float:left;
  height:20px;
  line-height:20px;
  margin:0px;
  font-size:0px;
  color: #FFF;
}
.redtitlemain {
  width:100px;
  text-align:center;
  background:url(skin/oldbisu/redtitlebg_main.gif) repeat-x;
  float:left;
  height:20px;
  line-height:20px;
  margin:0px;
  font-weight: bold;
  color: #fff;
  font-size: 12px;
}
.redtitlerightbody {
  max-width:645px !important;
  float:right;
  height:20px;
  line-height:20px;
  background:url(skin/oldbisu/titlebg.gif) repeat-x;
  margin-bottom:0px;
  color: #666;
  font-size: 12px;
   text-align:right;
 }

   如果只是为了实现一个效果,似乎这个过程比用表格来实现还复杂了,但是考虑到这个效果将被运用在几千个网页里,就会觉得非常划算了。CSS毕竟只需要下载一次,而且这里还有我本身的问题,写CSS的经验还不够丰富,所以上面的样式规则肯定难免有一些冗余的地方。

   总之,用CSS做网页的感觉,真的是很不错的……

2005年11月29日 | 归档于 所谓技术
标签: ,

被切断通讯的感觉

  下午下了班,急着回家,因为已经月末了,一直还没空去交电话费。赶紧回家上网交了去。

  回家把本子插好,开机的时候,突然看见电话的屏幕上有行奇怪的字,没看明白是什么。拿起电话听了一下,怪哦,什么声音都没有……

  我那个电话是比较破的,朋友送的。平时通话质量就不太好。我想都没想就断定是电话出问题了,把线都重新插了一下,再试……还不行。

  半个小时后,利用修电脑常用的“替换法”,我已经把电话线、电话机、分线盒……每个部件的出问题可能性都排除了。颓废地想:算了,还是上先上网吧,给网通公司发个Email问问……

  然后发现:网也上不了……

  不能打电话、不能接电话、不能上网……天哪,这是什么世界啊?

  对着电脑无奈了,最后只好拿手机给网通打电话——这让我发现了中国的通讯运营商的又一个狠招:当你的固定电话无恙的时候,你可以拨打免费的网通或者电信的服务电话;当你的手机无恙的时候,你可以拨打免费的移动或者联通的电话;可是当你的手机出问题(比如我前两天充值后很长时间不能开机),你就只能用固定电话打收费的移动服务号码;而当你的座机出问题的时候,你又只能用手机打收费的固定电话服务号!而且这时候你会发现世界上最难打的电话号码是什么。

  网通说:我们马上帮您查一下问题,很快会和您联系的……

  网通的很快一直持续到第二天下午我写这个日志的时候,中间我还给网通又打过一个电话,回答如上。

  被切断通讯的时间里,我玩单机游戏,写CSS,写文章……

  总会突然想起来今天应该给某地的某某同志发的Email还没发;或者答应帮某网站的某某同志弄的东西还没给对方,然后就会下意识地开QQ;然后下意识地想打电话告诉对方我上不了网……

  这种折磨持续了没有太久就消失了,我最终因为不堪忍受,抱着一本纸质教程睡着了……

2005年11月27日 | 归档于 点滴珍藏
标签: