《通信软件开发与应用》课程结业报告

1内容及开发过程

HTML1

1、图片滑跳

我用的是jquery模板当中的jquery.nivo.slider.pack.js和jquery-1.6.1.min.js
加上
可以完成对图片的切换

2。圆圈图和大图的切换

原图如下

通过span定义两个元素包含图片，可以完成效果

在这基础用href指向原图，即可做到放大效果。在html4中采用了对图片尺寸放缩完成放大效果

3其余部分

同理如上，对头像同样处理附上自我介绍及一些其余部分

HTML2

1嵌入音频

audio标签定义声音
audio src=“http://www.w3school.com.cn/i/horse.ogg” controls=“controls”
为了流畅度选择了时间的音频

2添加动态背景

loop循环播放视频
css设置视频样式

3制作登陆界面

制作完表格，对部分添加更多选择。
这次css和js都写着html文件内部。js包含一个获取四位数的函数，把它作为登录时随机的验证码

function creatCode(){
				//获得四位随机数
				var code=Math.floor(Math.random()*9000+1000);
				//获取span对象
				var span=document.getElementById("codeSpan");
				//把随机数赋值给span
				span.innerHTML=code;

HTML3

表格制作

这个网页制作比较简单
用bgcolor设置好表格颜色，设置好每个方框的大小然后填充好内容

HTML4

1 这个网页存放了这次课程的所有网页，存放在work导航栏中

每张图片的下方有网页的超链接中，点击即可查看详情

2 图片切换

定义两个个左右查看的类，用rel达到图片的跳转。

在实际操作必须先将第一个图片单独显示，否则无法直接显示该图片

3图片的放缩

这里选取将同一图片进行放缩后，即可达到查看放大效果。

2遇到的问题以及解决方法

1、设置html、body的height、width为100%，二者上方留有空白

body、html的margin、padding、border值未清零，此时应设置清零

2、网页布局不好导致不美观，无法准确定位

可以提前规划好，设置好目标大小，找出网页的通用部分，设置导航条精准定位

3、对目标样式始终无法达到效果

对css需要修改之处，进行微调，可能是目标被其他部分所影响

3未解决

1、对query.nivo.slider.pack.js和jquery-1.6.1.min.js的理解依然不够，不知道确切原理

2、动态背景在手机端打开可能会出现问题，也许是尺寸问题

3、图片跳转中无法完成最后一张图片和第一张图片的跳转

4总结

网页制作是一个需要下苦功夫进行学习与钻研的过程，同时在学习中会积累到很多的经验。随着我们在学习的过程中对于遇到的问题进行不断分析与解决，不断地学会去对已有的经验进行总结，能够使得我们获得更多的技能与方法。这样的技术与方法对于今后学习网页制作无疑是一笔宝贵的财富，在对网页制作提出更高要求的同时，能够利用自身所学习到的扎实的知识与技巧在网页制作技术上不断革新。