编程技术

Document

基于HTML+CSS+JavaScript网站的设计与开发（仿小米MUI网站）【100011414】

Web课设报告

1 课设题目

基于HTML+CSS+JavaScript网站的设计与开发

2 课设目的

通过本课程设计，学生需要掌握web前端开发技术的基本技能和专业能力，培养学生如下技能：

知识目标：复习、巩固Web前端的基础知识，进一步加深对Web前端技术的理解和掌握；

能力目标：理解网站设计的四个阶段：网站的前期准备、网站的结构架设、网站的效果设计和网站的人机交互，综合应用 HTML、CSS、JavaScript等技术来开发网站；

素养目标：课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析 解决实际问题的能力。培养学生在项目开发中团队合作精神、创新意识及能力。

3 选题依据及内容

我做的是我自己想做的一个MIUI 10的官网。我是参考小米原MIUI 10官网的设计，然后加入了自己的想法做的。这个网页的制作包含了我们所学的浮动，定位，JavaScript等等，还有一些我们未学过的知识。当亲自动手自己做网页的时候并没有自己想想的那么简单也没有那么的难，从一开的无从下手到最后的完成，中间我在网上搜索大量的知识和操作，还在书上资料寻找那些解决问题的办法。通过动手实践，觉得我有点喜欢敲代码了，很有成就感，并且对所学的知识进行了巩固，还学了更有意思和难度的方法。

下面就是我所选做的MIUI 10网页主页，MIUI 10介绍子页，登录注册页和下载页这四个页面。

4 设计过程

4.1 总体设计

我认为做一个网站首先要明白它的网页设计步骤:

  • 确定网站主题

  • 分析网站的功能，将网站所有的功能在文档中体现。

  • 分析网站的主题，选择符合网站主题的方法。

编写步骤：

  • 先用html写出结构。

  • 用CSS写出样式。

  • 用js写出动态效果。

4.2 详细设计

4.2.1 MIUI官方网站

一，整体分析

二、局部分析

（1）分析效果图

网页的头部为选项,以及主页面和子页面的超链接。可以通

表单来定义，需要在表单外加一层大盒子。

（2）准备图片素材

根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个

  • 内的字体颜色#666（偏白）。

  • （3）搭建结构

    在html页面添加结构代码。定义head的两对

    标签，内嵌
      和
    • 来设置单元格，插入导航栏。

      （4）控制样式

      设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href=

      “”>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。

      （1）分析效果图

      大型MIUI10海报。

      （2）准备图片素材

      从原网页按照原始比例截取。

      （3）搭建结构

      在html页面添加结构代码。定义

      盒子，在里面放入原网页比例大小海报，并为其添加跳转下载页的超链接。

      （4）控制样式

      设置盒子及海报图居中，位置居中。

      (1）分析效果图

      主页的三个分栏页，分别跳转到不同的页面。

      （2）准备图片素材

      从原网页内链接下载。

      （3）搭建结构

      在html页面添加结构代码。先定义一个最大的盒子，里面有三个小盒子，通过左浮动使得小盒子并排排列。每个盒子里面放入相应图片和内容，并为其加超链接，使其跳转至相应内容。

      （4）控制样式

      设置单元格的宽和高。以及内边距padding。文字都设为超链接;在鼠标点到单元格上时，单元格的背景色background-color变深,同时还要清除超链接的格式。

      （1）分析效果图

      包括原网站网址和个人信息

      （2）搭建结构

      在html页面添加结构代码。定义一对

      标签，来控制盒子。

      （3）准备图片素材

      无

      （4）控制样式

      控制盒子的宽和高，以及内边距padding。以及外边距margin让信息和版权居中

      4.2.2 小米账号登陆/注册

      （1）分析效果图

      网页的头部为选项,以及主页面和子页面的超链接。可以通

      表单来定义，需要在表单外加一层大盒子。

      （2）准备图片素材

      根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个

    • 内的字体颜色#666（偏白）。

    • （3）搭建结构

      在html页面添加结构代码。定义head的两对

      标签，内嵌
        和
      • 来设置单元格，插入导航栏。

        （4）控制样式

        设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href=

        “”>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。

        1 分析效果图

        建一个一个大盒子插曲背景图片。大盒子嵌套一个小盒子，然后小盒子里面有多个盒子，并以表格形式编写登陆界面样式。插入小图标和超链接。

        2 准备图片素材

        准备小图标图片及大背景图片

        3 搭建结构

        在html页面添加结构代码。定义head的两对

        标签，内嵌
          和
        • 来设置单元格，插入按钮。

          4 控制样式

          设置单元格的宽和高。以及内边距padding。文字都设为超链接;在鼠标点到单元格上时，单元格的背景色background-color变白色字体色变黑色,同时还要清除超链接的格式。用type和value来手机号登录和注册。

          用js语言控制当鼠标从输入栏移走时若无输入，网页弹出相应提醒（见上面效果图）。

          4.23 MIUI 10

          一，整体分析

          二，局部分析

          1 分析效果图

          网页的头部为选项,以及主页面和子页面的超链接。可以通

          表单来定义，需要在表单外加一层大盒子。

          2 准备图片素材

          根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个

        • 内的字体颜色#666（偏白）。

        • 3 搭建结构

          在html页面添加结构代码。定义head的两对

          标签，内嵌
            和
          • 来设置单元格，插入导航栏。

            4 控制样式

            设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href=

            “”>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。

            1 分析效果图

            网页的宣传海报，其超链接指向MIUI 10的宣传视频。

            2 准备图片素材

            按照原网页比例截取，视频从原网页下载。

            3 搭建结构

            在html页面添加结构代码。用盒子控制海报的大小和位置。

            4 控制样式

            设置单元格的宽和高。以及内边距padding，外边距margin。

            1 分析效果图

            MIUI 10的特色之一，白噪音类型介绍轮播图

            2 准备图片素材

            按照原网页比例截取。

            3 搭建结构

            在html页面添加结构代码。用盒子控制海报的大小和位置。

            4 控制样式

            设置单元格的宽和高。以及内边距padding，外边距margin。使得轮播图按要求在网页中显示。用js控制图片的轮播的速度与方式。

            1 分析效果图

            对MIUI 10 的各个特色功能的介绍和分析

            2 搭建结构

            在html页面添加结构代码。定义一对

            标签，来控制盒子。在盒子内加入相应功能的图片及文字介绍。

            3 准备图片素材

            原网页同比例图片通过截取和原网页下载获得。

            4 控制样式

            控制盒子的宽和高，以及内边距padding。同时注意文字与图片的和谐性，不断通过边距及字体样式进行调整。

            1 分析效果图

            对MIUI 10 的运行效率测评视频以及对小米AI在实际生活中应用便利性的介绍。

            2 搭建结构

            在html页面添加结构代码。定义一对

            标签，来控制盒子。在盒子内video标签插入视频以及文字介绍，注意：在加入视频时video标签在IE兼容性存在问题，还要加入control和loop控件。

            3 准备图片素材

            原网页下载相应视频。

            4 控制样式

            控制盒子的宽和高，以及内边距padding。同时注意文字与视频的和谐性，不断通过边距及字体样式进行调整。

            1 分析效果图

            包括原网站网址和个人信息

            2 搭建结构

            在html页面添加结构代码。定义一对

            标签，来控制盒子。

            3 准备图片素材

            无

            4 控制样式

            控制盒子的宽和高，以及内边距padding。以及外边距margin让信息和版权居中

            4.24 MIUI 10 下载页

            一，总体介绍

            二，局部介绍

            1 分析效果图

            网页的头部为选项,以及主页面和子页面的超链接。可以通

            表单来定义，需要在表单外加一层大盒子。

            2 准备图片素材

            根据原网页的观察，其背景图片即黑底，所以不需要图片素材，只需要将盒子的背景颜色定义为黑色，各个

          • 内的字体颜色#666（偏白）。

          • 3 搭建结构

            在html页面添加结构代码。定义head的两对

            标签，内嵌
              和
            • 来设置单元格，插入导航栏。

              4 控制样式

              设置单元格的宽和高。以及内边距padding。文字都设为超链接<a href=

              “”>;在鼠标点到单元格上时，单元格的背景色background-color变红,同时还要清除超链接的格式。

              1 分析效果图

              主体内容包含下载标题栏，以及各个机型的MIUI 10的下载跳转链接（考虑到和谐性，在尾部加了一个视频弥补空缺）。

              2 准备图片素材

              从原网页源代码中获取的图片下载链接下载，视频则由网易云提供。

              3 搭建结构

              在html页面添加结构代码。定义多对

              标签，来控制上中下的盒子。

              4 控制样式

              需要通过盒子嵌套以及盒子内外边距进行调整以达到整体对页面居中的样式。

              1 分析效果图

              主体内容包含信息和版权。

              2 搭建结构

              在html页面添加结构代码。定义一对

              标签，来控制盒子。内嵌
                和
              • 来设置单元格。

                3 准备图片素材

                4 控制样式

                控制盒子的宽和高，以及内边距padding。以及外边距margin让信息和版权居中。

                5调试过程

                用QQ浏览器和IE打开，看网页上的效果是否是自己所需要的，存不存在不兼容的问题，没达到的效果或有兼容性问题再在编译器中进行调试。

                在制作主页面时，鼠标放在超链接上不能出现背景颜色，通过查阅资料，知道在加样式的时候，是在ul上加样式，而不是在a,表示当鼠标放在单元格时，出现单元格的背景颜色。做轮播图的时候一点思路都没有。在网上借鉴了很多，还是没有理解，后来老师讲过之后，又问了一些同学，终于把我想要的轮播图做出来了。

                在制作登录界面时,注册和登录按钮的长度及背景不能出来，这是需要使用display属性block属性值，让按钮本身的样式不显示出来，才能进行样式的添加。且判断输入框是否为空的JS语句不被调用，最后询问老师发现原来是没有加调用语句。

                在制作banner动效时，在插入完所有图片之后，图片都显示在页面上，没有让需要转换的图片隐藏，查看课本后知道要用display属性进行隐藏。最先是看课本上的代码去理解，但是，一直不能成功，后来用老师使用的方法，没出现什么太大的问题。

                在插入视频时，首先使用的时embed标签，后来发现IE兼容不了，而后改用video标签，发现仍存在兼容问题，经过查找资料，发现原来是video的格式控件在IE需要用明确代码写出来。

                写登陆注册页面时，出现多次js语句不调用的情况，后来求助于老师，发现判断条件不足，最后加了判断条件解决了。

                6 收获及体会

                动手写了一个网站之后，除了让自己的技术上得以提升，在敲代码的整体思路和步骤上也有了收获。而且有了很棒的成就感。在之前敲代码的时候，没有先进行整体构思，就直接敲，也没有思路，没有想法。在刚开始做这个网站的时候，我还是有以前的坏习惯，直接写，但是发现效率太慢。

                后来我就看到页面的时候，先看页面，想一下把页面分成几个部分，用几个div盒子做出整个网页的结构；然后在看每个部分的div盒子，需要在里边添上什么内容,是表格还是超链接，还是要插入图片；在加入这些内容的时候我需要用什么方法；整个页面的结构出来之后，去考虑需要添加什么样式；需要加动效的就想一想，需要添加的是什么动效，需要用什么方法。在心里边有个大概需要敲什么的思路再去动手，这样的效率高了很多。在每做完一个步骤之后就查看调试一下，对不理想的地方进行修改。

                做完网站之后，我有一个特别深切的体会。在做一个网站的时候，就像在建一幢大楼，html就像是大楼的地基，要打牢；然后css就像是对整个大楼的样式进行设计；js就像最后对房间进行装修、住人。不仅在构造上，在思想上也像在建大楼，一步一步慢慢来，一点都急不得。在把一个方法写好，整个网页出来之后，会很有成就感。虽然来起来没有很高大上，但是这次课设让我对我的专业有了更深一层的了解。

                在网页制作时遇到的最大的难题就是盒子的摆放和视频插入，还好在老师和同学的帮助下解决了盒子摆放问题，而视频插入则是在查阅大量资料和网页博客解决的，一开始用的是embed标签写的，发现在用IE打开网页是会卡住，后来通过查资料发现IE存在一定的兼容性问题，而后根据博主建议改用了video标签插入，发现还是会存在类似问题，然后参考html+css+javascrapt网页设计从入门到精通》 这本书里的视频插入介绍，发现原来需要调用浏览器相应视频控件方可以兼容。试了下书中的方法，果然成功了。

                ♻️ 资源

                在这里插入图片描述

                大小： 214MB
                ➡️ 资源下载：https://download.csdn.net/download/s1t16/87645809
                注：如当前文章或代码侵犯了您的权益，请私信作者删除！