网页课程设计报告例子.doc

网页课程设计报告例子

5
2020年4月19日
文档仅供参考，不当之处，请联系改正。
湖南涉外经济学院

课程设计报告

课程名称： 网页设计

报告题目：“舌尖上的中国”网页设计报告
学生姓名： ***
所在学院： 信息科学与工程学院
专业班级： 电商本 **班
学生学号： * *
指导教师： ***

6 月 24 日

课程设计任务书
报告题目
“********”设计报告
完成时间
.
6.24
学生姓名
***
专业班级
电子商务本***
指导教 师
***
职称
***
总体设计要求和技术要点

围绕本课程的教育目标，根据课程的教学大纲和教材内容，结合网站在生产、科研、管理、教学以及日常生活等各个领域的应用都可作为课程设计的内容。例如能够选择制作求职网、个人网站、公司网站、娱乐性网站、旅游网站、花卉市场、团购网站等类型网站；原则上设计题目自己设定，但需要经过指导老师认可。设计的具体内容和要求包括：
1、使用HTML5编辑网页的框架和主体内容,采用DIV嵌套布局页面；
2、使用CSS3代码来设计网页的风格，统一整个网页的视觉效果；
3、使用JAVASCRIPT来增加网页互动效果；
4、站点设计合理、管理有序、无多余文件和文件夹，首页用index.htm命名，且在站点根目录下；
5、站点至少要有两层结构，总页面数不得少于10页；
6、网页要有头部、导航、主体、版权说明；
7、选择合适软件自己设计包含动画的网站logo；
8、用PHOTOSHOP或者FIREWORKS设计首页效果图，根据效果图进行页面设计；
9、网站与网页风格应该协调一致，网站结构应层次分明，内容重点突出，页面设计要符合追求色彩的搭配、布局和合理性，以及要有一定的创意；
10、各个页面之间的链接要合理有效，路径要正确（相对路径）；
11、代码结构清晰，无垃圾代码；
12、申请域名，发布网站。

工作内容及时间进度安排
1、确定网站主题、搜集资料
2、确定站点目录结构图、布局方案
3、设计首页效果图，并根据效果图用DREAMWEAVER设计页面
4、设计其余页面
5、动画设计，美化页面
6、增加网页特效
7、网站整体调试并修改完善
8、申请域名，发布网站
9、撰写报告
10、答辩，提交报告
课程设计成果
1．与设计内容对应的网站
2．课程设计报告
摘 要
《舌尖上的中国》是中国中央电视台播出的美食类纪录片，主要内容为中国各地美食生态。经过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化；见识中国特色食材以及构成中国美食特有气质的一系列元素；了解中华饮食文化的精致和源远流长。该片的重要主题是“变”，向观众展示传统农耕的中国，同时也告诉观众很多中国传统正在改变。这不但仅是在拍摄美食，更是在拍摄承载中国人精神的食物。本网站介绍了中国各地美食，网页是根据《舌尖上的中国》这档节目中的七个主题来设计的。分别为：自然地馈赠、主食的故事、转化的灵感、时间的味道、厨房的秘密、五味的调和、我们的田野。本站的建立使用了Fireworks、Flash和Dreamweaver网页制作工具。采用HTML语言、CSS样式、Javascript脚本语言编写网页，最终使静态页面也有丰富多彩的视觉效果；另外又使用了网页特效，赋予了其它页面动态之美，动静结合，主题突出，吸引浏览者的目光。

关键词： 中国；美食；文化

内容包括：1.为什么要设计该网站？
2.本网站包含什么内容？采用了什么技术实现
3.建立本网站能够达到什么效果？

目 录

一、作品简介 1
二、设计方案 1
1. 软硬件环境 1
2. 色彩方案 1
3 目录结构图 1
三、 实现过程 2
1. 创立本地站点 2
2. 首页 3
3. “自然的馈赠”页面 5
4. “主食的故事”页面 6
5. “**”页面 6
6. 申请域名，发布网站 8
四、结论与心得 8
五、参考文献 8
附录 1

一、作品简介
本作品其主要内容是关于中国各色美食的讲解。中国文化博大精深，当然其中也包含饮食文化。本网站经过中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化。以美食作为窗口，让海内外观众领略中华饮食之美。进而感知中国的文化传统和社会变迁。不但这样，还展示了普通中国人的人生百味，展示的是人和食物之间的故事透过美食来看社会。我个人爱好看美食节目，了解各类美食。想经过本网站向社会展示中国各地特色美食，更加了解中国那博大精深的美食文化。
二、设计方案
1. 软硬件环境
1）硬件环境：
CPU型号：Inter酷睿i3
CPU主频：1.8GHz
内存容量：2GB
硬盘容量：500GB
显卡芯片：AMD Radeon HD 7450M+Inter GMA HD 4000
2）软件环境：
操作系统：预装Windows8
应用软件：Dreamweaver、Fireworks、PS、Flash
2. 色彩方案
有实验证明，色彩美丽、造型别致的食物往往能更好的增进食欲。色彩是人的视觉最敏感的东西。本网站所有网页主要以暖色调的颜色为主。主要以白色和淡粉色搭配，色彩明亮，不昏暗，当造型别致的美食有了明亮的色彩点缀，不经意间又为美食加了一份色彩。当我挑选的美食图片颜色不够完美时，我就在页面的其它部分做一下稍微的调整，不会让整个页面看起来过于暗沉。
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代码如下：
把所需要的三张图片导入到库，并转换成元件，把元件大小改为和logo盒子大小一致。
· 把场景也改为和logo盒子大小一致的大小。
· 第一帧把第一个元件拉到场景里，定位；设第二十帧为关键帧，把第二个元件拖到场景里，定位；设第三十帧为关键帧，把第三个元件拖到场景里，定位，中间设为传统补间，导出gif动画。
在网页中，我采用“插入|图片”的方式，将gif动画图片插入在指定的位置。
注意：如果插入的是.swf文件，则在网页中实现。
4）轮换图设计
步骤1. 将“js”文件夹复制到站点下，在html的head标签内引入相关文件
…………………

步骤2. 创立html结构，并填充你的内容
……………
……………
3. “自然的馈赠”页面

图3.5 “自然的馈赠”页面
界面如上所示，采用的是和首页相同的模板，Header、Nav以及Footer部分都是一样的样式，只是网页中间的Content部分不一样，在本页中，我将六张美食的图片以三行两列显示，图片下方用灰色字体表明美食的名称，图片和文字均建立了超链接，单击任意图片，能够进入相应美食的介绍页面。
在设计时，我遇到的问题是，每张图片都有边框，后来我在css文件中写上：
img{ border:0px;}
就去掉了图片的边框，使页面更美观。
4. “主食的故事”页面
仿照“自然的馈赠”页面，内容包括：界面、文字描述界面内容和特效、遇到的问题、如何解决的、本网页的特色。
..................
5. “**”页面
…………………………
遇到的问题写法：
1）定位：我做网页的遇到的最大问题就是定位的问题。例如我网页中的主食的故事所遇到的问题如图3-9；
图3.9 修改前问题图
修改后的效果图如图3.10

图3.10 修改后效果图

我是经过修改代码实现的。首先固定整个盒子的宽，把第一个盒子（side-box）设定为左浮动，另外，把第二个盒子（side-box1）附加一个样式，让第二个盒子在服从第一个盒子的样式之后，还多服从一个从右浮动的样式。Css代码如下：#side-box{ float：left；} #side-box1{ float：right；}
2）侧边栏的不对称问题。之前全班一起做综合案例时，我那时的侧边栏没出问题，这次自己做网页时，侧边栏出现了几次问题。每次检查出来就是css样式不对，当自己做网页习惯自己敲代码时，认真的检查css样式代码是成功的关键。另外，每一个盒子之间的距离需要用fireworks准确的量出来，不能凭感觉。如下图，

图3.11 修改后效果图 图3.12 修改后效果图
3）我的首页是用的一个对图片有切片效果的特效，经过上面的图片时，隐藏在下面的图片会显现出来。在首页的下面，有一个查询按钮，我以为给按钮设超链接的方式和给图片设超链接的方式一样，事实不是这样的。要设置成这样的：

4）每当我网页的盒子嵌套关系越来越多时，伴随的不是网页快成功的自豪感，而是越来越多的的问题。例如最简单的，原来设计的效果是版权说明放在网页末尾的可是由于中间的div盒子嵌套关系不对，就出现了footer盒子往上跑的问题。之后我就应用源格式检查，少了两个div结束标记。如图3.13：
图3.13 盒子错位图
6. 申请域名，发布网站
…………………………
…………………………
四、结论与心得
1.总结本网站特色
网页分七个主题来介绍。层次明了，结构清晰，首页里垂直排列的菜单就给人以舒畅的感觉。…………………………
……………………………
2.个人总结
…………………………………..
在本次课程设计的整个过程中，…………...................
…………………………
五、参考文献
[1] 席金菊何碧英 编著.网页设计与制作[M].北京:科学出版社,
[2] ……………………………………….

附录
附录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: 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: 185pxbackground-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-image: 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 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_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 a { font-weight:bold; color:#B57F46;}
#footer dl dd { padding:8px 0; color:#666; line-height:2;}

注意：css采用行格式显示

附录2
Css代码:
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }
table{border-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: 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: 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: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 */

教师评语及设计成绩
教师评语：

课程设计成绩：

指导教师： （签名）
日期： 年 月 日