传统端午网站制作
目录
一、 引言 3
二、 网站设计工具及技术 3
（一） 网页介绍 3
（二）设计工具 3
1.Dreamweaver 8 3
2.Photoshop 9 3
三、主体 4
（一）流程 4
1. 结构 4
2. 界面 4
3.DIV+CSS的网页布局 6
（二）网站基本功能 7
1.首页 7
2.起源传说 8
3.异国端午 8
4.端午课堂 9
5.端午食宿 10
6. 客户留言 11
（三） 动态效果 12
四、总结 13
谢词 13
参考文献 14
附录 14
引言
对于网络来说载体便是网站，一个端午节的网站可以让浏览者从不同方面熟悉传统节日。中国从古代发展到现在，历史非常的悠久，而且还有许多的传统节日。这样的节日有很多，比如说中秋节，清明节等。这一次网站设计所介绍的是传统端午节，众所周知，每年的农历五月初五是端午节，在这一天会包粽子，当然官方说法是为了纪念屈原。然而端午节是我国传统节日中非常古老的一个节日，是历史文化遗留下来的产物，近些年新闻中谈到端午节被韩国拿到联合国去申遗成为他们的传统节日，这为保护传统文化敲响了警钟。
随着网络社会的不断发展，人们可以通过互联网技术了解时事发展，从某种意义上说人们现在离不开互联网。网页是一个文件，由网址来识别和存取，在我们输入网址后，经过快速的程序，网页文件会传送至计算机，然后通过浏 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
览器解释网页内容。网页基本上由文字与图片两种元素组合而成。
在整个网站的设计过程中，将课堂所学习到的知识都结合的运用起来。并且，在网上网页编辑教程上学到很多新的知识，并运用到这次的设计中。
网站设计工具及技术
网页介绍
网页的制作分为静态网页与动态网页，静态网页的制作是最基本的，通过简单的表格与文字便可实现出来。而动态网页的制作则需要JS语言，相对于静态网页来说比较复杂，但是能体现出网站的灵动性。
（二）设计工具
在设计之前的准备过程是繁琐的，但是一个好的开发工具会让你在设计的过程中取得意料之外的好的效果。
1. Dreamweaver 8
以Dreameweaver 8为主要制作工具，在设计界面里以简洁新颖的原则进行规划，DW是当下最好的一个网页编辑的程序，现市面上的很多好的网页都是通过这一程序做出来的。
2.Photoshop 9
然后用Photoshop 9去处理搜集到的一些图片，可以调整图片的色调，大小变化，特效文字之类，让图片能够更好的跟网站融合。在代码的编辑过程中，以DIV+CSS为基础，并在过程中运用到HTML5的相关动态代码，让网页动感达到最大化。
三、主体
（一）流程
结构
在“中国传统节日”模块包含了：首页、端午简介、起源传说、异国端午、端午谚语、端午课堂、各种食宿。各个模块都详细的介绍的传统端午节。
详细结构图如1-1：
图1-1 结构图
打开网页，首先接触的是首页，首页是一个网页的主体。一个设计精良的首页可以让用户更方便的了解了解网站的布局，从而更快速的掌握自己想要的信息。
界面
运用Dreamwear设计界面将中国传统节日原型网站整个框架呈现出来，但是利用Photoshop可以将这些基本框架完整的体现出来。图1-2所示：
LOGO
图片
导航
主题介绍
主题内容
图片欣赏
版权
图1-2主页整体构架
首页布局原则是不仅要简单明了，而且还要让用户感觉到新颖，这样才会让用户更快的找到他所想要的。这一次主页设计我把一些传统歌谣放在上面，让用户了解更多知识并且更加熟悉端午节。
子页框架如图1-3所示
LOGO
图片
导航
二级导航
概要
图片欣赏
版权
图1-3子页整体构架
子页是在首页的基础之上采用一般性的布局，顶部LOGO、图片让人眼前一亮；中部是在首页格式的基础上替换成内容；底部则包括图片欣赏和版权。，这样能用户更加详细的了解端午节各个方面的习俗。
3.DIV+CSS的网页布局
在各种素材准备好之后首先设计的便是网页的框架，将设计的框架搭好之后便是把素材放进去进行修饰，比如说字体合图片的格式大小之类。
首页框架做好之后，下面要进行的就是首页的div结构和层样式的建立，如今的网页设计考虑更多是搜索引擎积极给用户带来的更多便利，传统表格网页布局由于大量的HTML代码，在搜索引擎方面达不到所预期的效果，但是如果采用DIV进行网页布局的话，代码的精简的有点让其在这些方面体现出巨大的优势。
（二）网站基本功能
1.首页
对于一个网站来说首页的好坏至关重要，它不仅仅可以让用户在浏览的过程中一目了然，而且将会作为一个载体把网页的各个功能模块展现出来。比如说传统端午节的各种食宿等等。本次设计以简单明了为主，包括了顶部、导航条、主题内容与底部几个模块。
LOGO的设计主要是上面一个简单的图形，利用PS9简单的将文字与图片设计成的图片。然后就是为LOGO所在的行添加背景图片，但是背景图片要在photoshop软件中将其的透明度设置偏低一些，这样才不会影响到上层的图片效果。
界面设计是绿色为主色调给人一种淡雅清新的感觉，背景图片选择了两张让人感受到浓浓端午情味的图片。在导航条中包括端午起源、各种食宿、异国端午、端午谚语、端午课堂几个子导航。在主体内容的左侧有一段让人耳熟能详的一首端午民谣。底部采用滑动代码形成了一些图片的滑动可以让网页有种新颖的感觉，整体上的设计还是在简洁明了的前提下呈现出更多的端午氛围。详情如图2-1所示
主页
图2-1
2.起源传说
起源传说是关于端午节的一些传说。导航条的设计是在主页的基础之上在主体内容的部分又添加了一些二级导航，这样可以在界面简洁的前提下容纳更多的内容，并且可以把你所想的展现出来。包括了纪念屈原、迎接伍子胥、龙的节日恶日禁忌和夏至等。详细如图2-2所示
如图3-1
图3-1
采用的简单了HTML5的滑动效果
代码如下：
四、总结
一、 引言 3
二、 网站设计工具及技术 3
（一） 网页介绍 3
（二）设计工具 3
1.Dreamweaver 8 3
2.Photoshop 9 3
三、主体 4
（一）流程 4
1. 结构 4
2. 界面 4
3.DIV+CSS的网页布局 6
（二）网站基本功能 7
1.首页 7
2.起源传说 8
3.异国端午 8
4.端午课堂 9
5.端午食宿 10
6. 客户留言 11
（三） 动态效果 12
四、总结 13
谢词 13
参考文献 14
附录 14
引言
对于网络来说载体便是网站，一个端午节的网站可以让浏览者从不同方面熟悉传统节日。中国从古代发展到现在，历史非常的悠久，而且还有许多的传统节日。这样的节日有很多，比如说中秋节，清明节等。这一次网站设计所介绍的是传统端午节，众所周知，每年的农历五月初五是端午节，在这一天会包粽子，当然官方说法是为了纪念屈原。然而端午节是我国传统节日中非常古老的一个节日，是历史文化遗留下来的产物，近些年新闻中谈到端午节被韩国拿到联合国去申遗成为他们的传统节日，这为保护传统文化敲响了警钟。
随着网络社会的不断发展，人们可以通过互联网技术了解时事发展，从某种意义上说人们现在离不开互联网。网页是一个文件，由网址来识别和存取，在我们输入网址后，经过快速的程序，网页文件会传送至计算机，然后通过浏 *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
览器解释网页内容。网页基本上由文字与图片两种元素组合而成。
在整个网站的设计过程中，将课堂所学习到的知识都结合的运用起来。并且，在网上网页编辑教程上学到很多新的知识，并运用到这次的设计中。
网站设计工具及技术
网页介绍
网页的制作分为静态网页与动态网页，静态网页的制作是最基本的，通过简单的表格与文字便可实现出来。而动态网页的制作则需要JS语言，相对于静态网页来说比较复杂，但是能体现出网站的灵动性。
（二）设计工具
在设计之前的准备过程是繁琐的，但是一个好的开发工具会让你在设计的过程中取得意料之外的好的效果。
1. Dreamweaver 8
以Dreameweaver 8为主要制作工具，在设计界面里以简洁新颖的原则进行规划，DW是当下最好的一个网页编辑的程序，现市面上的很多好的网页都是通过这一程序做出来的。
2.Photoshop 9
然后用Photoshop 9去处理搜集到的一些图片，可以调整图片的色调，大小变化，特效文字之类，让图片能够更好的跟网站融合。在代码的编辑过程中，以DIV+CSS为基础，并在过程中运用到HTML5的相关动态代码，让网页动感达到最大化。
三、主体
（一）流程
结构
在“中国传统节日”模块包含了：首页、端午简介、起源传说、异国端午、端午谚语、端午课堂、各种食宿。各个模块都详细的介绍的传统端午节。
详细结构图如1-1：
图1-1 结构图
打开网页，首先接触的是首页，首页是一个网页的主体。一个设计精良的首页可以让用户更方便的了解了解网站的布局，从而更快速的掌握自己想要的信息。
界面
运用Dreamwear设计界面将中国传统节日原型网站整个框架呈现出来，但是利用Photoshop可以将这些基本框架完整的体现出来。图1-2所示：
LOGO
图片
导航
主题介绍
主题内容
图片欣赏
版权
图1-2主页整体构架
首页布局原则是不仅要简单明了，而且还要让用户感觉到新颖，这样才会让用户更快的找到他所想要的。这一次主页设计我把一些传统歌谣放在上面，让用户了解更多知识并且更加熟悉端午节。
子页框架如图1-3所示
LOGO
图片
导航
二级导航
概要
图片欣赏
版权
图1-3子页整体构架
子页是在首页的基础之上采用一般性的布局，顶部LOGO、图片让人眼前一亮；中部是在首页格式的基础上替换成内容；底部则包括图片欣赏和版权。，这样能用户更加详细的了解端午节各个方面的习俗。
3.DIV+CSS的网页布局
在各种素材准备好之后首先设计的便是网页的框架，将设计的框架搭好之后便是把素材放进去进行修饰，比如说字体合图片的格式大小之类。
首页框架做好之后，下面要进行的就是首页的div结构和层样式的建立，如今的网页设计考虑更多是搜索引擎积极给用户带来的更多便利，传统表格网页布局由于大量的HTML代码，在搜索引擎方面达不到所预期的效果，但是如果采用DIV进行网页布局的话，代码的精简的有点让其在这些方面体现出巨大的优势。
（二）网站基本功能
1.首页
对于一个网站来说首页的好坏至关重要，它不仅仅可以让用户在浏览的过程中一目了然，而且将会作为一个载体把网页的各个功能模块展现出来。比如说传统端午节的各种食宿等等。本次设计以简单明了为主，包括了顶部、导航条、主题内容与底部几个模块。
LOGO的设计主要是上面一个简单的图形，利用PS9简单的将文字与图片设计成的图片。然后就是为LOGO所在的行添加背景图片，但是背景图片要在photoshop软件中将其的透明度设置偏低一些，这样才不会影响到上层的图片效果。
界面设计是绿色为主色调给人一种淡雅清新的感觉，背景图片选择了两张让人感受到浓浓端午情味的图片。在导航条中包括端午起源、各种食宿、异国端午、端午谚语、端午课堂几个子导航。在主体内容的左侧有一段让人耳熟能详的一首端午民谣。底部采用滑动代码形成了一些图片的滑动可以让网页有种新颖的感觉，整体上的设计还是在简洁明了的前提下呈现出更多的端午氛围。详情如图2-1所示
主页
图2-1
2.起源传说
起源传说是关于端午节的一些传说。导航条的设计是在主页的基础之上在主体内容的部分又添加了一些二级导航，这样可以在界面简洁的前提下容纳更多的内容，并且可以把你所想的展现出来。包括了纪念屈原、迎接伍子胥、龙的节日恶日禁忌和夏至等。详细如图2-2所示
如图3-1
图3-1
采用的简单了HTML5的滑动效果
代码如下：
四、总结
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1706.html
