《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第6周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第4章使用HTML+CSS布局網(wǎng)頁（4.5-4.9節(jié)）二、教學目標（一）知識目標掌握表單的基本結構（<form>標簽及action、method屬性）和常用元素（<input>、<textarea>、<select>等）。理解表單相關偽類（:focus、:checked、:required等）的用法，能實現(xiàn)表單樣式動態(tài)變化。掌握表格標簽（<table>、<tr>、<td>）及合并單元格（colspan、rowspan）的用法。了解CSSTable布局（display:table系列屬性）與傳統(tǒng)表格布局的區(qū)別。掌握內聯(lián)框架（<iframe>）的基本用法，能在網(wǎng)頁中嵌入外部內容。了解CSS進階應用：網(wǎng)頁logo設置、字體圖標使用（如阿里iconfont）、CSS代碼復用技巧。（二）思政目標通過規(guī)范表單設計與驗證，培養(yǎng)嚴謹?shù)挠脩趔w驗意識和數(shù)據(jù)安全意識。結合表格與表單的布局邏輯，培養(yǎng)結構化思維和細節(jié)處理能力。利用字體圖標和CSS復用技術，培養(yǎng)高效開發(fā)習慣和審美能力。三、教學重難點（一）教學重點表單元素的類型（text、password、radio、checkbox等）及布局方法。表格合并單元格（colspan橫向合并、rowspan縱向合并）的操作。內聯(lián)框架（<iframe>）與超鏈接（<a>）的配合使用（target屬性）。字體圖標的下載、引入及應用流程。（二）教學難點表單偽類（:valid、:invalid）在實時驗證中的應用。CSSTable布局中display:table-cell實現(xiàn)垂直居中的原理。字體圖標引入過程中路徑問題及樣式適配。綜合案例中表單、表格、框架的協(xié)同布局邏輯。四、教學方法案例分析法：以“用戶注冊表單”“商品價格表”為例，講解表單與表格的布局技巧。演示法：現(xiàn)場演示阿里iconfont字體圖標的下載、引入及使用過程。對比教學法：對比傳統(tǒng)表格布局與CSSTable布局的優(yōu)缺點，加深理解。任務驅動法：實踐課通過“會員注冊頁面”制作任務，綜合應用表單、表格和圖標。五、教學過程（一）第一學時：表單及布局、表格及布局（40分鐘）導入（5分鐘）展示“電商注冊頁面”和“成績統(tǒng)計表”，提問：“如何設計用戶可輸入的表單？如何用表格清晰展示數(shù)據(jù)？”引出本節(jié)內容：表單用于收集用戶數(shù)據(jù)，表格用于結構化展示數(shù)據(jù)。表單及布局（15分鐘）表單基本結構：action：指定表單數(shù)據(jù)提交的服務器地址。method：提交方式（get顯式傳遞，post隱式傳遞，推薦敏感數(shù)據(jù)用post）。核心表單元素：<inputtype="text">：單行文本框（例4-20中的用戶名輸入框）。<inputtype="password">：密碼框（輸入內容加密顯示）。<inputtype="radio"name="sex">：單選按鈕（name相同則互斥）。<inputtype="checkbox">：復選框（可多選）。<textarea>：多行文本框（用于輸入大段文字）。<select>與<option>：下拉列表（multiple屬性允許多選）。表單樣式與偽類：:focus：元素獲焦時樣式（如輸入框邊框變色）。:required：必填項樣式。表格及布局（15分鐘）基本表格結構：合并單元格：橫向合并：<tdcolspan="2">（圖4-55并兩列）?？v向合并：<tdrowspan="3">（例4-56并三行）。CSSTable布局：用div模擬表格：display:table（表格）、display:table-row（行）、display:table-cell（單元格）。優(yōu)勢：語義化優(yōu)于傳統(tǒng)表格，支持動態(tài)垂直居中（例4-23圖片居中）。小結（5分鐘）回顧表單元素類型及表格合并方法。布置思考題：“如何用CSSTable實現(xiàn)三列等高布局？”（二）第二學時：內聯(lián)框架與CSS進階應用（40分鐘）復習導入（5分鐘）抽查學生對表單偽類的掌握：“如何設置必填項未填寫時的紅色邊框？”引出本節(jié)內容：內聯(lián)框架實現(xiàn)頁面嵌套，CSS進階提升頁面質感。內聯(lián)框架（10分鐘）基本用法：src：指定嵌入頁面的URL。name與<a>的target配合，實現(xiàn)鏈接在框架內跳轉（例4-25導航與內容區(qū)聯(lián)動）。應用場景：頁面局部刷新（如后臺管理系統(tǒng)左側導航+右側內容）。CSS進階應用（20分鐘）網(wǎng)頁logo設置：制作favicon.ico圖標（尺寸16×16或32×32），放在網(wǎng)站根目錄。頭部引入：<linkrel="shortcuticon"href="favicon.ico">。字體圖標使用（阿里iconfont）：登錄iconfont官網(wǎng)，搜索并下載所需圖標（例4-26中的購物車圖標）。引入解壓后的iconfont.css文件。通過類名使用：<iclass="iconfonticon-gouwuche"></i>。CSS代碼復用：外部樣式表：多個頁面共享樣式。通用類：.fl{float:left;}、.tc{text-align:center;}（例4-26中的導航樣式）。綜合案例分析（5分鐘）展示“華為商城首頁”布局：表單（搜索框）+表格（商品列表）+字體圖標（購物車、收藏），說明各技術的協(xié)同應用。（三）實踐學時：綜合布局實戰(zhàn)（40分鐘）任務布置（5分鐘）目標：制作“會員注冊與信息展示頁面”，要求：設計注冊表單（包含用戶名、密碼、性別單選、興趣復選、個人簡介多行文本）。用表格展示“會員等級特權”（包含3行2列，合并表頭）。嵌入“會員協(xié)議”內聯(lián)框架（src指向協(xié)議頁面）。使用字體圖標（如用戶圖標、鎖圖標）美化表單。學生實踐（30分鐘）教師巡回指導，重點解決：表單元素對齊