网页设计课程设计报告
| 学号 |
|
课 程 设 计
课程名称 网页设计
| 题 目 |
鑫晨之家特效网站设计 |
| 专 业 |
软件工程 |
| 班 级 |
1173班 |
| 姓 名 |
|
| 成 绩 |
_____________________________ |
| 指 导 老 师 |
|
2019年 1 月 6日至 2019 年 1 月 13 日
武汉华夏理工学院信息工程学院
课 程 设 计 任 务 书
课程名称：网页设计 指导教师：汪汝
班级名称： 软件1173、1174班 开课院、系：计算机与网络工程系
一、课程设计目的与任务
网页设计是软件专业的一门专业必修课。网页设计课程设计可以充分弥补课堂教学和实验中知识深度和广度有限的不足，更好地帮助学生系统地掌握网页设计课程的主要内容。通过课程设计的综合训练，能培养学生实际分析问题、编程和动手的能力，帮助学生系统掌握网页设计课程的主要内容，更好地完成教学任务。为后续课程打好基础。
要求学生根据所学的网页设计的相关知识，能够针对一个具体的系统，进行需求分析，总体设计、详细设计、编码、测试等，完成题目要求的功能。本课程设计是设计企业网站主页。
二、课程设计的内容与基本要求
学生根据所学的网页设计的知识，能够针对企业网页，进行系统的需求分析、系统设计、编码及测试，系统必须实现以下功能：
- 企业LOGO、网站的主要栏目和概况介绍
- 产品介绍
- 图片
- 动画
- 网页除用到框架外，还使用CSS样式
- 网页美观、页面内容丰富
三、学时分配进度安排
| 序号 |
设计内容 |
所用时间 |
| 1 |
下发任务书，集中讲解课程设计原理与方法。系统需求分析、架构及界面设计
|
1天 |
| 2 |
网页设计 |
1天 |
| 3 |
网页设计 |
1天 |
| 4 |
调试及撰写报告 |
1天 |
| 5 |
答辩 |
1天 |
| 合 计 |
1周 |
|
四、课程设计考核及评分标准
1.设计报告要求
课程设计报告要求逻辑清晰、层次分明、书写整洁。格式包括标题、提要、正文（包括需求分析，总体设计、详细设计、调试分析、心得、答辩、成绩评定。）附录(程序清单)。设计报告须每人一份，独立完成。
2.评分标准
| 评分依据 |
评分成绩 |
| 1、学习态度认真、遵守纪律 |
10 |
| 2、设计分析合理性 |
10 |
| 3、设计方案正确性、可行性 |
20 |
| 4、设计结果正确性 |
30 |
| 5、设计报告的规范性 |
10 |
| 6、实践环节的独立性与主动性 |
10 |
| 7、设计验收 |
10 |
| 总分 |
100分 |
注：成绩等级：优（90分—100分）、良（80分—89分）、中（70分—79分）、及格（60分—69分）、60分以下为不及格。
五、指导时间
| 周次 |
星期一 |
星期二 |
星期三 |
星期四 |
星期五 |
| 第18周 |
第1-4节 |
|
第3-6节 |
|
第3-4节 |
| 地点 |
现教221 |
|
现教221 |
|
现教221 |
执笔： 日期：2018-12-24
审阅： 日期：
目 录
1 设计题目 1
2 开发环境 1
3 开发工具 1
4 完成时间 1
5 设计思想 1
5.1 网页设计思想 1
5.2 设计方案 2
6 设计过程及设计步骤 2
6.1 网页结构设计 2
6.2 CSS样式设计 3
6.3 爱心飘落效果设计 4
6.4 背景切换效果设计 5
6.5 轮播图效果设计 7
6.6 网页整合、填充以及整顿 8
7 测试运行 9
8 评价与修订 9
9设计体会 10
参 考 文 献 11
附 录 12
致 谢 25
课程设计成绩评定表 26
1 设计题目
鑫晨之家特效网站设计（正文宋体五号，1.25倍行距）
2 开发环境
硬件环境：微机系列，内存在1G以上，软件环境：Microsoft Windows 10
3 开发工具
Dreamweaver8
4 完成时间
2019.1.6----2019.1.13
5 设计思想
5.1 网页设计思想
网页设计由三大部分组成，分别为HTML超文本标记语言、CSS层叠样式表和JavaScript脚本语言。其中HTML主要做整个网页的基本架构，CSS用于为网页文档中的元素添加各类样式，给网页添加色彩，而JavaScript主要是给网页的页面添加动态效果和功能，从而实现网页的各种效果。
而在本次网页设计也将会用到这三种语言实现整个网页的效果。在设计时先将整个网页的框架搭建起来，然后再用具体的图片和文字以及超链接代替结构中的内容，然后给设计的内容框架添加CSS样式效果，给网页添加色彩。大致样式设置后在用JavaScript结合框架和样式给网页设置动态效果。最后再整顿整个网页的框架、样式以及动态效果，使得网页美观，特效更加明显。
5.2 设计方案
首先用HTML写出网页的基本框架，其中大致需要用到HTML5新增文档结构标签的页眉标签
接下来利用CSS样式来修饰以上标签，在修饰是需要用到适合和元素选择器来进行更好的控制元素的样式。在设计时，背景用图片代替，并设置大小属性为cover覆盖整个网页，网页的其它部分也设置一些颜色，但为了既能够显示它们的颜色，又能显示出背景图片的效果，所以在设置颜色时需要用能够设置透明的rgba()样式来设置颜色的效果。
样式基本设计好之后，然后就是设计网站的一些动态效果，这时需要用到JavaScript脚本语言，其中会运用到jQuery模板来简化代码的实现，以便更好更有效的让网页多实现几个动态效果。主要效果将包括背景切换效果、爱心飘落效果、图片轮播效果和短视频播放效果。设计时需要结合CSS的样式元素进行合理的搭配。
最后来补充网页的具体内容和整理网页的整个效果，主要是填充各个模块的标题、网站说明和菜单栏以及其它空余部分的空间，尽量让它显得不那么的单调。全部内容填充好之后再进行整顿整个网页的效果，使其位置更加的合适以及颜色更加的搭配。（为了不破坏代码，避免自己的逻辑跟不上，每个效果模块可以单独设计，最后在合理的整顿合并到一个网页中。）
6 设计过程及设计步骤
6.1 网页结构设计
1.打开Dreamweaver8软件，新建一个HTML文件，修改头文件里面的编码、标题和去掉多余的内容，并调整好格式。
2.在body里面设计网页结构，先写个大致的框架头部用一个