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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

二、教學設計教學步驟教學內容與情境設計教師活動學生活動時間分配一、課程導入與CSS概述?展示同一HTML網頁應用不同CSS樣式的對比（如文字顏色、布局差異），引發學生對樣式的興趣。CSS的定義與作用（結構與樣式分離）。CSS的優勢：CSS控制網頁的外觀可以實現結構與表現的分離，由CSS樣式設計的網頁，具有條理規范、布局統一、容易維護等優點。教師演示，引導思考明確本節課的目標效果5分鐘二、CSS基本語法通過修改網頁標題樣式（如顏色、字體大小）演示語法規則。CSS語法結構：選擇器、屬性、屬性值。常見選擇器類型：標簽選擇器、類選擇器、ID選擇器。權重值計算規則（ID>類>標簽）。演示編寫CSS規則，講解學生觀看演示并思考15分鐘三、CSS的引用方法CSS的引用方法主要有4種，行內式樣式、內嵌式樣式、鏈接式樣式、使用@import標記引入外部樣式文件。1）行內式樣式行內式樣式是指將CSS規則混合在HTML標簽中使用。例如，由CSS規則作為style屬性的屬性值。<astyle="color:red;font-size:28px;">XX網站</a><!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width，initial-scale=1"><title>行內式樣式</title></head><body><ahref="http://www.***.com"style="color:red;font-size:28px;">某網站</a><br><ahref="http://

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

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

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

溫馨提示

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

評論

0/150

提交評論