软件工程综合实践实习报告.docx
- 文档编号:510744
- 上传时间:2022-10-10
- 格式:DOCX
- 页数:21
- 大小:712.98KB
软件工程综合实践实习报告.docx
《软件工程综合实践实习报告.docx》由会员分享,可在线阅读,更多相关《软件工程综合实践实习报告.docx(21页珍藏版)》请在冰豆网上搜索。
软件工程综合实践实习报告
软件工程综合实践
实习报告
姓名
学号
班级
项目名称
个人网页
实习地点
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
运行平台:
Windowsxp/Windows2007/Windows2008
分辨率:
最佳效果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时的样式
*/
@mediascreenand(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时的样式
*/
@mediascreenand(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_conte
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 软件工程 综合 实践 实习 报告