摘 要
改革开放以来，随着经济与科技的高速发展，外来文化入侵严重，外国节日愈来愈受到青少年的追捧，与之相反的是中国传统节日却备受冷落。因此，对传统节日的宣传已经刻不容缓。端午节是中国传统节日之一，有着非常丰富的节日文化。
当今社会正处于信息时代，网络的影响力与日俱增，而网站在其中更是占有相当重要的地位。网站可以说成是一种沟通工具，人们可以运用网站来发布自己想要公开的信息，或者利用网站来提供相关的网络服务。人们可以通过各种智能设备中的浏览器来访问网站，从而获取自己需要的资讯或者享受网络服务。网站的宣传作用效果显著。
本文主要是介绍端午节主题网站的设计制作。网页制作主要应用Dreamweaver完成。
网站的的主要内容为宣传中国传统节日之一的端午节。网站的前端部分由主页、二级页面、动画页面组成。主页为端午节的简单说明，二级页面将从风俗、饮食、文学等方面进行详细介绍，动画页面则基于jQuery制作完成。jQuery是一种特殊的JavaScript库，它能够很轻松地使网页做成动画效果。网站的交互功能包含注册、登录及留言功能，都由XAMPP实现。
关键词：jQuery，端午节，网页设计，宣传
目 录
引 言 1
1 绪论 2
1.1 课题背景及意义 2
1.1.1 课题背景 2
1.1.2 课题意义 3
1.2 课题的研究方法及预期结果 3
1.2.1 课题的研究方法 3
1.2.2 课题的预期结果 3
2 制作网站的相关工具及软件介绍 4
2.1 jQuery介绍 4
2.2 Adobe Photoshop CS5软件介绍 4
2.3 Adobe Dreamweaver CS5软件介绍 4
2.4 XAMPP软件包介绍 4
3 网站的设计 5
3.1 网页内容设计 5
3.2 网页排版设计 5
3.3 交互功能设计 6
3.4 动画设计 6
4 网页的制作 7
4.1 建立站点 7
4.2 主体框架的制作 7
4.3 首页及二级页面的制作 8
4.3.1 首页的制作 8
4.3.2 “风俗”页的制作 8
4.3.3 “饮食”页的制作 8
4.3.4 “诗文”页的制作 9
4.4 交互功能的制作 9
4.4.1 注册登录的制作 11
4.4.2 留言功能的制作 12
4.5 动画页面的制作 12
4.5.1 页面的搭建与切换 12
4.5.2 人物的动作分解 13
4.5.3 流程的编写与封装 13
4.5.4 主题页面一的制作 13
4.5.5 主题页面二的制作 14
4.5.6 主题页面三的制作 16
4.5.7 添加背景音乐 18
4.5.8 整合工作 18
4.5.9 技术总结 18
4.6 整理文件夹 18
5 网站测试 19
5.1 交互功能测试 19
5.2 动画测试 20
5.3 浏览器兼容性测试 21
结 论 22
参 考 文 献 23
致 谢 24
每年农历的五月初五，是中国的传统佳节日——端午节。对于大多数中国人而言，端午节的重要意义应该是仅次于春节和中秋节的。
一提到端午节，很容易就联想到吃粽子、划龙舟等传统习俗。端午节的来历有很多的说法，最普遍的说法就是为了纪念爱国诗人屈原了。屈原是战国时期的楚国人，当时秦国势强而楚国势弱，他积极主张连齐抗秦，但楚王不听从他的建议，反而听信谗言，将屈原流放在外。后来楚国都城被秦军攻破，屈原忧愤不已，投了汨罗江，以身殉国。传说他投江那天正是五月初五，当地的百姓知道后伤心不已，来回划船到处打捞，又拿了很多饭团丢到江里喂鱼虾，倒了很多雄黄酒去醉水怪，说是为了保护屈原大夫的尸身，这也就是端午节划龙舟、吃粽子、喝雄黄酒的由来。
除了纪念屈原的说法之外，还有纪念孝女曹娥、纪念忠臣伍子胥的说法。无论如何，这些传奇故事让端午节增添了很多色彩。端午节相对于其它的传统节日就多了一份特别的意义。端午节已经有两千多年的历史了，它经历了中华民族的朝代更替、时代变迁，但它依然在延续着。
然而近年来随着外来文化的入侵，外国的一些节日如圣诞节、情人节等的影响力越来越大；而除春节之外，中国传统节日的影响力越来越小。传统节日不应该就此沉默，对于传统节日的宣传保护刻不容缓。
随着科学技术的高速发展，互联网已经走人千家万户。目前来说，网站的宣传力度已经远远超过其他媒体。本次设计的任务是制作一个端午节主题网站，以宣传推广端午节文化为目的。网站的主要内容是对端午节的相关知识进行详细介绍，网站的难点主要集中在基于jQuery制作的动画部分，网站也包含注册、登录以及留言等交互功能。
