训练附件3训练报告(学生填写-计工).doc

武汉工程大学 计算机科学与工程学院 专业综合训练报告 训练名称： 专业综合训练Ⅰ 学生学号： 专业班级： 13计算机科学与技术02 学生姓名： 指导教师（职称）： 刘菲（讲师） 学业导师（职称）： 学生成绩： 完成时间： 2016年12月2号 说明： 1、训练报告正文中的训练目的与任务、训练地点、训练内容和要求等项，可由负责人统一给出，在训练开始前填写完并发给每个学生。 2、学业导师负责批改学生的训练报告，并给出相应的得分。同时，就训练报告的完成质量撰写评语。 3、训练指导教师一般由学院教师担任，若是与校外企业联合进行的训练，校外教师也可担任指导教师。指导教师就学生在训练期间的表现及训练完成情况分别给出相应的得分。同时，就此两项情况撰写评语。 4、训练的总评成绩由上述各部分累加得出，由指导教师汇总，并填写于报告的封面。 5、训练报告正文字数一般应不少于5000字，也可由训练负责人根据本项训练的具体情况酌情增加字数或内容。 6、此表格式为武汉工程大学计算机科学与工程学院提供的基本格式（适用于学院各项课程设计），各专业也可根据本项训练的特点及内容做适当的调整，并上报学院批准。 成绩评定表 学生姓名： 学号： 班级： 13级计算机科学与技术02 类别 合计 分值 各项分值 评分标准 实际得分 评语 报告质量 30 10 报告格式规范，表述清晰章节内容组织恰当引用，设计实现等过程，。求解。，，表现良好，积极，，，20 在训练过程中展现出了较强的、团队协作能力创新意识一、训练的目的与任务 本次专业综合训练，让学生开发或设计一个由学业导师指定的实践项目，使得学生能将学到的理论知识应用到实践中去。通过实践项目，要求学生熟练掌握一种开发语言及平台，初步具有独立完成项目的设计、编码、测试、部署的能力。本次综合训练的项目要求和学生的毕业设计（论文）相关，为下学期的毕业设计（论文）工作打下坚实的基础。 二、训练地点 403机房 三、内容和要求 运用前端方面的技术，设计一个静态具有交互的网页【1】，满足如下要求： 完成主页的布局，以及对css【3】公共样式进行初始化设置。 完成头部区域、导航菜单、banner焦点图的制作； 使用滑动门技术，实现图片可以自动切换效果。 四、总结及分析 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个参数，第一个是鼠标移入实现的功能，第二个是鼠标移出时实现的功能。当鼠标