1、湖南涉外经济学院课程设计报告课程名称： 网页设计 报告题目：“舌尖上的中国”网页设计报告学生姓名： * 所在学院： 信息科学与工程学院 专业班级： 电商本 2015*班 学生学号： * * 指导教师： * 2016 年 6 月 24 日I课程设计任务书报告题目 “*”设计报告 完成时间 2016.6.24学生姓名 *专业班级电子商务本*指导教 师 *职称 *总体设计要求和技术要点II围绕本课程的教育目标，根据课程的教学大纲和教材内容，结合网站在生产、科研、管理、教学以及日常生活等各个领域的应用都可作为课程设计的内容。例如可以选择制作求职网、个人网站、公司网站、娱乐性网站、旅游网站、花卉市场、团
2、购网站等类型网站；原则上设计题目自己设定，但需要通过指导老师认可。设计的具体内容和要求包括：1、使用 HTML5 编辑网页的框架和主体内容,采用 DIV 嵌套布局页面；2、使用 CSS3 代码来设计网页的风格，统一整个网页的视觉效果；3、使用 JAVASCRIPT 来增加网页互动效果；4、站点设计合理、管理有序、无多余文件和文件夹，首页用 index.htm 命名，且在站点根目录下；5、站点至少要有两层结构，总页面数不得少于 10 页； 6、网页要有头部、导航、主体、版权说明；7、选择合适软件自己设计包含动画的网站 logo；8、用 PHOTOSHOP 或者 FIREWORKS 设计首页效果图
3、，根据效果图进行页面设计；9、网站与网页风格应该协调一致，网站结构应层次分明，内容重点突出，页面设计要符合追求色彩的搭配、布局和合理性，以及要有一定的创意；10、各个页面之间的链接要合理有效，路径要正确（相对路径） ；11、代码结构清晰，无垃圾代码；12、申请域名，发布网站。工作内容及时间进度安排III1、确定网站主题、搜集资料2、确定站点目录结构图、布局方案3、设计首页效果图，并根据效果图用 DREAMWEAVER 设计页面4、设计其余页面5、动画设计，美化页面6、增加网页特效7、网站整体调试并修改完善8、申请域名，发布网站9、撰写报告10、答辩，提交报告课程设计成果1与设计内容对应的网站2
4、课程设计报告IV摘 要舌尖上的中国是中国中央电视台播出的美食类纪录片，主要内容为中国各地美食生态。通过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化；见识中国特色食材以及构成中国美食特有气质的一系列元素；了解中华饮食文化的精致和源远流长。该片的重要主题是“变” ，向观众展示传统农耕的中国，同时也告诉观众很多中国传统正在改变。这不仅仅是在拍摄美食，更是在拍摄承载中国人精神的食物。本网站介绍了中国各地美食，网页是根据舌尖上的中国这档节目中的七个主题来设计的。分别为：自然地馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五味的调和、我们的田野。本站的建立使用了 Fire
5、works、Flash 和 Dreamweaver 网页制作工具。采用 HTML 语言、CSS 样式、Javascript 脚本语言编写网页，最终使静态页面也有丰富多彩的视觉效果；另外又使用了网页特效，赋予了其他页面动态之美，动静结合，主题突出，吸引浏览者的目光。关键词： 中国；美食；文化内容包括：1.为什么要设计该网站？2.本网站包含什么内容？采用了什么技术实现3.建立本网站可以达到什么效果？V目 录一、作品简介 1二、设计方案 11. 软硬件环境 12. 色彩方案 13. 目录结构图 1三、 实现过程 21. 创建本地站点 22. 首页 33. “自然的馈赠”页面 .54. “主食的故事”
6、页面 .65. “*”页面 .66. 申请域名，发布网站 8四、结论与心得 8五、参考文献 8附录 11一、作品简介本作品其主要内容是关于中国各色美食的讲解。中国文化博大精深，当然其中也包含饮食文化。本网站通过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化。以美食作为窗口，让海内外观众领略中华饮食之美。进而感知中国的文化传统和社会变迁。不仅这样，还展示了普通中国人的人生百味，展示的是人和食物之间的故事，透过美食来看社会。我个人爱好看美食节目，了解各类美食。想通过本网站向社会展示中国各地特色美食，更加了解中国那博大精深的美食文化。二、设计方案1. 软硬件环境1）硬件环境：
7、CPU 型号：Inter 酷睿 i3CPU 主频：1.8GHz内存容量：2GB硬盘容量：500GB显卡芯片：AMD Radeon HD 7450M+Inter GMA HD 40002）软件环境：操作系统：预装 Windows8 应用软件：Dreamweaver、Fireworks、PS 、Flash2. 色彩方案有实验证明，色彩美丽、造型别致的食物往往能更好的增进食欲。色彩是人的视觉最敏感的东西。本网站所有网页主要以暖色调的颜色为主。主要以白色和淡粉色搭配，色彩明亮，不昏暗，当造型别致的美食有了明亮的色彩点缀，不经意间又为美食加了一份色彩。当我挑选的美食图片颜色不够完美时，我就在页面的其他部
8、分做一下稍微的调整，不会让整个页面看起来过于暗沉。3. 目录结构图本网站主要包括七个主题以及三个次要部分。每个主题都各有自己的特色，一般来说，都是图片配文字。有介绍美食的、有介绍美食做法的，个个不一。如图 1，就是本网页的目录结构图。2图 2.1 目录结构图三、 实现过程1. 创建本地站点具体操作步骤如下： 1）打开 Dreamweaver，在上面的选择菜单中选择“站点”, 在选择新建站点；2）给新站点命名，另外选择本地站点的文件夹，如图 3.1：图 3.1 目录结构图3在站点文件夹中新建“css”文件夹、 “js”文件夹、 “images”文件夹，分别保存 css 样式文件、javascri
9、pt 特效文件和图片文件，而所有的网页直接保存在站点下，其中首页名为 index.html。在此过程中特别要注意的是：所有文件的路径和文件名中不能出现中文字符，否则相关内容不能正常显示。2. 首页1)首页效果图首页效果图如图 3.2 所示，分为四部分，分别是头部、主体、和版本说明，其中头部有 flash 设计的网站 logo；主体部分分为导航和网页内容，其中导航菜单体现了整个网站的栏目结构，包括：自然的馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五位的调和、我们的田野，本网站就是围绕这几个模块展开的；版本说明介绍了设计者的个人信息。4图 3.2 首页效果图2) 首页结构框图首页结构框
10、图如图 3-3 所示，是通过盒子与盒子的嵌套关系实现的。图 3.3 首页结构框图div 代码如下：logo图片导航图片菜单主体版权说明其具体 css 样式请查看附录 1。3)logo 的设计图 3.4 logo5Logo 使用 Flash 进行设计成 gif 动画效果，制作步骤如下: 把所需要的三张图片导入到库，并转换成元件，把元件大小改为和logo 盒子大小一致。 把场景也改为和 logo 盒子大小一致的大小。 第一帧把第一个元件拉到场景里，定位；设第二十帧为关键帧，把第二个元件拖到场景里，定位；设第三十帧为关键帧，把第三个元件拖到场景里，定位，中间设为传统补间，导出 gif 动画。在网页中
11、，我采用“插入|图片”的方式，将 gif 动画图片插入在指定的位置。注意：如果插入的是.swf 文件，则在网页中实现。4）轮换图设计步骤 1. 将“js”文件夹复制到站点下，在 html 的 head 标签内引入相关文件步骤 2. 创建 html 结构，并填充你的内容3. “自然的馈赠”页面6图 3.5 “自然的馈赠”页面界面如上所示，采用的是和首页相同的模板，Header、Nav 以及 Footer 部分都是一样的样式，只是网页中间的 Content 部分不一样，在本页中，我将六张美食的图片以三行两列显示，图片下方用灰色字体表明美食的名称，图片和文字均建立了超链接，单击任意图片，可以进入相应
12、美食的介绍页面。在设计时，我遇到的问题是，每张图片都有边框，后来我在 css 文件中写上：img border:0px;就去掉了图片的边框，使页面更美观。 4. “主食的故事”页面仿照“自然的馈赠”页面，内容包括：界面、文字描述界面内容和特效、遇到的问题、如何解决的、本网页的特色。5. “*”页面遇到的问题写法：71）定位：我做网页的遇到的最大问题就是定位的问题。例如我网页中的主食的故事所遇到的问题如图 3-9；图 3.9 修改前问题图修改后的效果图如图 3.10图 3.10 修改后效果图我是通过修改代码实现的。首先固定整个盒子的宽，把第一个盒子（side-box）设定为左浮动，另外，把第二个
13、盒子（side-box1）附加一个样式，让第8二个盒子在服从第一个盒子的样式之后，还多服从一个从右浮动的样式。Css代码如下：#side-box float：left； #side-box1 float：right；2）侧边栏的不对称问题。之前全班一起做综合案例时，我那时的侧边栏没出问题，这次自己做网页时，侧边栏出现了几次问题。每次检查出来就是 css样式不对，当自己做网页习惯自己敲代码时，认真的检查 css 样式代码是成功的关键。另外，每一个盒子之间的距离需要用 fireworks 准确的量出来，不能凭感觉。如下图，图 3.11 修改后效果图 图 3.12 修改后效果图3）我的首页是用的一个
14、对图片有切片效果的特效，经过上面的图片时，隐藏在下面的图片会显现出来。在首页的下面，有一个查询按钮，我以为给按钮设超链接的方式和给图片设超链接的方式一样，事实不是这样的。要设置成这样的：4）每当我网页的盒子嵌套关系越来越多时，伴随的不是网页快成功的自豪感，而是越来越多的的问题。例如最简单的，本来设计的效果是版权说明放在网页末尾的，但是由于中间的 div 盒子嵌套关系不对，就出现了 footer 盒子往上跑的问题。之后我就应用源格式检查，少了两个 div 结束标记。如图 3.13：9图 3.13 盒子错位图6. 申请域名，发布网站四、结论与心得1.总结本网站特色网页分七个主题来介绍。层次明了，结
15、构清晰，首页里垂直排列的菜单就给人以舒畅的感觉。2.个人总结在本次课程设计的整个过程中，.五、参考文献1 席金菊,何碧英 编著.网页设计与制作M.北京:科学出版社,20152 .1附录附录 1#container width: 890px;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;#header height: 273px;padding-bottom: 0px;#header #logo background-color: #CCC;float: left;height: 273px;width:
16、273px;#header #right height: 273px;#nav background-color: #DEE6B3;height: 35px;width: 890px;#nav ul li font-size: 16px;color: #B57F46;float: right;list-style-type: none;margin-top: 5px;position: relative;#content height: 525px;width: 890px;#content #menu float: left;height: 525px;width: 185px;backgr
17、ound-image: url(/images/menubg.jpg);background-repeat: repeat-y;#content #menu #menu_cd ul li font-size: 20px;list-style-type: none;height: 27px;padding-left: 20px;padding-top: 20px;width: 145px;padding-right: 20px;margin-left: -42px;text-align: center;position: relative;float: right;background-imag
18、e: url(/images/menu.gif);background-repeat: no-repeat;#content #menu #menu_cd ul li a font-size: 18px;color: #d90000;text-decoration: none;display: block;font-weight: bold;#content #menu #menu_cd ul li ul display: none;position: absolute;margin-left: 90px;margin-top: -45px;#content #menu #menu_cd ul
19、 li ul li margin-left: 34px;border: 1px solid #CFF;background-color: #DEE6B3;#content #menu #menu_cd ul li a:hover color: #0FF;#content #main height: 525px;width: 705px;float: right;.box_con float: right;height: 275px;width: 705px;.box_con dl dt float:left; padding:1px; border:1px solid #d8d8d8;.box
20、_con dl dd float:right; width:188px; color:#ba8c68; line-height:1.5;#content #main #main_top background-color: #339;height: 275px;#content #menu #menu_cd ul li:hover ul display: block;#footer text-align:center;#footer dl dt height:28px; line-height:28px; background:#DEE6B3; color:#fff;#footer dl dt
21、a font-weight:bold; color:#B57F46;#footer dl dd padding:8px 0; color:#666; line-height:2;注意：css 采用行格式显示2附录 2Css 代码:body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,emmargin:0;padding:0;border:0;ul,ol,lilist-style:none;input,buttonmargin:0;font-size
22、:12px;vertical-align:middle;bodyfont-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; tableborder-collapse:collapse;border-spacing:0;a color:#333; text-decoration:none;a:hover text-decoration:none;.box01 width:1000px; margin: 50px auto; position:relative;.box01 li float
23、: left; width: 180px; text-align: center; padding-right: 10px; margin-right: 10px; height: 120px; margin-bottom: 15px; cursor: pointer; z-index:0; position:relative;.box01 li img height: 120px; margin: 0 auto;.box01 li .in position: absolute; left: 0; top: 0;width: 180px; .box01 li .in p display: no
24、ne; text-align: left;.box01 li.on z-index:99;.box01 li.on .in padding: 5px; border: 1px solid #ccc; position:absolute;z-index:100; width:auto; text-align: center; top:-40px; background: #fff;.box01 li.on .in p position:relative; display:block;.box01 li.on img height: auto; margin-bottom: 8px;.bsc background:url(/images/icon01.png) no-repeat; position:absolute; right:10px; width: 19px; height: 15px; font-size: 0; float:right;/* CSS Document */3教师评语：教师评语及设计成绩课程设计成绩： 指导教师： （签名） 日期： 年 月 日
