《大數(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ù)免費閱讀

下載本文檔

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

文檔簡介

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

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

padding、margin、border

和

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

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

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

二、教學設(shè)計教學步驟教學內(nèi)容與情境設(shè)計教師活動學生活動時間分配導(dǎo)入課堂1.情景引入????案例展示：播放一段智慧農(nóng)業(yè)大屏的實際應(yīng)用視頻（如農(nóng)田監(jiān)測、產(chǎn)量預(yù)測大屏），引導(dǎo)學生觀察其布局特點。??提問互動：“大屏中哪些模塊最吸引你的注意？為什么？”“如果布局混亂，數(shù)據(jù)展示可能產(chǎn)生哪些問題？”??2.任務(wù)背景????農(nóng)業(yè)需求：智慧農(nóng)業(yè)大屏需實時展示數(shù)據(jù)，要求信息分層清晰、重點突出。??技術(shù)挑戰(zhàn)：如何通過合理的布局設(shè)計平衡數(shù)據(jù)密度、可讀性與視覺舒適度？引導(dǎo)分享學生互動討論10分鐘任務(wù)要求本任務(wù)主要完成智慧農(nóng)業(yè)大屏的前端布局設(shè)計，需要明確智慧農(nóng)業(yè)大屏的尺寸、分辨率，以及各個模塊的尺寸和分辨率。這些參數(shù)決定了網(wǎng)頁的總體框架，是后續(xù)工作的前提和基礎(chǔ)。1.前端布局核心參數(shù)???分辨率：?標準選擇：1920×1080px（主流大屏設(shè)備適配，兼顧高清顯示與代碼兼容性）。?適配原則：采用百分比布局（如width:30%）替代固定像素，支持響應(yīng)式縮放。??模塊劃分：??左中右布局：??左側(cè)（20%）：實時監(jiān)測數(shù)據(jù)（如傳感器數(shù)值、報警彈窗）。??中部（60%）：核心圖表（折線圖、熱力圖）。??右側(cè)（20%）：操作面板（數(shù)據(jù)篩選、設(shè)備控制）。??案例：展示某農(nóng)業(yè)大屏設(shè)計稿，分析模塊占比與數(shù)據(jù)優(yōu)先級關(guān)系。??2.用戶體驗與視覺習慣????F型視覺動線：用戶視線通常從左上向右下移動，重要數(shù)據(jù)應(yīng)置于左側(cè)及中部。??留白原則：模塊間保留10-15px間距，避免視覺壓迫。教師講解學生觀看演示并思考10分鐘執(zhí)行步驟階段1：前期分析與規(guī)劃任務(wù)要求?需求分析：設(shè)計一個智慧農(nóng)業(yè)大屏前端框架，需明確：頁面總尺寸：1920×1080px。模塊劃分與尺寸：左中右布局，具體比例與數(shù)據(jù)指標匹配。代碼實現(xiàn)：使用HTML/CSS完成基礎(chǔ)布局，支持響應(yīng)式適配。執(zhí)行步驟詳解??????需求梳理：??數(shù)據(jù)類型：假設(shè)需展示“土壤濕度”“光照強度”“溫濕度趨勢”“設(shè)備狀態(tài)”四大類數(shù)據(jù)。??優(yōu)先級排序：核心圖表（趨勢圖）>實時數(shù)值>操作面板。??工具準備：??原型設(shè)計：使用Figma/Sketch繪制低保真原型（圖1）。左側(cè)：10%寬度，放置實時報警與傳感器數(shù)值。中部：70%寬度，包含上下兩個圖表區(qū)域。右側(cè)：20%寬度，操作按鈕與數(shù)據(jù)篩選。??參數(shù)記錄表：記錄模塊尺寸、邊距、分辨率適配規(guī)則。教師講解、演示、互動學生觀看演示并上機實踐15分鐘執(zhí)行步驟階段2：布局代碼實現(xiàn)??HTML結(jié)構(gòu)搭建??：<divclass="dashboard"><!--左側(cè)面板--><divclass="panelleft-panel"><h3>監(jiān)測</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è)計??：.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等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論