学号

课程设计

课程名称网页设计

题目	鑫晨之家特效网站设计
专业	软件工程
班级	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.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新增文档结构标签的页眉标签<header>、导航标签<nav>、书标签<section>、文章标签<article>、侧栏标签<aside>、页脚标签<footer>，这几个标签将主要构造出网页的大致框架结构，另外还要用一些基本标签来完善框架的内容设计。比如添加添加一些段落标签、超链接标签、容器标签、以及图像标签和列表标签。

接下来利用CSS样式来修饰以上标签，在修饰是需要用到适合和元素选择器来进行更好的控制元素的样式。在设计时，背景用图片代替，并设置大小属性为cover覆盖整个网页，网页的其它部分也设置一些颜色，但为了既能够显示它们的颜色，又能显示出背景图片的效果，所以在设置颜色时需要用能够设置透明的rgba()样式来设置颜色的效果。

样式基本设计好之后，然后就是设计网站的一些动态效果，这时需要用到JavaScript脚本语言，其中会运用到jQuery模板来简化代码的实现，以便更好更有效的让网页多实现几个动态效果。主要效果将包括背景切换效果、爱心飘落效果、图片轮播效果和短视频播放效果。设计时需要结合CSS的样式元素进行合理的搭配。

最后来补充网页的具体内容和整理网页的整个效果，主要是填充各个模块的标题、网站说明和菜单栏以及其它空余部分的空间，尽量让它显得不那么的单调。全部内容填充好之后再进行整顿整个网页的效果，使其位置更加的合适以及颜色更加的搭配。（为了不破坏代码，避免自己的逻辑跟不上，每个效果模块可以单独设计，最后在合理的整顿合并到一个网页中。）

6 设计过程及设计步骤

6.1 网页结构设计

1.打开Dreamweaver8软件，新建一个HTML文件，修改头文件里面的编码、标题和去掉多余的内容，并调整好格式。

2.在body里面设计网页结构，先写个大致的框架头部用一个<header>页眉标签，接下来用一个<div>标签来包裹下面的所有内容。然后在<div>标签里面依次放入<nav>导航标签、<aside>做侧栏标签、<section>节标签、<aside>右侧栏标签和<footer>页脚标签来制作<dev>里面空间的框架。其中导航标签将放在最上面当作菜单，接下来一层中间是节标签将是正文内容，两边是用两个侧栏标签来装左右两边侧栏的内容。

3.进一步往中间层深入构造下一级框架。先在导航栏里面放多个<a>超链接标签来当菜单目录，接下来在两个侧栏标签里面各自都放一个字体标签和多个段落标签来当侧栏内容。然后在节标签里面放两个文章标签来分两段来放中间正文，并在两个文章标签里面都依次页眉标签、段落标签和页脚标签，进行再次分层。最后分别在页眉标签和页脚标签里面添加字体标签。

6.2 CSS样式设计

1.在HTML文本的head头标签里面添加<style>标签来放置CSS样式，然后把所有的内边距和外边距设置为0。

2.设置body标签的背景颜色，最大宽度为900px，border边框为solid和边框颜色以及内部字体颜色。

3.设置header标签背景颜色和字体颜色，display设置为把block块级元素，文本居中。

4.设置各级标题标签的字体大小和文本居中。

5.设置导航nav标签为块级元素，宽度相对为100%，浮动为左浮动，文本居中，设置颜色，相对外部标签顶部和底部都为20px。

6.设置nav a:link和nav a:visited都为内联元素，设置它们的颜色，内边距10px，外边距5px，下边框3px，实线。并设置字体为粗字体。

7.设置nav a：hover的背景颜色和字体颜色。nav h3外边距15。

8.设置div的id=container并设置它的背景颜色。

9.设置section为块级元素，宽度相对为60%，左浮动。

10.设置article为块级元素，设置他的颜色以及外边距和内边框都为10px。

11.设置article里面的header和footer的内边框都为5px。article的h1大小设置为18px。

12.aside设置为块级元素，宽度相对为20%，左浮动。

13.aside的h3设置外边距15px。aside p外边距15px，字体为加宽。

14.footer设置为块级元素，两侧都不允许浮动，并设置它的背景颜色和字体颜色，文本居中，内边距为15px。

15.footer h2 字体大小设置为14px。并设置它的颜色。设置a的颜色和a link文本下划线为无。

HTML和CSS结合后的效果如图一显示。

网页设计课程设计报告

图1 HTML+CSS网页设计效果

6.3 爱心飘落效果设计

1.新建一个HTML文本，在body里面写两个div标签，并设置它们的class分别为left和right。

2.在head标签里添加style标签在里面设置body里面的div样式。

3.设置left个right都为绝对定位，设置它们的绝对定位都为left 0xp top 0px 宽度为100px，高度为160px，背景颜色设置为红色，圆角属性border-raduis设置为（50px 50px 0px 0px），然后设置left的旋转角度为逆时针45度。right的旋转角度为顺时针45。这时两个div容器合在一起看起来就合成了一个完整的爱心。

4.优化代码，在上面可以知道，两个div容器除了旋转角度的属性不一样外，其他的属性都是一样的，所以为了避免这么多的重复代码出现，可以吧这些重复的喝到一起写在一个类选择器中让两个容器共同使用它，所以可以用一个类选择器去同时引导另外两个选择器使用，为了结合后面需要用到的jQuery模板js代码，我这里的引导类选择器用snowfall-flakes作为类名，另外两个被领导的结合领导类的名字分别写为snowfall-flakes:before和snowfall-flakes:after。

5.再将snowfall-flakes的属性设置为相对定位，高度和宽度都设置为20px，外边距设置为50px和auto。然后将之前left和right中相同代码部分放在snowfall-flakes:before,.snowfall-flakes:after中不相同的那一行代码也分别放在snowfall-flakes:before和snowfall-flakes:after中，然后注释之前的left和right代码。

6.在body中写js代码，先将需要用到的两个jQuery模板库文件放到与该HTML文件的同目录里面的js文件夹中，然后在body标签中写入<script src="js/jquery-1.2.6.min.js"> </script>和<script src="js/snowfall.jquery.js"></script>两行代码吧这两个模板库引入带HTML中，然后写个script标签，在标签中写入$(document).snowfall({flakeCount : 200,maxSpeed : 5});这一行代码。

7.最后改一下爱心的大小，把整体的一些与爱心相关的大小代码成倍数的减小，然后可以吧之前写的两个div删除，并在body的CSS样式里面添加一张背景图片，设置图片为平铺，外边距为0。

最后爱心飘落的特效就出来了，其效果如图2，可以通过写的那行js代码来改变爱心飘落的数量和飘落的速度。

网页设计课程设计报告

图2 爱心飘落特效

6.4 背景切换效果设计

1.找16张图片，并且将这十六张片都按一定比例变小，大图片命名为1到16.jpg，小图片命名为1-1到1-16jpg，然后再制作一张图片做一个按钮（用来显示和关闭切换背景时的那些需要切换的图片），并将这些图片放在与HTML文件同目录下的images文件夹中。

2.新建一个HTML文件，在body标签中写一个div标签设置它的id=img-wrap，然后在div标签包含一个ul无序列表标签，设置它的class=list，然后再ul标签里面包含16个li标签，设置它们的class=item，data-src的值分别等于images/(1到16).jpg（用来在js代码中方便切换背景图片寻找到对应的图片），然后再这些li标签里面分别包含img标签，并分别设置它们的src属性的值为images/（1-1到16-16）.jpg图片路径。然后再第一个div标签的下面再写一个div标签设置id=tab-btn。

3.在head标签里添加style标签用来添加CSS样式，各标签样式设置如下：

.设置所有标签的内边距和外边距都为0。

.设置body标签的背景图片为images/1.jpg，并且大小设置为覆盖整个网页页面。

.设置img-wrap的宽度为相对100%，高度为150px，背景颜色为黑色，透明度为0.46。这个div容器是用来放置选择可选切换背景的图片的。

.设置list的列表值类型为无，宽度为1000px，高度为100px，外边距为0 auto。

.设置item为左浮动（使可选图片横排排列），外边距为0px 15px。

.设置itm img的宽度为95px，高度为60px。

.设置tab-btn为绝对定位，位置定位到网页的右上角，高度为50px背景图片为images/upseek.png，光标设置为pointer。（这个是一个用来显示和隐藏可选图片区域的按钮）。

tab-btn：hover 当鼠标放在按钮上时，按钮向上移动64px，鼠标离开时回到原位置。

4.写js代码，同样将上一个爱心飘落效果中的jQuery模板引入到该HTML代码中。然后写script标签，在里面写下面几行js代码

$("#tab-btn").click(function(){

$("#img-wrap").slideToggle();

});

//代码表示鼠标点击对应图片后寻找到对应图片的地址，然后将背景图片的地址换成点击图片得到的对应地址达到切换背景的效果。

$(".item").click(function(){

var uri = $(this).attr("data-src");

$("body").css({

"background-image":"url("+uri+")"

});

设计效果如图3和图4所示：

网页设计课程设计报告

图3 背景切换效果1

网页设计课程设计报告

图4 背景切换效果2

6.5 轮播图效果设计

1.新建一个HTML文件，将它保存带到与背景切换的HTML同一个目录下，在body标签中写一个div标签设置它的id=lunbo，然后在div标签包含一个ul无序列表标签，设置它的id=shidian_img，然后再ul标签里面包含16个li标签，设置它们的class=img_lunbo，然后再这些li标签里面分别包含img标签，设置class=img_lunbo，并分别设置它们的src属性的值为images/（1到16）.jpg图片路径。

2.在head标签里添加style标签用来添加CSS样式，各标签样式设置如下：

.设置全部背景颜色为绿色。

.设置lunbo的高度和宽度都为500px，位置为left 100px，top 50px，关系型定位。

.设置ul宽度和高度都相对为100%，位置为左上角，关系型定位。

.设置li_lunbo宽度和高度都相对为100%，位置为左上角，绝对型定位。

.设置img_lunbo宽度相对100%，高度为10px。

3.写js代码，写script标签，在body里面写如下面js代码

imgs=document.getElementById("shidian_img").children; //获取所以图片并且存储到数组imgs数组里

for(i =0; i<imgs.length;i++){

imgs[i].style.display="none";

} //循环获取到imgs里面的元素，并且把它们隐藏设置为none

imgs[index].style.display ="block"; //当所有元素都隐藏了，在显示当前index所指的图片。

index ++;

if(index >= imgs.length){

index=0;

} //判断index是否大于imgs的长度，等于imgs的长度后在重新赋予它初始值0；

}

timer=setInterval(show_img,1000); //建立周期定时器。

设计完成后的效果如图5和图6所示。

网页设计课程设计报告

图5 轮播图效果1

网页设计课程设计报告

图6 轮播图效果2

6.6 网页整合、填充以及整顿

1.将以上三个特效整合到原网页的框架中：

.爱心飘落特效的代码可将CSS代码放到框架的HTML中head里面的style标签里面，js代码可放在其body里面的代码的最后面的script标签中。

.背景切换效果中body里面的所有代码都可以放在框架body标签里面的最上面。将CSS样式也加入框架head里的style中，注意的是把原来框架里面的body样式和爱心飘落特效里面的body样式都去掉换成背景切换中的body样式，然后js代码也直接放入script标签中。

.轮播图效果中body里面的所由代码放在框架里section标签里面的都一个article标签里面，但为了使得这部分的网页内容更融洽和不显得那么的单调所以在这个article标签里面在加一层aside、section，article和aside标签，而把轮播图效果中body里面的所由代码放在所添加的这一层中的section里面的article中，左右两边的aside中分别放入由ps出来的两只小象图片。然后接着把除了body样式的所有样式代码和js代码分别放入框架的style标签和script标签中。

2.将框架里面的nav标签和左aside标签中加入一些超链接，分别进入一些常用网站以及与自己相关网站的效果。然后在右aside标签中写上一些网站的说明。最后在header标签中再加一张由ps出来的网站logo图片。

3.网站最终效果如图7图8所示。

网页设计课程设计报告

图7 网站最终效果1

网页设计课程设计报告

图8 网站最终效果2

7 测试运行

网站的主要功能是能够快速的进入一些常用网站和自己的一些常用网站的登陆页面。其页面的所有动态效果说明如下。

运行网页后自动运行爱心飘落特效和图片轮播特效以及短视频播放。
点击右上角的按钮可显示和隐藏背景切换的可选图片区域，点击可选图片区域里面的图片可以网页背景切换成对应的图片。
点击由下划线的文字可进入对应的网页页面。

8 评价与修订

整个网页页面清晰，效果明显，去其爱心飘落特效是页面比较显眼的效果，可以吸引浏览者的眼光，它是网页页面最具有创造性和独特性的地方。还有轮播图虽然在很多网页中都能看到这种效果，但是在该网页中也比较显眼的地方，然后就是网页的顶部有一个可以切换背景的图片选择区，可以通过它切换背景，右上角有一个按钮可以将这个选择区域显示和隐藏，这使得网页显得更加的高大上，更有独特性。网页正文区域的下方有一些三个短视频，是完成的项目小游戏录屏，这让网页显得更加的新颖，内容丰满。另外网页有说明，也有一些常用网站的入口，这可以更加方便客户进入这些网站。页面中每个区域都有不同的颜色，

不足的是网页内容不够丰满，有大片的空白区域显得有些浪费空间，还有就是网页单配颜色也不够美观，字体也不是很显眼和美观。这些都是美中不足的地方。

网页的整个效果还是比较可以的，但需要使它更加美观和页面丰满，还需继续学习和努力。

9设计体会

在本次网页设计的课程设计中，通过实践学习的过程中，不仅在遇到问题时如何去解决问题，如何去挖掘问题，还从中收获到了很多知识，积累了一些经验，学会了如何去学习HTML的网页设计，对HTML的标签和CSS的样式更加熟悉，也对js的使用加深了印象。

在课程设计之前虽然也在尽量的学习这门课程，每节课也都有在学习，对网页设计有了基本的了解，对一些知识点也感到不怎么陌生，但也都是纸上谈兵，看过了没过多久就都会忘记了。虽然在每次实验可中也都每次完成了每次的实验内容并且都基本都实现了内容的效果，这让我能够对一些标签的熟悉，和对CSS和js代码的提高了一些认识，但是由于实验课都是照着书上的代码敲的，除了可以提高对代码的熟悉，也都没能怎么理解代码的意思，也没有自己的设计思路，都是照着代码开干，书上那个怎么写的，我就怎么跟着敲代码，而且很多时候都是照着书上敲都能敲错，因为不是很清楚代码的意思和基本框架思路，所以一不小心敲错代码了都不时很清楚，等敲完代码运行网页测试时，才知道自己敲错了，但是回去代码里检查代码时都是对着书上去检查哪里敲错了，不是很清楚具体的出错位置，所以学的比较被动。

但通过本次课程设计我却能够独立的去完成一个网页的设计，虽然这个过程是比较艰辛的，我是提前几个星期开始慢慢准备的，通过网上视频教学的学习，和通过百度查找资料理解视频中老师讲的一些内容，然后自己尝试敲写代码实现一些视频课上的网页实战项目，通过一点一滴的学习，对网页设计也就有了更好的了解，也能通过一些其它的网页源代码看懂一些基本的部分，通过这次网页设计的课程设计更好的运用自己所学的知识点，对项目的设计框架有了进一步的了解，也对今后的学习积累了经验，对自己以后的学习方向有了更明确的目的。

这次的课程设计让我更加深刻的明白了在课上学习的重要性，因为课上的时间浪费了就难以寻找回来了，也让我明白了课后的实践也是很重要的，课上知识学的一些基础理论知识，也许你看懂了，也学会了，但是如果你不去加以运用它，时间长了也就会变得非常的陌生，很容易就忘记了，只有经过过多的实践练习才能更好记住所学的内容，也能更好的运用这些所学的知识，并且能有更加深刻的理解和认识。

参考文献

[1] 1] HTML5网页前端设计，周文洁编著，北京：清华大学出版社，2018

[2] HTML5网页前端设计实战，周文洁编著，北京：清华大学出版社，2018

附录

<!DOCTYPE>

<html>

<head>

<title>鑫晨之家特效总站</title>

<style>

margin: 0;

padding: 0;

}

body{

background: url("images/1.jpg");

background-size: cover;

}

#img-wrap{

width: 100%;

height: 150px;

background-color: rgba(0,0,0,0.46);

padding-top: 13px;

}

.list{

list-style-type: none;

width: 1000px;

height: 100px;

margin: 0 auto;

}

.item {

float: left;

margin: 5 15px;

}

.item img{

width: 95px;

height: 60px;

}

.item img:hover{

color: #FF0099;

}

#tab-btn{

position: absolute;

top: 0;

right: 0;

width: 50px;

height: 50px;

background-image: url("images/upseek.png");

cursor: pointer;

}

#tab-btn:hover{

background-position-y: -64px;

}

.snowfall-flakes1{

position: relative;/* 相对定位监管绝对定位 */

width: 20px;

height: 20px;

margin: 50px auto;

/*background-color: #096;*/

}

.snowfall-flakes:before,.snowfall-flakes:after{/* ,并列和把相同的内容并到一起 */

content: "";/* **伪元素的必要因素 */

position: absolute;/* css重点和难点绝对定位 */

left: 0;

top: 0; /* 定位一般写到上面 */

width: 5px;

height: 8px;

background: rgba(255,0,0,0.66);

border-radius: 2.5px 2.5px 0px 0px;/* 圆角属性 */

}

.snowfall-flakes:before{

transform: rotate(-45deg);/* css3变换属性旋转 deg角度 */

}

.snowfall-flakes:after{

transform: translateX(4.3px) rotate(45deg);/* css3位移 css3变换属性旋转 deg角度 */

}

header {

background-color: rgba(210,50,50,0.46);

display: block;

color: #2178D8;

text-align: center;

}

h1{

font-size: 72px;

margin: 0px;

}

h2{

font-size: 24px;

margin: 0px;

text-align: center;

}

h3{

font-size: 18px;

margin: 0px;

text-align: center;

}

nav{

display: block;

width: 100%;

float: left;

text-align: center;

background-color: rgba(204,204,204,0.46);

padding-top: 20px;

padding-bottom: 20px;

}

nav a:link, nav a:visited {

display: inline;

border-bottom: 3px solid #00FFCC;

padding: 10px;

text-decoration: none;

font-weight: bold;

margin: 5px;

}

nav a:hover {

color: #CC3333;

background-color: rgba(255,255,0,0.46);

}

nav h3{

margin: 15px;

}

#container{

background-color: rgba(185,74,,221,0.46);

}

section{

display: block;

width: 70%;

float: left;

}

article{

background-color: rgba(0,255,204,0.16);

display: block;

margin: 0px;

padding: 0px;

}

article header{

padding: 5px;

}

article footer{

padding: 5px;

}

article h1{

font-size: 18px;

}

aside{

display: block;

width: 15%;

float: left;

}

aside h3{

margin: 15px;

}

aside p{

margin: 15px;

font-weight: bold;

}

footer{

clear: both;

display: block;

background-color: rgba(51,0,204,0.16);

color: #CC99CC;

text-align: center;

padding: 15px;

}

footer h2{

font-size: 14px;

color: #FF66FF;

}

a {

color: #FF6633;

}

a:hover{

text-decoration: underline;

}

.x{

width:100%; height:166px;

}

#lunbo{ width:340px; height:160px;position:relative;left:0px;top:0px;}/* 定义轮播图片所显示的位置*/

.ul_lunbo{width:100%; height:100%; position:relative;left:0px;top:0px}/*//为ul标签设置所在区域有*/

.li_lunbo{width:100%; height:100%; position:absolute; left:140px;top:0px;}/*//为li标签设置所在区域有*/

.img_lunbo{ width:100%; height:166px;}/*//为图片定义大小，并且是图片重合。*/

` video{float:left; margin: 100px 500px;}

</style>

<body>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

<h1>鑫晨之家特效总站</h1>

</header>

<nav>

</nav>

<aside>

<h3>My Style</h3>

<a style=" padding-left:40px;" href="https://user.qzone.qq.com/1476027184/main" target="_blank"/>我的QQ空间</a>

<br />

<br />

<br />

<br />

<a style=" padding-left:40px;" https://www.cnblogs.com/star147/" target="_blank"/>我的博客园</a>

<br />

<a style=" padding-left:40px;" href="http://acm.hdu.edu.cn/listproblem.php?vol=1" target="_blank"/>算法练习系统</a>

<br />

</aside>

</header>

<aside>

</aside>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</article>

</section>

<aside>

</aside>

<h2>网页背景相册轮播图</h2>

</footer>

</article>

</header>

</video>

</video>

</video>

<h2>游戏项目短视频</h2>

</footer>

</article>

</section>

<aside>

<p>该网站为鑫晨公司打造的独立个人网站，网站由各种效果搭建而成，其主要功能为更加快速的进入一些常用网站，其特色为爱心飘落特效，背景图片切换以及背景相册轮播特效，其中还有自己写过的其中三个小游戏作品运行的录屏短视频。本人第一次通过独立学习查找资料尝试写出一个比较完整的网页作品，虽然美观不足，相信自己以后会更加努力的其打造出更多更加完美的网站。希望进本网站的朋友大力支持，谢谢。</p>

</aside>

</footer>

</div>

$("#tab-btn").click(function(){

$("#img-wrap").slideToggle();

});

$(".item").click(function(){

var uri = $(this).attr("data-src");

$("body").css({

"background-image":"url("+uri+")"

});

$(document).snowfall({flakeCount : 40,maxSpeed : 3});

index=0;

function show_img(){

imgs=document.getElementById("shidian_img").children; //获取所以图片并且存储到数组imgs数组里

for(i =0; i<imgs.length;i++){

imgs[i].style.display="none";

} //循环获取到imgs里面的元素，并且把它们隐藏设置为“”none“”

imgs[index].style.display ="block"; //当所有元素都隐藏了，在显示当前index所指的图片。

index ++;

if(index >= imgs.length){

index=0;

} //判断index是否大于imgs的长度，等于imgs的长度后在重新赋予它初始值0

}

timer=setInterval(show_img,1000); //建立周期定时器。

</script>

</body>

</html>

致谢

首先非常感谢学院开设网页设计这个课程设计，为我以后从事web前端方面的工作提供了实战经验，奠定了初步的基础。

在这次课程设计中，我要特备感谢我们的网页设计老师汪汝老师，她同时兼任我们该门课的实验课，更有幸的时，她更是我们大一时的计算机组成与维护的老师，所以踏实第一个同时带任我们两门不同专业课的老师，在她连续带任我们一年的课可以看出汪汝老师是一个比较爱笑的善良老师，上课时他总是认真的为我们上完每一节课，从不迟到，是一位很认真对待教学的好老师，在这次课程设计中也感谢她为我们指引路线，说明课设的主要内容，让我们有了明确的设计思路和设计方向，让我也从中得到了一些灵感。

另外这次课程设计中还要感谢潭州课堂和哔哩哔哩网站的那些公开课的老师，感谢他们的无私付出为我们提供学习知识，认真细致的为我们听公开课的人讲授知识，同时也要感谢提供这些学习平台时创始人，没有他们创建的这些学习平台，我也就没法去找到这些学习的资源以及课程。

再次感谢这此课程设计中给我提供学习帮助所有人，谢谢你们。

课程设计成绩评定表

课程设计题目
课程设计学生答辩或质疑记录：问题1：HTML、CSS和JavaScript的作用分别是什么？答：HTML主要做网页中的框架，CSS主要是渲染HTML中的标签样式，JavaScript主要是实现网页中的动态效果。问题2：display这个属性是做什么用的？答：display属性是规定元素应该生成的框的类型，此元素默认为inline，表示此元素被显示为内联元素。问题3：爱心飘落特效大致是如何实现的？答：用两个div容器通过CSS样式的设置制作成一个爱心，然后运用jQuery的JavaScript模板通过调用模板中的snowfall函数，具体的一句代码为：$(document).snowfall({flakeCount : 40,maxSpeed : 3});其中 flakeCount 参数是设置爱心飘落的数量，maxSpeed 参数是设置爱心飘落的最大速度。
评分依据	分值	评分成绩
1、学习态度认真、遵守纪律	10
2、设计分析合理性	10
3、设计方案正确性、可行性	20
4、设计结果正确性	30
5、设计报告的规范性	10
6、实践环节的独立性与主动性	10
7、设计验收	10
总分	100分
最终评定等级为：指导老师签字：年月日

秒客网

网页设计课程设计报告

1 设计题目

2 开发环境

3 开发工具

4 完成时间

5 设计思想

5.1 网页设计思想

5.2 设计方案

6 设计过程及设计步骤

6.1 网页结构设计

6.2 CSS样式设计

6.3 爱心飘落效果设计

6.4 背景切换效果设计

6.5 轮播图效果设计

6.6 网页整合、填充以及整顿

7 测试运行

8 评价与修订

9设计体会

相关文章