网站制作技术综合设计报告
主 题
学生姓名
学生学号
专业班级
学 院
指导教师 湘菜之家
2015年 12 月 12 日
一．网站设计需求
1. 网站宣传主题
本网站的主题为湘菜，名为“湘菜之家”，目的在于向读者简单介绍湘菜相
关的常识以及简单而经典的几道湘菜菜式，也便于对中华饮食文化及湖湘文化感
兴趣的读者更好地了解湘菜和湖湘文化，更好地从湘菜的热辣口感中感受到湖南
人民由于长期以来生长在这片土地上产生的热情坚强、奔放“霸蛮”的可爱性格。
同时，我本人作为作为土生土长的湖南人，对于家乡的湘菜文化一直很感兴趣，
选择这个主题也是我表达对家乡的热爱的一种方式，希望能有更多的人了解湘菜，
了解湖南。
2. 网站栏目及组成
湘菜之家
湘 湘 经
菜 菜 典
简 名 菜
介 师 肴
谭 欧 许 组 剁 永 金 鱼 百 子 毛 添 阳 墨 菊 庵 椒 州 鱼 香 鸟 龙 家
三 烂 泉 云 鱼 鱼 血 戏 豆 朝 脱 红
阳 翅 翅 鸭 莲 腐 凤 袍 烧 肉
图1. 网站目录结构
网站的目录结构如图1所示。本网站一共十六页，由“湘菜简介”、“湘菜名
师”、“经典菜肴”三个主要栏目构成。“湘菜简介”栏目由“湘菜简介”这一个
页面来展示；“经典菜肴”栏目由“湘菜名师”、“剁椒鱼头”、“子龙脱袍”、“毛
家红烧肉”、“永州血鸭”、“百鸟朝凤”、“组庵鱼翅”、“金鱼戏莲”、“鱼香豆腐”
等九个页面组成；“湘菜名师”栏目由“湘菜名师”“许菊云”、“王墨泉”、“欧阳
烂阳”、“谭添三”等五个页面组成。
“湘菜简介”栏目用一个页面简要介绍湘菜发展历史、菜系特点、地区特色、
口味特色等方面；“湘菜名师”栏目简要介绍了许菊云等四位湘菜名师，以视频
介绍的方式为主，对欧阳烂阳和王墨泉大师的介绍则采用视频和文字结合的方式；
“经典菜肴”栏目简要介绍了组庵鱼翅等八道经典湘菜的来由故事、食材准备、
制作方法等方面。
三．网站功能
该网站将实现以下功能：
1. 首页展示：网站logo 、导航条实现超链接、网站名称字幕滚动、相关图
片的运动、插入音频文件《辣妹子》；
2. “湘菜简介”页面展示：以简要文字介绍湘菜、锚记链接实现页面内容的
快速跳转、以CSS 样式来设置背景图案、插入音频文件《乡里妹子进城来》；
3. “湘菜名师”页面展示：用超链接实现该界面与各子页间的链接，读者可
根据自己的兴趣选择进入不同的子页了解对应的湘菜大师。以GIF 动图的形式展
示动画，以图层来实现页面布局；
4. “湘菜名师”页面各子页：插入三段视频，以视频或者视频文字相结合的
方式来介绍湖南有名的湘菜大师；
5. “经典菜肴”页面展示：以超链接的方式实现该页与其各子页的联系，读
者可根据自己的兴趣选择进入不同的子页了解相关菜式的信息；
6. “经典菜肴”页面各子页：图片展示各色菜肴，文字介绍对应菜肴的来源
故事背景、食材准备、制作方法、制作过程小贴士等内容。
四．网站内容
1. 版面布局
本网站几乎所有页面都采用了表格布局，并插入一些图层。部分页面（王墨
泉.html 、湘菜名师.html) 采用图层布局。
2. 网页素材获取方式
本网站图片均来自网络资源，大部分图片是我用PS 软件处理过的（其中“墨
竹图”、“1”采用滤镜处理过，logo 是自己用PS 软件制作的，“湘菜名师背景”
用PS 添加了文字）。
本网站中的视频文件及音频文件均来自网络资源，采用插入媒体的方式将它
们插入到网页中。对于音频文件，我还使用背景颜色为白色的图层将页面显示出
的插件覆盖。使界面看起来更加干净利落。
3. 导航方法
本网站首页制作了一个导航条，通过文本链接实现首页与相对应子页的链接
（如图2所示）。在“湘菜简介”页面中采用了锚记链接实现页面跳转，用户可
以通过点击相应的文字将页面跳转到相应的区域，继而阅读相对应的内容。例如
点击“发展历史”，页面就会自动跳转到对应的标题“发展历史”处，然后用户
就能阅读湘菜发展历史相关的内容并通过点击这段文字末尾的“返回顶部”返回
到顶部。（如图3所示）。其他页面均采取文本链接的方式与相关页面实现链接，
如“经典菜肴”页面与其子页“组庵鱼翅”，点击“经典菜肴”页面中的“组庵
鱼翅”，则对应的子页“组庵鱼翅被打开。点击“组庵鱼翅”页面底部的“返回
‘经典菜肴’”便可以返回“经典菜肴”页面。（如图4及图5所示）。
图2 网站首页中有导航条
图3 “湘菜简介”页面中的锚记链接
图4 “经典菜肴”界面
图5 “组庵鱼翅”界面底部插入了超链接
4. 各网页内容具体内容
见“网站功能”部分。
5. 色彩选择及搭配
本网站以红色及白色作为主要色调，突出传统文化的特色。在图片搭配上基
本上使用中国元素或者传统菜肴图片，并且多数界面配有火焰纹的图案（如图6
所示），体现出了传统文化的庄重大方。除此之外，网站使用少量厨师的动图或
者静态图片进行配图。
图6 火焰纹
6. 各网页之间的链接关系
本站各网页之间的链接方式如图7所示，图中箭头均为双向箭头，而“湘菜
简介”页面内部除了对首页“湘菜之家”的文字链接还采用锚记链接对“湘菜简
介”页面自身进行跳转。
7. 动态网页技术运用
在这个网站中，我使用了4个JavaScript 脚本。其中三个是用于实现图片的运动，剩下一个用于字幕滚动。这四个脚本都位于首页。
实现图片运动的一段代码如下，其他两个与之类似：
img{display:block; }
当鼠标停留在图片上时，clearInterval 函数清除时间间隔，图片不移动；鼠标移开时，setInterval 函数重新设置时间间隔。
实现字幕滚动的代码如下：
onmouseout="text1.start()" onmouseover="text1.stop()" width="100%" height="55" id="text1">湘菜之家
以上代码控制“湘菜之家”四个字的水平运动，当鼠标停留在字幕上时停止，当鼠标移开时运行。如图8
所示：
图8 字幕滚动
五．遇到的问题及解决办法
在制作本网站的过程中我遇见一些问题，主要有3个。以下就是在制作过程中遇见的问题及解决的方法：
1. 如何去除超链接的下划线及改变其蓝色字体的问题
在制作过程中我发现我插入了超链接之后相应的字体就会变成蓝色，下方也会出现一条下划线，当时没有办法去除，但是又觉得影响页面美观。后来经过认真学习，我使用CSS 样式来解决这个问题。如图9所示，这个CSS 样式的运用使得原本蓝色的“返回首页”字样变为了红色，下划线也被去除：
图9 设置超链接的CSS 样式
2. 如何使得背景图像可以移动的问题
对于如何使背景图像可以移动的问题我一样采用CSS 样式来解决。例如，图10
中的祥云图案可以随着浏览器滚动条的滚动而滚动，位置被固定，不会因
为浏览器滚动条拖动而变化。
图10 背景图案样式设置及设置效果
3. 如何改变页面中部分文字的颜色及字体、大小的问题
一开始制作这个网站的时候我发现，如果我使用我想改变一些字样的颜色、字体、大小的属性，那么整个页面中的字都会发生同样的变化。后来，学习了一点HTML 语言之后，我使用HTML 语言对代码进行修改，达到了理想的效果。比如说，我想将一个界面中的一段文字设置为4号字体、楷体的形式，我就在这段文字前后加入如下代码：
这样就完成了文字的修改。
六．总结
本次网页设计是我第一次制作网页，也是第一次使用Dreamweave CS5制作网页，这个网站一共16页。在这个过程中，我收获了很多，学习了一些有关于这款软件的使用方法以及网页制作的技术，例如用表格和层布局、使用CSS 样式、使用超链接、使用锚记链接、插入音频视频等。同时，我也初步接触到了HTML 语言和JavaScript 脚本语言，感受到了编程语言的强大功能以及编程能力的重要性。我也用PS 软件处理了少量图片，提高了使用PS 软件的水平。
在制作的时候遇见很多的问题，但是通过老师同学的帮助以及自己翻阅书籍查询网络资料大部分都得到了解决。当然，这个网站是一个静态网站，还很不完善，界面也不是十分美观，在使用上也还有很多不变。但是我相信只要通过不断地努力学习，在不久的将来我一定可以制作出更精美实用的网页。制作的过程比较辛苦，为此我连续一段时间都睡得比较晚。出现问题的时候我甚至偶尔会觉得头痛。但是这个过程带给我的结果不仅仅只有一个成绩，而且有学习能力和动手能力的提高。短时间之内制作出这个网站也提高了我的应变能力，坚定了有问题要虚心求教的观点。我也意识到，在这个知识不断飞速更新的时代，只有不断学习才能跟上时代的步伐。
总之，这次的网站制作实践使得我受益匪浅。