软件工程综合实践实习报告

软件工程综合实践

实习报告

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_er_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{