基于Boostrap的响应式电影网站

到山东找蓝翔

发布日期: 2021-07-20 10:06:10 浏览量: 71
评分:
star star star star star star star star star star
*转载请注明来自write-bug.com

一、网站规划

1.1 需求分析

由于我所选择的主题为影视网站,据此得出以下需求分析:

  • 响应式布局:网站适应电脑、平板等设备的屏幕大小,并能够根据浏览器窗口的大小调整布局,在各种屏幕大小不一的设备上都能有效的保证网页不会错乱

  • 页面美观:页面美观与否在很大的程度上会影响到用户的使用体验和对网站的第一印象,两个功能相同的网站,人们更倾向于使用更美观的网站

  • 简约且齐全:网站设计偏向简约,这样用户更方便且更快速的找到自己所要找的内容,但简约的同时也没有缺少必要的数据,能够在我们网站提供给用户的,就不要麻烦用户再到其他网站查找

1.2 网站结构分析

  1. HS 影院/
  2. ├─css/ --存放 CSS 样式的文件夹
  3. ├─bootstrap.min.css --Bootstrap 框架的 CSS 样式
  4. ├─font-awesome.min.css --Font Awesome 图标字体库的 CSS 样式
  5. └─myStyle.css --自写的用于调整网页细节的 CSS 样式
  6. ├─fonts/ --存放 Font Awesome 图标字体库的文件夹
  7. └─… --Font Awesome 图标字体库文件
  8. ├─js/ --存放 js 文件的文件夹
  9. ├─jquery-3.5.1.min.js --Jquery js 文件
  10. ├─bootstrap.min.js --Bootstrap js 文件
  11. └─my-js.js --自写的 js 文件
  12. ├─image/ --存放图片的文件夹
  13. ├─cover/ --存放电影封面图片的文件夹
  14. └─… --一些电影封面图片
  15. └─… --除了电影封面以外,网页上用到的其他图片
  16. ├─video/ --存放视频的文件夹
  17. └─ndmz.mp4 --网站用上的视频
  18. ├─webs/ --存放网页的文件夹
  19. ├─about_us.html --关于我们页面
  20. ├─film.html --电影分类的首页
  21. ├─film_info.html --电影信息介绍页面
  22. ├─film_search.html --电影分类中的动画分类页面
  23. ├─play.html --播放电影的页面
  24. ├─login.html --登录页面
  25. └─register.html --注册页面
  26. └─index.html --打开网站的第一个页面

1.3 网站风格分析

由于网站的主题是影视,因此选用了主体偏向黑暗风格,给用户以沉浸式体验,同时也为了突出网页中的信息、按钮和链接等,所以给它们设置了比较明亮的颜色来形成对比,使他们更为突出、显眼,且此网站为展示型网站,核心功能为展示影视信息和观影,黑暗风格的主体和对比也是为展示信息和观影而服务。

1.4 功能模块图

功能模块图如图:

从中可以看出网站的网页类型分为 8 种,其中在以后还可以增加与电影页同类型的网站,如电视剧页、动漫页和综艺页等,可以根据影视的类型以后再增加;视频简介页又可以根据视频数据的不同来添加,但它们提供的功能都是相同的。

二、页面详细设计

2.1 欢迎页面设计

在平时上网时偶尔会遇到一些网站有着自己的欢迎页或是导航页,往往都给人一种惊艳的感觉,而且一方面是因为我刚好前段时间看过一个教人如何用视频作为网页背景的视频,另一方面是我想把我做的这个网站部署到我的阿里云服务器上作为我的学习成果展示给朋友们,最后一方面是因为项目要求子网页不得少于 6 个页面,但我又不想做几个结构几乎相同,只是内容不同的相似网页来敷衍老师和自己,所以就做了少有的欢迎页。

2.1.1 设计思路

页面头部区域为导航栏组件,除去网站名称,左边是链接到“关于我们”页面的导航,仅在这个页面出现,是为了不影响其他页面的使用体验的同时下给用户一个了解作者的机会,右边是首页和各种影视的导航;底部区域是声明一点网站信息和使用了哪些框架和字体图标;页面中间是欢迎语等文字和“立即进入”按钮,链接到电影页面;整个页面的重点在视频背景,头部区域和底部区域背景色为半透明黑色,就是为了模仿影院里的电影上下的两条大黑边,给用户一种在影院看电影的感觉。

2.1.2 主要技术

导航栏、视频背景

2.1.3 核心代码

前提

body 里的一切内容都放在一个 class=”container-fluid”的 div 中

HTML

导航栏并无特别之处,代码略。

CSS

去除 container-fluid 类的内边距,使视频能完整填充页面

视频绝对定位,并使视频位于网页的最底图层

根据窗口比例更改视频的大小,防止视频变形

2.1.4 实现效果

此时为视频播放了一部分后的截图

2.2 关于我们页面设计

此页面是为了介绍一下作者而已。

2.2.1 设计思路

在欢迎页除点击会在新窗口打开此页面,页面头部区域依旧是到导航栏,但不与其他网页链接,底部区域与欢迎页相同,中间区域从上到下是 3 个盒子,一个放作者信息,一个再放个视频在自动播放(为了好看),最后一个放点文字什么的;作者信息那有一些软件或网站的图标,鼠标放上去就隐藏,因为并不会让用户联系我。

2.2.2 主要技术

按钮组、视频播放

2.2.3 核心代码

HTML

按钮组

视频

CSS

2.2.4 实现效果

按钮组

视频

2.3 电影页面设计

此页面是参考了不少其他影视类网站,最终才决定样式的。

2.3.1 设计思路

头部区域导航栏与前面的网页不同,影视分类放到左边,右边再是搜索框和登录,底部区域不变,中间区域从上到下为轮播、列表组做的分类和热播电影显示。

2.3.2 主要技术

导航栏、轮播、分类列表组、栅格系统、返回顶部

2.3.3 核心代码

导航栏、轮播并无太多特别,代码略

此代码使轮播圆角

HTML

分类列表组

栅格展示电影

后面大致相似,略

返回顶部

CSS

列表组

调整了一点细节,还使窗口宽度不都够大时,出现下方滚动条。

栅格展示电影

调整了一些细节,以及添加了鼠标悬浮事件。

返回顶部

让返回顶部按钮绝对定位在页面的右下角

2.3.4 实现效果

导航栏

轮播

分类列表组

栅格系统

返回顶部

2.4 动画分类页面设计

此页面是当用户选择分类来查找电影时,用来显示分类结果的。

2.4.1 设计思路

当用户选择一个分类进入筛选时,往往还要选择第二、第三个筛选条件,因此在此页面尽量去除其他与筛选这一过程无关的部分,因此此页面仅保留头部、底部、分类列表组和筛选结果电影展示。

2.4.2 主要技术

导航栏、分类列表组、栅格系统、返回顶部

2.4.3 核心代码

其他组件并无多大变化

HTML

栅格展示电影

2.4.4 实现效果

分类列表组

栅格系统

2.5 视频简介页面设计

此页面将中间区域的内容从上到下换为电影简介、电影推荐、播放、资源下载和详细剧情 5 部分。

2.5.1 设计思路

电影简介部分由电影封面和电影信息组成;电影推荐部分是栅格系统做的显示电影推荐电影;播放部分是几个按钮样式的超链接,包含多个观看该电影的网站;资源下载部分左边是资源的名称;右边是按钮样式的超链接,链接内容为各类软件的下载链接,点击链接可以唤起软件下载;详细剧情部分主体为完整的剧情介绍。

2.5.2 主要技术

导航栏、栅格系统、返回顶部

2.5.3 核心代码

HTML

以下部分使用了栅格

电影简介

资源下载部分

2.5.4 实现效果

各部分实现效果如图

2.6 视频播放页面设计

此页面也是中间区域与其他网页不同,中间区域从头到尾分别为视频播放部分、线路切换部分、评价部分和最近热播部分。

2.6.1 设计思路

与主流的视频播放网站相似,出现在用户面前的先是播放视频部分,往下就是切换线路即切换播放来源或播放网站,再到用户的评论,登录的用户点击“回复”按钮会出现模态框以输入内容回复,最后是热播视频推荐。

2.6.2 主要技术

导航栏、栅格系统、返回顶部、弹出模态框、按钮组、视频播放

2.6.3 核心代码

其他组件与前文的相似,略

评论部分

HTML

弹出模态框

2.6.4 实现效果

播放视频部分(声音不可用是因为此视频为静音)

线路切换

评价和按钮组

回复模态框

最近热播

2.7 登录页面设计

观影网站能够存粹的观影固然好,但若能在观影的过程顺便交个朋友或是根据别人的评价来大致了解一个视频的水平也是挺不错的,因此加入了登录功能。

2.7.1 设计思路

单纯的用此网站注册的账号登录太单调,且不是每个用户都喜欢繁琐的注册过程,因此加入其他登录方式很重要,但它们这不能是第一选择,所以要弄个折叠面板把它们藏起来,为了方便布局,用按钮组来实现。

2.7.2 主要技术

按钮组、折叠面板

2.7.3 核心代码

HTML

CSS

登录按钮悬浮变大和给其他登录方式图标改颜色

2.7.4 实现效果

2.8 注册页面设计

有了登录页面,那肯定也得有注册页面了。

2.8.1 设计思路

避免用户注册密码时输入错密码,特别加入了双重确认密码的过程。

2.8.2 主要技术

js 函数

2.8.3 核心代码

HTML

密码输入框和再次确认密码输入框

属性 onkeyup 为每输入数字或文本都会运行函数里的代码

Js

获取密码输入框的内容和再次确认密码输入框的内容,然后对比,然后根据对比结果给 id 为 tip 的 span 添加不同的样式和文字。

2.8.4 实现效果

三、网站测试

3.1 欢迎页面测试

×1080 屏幕

Width < 960px

Width < 540px

3.2 关于我们页面测试

×1080 屏幕

Width < 960px

Width < 540px

3.3 电影页面测试

×1080 屏幕

Width < 960px

Width < 720px

Width < 540px

3.4 动画分类页面测试

×1080 屏幕

Width < 960px

Width < 540px

3.5 视频简介页面测试

×1080 屏幕

Width < 960px

Width < 540px

3.6 视频播放页面测试

×1080 屏幕

Width < 960px

Width < 540px

3.7 登录页面测试

×1080 屏幕

Width < 960px

Width < 540px

3.8 注册页面测试

×1080 屏幕

Width < 960px

Width < 540px

总结

前端框架能够显著的提升开发网站的速度,而且在很多地方给了开发人员很高的便利性,但也有很多样式和功能是框架中没有的,这时候我们就需要敢于去重写框架中的一些部分,而且还要敢于脱离框架提供的样式,加入自己的风格。这次网页设计项目我一共设计了 8 个页面,也尝试了许多组件来搭配,但花费我最多时间和精力的却并不是实现网页,而是查找各种适合的资源,如视频、轮播图的图片、电影的封面等,如果文件大小太大,还要进一步压缩文件,其次才是实现网页时的细节样式调整。如果我们平时上网的时候也顺手收集一些网站素材,那对我们以后项目开发应该会事半功倍。

上传的附件 cloud_download hs.zip ( 31.38mb, 1次下载 ) cloud_download 响应式.docx ( 20.15mb, 1次下载 )
error_outline 下载需要13点积分
eject