学　　号

姓名

设计日期

设计名称

个人网站设计

设计目的：

　　掌握小型网站设计的常用方法与技术。

设计内容：

　　设计一个小型网站，主题为……，主页的名称为myIndex.html，主页内容要包括网站logo，导航栏，页脚等内容；页面总数量不少于9个，不多于12个，网站设计中要综合运用文字、图片、动画等媒体；设计技术要包括CSS、JavaScript、AP DIV、表单、框架、行为与事件等

网站结构图：

网站总体实现一个基本的个人博客功能，展示有日志，相册，音乐，个人资料等。

网站上面部分结构图：

网站下面部分结构图：

设计过程：（可写多页）

在该网站的设计过程中，总体风格选择的轻松的卡通流行风格。页头和页尾部分使用的是图片展示，导航直接嵌入到页头，其实就是两张图片的叠加。如下图：

然后就是网站的主体架构，我采用的是左右架构，然后每个导航对应的页面直接嵌入到主页面的右边部分。如图：

在此图中，左边是登录，听歌，右边是日志部分。在日志部分就使用二级列表显示，这样不需要刷新整个页面，直接通过JavaScript技术实现，用户体验度好。背景图片选用的是一本书的框架，让人感觉清新自然。

在设计相册一栏的时候，采用的是动态照片显示，增加页码的动态性。就是网页中常用的滚动或者跑马灯效果。如图：

在设计个人资料的时候，就是使用简单的页面显示，但是这里我使用CSS样式文件，注意了下排版，效果还不错，如下图：

此外，左边还设计了每日格言和版权的一些标签。使整个页面的内容显得更加充实。采用html标记实现的，并添加了一张中国国旗的图片，如下图所示：

还有一个功能就是使用js函数实现鼠标blur事件。显示效果比较绚丽，但是考虑到页面和时间的问题，并没有给每张图片添加一个超链接，只是普通的展示，如下图所示：

最后还有一个播放器的功能，在ie浏览器上可以直接播放，但是在其他浏览器上需要下载相应的插件才可以播放。借助组件实现此功能，如下图：

设计小结（应包括下列内容）

1．对你所完成的设计，分析哪些地方做得比较好。

2．你所完成的设计的差距与局限是什么？什么地方可以做得更好？

3．你从本设计得到的收获。总结编写与调试程序过程中的经验教训。

4．对设计题目的评价和改进意见

个人总结：

在此次个人小型网站设计中，我还是学到很多东西。听老师讲过很多知识，但是并没有怎么进行综合的运用。借助这次机会，将自己学习的理论知识，全部运用于实践。

在做网站的时候，遇到很多问题，我都是在网上查找相关资料和向学长学姐们请教，最终基本实现所想要的结果。

比如，在做照片滚动效果的时候，看到被人的网站做的很绚丽，自己做起来还是比较困难的，在反复查看别人网站的源代码的时候，我才会使用，这个过程本身就是一次学习的过程和经历。

还有就是，开始我的网页总是对不齐，后来在反复调整页面的大小，width和height的值，费了好多时间，才勉强使页面比较美观。

最后，我对自己的作品还是比较满意，至少基本实现自己想要的效果。