《网页制作技术》综合设计实践报告.docxVIP

网站制作技术综合设计报告 主  题  湘菜之家 学生姓名 学生学号 专业班级 学 院 指导教师 2015 年 12  月 12  日 湘菜湘菜经 湘 菜 湘 菜 经 1．网站设计需求 1.网站宣传主题 本网站的主题为湘菜，名为“湘菜之家”，目的在于向读者简单介绍湘菜相 关的常识以及简单而经典的几道湘菜菜式，也便于对中华饮食文化及湖湘文化 感兴趣的读者更好地了解湘菜和湖湘文化，更好地从湘菜的热辣口感中感受到 湖南人民由于长期以来生长在这片土地上产生的热情坚强、奔放“霸蛮”的可 爱性格。同时，我本人作为作为土生土长的湖南人，对于家乡的湘菜文化一直 很感兴趣，选择这个主题也是我表达对家乡的热爱的一种方式，希望能有更多 的人了解湘菜，了解湖南。 2.网站栏目及组成 湘菜之家 简  名  典 菜 谭添欧阳王墨许菊云组庵鱼剁椒鱼永 谭 添 欧 阳 王 墨 许 菊 云 组 庵 鱼 剁 椒 鱼 永 州 血 金 鱼 鱼 香 百 鸟 子 龙 毛 家 介 师 肴 三  烂  泉  戏  豆  朝  脱  红 阳  翅  翅  鸭  莲  腐  凤  袍  烧 肉 图 1.网站目录结构 网站的目录结构如图 1 所示。本网站一共十六页，由“湘菜简介”、“湘菜 名师”、“经典菜肴”三个主要栏目构成。“湘菜简介”栏目由“湘菜简介”这一 个页面来展示；“经典菜肴”栏目由“湘菜名师”、“剁椒鱼头”、“子龙脱袍”、 “毛家红烧肉”、“永州血鸭”、“百鸟朝凤”、“组庵鱼翅”、“金鱼戏莲”、“鱼香 豆腐”等九个页面组成；“湘菜名师”栏目由“湘菜名师”“许菊云”、“王墨泉” 、“欧阳烂阳”、“谭添三”等五个页面组成。 “湘菜简介”栏目用一个页面简要介绍湘菜发展历史、菜系特点、地区特 色、口味特色等方面；“湘菜名师”栏目简要介绍了许菊云等四位湘菜名师， 以视频介绍的方式为主，对欧阳烂阳和王墨泉大师的介绍则采用视频和文字结 合的方式；“经典菜肴”栏目简要介绍了组庵鱼翅等八道经典湘菜的来由故事、 食材准备、制作方法等方面。 三．网站功能 该网站将实现以下功能： 首页展示：网站 logo、导航条实现超链接、网站名称字幕滚动、相关图 片的运动、插入音频文件《辣妹子》； “湘菜简介”页面展示：以简要文字介绍湘菜、锚记链接实现页面内容 的快速跳转、以 CSS 样式来设置背景图案、插入音频文件《乡里妹子进城来》； “湘菜名师”页面展示：用超链接实现该界面与各子页间的链接，读者 可根据自己的兴趣选择进入不同的子页了解对应的湘菜大师。以 GIF 动图的形 式展示动画，以图层来实现页面布局； “湘菜名师”页面各子页：插入三段视频，以视频或者视频文字相结合 的方式来介绍湖南有名的湘菜大师； “经典菜肴”页面展示：以超链接的方式实现该页与其各子页的联系， 读者可根据自己的兴趣选择进入不同的子页了解相关菜式的信息； “经典菜肴”页面各子页：图片展示各色菜肴，文字介绍对应菜肴的来 源故事背景、食材准备、制作方法、制作过程小贴士等内容。 4．网站内容 1.版面布局 本网站几乎所有页面都采用了表格布局，并插入一些图层。部分页面（王 墨泉.html、湘菜名师.html)采用图层布局。 2.网页素材获取方式 本网站图片均来自网络资源，大部分图片是我用 PS 软件处理过的（其中 “墨竹图”、“1”采用滤镜处理过，logo 是自己用 PS 软件制作的，“湘菜名师 背景”用 PS 添加了文字）。 本网站中的视频文件及音频文件均来自网络资源，采用插入媒体的方式将 它们插入到网页中。对于音频文件，我还使用背景颜色为白色的图层将页面显 示出的插件覆盖。使界面看起来更加干净利落。 3.导航方法 本网站首页制作了一个导航条，通过文本链接实现首页与相对应子页的链 接（如图 2 所示）。在“湘菜简介”页面中采用了锚记链接实现页面跳转，用户 可以通过点击相应的文字将页面跳转到相应的区域，继而阅读相对应的内容。 例如点击“发展历史”，页面就会自动跳转到对应的标题“发展历史”处，然后 用户就能阅读湘菜发展历史相关的内容并通过点击这段文字末尾的“返回顶部” 返回到顶部。（如图 3 所示）。其他页面均采取文本链接的方式与相关页面实现 链接，如“经典菜肴”页面与其子页“组庵鱼翅”，点击“经典菜肴”页面中的 “组庵鱼翅”，则对应的子页“组庵鱼翅被打开。点击“组庵鱼翅”页面底部的 “返回‘经典菜肴’”便可以返回“经典菜肴”页面。（如图 4 及图 5 所示）。 图 2  网站首页中有导航条 图 3 “湘菜简介”页面中的锚记链接 图 4 “经典菜肴”界面 图 5 “组庵鱼翅”界面底部插入了超链接 4.各网页内容具体内容 见“网站功能”部分。 5.色彩选择及搭配 本网站以红色及白色作为主要色调，突