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

二、課程授課教案項(xiàng)目2共5個(gè)項(xiàng)目講課主題網(wǎng)頁樣式表CSS學(xué)時(shí)12學(xué)時(shí)教學(xué)目標(biāo)1、知識(shí)目標(biāo)（1）了解CSS發(fā)展歷程、掌握CSS語法格式、添加樣式的3種主要方式、CSS基礎(chǔ)選擇器；（2）掌握CSS文本樣式屬性、文本外觀樣式屬性、理解CSS層疊性、繼承性與優(yōu)先級(jí)；（3）掌握在網(wǎng)頁中應(yīng)用圖像、音頻、視頻的方法；（4）掌握使用CSS3美化圖像、背景、以及設(shè)置漸變背景的方法；2、技能目標(biāo)（1）理解三種形式的樣式表的區(qū)別，并能根據(jù)實(shí)際情況進(jìn)行有效的選擇和應(yīng)用；（2）能夠熟練應(yīng)用選擇器設(shè)置元素樣式；（3）能夠綜合應(yīng)用段落、圖像、背景、音頻、視頻等樣式美化頁面。3、思政目標(biāo)（1）不斷加強(qiáng)行業(yè)標(biāo)準(zhǔn)和和行業(yè)規(guī)范的學(xué)習(xí)；（2）培養(yǎng)學(xué)生良好的審美能力，在學(xué)習(xí)中發(fā)現(xiàn)美、創(chuàng)造美；（3）學(xué)無止境，在不斷深入學(xué)習(xí)的過程中，踐行謙虛謹(jǐn)慎的優(yōu)良作風(fēng)，培養(yǎng)精益求精的工作作風(fēng)。教學(xué)重點(diǎn)、難點(diǎn)掌握使用CSS3美化圖像、背景、以及設(shè)置漸變背景的方法；熟練應(yīng)用選擇器設(shè)置元素樣式以及綜合應(yīng)用段落、圖像、背景、音頻、視頻等樣式美化頁面。教學(xué)設(shè)計(jì)授課提綱及重難點(diǎn)分析教學(xué)方法及課程思政設(shè)計(jì)教學(xué)時(shí)間任務(wù)4制作“鮮花導(dǎo)購”頁面一、任務(wù)引入通過前面的學(xué)習(xí)，小H已經(jīng)掌握了HTML5新增的結(jié)構(gòu)標(biāo)簽，會(huì)使用分組標(biāo)簽以及交互式標(biāo)簽做出具有簡單交互效果的頁面，同時(shí)也可以通過標(biāo)簽的全局屬性進(jìn)行相關(guān)的設(shè)置，達(dá)到一定的網(wǎng)頁效果?？墒牵傆X得自己的頁面不如別人的“高、大、上”，究其原因才知道，原來還存在著“網(wǎng)頁美化”這一說。怎樣才能讓網(wǎng)頁“變美”呢？由此開啟了本次的學(xué)習(xí)之旅。網(wǎng)頁的美化包括很多方面，今天就從最基本的學(xué)起，主要包括CSS發(fā)展歷程、CSS核心基礎(chǔ)、CSS基礎(chǔ)選擇器。二、相關(guān)知識(shí)4.1CSS概述4.1.1CSS發(fā)展歷史4.1.2CSS3瀏覽器支持情況4.2CSS核心基礎(chǔ)4.2.1CSS樣式規(guī)則4.2.2引入CSS樣式表4.2.3內(nèi)嵌式4.2.4鏈入式4.2.5CSS基礎(chǔ)選擇器（1）標(biāo)記選擇器（2）類選擇器（3）id選擇器（4）通配符選擇器（5）標(biāo)簽指定式選擇器（6）后代選擇器（7）并集選擇器三、資源準(zhǔn)備四、實(shí)踐操作-制作“鮮花導(dǎo)購”頁面五、總結(jié)評(píng)價(jià)任務(wù)5制作“荷塘月色”頁面一、任務(wù)引入小H通過前面的學(xué)習(xí)，已經(jīng)了解了CSS的發(fā)展歷程以及CSS的核心基礎(chǔ)（包括CSS語法規(guī)范、CSS基本選擇器），已經(jīng)能夠?qū)撁孀龊唵蔚拿阑?，但是，這對(duì)于追求專業(yè)級(jí)頁面效果的小H來說，這些還遠(yuǎn)遠(yuǎn)不夠，還需要進(jìn)一步學(xué)習(xí)CSS美化頁面的其它相關(guān)知識(shí)，由此開啟了本次的學(xué)習(xí)之旅。網(wǎng)頁的美化包括很諸方面，今天就對(duì)CSS美化文本以及CSS高級(jí)特性做詳細(xì)學(xué)習(xí)。二、相關(guān)知識(shí)5.1文本樣式屬性5.1.1字體樣式屬性（1）font-size:字號(hào)大?。?）font-family:字體（3）font-weight:字體粗細(xì)（4）font-style:字體風(fēng)格（5）font:綜合設(shè)置字體樣式（6）@font-face屬性（7）word-wrap屬性5.1.2文本外觀屬性（1）color:文本顏色（2）letter-spacing:字間距（3）word-spacing:單詞間距（4）line-height:行間距（5）text-transform:文本轉(zhuǎn)換（6）text-decoration:文本裝飾（7）text-align:水平對(duì)齊方式（8）text-indent:首行縮進(jìn)（9）white-space:空白符處理（10）text-shadow:陰影效果（11）text-overflow:標(biāo)示對(duì)象內(nèi)溢出文本5.2CSS高級(jí)特性5.2.1CSS層疊性與繼承性（1）層疊性（2）繼承性5.2.2優(yōu)先級(jí)三、資源準(zhǔn)備四、實(shí)踐操作-制作“荷塘月色”頁面五、總結(jié)評(píng)價(jià)任務(wù)6制作“菜品欣賞”圖文頁面一、任務(wù)引入通過前面的學(xué)習(xí)，小H已經(jīng)掌握了在HTML5文檔中添加CSS3樣式的方式，包括行內(nèi)樣式、內(nèi)嵌樣式、外鏈樣式等，也學(xué)習(xí)了基本的選擇器、組合選擇器、能通過選擇器的使用挑選出想要設(shè)置樣式的頁面內(nèi)容。在此基礎(chǔ)上，也掌握了簡單的文本樣式，能夠?qū)σ粋€(gè)頁面做簡單的美化效果。但是，想要使頁面效果更美觀，僅掌握了上述知識(shí)和技能還遠(yuǎn)遠(yuǎn)不夠，還需要學(xué)習(xí)圖像、視頻、背景的美化方法，由此開始了本次學(xué)習(xí)之旅。二、相關(guān)知識(shí)6.1添加圖像與圖標(biāo)6.1.1添加圖像6.1.2添加圖標(biāo)6.2添加流6.3嵌入多媒體文件6.3.1嵌入音頻6.3.2嵌入視頻6.4使用CSS3美化圖像與背景6.4.1圖像樣式1.圖像大小2.圖像邊框（1）邊框樣式。（2）邊框顏色。（3）邊框?qū)挾取?.不透明4.圓角圖像5.圖像陰影6.美化視頻元素三、資源準(zhǔn)備四、實(shí)踐操作-制作“菜品欣賞”圖文頁面任務(wù)7制作“音樂排行榜”頁面一、任務(wù)引入通過前面的學(xué)習(xí)，小H已經(jīng)掌握了圖片、視頻的美化方法，基本上能夠做出較好的“圖文混排”效果。但是，學(xué)無止境，小H對(duì)頁面美化的追求并未止步，他還想獲得更多更美妙的頁面效果，由此開始了本次學(xué)習(xí)之旅。本次學(xué)習(xí)，將主要學(xué)習(xí)背景樣式的美化方法，包括背景圖像、浮動(dòng)屬性、背景線性漸變和徑向漸變等。二、相關(guān)知識(shí)7.1背景樣式1.設(shè)置背景圖像（1）設(shè)置背景圖像（2）設(shè)置背景圖像的顯示方式（3）設(shè)置背景圖像的顯示位置（4）固定背景圖像（5）設(shè)置背景圖像大?。?）設(shè)置背景圖像的位置區(qū)域（7）設(shè)置多個(gè)背景圖像（8）設(shè)置背景圖像的裁剪區(qū)域（9）CSS3的多重背景2.設(shè)置背景顏色7.2圖文混排7.3漸變樣式7