河南城建学院

《网页设计》课程设计报告书

设 计 题 目：中国传统文化节日

指 导 老 师：

学 生 学 号：

学 生 姓 名：

组 长：

同 组 人 员：

一、 前言

1.1课题背景

中国的传统节日形式多样，内容丰富，是我们中华民族悠久的历史文化的一个组成部分。
传统节日的形成过程，是一个民族或国家的历史文化长期积淀凝聚的过程，下面列举的这些节日，无一不是从远古发展过来的，从这些流传至今的节日风俗里，还可以清晰地看到古代人民社会生活的精彩画面。
中国的传统节日形式多样，内容丰富，是中华民族悠久的历史文化的一个组成部分。传统节日的形成过程，是一个民族或国家的历史文化长期积淀凝聚的过程，中国传统节日无一不是从远古发展过来的，从这些流传至今的节日风俗里，还可以清晰地看到古代人民社会生活的精彩画面。中国传统节日频道将全面介绍中华传统节日，延续中国节日传值得一提的是，在漫长的历史长河中，历代的文人雅士、诗人墨客，为一个个节日谱写了许多千古名篇，这些诗文脍炙人口，被广为传颂，使我国的传统节日渗透出深厚的文化底蕴，精彩浪漫，大俗中透着大雅，雅俗共赏。
这里所介绍只是汉民族的一些较大的传统节日，我国是个多民族的国家，各民族都有自己的文化习俗，众多的民族节日，是一份有待挖掘的文化宝藏

1.2开发工具

以Dreameweaver CS4为主要制作工具，Photoshop处理相关素材。

计算机及操作系统：WindowsXP 或Windows7；

运行环境: 装有Dreameweaver CS4 的系统

1.3 Dreameweaver CS4

Dreamweaver CS4即为Dreamweaver的CS4版本，Dreamweaver是美国MACROMEDIA公司开发（后被Adobe公司收购）的集网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别是发展的视觉化网页开发工具，利用它可以轻而易举的制作出跨平台限制和跨越浏览器限制的充满动感的页面。作为突出的可视化网页编辑软件，它具有灵活编写网页的特点、可视化编辑界面、强大的web站点管理功能、具有集成特点、丰富的媒体支持能力和超强的扩展能力。

二、 课程设计题目

中国传统文化节日

用现代语言把中国传统文化的内涵表达出来，使人们真正的理解中国传统文化，这并不是我有什么能耐，而是中国传统文化中本来就包涵的本质。再者，这也是人类历史发展到今天的必然的产物，因为大家都有文化了，语言也表述能力也加强了；第三、科学已经很发达了，我可以借助科学上的发现和科学语言，对其理论体系进行系统细致地表述，这样就更有说服力与感染力。

三、需求分析

随着互联网的飞速发展，人类正进入一个前所未有的信息化社会。互联网已经成为世界上覆盖面最广、规模最大、信息资源最丰富的计算机信息网络，它不仅给人们提供了一个全新的获取信息的手段，正在逐步改变我们的生活、学习和工作方式。

作为互联网的主要组成部分，网页和网站得到了极为广泛的应用，企业、公司和机构通过网站能够宣传自己的技术和产品，个人通过主页展示自己的风采，我们可以从不同的网站获取需求的信息，掌握网页制作和网站建设技术成为了我们的需求。因此由于我国文化节日众多，我们学习制作了有关于中国传统文化节日的这个网站，以期可以使更多的人可以进一步了解我国的节日文化。

1.1 网页设计目标

网页设计满足以下原则：

（1）实用性原则;能够真正的为网民提供一个比较全面的介绍中国传统文化节日，更进一步的了解我国的传统节日。

（2）多样性原则;制作的网页不仅包涵一些介绍，还应有相应的多媒体元素让网民更直观的全面的了解

（3）简洁性原则;制作的网页要层次分明，不能有太多冗余内容，各网页之间要添加相应的链接

1.2网页需求

根据现在我国传统节日渐渐的受到外国的节日冲击，尤其是对年轻的一代影响更大，为了我国年轻一代对传统节日比较有个全面的了解，网页设计中概述了我国一些传统节日的起源、习俗、故事、养生、诗歌等内容。

四、模块设计

网页设计主要网页划分

网站有一个中国传统节日的主页，共有八个页面不同节日的分页面构成，春节网页、元宵节网页、清明节网页、端午节网页、七夕节网页、中秋节网页、重阳节网页、冬至网页以及其他的一些子网页构成。

五、 网页设计方案

框架设计

1.草图的设计，浏览了各大环保网站后,我已在心中确定了我的环保网站的大体布局,并成功的建立网站草图.

2.布局的规划，第一步新建“HTML” 在新建的空白网页的”工具栏”选项卡中选中”布局”由于在网页中”层”不好固定位置,所以我选用表格布局,进入布局模式选用”绘制布局单元格”在空白网页中根据先前设计的个人网站草图绘出网页的框架. 根据个人网站显示的需要更改表格布局的属性值, 最后成功完成了网站主页的布局设计,并根据需要调整好页面的布局表格属性值.

3. 网页背景的设计

a.打开Adobe Photoshop CS2根据网页页面的要求建立相应大小的空白图片,然后在新建的图片上进行处理.

b.使用各工具对网页背景的大体颜色进行喷绘,为使网站的背景颜色不会太过死板生硬,将各工具的”硬度”调整为0.

c.使用Adobe Photoshop CS2中的钢笔路径工具裁取网页背景所需要的装饰图片

1.打开需要抠图的图片在Adobe Photoshop CS2的工具栏上选中”钢笔”工具并将其改为”路径描点”模式.

2.使用钢笔工具描出需要抠取图片,描点完成后同时按住键盘上”ctrl”+”enter”完成路径的合并,将图选中.

3.切换到刚刚新建的网站背景图,将刚刚抠取的图片粘贴进去.

4.重复抠图步骤剪取背景所需的各种装饰图.对网站背景进行美化.最后运用了Adobe Photoshop CS2将所有网页页面的背景模板都按照草图要求美化。完成了整个网站各页面的背景模板的美化设计.

4.网页模板的建立，由于网站有很多网页是用的同一种风格，所以建立网页模板可以节省很多时间与精力，模板是做好一个网页的母版后，选择“文件“里的”另存为模板“，如果计算机以前没有建立站点，存模板时会提示建立站点，站点的文件夹要设为网页保存的文件夹，最后成功的建立了模板并运用模板建立了多个子网页。

5.广告页面flash的设计，1．打开Flash，在开始页上选择“从模板创建”中的“幻灯片演示文稿”，在弹出的对话框中选择一模板，如“科技幻灯片演示文稿”，然后“确定”即可。如果没有开始页，不要紧，可以单击菜单“文件”中的“新建”，也可出现该对话框。2．打开后如下图所示，在Flash中的幻灯片和PowerPoint结构略有不同，它是一个倒挂的树形结构。树根只有一个，在幻灯片演示中一直存在，一般用来做背景；同级之间是兄弟关系，默认情况是“替换”，也就是说第二张幻灯片如果与第一张幻灯片同在一级，当第二张幻灯片出现时，第一张幻灯片消失；还有上下级关系，与上级之间默认情况是“叠加”关系，也就是说，如果第二张幻灯片是第一张幻灯片的下级，当第二张幻灯片出现时，它是加在第一张幻灯片上面的。3．当然，模板给的幻灯片个数可能与所需幻灯片不一样，也可以自己添加幻灯片或删除它。在需要添加或删除的幻灯片上单击鼠标右键，如下图，可以很方便地添加或添除它。当选择“插入屏幕”时，插入的幻灯片与所选幻灯片同级并在所选幻灯片的下方；当选择“插入嵌套屏幕”时，插入的幻灯片与所选幻灯片是下级关系。好了，只要将每张幻灯片变成自己的内容，然后选择“文件->存盘”，再选择“文件->发布”，就会在保存文件的位置发现一个同名的swf文件，这就是制作出的幻灯片文件了。

排版设计

一个好的网页，首先要有一个好看的主页，给人良好的第一印象，所以要精心设计自己网页的这一“门面”。主页的设计首先涉及到的是页面的版面编排问题（一般有表格、框架、样式表等）。主页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体。若抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造整个页面的。

通常我们可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。在设计中应根据具体情况，选择最适合的表现手法，这样有利于主题的表现。通过点、线、面的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让观者在感受美的过程中领会设计的主题，从而实现设计的任务。

造型的巧妙运用不仅能带来极大的美感，而且能较好地突出企业形象，而且能将网页上的各种元素有机的组织起来，它甚至还可以引导观者的视线。

1、主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。

　 2、大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。

　 3、图文并茂，相得益彰。可以选择一幅适合表现主题的好图片作为主页背景，以增强吸引力。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。还可以在自己的主页设计主题词——简短的几句“广告宣传语”，可以是自我介绍，也可以是网页主题说明，还可以是一首抒情小诗……可以随意设计。

图片是文字以外最早引入到网络中的多媒体对象。网络可以图文并茂地向用户提供信息, 成倍地加大了它所提供的信息量。而且图片的引入也大大美化了网络页面。可以说, 要使网页在纯文本基础上变得更有趣味, 最为简捷省力的办法就是使用图片。 于一条信息来说, 图片对受众吸引也远远超过单纯的文字。网络图片的特点: 一个特点是图片质量不需很高。因为网络图片一般只显示于计算机的显示器上,受显示器最小分辨率的限制, 即使图片的分辨率很高, 颜色深度很大, 我们的肉眼也经常无法把它和一幅处理过的普通图片区分开来。一般来说, 分辨率为72dp i(do t per inch) 是大多数图片最佳选择; 另一个特点是, 图片要尽量小。网络页面的图片用于网络的传输, 受到带宽的限制, 其文件尺寸在一定范围内越小越好。这也是适应信息高速公路的要求。文件的长度越小, 下载的时间就会越短。图片位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图片的选择和优化的同时, 应考虑图片在整体编辑计划中的作用, 达到和谐整齐。要达到这样的效果, 在页面图片的合理选用时, 一要注意统一, 二要注意悦目, 三要注意突出重点, 特别是在处理和相关文字编排在一起的图片时。

视觉设计

网页是通过视觉元素的引人注目而实现信息内容的传达, 为了使网页获得最大的视觉传达功能, 使网络真正成为可读强性而且新颖的媒体, 网页的设计必须适应人们视觉流向的心理和生理的特点, 由此确定各种视觉构成元素之间的关系和秩序。因此,设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。视觉流程的形成是由人类的视觉特性所决定的。因为人眼晶体结构的生理构造, 只能产生一个焦点, 而不能同时把视线停留在两处或两处以上的地方。人们在阅读一种信息时, 视觉总有一种自然的流动习惯, 先看什么, 后看什么, 再看什么。视觉流程往往会体现出比较明显的方向感, 它无形中形成一脉络, 似乎有一条线、一股气贯穿其中, 使整个版面的运动趋势有一个主旋律。心理学的研究表明, 在一个平面上, 上半部让人轻松和自在, 下半部则让人稳定和压抑。同样, 平面的左半部让人轻松和自在, 右半部让人稳定和压抑。所以平面的视觉影响力上方强于下方, 左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”, 也就是最优选的地方。在网页设计中一些突出的信息, 如主标题、每天更新的内容等通常都放在这个位置。当然视觉流程是一种感觉而非确切的数学公式, 只要符合人们认识过程的心理顺序和思维发展的逻辑顺序, 就可以更为灵活地运用。在网页设计中, 灵活而合理地运用视觉流程和最佳视域, 组织好自然流畅的视觉导向, 直接影响到传播者传达信息的准确与有效性。所以在网页的编辑设计中, 视觉导向是一个要点, 网页的设计是一种创造, 首先要立足信息的传达, 但又要符合人们较为普遍的思维习惯, 做到视觉流程自然、合理、畅快。成功的视觉流程安排, 能使网页上的各种信息要素在一定空间内合理分布, 能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。

色彩设计

网页在一定意义上说也是一种艺术品, 因为它既要求文字的优美流畅, 又要求页面的新颖、整洁,使用色彩可以产生强烈的视觉效果, 使页面更加生动。而且, 浏览者在浏览网页时, 留下的第一印象就是页面的色彩设计, 它的好坏直接影响阅读者的观赏兴趣。因此, 色彩设计在网页设计中居于十分重要的地位。网页的色彩设计应把握以下几个方面:首先是整个页面的色彩选择, 确定一个主色调,可以有利于体现网站主题。我们现在看到的网页, 一般以浅色为背景的居多, 如浅灰色、浅黄色、浅蓝色、浅绿色。以浅颜色为底, 柔和、素淡, 配上深颜色的字, 如黑色, 读来自然、流畅, 也有利于突出页面的重点, 有利于整个页面的配色, 更容易为大多数人认可和掌握。其他一些次要内容, 如背景图片、线条适宜采用不抢眼的颜色, 以免喧宾夺主。只有少量精心选择的元素, 为了突出强调的需要, 才采用明亮的色彩, 这些彩色亮点就会产生强烈的视觉冲击, 但如果用得太多了, 就会形成一种均匀的噪声, 而达不到强调的效果。其次, 在背景的色调搭配上一定要注意不能有强烈的对比, 特别是同时使用色彩对立的颜色。大面积颜色适宜采用低比度, 因为过于丰富的背景色彩会影响前景图片和文字的取色, 严重时会使文字溶于背景中, 不易辨识。所以, 背景一般应以单纯为宜。

如果需要一定的变化以增加背景的厚度, 也应是在尽量统一的前提下的一种变化。例如在制用标题时,为追求醒目的视觉效果, 可用比较深的颜色, 配上对比鲜明的字体。实际上背景的作用主要在于统一整个网页的风格和情调, 对视觉的主体起到一定的衬托和协调作用, 一方面吸引网民的注意力, 另一方面有助于体现网站的主题。

主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。色彩具有象征性，具有民族性，还具有明显的心理感觉，比如冷、暖的感觉，进、退的效果等。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。几种配色方案：

1、暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。
　　2、冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。
　　3、对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

4、主页底色。底色深，文字的颜色就要浅，以深色的背景衬

六．设计效果

首页面

首页面在整个设计中起主线作用，以后的各个子模块都是对这个模块中的内容的详细介绍，这个模块主要用表格布局，色彩以绿色调为主，给你人以明了的感觉。

中秋节网页

里面添加了flash动画效果

七夕节网页

对部分介绍内容文字做了跑马灯效果

冬至网页

七、设计总结

我主要做了七夕节、中秋节和冬至的网页以及里面的子网页部分，共六个页面。这次课程设计时间急任务比较重，某方面做的不是很专业，还有好多要学习的地方。通过这次网页设计，明白了一些内容。坚持原创：刚开始学做主页时，适当模仿别人的优秀设计是可取的，但模仿绝不等同于抄袭，一定要把握好其中的尺度。设计是这样，内容的选取也是如此，多一些原创的内容，主页才会带有更多的个性色彩。先为站点定义好统一的外部CSS，内部页面都调用这个CSS，这样不但可以让的网页在浏览器改变设置时不变形，还有助于保持整个站点的风格统一，并且方便修改。网页课程设计它不仅为学习者提供了丰富的学习资源，还为学习者提供了功能强大的协作平台和专题研讨区，为学习者开展协作学习、交流和探讨相关问题、展示自己的学习成果提供了良好的舞台，通过教学实践分析可得出“中国传统文化节日”专题网站教学对能力提高，知识获取，合作情况、学习态度，任务完成，环保知识、环保意识，环保行为等方面都取得了良好的效果。信息技术与课程整合中“整合”的实质与落脚点是变革传统的教学结构，创建新型的、既能发挥教师主导作用又能充分体现学生主体地位的以“自主、探究、合作”为特征的教与学方式，落实创新精神与实践能力培养的目标。

参考资料

《网页设计技术教材》 童爱红 清华大学出版社 2005年1月

《网页设计与制作》 蔡伯峰 清华大学出版社 2010年5月

《网页设计技术》 顾晓燕 清华大学出版社 20009年12月