策划书123

信息系电子商务专业

XinXiXiDianZiShangWuZhuanYe

饮食文化网站 策划方案

班 级： 姓 名： 时 间：

饮食文化主题网站策划方案

网页设计与制作策划书目录

一．设计概述 ............................................................................................ 3 二、网站规划 ............................................................................................ 4 1.网站主题 ........................................................................................... 4 2.网站风格 ........................................................................................... 5 3.网站建立基本原则： ....................................................................... 5 4.网站栏目结构 ................................................................................... 6 三、网站构图分析 .................................................................................... 7 四、素材准备 .......................................................................................... 12 1.文本 ................................................................................................. 12 2.站标及导航 ..................................................................................... 16 3.图片及按钮 ..................................................................................... 18 4.按钮是在DREAMWEAVER使用FLASH按钮插入的。 ......... 19 5.动画 ................................................................................................. 20 五．网站制作步骤 .................................................................................. 21 1.首页的制作 ..................................................................................... 21 2.二级页面的制作 ............................................................................. 23 六、网站制作应注意的问题 .................................................................. 29 七．网站设计总结 .................................................................................. 30

2

饮食文化主题网站策划方案

网页设计与制作策划书

前言

当今社会科学技术不断的发展，计算机应用的领域也不断的扩大，如企业，公司，工产，商店等等各行各业，在网络这个虚拟的世界里，密密麻麻的挤满了形形色色的各种站点，有关于吃喝玩乐的，有关于衣食住行的，有关于公司、企业的信息，有关于个人形象、个性的信息。他们大部分都通过各种各样的网页来宣传自己，让自己在现今网络发达的时代下增强自己的竞争能力。

一．设计概述

现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。

网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户，随时都会反馈回来对网页的批评建议等，可以根据实际

3

饮食文化主题网站策划方案

情况进行修改，这样做可以使使用者用起来更加的方便。

饮食文化是一个广泛的社会概念，人类为了生存，首先要满足吃喝的需要。人们吃喝什么，怎么吃喝,吃喝的目的、吃喝的效果、吃喝的观念、吃喝的情趣，吃喝的礼仪等饮食现象，都属于餐饮文化范畴，它贯穿于人类的整个发展历程，渗透企业经营和饮食活动的全过程，体现在人类活动的各个方面、各个环节之中。

在现今计算机应用领域广泛的社会下，为给人们提供更方便的查询饮食方面的知识，所以我做了这个饮食文化网，在本网站中，主要包括酒茶文化，餐饮礼仪，饮食典故，异国拾零，菜单菜谱，健康饮食六个方面的内容，每个页面都有详细的信息供人们参考，阅读和浏览。 中华饮食文化博大情深、源远流长，在世界上享有很高的声誉。我们要将此文化发扬广大，让人们永远记住这深厚的文化，让饮食文化源远流长。

用户需求分析 󰀀

在当今这个电子商务如此发达的市场经济环境下，越来越多的人不愿意走出家门而是更依赖于网络去了解社会动态，完成方方面面的工作事务。我们要做的就是满足那些寄希望于通过网络来了解健康饮食，吃的健康的人们。

我的网站主要介绍饮食方面的各种知识，资料。随着现在中国经济的告诉发展，人们也越来越高要求地追求健康饮食的提高。再一方面，饮食文化作为中国博大精深的历史文化，人们对此的

4

饮食文化主题网站策划方案

了解有些缺乏，所以我想做饮食文化网让人们加深对饮食文化的关注。

二、网站规划

1.网站主题

饮食文化为主页，主要包括酒茶文化，餐饮礼仪，饮食典故，异国拾零，菜单菜谱，健康饮食六个子页面。

2.网站风格

网站主要做的是饮食方面的内容，所以我选用的是暖色系的背景，版式设计较为自然、流畅，在色彩搭配上一般采用浅色、黄色的暖色调。还带有一点古典的感觉，在页面中采用具有文化底蕴的图像和文字进行装饰，图片也选用的大多都是食物图片，整体是暖色系的风格，诱发人的食欲，给人温暖和温馨的感觉，同时暖色系的色调，也能体现中华饮食文化的历史悠久，博大精深。

3.网站建立基本原则：

1) 整体规划合理，导航菜单清晰 2) 网站建设导向明确，重点突出 3) 网站有良好的可扩充性

5

饮食文化主题网站策划方案

4) 安全的运行环境

5) 网站的促销功能得到明显体现 6) 网站内容与现实生活信息相协调 7) 支持多种客户终端

4.网站栏目结构

一级栏目 首页：饮食文化 酒茶文化 餐饮礼仪 饮食典故 异国拾零 菜单菜谱 健康饮食

二级栏目 酒文化，茶文化 中西餐礼仪 特色美食典故 外国饮食习俗 风味小吃 健康饮食视频 三级栏目 酒，茶的发展史 礼仪介绍 饮食典故介绍 饮食习俗介绍 小吃的制作步骤 健康饮食小常识 首页中的菜单 主菜单名称 酒茶文化 餐饮礼仪 子菜单名称 酒文化 茶文化 中餐礼仪 西餐礼仪 6

饮食文化主题网站策划方案

饮食典故 异国拾零 菜单菜谱 健康饮食 各低方的风味美食 外国饮食习俗 美味菜肴的制作方法 健康调查问卷 网站目录结构和链接结构 文件夹名称 TXT IMAGE FIASH NOTE SWF HTML LIANJIE 存放的文件类型 网站文字，文本内容 网站图片资料 网站FLASH动画 网站代码文件 网站按钮文件 网站页面 网站链接的三级页面 三、网站构图分析

主页的设计以简单温馨为主，背景是杏黄色为主，既能给人温暖的感觉，也能体现出文化这一元素。其设计布局分三部分，第一部分：第一部分是站标、导航；第二部分是页面的主体；第三部分是版权信息。

7

饮食文化主题网站策划方案

背景图片

第一部分是导航，在页面的上方插入背景图片，写有饮食-文化，表明网站的主题。

第二部分是网站的主体，在页面的左面部分插入一张竹子的图片，是绿色的，与本网战的颜色不冲突，而且能给人清新，自然的感觉。用PS软件，将柱子图片用裁剪工具裁剪为适合网站的大小。

8

饮食文化主题网站策划方案

中心部分是主要部分，用闪客之锤软件，做出了图片移动的效果，是各种美食图片，引起人们的食欲，在图片的旁边，是本网站的导航，用黄色的柱子做框架，把各个导航的内容组合起来，整体感觉简单又不改变整个网站的风格。先建一个图层，用矩形选框工具画出一个导航内容的大小，用渐变工具跳出中间偏白，两边偏黄的颜色（用吸管工具在相近颜色上选取），垂直渐变，还对其添加了不同的效果操作（如色阶调整、模糊、羽化等）就做出了基本样子，画出边框的图形，复制同样的七个，结合到一起，用文字工具写上字，就完成了导航的制作。

在左边部分还有每日推荐的新信息，还有饮食文化几个艺术大字，在字上插入了一个水纹涟漪的FLASH，是网页具有动态感，在左下

9

饮食文化主题网站策划方案

方还有一张茶壶和茶杯组合的图片，整个中心部分，动静结合，既有文化底蕴，又体现出了网站的主题思想内容。

第三部分是版权信息部分，在整个页面的最下方，添加版权信息：郑小娟，联系电话和电子QQ邮箱号，将其居中显示。

以上主页就是整个主页的制作结果展示，做完主页面，子页面制作就比较简单了，二级页面我一共做了五个，与主页风格相同，都是以黄色为主色调。二级页面的背景和导航都与主页不相同。

饮食文化网站的二级页面的背景是一张图片，是以黄色为主，

10

饮食文化主题网站策划方案

是一条蜿蜒的巨龙，因为整体呈现淡黄色，给人温馨的感觉，龙的图样又能体现本网站的文化主题，饮食文化源远流长。

背景图片

二级页面的战标是一张黄色图片，用FLASH在图片上做了效果，文字的自由变动。上面的字为传承中华文化，弘扬名族精神。体现网站的主题和思想。

在战标下是插入的FLASH按钮，选取的颜色也是与本网站得主色调相近的颜色黄色，总共插入了六个，包括首页，酒茶文化，餐饮礼仪，饮食典故，异国拾零，菜单菜谱，健康饮食。

11

饮食文化主题网站策划方案

导航下就是网站的主体部分了。每个二级页面的站标和导航都相同，主体部分的左侧也不变，变得是主体部分的右侧部分，在主体的下方就是本网站得版权信息部分。

三级页面做的有点简单，就是二级页面中内容的链接，背景用的是二级页面的背景，站标根据内容的不同 也有所变动。

四、素材准备

1.文本

首页基本没有文本信息，主页就要做的简单，给人耳目一新的感觉，太多的文字信息无法吸引浏览者的眼球，只有简单的导航条内容。

二级页面的文本信息相对较多点。

（1）酒茶文化页面中，有简单的酒文化和茶文化发展的介绍。

酒文化

酒是人类生活中的主要饮料之一。中国制酒源远流长，品种繁多，名酒荟萃，享誉中外。中国是卓立世界的文明古国，是酒的故乡。

12

饮食文化主题网站策划方案

中华民族五千年历史长河中，酒和酒类文化一直占据着重要地位，是绚烂的的千年文化中浓墨重彩的一笔，亘古至今。

茶文化

中国茶文化是中国制茶、饮茶的文化。作为开门七件事（柴米油盐酱醋茶）之一，饮茶在古代中国是非常普遍的。中国的茶文化与欧美或日本的茶文化的分别很大。中华茶文化源远流长，博大精深，不但包含物质文化层面，还包含深厚的精神文明层次。唐代茶圣陆羽的茶经在历史上吹响了中华茶文化的号角。从此茶的精神渗透了宫廷和社会，深入中国的诗词、绘画、书法、宗教、医学。几千年来中国不但积累了大量关于茶叶种植、生产的物质文化、更积累了丰富的有关茶的精神文化，这就是中国特有的茶文化，属于文化学范畴。

（2）餐饮礼仪页面中涉及的内容较多，所以主要是简单的标题。 中餐礼仪， 餐饮礼仪问题可谓源远流长。据文献记载可知，至迟在周代，饮食礼仪已形成一套相当完善的制度。

中餐礼仪这一标题下还包括中餐礼仪大全，敬茶时只沏八分满，餐桌上的一般礼仪，宴会上向客人敬酒的礼仪要点。

西餐礼仪，西餐程序看似复杂，其实很容易掌握，和中餐的吃法基本相似，只是服务方式有所不同。

西餐礼仪这一标题下还包括正确的西餐礼仪，餐巾的正确使用方法，西餐礼仪知多少，西餐，吃就吃个优雅。

13

饮食文化主题网站策划方案

这些标题都有相应的文章，可以通过点击这些标题来进入文章阅读的页面，通过阅读文章来进一步了解相关内容。

例：餐桌礼仪君知否

餐饮礼仪问题可谓源远流长。据文献记载可知，至迟在周代，饮食礼仪已形成一套相当完善的制度，特别是经曾任鲁国祭酒的孔子的称赞推崇而成为历朝历代表现大国之貌、礼仪之邦、文明之所的重要方面。

作为汉族传统的古代宴饮礼仪，自有一套程序：主人折柬相邀，临时迎客于门外。宾客到时，互致问候，引入客厅小坐，敬以茶点。客齐后导客入席，以左为上，视为首席，相对首座为二座，首座之下为三座，二座之下为四座。客人坐定，由主人敬酒让菜，客人以礼相谢。席间斟酒上菜也有一定的讲究：应先敬长者和主宾，最后才是主人。宴饮结束，引导客人入客厅小坐，上茶，直到辞别。这种传统宴饮礼仪在我国大部分地区保留完整，如山东、及，许多影视作品中多有体现。

14

饮食文化主题网站策划方案

清代受西餐传入的影响，一些西餐礼仪也被引进。如分菜、上汤、进酒等方式也因合理卫生的食法被引入中餐礼仪中。中西餐饮食文化的交流，使得餐饮礼仪更加科学合理。

现代较为流行的中餐宴饮礼仪是在继续传统与参考国外礼仪的基础上发展而来的。其座次借西方宴会以右为上的法则，第一主宾就坐于主人右侧，第二主宾在主人左侧或第一主宾右侧，变通处理，斟酒上菜由宾客右侧进行，先主宾，后主人，先女宾，后男宾。酒斟八分，不可过满。上菜顺序依然保持传统，先冷后热。热菜应从主宾对面席位的左侧上；上单份菜或配菜席点和小吃先宾后主，上全鸡、全鸭、全鱼等整形菜，不能头尾朝向正主位。这些程序不仅可以使整个宴饮过程和谐有序，更使主客身份和情感得以体现和交流。因此，餐桌之上的礼仪可使宴饮活动周全，使主客双方的修养得到全面展示。

（3）饮食典故这个页面中的文字内容也较多。在这个页面中也是设有十五个标题，在每个标题后都有相应的文章。主要有：平安夜里平安夜里平安果，话说美味烧卖，菜名中的过桥，陕西小吃:荷叶饼，解说豆腐，烧肉的美味，恩爱的食物：老婆饼，麻婆豆腐的由来，火锅的麻辣之道，美味的萨琪玛你吃了吗？豆腐是怎样发明的，各种甜品的典故及来源，蛋挞的香酥可口，慈禧太后．百饺园．水饺威尼斯，山西的特色饮食。

15

饮食文化主题网站策划方案

（4）异国拾零，主要有各国饮食习俗和外国新年饮食习俗。 （5）菜单菜谱，主要有川香豆腐的制作步骤，红烧牛肋排的制作步骤，鲫鱼白菜汤的制作步骤，可乐红烧肉的制作步骤，当归红枣党

参鸡汤的制作步骤，这些菜的制作步骤都是本网页的三级页面，由图和文字组成。

（6）健康饮食，主体部分是用表单工具做了一个健康调查问卷，

调查浏览者的健康状况以及对本网站的意见和建议。 2.站标及导航

16

饮食文化主题网站策划方案

首页

二级页面

17

饮食文化主题网站策划方案

三级页面的部分导航

3.图片及按钮

图片的收集中食物图片占多数

还有一些和网页主题相关的图片

18

饮食文化主题网站策划方案

酒文化 茶文化

中餐礼仪 西餐礼仪

4.按钮是在DREAMWEAVER使用FLASH按钮插入的。

19

饮食文化主题网站策划方案

首页和二级页面的按钮

5.动画

在首页的中间部分用闪客之锤做了一张移动图片的效果图，在右面部分有插入一张水泊涟漪的FLASH动画效果图。

在二级页面中的站标中用FLSAH做了文字变动的效果图。在左侧部分是交换图像的效果图，在鼠标移上去的时候，图像会自动变换，增加网页的动感效果。这是用添加行为，交换图像做的。这是整个二级页面的模板的动画效果。

在餐饮礼仪页面中，右侧的文字做了移动效果，文字从下往上移动。这个效果是在代码中，找到要移动的文字，选中文字，在所选文字前添加,在文字结束的地方，添加，预览就有了文字移动的效果。

在右侧更多》》上添加显示弹出式菜单，在鼠标移到更多时，会显示下拉菜单。在窗口中打开行为，选中更多》》,添加行为，选择

20

饮食文化主题网站策划方案

显示弹出式菜单，在显示页面中设置好参数和要显示的内容，确定，就可以做出这个弹出式菜单效果。

在菜单菜谱页面中，进入每个菜的制作步骤即三级页面，在三级页面中添加了锚点，在三级页面中的首行部分添加一个是锚点，设置参数为db，在页面的下方添加文本字，回顶部，在文字上添加链接#db，即可。还在网页的最下面添加了返回二级页面的链接，返回链接的是相应的二级页面。在酒茶文化的三级页面中也加入了锚点和返回二级页面的链接。

在饮食典故页面中加入了图片移动的效果，先绘制一个层，在层上加入要漂浮的图片，打开行为，添加行为，选择时间轴，绘制好路径，预览保存就好了。

五．网站制作步骤

1.首页的制作

首页的大小为宽1000像素，高600像素，是一个较小的页面。插入一行一列的表格，编辑为1000-600的大小。在首页上再插入一行一列的表格，分别作站标部分，主体部分，版权信息部分，在插入的表格中，再拆分，布局好，再填入之前找好的素材，其中可以使用参考线做基础，做好每一步的规划。插入背景，图片，文字，

21

饮食文化主题网站策划方案

最后再插FLASH动画。在导航条的部分用热点链接，使首页可以和二级页面链接，先在首页的部分用矩形热点链接做一个矩形选框，然后链接到二级页面，二级页面就可以和首页链接上了。

首页展示

22

饮食文化主题网站策划方案

2.二级页面的制作

二级页面的大小为宽800像素，高1000像素。新建一个页面，在页面属性中插入背景图片，插入一行一列的表格，再把表格拆分成四行，最上面插站标，站标下面是导航条，导航下是主体部分,主体部分的左侧是固定不变的一组图片，右侧是根据二级页面的内容不同有不同的设计。酒茶文化的页面主体部分是分为两部分，上面是酒文化，有酒的图片和文字资料，下面是茶文化，布局和酒文化的内容相同，布局相反。

23

饮食文化主题网站策划方案

（酒茶文化）

餐饮礼仪的设计是把主体部分分成四部分，把这四部分分别作成中餐礼仪板块，西餐礼仪板块，各国饮食习俗板块，外国新年饮食习俗板块，每个板块里有标题，文字资料，图片。还有文字移动

24

饮食文化主题网站策划方案

效果和显示弹出式菜单效果。

在饮食典故页面中只有简单的文字资料。主体部分是十五个标题。

25

饮食文化主题网站策划方案

异国拾零页面和饮食习俗页面链接的是同一个页面。

菜单菜谱页面主体部分是五种名菜的图片展示，点击每张图片

26

饮食文化主题网站策划方案

即可进入链接的三级页面，在三级页面中就有详细的制作步骤。

最后是健康饮食界面，在这个页面，我用表单工具插入了一康调查问卷，在表单中有插入单选按钮，复选框，文本域，列表，

27

饮食文化主题网站策划方案

菜单和成交按钮。

三级页面做的最简单，只有站标和文字资料，因为链接的都是二级页面的标题链接。共做了七个三级页面。

28

饮食文化主题网站策划方案

以上就是整个网站的设计和制作

六、网站制作应注意的问题

（1）网站规划和栏目设置要合理：主要表现在栏目设置不应有重叠、

交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息，避免栏目过于繁多和杂乱、网站导航系统混乱；

（2）重要信息完整：要保证网站最基本的信息的完整性，在浏览者

29

饮食文化主题网站策划方案

打开页面的时候可以浏览到完整的信息内容；

（3）网页信息量足够：包括两种情况：一种页面上的内容，或者将

本来一个网页可以发布的内容不可分为多个网页，而且各网页之间必须有相互链接，不需要再次点击主页；另一方面是尽管内容总量不少，但有用的信息少，笼统介绍的内容多； （4）栏目层次过深。重要的信息应该出现在最容易被浏览者发现的

位置，应尽可能缩短信息传递的渠道，以使网站信息更加有效地传递给浏览者；

（5）网站有利于促销：通过网站向访问者展示产品、提供资料，有

多种具体表现方式，如主要页面的产品图片、介绍。使网站的主要内容能被浏览者看到并宣传出去。

七．网站设计总结

通过这次的网页设计和制作，我使用了Photoshop和Flash两个软件来制作饮食文化网站并通过Dreamweaver来实现了各页面之间的链接。使我感触很深，PhotoShop应用的范围也很广，做网站也是可以通过平面设计来完成的。而这次作品实例说明，使我掌握了不少知识，了解了策划书是怎么写，有什么作用。并且进一步掌握Photoshop Cs的应用。还学会了制作网页的基本操作和方法，了解和学到了更多的技能知识，对自己有很大的帮助。通过这次作品的制作，也发现了自己的不足，同时让我更加了解了Photoshop、Dre

30

饮食文化主题网站策划方案

amweaver这两个软件的功能及用处。虽然现在只能做简单的静态网站，但对我也是一种鼓励。因我本人的知识还是有限还不能做到很好，只是简单的设计了页面，做了一些简单的链接、而已，此网页还不是很完善，在制作的过程中曾遇到很多的问题，但都通过问老师和同学一起研究，看书等都得到了解决，每一次的失败都是成功的开始，我相信经过这次设计和制作，以后知识的不断增加，我以后一定可以做出更好的网页。

31