《web应用基础》课程结业报告

《web应用基础》课程结业报告

1.项目工作

本次我所构建的是一个有关游戏赛博朋克2077主题的静态网站，以HTML语言和CSS框架中的MDB搭建的游戏主题网页。

2.开发过程

本次网页开发基于棋哥教学网的全屏作品模板，将网页分为了六个部分分别为：

1.视频主页部分代码

<div class="view" id="intro">
            <video class="video-intro" poster="https://files.cdn.namejin.com/cms/1305400295418781696.jpg" playsinline
                autoplay muted loop>
                <source src="https://media.st.dl.pinyuncloud.com/steam/apps/256805103/movie_max_vp9.webm?t=1602864450">
                type="video/mp4">
            </video>

        </div>

效果：

2.游戏介绍部分代码

<section id="about" class="py-5">

            <!-- Container -->
            <div class="container">
                <!-- Section heading -->
                <h2 class="h1-responsive font-weight-bold text-center mb-5">游戏介绍</h2>
                <!-- Section description -->
                <p class="font-weight-bold  text-center w-responsive mx-auto mb-5 ">《赛博朋克
                    2077》是一款开放世界动作冒险游戏，故事发生在夜之城。这是一座五光十色的大都会，
                    权力更迭和身体改造是不变的主题。您扮演一名野心勃勃的雇佣兵：V，正在追寻一种独
                    一无二的植入体。只要得到它，就能掌握获得永生的关键。您可以自定义角色的义体、技
                    能和玩法，探索包罗万象的城市。您做出的选择也将会对剧情和周遭的世界产生影响。
                </p>
                <!-- Grid row -->
                <div class="row">

                    <!-- Grid column -->
                    <div class="col-lg-5 text-center text-lg-left">
                        <img class="img-fluid" src="mdb1/1.jpg" width="474px" height="690px" alt="Sample image">

效果：

3.人物介绍部分代码

 <h2 class="h1-responsive font-weight-bold mb-5">人物介绍</h2>
                <!-- Section description -->
                <p class="font-weight-bold w-responsive mx-auto mb-5">
                    《赛博朋克2077》具有极高的自由度，主角在游戏中会遇到形形色色的NPC角色，它们各有自己的经历，可以帮助玩家完成任务、推进剧情发展等。.</p>

                <!-- Grid row -->
                <div class="row text-center">

                    <!-- Grid column -->
                    <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
                        <!--Featured image-->
                        <div class="view overlay rounded z-depth-1">
                            <img src="https://img1.baidu.com/it/u=164412950,1264676204&fm=26&fmt=auto&gp=0.jpg"
                                class="img-fluid" alt="Sample project image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                            <!--Excerpt-->
                            <div class="card-body pb-2">
                                <h4 class="font-weight-bold my-3">强尼·银手</h4>
                                <p class="font-weight-bold">
                                    赛博朋克系列的核心人物、超人气的摇滚小子、武侍乐队的主唱。在赛博朋克2077中由好莱坞男星基努·里维斯扮演。
                                </p>
                                <a href=" 

效果：

4.游戏实景部分代码

 <h2 class="h1-responsive font-weight-bold mb-5">游戏实景</h2>
                <!-- Section description -->
                <p class="grey-text w-responsive mx-auto mb-5">在赛博朋克2077中充满了未来的科技元素以下是游戏场景中的极致图片敬请赏析.</p>

                <div class="row">
                    <div class="col-md-12">

                        <div id="mdb-lightbox-ui"></div>

                        <div class="mdb-lightbox">

                            <figure class="col-md-4">
                                <a href="https://pic4.zhimg.com/80/v2-
                                    data-size="1600x1067">
                                    <img src="https://pic4.zhimg.com/80/v2-
                                        width="356" height="232" class="img z-depth-1-half">
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://pic2.zhimg.com/80/v2-42274ee22707003d23fe34c6762bcfe6_720w.jpg?source=1940ef5c"
                                    data-size="1600x1067">
                                    <img src="https://pic2.zhimg.com/80/v2-42274ee22707003d23fe34c6762bcfe6_720w.jpg?source=1940ef5c"
                                        width="356" height="232" class="img z-depth-1-half" />
                                </a>
                            </figure>

效果：

5.游戏评价部分代码

 <h2 class="h1-responsive font-weight-bold my-5">游戏评价</h2>

            <!-- Grid row -->
            <div class="row">

                <!--Carousel Wrapper-->
                <div id="multi-item-example" class="carousel testimonial-carousel slide carousel-multi-item mb-5"
                    data-ride="carousel">

                    <!--Controls-->
                    <div class="controls-top">
                        <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="prev"><i
                                class="fas fa-chevron-left"></i></a>
                        <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="next"><i
                                class="fas fa-chevron-right"></i></a>
                    </div>
                    <!--Controls-->

                    <!--Indicators-->
                    <ol class="carousel-indicators">
                        <li data-target="#multi-item-example" data-slide-to="0" class="active light-blue darken-4"></li>
                        <li data-target="#multi-item-example" data-slide-to="1" class="light-blue darken-4"></li>

                    </ol>
                    <!--Indicators-->

                    <!--Slides-->
                    <div class="carousel-inner" role="listbox">

                        <!--First slide-->
                        <div class="carousel-item active">

效果：

6.联系我们部分代码

<h2 class="h1-responsive font-weight-bold text-center mb-5">Contact us</h2>
                <!-- Section description -->
                <p class="text-center w-responsive mx-auto mb-5">Our telephone number and email address are listed
                    below. If you have any reasonable suggestions, you can contact us here. Your valuable suggestions
                    are welcome.
.</p>

                <!-- Grid row -->
                <div class="row">

                    <!-- Grid column -->
                    <div class="col-md-9 mb-md-0 mb-5">

                        <form>

                            <!-- Grid row -->
                            <div class="row">

                                <!-- Grid column -->
                                <div class="col-md-6">
                                    <div class="md-form mb-0">
                                        <input type="text" id="contact-name" class="form-control">
                                        <label for="contact-name" class="">Your name</label>
                                    </div>
                                </div>

效果：

以上就是本次网页的所有版块。

3.问题与解决

本次网页遇到很多形形色色的问题比如存放文件的问题当我在网页插入相应的图形与图片文件后在IE浏览器中却显示不出，造成问题的主要原因便是图形文件与静态网页文件没有在同一个路径之下进行显示，解决方法便是规范文件的储存位置使之在同一目录下。还有我在网页上插入了大量视频动画链接和flash动画导致网页卡顿甚至动画显示不出来，主要原因便是视频素材内存过大网速过慢导致的解决办法是我多余的flash动画舍弃并将所需的大量视频素材从网上下载到本地磁盘然后保存到与静态网页文件的同一目录下，这样即使网络条件差的情况下依然流畅运行。

4.总结

通过这次个人网页的制作，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。通过把自己的网页上传到互联网上，对文件的保存、上传、下载以及修改等知识有了更牢靠的掌握。通过自己的努力完成了自己上传到网上的第一个作品，那种成就感是无法用语言形容的。所以我觉得这次制作网页我已经达到了自己的目的，而不是单单为了完成作业而已。这是一个完全关于自己的个人网页，总之我希望在后续的探索与学习过程中依然能像此次网页搭建一样保持一份积极向上的心态面对每一次磨炼与挫折，在不断的学习历练中茁壮成长。