《Web应用基础》结业报告

《Web应用基础开发与应用》结业报告

前言

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

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

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

（3） 该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。

网站介绍

我设计的是一个以影视作品为主题的静态网站，内容主要是以多种方式展示影视素材，页面包括登录、主页、排行、表演者、随便看看五个板块。与此同时还包括课题实验报告的入口。

• 登录：登陆功能是考虑到登陆是网站的常规操作，在这里使用登陆会检验输入邮箱是否符合要求。
• 主页：主页包括推荐轮播和更多精彩两个板块，轮播主要以类似幻灯片的方式显示电影，电视局中的一些剧照；更多精彩主要以相关影视作品海报的方式显示出来，并赋予一定的剧情介绍。
• 排行：排行板块试图根据流行指数显示当下的电影电视剧的热度情况，显示方式是以影视作品封面加文字的形式完成。为防止页面过于单调，在下部添加猜你喜欢的功能板块。
• 表演者：表演者板块主要显示我个人较为喜爱和崇拜的表演艺术家，通过在对应照片上加文字的方式将他们的个人经历，大致作品显示出来，力争做到简介，好看的效果。
• 随便看看：随便看看板块主要是插入一个带链接的视频，在网页上实现视频的播放。同时发现加入B战的功能之后能实现发送弹幕，显示弹幕等功能。

开发过程

确定题材：我是一个电影爱好者，平常喜欢看一些美剧，英剧，科幻题材的电影，加上之前偶然的机会看到了欧美国家一些影视网站的排版，其简洁、大方的设计理念十分讨我喜爱，内心对影视网站的设计充满了向往，所以就以此为开始了我的开发过程。

遇到问题

1、网页背景设置

我希望达到的预期效果是，将选择的页面完整地平铺在网页上，这样在视觉效果上看起来会好一些。

显然是没有达到100%完全展示的。

no-repeat只能解决图片是否需要重复，对图片大小没有作用。

在首页(index.html)中加入background-size属性，设置为100%：

 body{
            background: url("https://cnbl-			  cdn.bamgrid.com/assets/573dd3f069e6d574eac4e593f57d380b4c1c8a2319bc940a93749779c5bd34cc/original");
            background-size: 100%
     }

修改后结果：

添加文字后最终效果：

2、MDB付费内容获取

虽然有老师提供的、让我们只用于学习交流的mdb源文件有了，但具体的实施代码仍是一个未知。

“既然已经出现在我电脑的页面上了，我就能将它获取到。”

解决方法：

我选择的方法是查看源代码，全部复制到sublime中，通过搜索关键字的方法获得源代码。

以获取圆角按钮源代码为例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3sLBkDhu-1657382821003)(C:/Users/Oliver%20Cheung/AppData/Roaming/Typora/typora-user-images/image-20220709053648331.png)]

获得了相关源代码。

可以用这个来创建我们每个功能界面的返回按钮：

如左上角。

3、设计主页面：

主页面主要是幻灯片加卡片的形式，如果使用mdb现成的模板来做，并不算太困难。我这里选择的就是幻灯片加卡片的模板，但要注意更具实际调整图片、文字的大小，粗细，达到简洁大方的效果。

参考和实际对比：

主页面大致实现效果：

4、设计排行：

排行的设置于主页面相同，但要实现对其图片大小和位置的控制。

大致实现效果：

排行附带功能，猜你喜欢。具体文字呈现喜欢作品名称，通过设置属性来设置其背景状态：

大致实现效果：

5、表演者信息的显示文字：

做到两点：

1. 更具所放图片来进行文字排版，保证人与文字不冲突。（不要遮挡靓男靓女的脸庞）
2. 在进行网页缩放时，文字与图片的相对位置不动。

条件1.可根据调节其上下左右外边距来实现；

条件2.需要设置图片位置与文字位置的相对位置关系不变，这里需要用到之前提及的父元素，子元素的知识点。

以小李子的资料为例：注意position属性的设置。

<div style="height: 400px; width:100%; position: relative; background-image: url(./img/xiaolizi.jpg);">
       
        <div style="text-align: right; top: 20%; bottom: 30%; left: 50%; position: absolute;">
            <p style="color: white; font-weight:bold; text-align: left; font-size: xx-large;">莱昂纳多·迪卡普里奥（Leonardo DiCaprio）</p>
            <p style="color: white; font-weight:bold; text-align: left;">1990年以16岁之龄参加电视剧《成长的烦恼》的拍摄。1993年凭借《不一样的天空》获得了第66届奥斯卡金像奖最佳男配角奖提名和第51届美国电影电视金球奖最佳男配角提名。1996年主演电影《罗密欧与朱丽叶》，荣膺第47届柏林国际电影节最佳男主角。1997年主演电影《泰坦尼克号》。2002年出演电影《逍遥法外》，并因此获得了金球奖男主角提名。2004年凭借电影《飞行家》获得美国金球奖最佳男演员奖。2006年凭借《无间道风云》、《血钻》获得金球奖最佳男主角双提名。2010年出演电影《盗梦空间》。2013年主演电影《了不起的盖茨比》。2014年1月凭借《华尔街之狼》获得金球奖最佳男主角奖；同年9月17日被联合国授予联合国“和平使者”，关注气候变化。2015年，莱昂纳多·迪卡普里奥收入2900万美元，居福布斯全球演员富豪榜排名第13位。</p>
        </div>
       
    </div>

页面100%缩放时：

缩小后：

相对位置仍没变，仍处于图片框内，没有移动到其他演员的位置上去。

6、随便看看功能模块。

这个模块的设计我是准备放上一段视频进行播放，我选择的是美剧爱死机3的预告片，之前我选择的视频来源是通过微博保存分享时生成的连接，但后来我发现微博生成的的视频链接在一定时间后会失效，访问不到，后来我发现b站在PC端提供分享时候会有嵌入代码的选项。同时，嵌入代码不仅提供播放窗口，还提供弹幕更能，可查看弹幕和发送弹幕。

随便看看播放效果展示：

7、存在未解决问题和缺陷：

在主页面，页面缩放时，由于每张图片的实际长款比不同，在调整页面比例时就会出现图片大小不一致的问题：

对应效果：

解决方法应该与用标签限制图片有关，通过对其定义同一个class属性，来达到同时控制的目的。

总结：

1. 对html、css代码有了进一步的了解和提升，懂得了如何使用mdb中的模板来达到自己的预期设计。此次设计的web网站大体整体就是是我所期望的样子，对其比较满意。
2. 对布局结构有了更清晰的认识，如上面提及的文字与图片的相对位置关系不变时需要设置哪些属性时，具体的操作和背后的原理都有了较为清晰的认识。
3. 对网站的设计打磨过程培养了我的耐心和知难而进的理工科精神，在对自己感兴趣的作品完成后有满满的成就感。
4. 在查阅资料中，明白了web的学习也需要经常复习，对于一些常见的知识点各种回答天花乱坠，但可能最准确的答案是只需很简单的几步就做好了，原因就是在于学习新知识后对旧知识的遗忘。

部分素材来源：

• https://www.disneyplus.com/
• https://www.marvel.com/