训练附件3 训练报告学生填写计工Word下载.docx
- 文档编号:18054414
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:13
- 大小:1.01MB
训练附件3 训练报告学生填写计工Word下载.docx
《训练附件3 训练报告学生填写计工Word下载.docx》由会员分享,可在线阅读,更多相关《训练附件3 训练报告学生填写计工Word下载.docx(13页珍藏版)》请在冰豆网上搜索。
13级计算机科学与技术02
类别
合计
分值
各项分值
评分标准
实际得分
评语
报告质量
30
10
报告格式规范,表述清晰,章节内容组织恰当。
符号统一,图表完备,符合规范要求。
参考文献数量在5篇以上,格式及引用符合要求。
学业导师(签字):
报告内容翔实,结构严谨合理。
课题背景介绍清楚,综述充分。
设计与实现等主要过程完整,论述具体透彻。
能运用所学专业知识对问题加以分析和求解。
无抄袭现象。
报告对整个训练过程进行了全面总结,体现了收获,得出了有价值的结论或结果。
平时表现
20
遵守学习纪律,表现良好,积极完成课程设计任务,无旷课、迟到、早退等情况。
指导教师(签字):
设计完成情况
50
按照要求完成训练内容,方案合理,功能完善,设计工作量饱满,能运用专业知识和技能去发现与解决实际问题。
在训练过程中展现出了较强的学习能力、动手实践能力、团队协作能力和创新意识。
总评成绩
一、训练的目的与任务
本次专业综合训练,让学生开发或设计一个由学业导师指定的实践项目,使得学生能将学到的理论知识应用到实践中去。
通过实践项目,要求学生熟练掌握一种开发语言及平台,初步具有独立完成项目的设计、编码、测试、部署的能力。
本次综合训练的项目要求和学生的毕业设计(论文)相关,为下学期的毕业设计(论文)工作打下坚实的基础。
二、训练地点
403机房
三、内容和要求
运用前端方面的技术,设计一个静态具有交互的网页【1】,满足如下要求:
1.完成主页的布局,以及对css【3】公共样式进行初始化设置。
2.完成头部区域、导航菜单、banner焦点图的制作;
3.使用滑动门技术,实现图片可以自动切换效果。
四、总结及分析
4.1、总结
由于本人的美术设计能力有限,根据内容和要求,我就模仿了小米商城首页,完成了类似的具有交互效果的页面。
这个网页的任何图标都是我从Iconfont-阿里巴巴矢量库中的图,每个图标对应一个数值,然后通过链入外部样式表的方式引入。
4.2、分析
对这个网页的实现和一些功能的详细设计和分析。
4.2.1、导航栏的制作
网页的导航一般位于网页的最顶部,是在header标签里面,一般用nav这个标签表明是导航栏。
图1
图2
导航栏是上面二幅图中颜色黑色的部分。
图1是打开网页的初始化效果,图2是当鼠标放在购物车上时的效果。
导航栏中又3个div标签,分为小米商城、登录和购物车,最左边使用了float:
left,向左浮动,而右边2个使用了float:
right。
当鼠标放在字上面,字体的颜色从#b0b0b0变成#ffffff,而购物车这个导航是背景色变成#ffffff,字体颜色变成#ff6700。
这都是使用css中的hover属性,当鼠标放上去的时候变的颜色。
当鼠标放在购物车上,下面出现一个购物商品的信息,这个是一个div放在购物车div里面的。
用overflow:
hidden属性和height:
0属性隐藏,当鼠标放上去,通过hover把height属性设置成100px,这个div边框的阴影效果使用box-shadow设置的。
当鼠标放上去,所有的效果不是一瞬间完成,而是过渡效果,我们可以看出中间变化的过程,用transition实现。
4.2.2、广告和搜索
广告和搜索的完成,和导航栏使用相似的技术,这里就不分析,这里只写不一样的技术。
图3
图4
图3是打开网页初始化的效果,而图4是当鼠标放在小米手机上的效果。
图3中中间的一部分导航是放在li标签中的,而当鼠标放在小米手机上时,出现图4中的商品列表。
这个是使用jquery中的hover(fn,fn)函数实现的,它有2个参数,第一个是鼠标移入实现的功能,第二个是鼠标移出时实现的功能。
当鼠标移入时就把商品列表这个div的height设为229px;
border-top设为1pxsolid#b0b0b0,所以就看到上面那条线移出市变为0。
搜索框右边的搜索图标是使用input标签,把里面的value值设置成这个搜索图标对应的值。
4.2.3、商品的分类
商品分类就是电商网站上的商品分类。
实现的方式是最底层一个轮播图,在轮播图的最左边写一个商品分类导航,通过z-index的值进行分层,分类在轮播图上面。
图5
图6
图5是打开网页的初始化的效果,这个轮播图使用了一个jQuery插件【4】,关于轮播图的ckSlide插件。
这里对开发插件进行说明,用jQuery写插件时,最核心的方法有如下两个:
$.extend(object)可以理解为jQuery添加一个静态方法;
$.fn.extend(object)可以理解为jQuery实例添加一个方法。
jQuery(function(){});
与(function($){})(jQuery);
的区别:
是某个DOM元素加载完毕后执行方法里的代码。
(function($){})(jQuery);
定义了一个匿名函数,其中jQuery代表这个匿名函数的实参。
通常用在jQuery插件开发中,起到了定义插件的私有域的作用。
下面说说开发jQuery插件标准结构步骤:
1,定义作用域:
定义一个jQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。
如果用专业些的话来说就是要为这个插件定义私有作用域。
外部的代码不能直接访问插件内部的代码。
插件内部的代码不污染全局变量。
在一定的作用上解耦了插件与运行环境的依赖。
说了这么多,那要怎样定义一个插件的私有作用域?
如下代码:
//step01定义jQuery的作用域
(function($){
})(jQuery);
别小看了这个作用域,就像c#定义一个类的class关键字一样重要。
2,为jQuery扩展一个插件:
当定义好了jQuery的作用域后,最核心也是最迫切的一步就是为这个jQuery的实例添加一个扩展方法。
首先我们为这个jQuery插件命名一个方法,叫ckSlider,当在调用这个插件的时候,我们可以通过options来给这个插件传递一些参数。
具体的定义方法看如下代码:
//step01定义JQuery的作用域
//step02插件的扩展方法名称
$.fn.ckSlider=function(options){
}
到现在为止,其实一个最简单的jQuery插件就已经完成了。
调用的时候可以("
#domName"
).ckSlider({}),或者("
.domName"
).ckSlider({})或者更多的方式来调用这个插件。
3,设置默认值:
定义一个jQuery插件,就像定义一个.net控件。
一个完美的插件,应该是有比较灵活的属性。
准备开发一个jQuery插件时,在用户未指定属性时,应该有默认值,在jQuery可以分两步实现这样的定义,看如下代码step03-a,step03-b:
//step03-a插件的默认值属性
vardefaults={
prevId:
'
prevBtn'
prevText:
Previous'
nextId:
nextBtn'
nextText:
Next'
//……
};
//step03-b合并用户自定义属性,默认属性
varoptions=$.extend(defaults,options);
做程序的人都喜欢创新,改改变量名呀,换一个行呀这些。
当看到用vardefaults={}来表示一个默认属性时,在自己写jQuery插件时就想着与众不同,所以用vardefault01={},vardefault02={}来表示默认属性了。
然后默认属性名五花八门,越来越糟。
所以建议在写jQuery插件时,定义默认属性时,都用defaults变量来代表默认属性,这样的代码更具有可读性。
有人看到这行代码:
varoptions=$.extend(defaults,options),皱起眉头,表示不解。
那我们先来看如下代码:
varobj01={name:
"
英文名:
SamXiao"
age:
29,girlfriend:
{name:
Yang"
29}}
varobj02={name:
中文名:
XiaoJian"
girlfriend:
YY"
}};
vara=$.extend(obj01,obj02);
varb=$.extend(true,obj01,obj02);
varc=$.extend({},obj01,obj02);
vard=$.extend(true,{},obj01,obj02);
把代码拷贝到开发环境中,分别看一下a,b,c,d的值,就明白了varoptions=$.extend(defaults,options)的含义了。
表示options去覆盖了defaults的值,并把值赋给了options。
在插件环境中,就表示用户设置的值,覆盖了插件的默认值;
如果用户没有设置默认值的属性,还是保留插件的默认值。
4,支持jQuery选择器:
jQuery选择器,是jQuery的一个优秀特性,如果我们的插件写来不支持jQuery选择器,确实是一个不小的遗憾。
如了使自己的jQuery插件能支持多个选择器,我们的代码应该这样定义:
$.fn.easySlider=function(options){
//step4支持JQuery选择器
this.each(function(){
});
5,支持jQuery的链接调用:
上边的代码看似完美了,其实也不那么完美。
到目前为止还不支持链接调用。
为了能达到链接调用的效果必须要把循环的每个元素return。
//step5支持链式调用
returnthis.each(function(){
这样的定义才能支持链接调用。
比如支持这样的调用:
$("
.div"
).easySlider({prevId:
"
prevText:
}).css({"
border-width"
:
1"
"
border-color"
red"
border-bottom-style"
dotted"
6,插件里的方法:
往往实现一个插件的功能需要大量的代码,有可能上百行,上千行,甚至上万行。
我们把这代码结构化,还得借助function。
在第一点已经说了,在插件里定义的方法,外界不能直接调用,我在插件里定义的方法也没有污染外界环境。
现在就尝试着怎么样在插件里定义一些方法:
//step06-a在插件里定义方法
varshowLink=function(obj){
$(obj).append(function(){return"
("
+$(obj).attr("
href"
)+"
)"
//step06-b在插件里定义方法
showLink(this);
步骤step06-a:
在插件里定义了一个方法叫showLink();
这个方法在插件外是不能直接调用的,有点像C#类里的一个私有方法,只能满足插件内部的使用。
步骤step06-b演示了怎样调用插件内部的方法。
4.2.4、明星产品
明星产品是本网页推荐的产品,都是一些销售比较好的产品。
总共有两栏采用的是jQuery中的animate()函数制作,这个div设置position:
absolut;
然后通过animate函数更改left的值,进行滑动,当滑动到最左边,右上脚的左滑动导航颜色被禁用,当滑倒最右边时,右滑动导航被禁用。
这些交互特效都是用javascript【2】设计实现。
4.2.5、硬件、搭配和周边产品
这几个网页布局设计一模一样,只是产品的不同设计情况如图7所示:
图7
这个设计主要是用ul和li标签设计,上图的右上角,有四个li标签,当鼠标点到哪个li选项时,下面就切换当前分类下的产品。
然后鼠标点到下面产品的时候,就从下往上显示游客的评价。
这些游客评价在页面刷新初始化时都是隐藏的,这是用overflow:
hidden和height:
0属性实现的,当鼠标滑动上去就通过hover把height设置30px。
然后左上角四个选项也是类似的效果。
4.2.6、内容设计
内容设计是内容div中有四个ul标签,然后每个ul标签中又有四个li标签,通过用jQuery写的ckSlide插件进行轮播。
其实实现技术都一样,只是在没个li标签中添加不同的类选择器,把他们顶部设置不同的颜色。
图8
五、训练体会
本次训练主要遇到各种浏览器不兼容问题,还有一些网页设计好不好看。
不过这些经过查询资料来解决。
我知道了热爱自己的工作。
热爱跨浏览器开发带来的挑战、热爱互联网技术的种种异端,热爱业内的同行,热爱你的工具。
互联网发展太快了,如果你不热爱它的话,不可能跟上它的步伐。
需要更多的了解需求和设计、产品经理更要懂得软件迭代规律。
对于前端工程师来讲更是如此,多学习交互设计和UI,多了解网络协议和软件迭代模型,更能帮助前端工程师和需求方沟通、和后台的衔接、以及控制版本的迭代。
这意味着你必须多阅读,多动手,保证自己的才能与日俱增。
下了班也不能闲着,要做一些对自己有用的事儿。
可以参与一些开源软件的开发,读读好书,看看牛人的博客。
经常参加一些会议,看看别人都在干什么。
要想让自己快速成长,有很多事儿可以去做,而且付出一定会有回报。
专业综合训练是培养学生综合运用所学知识,发现,提出,分析和解决实际问题,锻炼实践能力的重要环节,是对学生实际工作能力的具体训练和考察过程。
本次训练虽然很辛苦,实在是受益匪浅。
本来许多知识学的不够扎实,本次训练,在设计过程中碰到了很多问题,刚开始要设计的时候,还真不知道从哪里下手,但最终在图书、同学和老师的帮助下都得到了解决,让我学会了好多书本上没有的东西,通过本次训练我也能将课本上的知识融会贯通,起到了很好的辅助学习的效果,我发现我学到的知识比整整一个学期学到的都多。
理论和实践的相结合是学习最有效的方法。
在设计的过程中发现了自己的不足之处,对以前所学过的知识理解得不够深刻,掌握得不够牢固,通过这次课程设计之后,一定把以前所学过的知识重新温故。
通过这次课程设计使我懂得了理论与实际相结合是很重要的,只有理论知识是远远不够的,只有把所学的理论知识与实践相结合起来,从理论中得出结论,才能真正为社会服务,从而提高自己的实际动手能力和独立思考的能力。
致谢
在这次课程设计的撰写中,我得到了许多人的帮助。
首先我要感谢我的老师在课程设计上给予我的指导、提供给我的支持和帮助,这是我能顺利完成这次设计的主要原因,更重要的是老师帮我解决了许多技术上的难题,让我能把系统做得更加完善。
在此期间,我不仅学到了许多新的知识,而且也开阔了视野,提高了自己的设计能力。
其次,我要感谢帮助过我的同学,他们也为我解决了不少我不太明白的设计上的难题。
最后再一次感谢所有在设计中帮助过我的良师益友和同学,正因为他们在身边悉心指导自己,此次设计才得以成功完成!
参考文献
[1]
李宝敏.
动态网站设计与开发应用教程[M]
.
清华大学出版社.
2012.01
28(4):
1
[2]
贾素玲,王强.
Javasqript
程序设计[M].
清华大学出版社.2007,
15(4):
3
[3]
林小
CSS那些事
掌握网络样式CSS样式布局[J]
电子工业出版社.2009,
4(5):
1~4
[4]
单东飞,
张晓菲,
魏然.
锋利的JQuery[M]
人民邮电出版社.2012
28(5):
5~6
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 训练附件3 训练报告学生填写计工 训练 附件 报告 学生 填写