《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第3周 HTML常用標(biāo)簽（前4小節(jié)）_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第3周 HTML常用標(biāo)簽（前4小節(jié)）_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第3周 HTML常用標(biāo)簽（前4小節(jié)）_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與 Web 前端開(kāi)發(fā)》教案 第3周 HTML常用標(biāo)簽（前4小節(jié)）_第4頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡(jiǎn)介

《網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)》電子教案（第3周）一、教學(xué)基本信息??課程名稱??：網(wǎng)頁(yè)設(shè)計(jì)與Web前端開(kāi)發(fā)??教學(xué)課時(shí)??：理論2學(xué)時(shí)+實(shí)踐1學(xué)時(shí)??授課對(duì)象??：計(jì)算機(jī)相關(guān)專業(yè)學(xué)生/Web前端開(kāi)發(fā)初學(xué)者??教材章節(jié)??：第3章HTML常用標(biāo)簽（前4小節(jié)）二、教學(xué)目標(biāo)（一）知識(shí)目標(biāo)了解CSS樣式表的概念、功能及發(fā)展歷程（CSS1.0至CSS3）。掌握CSS樣式的聲明方法（基本語(yǔ)法：選擇器{屬性：值；}）。掌握CSS的3種應(yīng)用方式（內(nèi)部樣式表、外部樣式表、內(nèi)聯(lián)樣式表）及導(dǎo)入外部樣式表的方法。理解并應(yīng)用常見(jiàn)選擇器（標(biāo)簽、類、ID、組合、后代選擇器）。掌握盒模型的組成（內(nèi)容、內(nèi)邊距、邊框、外邊距）及相關(guān)屬性（border、padding、margin）。掌握列表標(biāo)簽（無(wú)序列表、有序列表、定義列表）的樣式設(shè)置（list-style-type/image/position）。理解元素分類（塊元素、行內(nèi)元素、行內(nèi)塊元素）的特征及類型轉(zhuǎn)換（display屬性）。（二）思政目標(biāo)理解標(biāo)準(zhǔn)化、規(guī)范化在Web開(kāi)發(fā)中的重要性，培養(yǎng)按規(guī)范編寫(xiě)代碼的習(xí)慣。通過(guò)CSS與HTML分離的思想，培養(yǎng)“結(jié)構(gòu)與表現(xiàn)分離”的模塊化思維。結(jié)合盒模型的精確計(jì)算，培養(yǎng)嚴(yán)謹(jǐn)細(xì)致的工匠精神和邏輯思維能力。三、教學(xué)重難點(diǎn)（一）教學(xué)重點(diǎn)CSS樣式的基本語(yǔ)法及3種應(yīng)用方式（內(nèi)部、外部、內(nèi)聯(lián)）。類選擇器、ID選擇器的創(chuàng)建與引用。盒模型的組成及邊框、內(nèi)外邊距的設(shè)置。塊元素與行內(nèi)元素的區(qū)別及轉(zhuǎn)換方法。（二）教學(xué)難點(diǎn)后代選擇器與子元素選擇器的區(qū)別及應(yīng)用場(chǎng)景。盒模型的寬高計(jì)算（內(nèi)容寬高+內(nèi)邊距+邊框+外邊距）。外邊距合并現(xiàn)象（垂直相鄰元素、父子元素）及解決方案。元素類型轉(zhuǎn)換（display屬性）的實(shí)際應(yīng)用（如行內(nèi)元素設(shè)置寬高）。四、教學(xué)方法講授法：系統(tǒng)講解CSS語(yǔ)法、選擇器、盒模型等理論知識(shí)。案例演示法：結(jié)合教材示例（如例3-1至例3-25），實(shí)時(shí)演示代碼效果，對(duì)比修改前后的頁(yè)面變化。對(duì)比分析法：對(duì)比不同選擇器的優(yōu)先級(jí)、塊元素與行內(nèi)元素的特征差異。任務(wù)驅(qū)動(dòng)法：實(shí)踐課通過(guò)具體任務(wù)（如設(shè)置盒模型樣式、轉(zhuǎn)換元素類型）強(qiáng)化應(yīng)用能力。五、教學(xué)過(guò)程（一）第一學(xué)時(shí)：CSS基礎(chǔ)與選擇器（40分鐘）導(dǎo)入（5分鐘）回顧HTML的局限性（如樣式與結(jié)構(gòu)混合，修改繁瑣），提問(wèn)：“如何高效統(tǒng)一網(wǎng)頁(yè)樣式？”引出CSS的作用——“分離結(jié)構(gòu)與表現(xiàn)”。展示例3-1效果：用CSS設(shè)置頁(yè)面文字顏色和段落縮進(jìn)，對(duì)比純HTML實(shí)現(xiàn)的繁瑣性，突出CSS優(yōu)勢(shì)。CSS概念與基本語(yǔ)法（10分鐘）講解CSS定義：層疊樣式表（CascadingStyleSheets），用于控制網(wǎng)頁(yè)元素的外觀（字體、顏色、布局等）?；菊Z(yǔ)法：選擇器{屬性:值;屬性:值;}，例如：p{color:blue;text-indent:2em;}。語(yǔ)法規(guī)則：屬性與值用冒號(hào)連接，多屬性用分號(hào)分隔；值為多單詞時(shí)加引號(hào)（如font-family:"MicrosoftYaHei";）。CSS的3種應(yīng)用方式（15分鐘）內(nèi)部樣式表：在<head>中用<style>標(biāo)簽定義，作用于當(dāng)前頁(yè)面。外部樣式表：創(chuàng)建.css文件，用<link>標(biāo)簽引入，作用于多個(gè)頁(yè)面（推薦用于多頁(yè)面網(wǎng)站）。內(nèi)聯(lián)樣式表：在HTML標(biāo)簽中用style屬性定義，僅作用于當(dāng)前元素（不推薦大量使用）。導(dǎo)入外部樣式表：在<style>中用@import導(dǎo)入，注意需放在樣式聲明前。常見(jiàn)選擇器（10分鐘）標(biāo)簽選擇器：以HTML標(biāo)簽名作為選擇器（如p{...}控制所有段落）。類選擇器：以.類名定義，通過(guò)class屬性引用（如.red{color:red;}，<pclass="red">）。ID選擇器：以#ID名定義，通過(guò)id屬性引用（唯一標(biāo)識(shí)，如#title{font-size:20px;}）。組合選擇器：用逗號(hào)分隔多個(gè)選擇器（如p,li{line-height:1.5;}同時(shí)控制段落和列表項(xiàng)）。后代選擇器：用空格分隔父子選擇器（如divp{color:gray;}控制div內(nèi)的所有p元素）。（二）第二學(xué)時(shí)：盒模型、列表樣式與元素分類（40分鐘）復(fù)習(xí)導(dǎo)入（5分鐘）抽查學(xué)生對(duì)選擇器的掌握：“如何定義一個(gè)類選擇器.box，使元素背景為灰色？”引出本節(jié)課重點(diǎn)：如何通過(guò)CSS控制元素的布局（盒模型）、列表樣式及元素排列方式。盒模型（15分鐘）概念：所有HTML元素均可視為“盒子”，由4部分組成：內(nèi)容（content）：元素的文本或圖像（寬高由width/height定義）。內(nèi)邊距（padding）：內(nèi)容與邊框的距離（padding:10px;）。邊框（border）：盒子的邊框（border:1pxsolid#000;）。外邊距（margin）：盒子與其他元素的距離（margin:20px;）。盒模型寬高計(jì)算：總寬=左外邊距+左邊框+左內(nèi)邊距+width+右內(nèi)邊距+右邊框+右外邊距（高度同理）。案例演示：例3-4（div盒模型），通過(guò)瀏覽器開(kāi)發(fā)者工具查看盒模型參數(shù)（如圖3-4）。列表樣式（10分鐘）無(wú)序列表（<ul>）：用list-style-type設(shè)置項(xiàng)目符號(hào)（disc、circle、square）。有序列表（<ol>）：用list-style-type設(shè)置序號(hào)（decimal、upper-alpha等）。自定義列表樣式：用list-style-image設(shè)置圖片作為項(xiàng)目符號(hào)（如list-style-image:url("dot.png");）。案例：例3-19（無(wú)序列表商品分類）、例3-20（有序列表序號(hào)類型）。元素分類及轉(zhuǎn)換（10分鐘）塊元素：獨(dú)占一行，可設(shè)置寬高（如div、p、h1）。行內(nèi)元素：不獨(dú)占一行，不可設(shè)置寬高（如span、a、em）。行內(nèi)塊元素：同行顯示，可設(shè)置寬高（如img、input）。類型轉(zhuǎn)換：用display屬性（block/inline/inline-block/none）。案例：例3-23（塊元素默認(rèn)排列）、例3-25（行內(nèi)塊元素布局）。（三）實(shí)踐學(xué)時(shí)：CSS綜合應(yīng)用（40分鐘）任務(wù)布置（5分鐘）目標(biāo)：完善“環(huán)保小站”頁(yè)面樣式，具體任務(wù)：用外部樣式表統(tǒng)一設(shè)置頁(yè)面背景色（#f5f5f5）、段落文字大小（14px）。定義類選擇器.box，設(shè)置邊框（1pxsolid#ccc）、內(nèi)邊距（20px）、外邊距（10pxauto）、寬度（500px）。將無(wú)序列表（環(huán)保主題分類）的項(xiàng)目符號(hào)改為自定義圖片（list-style-image）。將行內(nèi)元素<span>轉(zhuǎn)換為塊元素，設(shè)置寬高（100px）和背景色（lightblue）。學(xué)生實(shí)踐（30分鐘）學(xué)生分組操作，教師巡回指導(dǎo)，重點(diǎn)解決：外部樣式表路徑引用錯(cuò)誤（如href路徑不正確導(dǎo)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論