《網(wǎng)頁設計基礎》課程教案課程名稱：網(wǎng)頁設計基礎課程號：課程學分：2.5參考學時：40課程性質：專業(yè)必修課適用專業(yè)：計算機、電子商務等專業(yè)上課時間：授課教師：負責人：審核單位：年月日-5-一、課程基本信息課程名稱網(wǎng)頁設計基礎課程號課程性質專業(yè)必修課開課部門課程負責人課程團隊授課學期學分/學時2.5/40授課語言漢語課程簡介?網(wǎng)頁設計基礎課程?旨在培養(yǎng)學生掌握前端設計與開發(fā)的核心技能，包括HTML、CSS和JavaScript等前端基礎知識，并熟悉網(wǎng)頁設計軟件和工具的基本操作與結構。課程內容包括網(wǎng)頁制作、設計、規(guī)劃的基本知識以及網(wǎng)站設計、開發(fā)的完整流程，循序漸進地引導學生學習和掌握相關課程知識。?授課班級

二、課程授課教案項目4共5項目講課主題應用和美化表格學時4學時教學目標1、知識目標（1）掌握表格標簽的應用，能夠在網(wǎng)頁中創(chuàng)建表格；（2）掌握<table>、<caption>、<tr>、<th>、<td>等表格標簽的區(qū)別；（3）掌握表格按行分組和按列分組的方法；（4）掌握表格標簽常用的屬性，能夠應用屬性添加表格樣式；（5）掌握表格跨行、跨列、跨行跨列的設置方法，能夠制作不規(guī)則表格；（6）掌握表格的CSS屬性，能夠使用CSS設置表格樣式；（7）掌握使用CSS制作細線表格的方法；（8）掌握使用CSS制作圓角表格的方法；（9）掌握使用CSS制作自適應表格的方法；（10）掌握使用CSS制作隔行換色表格的方法。2、技能目標（1）熟練應用表格相關標簽在頁面中創(chuàng)建表格；（2）熟練應用CSS美化表格；（3）熟練應用自適應表格。3、思政目標（1）通過實施“授課+體驗”教學模式，引導學生親自探尋編程的樂趣，將課堂理論知識講解與思考相結合，培養(yǎng)學生理論聯(lián)系實際的良好學習習慣；（2）通過多元化的教學形式，將充滿正能量的主流價值觀傳遞給學生，將科學育人與學科育人相結合，在潛移默化中實現(xiàn)育人效果的內化于心、外化于行；（3）通過小組合作的模式，提升團隊交流協(xié)作能力，在完成創(chuàng)新任務中創(chuàng)新應用，深入掌握新知識與新技能，強化了學生的創(chuàng)新意識。教學重點、難點掌握使用CSS制作細線、圓角表格、自適應表格、隔行換色表格的方法。教學設計授課提綱及重難點分析教學方法及課程思政設計教學時間任務13制作“熱銷排行榜”一、任務引入在早期的網(wǎng)頁設計中，表格因其極具結構化的表現(xiàn)形式，主要用于整合頁面中的元素進行排版。但隨著網(wǎng)頁設計的標準化，HTML5中增加了許多格式化標簽，不再使用表格標簽作為頁面元素的容器，所以在如今的網(wǎng)頁設計中，表格主要用來顯示數(shù)據(jù)。本任務通過為“網(wǎng)上書店”頁面制作“熱銷排行榜”區(qū)域，練習表格的使用方法。二、相關知識日常生活中，為了清晰地顯示數(shù)據(jù)或信息，我們常常會使用表格對數(shù)據(jù)或信息進行統(tǒng)計，同樣在制作網(wǎng)頁時，為了使網(wǎng)頁中的元素有條理地顯示，也可以使用表格對網(wǎng)頁進行規(guī)劃。表格在網(wǎng)站開發(fā)中應用廣泛，幾乎所有HTML頁面都或多或少地采用了表格。表格可以靈活地控制頁面的排版，使整個頁面層次清晰。學好網(wǎng)頁制作，熟練掌握表格的各種屬性是很有必要的。13.1創(chuàng)建表格表格是由行和列組成的二維表。每個表格均有若干行，每行有若干列，行和列圍成的區(qū)域是單元格。單元格的內容是數(shù)據(jù)，也稱數(shù)據(jù)單元格，數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。13.2表頭與標題13.2.1表頭13.2.2標題13.3表格分組13.3.1按行分組13.3.2按列分組13.4表格標簽的屬性13.4.1<table>標簽的屬性1.border屬性2.cellspacing屬性3.cellpadding屬性4.width屬性和height屬性5.align屬性6.bgcolor屬性7.background屬性13.4.2<tr>標簽的屬性13.4.3<td>標簽的屬性1.跨行2.跨列3.跨行、跨列三、資源準備四、實踐操作-使用表格制作“網(wǎng)上書店”頁面的“熱銷排行榜”五、總結評價任務14美化“熱銷排行榜”表格一、任務引入在網(wǎng)頁中使用表格可以清晰直觀地顯示數(shù)據(jù)。本任務首先介紹CSS3中表格的相關樣式，然后通過美化“網(wǎng)上書店”頁面“熱銷排行榜”區(qū)域的表格，練習使用CSS3美化表格的方法。二、相關知識14.1表格的CSS屬性14.1.1border和border-collapse屬性14.1.2border-spacing屬性14.1.3caption-side屬性14.1.4empty-cells屬性14.1.5table-layout屬性14.2制作圓角表格圓角表格是表格常用的表現(xiàn)形式，CSS中常使用border-radius屬性設置表格的圓角。14.3制作自適應表格14.4制作隔行換色表格三、資源