软件工程综合实践
实习
报告
软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载
姓名
学号
班级
项目名称
个人网页
实习地点
J7-111
实习时间
2017.7.10-2017.7.18
实习成绩
指导教师签字
2017 年 7 月 18 日
软件工程综合实践生产实习报告
1.实习目的
（1）熟练掌握jsp，css，script，用它们编写网页等。
（2）掌握Photoshop，利用它对图片进行修改切片等。
（3）提高编程能力，熟练地使用各种相关编程语言。
2.实习过程
2.1 技术准备
系统开发平台：Sublime，Photoshop，WebStorm
运行平台：Windows xp/ Windows 2007/ Windows 2008
分辨率：最佳效果1024*768（600*768）
浏览器：火狐，谷歌
2.2 功能需求
根据用户需求，设计产品时有以下要求：
（1）PC
1）首页：显示用户头像，用户要求的导航栏（可以跳转到其他页面，如：我的图集、我的文集，我的简介，我的音乐），以及主轮廓上要有主图和部分我的图集中的照片。
2）点击导航栏跳转到我的图集界面：显示所有图片列表，可以进行上一页下一页操作，点击某张图片可进入显示这张图片的详情的界面。
3）点击导航栏跳转到我的文集界面：显示所有文章列表，可以进行上一页下一页操作，点击某篇文章可进入显示这篇文章的详情的界面。
4）点击导航栏跳转到我的简介界面：直接显示用户简介。
5）点击导航栏跳转到我的音乐界面：显示所有音乐列表，可进行上一页下一页操作，点击某首音乐进入显示这首歌曲的详情的界面（显示歌词和mv）。
（2）mobile
1）首页：手机端主要以图片为主，布局简洁合理好看，导航栏以图标的形式显示（点击可以跳转到其他页面，如：我的图集、我的文集，我的简介，我的音乐）。
2）点击我的图集图标进入界面：显示所有图片列表，可以进行上一页下一页操作，点击某张图片可进入显示这张图片的详情的界面。
3）点击我的文集图标进入界面：显示所有文章列表，可以进行上一页下一页操作，点击某篇文章可进入显示这篇文章的详情的界面。
4）点击我的简介图标进入界面：直接显示用户简介。
5）点击我的音乐图标进入界面：显示所有音乐列表，可进行上一页下一页操作，点击某首音乐进入显示这首歌曲的详情的界面（显示歌词和mv）。
2.3 总体设计
2.3.1系统功能结构设计
系统功能模块的结构如图2.1所示。
图2.1系统功能结构图
2.3.2系统
流程
快递问题件怎么处理流程河南自建厂房流程下载关于规范招聘需求审批流程制作流程表下载邮件下载流程设计
设计
页数
上/下一页
上/下一页
图2.2我的图集流程图 图2.3我的文章流程图
我的图集流程图和我的文章流程图分别如图2.2和图2.3所示。通过主页点击我的图集或我的文章进入，即可显示文章和图片列表，通过列表条目可点进详细页面。
页数
返回
图2.4我的简介流程图图2.5我的音乐流程图
我的简介流程图和我的音乐流程图分别如图2.4和图2.5所示。通过主页点击我的简介即可直接查看，若进入我的音乐则可以看见具体的音乐列表，通过列表条目可点进详细的音乐播放界面。
2.4详细设计与编码
（1）PC
如图图1.1是首页，用户进入的初始界面实现导航功能。
图1.1 首页
如图图2.21和图2.22进入我的图集，显示所有图片的列表，及从当前我的图集界面点击某图片进入的图片详情界面：
图1.21 我的图集
图1.22我的图集详情界面
如图图1.31和图1.32转到我的文集界面，显示所有文集的列表，及从当前我的文集界面点击某条目进入某文档详情界面：
图1.31 我的文集
图1.32我的文集详情界面
如图图1.4进入我的简介，显示详细简介：
图1.4 我的简介
如图图1.51和图1.52进入我的音乐界面，转到音乐界面，显示所有音乐的列表，及从当前我的音乐界面点击某条目进入某音乐详情界面：
图1.51我的音乐
图1.52 我的音乐详情界面
核心代码（css样式）：
@charset="utf-8";/*保证中文不乱码*/
/*初始化所有界面保证不被初始化的样式影响*/
*{
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"微软雅黑";
}
/*
屏幕宽度超过900px时的样式
*/
@media screen and (min-width:900px){
/*--首页--*/
.header{
width:100%;
height:90px;
background-color:#40bad2;
}
.wrap{
width:1200px;
height:90px;
line-height:90px;
margin:0auto;
/*当height和line-height一样是代表居中*/
}
.logo_mobile,.content_left.user_pic_mobile,.banner_mobile,.mypic_1_mobile,.mypic_2_mobile,.mypic_3_mobile,.mypic_4_mobile{
display:none;
}
.logo,.slog,.slog_ex{
float:left;
}
.slog,.slog_ex{
font-size:18px;
color: white;
}
.content{
width:1200px;
margin:0auto;
overflow:hidden;
}
.content_left{
float:left;
width:272px;
padding-bottom:5000px;
margin-bottom:-5000px;
border-right:1pxsolid#40bad2;
background-color:#d1eef4;
}/*重点：此处是让导航栏和内容可以根据点击某条目具体内容变化而变化长度，保证不会出现断节*/
.content_left.user_pic{
margin:34px;
}
.content_leftulli{
position:relative;/*采用绝对定位*/
width:228px;
height:53px;
margin-bottom:7px;
padding-left:44px;
line-height:53px;
}
.content_leftullia{
color:#222;
font-size:18px;
}
.content_leftulliai{
font-size:20px;
}
/*hoverdai代表将鼠标放上后会出现的效果*/
.content_leftulli.act,.content_leftulli:hover{
background:#40bad2;
}
.content_leftulli.acta,.content_leftulli:hovera{
color: white;
}
/*鼠标移动到后的变化*/
.content_leftulli.act:after,.content_leftulli:hover:after{
position:absolute;/*采用绝对定位*/
/*保证三角形在条目的最右端且居中*/
left:100%;
top:35%;
content:"";
display:block;
border:10pxsolidtransparent;/*将一个矩形沿对角线切割只留下最左边的然后移动形成小三角形*/
border-left-color:#40bad2;
}
.content_right{
float:right;
width:896px;
}
.content_right.banner{
margin:33px0;
}
.content_right.mypic{
width:870px;
}
.content_right.mypic.pic_tit{
margin-bottom:24px;
}
.content_right.mypicimg{
width:22.5%;
margin-right:2.5%;
}
.content_right.mypic.mypic_4{
margin-right:0;
}
.footer{
/*清除所有float等对其的影响*/
clear:both;
}
.wtq{
width:100%;
height:68px;
line-height:68px;
text-align: center;
background:#d9f1f6;
}
.wtqspan{
margin-right:14px;
}
.wtqspani{
font-size:24px;
}
.foottext{
margin-top:32px;
font-size:12px;
color:#a1a1a1;
text-align: center;
}
（2）mobile
图2.1 主界面图 2.21图片列表界面
图2.22图片详情界面图2.3我的文档界面
图2.31文档详情界面图2.4我的简介界面
图2.5我的音乐界面图2.51音乐详情界面
核心代码（css样式）：
/*
屏幕宽度小于600px时的样式
*/
@media screen and (max-width:600px){
/*--文集详情--*/
.right_title,.w_left,.w_right{
display:none;
}
.wenji_content{
clear:both;/*清除所有float等对其的影响*/
width:95%;
padding:02.5%;
}
.wenji_content.wenji_button{
width:100%;
height:100px;
background:#22b8c1;
border:none;
font-size:36px;
color: white;
}
.wenji_content.wenji_details{
margin-top:27px;
background:#f3f3f3;
padding:10%5%;
}
.wenji_content.wenji_detailsspan{
display:block;
height:50px;
line-height:50px;
}
/*nth-child(1)指针对某一标签选择其中的某一个*/
.wenji_content.wenji_detailsspan:nth-child(1){
font-size:24px;
color:#007e86;
}
.wenji_content.wenji_detailsspan:nth-child(2){
font-size:12px;
color:#a93c0b;
}
.wenji_content.wenji_detailsp{
font-size:24px;
color:#6e6e6e;
margin-top:40px;
}
.wenji_content.wenji_detailsp:nth-child(3){
margin-top:23px;
}
.wenji_content.wenji_footer{
font-size:14px;
color:#959595;
margin-top:55px;
margin-left:15px;
}
.wenji_content.wenji_footerp{
height:30px;
line-height:30px;
}
.wenji_content.wenji_footera{
color:#72b7bc;
}
/*--我的音乐--*/
.paging{
/*隐藏*/
display:none;
}
.main{
clear:both;
}
.music{
padding:2.5%;
margin-bottom:40px;
}
.musicdiv{
border:1pxsolid#cdcdcd;
padding:3%;
padding-top:0;
margin-bottom:20px;
}
.musicdiv.music_title{
display:block;
height:90px;
line-height:90px;
font-size:30px;
color:#333;
}
.musicdivimg{
width:100%;
margin-bottom:25px;
}
.musicdiv.music_ckxq{
font-size:24px;
color:#bbb;
height:60px;
line-height:60px;
margin-left:3%;
}
.musicdiv.pic_icon{
float:right;
height:60px;
line-height:60px;
font-size:30px;
color:#b2b2b2;
}
.musicdiv.pic_iconi{
margin-right:30px;
}
#m_button{
background:#39949b;
color: white;
}
3.总结
这次的实训主要是进行网页的编写，其实之前都是有学过的html、css、js，而这一次主要是针对网页样式的编写，考的是布局和审美，不过好在老师把布局格式给我们了，只需要在代码上实现把布局就好。
但是却发现各种标签都忘记了，像float等多种标签用法都模糊了，于是不得不花费时间去摸索，然后开始编写算法但是却发现没有最初想好基本设计方向会出现的各种情况，导致在编写的过程中就会发现出现越来越多问题，各种各样的情况，因为布局是一层套一层，导致经常“飘错”、“重叠”等各种问题，然后就要问老师、上网上去搜索或者询问同学，然后不不停的调试。
在这次的编写中还学到了很多新的东西，例如：对网页大小的控制@media screen and (max-width: 600px)，还有网上常用的图标Font-Awesome，都是可以直接为我们所用的，从而让自己的界面看起来更好看并且减少了自己的工作量，所以说网页格式多种多样，不单单是自己死写代码，更重要的事灵活运用各种各样的小技巧小工具，让自己的网页变得更灵活更好看。
通过这次实验让我了解到现在的学习不仅仅只是自己一个闷头在写还需要和其他同学一起探讨理清自己的思路补充自己不足之处，然后再出现自己不会的地方需要从网上查询，其实很多不会的东西都可以从网上了解，了解学习更加新鲜的东西，充实自己。
浙公网安备 33021202002483