飞龙博客

总结第六版中国名商网前台网页架构设计制作方法和特色

断断续续花了将近3个星期，飞龙（www.feilong.org）把第六版的中国名商网（www.51toa.com）前台网页设计架构和制作终于完成了。为了总结一下切身设计架构的经验，不断提升网页架构的水平，下面飞龙总结一下第六版中国名商网前台网页架构设计制作方法和特色，修订地址在：http://feilong.org/web-design-means-51toa，和网页架构的朋友一起讨论学习。本文涉及到的 网页页面框架架构方法，不一定符合前贤的大型互联网网站架构心得，也不一定是最好的网页页面框架架构方法，只是飞龙自己琢磨出来的。以后还要多学习借鉴前贤网页前端架构师（Front-End Architects）的做法，还有大型网站的架构优化、大型网站架构演变和知识体系和服务器架构优化等方面的问题。

一 结构化设计：
1.整个网站根据/频道/栏目/子栏目/三层关系进行系统化安排。
2.功能不重复，不雷同，不累赘，保证结构清晰，层次明了。
3.内容安排有内在联系和通用规律，又能相互区别。
4.通用标签样式表、三栏式布局样式表和两栏式布局样式表分开，避免载入当前网页不需要的样式。

二 标准化设计：
1.凡属于网页骨架的html代码全部用div+css标准化网页设计。
外骨架采用ping、ping-bg、main、side、main-left、main-right、main-right、main-left之类的名称，
内骨架采用mo-nei-frame，lei2、lei3之类的标签。
2.凡属于网页模块部分的html代码也全部采用div+css标准化网页设计。
头部采用mo-bg，mo-up、mo-title，mo-more之类标签，主体用mo-nei、mo-down之类的标签。
3.凡是属于控件部分，在控件最近的外围div一般需要设置具体高度，保证控件没有调用任何内容数据也能使页面显示正常美观。
4.控件的做法取决于程序员。当然我们要学会分清Web前端架构师与程序员的职责。一般数据调用采用table表格方式，返原table数据表的本来作用。
5.每个数据记录之间的间隔线，用hr标签放入控件里面。
6.每个模块之间如果需要间隔线，用hr标签。也可以用line-x表示。
7.每个模块之间如需要竖线分开，可以用line-y表示。

三 简洁化设计：
1.调整样式表，不出现太多的颜色搭配、层次嵌套和模块做法。
2.页面设计要尽量简洁、干净和间隔疏朗。
3.不出现毫不相关的内容来滥竽充数。
4.页面层次不超过三层，一般只用两层，即频道下栏目，最多到栏目下的子栏目。

四 相关性设计：
1.网页之间互相链接，整个前台体验流程很规范完整，相当一个演示版的静态站点。
2.每个网页的内容高度相关，每个频道内的栏目页也互相关联。
3.文件名的命名体现相关性原则，同一频道的模板页最好统一文件名前缀（分文件夹），类似：fabu.htm、fabu-gongying、fabu-qiugou.htm

家具久久店：http://jiaju99.com
庭院e页通：http://e.jiaju99.com
淘宝家具店：http://taobao.jiaju99.com

博主：飞龙.org
链接：http://feilong.org/web-design-means-51toa
庭院e页通：http://e.jiaju99.com可加入收藏夹

更新网址：https://feilong.org/web-design-means-51toa
最初发布：20090217 08:46:59 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： 网站开发

新作：飞龙总结网页布局和网页架构基本思路

旧文：前端架构师的职责是什么