精品课程网站开发小结

最近帮学院制作了一个精品课程网站，主要是web界面的设计，因此我利用jquery插件，来完成一些效果的设计。


首页：


1.在顶端的banner栏，用JQuery_Cycle插件来实现类似于flash的图片切换效果。


2.水平菜单导航栏，用ddsmoothmenu插件实现多级导航


3.中间内容，为了界面的美观，用curvycorners插件实现组件的圆角效果


4.底部文字标题，用jquery.dropshadow使文字具有阴影效果



内部页面：


在网站内部，顶端还是多级导航菜单，而下面分为两部分，左边为栏目导航，右边为一个iframe，根据左边导航的链接，动态的显示内容。


1.左边的树状结构导航利用jquery.treeview实现
2.利用coda-slider实现Tab式浏览，这个相当的漂亮，很推荐！

其他：在介绍出版教材时，其图片的点击放大效果利用jquery.fancybox实现


jquery插件就用这些，jquery还有很多的插件，都很优秀，而且使用起来十分简单，可以让我们快速的建立起界面美观的网站前台，个人感觉，利用jquery插件，是可以达到flex那种漂亮界面的。


一些bug的解决：

 虽然这个精品课程网站都是些静态的页面【因为东西不是太多，而且由于时间的关系，没有使用动态技术、数据库等】，在开发的过程中还是碰到的一些问题。


1.png透明图片在IE6下显示的问题：感觉很无奈，ie6这破浏览器。。。

   解决：在网上查了一些方法，最终利用了一段JavaScript代码解决了问题

2.多级菜单导航在利用frame进行布局时，子菜单被遮住的问题

   解决：好像没有什么好的办法，除非不用框架进行布局，主要原因是不能够跨frame显示，用ddsmoothmenu是不行了，最后在网上发现了一个叫Menu G4的JavaScript菜单导航，这个能跨框架进行显示，是个很好的工具，可以尝试一下

 

心得：界面的设计在技术上虽然不难，但在对界面的整体布局、风格的设计还是不简单的，所谓众口难调，就一个首页就改了多次（要以老师的眼光。。。。），还好最后的界面还算过得去，这回是当了一回网页界面设计人员。

 

我觉得在网站的开发上最难的是对多个浏览器的支持，这个界面在IE下不错，在Firefox下就很囧，就说IE的各个版本间都有好多的不同，这应该是困扰网站开发者的主要问题吧。