基于Boostrap+Html的响应式Web电影网站设计_web前端影视网站网站风格分析

作者：编程挑战者 | 2024-02-05 15:03:36

踩

web前端影视网站网站风格分析

全套资源下载地址：https://download.csdn.net/download/sheziqiong/86770033
全套资源下载地址：https://download.csdn.net/download/sheziqiong/86770033
目录

项目设计目标及要求 2
网站规划 2
2.1. 需求分析 2
2.2. 网站结构分析（站点目录） 2
2.3. 网站风格分析 3
2.4. 功能模块图 3
页面详细设计（每个模块的设计思路、用到的主要技术、核心代码及实现效果） 3
3.1. 欢迎页面设计 4
3.2. 关于我们页面设计 5
3.3. 电影页面设计 6
3.4. 动画分类页面设计 9
3.5. 视频简介页面设计 10
3.6. 视频播放页面设计 12
3.7. 登录页面设计 14
3.8. 注册页面设计 15
网站测试 16
设计总结及心得体会 25
参考文献 25
1.项目设计目标及要求
设计目标：
(1)响应式网站；
(2)网站样式简介、美观；
(3)主题为影视；
要求：
(1)项目内容不雷同，不抄袭；
(2)使用前端框架，如Bootstrap，网页有响应式布局效果；
(3)站点目录层次分明，避免使用中文命名；
(4)图片和其它媒体素材各建立一个独立的目录；
(5)网站的子网页数目在6个以上；
2.网站规划
2.1.需求分析
由于我所选择的主题为影视网站，据此得出以下需求分析：
(1)响应式布局：网站适应电脑、平板等设备的屏幕大小，并能够根据浏览器窗口的大小调整布局，在各种屏幕大小不一的设备上都能有效的保证网页不会错乱；
(2)页面美观：页面美观与否在很大的程度上会影响到用户的使用体验和对网站的第一印象，两个功能相同的网站，人们更倾向于使用更美观的网站；
(3)简约且齐全：网站设计偏向简约，这样用户更方便且更快速的找到自己所要找的内容，但简约的同时也没有缺少必要的数据，能够在我们网站提供给用户的，就不要麻烦用户再到其他网站查找。
2.2.网站结构分析（站点目录）
HS影院/
├─css/ --存放css样式的文件夹
│ ├─bootstrap.min.css --Bootstrap框架的css样式
│ ├─font-awesome.min.css --Font Awesome 图标字体库的css样式
│ └─myStyle.css --自写的用于调整网页细节的css样式
├─fonts/ --存放Font Awesome 图标字体库的文件夹
│ └─… --Font Awesome 图标字体库文件
├─js/ --存放js文件的文件夹
│ ├─jquery-3.5.1.min.js --Jquery的js文件
│ ├─bootstrap.min.js --Bootstrap的js文件
│ └─my-js.js --自写的js文件
├─image/ --存放图片的文件夹
│ ├─cover/ --存放电影封面图片的文件夹
│ │ └─… --一些电影封面图片
│ └─… --除了电影封面以外，网页上用到的其他图片
├─video/ --存放视频的文件夹
│ └─ndmz.mp4 --网站用上的视频
├─webs/ --存放网页的文件夹
│ ├─about_us.html --关于我们页面
│ ├─film.html --电影分类的首页
│ ├─film_info.html --电影信息介绍页面
│ ├─film_search.html --电影分类中的动画分类页面
│ ├─play.html --播放电影的页面
│ ├─login.html --登录页面
│ └─register.html --注册页面
└─index.html --打开网站的第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HS影院 - your best cinema！</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
<div class="container-fluid">
<!--导航栏-->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top mybg">
        <a class="navbar-brand" href="#"><b style="font-size: 25px">HS 影院</b></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mynavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" target="_blank" href="webs/about_us.html">关于我们 <i class="fa fa-hand-o-left"></i></a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#"><i class="fa fa-home"></i> 首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="webs/film.html"><i class="fa fa-film"></i> 电影</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-tv"></i> 电视剧</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-heart-o"></i> 动漫</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-smile-o"></i> 综艺</a>
                </li>
            </ul>
        </div>
    </nav>

<!--视频背景-->
    <video id="videoBG" poster="image/ndmz-bg.jpg" autoplay muted loop>
        <source src="video/ndmz.mp4" type="video/mp4">
    </video>

<!--欢迎语-->
    <div class="nav text-light flex-column justify-content-center text-center" id="textbox">
        <p><b>Hello!Welcome</b></p>
        <a href="webs/film.html">
            <button class="align-self-center" id="btn-go" type="button"><b>立即进入!</b></button>
        </a>
        <p id="title">用匠心去探索影视！</p>
    </div>


<!--脚部-->
    <div class="fixed-bottom text-center" id="foot">
        <p class="font-weight-normal">HS 影院 ©2021 || Power By Bootstrap
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bootstrap-fill" viewBox="0 0 16 16">
                <path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/>
                <path d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"/>
            </svg>
            &Font Awesome
            <i class="fa fa-fa"></i>
        </p>
    </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75