《通信软件开发与应用》课程结业报告

《通信软件开发与应用》课程结业报告

一、作业要求

构建一个静态或动态网站即以下要求中任选A或B，主题自选，要求如下：

A. 静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。

B. 动态网站。使用任何一个前端框架如Angular等进行某应用网站的开发如英雄之旅等，需要有CRUD即增删改查功能并有一定的样式，网站内放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等（可参阅https://angular.io/guide/deployment#deploy-to-github-pages）。

撰写结业报告，要求如下：

A. 题目为《通信软件开发与应用》课程结业报告；

B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；

C. 该报告需表现为HTML格式，从你上面的网站中可访问到。

二、主要内容

本次《通信软件开发与应用》课程结业作业，我写的一个关于明星——赵丽颖的相关介绍的静态网页。

三、开发过程

1、思路

在开始实施之前，我对网页进行了大体上的架构，由于是人物介绍类型的网页，所以我首先将网页分为两大部分——封面和内容，内容有根据导航栏划分为：个人简介、演艺经历、电视剧作品、电影作品、音乐作品、杂志写真，来展现赵丽颖作为一个偶像的相关依据。最后对于导航栏分别对每个部分进行具体的代码编写和实现。

2、具体内容

1.封面：这里只有一个页面，用人物照片作为背景，人物名字跳转链接，将网页跳转到内容。

2.内容：内容除了导航条和底部共有七个部分。

导航条：导航条与七个部分相呼应，有七个长页面内的跳转，用锚点实现，点击任何一个标题即跳转到该页面内的该部分，附带一个搜索框，但没有实际意义。

①首页：与封面相似，在整个内容的最前面，作为引导，除了背景人物图片和名字外，上面还有人物身份信息和一个跳转至人物微博的按钮。

②个人简介：这里将该页面分为了两列，左侧为一个跳转至人物图片自适应相册的封面，右侧为人物简介，概述人物的相关经历。

③演艺经历：这个页面较长，我将人物从经历较丰富的年份开始分年介绍，在右侧放上浮动图片，使文字和图片处于比较合适的位置，给图片附上文字说明，此处图片没有加任何跳转链接。

④电视剧作品：这里用定时滚动的方式将多个电视剧介绍页面分页写的，共四页，设置上下两个分页按钮，每个页面又分为三列，每一列为一部作品的介绍，一列分为四个内容：图片、名字、上映时间、简介，这里给图片和名字都附上了百度百科详情的跳转链接。

⑤电影作品：这一页与电视剧作品的页面布局一致，不过只有两页。

⑥音乐作品：该页面置顶居中题目包含一个跳转链接，跳转至QQ音乐中本作业主要任务的作品界面；这一页用表格列出了人物的音乐作品，表格为自适应长度的三列，第一列为名称，第二列为发行时间，第三列为音乐简介，没有跳转链接。

⑦杂志写真：该页面置顶居中题目包含一个跳转链接，跳转至该人物的部分杂志写真图片的旋转相册，对于杂志简介部分的列出与音乐作品一致，用表格进行的，也未附跳转链接。

底部：由于人物介绍我不知道需要什么样的底部，所以我加了一个超级简单的底部，只跳转至我的CSDN中结业报告。

四、所遇问题

1、已解决

首先是在做封面的时候，想要把封面正中的标题作为透明色且在鼠标落在该处时，改变颜色，表示这里可能有链接，通过查阅资料文字透明我加了一个类的css来实现的，颜色的改变用刚加的类的：hover实现的。

然后在个人简介部分实现相册封面的制作，包括页面折叠效果和标题，我对这个内容不太了解，所以我在浏览器中找了一些相册，通过查看他们的代码自己改写实现的。

对于演艺经历部分的图片进行float后，发现文字和图片还是不贴合，我通过查看别人网页中的同类型的部分，给文字也增加css效果，两者共同才实现了现在页面的效果；还有对该部分的图片加小标题也是怎样解决的。

影视作品部分，我想要用分页展示，但奈何代码水平一般，自己弄了很久都不美观，所以最后采用了教程模板中的分页模板，然后进行改写，实现了当前效果。

最后就是不在本页面跳转网页，而是另起一个网页打开，这是课程学习中的知识中有的。

2、未解决

未解决的问题主要是杂志写真部分的相册，实现的旋转相册不能用鼠标悬停，只能用鼠标启动旋转，我在网上找了可悬停的相册进行代码对比和改写，但最终没有实现；然后还有该部分的表格分页，因为这里有36列表格，我准备将它分为三页，但通过网上查阅资料和改写并没有成功。

个人简介中的人物相册做的是一个在本页面上覆盖出现一个放大图片可翻页的效果，用VSCODE或者直接打开网页的效果如下图：

源码未变，但是放到GitHub上就没有这种效果了，我尝试修改但并没有发现问题所在。

五、总结

本次课程中，我对于web网页前端有了相应的了解，对HTML、CSS、JavaScript等有了比较详细的了解，由于制作动态网页Angular的相关知识比较难理解，所以这里我学的比较差。通过本次结业作业，使我对web开发的前端“三剑客”有了更加深入的理解，对于制作一个静态网页的方法和相关知识更加熟悉。