大数据可视化应用开发项目式教程课件整本书电子教案全套教学教程.pptx

单元1 Web数据可视化概述大数据可视化应用开发项目式教程大数据可视化应用开发项目式教程单元描述1.技术要求：（1）Web数据可视化的认知；（2）Web数据可视化特点与典型应用场景。2.能力要求：（1）在Web前端开发基础上进行深入持续学习的能力；（2）基于教材内容自主、拓展学习能力。3.素养要求：（1）科学思维方式审视专业问题的能力。当前，数字化技术渗透到企业生产链的各个环节时。实时采集生产过程中产生的数据，并对这些收集到的监测数据进行处理、分析，借助丰富的Web数据可视化技术呈现手段，将有利于生产决策者做出更加智慧的决策。1任务名称任务目标安排课时任务1.1 Web 数据可视化认识Web数据可视化1任务1.2 Web 前端开发认识Web前端开发现状、痛点0.5任务1.3 Web数据可视化应用案例Web数据可视化典型应用举例0.5总计26任务分解2知识要点l数据可视化lWeb数据可视化及方法lWeb数据可视化相关技术1.数据可视化一般而言，数据可视化技术是指综合运用计算机图形学和图像处理技术，把数据可视化技术是指综合运用计算机图形学和图像处理技术，把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式通过终端展示出来相对复杂、抽象的数据通过可视的方式以人们更易理解的形式通过终端展示出来，并进行交互处理的理论、方法和技术。，并进行交互处理的理论、方法和技术。数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用，其本质是数据空间到图形空间的映射，是抽象数据的具象表达。在当前大数据分析、显示技术等软硬件支持下，数据可视化特点包括：（1）交互性，用户可以方便地以交互的方式呈现和管理数据。（2）多维性，用户可以看到表示对象或事件的数据的多个属性或变量，而数据可以按其每一维的值，将其分类、排序、组合和显示。（3）可视性，数据可以用图像、曲线、二维图形、三维图形和动画来显示，并可对其模式和相互关系进行可视化分析和呈现。2.Web数据可视化及方法Canvas是HTML5的一种组件，提供了一块画布，可以通过JavaScript代码来进行像素级操作，绘制出各种类型的图表和动画。如下代码所示，使用标签定义了一个400*300大小的矩形框，在这个矩形框内可以绘制相应的图表和动画：（1）Canvas2.Web数据可视化及方法Canvas对不同的浏览器具有良好的兼容性支持，甚至有人尝试在移动浏览器上使用来代替DOM展现元素。其中，DOM是文档对象模型（DocumentObjectModel）的简称，它定义了访问和操作HTML文档的标准方法，如图1-2给出了HTMLDOM树结构。图1-2HTMLDOM树2.Web数据可视化及方法SVG是缩放矢量图像（ScalableVectorGraphics）的简称，主要通过相关的各种标签来实现图形的绘制。相当于是用一种XML（eXtensibleMarkupLanguage）把图形描述出来，它和Canvas的关系就像是图形和图像、几何和美术、Illustrator和Photoshop的关系。SVG的优点包括矢量，缩放后不会失真，能实现复杂的动画，支持事件，支持CSS包含DOM，比较直观，方便调试等。典型产品包括D3.js（https:/d3js.org/）。（2）SVG2.Web数据可视化及方法WebGL（WebGraphicsLibrary）是一项在浏览器中实现3D画面的技术。WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES结合在一起，通过增加OpenGLES的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器中更流畅地展示3D场景和模型，并且能创建复杂的导航和数据视觉化。（3）WebGL3.Web数据可视化相关技术ECharts是百度公司的一款免费开源的数据可视化产品，向用户提供直观、生动、可交互和可个性化定制的数据可视化图表，能够快速构建基于Web的数据可视化任务。ECharts具备上手简单、功能强大等典型优点。（1）ECharts.js（2）Vue.js（3）D3.jsVue是一套用于构建用户界面的渐进式框架，为目前国内最火热的前端框架之一，其简单快捷、渐进式的设计，对于新手特别友好。与其它典型框架不同的是，Vue被设计为可以自底向上逐层应用。D3是目前Web端评价非常高的JavaScript可视化工具库。D3实例丰富，易于实现调试数据，同时能够通过扩展实现任何想到的数据可视化效果。可以通过HTML、SVG和CSS展示数据，与jQuery类似，D3直接对DOM进行操作。任务1.1 认识Web前端开发随着IT企业满足客户对用户体验的追求，Web前端人员的需求量越来越大，且对效率的要求越来越高。“用户体验”典型地体现为系统的交互性、数据呈现方式、可视化效果等具体要求。值得说明的是，前端开发的学习并不仅仅强调知识点的掌握、技术的实现，前端开发的学习并不仅仅强调知识点的掌握、技术的实现，更在于审美能力的积累和提升、细节的把握、以及寻找方案的更优解。更在于审美能力的积累和提升、细节的把握、以及寻找方案的更优解。即使是最简单的页面布局，也存在层出不穷的优秀解决方案。学生在解决实际问题的过程中除了借助便捷的工具，选择高效的Web开发模式，以实现基本的要求为目标，更应该树立工匠精神，力争精益求精，追求极致的页面效果。1.Web前端开发任务1.1 认识Web前端开发当前，企业在前端开发框架的选择上开始倾向采用MVVM（Model-View-ViewModel）模式，该模式可以拆分成：View-ViewModel-Model三部分，如图1-2所示。2.本书做法图1-3MVVM模式任务1.1 认识Web前端开发那么，怎么理解MVVM呢？图1-3中，左侧的View相当于DOM内容，对应用户所看到的页面视图。右侧的Model相当于数据对象，比如一个年龄为23岁，姓名为张三的对象信息可以表示为：而中间的监控者就负责监控两侧的数据，一侧发生变化则会相对应地通知另一侧进行修改。比如：在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是由ViewModel来操作的。name:张三,age:21,任务1.1 认识Web前端开发相对于数据和文字，可视化图表最能直观表达数据的变化规律。例如，用户展示特定几款电动汽车的销售量，那么可以使用折线图或者柱状图；展示销售人员的服务水平，可以使用雷达图来展示多个服务指标的对比深度，诸如此类。数据可视化相关的理论的实践操作，教材将会在第5单元给出。当前互联网开发者和企业开源了很多免费而又优秀成熟的可视化库，包括百度的ECharts、蚂蚁金服的AntV（https:/ Web数据可视化应用案例制造业每天会产生大量的工业设备运行数据，相关工业物联网平台已积累了企业用户的基础信息与设备运行等数据。“工业设备大数据分析与可视化平台”对企业上云设备数据进行挖掘，通过构建和运行相关指数模型，进行指数预测分析，并将数据进行可视化展示，如图1-4所示。1.工业数据可视化图1-4工业设备大数据分析与可视化平台任务1.2 Web数据可视化应用案例“航空数据可视化平台”实现从公开数据源上采集航班数据信息，从城市、机场、航线、航班、执飞机型、准点率等多种维度对航班数据进行可视化展现。如图1-5所示给出了平台首页，首页通过3D动画动态全景展现了全球部分国家的航线图，科技感突出。2.航班数据可视化图1-5航班数据可视化平台首页任务1.2 Web数据可视化应用案例如图1-6、图1-7所示分别展示了航班数据概览、航线查询统计主要页面。图1-6航班数据概览页面图1-7航线查询与统计页面任务1.2 Web数据可视化应用案例如图1-8所示的新能源汽车大数据可视化监测平台，该平台实现了联网车辆的运营管理、故障诊断、统计分析等典型功能。本书后续案例将结合该应用场景进行展开。3.车辆监控图1-8新能源汽车大数据可视化监测平台一、简答题1.简述数据可视化与Web数据可视化的关系。2.简述Web数据可视化在技术类别上的表现形式有哪些？3.简述Web开发中的MVVM模型的工作原理是什么？4.简述行业中使用数据大屏有什么典型效益？二、操作题课后练习3本单元简要介绍了Web数据可视化、Web前端开发模式等相关知识，并给出了其在工业生产、智慧交通等不同领域的典型应用案例。教材假定读者已经初步具备了HTML+CSS+JavaScript等Web前端开发的基础知识，如果读者尚存在欠缺，请查询相关学习资料，进行简要补充即可。本章小节4PPT模板下载： 大数据可视化应用开发项目式教程大数据可视化应用开发项目式教程单元2 新能源汽车监测可视化平台大数据可视化应用开发项目式教程大数据可视化应用开发项目式教程单元描述1.技术要求：（1）结合业务进行数据模型的设计；（2）利用MySQL、JSON存储业务数据。2.能力要求：（1）熟练掌握进行项目需求分析的一般方法；（2）认识项目需求分析在项目开发中的重要地位。3.素养要求：（1）具有良好的与人沟通的能力和良好的团队合作精神；（2）具有一定的科学思维方式和分析问题、解决问题的能力。新能源汽车大数据可视化监测平台是企业用于对相关车辆远程实时监测的信息化系统，主要包括实时监测、研发维修、车辆销售和车队管理等方面的功能。开发一款适合用户需求的产品，需要深入了解用户需求，本单元从功能、技术上进行简要分析，具体包括业务数据含义，数据存储，数据调用等。如图2-2所示，给出了平台业务流程示意图。车辆终端1车辆终端2车辆终端n数据接收关系型NoSQL数据源数据源数据存储、分析与展示数据存储、分析与展示关系型表示层业务逻辑层数据访问接口数据传输数据传输1图图2-2 平台业务流程示意图平台业务流程示意图任务名称任务目标安排课时任务2.1 理解业务模式项目需求分析2任务2.2 理解业务数据认识车辆数据2任务2.3 车辆数据模型掌握数据存储的一般方法2总计6任务分解2知识要点l电动汽车基础l数据与存储l前端框架数据驱动模式1.电动汽车基础新能源汽车是指采用非常规的车用燃料作为动力来源（或使用常规的车用燃料但采用新型车载动力装置），综合车辆的动力控制和驱动方面的先进技术，形成的技术原理先进，具有新技术、新结构的汽车。电动汽车与传统汽车相比，大幅精简了汽车的结构和零件数量，特别是储能和动力系统，用电池、电机、电控替代了传统的发动机。纯电动汽车的基本结构如图2-3所示。（1）新能源汽车动力电池驱动电机驱动轴车轮整车数据逆变器车轮图图2-3 纯电动汽车基本结构纯电动汽车基本结构1.电动汽车基础CAN（ControllerAreaNetwork）即控制器区域网络，最初由博世公司为汽车监控、控制系统设计。其中，两路CAN总线结构如图2-4所示，车辆电机控制器、电池管理系统等挂接在高速的CAN1子网络上，数字化仪表、空调等挂接在低速的CAN2子网络上。（2）CAN总线电机控制器1整车控制器低速网段高速网段储能管理系统状态监视器照明智能仪表总线接口CAN1CAN2座椅图图2-4 车辆两路车辆两路CAN总线结构示意图总线结构示意图2.数据与存储MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发，目前属于Oracle旗下产品。MySQL是最流行的关系型数据库管理系统之一，在 Web应用方面，MySQL是最好的 RDBMS（RelationalDatabaseManagementSystem，关系数据库管理系统）应用软件之一。（1）MySQL2.数据与存储JSON（JavaScriptObjectNotation)是一种轻量级的数据交换格式。它采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。如下给出车速（vehicleSpeed.json）的JSON格式表示：（2）JSONtime:13:05,13:10,13:15,13:20,13:25,13:25,13:30,speed:10,20,40,20,17,32,453.数据驱动模式从前端Web框架的视角看（以Vue.js为例），所谓的数据驱动就是当数据本身所谓的数据驱动就是当数据本身发生改变的时候，用户界面相应发生变化，开发者不需要手动的去修改发生改变的时候，用户界面相应发生变化，开发者不需要手动的去修改DOM。简单地说，Vue.js封装了数据和DOM对象操作的映射，只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。其优点是不需要在代码中频繁地操作DOM。在实际项目中，有很大部分代码都是在数据修改以后，手动操作重新渲染页面元素，当页面越来越复杂的时候，页面代码组织会越来难以维护。3.数据驱动模式Vue.js的数据驱动是通过MVVM这种框架来实现的。框架主要包含3个部分：Model、View和View-model。Model指数据部分，对应到前端就是JavaScript对象；View指视图部分，对应前端就是DOM；View-model是连接视图与数据的中间件。如图2-5所示，数据（Model）和视图（View）通过ViewModel来实现双方的通讯。当数据变化的时候，ViewModel能够监听到这种变化，并及时地通知View做出修改。同样的，当页面有事件触发时，ViewModel也能够监听到事件，并通知Model进行响应。图图2-5 MVM框架示意图框架示意图。任务2.1 理解业务模式随着新能源车辆的逐步推广，新能源车辆的远程监测、安全预警成为生产厂家和用户的刚性需求。新能源汽车可视化监测平台是一个基于车联网、云计算、大数据等信息处理技术的远程实时监测平台。该系统收集车辆整车、电池、驱动电机、位置、故障与异常等数据，对数据进行分析后，通过可视化方式予以呈现，为新能源汽车及电池安全全程保驾护航，为车辆生产、车辆运营、车辆售后等提供增值服务。1.任务描述任务2.1 理解业务模式平台的开发和使用涉及不同的新能源汽车行业主体，从整车厂到运营车队，再到监管部门，各板块各自诉求不尽相同。数据驱动的软件开发最终服务于各主体诉求。虽然数据呈现方式多种多样，并不会脱离用户诉求这一最终目的。其一，结合诉求给出确定平台功能；其二，基于功能确定技术架构。见表2-1给出了新能源汽车产业链上的不同主体及其利益诉求。2.任务分析任务2.1 理解业务模式2.任务分析序号相关主体利益诉求数据子类1研发人员参数标定电压、电流、SOC2售后人员故障诊断、故障预测车辆分布、故障码3管理人员生产决策、销售决策销售量、车辆分布4车队人员能耗管理、故障管理里程、故障码5监管人员位置服务、驾驶行为经纬度、车速表表2-1新能源汽车产业链上的各主体利益诉求及关注的相应数据类型新能源汽车产业链上的各主体利益诉求及关注的相应数据类型任务2.1 理解业务模式（1）抽象平台功能）抽象平台功能如图2-7所示，给出了新能源汽车大数据可视化监测平台的功能框图，该平台的核心功能包括以下3个模块：研发与维护、车辆销售和车队管理。3.任务实施新能源汽车数据可视化平台车辆销售车队管理实时监测统计分析车辆管理研发与维护车辆分布统计分析人员管理驾驶行为统计分析人员管理图图2-7新能源汽车实时监测功能框图新能源汽车实时监测功能框图任务2.1 理解业务模式（2）确定平台技术架构）确定平台技术架构新能源汽车大数据可视化监测平台主要包含数据采集、数据传输、数据存储、数据分析和可视化呈现等主要环节，平台架构图如图2-8所示。左侧给出了两个车载终端的构成示意图，每辆汽车对应一个终端。3.任务实施图图2-8 平台架构平台架构云端数据Web服务器PC端可视化监控大屏CAN总线APP端接入服务器集群传感器传感器CAN总线车载终端车载终端1车载终端车载终端2云端云端GPS核心板核心板GPS核心板核心板4G任务2.2 理解业务数据围绕上述业务模型，深入理解新能源汽车相关数据含义，确立相应的数据存储模型。1.任务描述任务2.2 理解业务数据大数据驱动的项目中以业务数据的高效流转为主线，遵循“数据收集数据传输数据存储数据查询/读取数据呈现”这一完整过程，如图2-9所示。结合功能模块，表2-2展示了业务相关的3类车辆数据类型。2.任务分析图图2-9 数据数据驱动业务驱动业务数据数据处处理流程理流程任务2.2 理解业务数据2.任务分析表表2-2车辆车辆相关数据相关数据类类型型序号数据类型数据子类1车辆数据整车数据（表2-4）、电池（表2-5）、位置（表2-6）2销售数据车辆分布表、车辆销售表等3车队数据驾驶员评分表等大数据驱动的项目中以业务数据的高效流转为主线，遵循“数据收集数据传输数据存储数据查询/读取数据呈现”这一完整过程，如图2-9所示。结合功能模块，表2-2展示了业务相关的3类车辆数据类型。任务2.2 理解业务数据（1）确定车辆）确定车辆 信息信息首先给出车辆信息表，见表2-3，该表包含唯一识别车辆的车架号和方便查询记忆的车牌号两个字段。3.任务实施表表2-3车辆车辆信息表信息表字段名含义取值szVIN车辆ID，可以用车架号17位唯一plateNumber车牌号任务2.2 理解业务数据（2）确定）确定车辆车辆参数信息参数信息表2-4至表2-6展示了与车辆运行状态密切相关的数据存储模式。3.任务实施表表2-4 整整车车信息表信息表字段名含义取值szVIN17位唯一，车架号LA9HIGECXH1HGC002time数据采集时间2018-1-30 11:06:17bChargeStatus充电状态（未）充电、异常bRunningMode车辆类型纯电、混动、燃油任务2.2 理解业务数据（2）确定）确定车辆车辆参数信息参数信息3.任务实施表表2-4 整整车车信息表信息表字段名含义取值wVehicleSpeed车辆速度取值02200dAccumulatedMileage累计里程范围0999999wTotalVoltage总电压范围01000wTotalCurrent总电流范围-10001000AbSOCSOC百分比bAccPedal加速踏板行程百分比bBrkPedal制动踏板状态百分比任务2.2 理解业务数据（2）确定）确定车辆车辆参数信息参数信息3.任务实施表表2-5 电电池信息表池信息表字段名字段名含含义义取取值值szVIN17位唯一，车架号LA9HIGECXH1HGC002time数据采集时间2018-1-30 11:06:17字段名字段名含含义义取取值值szVIN17位唯一，车架号LA9HIGECXH1HGC002realtime时间2018-1-30 11:06:17latitudes经度信息31.138534longitudes纬度信息120.6918719表表2-6 车辆车辆位置信息表位置信息表任务2.3 车辆数据模型为了实现对特定车辆运行工况的实时监测，必须建立车辆相关的数据模型。要求以整车数据为例建立相应的数据存储模型。1.任务描述任务2.3 车辆数据模型基于业务需求建立车辆数据模型，实际项目中常见的模式是基于开源的MySQL数据库，数据读取并转换为JSON文件格式，以下以两种典型的数据模型为例进行阐述。2.任务分析任务2.3 车辆数据模型数据模型示例1：MySQL，见表2-7和表2-8。3.任务实施表表2-7整整车车数据数据IdszVINtimewVehicle_SpeeddAccumulatedMileagewTotal_VoltagewTotal_Current1LA9HIGECXH1HGC0022018-1-30 11:06:17232.4999.9292.0-331.82LA9HIGECXH1HGC0022018-1-30 11:06:17232.49999292.0-331.83LA9HIGECXH1HGC0022018-1-30 11:06:17232.4999.9292.0-331.84任务2.3 车辆数据模型数据模型示例1：MySQL，见表2-7和表2-8。3.任务实施表表2-8 位置数据位置数据IdszVINrealtimelatitudeslongitudesIdszVIN1LA9HIGECXH1HGC0022018-1-30 11:06:1731.138534120.69187191LA9HIGECXH1HGC0022LA9HIGECXH1HGC0022018-1-30 11:06:1731.138534120.69187192LA9HIGECXH1HGC0023LA9HIGECXH1HGC0022018-1-30 11:06:1731.138534120.69187193LA9HIGECXH1HGC00244一、简答题1.简述什么是前端框架数据驱动模式?2.Web前端开发在整个系统中的地位和作用是什么?3.比较MySQL和JSON不同的数据存储类型，说明其适用场景。二、操作题1.给出表2-9数据的JSON数据类型表示。课后练习3姓名姓名年年龄维修修车辆客客户评价价张伟27459.2李李详31568.5李李飞28789.9王王刚36698.7本单元主要介绍了项目需求分析，从功能分析、技术架构角度宏观对项目进行了介绍。特别地，对项目业务数据的含义、存储方式等进行阐述，加深读者对业务数据的理解，是后面各单元内容的数据基础。本章小节4PPT模板下载： 大数据可视化应用开发项目式教程大数据可视化应用开发项目式教程单元3 Web基础大数据可视化应用开发项目式教程大数据可视化应用开发项目式教程单元描述1.技术要求：（1）利用DIV+CSS搭建网页框架；（2）利用CSS美化网页风格；（3）利用JavaScript呈现表格、图表等内容。2.能力要求：（1）熟练掌握HTML+CSS进行页面的布局；（2）熟练掌握CSS对页面的美化，使页面具有良好的兼容性；（3）熟悉JavaScript的基本使用方法，如在网页中调用JavaScript脚本等。3.素养要求：（1）具有良好的与人沟通的能力和良好的团队合作精神；（2）具备较强的网页设计创意思维、艺术设计素质和创新思想；（3）具有一定的科学思维方式和分析问题、解决问题的能力。新能源汽车大数据分析系统是企业用于对新能源汽车进行监控管理的系统，主要包括研发与维修、车辆销售和车队管理三大功能模块。本项目要实现“研发与维修”模块中单车监控页面的设计。该页面用于监测车辆的实时运行数据，将车辆数据、车辆速度、总电流等数据用表格或图表的方式在页面上呈现，并能实现数据的实时更新，页面的最终设计效果图如图3-2所示。1任务名称任务目标安排课时任务3.1搭建开发环境掌握VS Code的搭建和基本的使用方法1任务3.2 创建车辆实时监控页面利用HTML+CSS搭建网页3任务3.3 呈现车辆运行状态用表格、图表呈现数据2总计6任务分解2知识要点l前端开发常用工具lHTML+CSS基础l网页中的JavaScript1.前端开发常用工具VSCode是基于Electron开发、Typescript编写、底层Node.js打造的一个编辑器，不是IDE，被称为“披着IDE外衣的编辑器”，是微软提供的一款轻量级但功能十分强大的编辑器，内置了对JavaScript、TypeScript和Node.js语言的支持，并且为其他语言如C+、C#、Python、PHP等提供了丰富的扩展库。本项目的开发采用的就是这个开发工具。（1）VS Code图3-9 VS Code官网首页1.前端开发常用工具WebStorm是Jetbrains公司旗下一款JavaScript开发工具。目前已经被广大中国JS开发者誉为Web前端开发神器、最强大的HTML5编辑器、最智能的JavaScriptIDE等。与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。（2）WebStorm图3-3 WebStorm官方下载页面1.前端开发常用工具SublimeText是一个代码编辑器，也是文本编辑器。它具有漂亮的用户界面和强大的功能，例如，代码缩略图、Python的插件、代码段等。还可自定义键绑定、菜单和工具栏。其的主要功能包括拼写检查、书签、完整的 PythonAPI、Goto功能、即时项目切换、多选择、多窗口等等。SublimeText是一个跨平台的编辑器，同时支持Windows、Linux、MacOSX等操作系统。（3）Sublime Text图3-4 Sublime Text官网2.HTML+CSS基础HTML是指超文本标记语言，英文为HyperTextMarkupLanguage。如同名字所表示的含义，HTML并不是一种编程语言，而是一种标记语言，它在页面中的作用是搭建出页面的树状结构，在该结构上的每一个节点就是一个标记。HTML元素的基本组成包括：开始标签（Openingtag）、结束标签（Closingtag）和内容（Content），内容可以是空的。这三者结合在一起组成了一个完整的标签，或被称为元素（Element）（1）HTML基础图3-5 HTML元素基本组成由于元素是网页中最常用的一个元素，CSS能够轻松的对其进行定位，因此目前DIV+CSS技术是最常用的网页布局技术，在实时监测页面中就采用DIV+CSS实现。可以把元素看成一个矩形区域的容器，在这个容器内可以存放其它HTML元素，也包括元素，即元素是可以嵌套的。借助于CSS样式，能够把元素放置在网页的任何位置，实现网页的精致排版。（2）页面布局2.HTML+CSS基础图3-6 用元素实现多列布局CSS指层叠样式表，英文为CascadingStyleSheets，主要是为了解决内容与表现分离的问题，从而提高工作效率。CSS格式设置规则由两部分组成：选择器和声明。声明由属性（如text-decoration）和值（如none）两部分组成。根据运用样式表的范围是局限在当前网页文件内部还是其他网页文件，可以分为内联样式、内部样式表和外部样式表。（3）CSS基础2.HTML+CSS基础图3-7 CSS格式CSS中的选择器通常是需要改变样式的HTML元素，选择器可以分为id选择器、类选择器、属性选择器等。灵活的运用选择器可以精简样式表的代码。元素选择器CSS的元素选择器是最常见的选择器，又称之为类型选择器，它匹配文档语言元素类型的名称，如p、a、h1，甚至HTML本身都是。（4）CSS选择器2.HTML+CSS基础body min-width:1200px;a text-decoration:none;id选择器id选择器可以为有id属性的 HTML元素指定特定的样式，CSS中id选择器以“#”来定义。注意：id属性的值是唯一的，在一个HTML文档中只能出现一次。id属性不要以数字开头，数字开头的ID在 Mozilla/Firefox浏览器中不起作用。（4）CSS选择器2.HTML+CSS基础#redcolor:red;段落1 段落2 类选择器与多类选择器类选择器也可以叫做class选择器，用于描述一组元素的样式，class选择器有别于id选择器，可以在多个元素中使用。在CSS中，类选择器以一个点“.”号开始，点号后是类选择器的名称；在HTML中则是通过class属性调用类选择器名来表示该元素应用了此样式。在 HTML中，一个class值中可能包含一个词列表（即多个样式），各个词之间用空格分隔。通过词列表可以将不同的CSS样式效果同时运用到一个元素中，而且可以重复运用，减少了重复代码的编写，提高了编写代码的效率。（4）CSS选择器2.HTML+CSS基础.flfloat:left;查询后代选择器如下的.datav-item.datav-title这种选择器的写法称为后代选择器或包含选择器，用于选取某元素的后代元素。通过定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。（4）CSS选择器2.HTML+CSS基础.datav-item.datav-title border-bottom:1px solid#687997;padding:5px 20px;锚伪类在支持CSS的浏览器中，链接包括活动状态、已被访问状态、未被访问状态和鼠标悬停状态四种状态，这四种状态都可以用不同的方式显示即锚伪类。注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。在CSS定义中，a:active必须被置于a:hover之后，才是有效的。伪类名称对大小写不敏感。当用户只写一个a元素的样式时，超链接的4种状态样式就统一了。（4）CSS选择器2.HTML+CSS基础a:link color:#FF0000/*未访问的链接*/a:visited color:#00FF00/*已访问的链接*/a:hover color:#FF00FF/*鼠标移动到链接上*/a:active color:#0000FF/*选定的链接*/选择器分组在CSS中有时会遇到如下情况，有多个元素需要设同一个样式效果，如在本页面的CSS代码中要求将body、div、span、a、img、input、p这些元素的外边距和内边距均为0，可以如左的写法。这样写后会发现，这些样式除了选择器不同，其花括号中的内容都是相同的，如果采用选择器分组的方法写就如右。显然这种将多个选择器放在规则左边，然后用逗号分隔，并在右边则定义样式方法更为简便。（4）CSS选择器2.HTML+CSS基础body margin:0;padding:0;div margin:0;padding:0;body,div,span,a,img,input,p margin:0;padding:0;JavaScript通常内嵌在HTML页面中运行，与页面同时被浏览器加载和运行，在HTML页面中使用标签引入JavaScript脚本。但当JavaScript的代码太多时，不但增加了网页文件的容量也增加了阅读网页代码的难度。这里可以将代码写在以.js命名的脚本文件中，然后再将其引入网页文件中。（1）HTML页面引入JavaScript3.网页中的JavaScript函数是JavaScript中最常用功能之一，它可以避免相同功能代码的重复编写，将程序中的代码模块化，提高程序的可读性，减少开发者的工作量，便于后期的维护。函数用于封装一段完成特定功能的代码。可重复使用的且拥有名称。JavaScript有3种声明函数的方法，其中function命令和函数表达式这两种方法最为常用。（2）JavaScript函数3.网页中的JavaScriptfunction print(s)console.log(s);window.onload=function()showData(jsonArr);文档树（DocumentObjectModel）是HTML页面的层级结构，它由元素、属性和文本组成，它们都是一个节点（Node），就像公司的组织结构图一样。（3）DOM树3.网页中的JavaScript图图3-8 DOM树树任务3.1 搭建开发环境工欲善其事，必先利其器。本小节要完成的任务是为新能源汽车大数据分析系统中Web页面的制作搭建开发环境。1.任务描述在本项目的开发中，采用VSCode工具进行网页的搭建。任务实施将先从VSCode的下载与安装，认识VSCode界面以及运用VSCode创建网页文件来熟悉该开发工具。2.任务分析任务3.1 搭建开发环境（1）VS Code下载与安装下载与安装code.visualstudio（官网网址），选择合适的版本进行下载。由于本项目是在Windows环境下开发且操作系统为64位，此处选用Windows下的64位System版。3.任务实施任务3.1 搭建开发环境图3-9 VS Code官网首页（2）VS Code界面介绍界面介绍VSCode安装好后，运行出现如图3-11所示的工具界面，其左侧是用于展示要编辑的所有文件和文件夹的文件管理器，包括资源管理器、搜索、GIT、调试和扩展五大栏目，右侧是打开文件的编辑区域，最多可同时打开三个编辑区域到侧边。底栏是GitBranch、error&warning、编码格式等。3.任务实施图图3-11 VS Code界面界面任务3.1 搭建开发环境任务3.2 创建单车监控页面制作车辆实时监控页面，要求界面简洁、重在突出数据的呈现，在色彩上以深蓝色为主色调，配合浅蓝、白色以及不同明暗度的粉色、绿色、黄色等亮丽的色彩给人一种未来科技感。页面上除了最基本的导航和Logo外，还应包括查询区和数据呈现区。1.任务描述图3-2 新能源汽车单车监控页面采用目前主流的HTML+CSS技术实现新能源汽车实时监测页面的制作，利用HTML实现页面的整体布局和页面的内容，利用CSS美化页面使其呈现最终设计稿效果。实现过程将分为3步：第1步，利用HTML搭建页面框架；第2步，在搭建的框架中填充页面的内容；第3步，利用CSS样式化页面，使其呈现设计稿效果。2.任务分析任务3.2 创建单车监控页面（1）实现页面布局）实现页面布局在前端开发中页面布局总是最开始的工作，就像盖楼时，先搭框架，然后再填砖，前端也是一样的，先要做好页面的布局工作。在本系统的实时监测页面中采用的就是单列布局，这是最简洁的一种，整个页面给人一种清爽干净的感觉。3.任务实施任务3.2 创建单车监控页面图3-17 实时监测页面的布局结构图（2）显示内容）显示内容当完成第一步后发现页面呈现效果与预期相差很大，那是因为当前只是对整个实时监测页面的结构做了总体的规划，缺少具体的内容，下一步就要开始充实页面的内容了。3.任务实施任务3.2 创建单车监控页面图3-19 车辆实时监测页面效果（3）样式化页面）样式化页面实时监测页面的内容已经完成了，但在浏览器中查看页面时会发现页面目前只是信息的罗列，要使页面呈现预先设计的效果就需要CSS的美化。3.任务实施任务3.2 创建单车监控页面任务3.3 呈现车辆运行状态将单车监控的数据用表格或图表的方式呈现到实时监测页面中，如图3-21所示是用表格的形式呈现数据，如图3-22所示是用图表的方式呈现数据。1.任务描述图3-21 用表格呈现车辆数据图3-22 JS原生代码实现的车辆速度柱状图用表格呈现数据，将车辆数据按照HTML中表格的格式进行编辑排版，奇数行为字段，偶数行为字段对应的数据。用图表呈现数据，这里用JS的原生代码实现一个条状图表，由于JS不是本项目的重点，只要掌握如何通过调用JS呈现图表即可。2.任务分析任务3.3 呈现车辆运行状态（1）车辆数据在表格中的呈现 利用表格呈现 利用div元素呈现（2）用条形图呈现车速3.任务实施任务3.3 呈现车辆运行状态一、选择题1.如果要在不同的网页中应用相同的样式表定义，应该（）A.直接在HTML的元素中定义样式表 B.在HTML的标记中定义样式表 C.通过一个外部样式表文件定义样式表D.以上都可以 2.a:hover表示超链接在（）时的状态。A.鼠标按下B.鼠标未移入 C.鼠标放上去 D.访问过后 课后练习33.若要在页面中创建一个图形超链接，要显示的图形为 myhome.jpg,所链接的地址为http:/,以下用法中，正确的是（）。A.myhome.jpgB.C.D.4.在HTML页面中，有如下样式规则，它的选择器为（）。Pcolor:red;font-size:30px;font-family:”宋体“;A.PB.Color C.Font-sizeD.Font-family课后练习3二、填空题1.网页主要由 、head和body组成。2.书写类选择器样式时前面加 符号。3.JavaScript中声明一个变量所用的关键字是 。4.程序段：vara=2,b=5;document.write(!ab&a=3);输出结果为 。三、简答题1.什么是HTML？什么是CS