河南城建学院
网页设计》课程设计报告书
设 计 题 目:中国传统文化节日
        指 导 老 师:
学 生 学 号:
学 生 姓 名:
组      长:
      同 组 人 员:
一、  前言
中国传统文化节日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文件,这就是制作出的幻灯片文件了。
排版设计
一个好的网页,首先要有一个好看的主页,给人良好的第一印象,所以要精心设计自己网页的这一“门面”。主页的设计首先涉及到的是页面的版面编排问题(一般有表格、框架、样式表等)。主页作为一种版面,既有文字,又有图片。文字有大有小,还有标题和正文之分;图片也有大小,而且有横有竖之别。图片和文字都需要同时展示给观众,总不能简单地罗列在一个页面上,这样往往会搞得杂乱无章。因此必须根据内容的需要,将这些图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体。若抛去是图还是文字的问题,画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里,是需要点、线、面的共同组合与搭配来构造整个页面的。