《終端數(shù)據(jù)可視化》課件-3 Web基礎(chǔ)

單元3Web基礎(chǔ)大數(shù)據(jù)可視化應(yīng)用開發(fā)項目式教程單元描述1.技術(shù)要求：（1）利用DIV+CSS搭建網(wǎng)頁框架；（2）利用CSS美化網(wǎng)頁風(fēng)格；（3）利用JavaScript呈現(xiàn)表格、圖表等內(nèi)容。2.能力要求：（1）熟練掌握HTML+CSS進行頁面的布局；（2）熟練掌握CSS對頁面的美化，使頁面具有良好的兼容性；（3）熟悉JavaScript的基本使用方法，如在網(wǎng)頁中調(diào)用JavaScript腳本等。3.素養(yǎng)要求：（1）具有良好的與人溝通的能力和良好的團隊合作精神；（2）具備較強的網(wǎng)頁設(shè)計創(chuàng)意思維、藝術(shù)設(shè)計素質(zhì)和創(chuàng)新思想；（3）具有一定的科學(xué)思維方式和分析問題、解決問題的能力。新能源汽車大數(shù)據(jù)分析系統(tǒng)是企業(yè)用于對新能源汽車進行監(jiān)控管理的系統(tǒng)，主要包括研發(fā)與維修、車輛銷售和車隊管理三大功能模塊。本項目要實現(xiàn)“研發(fā)與維修”模塊中單車監(jiān)控頁面的設(shè)計。該頁面用于監(jiān)測車輛的實時運行數(shù)據(jù)，將車輛數(shù)據(jù)、車輛速度、總電流等數(shù)據(jù)用表格或圖表的方式在頁面上呈現(xiàn)，并能實現(xiàn)數(shù)據(jù)的實時更新，頁面的最終設(shè)計效果圖如圖3-2所示。1任務(wù)名稱任務(wù)目標安排課時任務(wù)3.1搭建開發(fā)環(huán)境掌握VSCode的搭建和基本的使用方法1任務(wù)3.2創(chuàng)建車輛實時監(jiān)控頁面利用HTML+CSS搭建網(wǎng)頁3任務(wù)3.3呈現(xiàn)車輛運行狀態(tài)用表格、圖表呈現(xiàn)數(shù)據(jù)2總計6任務(wù)分解2知識要點前端開發(fā)常用工具HTML+CSS基礎(chǔ)網(wǎng)頁中的JavaScript1.前端開發(fā)常用工具VSCode是基于Electron開發(fā)、Typescript編寫、底層Node.js打造的一個編輯器，不是IDE，被稱為“披著IDE外衣的編輯器”，是微軟提供的一款輕量級但功能十分強大的編輯器，內(nèi)置了對JavaScript、TypeScript和Node.js語言的支持，并且為其他語言如C++、C#、Python、PHP等提供了豐富的擴展庫。本項目的開發(fā)采用的就是這個開發(fā)工具。（1）VSCode圖3-9VSCode官網(wǎng)首頁1.前端開發(fā)常用工具WebStorm是Jetbrains公司旗下一款JavaScript開發(fā)工具。目前已經(jīng)被廣大中國JS開發(fā)者譽為Web前端開發(fā)神器、最強大的HTML5編輯器、最智能的JavaScriptIDE等。與IntelliJIDEA同源，繼承了IntelliJIDEA強大的JS部分的功能。（2）WebStorm圖3-3WebStorm官方下載頁面1.前端開發(fā)常用工具SublimeText是一個代碼編輯器，也是文本編輯器。它具有漂亮的用戶界面和強大的功能，例如，代碼縮略圖、Python的插件、代碼段等。還可自定義鍵綁定、菜單和工具欄。其的主要功能包括拼寫檢查、書簽、完整的PythonAPI、Goto功能、即時項目切換、多選擇、多窗口等等。SublimeText是一個跨平臺的編輯器，同時支持Windows、Linux、MacOSX等操作系統(tǒng)。（3）SublimeText圖3-4SublimeText官網(wǎng)2.HTML+CSS基礎(chǔ)HTML是指超文本標記語言，英文為HyperTextMarkupLanguage。如同名字所表示的含義，HTML并不是一種編程語言，而是一種標記語言，它在頁面中的作用是搭建出頁面的樹狀結(jié)構(gòu)，在該結(jié)構(gòu)上的每一個節(jié)點就是一個標記。HTML元素的基本組成包括：開始標簽（Openingtag）、結(jié)束標簽（Closingtag）和內(nèi)容（Content），內(nèi)容可以是空的。這三者結(jié)合在一起組成了一個完整的標簽，或被稱為元素（Element）（1）HTML基礎(chǔ)圖3-5HTML元素基本組成由于<div>元素是網(wǎng)頁中最常用的一個元素，CSS能夠輕松的對其進行定位，因此目前DIV+CSS技術(shù)是最常用的網(wǎng)頁布局技術(shù)，在實時監(jiān)測頁面中就采用DIV+CSS實現(xiàn)。可以把<div>元素看成一個矩形區(qū)域的容器，在這個容器內(nèi)可以存放其它HTML元素，也包括<div>元素，即<div>元素是可以嵌套的。借助于CSS樣式，能夠把<div>元素放置在網(wǎng)頁的任何位置，實現(xiàn)網(wǎng)頁的精致排版。（2）頁面布局2.HTML+CSS基礎(chǔ)圖3-6用<div>元素實現(xiàn)多列布局CSS指層疊樣式表，英文為CascadingStyleSheets，主要是為了解決內(nèi)容與表現(xiàn)分離的問題，從而提高工作效率。CSS格式設(shè)置規(guī)則由兩部分組成：選擇器和聲明。聲明由屬性（如text-decoration）和值（如none）兩部分組成。根據(jù)運用樣式表的范圍是局限在當(dāng)前網(wǎng)頁文件內(nèi)部還是其他網(wǎng)頁文件，可以分為內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表。（3）CSS基礎(chǔ)2.HTML+CSS基礎(chǔ)圖3-7CSS格式CSS中的選擇器通常是需要改變樣式的HTML元素，選擇器可以分為id選擇器、類選擇器、屬性選擇器等。靈活的運用選擇器可以精簡樣式表的代碼。元素選擇器CSS的元素選擇器是最常見的選擇器，又稱之為類型選擇器，它匹配文檔語言元素類型的名稱，如p、a、h1，甚至HTML本身都是。（4）CSS選擇器2.HTML+CSS基礎(chǔ)body{min-width:1200px;}a{text-decoration:none;}id選擇器id選擇器可以為有id屬性的HTML元素指定特定的樣式，CSS中id選擇器以“#”來定義。注意：①id屬性的值是唯一的，在一個HTML文檔中只能出現(xiàn)一次。②id屬性不要以數(shù)字開頭，數(shù)字開頭的ID在Mozilla/Firefox瀏覽器中不起作用。（4）CSS選擇器2.HTML+CSS基礎(chǔ)#red{color:red;}<divid=”red”>

<p>段落1</p>

<p>段落2</p>

</div>類選擇器與多類選擇器類選擇器也可以叫做class選擇器，用于描述一組元素的樣式，class選擇器有別于id選擇器，可以在多個元素中使用。在CSS中，類選擇器以一個點“.”號開始，點號后是類選擇器的名稱；在HTML中則是通過class屬性調(diào)用類選擇器名來表示該元素應(yīng)用了此樣式。在HTML中，一個class值中可能包含一個詞列表（即多個樣式），各個詞之間用空格分隔。通過詞列表可以將不同的CSS樣式效果同時運用到一個元素中，而且可以重復(fù)運用，減少了重復(fù)代碼的編寫，提高了編寫代碼的效率。（4）CSS選擇器2.HTML+CSS基礎(chǔ).fl{float:left;}<divclass="flsearch-btn">

查詢</div>后代選擇器如下的.datav-item.datav-title這種選擇器的寫法稱為后代選擇器或包含選擇器，用于選取某元素的后代元素。通過定義后代選擇器來創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。（4）CSS選擇器2.HTML+CSS基礎(chǔ).datav-item.datav-title{border-bottom:1pxsolid#687997;padding:5px20px;}錨偽類在支持CSS的瀏覽器中，鏈接包括活動狀態(tài)、已被訪問狀態(tài)、未被訪問狀態(tài)和鼠標懸停狀態(tài)四種狀態(tài)，這四種狀態(tài)都可以用不同的方式顯示即錨偽類。注意：①在CSS定義中，a:hover必須被置于a:link和a:visited之后，才是有效的。②在CSS定義中，a:active必須被置于a:hover之后，才是有效的。③偽類名稱對大小寫不敏感。④當(dāng)用戶只寫一個a元素的樣式時，超鏈接的4種狀態(tài)樣式就統(tǒng)一了。（4）CSS選擇器2.HTML+CSS基礎(chǔ)a:link{color:#FF0000} /*未訪問的鏈接*/a:visited{color:#00FF00} /*已訪問的鏈接*/a:hover{color:#FF00FF} /*鼠標移動到鏈接上*/a:active{color:#0000FF} /*選定的鏈接*/選擇器分組在CSS中有時會遇到如下情況，有多個元素需要設(shè)同一個樣式效果，如在本頁面的CSS代碼中要求將body、div、span、a、img、input、p這些元素的外邊距和內(nèi)邊距均為0，可以如左的寫法。這樣寫后會發(fā)現(xiàn)，這些樣式除了選擇器不同，其花括號中的內(nèi)容都是相同的，如果采用選擇器分組的方法寫就如右。顯然這種將多個選擇器放在規(guī)則左邊，然后用逗號分隔，并在右邊則定義樣式方法更為簡便。（4）CSS選擇器2.HTML+CSS基礎(chǔ)body{margin:0;padding:0;}div{margin:0;padding:0;}…body,div,span,a,img,input,p{margin:0;padding:0;}JavaScript通常內(nèi)嵌在HTML頁面中運行，與頁面同時被瀏覽器加載和運行，在HTML頁面中使用<script>……</script>標簽引入JavaScript腳本。但當(dāng)JavaScript的代碼太多時，不但增加了網(wǎng)頁文件的容量也增加了閱讀網(wǎng)頁代碼的難度。這里可以將代碼寫在以.js命名的腳本文件中，然后再將其引入網(wǎng)頁文件中。（1）HTML頁面引入JavaScript3.網(wǎng)頁中的JavaScript<scripttype="text/javascript"src="JS腳本文件路徑"></script>函數(shù)是JavaScript中最常用功能之一，它可以避免相同功能代碼的重復(fù)編寫，將程序中的代碼模塊化，提高程序的可讀性，減少開發(fā)者的工作量，便于后期的維護。函數(shù)用于封裝一段完成特定功能的代碼?？芍貜?fù)使用的且擁有名稱。JavaScript有3種聲明函數(shù)的方法，其中function命令和函數(shù)表達式這兩種方法最為常用。（2）JavaScript函數(shù)3.網(wǎng)頁中的JavaScriptfunctionprint(s){console.log(s);}window.onload=function(){showData(jsonArr);};文檔樹（DocumentObjectModel）是HTML頁面的層級結(jié)構(gòu)，它由元素、屬性和文本組成，它們都是一個節(jié)點（Node），就像公司的組織結(jié)構(gòu)圖一樣。（3）DOM樹3.網(wǎng)頁中的JavaScript圖3-8DOM樹任務(wù)3.1搭建開發(fā)環(huán)境工欲善其事，必先利其器。本小節(jié)要完成的任務(wù)是為新能源汽車大數(shù)據(jù)分析系統(tǒng)中Web頁面的制作搭建開發(fā)環(huán)境。1.任務(wù)描述在本項目的開發(fā)中，采用VSCode工具進行網(wǎng)頁的搭建。任務(wù)實施將先從VSCode的下載與安裝，認識VSCode界面以及運用VSCode創(chuàng)建網(wǎng)頁文件來熟悉該開發(fā)工具。2.任務(wù)分析任務(wù)3.1搭建開發(fā)環(huán)境（1）VSCode下載與安裝code.visualstudio（官網(wǎng)網(wǎng)址），選擇合適的版本進行下載。由于本項目是在Windows環(huán)境下開發(fā)且操作系統(tǒng)為64位，此處選用Windows下的64位System版。3.任務(wù)實施任務(wù)3.1搭建開發(fā)環(huán)境圖3-9VSCode官網(wǎng)首頁（2）VSCode界面介紹VSCode安裝好后，運行出現(xiàn)如圖3-11所示的工具界面，其左側(cè)是用于展示要編輯的所有文件和文件夾的文件管理器，包括資源管理器、搜索、GIT、調(diào)試和擴展五大欄目，右側(cè)是打開文件的編輯區(qū)域，最多可同時打開三個編輯區(qū)域到側(cè)邊。底欄是GitBranch、error&warning、編碼格式等。3.任務(wù)實施圖3-11VSCode界面任務(wù)3.1搭建開發(fā)環(huán)境任務(wù)3.2創(chuàng)建單車監(jiān)控頁面制作車輛實時監(jiān)控頁面，要求界面簡潔、重在突出數(shù)據(jù)的呈現(xiàn)，在色彩上以深藍色為主色調(diào)，配合淺藍、白色以及不同明暗度的粉色、綠色、黃色等亮麗的色彩給人一種未來科技感。頁面上除了最基本的導(dǎo)航和Logo外，還應(yīng)包括查詢區(qū)和數(shù)據(jù)呈現(xiàn)區(qū)。1.任務(wù)描述圖3-2新能源汽車單車監(jiān)控頁面采用目前主流的HTML+CSS技術(shù)實現(xiàn)新能源汽車實時監(jiān)測頁面的制作，利用HTML實現(xiàn)頁面的整體布局和頁面的內(nèi)容，利用CSS美化頁面使其呈現(xiàn)最終設(shè)計稿效果。實現(xiàn)過程將分為3步：第1步，利用HTML搭建頁面框架；第2步，在搭建的框架中填充頁面的內(nèi)容；第3步，利用CSS樣式化頁面，使其呈現(xiàn)設(shè)計稿效果。2.任務(wù)分析任務(wù)3.2創(chuàng)建單車監(jiān)控頁面（1）實現(xiàn)頁面布局在前端開發(fā)中頁面布局總是最開始的工作，就像蓋樓時，先搭框架，然后再填磚，前端也是一樣的，先要做好頁面的布局工作。在本系統(tǒng)的實時監(jiān)測頁面中采用的就是單列布局，這是最簡潔的一種，整個頁面給人一種清爽干凈的感覺。3.任務(wù)實施任務(wù)3.2創(chuàng)建單車監(jiān)控頁面圖3-17實時監(jiān)測頁面的布局結(jié)構(gòu)圖（2）顯示內(nèi)容當(dāng)完成第一步后發(fā)現(xiàn)頁面呈現(xiàn)效果與預(yù)期相差很大，那是因為當(dāng)前只是對整個實時監(jiān)測頁面的結(jié)構(gòu)做了總體的規(guī)劃，缺少具體的內(nèi)容，下一步就要開始充實頁面的內(nèi)容了。3.任務(wù)實施任務(wù)3.2創(chuàng)建單車監(jiān)控頁面圖3-19車輛實時監(jiān)測頁面效果（3）樣式化頁面實時監(jiān)測頁面的內(nèi)容已經(jīng)完成了，但在瀏覽器中查看頁面時會發(fā)現(xiàn)頁面目前只是信息的羅列，要使頁面呈現(xiàn)預(yù)先設(shè)計的效果就需要CSS的美化。3.任務(wù)實施任務(wù)3.2創(chuàng)建單車監(jiān)控頁面任務(wù)3.3呈現(xiàn)車輛運行狀態(tài)將單車監(jiān)控的數(shù)據(jù)用表格或圖表的方式呈現(xiàn)到實時監(jiān)測頁面中，如圖3-21所示是用表格的形式呈現(xiàn)數(shù)據(jù)，如圖3-22所示是用圖表的方式呈現(xiàn)數(shù)據(jù)。1.任務(wù)描述圖3-21用表格呈現(xiàn)車輛數(shù)據(jù)圖3-22JS原生代碼實現(xiàn)的車輛速度柱狀圖用表格呈現(xiàn)數(shù)據(jù)，將車輛數(shù)據(jù)按照HTML中表格的格式進行編輯排版，奇數(shù)行為字段，偶數(shù)行為字段對應(yīng)的數(shù)據(jù)。用圖表呈現(xiàn)數(shù)據(jù)，這里用JS的原生代碼實現(xiàn)一個條狀圖表，由于JS不是本項目的重點，只要掌握如何通過調(diào)用JS呈現(xiàn)圖表即可。2.任務(wù)分析任務(wù)3.3呈現(xiàn)車輛運行狀態(tài)（1）車輛數(shù)據(jù)在表格中的呈現(xiàn)①利用表格呈現(xiàn)②利用div元素呈現(xiàn)（2）用條形圖呈現(xiàn)車速3.任務(wù)實施任務(wù)3.3呈現(xiàn)車輛運行狀態(tài)一、選擇題1.如果要在不同的網(wǎng)頁中應(yīng)用相同的樣式表定義，應(yīng)該（）A.直接在HTML的元素中定義樣式表B.在HTML的<head>標記中定義樣式表C.通過一個外部樣式表文件定義樣式表D.以上都可以2.a:hover表示超鏈接在（）時的狀態(tài)。A. 鼠標按下 B.鼠標未移入 C.鼠標放上去 D.訪問過后課后練習(xí)33.若要在頁面中創(chuàng)建一個圖形超鏈接，要顯示的圖形為myhome.jpg,所鏈接的地址為,以下用法中，正確的是（）。A.<ahref=””>myhome.jpg</a>B.<ahref=””><imgsrc=”myhome.jpg”></a>C.<imgsrc=”myhome.jpg”><ahref=””></a>D.<ahref=><imgsrc=”myhome.jpg”>4.在HTML頁面中，有如下樣式規(guī)則，它的選擇器為（）。P{color:red;font-size:30px;f