《大數(shù)據(jù)可視化分析》第5周-2_第1頁
《大數(shù)據(jù)可視化分析》第5周-2_第2頁
《大數(shù)據(jù)可視化分析》第5周-2_第3頁
《大數(shù)據(jù)可視化分析》第5周-2_第4頁
《大數(shù)據(jù)可視化分析》第5周-2_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁5-2一、核心要素章節(jié)名稱項(xiàng)目3智慧農(nóng)業(yè)大屏結(jié)構(gòu)設(shè)計(jì)任務(wù)3.3.6盒子模型任務(wù)3.3.7元素的浮動(dòng)與定位教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第5周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握CSS盒子模型掌握CSS元素的浮動(dòng)掌握CSS元素的定位能力目標(biāo)會(huì)進(jìn)行邊框、內(nèi)邊距、外邊距的設(shè)置會(huì)進(jìn)行元素的類型及轉(zhuǎn)換、overflow屬性、元素的浮動(dòng)、清除浮動(dòng)的操作。會(huì)實(shí)現(xiàn)元素的靜態(tài)定位、相對(duì)定位、絕對(duì)定位、固定定位。素質(zhì)目標(biāo)通過盒子模型規(guī)范引申代碼規(guī)范對(duì)國(guó)家信息化建設(shè)的意義，培養(yǎng)工匠精神。培養(yǎng)代碼調(diào)試的細(xì)致精神。模擬項(xiàng)目開發(fā)中的分工，培養(yǎng)團(tuán)隊(duì)協(xié)作。教學(xué)內(nèi)容主要內(nèi)容CSS盒子模型、浮動(dòng)與定位重點(diǎn)邊框、內(nèi)邊距、外邊距的設(shè)置，利用盒子模型布局網(wǎng)頁的優(yōu)勢(shì)。難點(diǎn)元素的浮動(dòng)與定位教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入與知識(shí)鞏固回顧上次課的內(nèi)容：CSS的定義與作用（結(jié)構(gòu)與樣式分離）。CSS的優(yōu)勢(shì)：CSS控制網(wǎng)頁的外觀可以實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離，由CSS樣式設(shè)計(jì)的網(wǎng)頁，具有條理規(guī)范、布局統(tǒng)一、容易維護(hù)等優(yōu)點(diǎn)。CSS選擇器的核心作用：精準(zhǔn)定位元素，提升代碼復(fù)用性。教師演示，引導(dǎo)思考明確本節(jié)課的目標(biāo)效果5分鐘二、知識(shí)講授一：CSS盒子模型概念CSS盒子模型概念??：CSS將HTML頁面中的每一個(gè)元素看成是一個(gè)矩形盒子，占據(jù)一定的頁面空間。一個(gè)HTML頁面由很多這樣的盒子組成，這些盒子之間會(huì)相互影響，因此網(wǎng)頁布局主要是掌握：一個(gè)獨(dú)立的盒子的內(nèi)部結(jié)構(gòu)；多個(gè)盒子之間的相互關(guān)系。盒子模型使用<div></div>標(biāo)記來表示。一個(gè)獨(dú)立的盒子模型由4個(gè)部分構(gòu)成的，即內(nèi)容區(qū)（content）、填充（padding）、邊框（border）和空白邊（margin）。盒子的實(shí)際寬度=width+padding（左右）+border（左右）+margin（左右）盒子的實(shí)際高度=height+padding（上下）+border（上下）+margin（上下）——————————————————————————————————思政內(nèi)容：通過盒子模型規(guī)范引申代碼規(guī)范對(duì)國(guó)家信息化建設(shè)的意義，培養(yǎng)工匠精神。演示編寫CSS盒子模型，講解學(xué)生觀看演示并思考15分鐘三、知識(shí)講授二：CSS盒子模型元素的浮動(dòng)元素浮動(dòng)：改變普通文檔流的排列方式，使得塊元素在同一行中排列，讓網(wǎng)頁布局更加方便。語法規(guī)則：選擇器{float:屬性值;}屬性有三個(gè)值：none：默認(rèn)值，表示元素不浮動(dòng)left：左浮動(dòng)right：右浮動(dòng)浮動(dòng)原則：有浮動(dòng)屬性的元素肯定會(huì)移動(dòng)，但未必會(huì)改變?cè)瓉淼奈恢?。有浮?dòng)屬性的元素是脫離原有文檔流的。如果上一行沒有浮動(dòng)元素，那么下一行的浮動(dòng)元素是移動(dòng)不上去的。非浮動(dòng)元素會(huì)忽略掉它前面的浮動(dòng)元素，取代其前面浮動(dòng)元素的位置。示例1：<styletype="text/css">*{margin:0px;padding:0px;}div{width:150px;height:50px;}#box1{background-color:red;float:left;}#box2{background-color:blue;float:left;}#box3{background-color:green;float:left;}</style><body><divid="box1">box1</div><divid="box2">box2</div><divid="box3">box3</div></body>代碼效果1：示例2：<styletype="text/css">*{margin:0px;padding:0px;}div{width:150px;height:50px;}#box1{background-color:red;float:left;}#box2{background-color:blue;width:250px;height:150px;}#box3{background-color:green;}</style><body><divid="box1">box1</div><divid="box2">box2</div><divid="box3">box3</div></body>示例代碼效果2：——————————————————————————————————思政內(nèi)容：嚴(yán)謹(jǐn)態(tài)度：數(shù)據(jù)可視化誤差可能影響決策，培養(yǎng)代碼調(diào)試的細(xì)致精神。教師講解演示元素浮動(dòng)代碼與效果學(xué)生觀看演示并思考20分鐘四、知識(shí)講授三：CSS盒子模型元素的定位元素的定位：可以精確定義一個(gè)元素的準(zhǔn)確位置，元素的定位屬性主要包括定位模式和邊偏移。（1）定位模式：position屬性static：靜態(tài)定位relative：相對(duì)定位absolute：絕對(duì)定位fixed：固定定位（2）邊偏移：left：左側(cè)偏移量right：右側(cè)偏移量top：頂端偏移量bottom：底部偏移量（3）常見的定位模式靜態(tài)定位（static）：網(wǎng)頁元素默認(rèn)的定位方式，元素按照標(biāo)準(zhǔn)流進(jìn)行布局。不能通過設(shè)置邊偏移屬性left、right、top、bottom值來改變?cè)氐奈恢谩ｌo態(tài)定位的示例：運(yùn)行結(jié)果：相對(duì)定位（relative）：網(wǎng)頁元素相對(duì)于其在原文檔流的位置進(jìn)行定位，當(dāng)元素設(shè)置為相對(duì)定位“position:relative;”，該元素就會(huì)相對(duì)于其自身的默認(rèn)位置進(jìn)行偏移，但是它在文檔流中的位置仍然保留。絕對(duì)定位（absolute）：將元素相對(duì)于距離其最近的、已經(jīng)定位（相對(duì)、絕對(duì)或固定定位）的父元素進(jìn)行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進(jìn)行定位。當(dāng)元素設(shè)置為絕對(duì)定位“position:absolute;”，該元素就會(huì)相對(duì)于其父元素或body根元素進(jìn)行偏移，脫離文檔流，它在文檔流中的位置將被其他元素占據(jù)。固定定位（fixed）：相對(duì)于瀏覽器窗口進(jìn)行定位。元素設(shè)置為固定定位之后，就會(huì)脫離原來的文檔流進(jìn)行定位，原有的位置將被其他元素占據(jù)。無論瀏覽器窗口大小如何改變，瀏覽器滾動(dòng)條如何拖動(dòng)，固定定位的元素都將顯示在瀏覽器的固定位置?！颊?nèi)容：知識(shí)產(chǎn)權(quán)：強(qiáng)調(diào)代碼復(fù)用與原創(chuàng)設(shè)計(jì)的平衡，避免抄襲。教師講解，展示代碼與運(yùn)行結(jié)果學(xué)生觀看演示并思考20分鐘五、注釋與代碼規(guī)范如何通過調(diào)整盒子模型參數(shù)優(yōu)化數(shù)據(jù)可視化的可讀性？參考：調(diào)整盒子模型參數(shù)的本質(zhì)是平衡??信息密度??與??視覺舒適度??。通過科學(xué)設(shè)置

padding、margin、border

和

box-sizing，既能避免數(shù)據(jù)擁擠，又能提升大屏的響應(yīng)式表現(xiàn)，最終服務(wù)于農(nóng)業(yè)生產(chǎn)的精準(zhǔn)決策。

??核心原則：精準(zhǔn)性：參數(shù)調(diào)整需服務(wù)于數(shù)據(jù)本身，避免過度設(shè)計(jì)。包容性：適配不同用戶群體（如農(nóng)民、技術(shù)人員）的設(shè)備與認(rèn)知習(xí)慣。倫理性：技術(shù)實(shí)現(xiàn)需符合社會(huì)價(jià)值（如減少能耗、保護(hù)隱私）。教師發(fā)布任務(wù)并講解學(xué)生討論、思考、解決問題15分鐘六、綜合練習(xí)與總結(jié)?調(diào)整盒子模型參數(shù)的本質(zhì)是平衡內(nèi)容的信息密度與視覺舒適度。通過科學(xué)設(shè)置padding、margin、border和box-sizing，既能避免數(shù)據(jù)擁擠，又能提升大屏的響應(yīng)式表現(xiàn)，最終服務(wù)于農(nóng)業(yè)生產(chǎn)的精準(zhǔn)決策。課程總結(jié)與答疑?？偨Y(jié)知識(shí)點(diǎn)問答、討論5分鐘

大數(shù)據(jù)可視化分析課程教案首頁5-2一、核心要素章節(jié)名稱項(xiàng)目三：智慧農(nóng)業(yè)大屏結(jié)構(gòu)設(shè)計(jì)任務(wù)實(shí)施3.2設(shè)計(jì)智慧農(nóng)業(yè)大屏的前端布局項(xiàng)目教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第5周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握選擇器的概念和使用方法掌握盒子模型的概念掌握農(nóng)業(yè)智慧大屏的布局與設(shè)計(jì)掌握復(fù)合選擇器的概念和使用方法能力目標(biāo)能獨(dú)立編寫CSS選擇器代碼，為網(wǎng)頁元素精準(zhǔn)設(shè)置樣式能區(qū)分不同選擇器的優(yōu)先級(jí)能設(shè)計(jì)用戶友好、數(shù)據(jù)清晰的數(shù)據(jù)大屏素質(zhì)目標(biāo)1.通過演示項(xiàng)目及相關(guān)文檔，理解并梳理項(xiàng)目的業(yè)務(wù)功能結(jié)構(gòu)。2.勇于探索新技術(shù)，為推動(dòng)國(guó)家和社會(huì)的發(fā)展貢獻(xiàn)智慧和力量。3.培養(yǎng)代碼規(guī)范意識(shí)（如駝峰命名法）、團(tuán)隊(duì)協(xié)作能力及問題解決能力教學(xué)內(nèi)容主要內(nèi)容CSS選擇器的使用盒子模型的使用數(shù)據(jù)大屏的前端布局重點(diǎn)類選擇器與ID選擇器的區(qū)別、組合選擇器的靈活應(yīng)用難點(diǎn)選擇器優(yōu)先級(jí)規(guī)則、多類名疊加時(shí)的樣式?jīng)_突處理。教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配導(dǎo)入課堂1.情景引入????案例展示：播放一段智慧農(nóng)業(yè)大屏的實(shí)際應(yīng)用視頻（如農(nóng)田監(jiān)測(cè)、產(chǎn)量預(yù)測(cè)大屏），引導(dǎo)學(xué)生觀察其布局特點(diǎn)。??提問互動(dòng)：“大屏中哪些模塊最吸引你的注意？為什么？”“如果布局混亂，數(shù)據(jù)展示可能產(chǎn)生哪些問題？”??2.任務(wù)背景????農(nóng)業(yè)需求：智慧農(nóng)業(yè)大屏需實(shí)時(shí)展示數(shù)據(jù)，要求信息分層清晰、重點(diǎn)突出。??技術(shù)挑戰(zhàn)：如何通過合理的布局設(shè)計(jì)平衡數(shù)據(jù)密度、可讀性與視覺舒適度？引導(dǎo)分享學(xué)生互動(dòng)討論10分鐘任務(wù)要求本任務(wù)主要完成智慧農(nóng)業(yè)大屏的前端布局設(shè)計(jì)，需要明確智慧農(nóng)業(yè)大屏的尺寸、分辨率，以及各個(gè)模塊的尺寸和分辨率。這些參數(shù)決定了網(wǎng)頁的總體框架，是后續(xù)工作的前提和基礎(chǔ)。1.前端布局核心參數(shù)???分辨率：?標(biāo)準(zhǔn)選擇：1920×1080px（主流大屏設(shè)備適配，兼顧高清顯示與代碼兼容性）。?適配原則：采用百分比布局（如width:30%）替代固定像素，支持響應(yīng)式縮放。??模塊劃分：??左中右布局：??左側(cè)（20%）：實(shí)時(shí)監(jiān)測(cè)數(shù)據(jù)（如傳感器數(shù)值、報(bào)警彈窗）。??中部（60%）：核心圖表（折線圖、熱力圖）。??右側(cè)（20%）：操作面板（數(shù)據(jù)篩選、設(shè)備控制）。??案例：展示某農(nóng)業(yè)大屏設(shè)計(jì)稿，分析模塊占比與數(shù)據(jù)優(yōu)先級(jí)關(guān)系。??2.用戶體驗(yàn)與視覺習(xí)慣????F型視覺動(dòng)線：用戶視線通常從左上向右下移動(dòng)，重要數(shù)據(jù)應(yīng)置于左側(cè)及中部。??留白原則：模塊間保留10-15px間距，避免視覺壓迫。教師講解學(xué)生觀看演示并思考10分鐘執(zhí)行步驟階段1：前期分析與規(guī)劃任務(wù)要求?需求分析：設(shè)計(jì)一個(gè)智慧農(nóng)業(yè)大屏前端框架，需明確：頁面總尺寸：1920×1080px。模塊劃分與尺寸：左中右布局，具體比例與數(shù)據(jù)指標(biāo)匹配。代碼實(shí)現(xiàn)：使用HTML/CSS完成基礎(chǔ)布局，支持響應(yīng)式適配。執(zhí)行步驟詳解??????需求梳理：??數(shù)據(jù)類型：假設(shè)需展示“土壤濕度”“光照強(qiáng)度”“溫濕度趨勢(shì)”“設(shè)備狀態(tài)”四大類數(shù)據(jù)。??優(yōu)先級(jí)排序：核心圖表（趨勢(shì)圖）>實(shí)時(shí)數(shù)值>操作面板。??工具準(zhǔn)備：??原型設(shè)計(jì)：使用Figma/Sketch繪制低保真原型（圖1）。左側(cè)：10%寬度，放置實(shí)時(shí)報(bào)警與傳感器數(shù)值。中部：70%寬度，包含上下兩個(gè)圖表區(qū)域。右側(cè)：20%寬度，操作按鈕與數(shù)據(jù)篩選。??參數(shù)記錄表：記錄模塊尺寸、邊距、分辨率適配規(guī)則。教師講解、演示、互動(dòng)學(xué)生觀看演示并上機(jī)實(shí)踐15分鐘執(zhí)行步驟階段2：布局代碼實(shí)現(xiàn)??HTML結(jié)構(gòu)搭建??：<divclass="dashboard"><!--左側(cè)面板--><divclass="panelleft-panel"><h3>監(jiān)測(cè)</h3><divclass="sensor-data">...</div></div><!--中部圖表--><divclass="panelcenter-panel"><divclass="charttop-chart">...</div><divclass="chartbottom-chart">...</div></div><!--右側(cè)操作--><divclass="panelright-panel"><buttonclass="control-btn">按鈕</button></div></div>??CSS樣式設(shè)計(jì)??：.dashboard{width:1920px;height:1080px;margin:0auto;position:relative;}.panel{float:left;box-sizing:border-box;padding:20px;}.left-panel{width:10%;background:#f5f5f5;}.center-panel{width:70%;background:white;}.right-panel{width:20%;background:#eaeaea;}??響應(yīng)式適配??：@media(max-width:1200px){.left-panel{width:15%;}.right-panel{width:25%;}}@media(max-width:768px){.dashboard{width:100%;}.panel{width:100%!important;float:none;}}??關(guān)鍵問題與解決：??父容器高度塌陷：為.dashboard添加min-hei

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論