吴贤茂：世博会网站的制作过程以及心得

　 各种互联网项目，新手可操作，几乎都是0门槛

学校的大练兵已经即将结束了，我想在这短短的几天培训,我真的学到了很多，虽然以前都是用代码写div+css和javascript做站群网站的，对于DW的一些界面功能还不是很熟悉，经过刘老师的指导终于了解了DW界面的行为控制。

前几天老师布置了一个世博会的网站让我们做为最近培训的一个作品吧，当时我的引发起一个构思了，是时候好好的把所学的东西做成一个比较大型的网站了。

首先我讲一下我做这个世博会网站的一个前期策划，第一做一个门户网站首先要考虑到页面的大小,我利用了DIV+CSS来减少页面的加载速度，一个页面差不多就10来KB，如果采用TABLE布局的话我想估计会在80多KB左右，虽然算起来加载页面是快了1秒左右，但是大家想一下一个门户网站成千上万篇文章从数据库调用出来，如果打开一个页面快1秒，那么速度可想而知，再者再谈谈对SEO方面的影响,搜索引擎的蜘蛛是不喜欢去爬嵌套在TABLE三层内的内容，所以在这方面也对SEO优化做好了铺垫.吸引蜘蛛去爬，从而快速增加你的网站快照和权威。

接下来我再说一下我的网站地图,一个首页、六个子页和一个内容页,每个子页都通过一些图文并排组成一个内容丰富的页面,全局采用蓝色调代表和谐,head头部采用一个一轴四馆和会徽简单的带入,由于页面的内容功能过多我便挑几个出来讲讲。

 

 

这个功能叫做TAB选择卡,是利用javacript代码制作的。调用里面的代码与CSS的id做成一个切换页面,这两个内容都不同，主要的好处就是为首页省下了空间然而又能达到给客户最大信息的效果!

 

这里是采用了一个幻灯片的代码，将最新的头条信息与图片展示给大家看，吸引用户的眼球，让用户更加想要点击进去观看.这个直接用FLASH+JAVASCRIPT代码在HTML调用图片。

 

 

 

这三个虽然也是利用了TAB选择卡制作而成的，但是里面却加多了一种比较动感的翻页切换，这个也是最近比较流行的JQuery脚本主要是结合新技术AJAX。

 

这个左右可以点击可以左右滚动图片，好处是让更多的图片给予用户观看，也是起到了一种节省空间的效果，主要利用了css样式表里面的overflow:hidden;属性来隐藏多于的图片，利用javascript可控制滚动代码!

 

这个也叫AJAX拖拽层,就是那些方框都可以随便让你拖动，点击关闭也可以关掉，虽然这种技术在DW的行为可以制作，但是大家有没有发现制作出来后那些代码是非常繁琐的，如果我们用js文件做出来后在页面调用的话，那些代码就清晰了很多，关闭哪里是用了一个CSS样式代码的display:”none”;来实现的。还有很多亮点就将不再一一举例了。

接下来再看看我的内容页是如何做SEO优化的。

 

看到这里首先标题最好利用H1来引用，内容页要有一些来源信息，TAG，大家会问什么叫Tag。

其实TAG就是一个标签关键字的意思，主要是给用户搜索关键字，最后提醒大家在加图片的术后最好加入title，title是什么?就是标注的意思，因为搜索引擎不收录图片，然后他对图片的查找就只能靠title了，所以这点操作很重要， 然后大家还要注意下在head之间加入这段代码填写自己的关键字和关键字内容。

 

内容尾部采用一些热门推荐来增加网站的点击率，让网站更多的内容能够给游览者游览，也起到了内页互连的一种优化.

讲到这里就基本结束了我整个网站的流程了，其实我也是一个初学者,如果大家有什么觉得说的不好的地方欢迎大家跟我交流。

最后建议大家对做站有兴趣的话不妨对动起手来做一做属于自己的网站，在做的过程中绝对会有意向不到的收获，有时后自己做一个网站比你自己看一本书的知识还要多，比如我这次再制作这个门户的时候就学到了很多CSS在IE6中的BUG，比如图片有空隙，margin的双倍距问题，很多东西都是细节方面，所以说细节决定成败!

Gdesign学习网 http://www.gzse7en.com 欢迎大家和我交流!