大学时有幸被选为班男篮队长，结果连续两年的校篮球联赛都没出过线，为此一直深受某大学死党的“指责”，因为当初就是他把我推上那个位置的，哈哈哈。于是在其的“指责”与“威逼”下，必须得还这份“人情债”。偿还的方式就是要帮他做一个工作室的网站。

大学死党这家伙，是一个定不下心来的人，毕业后跑过很多的地方，有一度还跟我一起住在南昌，每天下班后在球场打球，日子恍惚回到了大学生活。而此刻我在上海写这个日志，而他则正在从珠海往深圳的车上，生活总是在这样的分分合合中继续着。

大学时代，这家伙就一直沉迷于影视及3D中，显然我与他沉迷的是在不同的领域，现在我在这个据传是经常猝死的IT行业，而他则在他自己称黄昏产业的影视广告业，生活与工作的交叉越来越稀少…

因为工作室网站的内容不多，于是尝试了一下最近正流行的单页面设计：

影视广告制作联系我，或者在联系他的时候报我名，有优惠价啊，哈哈哈

阿宝工作室：http://abocine.com

丰富的色彩以及卡通的形象造型，都很容易将浏览者引入设计者制造的意境中去，如梦似幻的梦境。

Adobe User Group Nederland

苹果树下

Webbli World

Bopu Toy

dedoce

Arbel Designs

sayatoo

Roberto Avila

Das Leben

Katherine Designs

更多精美网页欣赏，请至：reeoo.com

也欢迎提交你设计的或是你见过的设计精美的网站。

下面就看看这十个精美的等待页面：

BetterBlogger.net

Holeycoww

Mogulista

Uooo

Pepsay

PF2010

Cadmus

Safe B4 Sorry

Media Loot

Novalistic

因为手上有个空闲的域名——Reeoo.com，本着不浪费的原则，再加上一直以来想着做个收集精美网页的网站，为自己平时的寻找做些纪录，同时也方便其他有此需求的同学，于是就忽悠酋长同学给开了个空间，因为嫌国内空间要备案等麻烦事，所以就选择了国外的空间。

网站程序还是一如既往的选择了强大的WordPress，然后抽了点时间，写了个简洁简单的图片展示型的主题，于是网页收录站就这样上线了。

目前Reeoo收集的网页基本上以国外为主，当然并不是不收集国内的，只是国内的网页设计受制于很多因素，相较于国外的设计还是有很大的差距，所以多收录国外的网页设计以共勉。

收集的网页按颜色分类，方便分类查找，当然因为一个页面上不只是有一个颜色，所以颜色分类上还存在一定的可商榷的地方，于是还可以进入到内容页按标签里所描述的其它分类进行筛选。

这一切只希望可是提供更好的网页设计给相关的朋友。

除了直接上Reeoo.com获取我最新收集的页面外，还可以通过RSS来订阅：http://feeds.feedburner.com/reeoo。

正常情况下，我每天都会从我所发现的，所订阅的更新里面收集新的网页上传，持续更新，持续动力！

我的第一个独立博客是在2007年底使用PJblog架设的，然后在2008年1月又重新使用wordpress架设这个博客，转眼写博已经将近满20个月了，在写博的这段日子里，博客鉴证了我的成长过程。相信对很多人来说，博客都是鉴证自己生活足迹的好伙伴！

从最初的访间流言，到官方的确认，WordCamp China 2009·Beijing聚会终于将在8月22日在北京清华科技园“阳光厅”举行，届时这里将聚集一批国内的Blogger们，海阔天空的吹牛抑或表情严肃的探讨……

无奈路途遥远，只能遥望了。

Wopus做为本次聚会活动的友情支持方，奉上专题一个，方便众Blogger们会前会后的交流，届时也将通过@wopus（需翻墙）进行Twitter版的现场直播，对于跟我一样去不了会场的人们，敬请期待。

点击访问：WordCamp China 2009·Beijing

两个月前，Wopus中文博客平台新版上线，当时考虑的是整站的“合”，两个月过去了，现在开始考虑整站的“分”，WopusIDC是拆分的第一步，接下去还有其他频道将拆分出来，重构的不只是页面，还有架构，这是平台化的第一小步，以后还要走更多步。

伴随着新版WopusIDC的上线，Wopus今年的夏季博客主机促销活动也正式上线，同时Beta版的博客工具站也上线了，一切都在进行中，敬请期待更多精彩！

表情可以不变，工作的模式也可以固定，没有什么新意的内容，更没有什么好的创意，能做到的只是不停的重复，今天重复昨天，昨天重复前天……

原谅我粗糙的设计，因为找不到创作的动力。

更重要的是，美观只是形式上的，内容才是核心。

夏季漂流避暑专题：

对于网站来说乱用数据是很可怕的事情，而没有数据支持同样是可怕的事情，很难想像一个网站的栏目仅是让几个人围坐在一起每人想一点内容然后拼凑组装起来，从没有人站在全局的角度上考虑过事情，整个网站的业务流程以及内容的关联度从没有人去考虑过，所有的都只是临时凑一下，最终的结果是这些栏目各自为政，网站被切割成一个个独立的小块，而不是一个关系紧密的整体。

我就是流水线上那个负责组装的工人。

如有好事深度跟踪的童鞋，请勿追究页面栏目设置及代码质量，本人对此概不负责。

去年年底回家前，接到酋长同学的信息，说希望我能接下Wopus.org的新版设计工作，于是今年年初放假归来后就开始着手Wopus的新版设计的事情。设计制作的过程有些断断续续，因为大家都是业余时间来完成这个项目，所以这个过程也持续得比较长一些。

在这个设计制作的过程中，与酋长以及其他Wopus成员沟通了许多问题，参考了许多意见，这些问题意见不管是对Wopus还是对于个人，都是一种成长的经历。

Wopus新版从最初定的三月份上线，拖到四月份，最后终于走到了五月份，虽然现在还存在很多的问题，但时间已经不能再拖下去了，所以五一这天就选择了上线。

因为整站是基于Wordpress程序系统开发的，所以设计稿的有些细节得不到呈现，但并不妨碍新版的Wopus是基于Wordpress系统很强的一个案例。

昨天做了新版上线的最后的测试，然后把数据由国外的主机转移到国内的主机来，结果转移的过程出了些小问题，所以今天看到的Wopus新版比测试的时候又多了些BUG，遗憾，但我坚信BUG可以很快就可以修复的。

以下是设计稿：

Wopus主题栏目，除了关注主题外，还增加了主题制作者的信息，这其实就跟关注一个博客，需要关注博客后面的博主一样的道理。当然这个目的也是需要有更多的主题制作者加入Wopus的队伍。

Wopus插件频道，对wordpress博客的插件做了一些分类，方便用户寻找所需的插件。

Wopus博客主机频道，这是Wopus目前的主营业务。

Wopus内容页：

明年的情人节离我们还远，但今年的情人节马上就要到了，下周六即是2.14情人节。天气开始渐渐的转暖，可以脱掉臃肿的厚外套，日期也很好，正是周末休息时间，所以下周六的情人节应该是个很热闹的日子。

应该会有很多朋友选择带上自己男（女）朋友外出去做短期的旅行，但旅行是可以，可如果是跟团出游我就不太认同了。本来情人节应该是属于两个人的，可如果跟团就变成一堆人的了，虽然意义上还是个人的，但总觉得形式上变样了。这也就是为什么当公司同事问及我此次要不要一起出去旅游的时候，我摇了摇头，情人节还是私密点好。

春天虽然已经响起了脚步声，但冬天还没有真正的过去，所以泡温泉仍然是出游的一种方式，所以这次的专题内容就是在温泉里“泡”过情人节。这是我有史以来做得最长的一个专题了，页面高度在1024的分辨率下超过了五屏，这还只是前期的宣传用的专题，如果后期再加上内容的话，高度肯定还会再增加，万幸这只是一个单页面的专题，而不是网站的首页之类的。

这次专题的内容相较于以往的专题来讲，还是较为详实的，景点、饭店都有介绍，只是遗憾的是这个介绍仍然很单薄的内容，基本上仅是一两句话而已。不过景点门票价格以及饭店联系方式都齐全，这也应该是很多出游的朋友所关注的。

点击访问：爱在西海 – 庐山西海情人节活动专题

一直以来对企业站的设计都不是很能把握住精髓，最早的如去年刚毕业时在第一个公司设计的网站，再到2个月之前的玄鸟传媒的网站设计，然后是现在的公司之上的集团网站设计，一直以来都希望深入了解其中的文化理念精髓，但总是因为种种原因，最终不能得其道，所以很大程度上都是依靠个人感觉在做设计。

而往往很多时候，一个设计的成功是因为设计师的感觉，而失败在很大程度上也是因为设计时的感觉。

红途网上一直延用至今的那个导航频道实在是惨不忍睹，整个频道几乎是一无是处，而且现在的栏目架构也限制了相当多，所以在设计这个新版本的时候有诸多的限制，如果要做很大程度上的改动需要涉及到很多很多的东西，而这些所涉及到的东西有一半以上都是我所无法控制的，所以只能尽量在原架构设计的基础下增加一些与用户互动的行为。

除了少数一些网站有着雄厚的人力及物力可以做资讯网站外，还有更多的网站不应该只是局限于采集上，而应该将网站从资讯转换成平台，成为一个服务平台。

所以在这个新版的设计上，尽量想让它向服务平台转换，从之前仅的资讯信息栏目，增加了诸如相册、导游排行榜之类的应用，但最终这似乎成了我一个人的想法，汗！

这个月是自从我进公司以来最忙最乱的日子了，事情忙是因为江西红色旅游博览会下属的一个字活动旅游产品交易会即奖要举行，于是就有一系列的相关的不相关的事情压下来，可怜竟然还要我去各种印刷广告，当然出来的效果也是有些惨不忍睹了。而事情乱自然是因为事情没有规划好，上头一下子催这个一下子催那个，于是这个做一半又去做另外一个，同时进行好几项任务，于是到最后乱糟糟的，没有真正做精一项。

这个温泉专题本应该是上个星期的事，可仍然因为这边一点事那边一点事，一直拖到今天，本以为今天可以全部制作完，因为这个页面在我个人的理解中应该就是相当于一个目录页的形式，因为这个专题本身没有多少内容，仅仅是对之前做的温泉景区起一个引导链接的作用，结果这个理解果然是我个人的理解，页面还没开始设计完，上头就说了页面内容不是这样的，结果内容呢？等吧，等策划出文档吧。

即使是飞机稿也是自己做的东西，于是利用一点时间稍微完善了一下，发上来做个纪念。

其实想想也没什么，我们本来就是后面临时增加进去的，但是对于当时的付出却总感得心有不爽。

制作一个网站，不给任何资料，甚至连LOGO都要我自己从网上去找，除了页面版式的设计外，还要考虑栏目内容的设置，应该有哪些栏目，哪些栏目应该比较重要，连这些信息都要我去做。于是我就美工兼策划一并做了，当爹又当妈的，还搭上一天休息的时间，却换来一个这样的结果……

做一个设计不难，难的是在做设计前的思考，更难的是做设计前的思考还得搭上策划的思考在里面。

已经有段时间没有更新过自己在公司的作品了，这段时间里陆陆续续的也做了些东西，比如景区网站制作，比如红途网导游频道的改版设计，再比如这个“2008·中国（江西）旅游产品交易会”的网站。因为前两个作品中景区网站还在竞标中，而红途网导游频道还没有正式的开始制作，所以今天就只更新这个交易会的网站设计了。

因为之前有过制作出来的页面代码被替换掉的情况，所以不到不得已的情况下我选择只出设计稿不出页面，各位看看设计稿就行了。当然不得不承认，制作这个网站的时候思维还是很僵硬的，脑子里还是存在敷衍的思想的。另一个问题就是，如果看着颜色太绿或者有偏差，那也是很无奈的事，LCD的显示颜色始终没有CRT的好，或者说我的LCD还没有到专业的程度。

说说页面制作的问题吧，我并不愿意见到网页只为IE而开发的情况，制作标准化的页面兼容所有浏览器，应该是现在WEB发展的趋势，我们要做的应该是兼容用户而不是要求用户。如果近期时机合适的话，我希望可以向公司高层反馈重构红途网的事，希望可以把红途网当成自己的一个产品来设计，最好是能在重构代码的基础上连栏目也一起优化。

唠叨了些题外话，看图吧：

其实一直对于如何制作好一个企业网站掌握不好，当页面的栏目内容少了之后，排版就显得尤其的重要，而且对于企业的宣传图片也一直处理不好，以后还要加强这方面的锻炼。

在这个版本之前还做了另外的两个版本，因为之前并没有给出具体的内容需求，只给一份公司介绍的PPT，所以做出的效果自然也是很差劲了，于是便重新设计了这个版本，但似乎仍不是很好。

以后多多加强锻炼。鼓起勇气放出之前的两个版本：

这个版本的栏目内容等完全是由我根据公司介绍PPT制作的，当然没通过了。

确定栏目后的改进版，本来下边使用的是灰白色的，结果被要求换上鲜艳点的颜色，于是便出现了这个红色。

对于一个旅游网站来说，景区景点的资料应该是最重要的，只有完善的景区景点资料，才能吸引更多的游客来访。之前的景区页面非常简陋，只有一个简区的文字介绍跟图片，然后是下设景点，没有把与景区相关联的周边联系起来，于是这次的重点就是要把这边周边信息都聚集在一块。

上头的意思是把这些周边信息归划为六类：吃、住、行、游、购、娱，这六类基本上囊括了景区周边的所有信息，于是讨论会后的新景区介绍页就是要突出显示这六大类的资料。

讨论会后定出来的稿子如下图：

这个版本的稿子的缺点是显而易见的，栏目版式基本定死，后期如果需要扩展栏目的话，就得全部全新做过，于是私自决定将版式改为下图的：

在这版稿子里，小小的使用了一下栅格化设计，，使网页的栏目条理更清楚。当然这里的栅格化设计是基于横向上的栅格化了，纵向上的栅格化因为图片的原因还无法实现。这个稿子通过了大家的意见，然后就是改色调，换成绿色调的与主站相配：

PS：用液晶显示器做出来的东西在CRT上看，果然是色彩相差很大，不知有什么好的解决方法没，能同时兼容液显与CRT显示器。

改版任务一直在进行，会员中心的改版其实是在论坛模板设计之前，但由于当时程序并没有衔接完成，所以等到现在才发出来。当然，即使是现在程序也依然没有衔接完成。目前完成的只是一些初级的功能，仅能完成个人资料的修改，不同会员组别的特定功能似乎还有点遥远……

老版会员中心，在忍受无数的抱怨后，终于要退休离职了，虽然它的在岗时间才两三个月，可它不让人喜欢只让人厌恶的特性注定了它的灭亡。

革新的设计，正在一步一步的进行着……有时候觉得这个脚步走得太慢，但除了发发牢骚也只能无奈的叹气。

这是第一版的设计图，是我心目中，比较理想的符合红途网网站现有功能的设计，可惜不幸在会议讨论中被砍掉了一些功能。

阉割版的会员中心，右侧的新闻列表还有个人相册功能都被砍掉，相册功能这个几乎是会员与网站存在的唯一互动被砍掉，导致网站与会员之间的互动性越发的虚无，新闻列表与专题栏目的砍掉，则让会员中心限入了孤立的状态。

哎，希望随着程序的衔接慢慢完整，可以有其他的应用来填充这座孤岛。

来公司三个多月了，之前一直是在制作专题，然后是完成前任设计师遗留下来的未制作完成的设计稿及页面，大部分的时间都花在了修修改改上，除了几个完整的旅游专题外，几乎没有真正的参与到红途网的设计中去，修改着不熟悉的设计稿以及杂乱的页面代码，有太多的东西自己都没法表达出来。

经历了之前两个月的测试，这个月红途网终于正式上线运营，正式上线的同时也意味着大规模的修改已经来到，测试中积压着的关于版面及功能的问题要全部的去修改，所以改版成了不可避免的问题。

最先开始的是会员中心的改版，因为程序还没有衔接完整，所以暂时不放出。然后就是这个论坛的模板重设计，之前一直是使用Discuz!NT的默认模板，功能及样式都无法与红途网相配，所以这个星期就着手了论坛模板的设计与制作。下个星期开始着手网站导游频道的改版，现在的版面，实在 ……期待吧，看能否在现有部分风格定格的情况下完成自己心中的设计。

访问请点击：驴友论坛

既然是要放长假了，自然就有很多工作要赶在长假前结束，除了要着手网站会员中心的全面改版外，旅游专题自然是少不了要制作上一两个的。由于十一长假旅游涉及的方面太大，而且公司在准备上也有不足，所以最终放弃了十一假期专题制作的想法。

2008年中国江西红色旅游博览会将于10月7日正式开幕，据说开幕式除了电视直播外，还有网络直播，盛况空前啊。只是很奇怪这样一个从2005年 就开始的旅游活动，今年就要举办第四届了，可是之前竟然从未听说过，在接到这个专题制作的任务前，根本就不知道江西境内还有这么大的一个旅游活动，时间跨 度竟然有两个月之久！

制作专题最郁闷的就是，上头直接给个专题活动介绍，然后专题页面、栏目分类、内容划分等都需要去做，做设计的同时把策划也给做了，正好学习学习些策划。

老规矩，专题地址猛击这里：2008·中国（江西）红色旅游博览会

没有充分理解奇效堂的公司理念，只是在原网站的基础上进行了简单的改版。

不过老实说，觉得这种活动挺变态的，什么时间搞不好，偏偏放在中秋节的时候来弄，明明中秋节时正是家人团圆的好时候，却又要让人去参加什么月亮文化节，不过对老外来说应该挺合适的，据我所知老外应该没有中秋节一说。说到中秋节似乎马上就到了，貌似公司就要发月饼了，前几天看过腾讯的月饼，巨羡慕无比。

这次的专题尝试带有中华文化底蕴的水墨风格，希望能将山水溶于水墨风中，不过貌似最后出来的效果图没有达到预期的水墨风格，甚至说差得很远，原来思想与行动差距是巨大的。整体的水墨风格偏淡，就姑且称之为淡水墨风格吧，哈哈。

因为上一个专题制作时已经有了专题的基本HTML结构以及CSS代码，所以这个专题在制作代码的时候就快了好多，看来一个CSS框架还是可以提高工作效率的，关键是看怎么去使用它。

专题地址猛击这里：宜春月亮文化节

专题页的数据貌似还没有填充上去，将就一下效果图吧。

上头时间追得有点急，而且只有一堆照片，没有内容，同时做为一个专题，因为没有使用后台程序调用，是个纯静态的页面，所以在内容方面还是有所欠缺的。

在制作的过程中，深深的又被浏览器给折磨了一回，犹其是万恶的IE6，在此对它表示深痛恶绝。万幸的是，最终解决了常用浏览器的兼容性，IE6、IE7、IE8 Beta2、Firefox 3，还兼容最新的Google Chrome哦，全兼容。哈哈。

专题地址猛击这里：武功山之行

来新公司之后，一直没有很完整的做过一个东西，很多时候都是在修改一些小地方的细节，这次专题算是比较完整的一个页面吧。今后一段时间内，估计会做很多这样的专题，之前没有做过这类型的专题页，这次算是一种尝试一种历练吧。

该上图了

但是我们可以看到，很多网站为了表达其追求的所谓“个性化”，不管是从导航还是版式来讲，都在追求多变的效果，一个栏目一个导航，一个栏目一个版式。诚然这样的设计能给用户带来新鲜感，但无疑这破坏了网页设计中的一致性原则。

除了极少数有知名度的网站外，很多用户访问网站的方式是通过搜索引擎或者是其他的链接进入到网站的某一个页面的，这种时候，网站就需要让用户在第一时间明白自己所处的位置，导航在这个时候就派上了用场，如果用户都不知道自己所处的位置，那么接下去的引导将毫无用处。

当用户通过网站中的某一个页面去访问其他栏目页时，一致性的导航设计可以让用户以最快的速度明白自己所处的位置以及自己还可以去的位置。如果用户从一个页面跳转到另一个页面时，却发现自己找不到导航在哪里，不知道自己所处的位置以及自己如何去另一个栏目页时，用户关闭当前网站的可能性远远大于用户继续寻找导航的可能性。

对于版式设计也同样如此。

版式设计的要点之一是要尽可能的向用户提供结构清晰条理明朗的的页面，确保用户可以在最短的时间内寻找到自己所需要的内容，让用户产生满足感成功感，而不是丢一堆乱糟糟的内容让用户去翻找而导致用户产生挫折感失败感而最终放弃。

不同页面的版式应该尽可能的保持一致性。给用户一个熟悉的环境，带给用户的成功感要远远大于把用户放在一个新环境中。

如果一个网站和一个系统看似不相关的两个产品都能表现出品牌的一致性，那为什么同一个网站不可以呢？

新闻列表页：

信息内容页：

但是设计图完成后，不知是何种原因，客户一拖再拖，对于这种工作处事方式我相当的不满意，在些申明版权，不希望出现版权纠纷等问题。

*图片与文字取自互联网，版权归原作者所有。

页面的颜色取自于NBA的LOGO色，个人觉得红色可以过于显眼，所以最终选定这种蓝色，在视觉上也显得清爽很多。

*版权所有，请勿盗用！

*以上页面中的LOGO、图片、文字内容来自于互联网，版权归所作者所有！

看下面一段CSS代码：

#header{margin:10px 15px;background:#333 url(Images/header.jpg);}
#content{margin:10px 15px;padding:10px;background:#999;}
#copyright{margin:10px 15px;border:1px solid #f00;}

在上面的三个ID中都有一个相同的属性“margin:10px 15px;”，如果就这样分开来写的话，这三个ID之间将保持各自独立的关系，但却生成了重复的代码，而我们可以将其写成如下格式：

#header,#content,#copyright{margin:10px 15px;}
#header{background:#333 url(Images/header.jpg);}
#content{padding:10px;background:#999;}
#copyright{border:1px solid #f00;}

将上面的ID换成Class也是一样的。这样写我们就成功的将重复代码“消灭”掉了。但是如果这里具有相同的属性的ID或Class过多的话，难免会造成代码可读性降到很低很低，所以除此之外当具有相同属性的都是Class时还有另外的一种写法：

.main{margin:10px 15px;}
.header{background:#333 url(Images/header.jpg);}
.content{padding:10px;background:#999;}
.copyright{border:1px solid #f00;}

当然这种写法时，调用时的写法也与平常不一样。

<div class=”header main”></div>
<div class=”content main”></div>
<div class=”copyright main”></div>

这样的写法同样可以达到效果，并且也不会再怕具有相同属性的Class多而造成代码可读性差的问题，但值得注意的一点就是，这种写法对于ID是无效的，不管其中是存在一个ID或者全部都是ID，都将造成这段代码的无效。