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

下載本文檔

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

文檔簡介

PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁5-1一、核心要素章節(jié)名稱項目3智慧農(nóng)業(yè)大屏結(jié)構(gòu)設(shè)計任務(wù)3.3前端開發(fā)基礎(chǔ)HTML5+CSS33.3.4CSS基礎(chǔ)教學(xué)課時2授課班級大數(shù)據(jù)技術(shù)2401班授課時間第5周-1授課地點介夫樓307教學(xué)目標(biāo)知識目標(biāo)掌握CSS基本語法及樣式規(guī)則掌握選擇器類型掌握引用方式及優(yōu)先級規(guī)則。能力目標(biāo)能夠使用HTML5+CSS3完成基礎(chǔ)的大屏結(jié)構(gòu)設(shè)計。能通過行內(nèi)式、內(nèi)嵌式、鏈接式引用CSS能解決樣式?jīng)_突問題素質(zhì)目標(biāo)通過演示項目及相關(guān)文檔，理解并梳理項目的業(yè)務(wù)功能結(jié)構(gòu)。勇于探索新技術(shù)，為推動國家和社會的發(fā)展貢獻智慧和力量。教學(xué)內(nèi)容主要內(nèi)容CSS的基本語法及引入方式重點幾種引入方式以及CSS的基礎(chǔ)語法。難點CSS樣式優(yōu)先級教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思

二、教學(xué)設(shè)計教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計教師活動學(xué)生活動時間分配一、課程導(dǎo)入與CSS概述?展示同一HTML網(wǎng)頁應(yīng)用不同CSS樣式的對比（如文字顏色、布局差異），引發(fā)學(xué)生對樣式的興趣。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)點。教師演示，引導(dǎo)思考明確本節(jié)課的目標(biāo)效果5分鐘二、CSS基本語法通過修改網(wǎng)頁標(biāo)題樣式（如顏色、字體大小）演示語法規(guī)則。CSS語法結(jié)構(gòu)：選擇器、屬性、屬性值。常見選擇器類型：標(biāo)簽選擇器、類選擇器、ID選擇器。權(quán)重值計算規(guī)則（ID>類>標(biāo)簽）。演示編寫CSS規(guī)則，講解學(xué)生觀看演示并思考15分鐘三、CSS的引用方法CSS的引用方法主要有4種，行內(nèi)式樣式、內(nèi)嵌式樣式、鏈接式樣式、使用@import標(biāo)記引入外部樣式文件。1）行內(nèi)式樣式行內(nèi)式樣式是指將CSS規(guī)則混合在HTML標(biāo)簽中使用。例如，由CSS規(guī)則作為style屬性的屬性值。<astyle="color:red;font-size:28px;">XX網(wǎng)站</a><!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width，initial-scale=1"><title>行內(nèi)式樣式</title></head><body><ahref="http://www.***.com"style="color:red;font-size:28px;">某網(wǎng)站</a><br><ahref="http://

www.***.com">某網(wǎng)站</a></body></html>2）內(nèi)嵌式樣式內(nèi)嵌式樣式只能定義某一個標(biāo)簽的樣式，如果要對整個網(wǎng)頁的某個標(biāo)簽進行特定樣式的定義，那么需要使用內(nèi)嵌式樣式。內(nèi)嵌式樣式一般是在<head>標(biāo)簽中使用，在<style>標(biāo)簽中定義。例如：<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width，initial-scale=1"><title>內(nèi)嵌式樣式</title><styletype="text/CSS">#p{color:red;font-size:28px;}</style></head><body><ahref="http://www.***.com"id="p">某網(wǎng)站</a><br><ahref="http://www.***.com">某網(wǎng)站</a></body></html>3）鏈接式樣式鏈接式樣式是將樣式表以單獨的文件（文件后綴一般為.css）存放，使網(wǎng)站的所有網(wǎng)頁通過<link>標(biāo)簽均可引用此樣式文件。鏈接式樣式降低網(wǎng)站的維護成本，讓網(wǎng)站擁有統(tǒng)一的風(fēng)格。注意：<link>標(biāo)簽一般在<head>標(biāo)簽中使用。使用<link>標(biāo)簽引入外部樣式文件的語法格式如下：<linkrel="stylesheet"type="text/css"href="樣式表源文件地址:">href屬性中的樣式表源文件地址的填寫方法與超鏈接的鏈接地址的填寫方法相同。rel="stylesheet"的作用是告知瀏覽器鏈接的是一個樣式表文件，是固定格式；type="text/css"表示傳輸?shù)奈谋绢愋蜑闃邮奖眍愋?，也是固定格式。例如?lt;!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width，initial-scale=1"><title>鏈接式樣式</title></head><linkrel="stylesheet"type="text/css"href="CSS3-3.css"><body><a>某網(wǎng)站</a></body></html>外部樣式文件CSS3-3.css的內(nèi)容如下。#netId{color:red;font-size:20px;}教師講解演示四種引用方式，對比代碼結(jié)構(gòu)與維護成本，學(xué)生觀看演示并思考20分鐘四、疊層樣式優(yōu)先級CSS層疊樣式表中的層疊指樣式的優(yōu)先級，當(dāng)行內(nèi)式樣式、內(nèi)嵌式樣式、鏈接式樣式都對某個HTML標(biāo)簽進行了樣式定義，即當(dāng)樣式定義發(fā)生沖突時，以優(yōu)先級最高的樣式為最終顯示效果。瀏覽器會按照不同的方式來確定樣式的優(yōu)先級，其原則如下。按照樣式來源確定優(yōu)先級：內(nèi)嵌樣式>內(nèi)部樣式>外部樣式>瀏覽器默認樣式。按照選擇器確定優(yōu)先級：ID選擇器>類選擇器>元素選擇器。當(dāng)樣式定義的優(yōu)先級相同時，以最后定義的樣式為最終顯示效果。教師講解學(xué)生觀看演示并思考15分鐘五、注釋與代碼規(guī)范展示未注釋的混亂CSS代碼與清晰注釋的代碼對比。注釋用于說明所寫代碼的含義，對讀者讀懂代碼有很大的幫助。CSS使用C/C++的語法進注釋，其中，“/*”放在注釋的開始處，“*/”放在注釋的結(jié)尾處。教師講解學(xué)生觀看演示并思考15分鐘六、綜合練習(xí)與總結(jié)?綜合應(yīng)用選擇器、外部樣式表、優(yōu)先級規(guī)則。課程總結(jié)與答疑?？偨Y(jié)知識點，強調(diào)“結(jié)構(gòu)與樣式分離”的設(shè)計思想獨立完成練習(xí)10分鐘

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

二、教學(xué)設(shè)計教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計教師活動學(xué)生活動時間分配導(dǎo)入課堂展示未應(yīng)用樣式的網(wǎng)頁與美化后的對比圖，提問：“如何高效為不同元素設(shè)置樣式？”引入CSS選擇器的核心作用：精準(zhǔn)定位元素，提升代碼復(fù)用性。引導(dǎo)分享學(xué)生互動討論5分鐘CSS選擇器的概述CSS選擇器是用于選擇HTML文檔中的元素，并對這些元素進行樣式設(shè)置的工具。選擇器是可以根據(jù)指定的條件來選擇HTML文件中的元素的。在CSS中，選擇器通常包含在樣式表中，通過指定不同的選擇器，可以為不同的HTML元素設(shè)置不同的樣式。常用的選擇器有，標(biāo)簽選擇器、類選擇器、ID選擇器、通配符選擇器。除此之外，還有組合選擇器、屬性選擇器等。教師講解學(xué)生觀看演示并思考10分鐘標(biāo)簽選擇器教師講解學(xué)生觀看演示并思考10分鐘類選擇器注意：類選擇器的定義是以英文圓點開頭的。類選擇器的名稱可以任意定義（但是不能使用中文），最好采用駝峰命名法。駝峰命名法（CamelCase）是編程語言中的一種命名約定，將變量和函數(shù)的名稱由多個單詞組成，并且這些單詞的首字母通常會根據(jù)它們的相對位置進行大小寫轉(zhuǎn)換。如果當(dāng)前單詞以小寫字母開頭，則后續(xù)的所有單詞的首字母均保持小寫。如果當(dāng)前單詞以大寫字母開頭，則后續(xù)的所有單詞的首字母均保持大寫。這種命名方法旨在提高代碼的可讀性和清晰度，因為它使得變量名和函數(shù)名的結(jié)構(gòu)更加直觀。教師講解學(xué)生觀看演示并思考15分鐘ID選擇器ID選擇器可以為頁面中的元素定義一個ID，且每個頁面中的元素ID值是唯一的，也可以為單個元素設(shè)置樣式。ID選擇器與類選擇器相似，但也有一些差別。相同點：類選擇器和ID選擇器在定義和使用時都區(qū)分大小寫。主要區(qū)別：在定義方

溫馨提示

  • 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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論