-
新版网站成长历程
最近我在做森海塞尔中国网站的改版，改版的目标是采用森海塞尔全球网站的新风格，并整理网站结构和内容。全球站采用的CMS大概是来自IBM Lotus的，加上Windows Server、MS SQL Server，身价应该在一万欧以上。作为一个挑战，我打算用免费的开源解决方案来办这件事。 我打算用LAMP环境下的Joomla! 开源CMS系统来做这个项目。 这个是目标效果:) 这次森海塞尔全球站做的要比上一版规范的多，虽然还不是XHTML，但是CSS+DIV已经取代了<table>，这样就很好办了。我直接把CSS拿过来，稍加调整，就已经有了点样子。补充一下，Joomla!自带的menu模块的可定制度非常高，顶部和左边的导航就是用menu模块和CSS完成的。 渐入佳境了。产品分类是利用Joomla!的Extend Menu模块做的。 已经马马虎虎可以糊弄人了:) 更新：升级完成，新旧对比：
-
论坛上图片的自动等比缩小
现在一张照片真的可以要多大有多大。特别感谢各DC制造厂家。 参考HTML Image Auto Resize, HTML图片大小自动调整 对于我的情况，帖子的css class是content，所以如下写即可： .content img { max-height:600px; max-width:600px; width:expression( (this.width > 600 && this.width > this.height) ? ‘600px’: this.width+’px’); height:expression( (this.height > 600 && this.height > this.width) ? ‘600px’: this.height+’px’); } 其中max-height/max-weight是标准css元素，可以被遵循标准的各个浏览器支持，IE7也可以。expression是IE6的私家菜:)
-
问候同被IE家族折腾的人们
这几天看内森被IE8折腾的不善，在此深表慰问。 其实，我也被IE家族折腾了很多年了。作为一个网虫，我可以一直使用FireFox浏览器，但是作为一个webmaster，我却绝对不能撇开IE不管，因为现实就是这样，我这有90%的网站访客使用IE。有选择么，没有。 技术层面上没什么好说的，在IE一统江湖的年代，IE就是事实标准，而W3C跟WC也差不多少了。这其实和其他行业（例如电信、广电）的垄断是一个道理：举个例子，如果IE说float: left是靠右边对齐，那所有写了float: left的图文就都会显示在窗口右边，而不管设计者的初衷是什么，也不管left这个词的含义是什么了。你可以站出来说IE你错了，但是所有IE用户会说你网页写错了。你只好昧着良心写float: right来使你的网页在IE上看起来是float: left的。于是你的网站被IE“支持”了。 好在现在很多人用上了FireFox、Opera、Safari这些捍卫W3C标准的浏览器，M$终于也（被迫）开始向W3C靠拢了。于是webmaster们再一次被IE折腾，因为IE一点一点的向标准靠拢，也就是说新版IE和原来IE是不一样的。于是你昧着良心写的float: right居然在新版IE上靠右对齐了！你哭笑不得。 好在M$自己也有网站，为了让自己网站在IE6/7/8上看起来一样，M$是如此做的： 以下片段来自http://www.microsoft.com/ <style type=”text/css”> @import url(‘http://i2.microsoft.com/shared/core/1/css/core.css’); </style> <!–[if lt IE 7]> <style type=”text/css”> @import url(‘http://i2.microsoft.com/shared/core/1/css/ie6.css’); </style> <![endif]–> 就是说，如果版本<IE 7，则装入ie6.css。看得出，M$主站是为IE7设计了，兼容IE <7。 上面的<!–[if lt IE 7]>html仅仅会被IE家族识别，而被其他浏览器忽略。这样，webmaster就可以把单独写给IE甚至是IE某个版本的css有选择的装上去了。当然，希望有一天，webmaster们不再需要这样的小技巧。 参考链接： How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)
-
解剖Joomla! 1.5的模板架构
Joomla! （注意全名包括这个“!”）1.5总算出来了，目前更是更新到了1.5.2。难拒其诱惑，我打算用Joomla!做网站了。下面说说Joomla! 1.5的模板吧。 如图，beez是随1.5发行包而来的一套功能展示布景，虽然不是很花哨，但是大大小小的模板功能基本都用到了。值得解剖一番。先看看几个必要文件和文件夹： templateDetails.xml 这个是模板的编目文件，类似windows软件中setup.ini这样的角色。 index.html 名字很正经，但没什么用，只是为了避免文件夹索引被显示出来而已。 index.php 模板文件的入口，主要的布局和布局逻辑都在这里。 params.ini 模板参数文件。简单的模板是不需要这个的，但是如果你想设计一个同时适应1280和1440的模板，可能就需要使用参数了。 template_thumbnail.png 这个是模板的预览图，一般都不大，200×150左右，用于在模板管理界面上看到模板的预览。 favicon.ico 网站的图标。如有此文件，Joomla!会自动在模板中显示出来。 html文件夹用来存放override页面，就是用来取代系统模组缺省模板的。例如：/templates/beez/html/mod_search/default.php 将取代 /modules/mod_search/tmpl/default.php。 下面标注一下最重要的templateDetails.xml和index.php文件。首先是templateDetails.xml文件： <?xml version=”1.0″ encoding=”utf-8″?> <!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN” “http://dev.joomla.org/xml/1.5/template-install.dtd”> <install version=”1.5″ type=”template”> <!– 下面这些模板信息，套用过来填写你自己的就可以了 –> <name>beez</name> <creationDate>19 February 2007</creationDate> <author>Angie Radtke/Robert Deutz</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://www.run-digital.com</authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.0</version> <description>Accessible template for Joomla 1.5</description> <!–…
-
唉，IE6居然不支持PNG……
新论坛在IE6下有点惨不忍睹了： 还是用FF2看的舒服些： 看来IE6不支持PNG的8bit alpha通道，唉。我没有IE7，谁知道IE7支持么？ 来测试一下效果～
-
免费的正版之路 III
这回咱要说的都是干活用的好东东了，而且同样都是免费使用的:-) 首先是重量级的Aptana WEB IDE，也就是用来写javascript的。随着AJAX应用越来越多，js开发已经不再是copy&paste那么简单了。我其实没用过其它的WEB IDE，所以不好多说了。另外一个好消息，Aptana通过插件的方式把RadRails搬了过来，做ruby on rails也没问题了，而且沾了Aptana的光，Radrails也好用了许多。看图吧： 另一个好东东是用来做HTML的，叫做Nvu（读n-view），也不错，功能也不比Dreamweaver差多少吧？ 剩下2个小软件，用于ftp和sftp的WinSCP，以及用于SSH的Putty，就不贴图了，界面简洁，功能够用。
-
习惯的力量：table VS div
记得我当初学习制作网页时，刚刚学会了用table，相当的有成就感，貌似已经没有我做不出来的页面布局了。后来，饭碗被fireworks这类页面“切割”软件给抢了，fireworks切一张设计图，也就几分钟的事。于是之后再说做网页，无非是用fireworks切方块了。 最近这几年，由于工作的原因，我的时间基本上都放在linux、mysql和ruby on rails上了，用进废退，“Web design”技能我差不多都还给教材了。这几天晚上没事给这小博改版，才发现世道已经变了，HTML被XHTML取代，CSS被CSS2取代，更要命的是布景模版里一个table都没有，全是div了。难怪老人家说逆水行舟，不进则退。这回我退的可以了，赶紧恶补吧。不过习惯的力量真是强大的，一边是熟悉但乏味的旧方法，一边是陌生但精彩的新方法，脑子里却总是不自觉的用旧方法思考起来……慢慢来吧。 Div也是方块，但是div的方块比起table的方块来，的确灵活多了（table指老式HTML+CSS页面布局，div指XHTML+CSS2布局，不过HTML+CSS应该也可以用div布局）： table是顺序的，下一个td永远在上一个td的右面，而且水平一致；而下一个div可以在上一个div的任何方向上。 table是平面的，一个table不可能遮住另一个table；而div虽然不是3D的，但是是有层次的，一个div可以部分或全部遮住另一个div。 table定位永远是从上堆到下，从左堆到右；而div定位可以也是这样的常规顺序定位，也可以是相对定位（{posion: relative; float:right; top: +10px}这样一个定义就是说此div相对当前行居右对齐，并且顶部比当前行的顶部低10象素。页眉上的抓虾按钮就是采用类似方式定位的），还可以是绝对定位（{posion: absolute; left:…; top: …;}以left,top的座标形式定位当前div），更可以是固定定位（{position:fixed;….}定位在屏幕上某点）。 另外XHTML相对HTML变化也很大，虽然我们习惯了一些不规范的写法，而浏览器也牵就我们，能把一些不规范的页面正常的显示出来，但是规范毕竟是大趋势。经过我的一番努力，本站已经通过了W3C的XHTML1.0 CSS2.0规范检查，链接在页脚上。你也可以用此工具检查一下你的网页是否已经XHTML了。