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