1、河北旅游职业学院,茶网站设计与制作,系 名 称：班 级：学生姓名：学 号：指导教师：时间：2012年3月10日,摘要Internet正在以强大的冲击力影响着人类的生活。Internet的出现和迅速发展， 彻底改变了人们的传统生活方式。Internet现在已经渗透到了人类社会的各个领域，以及人们的日常生活的各个环节。Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。同时也有越来越多的企业通过互联网来展示自身形象，提供服务和产品资讯。以这种廉价的方式获取最大的宣传效果
2、。所以说，网页制作已经成为现代社会中人们的一种基本功，越来越多的人希望学习如何制作网页,同时越来越多的网页制作工具展现在人们面前。因此网页设计与制作显得尤为重要。关键词：网页设计，网站需求，网页制作，色彩分析，发展趋势,河北旅游职业学院,第一章 绪论,1,2,3,4,第二章 网站需求分析,第三章 网页设计概述,第四章 网页设计架构及色彩,5,第五章 网页设计制作发展趋势,茶网站设计与制作,1.1 研究背景 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布的信息主要是通过网站来实现的，获
3、取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 承载着中华文明的小小茶叶对中国的影响非常大，它不但征服了世界上大大小小的民族，还促成了美国的诞生，推动了英帝国的崛起，加速了清帝国的衰败。可以说，中国茶叶之路就是中国文化的传播之路。中国茶叶已经成为中国茶叶帝国的象征。科技不断发展，时代不断进步，网络茶文化无疑成为了推动中华文明的血脉，见证着中华民族的不断成长。,第一章,1.2 研究目的 网站是企业向用户和网民提供信息（包括产品和服
4、务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站 （或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。INTERNET上的茶网站无外乎两种：一种是推销茶叶的企业型网站，另一种是介绍茶了解茶叶知识的网站。目前INTERNET上推销茶叶的企业型网站比比皆是，因此做一个推广茶叶文化了解茶叶文化发展史的网站显得尤为重要。本网站不以推销茶叶为目的，只为让品茶人了解更多的茶叶文化，懂得更多的茶叶知识，极大的符合现代人的需求。,1.3 研究意义Internet正在以强大的冲击
5、力影响着人类的生活。Internet的出现和迅速发展，彻底改变了人们的传统生活方式。Internet现在已经渗透到了人类社会的各个领域，以及人们的日常生活的各个环节。Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。同时也有越来越多的企业通过互联网上来展示自身形象，提供服务和产品资讯。以这种廉价的方式获取最大的宣传效果。此次茶网站亦是用最廉价的方式去推广中国茶叶文化几千年的历史。,第二章,第一阶段,2002年以前，定义为网站的“萌芽式”发展期，是网站形成的初级阶段
6、。,2002年2008年，定义为网站的“粗放式”发展期，是网站的变革阶段。,第二阶段,第三阶段,定义为网站的“细分式”发展期，是网站发展的成熟阶段。,01.网站定位中国名茶数不胜数，其中十大名茶远销海内外，但是仅凭供销社式的销售模式，很难打开更大的市场，不能让更多潜在客户了解到中国茶叶的历史。,03.网站功能现在互联网上的茶网站层出不穷，无外乎宣传自己的产品。几张精美的图片几句简单的文字，旁边再附上买几送几的惊喜。对于大多数消费者来说无疑是司空见惯的事。,网站需求分析,第二章,02.目标受众群体分析 现代的中国人对茶叶的理解已不如我们的祖先，据了解老年人都比较喜欢喝茶，而茶叶在年轻人当中几乎没
7、有市场，“茶为国饮”这一观点的传承遇到了很大的挑战。,1、设计”一词属于合成词，“设”指的是精心思考。“计”是指精密的制作。由此可知，网页设计首先要在了解客户和产品的基础上，以目标群的特点为设计基础，精心构思，到规划方案和效果图，再通过相应的软件按照精确的制作方式完成网站的制作。,2、网页设计属于跨学科设计，包括文字编排、美术设计和数据设计等方面，美术设计部分是其中重要的部分。一个设计精良的网站肯定要比无序排列的图文更容易使浏览者产生好感。正是这个原因，每个网站都非常注重美工设计。,第三章,3、尽管网页设计与平面设计在制作流程上有很多相同之处，但是由于网页设计受到更多的兼容性限制，发布的载体也
8、不同，因而随着行业发展逐渐呈现出自身的特点，其制作也呈现出特有的流程。这些流程是从整体规划开始的。,网页设计论述,第三章,网页设计要素,1、版面布局 一般而言常用的版面样式分为以下几类：TT型 T型 三型 POP型 对比布局。本网站采用的是三型布局结构，分为top、contenter、footer三大部分，其中contenter为中部又分为left和right两部分。具体页面板式见图1、图2：,图 1 版面布局样式1,图 2 版面布局样式2,第三章,网页设计要素,2、浏览导航 本网站采用了下拉列表的导航方式，方便用户准确的跳转到该网站的任何位置。导航主要分为首页、分类、茶道、茶图、茶谱、茶具、
9、茶艺、茶饮八个板块，每个板块下又有相应的子连接。具体导航示意图如下：,图 3 导航缩略图,网页设计要素,3、图片文字 茶叶总能给人一种清新淡雅之感，因此此次网站中所涉及到的图片均以清新淡雅的绿色为主，给人焕然一新的感觉。导航之上的滚动图片亦是选取了秀丽的茶园风光，使整个网站看起来春意盎然。网站正文均以宋体12号字为主。文字与图片主要运用了嵌套模式，使之看起来浑然一体。,第三章,第四章,白色,绿色,橙色,白色是最好的背景颜色在网页上。,色彩特征,黄色,红色,蓝色,黑色,网页设计色彩分类,红色是情感最鲜艳的色彩，可能会导致更快的呼吸。,橙色是非常热的颜色对人的眼睛。,黑色是网页设计师最喜欢的颜色来
10、显示文字，但作为背景使用时，它的影响极坏。,蓝色是第二个最受欢迎的网页设计师之间的颜色。,绿色是最兼容的颜色，并有很大的自愈力。,黄色是颜色，提高集中力。,第四章,网页设计色彩分析,1、主色即在一个网页中所占面积最大的颜色，也就是网页的中心颜色。以茶网站为例，在本网站中绿色所占面积最大因此无疑成为了本网站的主色调，绿色象征着自然，并且有一种治愈性的特质。它可以用来象征成长与和谐。绿色让人感到安全这也正与茶的沁心芳香融为一体。,图 4主色调配图,第四章,网页设计色彩分析,2、背景色背景色即所浏览网页的框架颜色，也就是中心内容以外的部分。以茶网站为例，本网站背景色主要以淡蓝色（#6666FF）、白
11、色（#FFFFFF为主，白色代表纯洁神圣，蓝色象征平静久远，蓝色与白色的结合恰到好处的体现了中国茶文化的精髓。,图 5背景色配图,第四章,网页设计色彩分析,3、融合色 融合色即在网页不同地方的相同颜色，分布面积广形式比较零散。茶网站中并没有具体体现融合色。,4、强调色 强调色即面积较小但反差相对较大的颜色，网页上使用强调色一般是为了吸引浏览者的眼球。在茶网站的设计中并无过多的体现该颜色。,第五章,茶文化是中华民族的血脉茶网站以绿色为主象征着和平 少有不以商业利益为目的的茶网站。,在开始着手之前我搜集了大量的茶叶素材，并对它们做了相关的处理，目前茶网站中的图片都是经过筛选并处理过的清晰图片。,添
12、加了导航部分，导航我使用了下拉列表形式，运用了子菜单，使用户操作起来更加方便。,网页的三大部分分别为：top、contenter、footer。网页总体宽度为950px。整个茶网站包含73个静态页面，彼之间相辅相成。,1、构思,3、框架结构,2、搜索素材,4、添枝加叶,茶网站设计与制作步骤,第五章,茶网站的模块及主要功能,1、top及主要功能top主要分为两部分：滚动图片和导航。以下内容主要对导航部分做介绍。导航主要分为了八个方面，分别为：首页、分类、茶道、茶图、茶谱、茶具、茶艺、茶饮。,图 6导航示意图,图 7导航示意图,第五章,茶网站的模块及主要功能,2、contenter及主要功能 Co
13、ntenter中有两个模块：第一，左侧270px右侧675px（主要体现在首页和left文件中），左侧为28种名茶的名称及连接，右侧为各种茶类的具体介绍（如图8所示）。第二,左侧675px右侧270px（主要体现在right文件中），左侧为茶文茶史，右侧为28种名茶及相关链接（如图9所示）。,图 8 left相关示意图,图 9 right相关示意图,第五章,茶网站的模块及主要功能,3、footer部分及主要功能 Footer即一个网站的结尾，对于一个网站来说底部似乎是无关紧要的部分，但它却是一个网站不可缺少的元素。对于商业性的网站来说底部还很有可能成为整个网站的点睛之笔。茶网站底部以深灰色为主
14、嵌入相关文字紧扣网站主题，突出爱茶授茶之意。,第五章,网页设计与制作的发展趋势,网页设计在中国的发展，经历了从模仿到自主创新的发展过程。在这期间，中国的网页设计者们，将现代的网页设计技术和中国传统的书法、图形、色彩、布局等文化元素相结合，创造了具有中国特色的网页设计模式，实现了网页“中国味”和实用性的完美结合。正如茶网站的建设一样，古老的文化底蕴与现代技术的结合，历经艰辛终于实现了美的绽放！在互联网越来越深入到生活中的每一个角落的年代，网页的表现形式就如同以前书本上的文字，传达着的是网络语言，每一条线、每一个色块、每一种版式、每一种组合都传递给读者一种感觉。因此网页设计的发展将会引领整个网络时代！,河北旅游职业学院,谢谢观看！,
