湖南涉外经济学院课程设计报告课程名称：网页设计报告题目：“舌尖上中华人民共和国”网页设计报告学生姓名： ***所在学院：信息科学与工程学院专业班级：电商本**班学生学号： * *指引教师： ***6 月24 日课程设计任务书摘要《舌尖上中华人民共和国》是中华人民共和国央视播出美食类纪录片，重要内容为中华人民共和国各地美食生态。

通过中华美食各种侧面，来呈现食物给中华人民共和国人生活带来典礼、伦理等方面文化；见识中华人民共和国特色食材以及构成中华人民共和国美食特有气质一系列元素；理解中华饮食文化精致和源远流长。

该片重要主题是“变”，向观众展示老式农耕中华人民共和国，同步也告诉观众诸多中华人民共和国老式正在变化。

这不但仅是在拍摄美食，更是在拍摄承载中华人民共和国人精神食物。

本网站简介了中华人民共和国各地美食，网页是依照《舌尖上中华人民共和国》这档节目中七个主题来设计。

分别为：自然地馈赠、主食故事、转化灵感、时间味道、厨房秘密、五味调和、咱们田野。

本站建立使用了Fireworks、Flash和Dreamweaver网页制作工具。

采用HTML语言、CSS样式、Javascript脚本语言编写网页，最后使静态页面也有丰富多彩视觉效果；此外又使用了网页特效，赋予了其她页面动态之美，动静结合，主题突出，吸引浏览者目光。

核心词：中华人民共和国；美食；文化内容涉及：1.为什么要设计该网站？2.本网站包括什么内容？采用了什么技术实现3.建立本网站可以达到什么效果？目录一、作品简介................................................................................ 错误!未定义书签。

二、设计方案................................................................................ 错误!未定义书签。

1. 软硬件环境........................................................................ 错误!未定义书签。

2. 色彩方案............................................................................ 错误!未定义书签。

3. 目录构造图........................................................................ 错误!未定义书签。

三、实现过程................................................................................ 错误!未定义书签。

1. 创立本地站点.................................................................... 错误!未定义书签。

2. 首页.................................................................................... 错误!未定义书签。

3. “自然馈赠”页面............................................................ 错误!未定义书签。

4. “主食故事”页面............................................................ 错误!未定义书签。

5. “**”页面........................................................................... 错误!未定义书签。

6. 申请域名，发布网站........................................................ 错误!未定义书签。

四、结论与心得............................................................................ 错误!未定义书签。

五、参照文献................................................................................ 错误!未定义书签。

附录................................................................................................ 错误!未定义书签。

一、作品简介本作品其重要内容是关于中华人民共和国各色美食解说。

中华人民共和国文化博大精深，固然其中也包括饮食文化。

本网站通过中华美食各种侧面，来呈现食物给中华人民共和国人生活带来典礼、伦理等方面文化。

以美食作为窗口，让海内外观众领略中华饮食之美。

进而感知中华人民共和国文化老式和社会变迁。

不但这样，还展示了普通中华人民共和国人人生百味，展示是人和食物之间故事，透过美食来看社会。

我个人兴趣看美食节目，理解各类美食。

想通过本网站向社会展示中华人民共和国各地特色美食，更加理解中华人民共和国那博大精深美食文化。

二、设计方案1. 软硬件环境1）硬件环境：CPU型号：Inter酷睿i3CPU主频：1.8GHz内存容量：2GB硬盘容量：500GB显卡芯片：AMD Radeon HD 7450M+Inter GMA HD 40002）软件环境：操作系统：预装Windows8应用软件：Dreamweaver、Fireworks、PS、Flash2. 色彩方案有实验证明，色彩美丽、造型别致食物往往能更好增进食欲。

色彩是人视觉最敏感东西。

本网站所有网页重要以暖色调颜色为主。

重要以白色和淡粉色搭配，色彩明亮，不灰暗，当造型别致美食有了明亮色彩点缀，不经意间又为美食加了一份色彩。

当我挑选美食图片颜色不够完美时，我就在页面其她某些做一下稍微调节，不会让整个页面看起来过于暗沉。

3. 目录构造图本网站重要涉及七个主题以及三个次要某些。

每个主题都各有自己特色，普通来说，都是图片配文字。

有简介美食、有简介美食做法，个个不一。

如图1，就是本网页目录构造图。

图2.1 目录构造图三、实现过程1. 创立本地站点详细操作环节如下：1）打开Dreamweaver，在上面选取菜单中选取“站点”,在选取新建站点；2）给新站点命名，此外选取本地站点文献夹，如图3.1：图3.1 目录构造图在站点文献夹中新建“css”文献夹、“js”文献夹、“images”文献夹，分别保存css样式文献、javascript特效文献和图片文献，而所有网页直接保存在站点下，其中首页名为index.html。

在此过程中特别要注意是：所有文献途径和文献名中不能浮现中文字符，否则有关内容不能正常显示。

2. 首页1)首页效果图首页效果图如图3.2所示，分为四某些，分别是头部、主体、和版本阐明，其中头部有flash设计网站logo；主体某些分为导航和网页内容，其中导航菜单体现了整个网站栏目构造，涉及：自然馈赠、主食故事、转化灵感、时间味道、厨房秘密、五位调和、咱们田野，本网站就是环绕这几种模块展开；版本阐明简介了设计者个人信息。

图3.2 首页效果图2) 首页构造框图首页构造框图如图3-3所示，是通过盒子与盒子嵌套关系实现。

图3.3 首页构造框图div代码如下：<div id="container"><div id="header"><div id="logo">logo</div><div id="right">图片</div></div><div id="nav">导航</div><div id="content"><div id="menu"><div id="menu_top">图片</div><div id="menu_cd">菜单</div></div><div id="main">主体</div></div><div id="footer">版权阐明</div></div> 其详细css样式请查看附录1。

3)logo设计图3.4 logoLogo使用Flash进行设计成gif动画效果，制作环节如下:·把所需要三张图片导入到库，并转换成元件，把元件大小改为和logo 盒子大小一致。

·把场景也改为和logo盒子大小一致大小。

·第一帧把第一种元件拉到场景里，定位；设第二十帧为核心帧，把第二个元件拖到场景里，定位；设第三十帧为核心帧，把第三个元件拖到场景里，定位，中间设为老式补间，导出gif动画。

在网页中，我采用“插入|图片”方式，将gif动画图片插入在指定位置。

注意：如果插入是.swf文献，则在网页中<embed src=></embed>实现。

4）轮换图设计环节1. 将“js”文献夹复制到站点下，在htmlhead标签内引入有关文献…………………环节2. 创立html构造，并填充你内容…………………………3. “自然馈赠”页面图3.5 “自然馈赠”页面界面如上所示，采用是和首页相似模板，Header、Nav以及Footer某些都是同样样式，只是网页中间Content某些不同样，在本页中，我将六张美食图片以三行两列显示，图片下方用灰色字体表白美食名称，图片和文字均建立了超链接，单击任意图片，可以进入相应美食简介页面。

在设计时，我遇到问题是，每张图片均有边框，日后我在css文献中写上：img{ border:0px;}就去掉了图片边框，使页面更美观。

4. “主食故事”页面仿照“自然馈赠”页面，内容涉及：界面、文字描述界面内容和特效、遇到问题、如何解决、本网页特色。

..................5. “**”页面…………………………遇到问题写法：1）定位：我做网页遇到最大问题就是定位问题。