1、个人网页设计课程设计报告 -1- 目录目录 一、概述 2 二、结构图 2 三、网页主题选择 2 四、模块介绍. 3 (一)首页 4 1、整体框架代码 . 5 2、导航栏动态跳动效果的脚本代码 . 8 3、日历脚本代码和日历 CSS 属性设置 . 9 4、每张网页都通过同一个层叠样式表 touming.css 来控制属性,框架 CSS 代码如下 . 14 (二)日志 19 1、日志局部代码实现 19 2、相关日至导航图和代码 . 20 (三)留言 21 1、留言局部代码实现 21 2、评论脚本代码实现通过点击事件 onclick 来实现 . 22 (四)相册 23 1、相册局部代码实现 23 2
2、、实现相册翻页的脚本代码如下 . 24 3、图片滚动效果图和代码 . 25 (五)关于我. 27 1、关于我局部代码实现: . 27 五、总结 29 六、制作平台. 29 个人网页设计课程设计报告 -2- 一、一、概述概述 现在网络越来越趋于平常化,网络一是生活正不可或缺的一部分。自己平时上博客、刷 微博的时候就觉得有些网页自己可尝试着写出来。自己也在网页和脚本这方面学过一点知 识,因此可能上手比较块,故本次课程设计课题我和李运强选的题目是个人网页的设计。 在整个网页设计过程中主要是在模仿, 模仿个人博客, 个人空间的相关模块设置和功能 实现。个人在设计时考虑的多为个人的兴趣喜好,而不注重商业
3、的展示。内容以反映个人为 中心,从而使个人网站真正的成为展示自己的网络名片。 在网页制作中,我借鉴了网络上个人网页的设计风格,采用博客的形式来做整体框架。 整个网页的架构是由 DreamwaveCS4 完成的。 二、二、结构图结构图 三、三、网页主题选择网页主题选择 以博客的形式展现自我已成为当前最为时髦和时尚的方式了。主题我是参考我自己的 免费空间里的网站唧唧歪歪网的博客形式。例如整个背景的透明色设置就是受到它的启发。 所以, 我的关注的便是怎样让自己的网页更具有个性魅力, 使个人擅长的信息更全面的反映 于浏览者。 我的博客形式的个人主页比较喜欢, 所以主要是用博客的思想来展开我的设计思 路
4、 。 作 品 做 好 后 我 会 上 传 于我 的 空 间 , 届 时大 家 可 以 来 访 问 。访 问 地 址 是 : http:/zhengwei0601.web- 郑伟的空间 日 志 相 册 留 言 关 于 我 首 页 个人网页设计课程设计报告 -3- 四、模块介绍四、模块介绍 以 博 客 的形 式 展示 自 我, 所 以每 张 网页 的 整体 框 架是 一 样 的, 只 是在 中填充的内容不同。故在介绍我首页的结果后就不一一详细介绍其他页面 的结构,而只是将各个页面中的代码写下来。 每张网页所用到的脚本文件有所不同, 故也会将所用到的脚本文件代码写下来。 脚本文 件是用 javascript 写的,而且是用外部链接形式调入网页的,以便于网页代码的优化、修改 和维护。 受某些博客的影响,我非常喜欢导航栏的动态效果和音频效果。所在,在导航栏上我和 搭档一直在写动态抖动的 js 代码。当然好的网页是通过好的布局、绚丽的层叠样式表 CSS 的使用、动态的实现等很多因素共同作用的结果。有些简单的脚本代码自